手把手教你如何用ps制作潮流的故障風(fēng)音樂banner圖?在開始制作之前，我們先來簡單了解一下什么是故障藝術(shù)？故障藝術(shù)（Glitch Art），就是利用事物形成的故障，進(jìn)行藝術(shù)加工，使這種故障缺陷反而成為一種藝術(shù)品，具有特殊的美感。好了，說完了故障藝術(shù)，下面我們就一起去看看如何使用Photoshop制作這種最近很流行的故障藝術(shù)風(fēng)格的音樂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)站你不知道？

這是我找的圖

接下來就是處理背景圖。

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)用，里面還有操作視頻哦！

先把主題字放背景圖上再說。發(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，我回家吃飯了。

教程結(jié)束，藝術(shù)就是關(guān)于手把手教你如何用ps制作潮流的故障風(fēng)音樂banner圖的具體方法步驟，小伙伴們看完記得多多練習(xí)哦！

相關(guān)教程推薦：

ps打造炫酷的故障藝術(shù)效果的汽車照片教程

ps繪制故障藝術(shù)字體效果教程

PS怎么做故障畫面特效?PS簡單3步設(shè)計(jì)炫酷拉風(fēng)的故障抖動(dòng)特效教程

最新評(píng)論