小屋創作

巴哈姆特 APP

專屬 ACG 勇者的廣闊世界

以 APP 瀏覽

日誌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 這個檔案,程式教學並不是今天的重點,還請有興趣的人自己改看看。




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


152

33

LINE 分享

相關創作

【作品分享】鋼彈創鬥者TRY Denial Gundam 阻絕鋼彈 頭像 -紙模型 成品展示-

[達人專欄] 【開箱】老酒新瓶再裝~壽屋 NGNL 遊戲人生 白 1/7

塗鴉~援助女同學

留言

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

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