教程手把手教你做故障風(fēng)banner

1、教程手把手教你做故障風(fēng)banner（文末可下載我制作的banner 源文件）先給大家安利一個在線一鍵制作故障風(fēng)的神器MOSH它可以做 JPG，也可以做GIF ，而且故障效果很多，什么搖晃、壞電視、掃描線，還有你們喜歡的RGB 錯位，總之各種故障吧！文末給大家附上神器網(wǎng)址及界面介紹，下課后大家自己去玩啦。咱們進(jìn)入今天的主題，故障風(fēng)banner 制作。上過我的設(shè)計培訓(xùn)課的同學(xué)們知道，葉哥日常喜歡收集各種心水的海報、 banner 等，上字體設(shè)計課的時候拿網(wǎng)易云音樂的啟動頁作為了我們的實戰(zhàn)練習(xí)案例。今天的教程素材也來自網(wǎng)易云音樂。Tip ：遇見喜歡的設(shè)計就趕快截圖吧，運(yùn)營類的作品具有時效性，說不定你

2、今天看見了，明天就下線了。不要錯過任何一個學(xué)習(xí)的機(jī)會！這就是今天的案例啦學(xué)習(xí)一張設(shè)計作品，我首先會對我實現(xiàn)它的可行性進(jìn)行評估，以上圖為例，我需要做：1、找背景圖2、字體設(shè)計3、故障效果制作4、文案排版OK ，妥妥的，開工了。找背景圖為了契合主題，我們需要找的這張背景圖，應(yīng)該是演唱會或者音樂節(jié)的圖片，最好有舞臺有燈光且人多，看著熱鬧，視覺效果更好。告訴大家一個搜圖技巧：用英文搜的圖片質(zhì)量會更高，演唱會，我們就搜concert。找圖的網(wǎng)站大家可以看我這篇文章啊還有哪些設(shè)計師常用網(wǎng)站你不知道？/752OPW這是我找的圖接下來就是處理背景圖。將圖片拖入 PS，在圖層面板右擊，選擇柵格化（再次強(qiáng)調(diào)“保留

3、工作路徑”的習(xí)慣，柵格化之前建議先復(fù)制一個）選中圖片，頂欄工具欄 -圖像 -調(diào)整 -去色其他調(diào)整， 比如色階， 曲線什么的， 具體要看你找的圖和你自己比較喜歡的效果啦我找的圖去色之后，畫面略白，我想要暗部暗下來，所以調(diào)整了色階，如下圖02 字體設(shè)計關(guān)于字體設(shè)計，第一步是選擇一個與畫面風(fēng)格匹配的字庫字。畫面是音樂節(jié)現(xiàn)場，比較燃比較勁爆，所以字族呢我們要選擇無襯線的（黑體） ，字體的性格呢我們要選擇剛強(qiáng)一點(diǎn)的，你問我什么是剛強(qiáng)？看起來像磚一樣方方正正硬邦邦的就是吧！你可能會想到去求字體網(wǎng)上識別一下這個banner 用了什么字體，但是主題字是經(jīng)過了設(shè)計的，原則上來說，應(yīng)該是識別不出來的， 這時候我們

4、就先自己選個什么黑體吧。Tip ：在字體選擇框里輸入“黑”就會篩選出你電腦里的黑體字啦，選擇一個你中意的就OK第二步就是設(shè)計字體了。建議大家在AI 中操作，這個字體設(shè)計比較簡單，運(yùn)用了基礎(chǔ)的“連字法” ，為了節(jié)約時間我就不進(jìn)行設(shè)計了，畢竟今天的重點(diǎn)是故障風(fēng)嘛。對用連字法進(jìn)行字體設(shè)計感興趣的同學(xué)可以看我這篇文章：字體設(shè)計在banner 中的運(yùn)用，里面還有操作視頻哦！先把主題字放背景圖上再說。發(fā)現(xiàn)背景還是太亮了，白色的字放上去壓不住，這時你可以對圖片再進(jìn)行處理：我再調(diào)整了色階，然后加了一個 50%透明度的黑色蒙版（雖然叫做蒙版但不是真正意義上的蒙版哈，只是一個黑色圖層，或者說色塊）。03 故障效果

5、該 banner 上的故障效果其實是白色 +藍(lán)色 +紅色的主題字疊加和錯位來實現(xiàn)的。所以我們將白色主題色復(fù)制三個，分別改變顏色：藍(lán) #0dffff （兩個），紅 #ff005e ，別問我怎么知道色值，當(dāng)然是吸管工具！現(xiàn)在開始梳理步驟：1) 將主題字復(fù)制出三個：在PS 的圖層面板，選中主題字圖層， Ctrl+J 復(fù)制三下。2) 分別改變復(fù)制出的三個圖層的顏色，兩個為藍(lán)色#0dffff ，一個為紅色 #ff005e 。疊加和錯位： 將一個藍(lán)色圖層放在白色上面， 設(shè)置不透明度 5%，這一步姑且叫作是“疊加”吧；將另一個藍(lán)色圖層及一個紅色圖層放在白色下面；選中藍(lán)一和藍(lán)二，同時往主題字的左上方輕輕移動，

6、再選中紅色，往主題字的右下方輕輕移動，這就是錯位了。效果如下圖： 4) 制作故障效果的輔助元素，就是那些小碎碎。這個就更簡單了，一個矩形+一些粗細(xì)不一的線條進(jìn)行組合即可，矩形上有缺口的地方用到了布爾運(yùn)算中的減去頂層。添加完小碎碎，我發(fā)現(xiàn)黑色蒙版還不夠黑！于是我把不透明度從 50%增加到了70%。到這里故障風(fēng)就已經(jīng)over 了，你學(xué)會了嗎？文案排版接下來是文案排版，一般除了主題字需要設(shè)計以外，副標(biāo)題或者小文案我們都會選擇使用字庫字，當(dāng)然你得選擇一款免費(fèi)商用的字體哦，在這里我選擇思源黑體。案例的兩個小文案選擇的是不一樣的字體，一般一個畫面字體選擇 2-3 種是比較合理?，F(xiàn)在大家可以去“求字體”網(wǎng)上

7、識別主標(biāo)題下面的文案用的是啥字體了。 Tip ：排版時注意區(qū)分文字的層級， 在設(shè)計中要有所體現(xiàn)，如，主題字下面的副主題我選擇的是思源黑體medium，比 banner 上方的小文案粗一點(diǎn)點(diǎn)，字號也比它大了兩號。好了，最后在 banner 左上方加上反白后的 logo（反白的意思就是把原本有顏色的 logo 變成白色），右上方加上一個全圓角的矩形和“獨(dú)家”兩個字，就搞定啦！ ！神器安利： MOSH給大家安利這款在線的一鍵制作故障風(fēng)的神器，它的網(wǎng)址是： getmosh.io 這是它的首頁，雖然很簡單但是我們還是能感受到濃濃的故障風(fēng)，人家這個 logo 真有意思，是吧。給大家翻譯一下，使用方法是不是也很簡單粗暴。溫馨提示：如果你在 GIF 錄制時按住空格鍵，它會進(jìn)入一種狂暴模式，各種隨機(jī)的故障效果統(tǒng)統(tǒng)給你用上，酷不酷！簡單給大家介紹一下它的使用界面：左上角的相機(jī)和攝像