優(yōu)設(shè)最近換了新的微博皮膚后，大家都很喜歡，也想知道是怎么做的，所以在2017年元旦節(jié)分享出來，將制作方法和源文件分享給大家。

優(yōu)設(shè)微博皮膚PSD下載地址

百度云盤 https://pan.baidu.com/s/1pLJGIKF
微盤下載 http://vdisk.weibo.com/s/u038UQMCmVWD

大家知道，幾年前新浪微博改版后，在封面圖上的DIV（?class="S_shadow " ）里通過CSS設(shè)置了一個(gè)黑色漸變，當(dāng)時(shí)被大家一陣吐槽，其實(shí)主要是為了防止用戶背景過白的時(shí)候，上面的白色字昵稱看不見而做的小優(yōu)化。

也正是因?yàn)檫@個(gè)漸變讓新浪微博皮膚的設(shè)計(jì)難度增大了，因?yàn)樵O(shè)計(jì)師在制作的時(shí)候要考慮到封面圖與背景統(tǒng)一起來?，F(xiàn)在說大家可能不明白，我們后面會(huì)講到。

首先，要特別感謝?羚羊pierre?為優(yōu)設(shè)制定的皮膚，為了讓皮膚看上去自然，我們來來回回修改了很多次....

一、制作皮膚前，我們需要先知道圖片的最佳尺寸

1. 微博封面圖：920px * 300px
2. 微博背景圖：1920px * 1446px

（ 1920px * 1446px? 這個(gè)主要是兼容當(dāng)前較大的分辨率，你也可以更大，目前這個(gè)分辨率是我們反復(fù)測試過后，與封面圖可以吻合。?圖片更大后，有可能會(huì)被微博縮小，具體原因不清楚，要問微博的同學(xué)）

二、確定設(shè)計(jì)要素

優(yōu)設(shè)的卡通形象是一只雞，聊設(shè)計(jì)→獠麝雞。每年我們會(huì)都制定生肖對應(yīng)的小雞形象，今年是本命年了，所以就不用再cosplay其他生肖了....

新年想喜慶一點(diǎn)，所以確定了幾個(gè)基本關(guān)鍵字：優(yōu)設(shè)的卡通形象、新年元素、網(wǎng)站二維碼。

高效鬼畜的?@羚羊pierre?很快出了一版上了色的草稿，見下圖。

△ 優(yōu)設(shè)微博封面手稿——春麗版

雅蠛蝶！居然把我們小雞搞成“春麗”版本了，我趕緊和設(shè)計(jì)師說，把頭頂上的包子拿掉，能不能換個(gè)有設(shè)計(jì)師喜歡的頭飾物品？

老練的羚羊pierre 同學(xué)二話不說：稍等！

沒錯(cuò)！帶△ beats耳機(jī)的獠麝雞~

不過這個(gè)B怎么有點(diǎn)奇怪?。。?！

我趕緊是搜索了一下，發(fā)現(xiàn)好像哪里不對？

△ Beats Studio Wireless

△ 制作中...

大家也知道優(yōu)設(shè)是不怎么發(fā)廣告的，一琢磨，怕大家戳著我們鼻子說，艸！優(yōu)設(shè)淪落到不務(wù)正業(yè)，不搞設(shè)計(jì)，去打耳機(jī)廣告！

所以這一稿，我也覺得不對，就和設(shè)計(jì)師說要換下來。

最后，索性裸雞出鏡?。紤]到和諧社會(huì)，我們穿上了衣服）

△ 獠麝雞

然后帥氣的 羚羊pierre 又去把松樹、卷軸都優(yōu)化了一下。

△ 松樹

△ 卷軸+鞭炮

三、微博皮膚制作要點(diǎn)?

因?yàn)槲覀兊姆劢z用戶都是設(shè)計(jì)師，所以設(shè)計(jì)這些卡通形象和元素都不是難事，我們這里不強(qiáng)調(diào)細(xì)致的繪制方法了，主要是說一下制作微博皮膚的幾個(gè)要點(diǎn)：

當(dāng)然你們?nèi)绻蚕肟葱‰u是怎么一步步畫出來的，后面我們也可以讓老司機(jī)@羚羊pierre 出小白教程來教大家...

1、要素莫出界

一定要控制好核心要素在 920px * 300px 封面圖里足夠的收斂，一旦超出，哪怕是一點(diǎn)，譬如陰影超過了邊界，那么后面切圖上傳后，你會(huì)發(fā)現(xiàn)和背景圖不能很好的融合。我們用輔助線示意一下。這是我們測試了很多次才得到寶貴經(jīng)驗(yàn)?。?！大家一定要記好了。 ?

千萬不要把封面圖里的光效、元素整到920px * 300px 以外的地方去了...

2、頭像的融合

我們制作皮膚的目的，除了彰顯個(gè)性、曝光（個(gè)人）品牌，其實(shí)也得考慮讓頭像（Logo）被眾星捧月一般，閃耀光芒。

