小屋創作

日誌2016-10-08 01:13

[達人專欄] 只要三分鐘！教你如何簡單輕鬆製作動態旋轉圖～　是不可能的

作者：Endeavor



大家好~ 由於之前有人問我該怎麼會旋轉的圖，因此今天就和大家分享一下，該如何簡單製作出開箱文的全身動態旋轉圖。 什麼是全身動態旋轉圖呢? 因為這個名詞是我自己取的，所以我也不知道意思XD 靠，別打我... 簡單來說就是會動會轉的全身圖。

OK，我認真說明一下，要簡單實現出這個功能，我自己想出來大概有兩種簡單的形式。一種是用常見的GIF檔，就是大家常常在FB看到會動一直無限循環然後有人會騙你45分鐘後那桶水會倒完之類的那種。 另外一種方式，就是在網頁上使用前端語言例如 Javascript 來實現這個功能。今天就跟大家分享一下這兩種如何製作出會動的全身旋轉圖。



~00. 準備篇~

首先，要製作出會轉的圖，你必須先拍出各個角度的照片，如果以為一張照片就可以做到的話，可能讓你失望了  

例如你要轉一圈的話，就真的要先將你的模型轉一圈，然後每個角度拍一張。 不過經過我的測試，轉一圈大約只需要12~15張左右，也就是每30度左右拍一張，串起來的效果就夠順暢了。下面照不同數量圖片來示範一下效果 (進入後請用滑鼠滾輪讓它動起來)



>這個是 5張 的效果，請點擊圖片進入連結<





>這個是 10張 的效果，請點擊圖片進入連結<





>這個是約 15張 的效果，請點擊圖片進入連結<




>這個是約 20張 的效果，請點擊圖片進入連結<



我想經過上面的體驗，大家應能夠了解圖片數量，決定是否順暢的關鍵。個人認為15張左右已經足夠順暢，在這個範圍可增減2~3張是沒有問題的。當然遇到你喜歡的作品，可以盡量拍瘋狂拍，這樣出來的流暢度絕對會讓你滿意的(當然後製花的功夫也有你受的...) 另外還有一個決定順暢度的因素，就是模型選轉的Z軸是否固定，如果單純放在平面上轉的話，很有可能轉一下手一抖，模型的位置也跟著跑掉了。這樣做出來的效果看起來會跳動，即使張數多還是會覺得流暢感不足，例如下面的例子 :

這個是約20張的效果，不過有震動感，請點擊圖片進入連結



感覺並不像上面的沖田這麼順暢，模型的位置並不是固定的，因此串連起來的時候產生跳動感，應該要避免。解決方法的話，我是直接買個可以旋轉的小圓盤放在下面，並將模型放在正中間，大致上就可以避免這種現象。

前提是相機要固定住
前提是相機要固定住
前提是相機要固定住

因為很重要，所以要講三遍


~01. 工具篇~

簡單介紹幾項在過程中會用到的工具

File Blender


在處理的過程中，有很重要的一項就是調整圖片的大小，這個小工具可輕鬆將圖片resize。除了這個功能之外，還可以轉檔、旋轉...等功能，算是個五臟俱全的小工具，大家可以玩看看。

MyRename


當你拍了好幾張連續的圖片之後，可能需要批次將圖片依序命名，這時你就會需要用到這個軟體，可以快速方便的照你想要的方式命名。這項功能在網頁旋轉圖的地方會較實用，因為不規則的命名會讓你打字到手斷掉。


Ulead GIF Animator


這個是製作GIF的程式，將你拍好連續的圖片丟進去就會幫你製作出GIF檔，下一章節會跟各位介紹流程。


Sublime Text


簡單來說是文字編輯器，大多是軟體攻城獅在用，也是我平常寫程式用的工具，輕巧簡單好上手。跟記事本最大的差異，在於支援不同語言編碼會幫你highlight某些字，看起來會比較輕鬆。這個在我們用網頁製作旋轉圖的時候會用到，到時再跟各位說明。





~02. GIF 篇 ~

GIF應該算是最簡單的做法，而且目前已經有大量的工具幫助我們快速製作出GIF檔。這次我們就用個簡單的小工具 Ulead GIF Animator 來完成這項任務吧!

首先我們當然要先拍一堆連續的圖片，最簡單的方式就是固定住相機，然後轉一下模型拍一張，就這樣拍拍拍一圈回來。如果要做成GIF圖的話，大約10看起來的效果就差不多了~ 當然有餘力的話可多拍幾張，每張轉的角度小一點，這樣看起來會更順暢。 OK，假設我們拍好一堆圖片了，我用亞絲娜妹妹做個範例 :




