創作內容

158 GP

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

作者：Endeavor│2016-10-08 01:13:14│巴幣：1,335│人氣：16585

大家好~ 由於之前有人問我該怎麼會旋轉的圖，因此今天就和大家分享一下，該如何簡單製作出開箱文的全身動態旋轉圖。什麼是全身動態旋轉圖呢? 因為這個名詞是我自己取的，所以我也不知道意思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 收藏 106 引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=3346580
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：PVC|Figure|開箱|模型

【EVA】真希波·瑪麗·伊拉絲多莉亞斯

【戀上換裝娃娃】喜多川海夢

【青豬】櫻島麻衣

[達人專欄] 【影片】TechGear 初秋 1/7模型開箱影片分享 ~Pan Piano~

開箱:黏土人1118DX 趙靈兒

留言共 34 篇留言

齊格菲奇恩・高雄尼克：
真是漂亮喔。[e35]

我已經搶到頭香了。[e35]

10-08 01:31

Endeavor：
超快[e19]10-08 14:57

Dark Matter：
不錯學到東西

10-08 01:42

Endeavor：
感謝~ 寫的時候會擔心內容不夠充實，沒辦法幫助到大家。有您這句話我就放心了~10-08 14:59

送金寶叔叔入土聖盾使：
真的會有人認為只要一張照片就能辦到嗎…

10-08 01:59

Endeavor：
以前我真的會這樣幻想...[e5]10-08 14:59

蒼空時雨(´･∀･｀)：
推個之後慢慢看

10-08 02:04

Endeavor：
好的，在您看完之前絕不刪文><10-08 15:00

軒：
我要盡力地偷懶!

10-08 02:07

Endeavor：
我也要!!! 偷懶是我的最高指導原則[e22]10-08 15:01

sine：
專業教學

10-08 02:19

Endeavor：
感謝您的鼓勵~ 還有很多需要改進的地方[e34]10-08 15:02

艾薇諾雅：
也有另一種選擇現在網拍都有個人工作室在賣自製的展示轉盤
手動電動都有也可以改變方向和快慢大約NT500左右就能入手

10-08 04:27

Endeavor：
我剛剛有照著您的話，到露天稍微掃過一遍~ 有看到您說的遙控展示轉盤，還在看看哪個會比較適合~ 感謝提供資訊[e35]10-08 15:03

只肛五人創造莖技騎雞：
還有個選擇
找個美女拍片

10-08 04:54

Endeavor：
肌肉兄貴放上去轉，感覺場面也是挺壯觀的[e6]10-08 15:03

食人妖戰士超讚!：
超實用！

10-08 05:30

Endeavor：
感謝~[e35] 如果有幫助到您的話是最好的[e35]10-08 15:05

舞：
GIT這方式學到，滿實用的。
不過gif那套軟體的間隔延遲有個小錯誤，他的延遲單位時間是以10ms作為基準，這地方很容易被忽略，所以那段11～13ms用11～13時間單位來表示比較正確

10-08 05:54

Endeavor：
啊! 是的，感謝您的指正! 的確是這樣，立刻修改~~ 很感謝您的細心[e35]10-08 14:56

凱西：
棒棒呦

10-08 09:17

Endeavor：
萌萌哒10-08 15:05

ひきこもり星人：
也別管旋轉圖了，暴力脫加白果醬希望

10-08 10:03

Endeavor：
在旋轉的時候淋上煉乳，讓我想到以前吃的剉冰...[e5]10-08 15:06

DeltaQ-47@銀河航路：
其實用Adobe PS的動畫製作功能就可以了...

10-08 10:43

Endeavor：
嗯嗯，如果製作GIF的話工具的確還滿多可選擇的~ 不過平常我只有在用LR，對PS其實不太熟悉，因此製作GIF就找個較快上手的小工具來使用了[e35]10-08 15:08

法因斯：
20張比較順~
不知道36張會如何[e22]

10-08 10:48

Endeavor：
聽說裙子會飄起來喔~~~[e5] 真心不騙10-08 15:08

衝擊的海洋：
真的嗎!!只要三分鐘真的太好了!!所以我也.....不可能給我打前面!!!!
話說好久沒看文了....感謝大大讓我有圖ㄎㄠ....看!看!

10-08 11:21

Endeavor：
哈哈，不好意思欺騙到大家~ 真的好久不見啦! 終於看到您在這篇留言了[e7]10-08 15:10

：
公仔旋轉帶給視覺的衝擊力說實在的不如兩條肉色的大腿加上飛揚的裙擺，明明什麼都看不見大腦卻覺得很刺激

10-08 12:00

Endeavor：
真的! 心中會一直有種裙襬漸漸飄起來的期待[e5] 轉完一圈之後一定要讓他再轉一圈，會想說可能可以看見剛剛沒看到的東西10-08 15:12

鋼鐵丹尼 Danny Wu：
感謝造福人群的教學
想當初愛麗絲我拍了256張......想讓她究極動起來ಠ౪ಠ

