UI設計：3分鐘學會「抖音」效果

最近抖音短視頻畫風炫酷不斷刷屏，很多小夥伴玩到停不下來，這種潮流的大風怎麼會少了像素妹！誰還不是時尚弄潮兒咋滴？

讓像素妹來教你！即使你不是設計師，對平面設計也一無所知，仍然能夠輕鬆設計出這種故障畫面特效！用PS簡單三步就能弄出這種酷炫故障特效，趕快舉起你們的雙手，動！起！來！先上完成圖

第一步，製作圖標背板

1.打開PS，ctrl+n新建一個1024*1024，解析度為72，背景為白色或者透明的文件；

2.用圓角矩形工具畫一個1024*1024像素的正方形，畫的時候按住shift，畫出來就是正方形，圓角改為250像素，顏色色值改為「140b18」，如下圖所示；

3.繪製一個772*772像素，色值為「400d28」的圓形，同樣，按住shift可以畫出正圓，在屬性里把羽化值改為188像素，如下圖所示。

到這裡，圖標的背板就繪製完成啦～

第二步，繪製音符

畫之前先觀察一下，看起來音符下面是一個圓環，減去了一部分，最上面的小尾巴還是圓環的一部分，然後中間是用矩形連接起來的，讓我們來動手試一下看是不是這樣的。

1.繪製圓環

（1）先繪製一個484*484的正圓，顏色填充為「fe1955」，再執行ctrl+c，ctrl+v，原地複製一個；

（2）按ctrl+t變形，接著按住shift+alt鍵，再往裡縮小，這樣可以做出同心圓，尺寸縮小到216*216像素；

（3）shift+a調出小黑工具選中剛才畫好的216*216像素的小圓，把工具欄中的布爾運算里的「合併形狀」，改為「減去頂層形狀」，這樣圓環就做好啦！（注意：只有形狀在一個圖層中才能使用布爾運算）如下圖所示。

2.繪製矩形

（1）使用小黑工具選中一下剛才畫好的圓，哪個都可以，ctrl+r調出標尺，從標尺中拉出一條參考線，對齊選中的圓上出現的錨點，如下圖所示；

2）選中矩形工具，開始畫之前按一下shift，在畫的時候再鬆開，這樣可以跟剛才的圓環畫在一個圖層里，（如果不小心沒有跟之前的圓環畫在一個圖層里，可以shift+v，切換到選擇工具，然後選中圓環的圖層，按住shift再點擊矩形的圖層，選中兩個圖層後ctrl+e，合併成一個圖層）繪製一個134*519的矩形，底部對齊剛才拉的參考線，如下圖所示。

3.繪製音符的「小尾巴」

（1）拉一條參考線在剛才畫好的矩形頂部，然後繪製一個630*630像素的正圓，同樣繪製之前要按住shift跟之前畫好的形狀畫在一個圖層內。用小黑工具移動它，讓它的錨點跟參考線對齊，接著，用之前繪製同心圓的方法繪製一個362*362像素的同心圓，再拉出一條參考線對齊圓縱向的錨點，如下圖所示；

（2）選中矩形工具，開始畫之前按住alt鍵，這樣就執行了布爾運算中的「減去頂層形狀」，繪製一個716*260的矩形，矩形底部對齊參考線，把圓環多餘的部分減去；ctrl+c，ctrl+v複製一個畫好的矩形，按ctrl+t，滑鼠右擊，選順時針旋轉90度，把旋轉好的矩形左側對齊縱向的這條參考線，如下圖所示。

4.減掉最下面圓環多餘的一部分。選中矩形工具，還是開始畫之前先按住alt，執行布爾運算中的「減去頂層形狀」，繪製一個70*294像素的矩形，右側跟之前畫好的矩形對齊，底部跟最下面那條參考線對齊，效果如下圖。

這樣音符就畫完啦～都是用規則的形狀來畫，再用布爾運算切出來，整個圖標非常嚴謹，規整。

第三步，製作酷炫故障畫面特效

終於到這一步啦，不要眨眼哦，接下來就是見證奇蹟的時刻～

1.shift+v切換到移動工具，按住alt鍵拖拽剛才畫好的音符複製出來一個，在移動工具下按住alt鍵拖拽，是分圖層複製，給複製好的新的圖層的音符填充顏色色值改為「24f4ee」,往上往左分別移動32個像素，如下圖；

2.把移好的這個綠色音符的圖層混合模式從「正常」改為「線性減淡（添加）」,如下圖所示。

到這裡「抖音」的整個圖標就都做好啦，看似很複雜的效果做好只需1分鐘，學會只需3分鐘，是不是特別簡單？學會了這個效果，以後不管是做banner還是插畫，或者logo，都可以運用，分分鐘酷炫到飛起～

最後，希望大家空閑時間可以多多練習，要知道，技巧不是捷徑，練習才是！

想學習UI設計的朋友可以關注微信公眾號：「UI設計優課堂」即可領取UI設計教程一份

教程來著網路，如有侵權請聯繫小編

推薦閱讀：