新手設(shè)計(jì)師相較于資深設(shè)計(jì)師，后者技能更豐富且全動(dòng)感特效輕松get 面，很多人想要進(jìn)階資深卻苦于培養(yǎng)新技能，筆者在經(jīng)手不少視頻動(dòng)效項(xiàng)目后，對(duì)于技能進(jìn)階頗有心得。

通常技能進(jìn)階的方向有如下兩種：

1. 鉆研型，工作需求和自身特長(zhǎng)強(qiáng)結(jié)合，原特長(zhǎng)在工作中日益強(qiáng)大，影響力不斷提高；
2. 發(fā)散型，工作需求和自身特長(zhǎng)有較大偏差，但經(jīng)過努力讓自己掌握了新技能，極大增強(qiáng)了職場(chǎng)的適應(yīng)力和綜合能力。

兩者各有千秋，筆者則是在發(fā)散型的艱難道路上一路飛奔后，大量積累了視頻剪輯和動(dòng)效制作的經(jīng)驗(yàn)，希望給走發(fā)散型道路的設(shè)計(jì)師助一臂之力。

我們的團(tuán)隊(duì)從“畫報(bào)”開始，一個(gè)偏Loft感覺的照片分享app，到主打音樂MV的“企鵝MV”，最后到玩轉(zhuǎn)動(dòng)效的短視頻app——“閃咖”，一路以來不斷要求設(shè)計(jì)師的技能變得更加立體：設(shè)計(jì)能力從平面層次，提升到能穩(wěn)定輸出動(dòng)效的層次，并且能夠輔導(dǎo)新人去快速入門。

產(chǎn)品的功能形態(tài)不斷變化

個(gè)人的能力值形態(tài)也不斷立體化

然而我會(huì)告訴你，剛來的時(shí)候我只是個(gè)會(huì)PS和畫插畫的愣頭青嗎？

目前的閃咖是一款玩法新鮮的視頻app，最初以表演為切入點(diǎn)，一直持續(xù)更新音樂，濾鏡和動(dòng)效等，為大家能更好的秀出自己而服務(wù)，尤其微信推出了10秒短視頻功能后，引爆了一波刷爆朋友圈的短視頻需求，所以，迫切要求閃咖的設(shè)計(jì)師能在動(dòng)效設(shè)計(jì)上扛起重?fù)?dān)。

那就是我們正在研究的手繪特效。

什么是手繪特效？我們簡(jiǎn)單看一些案例：

