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

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

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

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

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

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

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