總共8張，其實算是少了，這樣轉起來有點卡卡的。 接下來，開啟你事先下載好的
Ulead GIF Animator

好的，開啟 Ulead GIF Animator 之後，會看到歡迎畫面



選擇動畫精靈，然後提醒一下，這款 Ulead GIF Animator 支援圖片最大邊長為2000，因此記得事先使用File Blender調整圖片大小。



下一步，看到新增影像就把拍好的圖加進來，然後下一步。接下來要設定畫格時間，簡單來說就是一秒會跑幾張圖的概念，上下兩個其實都是一樣的意思，只是上面問你一張圖要顯示多少單位時間，下面問你每秒要顯示幾張，選一個填就好。我個人習慣一張顯示11~13單位時間左右 (每單位時間為1/100秒)。



然後就下一步點點點，看到完成就用力按下去，收工。 可以看到視窗左上方有三個標籤，選擇預覽就可以看看效果如何



如果覺得轉太快，或是轉太慢，可以將下面的圖片全選，點擊右鍵選擇畫格內容來修改




OK，當你覺得滿意之後，找到左上角的存檔點下去，選擇存成GIF檔




大功告成







~03. 決戰Web篇 ~

網頁呈現的話，就像是我在前面示範張數差異的幾個範例，點進去大概就是那樣的效果。其實製作的方式很簡單，我將網頁程式簡單整理一下，拿掉css檔之類不必要的東西，讓大家直接就可以使用。由於我本身不是做前端的攻城獅，因此美美漂漂亮亮的頁面還是由各位大大自行發揮，應該不管怎麼做都比我弄得好看就是了  

點擊下載製作好的範例檔



下載解壓縮之後，理論上應該會看到兩個資料夾和一個檔案，簡單說明一下images/ 就是放拍好的連續圖片，js/ 是放置 javascript 等檔案的地方，sample.html 就是我們開啟顯示用的網頁檔



點開 images/ 會看到替大家準備好的圖片，這次幫我們示範的模特兒是環姐，請大家拍拍手~~




非常好，接下來用前面介紹的 Sublime Text 開啟 sample.html 這個檔案 (當然你想用記事本也可以，只要是文字編輯工具應該都沒問題)

Sublime Text


好的，打開 sample.html 後會看到一大堆英文，這個就是 html 的原始碼，我們的瀏覽器會依照這些原始碼轉換成我們一般看到的網頁樣式。不過這不是我們今天的重點，我幫大家標上了註解，請大家找到這一段



這段就是指定程式要幫我們循環撥放的圖片有哪些。可能細心的你已經發現了，明明 images/ 資料夾中有9張圖片，怎麼這邊只放5張呢? 是的，這邊就是讓大家練習的地方，只要複製其中一行貼在下面，將 00x.jpg 修改為正確的圖片名稱即可，請大家將 006 ~ 009 給補上吧!



我猜你一下就解決了，不錯不錯。之後這邊就是放你自己圖片名稱的地方，而你的圖片就是放在 images/ 這個資料夾中。 記得有順序性喔~ 程式碼會照這個順序讀取。 好的，修改完之後記得存檔，然後我們就可以看看結果囉! 直接點擊 sample.html 這個檔案，或是用你平常在用的網頁瀏覽器點開它



然後就可以用滑鼠滾輪轉轉轉了~ 很簡單對吧! 之後就可以加上你自己的背景、CSS等設定，製作成美美的網頁讓大家欣賞啦! 這邊提醒一下，由於我為了頁面觀賞方便性，因此設定了邊長限制。之後自己的圖片建議設定 高度800 就好了~ 如果想自行調整的話，可以參考 js/circlr.min.js 這個檔案，程式教學並不是今天的重點，還請有興趣的人自己改看看。




這次的教學就到這邊，我們下次再見囉!


158

34

LINE 分享

相關創作

2024/04 小說、遊戲、周邊開箱

[公視P#新聞實驗室] 娃友為什麼迷上矽膠娃娃

＜景品開箱＞[DXF] 小玉

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準，可能無法使用新的應用程式來呈現網站內容，在瀏覽器支援度及網站安全性的雙重考量下，為了讓巴友們有更好的使用體驗，巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特：
。Google Chrome（推薦）
。Mozilla Firefox
。Microsoft Edge（Windows10以上的作業系統版本才可使用）

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營，請將 gamer.com.tw 加入廣告阻擋工具的白名單中，謝謝 !【教學】