動感特效輕鬆get 設計師升級篇

lionisready

新手設計師相較於資深設計師,後者技能更豐富且全面,很多人想要進階資深卻苦於培養新技能,筆者在經手不少視頻動效項目後,對於技能進階頗有心得。通常技能進階的方向有如下兩種:

鑽研型,工作需求和自身特長強結合,原特長在工作中日益強大,影響力不斷提高;

發散型,工作需求和自身特長有較大偏差,但經過努力讓自己掌握了新技能,極大增強了職場的適應力和綜合能力。

 

兩者各有千秋,筆者則是在發散型的艱難道路上一路飛奔後,大量積累了視頻剪輯和動效製作的經驗,希望給走發散型道路的設計師助一臂之力。

 

我們的團隊從“畫報”開始,一個偏Loft感覺的照片分享app,到主打音樂MV的“企鵝MV”,最後到玩轉動效的短視頻app——“閃咖,一路以來不斷要求設計師的技能變得更加立體:設計能力從平面層次,提升到能穩定輸出動效的層次,並且能夠輔導新人去快速入門。

 

 

產品的功能形態不斷變化

 

 

個人的能力值形態也不斷立體化

 

然而我會告訴你,剛來的時候我只是個會PS和畫插畫的愣頭青嗎?

目前的閃咖是一款玩法新鮮的視頻app,最初以表演為切入點,一直持續更新音樂,濾鏡和動效等,為大家能更好的秀出自己而服務,尤其微信推出了10秒短視頻功能後,引爆了一波刷爆朋友圈的短視頻需求,所以,迫切要求閃咖的設計師能在動效設計上扛起重擔。

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

 

什麼是手繪特效?我們簡單看一些案例:

1.    蘋果AppleWatch第一代中已經出現了在表屏上手繪圖案傳情的“調戲功能”,第二代有更多的加強;目前iPhone7之間也完全支持了,還增加了多種表達方式;手機的大尺寸和平板的使用也使得手繪特效在未來有更多的空間。

  

花樣百出的iPhone短信塗鴉

 

AppleWatch表屏塗鴉特效

 

2.國內裝扮功能較好的app諸如美拍,小咖秀,Snow等,其特效,濾鏡,貼紙等功能都有先發優勢,而手繪特效則鮮有觸及,國內外幾家大家熟悉的,如美圖秀秀目前只支持在圖片上塗鴉,Facebook尚在研究中無明顯動作,Funimate等的視頻塗鴉效果不佳。

   

美圖秀秀(左)和Facebook(右)

 

Funimate

 

3.輕特效的操作方法簡單,玩法多樣,寫字塗畫,雙擊、單擊、滑屏等,未來還可以延伸出更多特別的視覺效果。

 

 

在確定了大方向後,應該如何快速構建這一功能呢?經過研究發現,大部分手繪特效,都是由“粒子特效”為核心展開設計的,只要能夠懂粒子,一切就迎刃而解。粒子特效乍看之下很複雜,但我有簡單輕鬆的構建方法,能讓特效零基礎的設計師快速建立起粒子特效的設計能力!

下面我要開始嚴肅的講解了。

 

設計師從01建立起粒子特效模塊,至少需要哪些東西來支持呢?下面我以閃咖項目中,手繪特效功能的構建為案例,講解建立它所需要的三大“齒輪”:

三大“齒輪”

齒輪一:提出設計方案,製作初級demo的能力——

AE CC – particular粒子插件

AE可以製作大部分我們常見的特效,而“粒子特效”是裡面一個相對來說比較高級的插件,我們可以在“效果”,“trapcode”里找到並打開“particular”進行製作,大部分網上下載的AE沒有這個插件,需要單獨去下載安裝哦。

 

而使用這個粒子特效插件,可以做出的效果很多,我列舉一個基本款:

流星

動態展示gif 

其運動的軌跡也可自定義,具體的方法有興趣研究可以私聊。不直接用AE和開發經行數據對接,是因為其參數過於龐大且複雜,每次提供相關參數就已經消耗了大部分精力和時間,所以對於設計師來說,僅用於製作特效demo的話就會輕鬆不少,但和開發對接參數可以另闢蹊蹺,接下來就會講到。

齒輪二:批量輸出,並與開發對接數據的能力——

particle design

 

官方介紹:粒子特效設計是一款功能強大的粒子特效編輯器,目前只支持mac上使用。使用者之間有雲端共享功能,可以自定義粒子上傳,自定義背景,和編輯粒子的各種變化的方法。官網下載地址:https://71squared.com/particledesigner (需要花錢購買正版哦)參考下圖可以快速認識到該軟件的基本形態。

用我的話來說就是一個可以彌補AE過於複雜的數據對接,能和開發輕鬆對接粒子特效的參數的軟件,還能超級輕鬆的做出如下粒子效果:

   火花(左)和  下雨(右)

閃咖目前在做的特效有:

雪花(左)  星光湧現(中)  泡泡飛揚(右)

用它製作粒子效果非常便捷,只需要記住幾點就可以融會貫通,我結合雪花飄散這個效果的製作過程來和大家解析:

 

如何快速設計一個粒子效果

1.上雲端共享尋找案例

設計一個粒子,無從下手的時候,建議你先點這裡進入雲端,瀏覽並觀看其他用戶已經做好並上傳到共享的粒子效果,選擇可借鑒的效果直接拿下來改進;自己設計好的也可以上傳一份分享給他人參考。

點這裡進入雲端

這些都是使用者共享出來的粒子設計

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