你在構(gòu)思封面圖的時(shí)候，得想清楚展現(xiàn)哪幾個(gè)要素，并且能夠和頭像很好的結(jié)合起來。這樣你的設(shè)計(jì)才不會(huì)干擾大家記住你的ID，并且和頭像融為一體。如果是自媒體、企業(yè)，封面圖里也可以像優(yōu)設(shè)一樣在左側(cè)展示二維碼和Slogan，或者你們的產(chǎn)品圖，這是絕佳的曝光機(jī)會(huì)。

3、封面圖里漸變色的場景還原

設(shè)計(jì)師在制作的時(shí)候很容易脫離使用場景來設(shè)計(jì)，譬如制作Banner的時(shí)候，大家都是在PS里單獨(dú)設(shè)計(jì)Banner，卻沒有考慮Banner在實(shí)際網(wǎng)頁里的周邊環(huán)境，結(jié)果上線后，色彩和頁面環(huán)境格格不入，讓用戶生厭。

扯遠(yuǎn)了！我們這里單獨(dú)提到這里的陰影，其實(shí)就是因?yàn)樗_實(shí)是導(dǎo)致你是否能夠設(shè)計(jì)好皮膚的關(guān)鍵。我們可以用配圖示例一下。

△ 封面圖 上傳前后 對比圖

?所以，不難看出，其實(shí)我們應(yīng)該在設(shè)計(jì)的時(shí)候就要把這個(gè)漸變考慮進(jìn)去，因?yàn)榧恿藵u變后封面圖整體是有些黑的，而且和你原先設(shè)計(jì)的背景已經(jīng)不能融合了。

所以怎么辦？優(yōu)設(shè)教你一招，索性把封面圖以外的地方也拉出一條漸變陰影。然后再構(gòu)思封面和背景怎么融洽相處。見下圖。

△ 索性將漸變橫向鋪滿

這樣做了之后，雖然解決了封面圖和背景違和的問題，但是背景的設(shè)計(jì)肯定會(huì)難到不少人！因?yàn)檫@個(gè)漸變會(huì)干擾構(gòu)圖。大家可以看我們之前皮膚是這么處理的——背景色的分段！

當(dāng)時(shí)很多微博號和企業(yè)號還借鑒了優(yōu)設(shè)@優(yōu)秀網(wǎng)頁設(shè)計(jì)?的微博皮膚。

△ 背景的分段色處理

?傳背景的話，單獨(dú)看就是醬紫的。

△ 優(yōu)設(shè)2016的微博背景

但是這次，我們不滿足于現(xiàn)狀，為了讓背景和封面圖顯示得更完美，我們用到了層次感。通過2片云來融洽漸變給構(gòu)圖帶來的不適，見圖。

△ 2片云營造層次感

當(dāng)然這個(gè)方案也有不完美的地方，本來我們都是有很大弧度的，上傳后卻發(fā)現(xiàn)，前置的這片云中間部分不能有太大的變化，不然色彩的明暗會(huì)給微博瀏覽造成干擾。大家可以在我們微博PC端上下滾動(dòng)體驗(yàn)一下就知道了。每條微博之間的縫隙里是可以看到背景的。

四、其它制作

設(shè)計(jì)好PC端的皮膚后，我們也更新了手機(jī)版本的背景圖，尺寸是750px * 750px

同樣的，難點(diǎn)在于把頭像要展示在中間，不要和元素沖突。

△ 手機(jī)微博背景

皮膚的紋理哪里來？

另外，細(xì)心的同學(xué)不難發(fā)現(xiàn)，我們在皮膚里運(yùn)用了不少紋理，大家可能平時(shí)不知道在哪里下載，
這里推薦大家前往我們設(shè)計(jì)師導(dǎo)航http://hao.uisdc.com 頂部的資源下載中，尋找“百變紋理”網(wǎng)站即可，里面有最實(shí)用的無縫紋理下載。

優(yōu)設(shè)微博皮膚PSD下載地址

百度云盤 https://pan.baidu.com/s/1pLJGIKF
微盤下載 http://vdisk.weibo.com/s/u038UQMCmVWD

以上是整理后PSD源文件，給大家更好的借鑒學(xué)習(xí)，大家可以隨意修改封面圖左側(cè)的優(yōu)設(shè)信息和二維碼直接來推廣您的個(gè)人品牌，不用來向我們授權(quán)。

如果覺得好，記得回來在微博文章底部給個(gè)贊賞。也歡迎大家關(guān)注@優(yōu)秀網(wǎng)頁設(shè)計(jì)?。像這樣實(shí)用有趣的教程，我們還有成千上萬個(gè)~

最后，祝大家新年快樂，2017萬事如意，年薪百萬，當(dāng)然還有最重要的，身體健康~

拜個(gè)早年丨設(shè)計(jì)師專屬福袋

1. 自帶年味兒的中文字體丨10款年味十足的書法字體打包免費(fèi)下載
2. 賀歲插畫教程丨手把手教你繪制喜慶好看的新年賀歲插畫

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com