5分鐘教你快速設(shè)計網(wǎng)易云banner

▽

▲往下繼續(xù)看文章，內(nèi)含設(shè)計實操案例干貨！

作為老網(wǎng)抑云的鐵粉，最近的2020年度報告刷紅了朋友圈，不看不知道，原來這一年小編一共聽了954小時3089首歌，如果24小時不間斷也要40天才能聽完，不知道這算不算老網(wǎng)抑云了，如果有聽歌時間比我長的可以留言batter一下！

▲小編的2020歌單

為什么偏偏網(wǎng)易云成為了年輕人和大眾的最愛

網(wǎng)易云做對了兩件事情

-懂音樂

聽著歌曲，看著評論，有無數(shù)個故事在治愈和慰藉那些深夜不眠的孤獨(dú)患者，總能有一句話戳到你早已滿目瘡痍的內(nèi)心，吃著火鍋眼眶里含著淚水，發(fā)送了分手文字的短信，所以在網(wǎng)易云里聽的不只是音樂，還有故事。

▲評論來自網(wǎng)易云

-懂設(shè)計

打開網(wǎng)易云，我們可以從banner的設(shè)計中感受到聽取音樂的風(fēng)格，甚至發(fā)行EP所要闡述的理念都能在一張小小的banner設(shè)計中有效讀取，在小編認(rèn)為這是與音樂融合出來的設(shè)計，而不只是為了設(shè)計和推廣這首歌曲的目的。

▲圖片來自網(wǎng)易云

1、讓色彩情緒化

色彩并不只是用來配合文字和圖片的工具，而是需要賦予設(shè)計靈魂，讓色彩變得富有深度和畫面感，小編稱為色彩屬性，每一首歌不管是流行、民謠、搖滾、電子、獨(dú)立音樂類型，都有著背后的創(chuàng)作故事和曲風(fēng)類型，從色彩屬性最直觀的將故事里的情緒化表現(xiàn)出來，讓觀者看到畫面就能知道這首歌大概是什么曲風(fēng)，是悲傷的還是開心的歌曲。

▲圖片來自網(wǎng)易云

圖上歌曲想要體現(xiàn)的是一場與自由的角逐，曲風(fēng)也偏向于Hip-Ho說唱和電音的一種結(jié)合，代表著勇敢與激情的紅色調(diào)鋪滿了整個畫面，結(jié)合展露的肌肉身材，從中釋放出想要自由和尋找自由的情緒性。當(dāng)顏色調(diào)整為黑白配色后，原本代表著勇敢和自由的感覺突然消失了，從畫面中反而獲取了一種孤獨(dú)和悲傷的情緒感。

▲圖片來自網(wǎng)易云

再看圖上的banner結(jié)合歌曲名，我想大部分人都能判斷出這首歌是寫的對另一伴的不舍和留念，雨天昏暗的深夜加大了對于觀者的理解與感受，而如果整個畫面的色彩調(diào)整為黑白色，只留出燈、紅酒、相框的顏色后，那種失去的強(qiáng)烈是不是會更加的明顯和深刻。

▲圖片來自網(wǎng)易云

2、控制畫面留白

留白的目的除了解決畫面內(nèi)容層次的一種梳理以外，還會為設(shè)計增加很多藝術(shù)美感和想象空間。

▲圖片來自網(wǎng)易云

我們可以看到兩張圖的對比，從本身版式的理解上，文字居左對齊，將文字的大小、粗細(xì)通過層次分開得到流暢的閱讀感，本身是沒有問題，但卻失去了音樂特性的本質(zhì)，而留白就是改變和拆分版式編排的結(jié)構(gòu)，將其原有連串起來的主題文字拆分重組，讓版式內(nèi)部得到一個流通。

▲圖片來自網(wǎng)易云

3、讓設(shè)計變得有趣

設(shè)計不是表格也不是冷冰冰的數(shù)字，設(shè)計是為了讓人們感受人和生活的理想化，所以有趣就變成了一種特質(zhì)化標(biāo)簽，可以提升對于大眾的新鮮感。利用字體之間的變化，符合主題的元素圖形或者涂描來放大畫面設(shè)計的趣味性，就像烤羊肉一定要放孜然或者椒鹽才算吃的夠爽是一個意思。

▲圖片來自網(wǎng)易云

實操案例步驟

▲實操案例分享

設(shè)計詮釋：”破碎的光線在水彩浸潤過你的臉，Tsing River，it will wash me” 這是白皮書樂隊里關(guān)于《清河》歌曲里的一段歌詞。從歌詞中感受到人浮在水面上，斑斕的色彩光照進(jìn)全身，又隨著余暉漸漸消失殆盡的感受。所以在設(shè)計中利用了雙色漸變將整體的畫面顏色變成了涂抹色彩，扭曲和波瀾的水面塑造出與眾不同的設(shè)計感。

步驟1：

利用參考線找到中心區(qū)域，并放置主體圖片。

步驟2：

• 【漸變隱射】工具繪制綠色與藍(lán)色的漸變
• 【漸變隱射】工具繪制紫色與藍(lán)色的漸變并選擇圖層模式中的【飽和度】
• 【色彩平衡】將整體的顏色往青色與藍(lán)色兩塊區(qū)域拉伸參數(shù)

步驟3：

使用濾鏡>液化工具，選擇左側(cè)工具欄的「褶皺」將重心的畫面拉出層次距離，在將湖面做變形處理，得到扭曲的畫面效果。

步驟4：

將文字的字間距拉松并且放置到中心區(qū)域，將英文字母拉出高度形成設(shè)計元素與文字融合成整體。

步驟5：

復(fù)制畫面中的一部分進(jìn)行變形處理得到一個類似紙張飄散在空間的效果，放置到文字框架的中間，與白皮書樂隊得到一個很好的風(fēng)格統(tǒng)一。

步驟6：

用類似毛筆字筆刷的字體繪制出清河的歌曲名，再分散到左右兩側(cè)，形成一個版式上的平衡，否則會顯得兩側(cè)過于留白過多，當(dāng)然中心區(qū)域與兩側(cè)之間形成的留白區(qū)域是作為一個空間進(jìn)行想象。

注意事項

▽

設(shè)計版式中的留白和文字段的分拆和組合處理對于banner設(shè)計來說非常重要，可以很有效的體現(xiàn)設(shè)計感的美觀。

原文地址：修先森撩設(shè)計

作者：修先森

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》都在聽網(wǎng)易云，卻不知道banner設(shè)計這么好用

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.izc.net.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)