1.?蘋果AppleWatch第一代中已經(jīng)出現(xiàn)了在表屏上手繪圖案?jìng)髑榈摹罢{(diào)戲功能”，第二代有更多的加強(qiáng)；目前iPhone7之間也完全支持了，還增加了多種表達(dá)方式；手機(jī)的大尺寸和平板的使用也使得手繪特效在未來有更多的空間。

花樣百出的iPhone短信涂鴉

AppleWatch表屏涂鴉特效

2.?國(guó)內(nèi)裝扮功能較好的app諸如美拍，小咖秀，Snow等，其特效，濾鏡，貼紙等功能都有先發(fā)優(yōu)勢(shì)，而手繪特效則鮮有觸及，國(guó)內(nèi)外幾家大家熟悉的，如美圖秀秀目前只支持在圖片上涂鴉，F(xiàn)acebook尚在研究中無明顯動(dòng)作，F(xiàn)unimate等的視頻涂鴉效果不佳。

美圖秀秀（左）和 Facebook（右）

Funimate

3.?輕特效的操作方法簡(jiǎn)單，玩法多樣，寫字涂畫，雙擊、單擊、滑屏等，未來還可以延伸出更多特別的視覺效果。

在確定了大方向后，應(yīng)該如何快速構(gòu)建這一功能呢？經(jīng)過研究發(fā)現(xiàn)，大部分手繪特效，都是由“粒子特效”為核心展開設(shè)計(jì)的，只要能夠懂“粒子”，一切就迎刃而解。粒子特效乍看之下很復(fù)雜，但我有簡(jiǎn)單輕松的構(gòu)建方法，能讓特效零基礎(chǔ)的設(shè)計(jì)師快速建立起粒子特效的設(shè)計(jì)能力！

下面我要開始嚴(yán)肅的講解了。

設(shè)計(jì)師從0到1建立起粒子特效模塊，至少需要哪些東西來支持呢？下面我以閃咖項(xiàng)目中，手繪特效功能的構(gòu)建為案例，講解建立它所需要的三大“齒輪”:

三大“齒輪”

齒輪一：提出設(shè)計(jì)方案，制作初級(jí)demo的能力——

AE CC – particular粒子插件

AE可以制作大部分我們常見的特效，而“粒子特效”是里面一個(gè)相對(duì)來說比較高級(jí)的插件，我們可以在“效果”，“trapcode”里找到并打開“particular”進(jìn)行制作，大部分網(wǎng)上下載的AE沒有這個(gè)插件，需要單獨(dú)去下載安裝哦。

而使用這個(gè)粒子特效插件，可以做出的效果很多，我列舉一個(gè)基本款：

流星

動(dòng)態(tài)展示gif

其運(yùn)動(dòng)的軌跡也可自定義，具體的方法有興趣研究可以私聊。不直接用AE和開發(fā)經(jīng)行數(shù)據(jù)對(duì)接，是因?yàn)槠鋮?shù)過于龐大且復(fù)雜，每次提供相關(guān)參數(shù)就已經(jīng)消耗了大部分精力和時(shí)間，所以對(duì)于設(shè)計(jì)師來說，僅用于制作特效demo的話就會(huì)輕松不少，但和開發(fā)對(duì)接參數(shù)可以另辟蹊蹺，接下來就會(huì)講到。

齒輪二：批量輸出，并與開發(fā)對(duì)接數(shù)據(jù)的能力——

particle design

官方介紹：粒子特效設(shè)計(jì)是一款功能強(qiáng)大的粒子特效編輯器,目前只支持mac上使用。使用者之間有云端共享功能，可以自定義粒子上傳，自定義背景，和編輯粒子的各種變化的方法。

官網(wǎng)下載地址：https://71squared.com/particledesigner?（需要花錢購(gòu)買正版哦）參考下圖可以快速認(rèn)識(shí)到該軟件的基本形態(tài)。

用我的話來說就是一個(gè)可以彌補(bǔ)AE過于復(fù)雜的數(shù)據(jù)對(duì)接，能和開發(fā)輕松對(duì)接粒子特效的參數(shù)的軟件，還能超級(jí)輕松的做出如下粒子效果：

? ?火花（左）和 ?下雨（右）

閃咖目前在做的特效有：

雪花（左） ?星光涌現(xiàn)（中） ?泡泡飛揚(yáng)（右）

用它制作粒子效果非常便捷，只需要記住幾點(diǎn)就可以融會(huì)貫通，我結(jié)合雪花飄散這個(gè)效果的制作過程來和大家解析：

如何快速設(shè)計(jì)一個(gè)粒子效果

1. 上云端共享尋找案例

設(shè)計(jì)一個(gè)粒子，無從下手的時(shí)候，建議你先點(diǎn)這里進(jìn)入云端，瀏覽并觀看其他用戶已經(jīng)做好并上傳到共享的粒子效果，選擇可借鑒的效果直接拿下來改進(jìn)；自己設(shè)計(jì)好的也可以上傳一份分享給他人參考。

點(diǎn)這里進(jìn)入云端

這些都是使用者共享出來的粒子設(shè)計(jì)

2.?自定義粒子的單位樣式

要原創(chuàng)一個(gè)雪花飄散的效果，首先要通過PS設(shè)計(jì)一個(gè)基本單位，導(dǎo)出PNG格式，然后替換particle design里一個(gè)粒子特效的源圖像，如圖我在PS上設(shè)計(jì)了一個(gè)雪花放到某個(gè)粒子“源圖像”里替換，替換了之后可以得到飄散效果的基本形態(tài)了。

左圖為在源圖像中放入做好的PNG，右圖的基本單位從左邊得來

3.?調(diào)整粒子的動(dòng)態(tài)變化參數(shù)

