前排提示：本文多Gif需耐心加載，且需要有一定Ae基礎(chǔ)才能便于理解內(nèi)容。
你有沒有注意過，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過渡），來完成狀態(tài)切換。
當(dāng)我看完上百個動態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計師在進行動態(tài)設(shè)計時則是針對這3部分。
03 Tab Bar動態(tài)類型
動態(tài)效果由弱到強，視覺層級由低到高依次排序：圖標(biāo)動態(tài) — 裝飾元素動態(tài) — 底板卡片動態(tài)。（根據(jù)本文案例效果來排序，但效果不同會有所差異）
▍圖標(biāo)動態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡單的分為：線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長。
但只是單色修剪，看起來很單調(diào)。我們可以在這個動畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產(chǎn)品來說，可能會顯得有些普通。
我們可以考慮使用遮罩來制作動態(tài)，首先在圖標(biāo)周圍繪制幾個圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時間，設(shè)計師們可能會技癢，而將圖標(biāo)繪制的更加豐富，來營造氛圍。
對于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調(diào)整基礎(chǔ)屬性，便能制作出細節(jié)豐富的出場動畫。
（物理狀態(tài)：該物體在現(xiàn)實場景下的狀態(tài)，上圖獎杯真實世界狀態(tài)通常是放置地面，所以出場方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動態(tài)時會更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個獎杯的距離，并記錄關(guān)鍵幀，然后整體再移動一個獎杯距離。耳朵則調(diào)整路徑來完成移動和變形，這樣便能營造出3d旋轉(zhuǎn)的錯覺。
對于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當(dāng)然這類方案很少見，原因在于商業(yè)價值不足，實現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計師可能會用線或點來替代文字，讓整體更簡潔。
國外設(shè)計師Tubik，通過讓點元素在移動時呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過動態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產(chǎn)品。
通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。
▍底板卡片動態(tài)?
這類動態(tài)少見的原因在于其動態(tài)效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產(chǎn)品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時非常麻煩。
我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大小）
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。
這個效果靈感來源于Dribbble設(shè)計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。
看了這么多，其實不難發(fā)現(xiàn)。同一個圖標(biāo)，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說兩句：
每個產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動態(tài)效果也有強有弱。好的動態(tài)應(yīng)該是能與其進行匹配，而不是根據(jù)某個產(chǎn)品得出一個絕對的答案。
本文演示了不同類型圖標(biāo)用什么動態(tài)，并不代表只能這樣用。動態(tài)效果類型遠遠不止這些，而以上只是最常見的動態(tài)屬性組合方式，所以請不要局限你的想法。
在任何時候，海報的圖片處理都是設(shè)計師不可避免的一個步驟，運用對色調(diào)的處理，構(gòu)圖的改變，甚至于風(fēng)格化處理來調(diào)整圖片，使之能夠更加的適合版面，我們今天分享的就是通過對圖片的處理來塑造不同風(fēng)格海報的設(shè)計。
01-
酸性液體金屬效果處理
酸性風(fēng)格它的體現(xiàn)形式通常是鐳射紋理，金屬玻璃材質(zhì)，3D物體材質(zhì)等，其中很多人都好奇金屬玻璃材質(zhì)的做法，也就是如何將普通的圖片轉(zhuǎn)換成酸性圖片，接下來我們將講解酸性圖片效果的處理方法，二話不說，先上效果圖：
步驟一/step 01
導(dǎo)入已經(jīng)摳好的素材，快捷鍵ctrl+shift+u作去色處理
步驟二/step 02
ctrl+j復(fù)制一層，ctrl+i反向一下，并設(shè)置模式為【差值】，ctrl+e合并這兩個圖層，這一步驟要重復(fù)2-3次左右，會形成這樣的效果，做好后的效果有點丑，但是沒關(guān)系，我們接著往下做。
步驟三/step 03
將圖形轉(zhuǎn)化為智能對象，執(zhí)行命令：濾鏡-模糊-表面迷糊（數(shù)值自定，具體數(shù)值可以自行修改，主要將黑白部分過度更加柔和一些）
步驟四/step 04
執(zhí)行命令：濾鏡-風(fēng)格化-油畫（數(shù)值自定，這一步驟可以將黑白之間的過渡更加柔和，形成液體金屬的最終效果）
步驟五/step 05
執(zhí)行命令：濾鏡-濾鏡庫-塑料包裝（數(shù)值自定，這一步驟還是處理黑白之間的過渡，使之更加柔和），最后可以調(diào)整一下亮度和對比度，使之與金屬更加相似。
步驟六/step 06
最后排版上文字，海報就完成啦。
02-
復(fù)古潮流風(fēng)藝術(shù)海報
半調(diào)網(wǎng)屏模式作為印刷中的重要方法，有著其特殊的處理藝術(shù)效果。在ps中，通過色彩模式可以將圖片的效果處理成半調(diào)網(wǎng)屏的像素狀效果。它有著復(fù)古潮流的藝術(shù)效果，下面我將講解如何在ps中給圖片添加半調(diào)網(wǎng)屏藝術(shù)效果，同上，先上效果圖：
步驟一/step 01
在PS中導(dǎo)入圖片，在這種潮流海報中，我們追求特殊風(fēng)格海報設(shè)計，可以在摳圖時故意粗糙的摳圖出來，并執(zhí)行命令：圖像-調(diào)整-黑白
步驟二/step 02
執(zhí)行命令：圖像-模式-灰度，再次執(zhí)行命令：圖像-模式-位圖，調(diào)整參數(shù)像素設(shè)為300，方法使用半調(diào)網(wǎng)屏，點擊確定；
步驟三/step 03
在上一步點擊確定后出現(xiàn)以下界面，頻率越小，效果越強烈，越大效果越輕，角度設(shè)置像素格的旋轉(zhuǎn)角度，形狀可以自行嘗試選擇，我這里選擇的是菱形；
步驟四/step 04
我們需要把位圖模式轉(zhuǎn)換成RGB,需要執(zhí)行兩次命令，第一次執(zhí)行：圖像-模式-灰度，第二次執(zhí)行：圖像-模式-RGB
接著是將弄好的圖片去掉白色底背景，在通道面板，按住ctrl鍵，鼠標(biāo)左鍵點擊其中一個通道，得到白色選區(qū)，快捷鍵：ctrl+shife+i反選選區(qū)，快捷鍵：ctrl+j復(fù)制圖層，隱藏下面的圖層，得到了一個半調(diào)網(wǎng)屏的圖片。
步驟五/step 05
最后排版上文字，就可以得到一張復(fù)古潮流藝術(shù)風(fēng)海報。
03-
炸裂風(fēng)格圖片處理
接下來休息下，我們來做一個非常簡單，但又非常好看且具有形式感的圖片處理方法，炸裂風(fēng)格圖片海報，調(diào)整比較細的方塊可以有刺繡效果，非常具有視覺沖擊力，同時也能使版面產(chǎn)生非常強烈的層次感與形式感。先看最終效果：
步驟一/step 01
只需將圖片導(dǎo)入PS，執(zhí)行濾鏡-風(fēng)格化-凸出，這里可以自行調(diào)整參數(shù)
步驟二/step 02
在版面上排版圖片和文案，這樣一張炸裂風(fēng)格的海報就做好了。
04-
長虹玻璃風(fēng)格海報
長虹玻璃效果顧名思義，就是像玻璃樣式的效果，他能給人一種朦朧的美感，與“模糊”有點類似，它比較適合潮流時尚的一些產(chǎn)品海報設(shè)計時使用，尤其在電商海報中特別常見，接下來我們來詳細講解這種效果的做法吧，先上效果圖：
步驟一/step 01
在ps中新建一個畫布，填充一個50%的中性灰，用矩形工具繪制一個細長的矩形，填充顏色為黑白的線形漸變；
步驟二/step 02
復(fù)制漸變的矩形框，填滿整個畫布，全選復(fù)制出來的矩形框，郵件轉(zhuǎn)換為智能對象，快捷鍵ctrl+shift+s存儲為psd文件，注這是后期用來置換的文件
步驟三/step 03
在畫布中倒入我們準(zhǔn)備好的圖片文件，復(fù)制一層，執(zhí)行命令：濾鏡-模糊-高斯模糊；
步驟四/step 04
執(zhí)行命令：濾鏡-扭曲-置換，在跳出的頁面設(shè)置水平和s垂直比例都為50，置換圖：拼貼，未定義區(qū)域：折回，點擊確定后選擇剛存儲的用來置換的文件；
步驟五/step 05
將剛才線形漸變的矩形置于最上層，混合模式改為柔光，并且調(diào)節(jié)下透明度，這樣長虹玻璃效果就完成啦。
步驟六/step 06
選取工具選擇需要的部分執(zhí)行蒙版，就可以得到一半有玻璃，一半沒有玻璃的效果，然后排版上文字，海報完成！
05-
3D炫彩海報
3d炫彩海報適用于科技，創(chuàng)意等風(fēng)格呈現(xiàn)時使用，它的本質(zhì)是將一張圖進行一種3d化處理，制作起來也是相當(dāng)?shù)暮唵?，且特別能提升版面的形式感與立體感，制作非常簡單，我們一起來做下唄，老規(guī)矩，先上圖：
步驟一/step 01
首先我們需要找一張顏色特別豐富的圖片，最好是像這種發(fā)光的海報，執(zhí)行命令：濾鏡-扭曲-旋轉(zhuǎn)扭曲，設(shè)置相應(yīng)的數(shù)值
步驟二/step 02
執(zhí)行命令：3d-從圖層新建網(wǎng)格-深度映射到-平面，把3d面板里面的預(yù)設(shè)改為【未照亮的紋理】
步驟三/step 03
在3d里面調(diào)整合適的角度后，在圖層面板選擇圖層，點擊鼠標(biāo)右鍵-柵格化3d，快捷鍵ctrl+t將圖層調(diào)整適合大小；
步驟四/step 04
最后排版上文字，海報就完成啦！
06-
塑料薄膜風(fēng)格海報
最后一種是塑料薄膜風(fēng)格海報，這種效果相對來說比較復(fù)雜，所以放在最后一個說，雖然不涉及圖片處理，但是對于海報設(shè)計來說可以說是錦上添花的一種存在，他能讓海報具有一種光澤的質(zhì)感，使其更顯層次感和形式感，這種海報在店招海報或者產(chǎn)品海報中比較實用，廢話不多說，來一起來做下吧，還是老規(guī)矩，上效果圖
步驟一/step 01
我們需要新建一個空白圖層，填充黑色，執(zhí)行命令：濾鏡-渲染-云彩
步驟二/step 02
執(zhí)行命令：濾鏡-液化，這里你可以隨意一點畫，這是將塑料膜的紋路畫出來，這是我畫的樣子；
步驟三/step 03
執(zhí)行命令：濾鏡-濾鏡庫-藝術(shù)效果-繪畫涂抹，畫筆類型選擇火花，這一步是將黑白顏色區(qū)分開來；
步驟四/step 04
再次執(zhí)行命令：濾鏡-濾鏡庫-素描-鉻黃漸變，這一步同樣是為了是將黑白顏色區(qū)分開來，只不過這次的效果更加明顯；
步驟五/step 05
點開通道面板，按住ctrl鍵，隨意單機一個通道，得到選取，回到圖層面板，快捷鍵ctrl+j復(fù)制一層，圖層模式改為濾色，調(diào)整適合的透明度，最后在下面加上圖片，排版上文字，海報就完成啦！
本文為設(shè)計師提供全流程指導(dǎo)，深入探討多維度競品分析的方法。文章分享了如何拆解多維度，以及6種實用的分析技巧。
藍藍設(shè)計的小編 http://www.jsyqsx.cn