要原創一個雪花飄散的效果,首先要通過PS設計一個基本單位,導出PNG格式,然後替換particle design里一個粒子特效的源圖像,如圖我在PS上設計了一個雪花放到某個粒子“源圖像”里替換,替換了之後可以得到飄散效果的基本形態了。

    

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

3.調整粒子的動態變化參數

然後就是調整參數,因為調整參數時對應的效果會在屏幕預覽中直接呈現,所以大家全部選項都玩一遍後,基本都能掌握,雪花飄散的關鍵參數大概如下截圖標出的區域:

 

4.粒子相互疊加

很多粒子特效都有特別華麗的效果,其本質上是多個粒子源疊加在一起散射的結果,其實就是把多個粒子放在一起,如我將粒子1,2疊加在一起就能得到混合的效果:

       

 實心愛心  +  空心愛心 = 結合的愛心

以上就是particle design輸出能力的展示。這個小軟件的遺憾在於不能單獨輸出demo視頻或者PNG序列,僅能輸出粒子項目文件,所以前期才需要AE的支持來先輸出demo視頻提案,接下來講到的部分,既是解決該問題的方法,又是保持該軟件能長期發力的關鍵。

 

齒輪三:檢驗粒子效果,還原動效和導出視頻的能力——

“調試工具”

 

從設計師的角度來說,檢驗分為兩個步驟,上傳自己設計好的粒子;體驗它的實際效果,如下圖



a傳輸粒子效果(左) b手機上調試 (右)

我一直在強調團隊,因為構建這一完整的功能,開發團隊也功不可沒,particle design畢竟是單純配合開發輸出的工具,設計師無法直接在手機上進行效果檢驗,所以需要開發團隊為設計師製作一個“調試工具”。接下來則是開發哥時間:

開發負責的流程大綱

製作“調試工具”:

1.調試客戶端(即手機上一個可以檢驗特效的app)

2.服務器(用於存放設計提供的粒子文件)

3.上傳工具(方便隨時上傳新設計的粒子文件,刪除舊文件)

也就是說,開發的第一個任務是編寫出以上三個功能,之後按照圖中的步驟:從“網頁工具”上傳粒子到“服務器”,然後在“調試客戶端”上下載“服務器”上存放的粒子文件進行效果檢驗,關於“調試客戶端”如何接受粒子文件的參數來表現效果,簡單來說有如下步驟:(以下是開發哥哥的原話)

1. 從視頻中抽出視頻幀,把每幀圖像推入一個濾鏡鏈

2. 濾鏡鏈調用OpenGL接口處理圖像,疊加光繪效果

3. 實現一套粒子系統解析引擎,計算光繪效果的粒子坐標

4. UI層響應用戶手勢,修正粒子發射器的位置

5. 濾鏡鏈末端導出處理過的視頻幀,調用視頻編碼接口寫入視頻文件

以上就是開發團隊負責的部分,設計師可以據此思路推動自己的開發團隊進行開發,需要更深層次代碼交流的,歡迎各位私聊。接下來繼續回到設計層面上。

如何對粒子效果進行檢驗:

1.在線傳輸粒子文件到服務器

通過將particle design中導出的pex文件上傳到服務器後,將粒子特效保存到服務器。

點擊導出

選擇文件後,點擊上傳即可

 

2.手機端下載並測試,生成演示視頻

打開手機上的調試工具客戶端,在界面上點擊一下“更新”,它會自動下載服務器上已上傳的粒子,再點擊“調試粒子1”可以切換到其他粒子繼續看效果,直接在屏幕上塗畫即可,鏡頭翻轉自拍等,結合實際視頻檢驗特效的效果。 

點擊下方綠色button可以即時錄製


這是個星星效果的demo

三個部件都齊全的你,就擁有了提出粒子特效設計方案,配合開發輸出並能自行調試還原效果的能力;接下來要討論的是從1100的這條路上,這個模塊還有哪些地方需要完善呢?我個人總結了如下幾點:

完善調試工具

1.“調試工具客戶端”增加導入視頻的能力

在調試工具客戶端中,加入可以導入本地視頻的能力,這樣一來,在調試工具客戶端中檢驗效果時,直接導入一個合適的視頻,兩者結合即可輸出一個完整的視頻特效demo,大大提高了做出設計方案的可行性,減少了製作視頻demo的時間,方便結合使用場景去檢驗製作的粒子特效是否合適,一舉三得。

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

在調試工具客戶端中,目前我們僅支持一種粒子特效展示效果,而我們前文提到,多重粒子疊在一起可以變得更加華麗,所以在調試工具客戶端的模擬展示中,如果能支持結合2個以上粒子的檢驗方式,那麼粒子特效的製作也有更多發揮空間,能做出更多更牛逼的效果。

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

目前提到過的自定義粒子源和多重粒子疊加都是particle design的核心用法,那麼他的價值還有哪些?這就與他軟件本身的一些參數有關,現階段能夠解讀到的參數作用在本文的軟件介紹部分已經提過,而在雲共享中仍能看到不少老外大神搞出的五花八門的玩法,這些都需要設計師自己來花時間研究。

     撒錢幣        

環環相扣

到這裡,整個輕鬆獲得動效能力的方法已經介紹完了,有此神技,只要和團隊一起合作就能構建出粒子特效(當然你自己會寫程序,那你可以一夫當關!),並且優化完善後還可以普及給其他的團隊成員,讓粒子特效不再顯得神秘和複雜。

設計師自身則能從曾經的平面設計師升級一個檔次,獲得技能提升的同時,在團隊中也會收穫較大的影響力,提升自己在項目運作中不可取代的價值。

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

Tags: , , , , , ,

lionisready
lionisready
如何讓你的動畫更自然
上一遍
一起出發 為愛徒色
下一遍
12,095
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