- 微博封面圖:920px * 300px
- 微博背景圖:1920px * 1446px
( 1920px * 1446px 這個主要是兼容當前較大的分辨率,你也可以更大,目前這個分辨率是我們反復測試過后,與封面圖可以吻合。 圖片更大后,有可能會被微博縮小,具體原因不清楚,要問微博的同學)二、確定設計要素 優設的卡通形象是一只雞,聊設計→獠麝雞。每年我們會都制定生肖對應的小雞形象,今年是本命年了,所以就不用再cosplay其他生肖了…. 新年想喜慶一點,所以確定了幾個基本關鍵字:優設的卡通形象、新年元素、網站二維碼。 高效鬼畜的?@羚羊pierre 很快出了一版上了色的草稿,見下圖。

△ 優設微博封面手稿——春麗版 雅蠛蝶!居然把我們小雞搞成“春麗”版本了,我趕緊和設計師說,把頭頂上的包子拿掉,能不能換個有設計師喜歡的頭飾物品? 老練的羚羊pierre 同學二話不說:稍等!

沒錯!帶△ beats耳機的獠麝雞~ 不過這個B怎么有點奇怪!!!! 我趕緊是搜索了一下,發現好像哪里不對?


△ 制作中… 大家也知道優設是不怎么發廣告的,一琢磨,怕大家戳著我們鼻子說!優設淪落到不務正業,不搞設計,去打耳機廣告! 所以這一稿,我也覺得不對,就和設計師說要換下來。 最后,索性裸雞出鏡!(考慮到和諧社會,我們穿上了衣服)

△ 獠麝雞 然后帥氣的 羚羊pierre 又去把松樹、卷軸都優化了一下。

△ 松樹

△ 卷軸+鞭炮
三、微博皮膚制作要點? 因為我們的粉絲用戶都是設計師,所以設計這些卡通形象和元素都不是難事,我們這里不強調細致的繪制方法了,主要是說一下制作微博皮膚的幾個要點:
1、要素莫出界 一定要控制好核心要素在 920px * 300px 封面圖里足夠的收斂,一旦超出,哪怕是一點,譬如陰影超過了邊界,那么后面切圖上傳后,你會發現和背景圖不能很好的融合。我們用輔助線示意一下。這是我們測試了很多次才得到寶貴經驗!!!大家一定要記好了。 ?

千萬不要把封面圖里的光效、元素整到920px * 300px 以外的地方去了…
2、頭像的融合 我們制作皮膚的目的,除了彰顯個性、曝光(個人)品牌,其實也得考慮讓頭像(Logo)被眾星捧月一般,閃耀光芒。 你在構思封面圖的時候,得想清楚展現哪幾個要素,并且能夠和頭像很好的結合起來。這樣你的設計才不會干擾大家記住你的ID,并且和頭像融為一體。如果是自媒體、企業,封面圖里也可以像優設一樣在左側展示二維碼和Slogan,或者你們的產品圖,這是絕佳的曝光機會。
3、封面圖里漸變色的場景還原 設計師在制作的時候很容易脫離使用場景來設計,譬如制作Banner的時候,大家都是在PS里單獨設計Banner,卻沒有考慮Banner在實際網頁里的周邊環境,結果上線后,色彩和頁面環境格格不入,讓用戶生厭。 扯遠了!我們這里單獨提到這里的陰影,其實就是因為它確實是導致你是否能夠設計好皮膚的關鍵。我們可以用配圖示例一下。

△ 封面圖 上傳前后 對比圖 ?所以,不難看出,其實我們應該在設計的時候就要把這個漸變考慮進去,因為加了漸變后封面圖整體是有些黑的,而且和你原先設計的背景已經不能融合了。 所以怎么辦?優設教你一招,索性把封面圖以外的地方也拉出一條漸變陰影。然后再構思封面和背景怎么融洽相處。見下圖。

△ 索性將漸變橫向鋪滿 這樣做了之后,雖然解決了封面圖和背景違和的問題,但是背景的設計肯定會難到不少人!因為這個漸變會干擾構圖。大家可以看我們之前皮膚是這么處理的——背景色的分段!

△ 背景的分段色處理 ?傳背景的話,單獨看就是醬紫的。

△ 優設2016的微博背景 但是這次,我們不滿足于現狀,為了讓背景和封面圖顯示得更完美,我們用到了層次感。通過2片云來融洽漸變給構圖帶來的不適,見圖。

△ 2片云營造層次感 當然這個方案也有不完美的地方,本來我們都是有很大弧度的,上傳后卻發現,前置的這片云中間部分不能有太大的變化,不然色彩的明暗會給微博瀏覽造成干擾。大家可以在我們微博PC端上下滾動體驗一下就知道了。每條微博之間的縫隙里是可以看到背景的。
四、其它制作 設計好PC端的皮膚后,我們也更新了手機版本的背景圖,尺寸是750px * 750px 同樣的,難點在于把頭像要展示在中間,不要和元素沖突。
