2019-3-20 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
作為視覺(jué)設(shè)計(jì)師你是否會(huì)遇到這樣的問(wèn)題,當(dāng)需要做一個(gè) loading 或者其他動(dòng)效的時(shí)候,總會(huì)或多或少的出現(xiàn)一些問(wèn)題,如何使用更輕量的 Sketch 直接將矢量圖形轉(zhuǎn)到 AE 制作動(dòng)效,如何不再受 GIF 導(dǎo)出的失真問(wèn)題困擾,如何讓開發(fā)完美還原我們的動(dòng)效設(shè)計(jì)稿等,如果你也存在這些疑問(wèn),那以下介紹的2款插件就可以完美的解決這些問(wèn)題。AEUX 是由 Google 團(tuán)隊(duì)推出的,運(yùn)用在 Sketch 和 AE 的一組插件,能將 Sketch 里的圖層以及整個(gè)畫板一鍵導(dǎo)入到 AE 里,同時(shí)能在 AE 里解決圖形分組和分層的問(wèn)題,減少導(dǎo)出圖片或者轉(zhuǎn)入 Illustrator 處理帶來(lái)的不必要的重復(fù)動(dòng)作。
以下是我做的一個(gè)簡(jiǎn)單小案例,通過(guò)此次案例將介紹怎么更好的使用這個(gè)插件:
首先在 Sketch 內(nèi)將圖層進(jìn)行分組,在多圖層的情況下,需要在前期進(jìn)行動(dòng)效構(gòu)思,根據(jù)構(gòu)思在 Sketch 里對(duì)圖層進(jìn)行分組,所做的分組將會(huì)是你在 AE 里的合成分組。
方法一:直接復(fù)制選中圖層
安裝好插件后,打開 AEUX,選擇你將導(dǎo)入到 AE 里的圖層,點(diǎn)擊 Send selection to Ae,同時(shí)在AE里打開安裝的 AEUX插件,在 BUILD COMP 區(qū)域出現(xiàn)了從 Sketch 導(dǎo)入的圖層數(shù)量,勾選 Precomp groups,點(diǎn)擊將自動(dòng)加載入 AE 合成里。
方法二:導(dǎo)出json文件
從 Sketch 的 AEUX 面板里點(diǎn)擊 Export AEUX.json 導(dǎo)出 json 文件,打開 AE 的 AEUX 面板勾選中 Precomp groups,將導(dǎo)出的 json 拖入到 BUILD COMP 區(qū)域,或者點(diǎn)擊「曲別針」icon打開 json 文件。
這樣導(dǎo)入到 AE 里的圖層是以合成的形式展示 Sketch 里的分組。
如果在 sketch 內(nèi),分組圖層不在同一組內(nèi),導(dǎo)入 AE 后會(huì)出現(xiàn)變形和位移的情況。
如果 sketch 內(nèi)形狀圖層有投影/漸變/point type 的編輯形狀時(shí),導(dǎo)入 AE 后將出現(xiàn)投影消失,漸變消失,形狀變形的情況,在遇到這種情況時(shí),會(huì)通過(guò)導(dǎo)出圖片的方式處理。
導(dǎo)入 AE 的 AEUX 面板時(shí)如果沒(méi)有勾選 Precomp groups,多圖層導(dǎo)入的情況下,組內(nèi)的圖層都會(huì)生成在 AE 中的同一個(gè)合成中。
1. Detach symbols
這是一個(gè)解除 symbol 的功能,在 sketch 內(nèi)如果沒(méi)有解除 symbol,導(dǎo)入到 AE 里將出現(xiàn)圖形位移和變形的情況。
2. Flatten shapes
AEUX 支持布爾運(yùn)算,但是在一個(gè)組中混合不同的運(yùn)算符(如添加然后減去)對(duì)于Ae來(lái)說(shuō)比較困難。點(diǎn)擊 Flatten shapes 可以合并布爾運(yùn)算圖形。
3. Images to symbols
Sketch 只能導(dǎo)出它在畫板上看到的內(nèi)容。如果在 sketch 內(nèi)圖像的一部分超出畫板邊界,復(fù)制到 AE 內(nèi)部的圖像將出現(xiàn)位移的情況。導(dǎo)出前點(diǎn)擊 Images to symbols 不會(huì)發(fā)生被裁剪和位移的情況。
1. Come size multiplier:切換倍數(shù)
可以設(shè)置 sketch 畫板的倍數(shù)合成。
2. Auto build artboards:自動(dòng)構(gòu)建合成
導(dǎo)入前勾選此功能,在 sketch 的 AEUX面板中復(fù)制圖層后,在 AE 里不需要任何操作,它會(huì)自動(dòng)復(fù)制圖層導(dǎo)入到創(chuàng)建合成中。
3. Convert to precomp:創(chuàng)建合成
同時(shí)選中單一圖層,可以將他們建立一個(gè)新的合成。
4. Un-Precomp group:解除合成分組
點(diǎn)擊可以解除合成的分組,變成單一的一個(gè)一個(gè)的圖層
5. Toggle Visibility:可以一鍵隱藏和顯示所有的父級(jí)圖層
6. Delete group layers:刪除父級(jí)圖層
雖然現(xiàn)在 AEUX 有些上面所講的功能不能支持,但是在一步步完善,希望可以幫助一些習(xí)慣用 sketch 畫插圖的設(shè)計(jì)師提高動(dòng)效制作效率,減少不必要的操作步驟。
在動(dòng)效制作好后,通常我們會(huì)導(dǎo)出 mov 然后導(dǎo)入 PS 里生成 gif 格式,但是 gif 會(huì)出現(xiàn)質(zhì)量過(guò)低的情況,比如漸變分層,邊緣有毛邊等情況,所以由2017年 Airbnb 團(tuán)隊(duì)開發(fā)的 lottie 動(dòng)效可以完美的解決這些問(wèn)題,而實(shí)現(xiàn) lottie 動(dòng)畫需要在 AE 中安裝一款名為 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生動(dòng)畫的形式在移動(dòng)設(shè)備上渲染播放,在制作動(dòng)效時(shí)導(dǎo)出 json 文件直接給到開發(fā),可以幫助提高實(shí)現(xiàn)動(dòng)效效率,同時(shí)提高動(dòng)效質(zhì)量。
1. 它還有很多的優(yōu)點(diǎn)
2. 在使用中有幾點(diǎn)注意
3. 所需軟件
ZXP installer
下面是一組之前做的頁(yè)面加載loading效果,開發(fā)小哥哥反饋:實(shí)現(xiàn)挺。
4. 步驟
下載ZXP installer:https://aescripts.com/learn/zxp-installer/
下載bodymovin:https://github.com/airbnb/lottie-web
下載之后,點(diǎn)開剛下載的 ZXP,點(diǎn)開頂部 file-open,打開 bodymovin插件。
當(dāng)出現(xiàn)以下界面時(shí)代表已經(jīng)安裝成功。
意外情況:在用 ZXP 安裝 bodymovin插件的時(shí)候出現(xiàn)以下提示。
原因是沒(méi)有通過(guò) Adobe Creative Cloud 下載 AE,需要重新通過(guò) Adobe Creative Cloud 下載。
打開AE,After Effect CC – 首選項(xiàng) – 常規(guī),勾選允許腳本寫入文件和訪問(wèn)網(wǎng)絡(luò)。
打開窗口 – 擴(kuò)展查看是否添加成功。
調(diào)出 Bodymovin 面板,選擇需要導(dǎo)出的合成。
點(diǎn)擊你要保存的 json文件地址,點(diǎn)擊 Render。
點(diǎn)擊 Brown 載入剛導(dǎo)出的 json文件,檢查動(dòng)效是否有誤。
這時(shí)候就可以把 json 文件給到開發(fā),如果 AE 合成中有圖片,需要把圖片放在文件夾內(nèi)一起提供給開發(fā),同時(shí)也會(huì)給到一個(gè) gif文件,如果實(shí)現(xiàn)有不一樣的地方,開發(fā)可以詢問(wèn)設(shè)計(jì)師。
如果想在移動(dòng)端上瀏覽可以打開網(wǎng)址:https://www.lottiefiles.com/,下載安裝移動(dòng)端客戶端(ios/Android)
注冊(cè)登錄成功后打開 Lottie Preview 添加 AE 里用 bodymovin 導(dǎo)出的 json文件。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com