5分鐘教你快速設計網易云banner

▽

▲往下繼續看文章，內含設計實操案例干貨！

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

▲小編的2020歌單

為什么偏偏網易云成為了年輕人和大眾的最愛

網易云做對了兩件事情

-懂音樂

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

▲評論來自網易云

-懂設計

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

▲圖片來自網易云

1、讓色彩情緒化

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

▲圖片來自網易云

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

▲圖片來自網易云

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

▲圖片來自網易云

2、控制畫面留白

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

▲圖片來自網易云

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

▲圖片來自網易云

3、讓設計變得有趣

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

▲圖片來自網易云

實操案例步驟

▲實操案例分享

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

步驟1：

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

步驟2：

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

步驟3：

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

步驟4：

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

步驟5：

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

步驟6：

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

注意事項

▽

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

原文地址：修先森撩設計

作者：修先森

轉載請注明：學UI網》都在聽網易云，卻不知道banner設計這么好用

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務