然后就是調(diào)整參數(shù)，因?yàn)檎{(diào)整參數(shù)時(shí)對(duì)應(yīng)的效果會(huì)在屏幕預(yù)覽中直接呈現(xiàn)，所以大家全部選項(xiàng)都玩一遍后，基本都能掌握，雪花飄散的關(guān)鍵參數(shù)大概如下截圖標(biāo)出的區(qū)域：

4.?粒子相互疊加

很多粒子特效都有特別華麗的效果，其本質(zhì)上是多個(gè)粒子源疊加在一起散射的結(jié)果，其實(shí)就是把多個(gè)粒子放在一起，如我將粒子1,2疊加在一起就能得到混合的效果：

實(shí)心愛心 ?+ ?空心愛心?= 結(jié)合的愛心

以上就是particle design輸出能力的展示。這個(gè)小軟件的遺憾在于不能單獨(dú)輸出demo視頻或者PNG序列，僅能輸出粒子項(xiàng)目文件，所以前期才需要AE的支持來先輸出demo視頻提案，接下來講到的部分，既是解決該問題的方法，又是保持該軟件能長(zhǎng)期發(fā)力的關(guān)鍵。

齒輪三：檢驗(yàn)粒子效果，還原動(dòng)效和導(dǎo)出視頻的能力——

“調(diào)試工具”

從設(shè)計(jì)師的角度來說，檢驗(yàn)分為兩個(gè)步驟，上傳自己設(shè)計(jì)好的粒子；體驗(yàn)它的實(shí)際效果，如下圖：

a傳輸粒子效果（左）?b手機(jī)上調(diào)試 （右）

我一直在強(qiáng)調(diào)團(tuán)隊(duì)，因?yàn)闃?gòu)建這一完整的功能，開發(fā)團(tuán)隊(duì)也功不可沒，particle design畢竟是單純配合開發(fā)輸出的工具，設(shè)計(jì)師無法直接在手機(jī)上進(jìn)行效果檢驗(yàn)，所以需要開發(fā)團(tuán)隊(duì)為設(shè)計(jì)師制作一個(gè)“調(diào)試工具”。接下來則是開發(fā)哥時(shí)間：

開發(fā)負(fù)責(zé)的流程大綱

制作“調(diào)試工具”

1. 調(diào)試客戶端（即手機(jī)上一個(gè)可以檢驗(yàn)特效的app）
2. 服務(wù)器（用于存放設(shè)計(jì)提供的粒子文件）
3. 上傳工具（方便隨時(shí)上傳新設(shè)計(jì)的粒子文件，刪除舊文件）

也就是說，開發(fā)的第一個(gè)任務(wù)是編寫出以上三個(gè)功能，之后按照?qǐng)D中的步驟：從“網(wǎng)頁(yè)工具”上傳粒子到“服務(wù)器”，然后在“調(diào)試客戶端”上下載“服務(wù)器”上存放的粒子文件進(jìn)行效果檢驗(yàn)，關(guān)于“調(diào)試客戶端”如何接受粒子文件的參數(shù)來表現(xiàn)效果，簡(jiǎn)單來說有如下步驟：（以下是開發(fā)哥哥的原話）

1. 從視頻中抽出視頻幀，把每幀圖像推入一個(gè)濾鏡鏈
2. 濾鏡鏈調(diào)用OpenGL接口處理圖像，疊加光繪效果
3. 實(shí)現(xiàn)一套粒子系統(tǒng)解析引擎，計(jì)算光繪效果的粒子坐標(biāo)
4. UI層響應(yīng)用戶手勢(shì)，修正粒子發(fā)射器的位置
5. 濾鏡鏈末端導(dǎo)出處理過的視頻幀，調(diào)用視頻編碼接口寫入視頻文件

以上就是開發(fā)團(tuán)隊(duì)負(fù)責(zé)的部分，設(shè)計(jì)師可以據(jù)此思路推動(dòng)自己的開發(fā)團(tuán)隊(duì)進(jìn)行開發(fā)，需要更深層次代碼交流的，歡迎各位私聊。接下來繼續(xù)回到設(shè)計(jì)層面上。