女巫原本也要拍，但拍兩次都在100多張時失敗，就放棄了......(躺

10-08 12:59

Endeavor：
哇靠... 256張是什麼樣的概念[e11] 太扯了吧...10-08 15:13

鋼鐵丹尼 Danny Wu：
200張真的能超順，看了超爽，但耗時也容易失敗，女巫就是因為底座不規則，導致位移時我沒發現.......因為太順暢，只要一有差錯就得重拍。
光是瘋狂按快門也要拍一小時.......

10-08 13:01

Endeavor：
您打算用網頁的方式還是用GIF呢? GIF塞256張我怕檔案會超級大XDD10-08 15:13

小米：
有懶人版你拍下的時候案編號順序排列製成動畫就用編排就很快了

10-08 13:56

Endeavor：
您是指在PS中嗎? 因為PS我較不熟，大多是用LR，之後會嘗試多用PS這個工具 (想做Lived 2D要用到的屍塊)[e5]10-08 15:17

月下詩人：
對不起QAQ 我的眼睛完全被後面的路人帥哥給吸引住了XD

10-08 14:29

Endeavor：
モブ超帥!!10-08 15:18

鋼鐵丹尼 Danny Wu：
http://imgur.com/aHvHgmr 我的在這
其實還好畢竟動圖我全部壓縮放進PS裡匯成一張GIF 尺寸500X331 大小25MB 最後上傳到圖床

我希望能鉅細靡遺的呈現 250張已經算是定格動畫了

10-08 15:20

Endeavor：
哈哈，也太酷了吧! 250張的效果大概就跟拍影片差不多了XD 對了~ 我其實之前有想到，如果把拍攝的模型丟到PS裡面分解成屍塊，然後用Lived 2D製作成會動的圖，不知道效果如何? 目前還沒有看到有人這樣嘗試過~10-08 17:31

久遠·愛塔尼亞：
其實我覺得movgear會比較好用一點

10-08 17:15

Endeavor：
感謝推薦[e35]10-08 17:31

oL～不連續存在～：
1000宅幣 (1/10) !
感覺這是你的專利RRR居然這樣公開教學[e28]

10-08 19:48

Endeavor：
感謝大大贊助~~[e3] 話說我自己認為有什麼就和大家分享，這樣大家一起進步，我們也可以看到其他更棒的開箱文呀[e5] 或許一開始只是個簡單粗淺的作法或想法，但推廣出去之後一定會有人想到更多的用途，讓整個環境更加進步[e22]10-08 21:10

鋼鐵丹尼 Danny Wu：
我不懂Lived 2D這軟體不過既然要動起來就會牽扯光影的問題所以拍一張分屍應該無法除非變成賽璐璐風格就是像日本動畫一樣XD

10-08 21:04

Endeavor：
嗯嗯 Live2D原本是讓一張靜畫變成會動的圖，大多是動漫風格。所以還不確定用在實物上會有什麼奇怪的效果[e6]10-08 21:07

鋼鐵丹尼 Danny Wu：
試了就知道了~~~以給~~~~~~~

10-08 21:08

Endeavor：
嗯嗯我最近就是想嘗試這個~ 不過目前還在摸索如何用PS把一張圖給分解成屍塊。等我研究出來之後應該就會有所進展了[e3]10-08 21:12

裝甲擲彈兵拜森：
所以幀數越高畫面看起來會月連續

10-08 21:51

Endeavor：
嗯嗯不過對於拍攝者來說，就是要拍更多的圖和花更多的時間處理，所以我認為只要抓一個平衡的值大約15~20張其實就夠了。當然如果要1~200張也是可以，只要時間夠的話XD10-09 00:41

姬柊喵：
推推不過懶XD

10-09 19:05

Endeavor：
這真的很麻煩XD 我也是每次都想偷懶[e5]10-15 14:28

煞氣a露水小腰驚：
感謝教學！

10-09 20:54

Endeavor：
希望有幫助到您~~[e35]10-15 14:28

草莓睫毛膏：
之前也用過 Ulead GIF Animator，不過現在都改用PhotoScape，不過話說還是用 javascript 寫出來的效果好，GIF限定256色、稍微放大或看仔細就整個不行了。

10-10 20:41

Endeavor：
對呀~~ GIF如果是做放在FB那種有趣的圖，還算可以勘用~ 反正效果到就好。可是要當作展示或是需要精緻度的話，就完全無法達到要求了>< 所以直接用javascript的確是較好的解法之一10-15 14:30

傻傻不睡覺：
完全懶得用!以後也不想用!! 但是這不妨礙我拿早餐跪在電腦前膜拜!!!

10-11 06:13

Endeavor：
別這樣>< 早餐要吃身體要顧10-15 14:30

尋找好動漫中的新手：
偶然路過進來看到才發現，版主選的角色不是都穿膝上襪就是包裹住整個腰部含以下的褲襪啊，除了在其他討論區看到的蒼藍鋼鐵戰艦裡的高雄這個角色所以有些印象，但是其他的角色是哪部漫畫還是動畫的完全不知道，求解答，謝謝你

10-14 11:58

Endeavor：
哈哈哈! 大大您眼光真不錯，果然發現我選角的喜好了，不錯不錯!如果由上往下看的話 :
1. 狐巫女 - [IS] 箒
2. 萌萌的狐狸 - [Fate Grand Order] 玉藻前私服ver
3. 兔女郎 - [蒼藍鋼鐵戰艦] 高雄
4. 還是兔女郎 - [強襲魔女] 夏洛特
5. 拿劍的金髮妹子 - [Fate Grand Order] 沖田總司
6. 白色衣服的姊姊 - [戰場女武神] 塞露貝利亞
7. 躺著的妹妹 - [刀劍神域] 亞絲娜
8. 黑色內衣的姊姊 - [ToHeart2] 向坂環
------------------------------
這每一隻我都有開過箱，如果有興趣的話也可點進去看看喔~[e35] 感謝10-15 14:37

尋找好動漫中的新手：
好的，謝謝你

10-15 16:23

Endeavor：
不會~[e34]10-15 16:31