（文末可下載我制作的banner源文件）
先給大家安利一個(gè)在線一鍵制作故障風(fēng)的神器——MOSH。它可以做JPG，也可以做GIF，而且故障效果很多，什么搖晃、壞電視、掃描線，還有你們喜歡的RGB錯(cuò)位，總之各種故障吧！文末給大家附上神器網(wǎng)址及界面介紹，下課后大家自己去玩啦。
咱們進(jìn)入今天的主題，故障風(fēng)banner制作。
上過我的設(shè)計(jì)培訓(xùn)課的同學(xué)們知道，葉哥日常喜歡收集各種心水的海報(bào)、banner等，上字體設(shè)計(jì)課的時(shí)候拿網(wǎng)易云音樂的啟動(dòng)頁作為了我們的實(shí)戰(zhàn)練習(xí)案例。
今天的教程素材也來自網(wǎng)易云音樂。
Tip：遇見喜歡的設(shè)計(jì)就趕快截圖吧，運(yùn)營類的作品具有時(shí)效性，說不定你今天看見了，明天就下線了。不要錯(cuò)過任何一個(gè)學(xué)習(xí)的機(jī)會(huì)！
這就是今天的案例啦
學(xué)習(xí)一張?jiān)O(shè)計(jì)作品，我首先會(huì)對我實(shí)現(xiàn)它的可行性進(jìn)行評(píng)估，以上圖為例，我需要做：
1、找背景圖
2、字體設(shè)計(jì)
3、故障效果制作
4、文案排版
OK，妥妥的，開工了。
01 找背景圖
為了契合主題，我們需要找的這張背景圖，應(yīng)該是演唱會(huì)或者音樂節(jié)的圖片，最好有舞臺(tái)有燈光且人多，看著熱鬧，視覺效果更好。
告訴大家一個(gè)搜圖技巧：用英文搜的圖片質(zhì)量會(huì)更高，演唱會(huì)，我們就搜concert。
找圖的網(wǎng)站大家可以看我這篇文章啊——
還有哪些設(shè)計(jì)師常用網(wǎng)站你不知道？http://dwz.cn/752OPW
這是我找的圖
接下來就是處理背景圖。
1) 將圖片拖入PS，在圖層面板右擊，選擇柵格化（再次強(qiáng)調(diào)“保留工作路徑”的習(xí)慣，柵格化之前建議先復(fù)制一個(gè)）
2) 選中圖片，頂欄工具欄-圖像-調(diào)整-去色
3) 其他調(diào)整，比如色階，曲線什么的，具體要看你找的圖和你自己比較喜歡的效果啦
我找的圖去色之后，畫面略白，我想要暗部暗下來，所以調(diào)整了色階，如下圖
02 字體設(shè)計(jì)
關(guān)于字體設(shè)計(jì)，第一步是選擇一個(gè)與畫面風(fēng)格匹配的字庫字。
畫面是音樂節(jié)現(xiàn)場，比較燃比較勁爆，所以字族呢我們要選擇無襯線的（黑體），字體的性格呢我們要選擇剛強(qiáng)一點(diǎn)的，你問我什么是剛強(qiáng)？看起來像磚一樣方方正正硬邦邦的就是吧！
你可能會(huì)想到去求字體網(wǎng)上識(shí)別一下這個(gè)banner用了什么字體，但是主題字是經(jīng)過了設(shè)計(jì)的，原則上來說，應(yīng)該是識(shí)別不出來的，這時(shí)候我們就先自己選個(gè)什么黑體吧。
Tip：在字體選擇框里輸入“黑”就會(huì)篩選出你電腦里的黑體字啦，選擇一個(gè)你中意的就OK
第二步就是設(shè)計(jì)字體了。
建議大家在AI中操作，這個(gè)字體設(shè)計(jì)比較簡單，運(yùn)用了基礎(chǔ)的“連字法”，為了節(jié)約時(shí)間我就不進(jìn)行設(shè)計(jì)了，畢竟今天的重點(diǎn)是故障風(fēng)嘛。
對用連字法進(jìn)行字體設(shè)計(jì)感興趣的同學(xué)可以看我這篇文章：字體設(shè)計(jì)在banner中的運(yùn)用 http://www.ui.cn/detail/293793.html，里面還有操作視頻哦！
先把主題字放背景圖上再說。發(fā)現(xiàn)背景還是太亮了，白色的字放上去壓不住，這時(shí)你可以對圖片再進(jìn)行處理：我再調(diào)整了色階，然后加了一個(gè)50%透明度的黑色蒙版（雖然叫做蒙版但不是真正意義上的蒙版哈，只是一個(gè)黑色圖層，或者說色塊）。
03 故障效果
該banner上的故障效果其實(shí)是白色+藍(lán)色+紅色的主題字疊加和錯(cuò)位來實(shí)現(xiàn)的。
所以我們將白色主題色復(fù)制三個(gè)，分別改變顏色：
藍(lán)#0dffff（兩個(gè)），紅#ff005e，別問我怎么知道色值，當(dāng)然是吸管工具??！
現(xiàn)在開始梳理步驟：
1) 將主題字復(fù)制出三個(gè)：在PS的圖層面板，選中主題字圖層，Ctrl+J復(fù)制三下。
2) 分別改變復(fù)制出的三個(gè)圖層的顏色，兩個(gè)為藍(lán)色#0dffff，一個(gè)為紅色#ff005e。
3) 疊加和錯(cuò)位：將一個(gè)藍(lán)色圖層放在白色上面，設(shè)置不透明度5%，這一步姑且叫作是“疊加”吧；將另一個(gè)藍(lán)色圖層及一個(gè)紅色圖層放在白色下面；選中藍(lán)一和藍(lán)二，同時(shí)往主題字的左上方輕輕移動(dòng)，再選中紅色，往主題字的右下方輕輕移動(dòng)，這就是錯(cuò)位了。
效果如下圖：
4) 制作故障效果的輔助元素，就是那些小碎碎。這個(gè)就更簡單了，一個(gè)矩形+一些粗細(xì)不一的線條進(jìn)行組合即可，矩形上有缺口的地方用到了布爾運(yùn)算中的減去頂層。
添加完小碎碎，我發(fā)現(xiàn)黑色蒙版還不夠黑！于是我把不透明度從50%增加到了70%。
到這里故障風(fēng)就已經(jīng)over了，你學(xué)會(huì)了嗎？
04 文案排版
接下來是文案排版，一般除了主題字需要設(shè)計(jì)以外，副標(biāo)題或者小文案我們都會(huì)選擇使用字庫字，當(dāng)然你得選擇一款免費(fèi)商用的字體哦，在這里我選擇思源黑體。
案例的兩個(gè)小文案選擇的是不一樣的字體，一般一個(gè)畫面字體選擇2-3種是比較合理。
現(xiàn)在大家可以去“求字體”網(wǎng)上識(shí)別主標(biāo)題下面的文案用的是啥字體了。
Tip：排版時(shí)注意區(qū)分文字的層級(jí)，在設(shè)計(jì)中要有所體現(xiàn)，如，主題字下面的副主題我選擇的是思源黑體medium，比banner上方的小文案粗一點(diǎn)點(diǎn)，字號(hào)也比它大了兩號(hào)。
好了，最后在banner左上方加上反白后的logo（反白的意思就是把原本有顏色的logo變成白色），右上方加上一個(gè)全圓角的矩形和“獨(dú)家”兩個(gè)字，就搞定啦??！
神器安利：MOSH
給大家安利這款在線的一鍵制作故障風(fēng)的神器，它的網(wǎng)址是：getmosh.io
這是它的首頁，雖然很簡單但是我們還是能感受到濃濃的故障風(fēng)，人家這個(gè)logo真有意思，是吧。
給大家翻譯一下，
使用方法是不是也很簡單粗暴。
溫馨提示：如果你在GIF錄制時(shí)按住空格鍵，它會(huì)進(jìn)入一種狂暴模式，各種隨機(jī)的故障效果統(tǒng)統(tǒng)給你用上，酷不酷！
簡單給大家介紹一下它的使用界面：
左上角的相機(jī)和攝像機(jī)，代表著切換你是下載圖片還是錄制GIF動(dòng)圖。
下方的兩個(gè)按鈕，MOSH是指的應(yīng)用隨機(jī)故障效果，快照就是點(diǎn)一下，就自動(dòng)下載一張圖片。
右邊就是各種故障效果了，沒啥好講的，你們自己玩吧，最好用瀏覽器翻譯一下。
886，我回家吃飯了。
聯(lián)系客服