如何對(duì)粒子效果進(jìn)行檢驗(yàn)

1.?在線傳輸粒子文件到服務(wù)器

通過將particle design中導(dǎo)出的pex文件上傳到服務(wù)器后，將粒子特效保存到服務(wù)器。

點(diǎn)擊導(dǎo)出

選擇文件后，點(diǎn)擊上傳即可

2.?手機(jī)端下載并測(cè)試，生成演示視頻

打開手機(jī)上的調(diào)試工具客戶端，在界面上點(diǎn)擊一下“更新”，它會(huì)自動(dòng)下載服務(wù)器上已上傳的粒子，再點(diǎn)擊“調(diào)試粒子1”可以切換到其他粒子繼續(xù)看效果，直接在屏幕上涂畫即可，鏡頭翻轉(zhuǎn)自拍等，結(jié)合實(shí)際視頻檢驗(yàn)特效的效果。

點(diǎn)擊下方綠色button可以即時(shí)錄制

這是個(gè)星星效果的demo

三個(gè)部件都齊全的你，就擁有了提出粒子特效設(shè)計(jì)方案，配合開發(fā)輸出，并能自行調(diào)試還原效果的能力；接下來要討論的是從1到100的這條路上，這個(gè)模塊還有哪些地方需要完善呢？我個(gè)人總結(jié)了如下幾點(diǎn)：

完善調(diào)試工具

1.“調(diào)試工具客戶端”增加導(dǎo)入視頻的能力

在調(diào)試工具客戶端中，加入可以導(dǎo)入本地視頻的能力，這樣一來，在調(diào)試工具客戶端中檢驗(yàn)效果時(shí)，直接導(dǎo)入一個(gè)合適的視頻，兩者結(jié)合即可輸出一個(gè)完整的視頻特效demo，大大提高了做出設(shè)計(jì)方案的可行性，減少了制作視頻demo的時(shí)間，方便結(jié)合使用場(chǎng)景去檢驗(yàn)制作的粒子特效是否合適，一舉三得。

2.“調(diào)試工具客戶端”支持多重粒子的能力

在調(diào)試工具客戶端中，目前我們僅支持一種粒子特效展示效果，而我們前文提到，多重粒子疊在一起可以變得更加華麗，所以在調(diào)試工具客戶端的模擬展示中，如果能支持結(jié)合2個(gè)以上粒子的檢驗(yàn)方式，那么粒子特效的制作也有更多發(fā)揮空間，能做出更多更牛逼的效果。

3. particle design深層次的玩法挖掘

目前提到過的自定義粒子源和多重粒子疊加都是particle design的核心用法，那么他的價(jià)值還有哪些？這就與他軟件本身的一些參數(shù)有關(guān)，現(xiàn)階段能夠解讀到的參數(shù)作用在本文的軟件介紹部分已經(jīng)提過，而在云共享中仍能看到不少老外大神搞出的五花八門的玩法，這些都需要設(shè)計(jì)師自己來花時(shí)間研究。

撒錢幣

環(huán)環(huán)相扣

到這里，整個(gè)輕松獲得動(dòng)效能力的方法已經(jīng)介紹完了，有此神技，只要和團(tuán)隊(duì)一起合作就能構(gòu)建出粒子特效（當(dāng)然你自己會(huì)寫程序，那你可以一夫當(dāng)關(guān)！），并且優(yōu)化完善后還可以普及給其他的團(tuán)隊(duì)成員，讓粒子特效不再顯得神秘和復(fù)雜。

設(shè)計(jì)師自身則能從曾經(jīng)的平面設(shè)計(jì)師升級(jí)一個(gè)檔次，獲得技能提升的同時(shí)，在團(tuán)隊(duì)中也會(huì)收獲較大的影響力，提升自己在項(xiàng)目運(yùn)作中不可取代的價(jià)值。

如果你的產(chǎn)品也在研究手繪筆觸類的特效，不妨以此為開始走出第一步，在未來獲得更好的方法后，分享給更多的人，感謝您的閱讀。

作者：lionisready

來源：騰訊ISUX