教你制作個(gè)性化的微博皮膚2017福利教程

2018-01-03 2064 0
一、制作皮膚前,我們需要先知道圖片的最佳尺寸
  1. 微博封面圖:920px * 300px
  2. 微博背景圖:1920px * 1446px
( 1920px * 1446px  這個(gè)主要是兼容當(dāng)前較大的分辨率,你也可以更大,目前這個(gè)分辨率是我們反復(fù)測(cè)試過(guò)后,與封面圖可以吻合。 圖片更大后,有可能會(huì)被微博縮小,具體原因不清楚,要問(wèn)微博的同學(xué))
二、確定設(shè)計(jì)要素 優(yōu)設(shè)的卡通形象是一只雞,聊設(shè)計(jì)→獠麝雞。每年我們會(huì)都制定生肖對(duì)應(yīng)的小雞形象,今年是本命年了,所以就不用再cosplay其他生肖了…. 新年想喜慶一點(diǎn),所以確定了幾個(gè)基本關(guān)鍵字:優(yōu)設(shè)的卡通形象、新年元素、網(wǎng)站二維碼。 高效鬼畜的?@羚羊pierre 很快出了一版上了色的草稿,見(jiàn)下圖。 uisdc-weibo-201701011
△ 優(yōu)設(shè)微博封面手稿——春麗版 雅蠛蝶!居然把我們小雞搞成“春麗”版本了,我趕緊和設(shè)計(jì)師說(shuō),把頭頂上的包子拿掉,能不能換個(gè)有設(shè)計(jì)師喜歡的頭飾物品? 老練的羚羊pierre 同學(xué)二話不說(shuō):稍等!
uisdc-weibo-201701012
沒(méi)錯(cuò)!帶△ beats耳機(jī)的獠麝雞~ 不過(guò)這個(gè)B怎么有點(diǎn)奇怪?。。。?我趕緊是搜索了一下,發(fā)現(xiàn)好像哪里不對(duì)?
uisdc-wb-20170101 △ Beats Studio Wireless uisdc-weibo-201701013
△ 制作中… 大家也知道優(yōu)設(shè)是不怎么發(fā)廣告的,一琢磨,怕大家戳著我們鼻子說(shuō)!優(yōu)設(shè)淪落到不務(wù)正業(yè),不搞設(shè)計(jì),去打耳機(jī)廣告! 所以這一稿,我也覺(jué)得不對(duì),就和設(shè)計(jì)師說(shuō)要換下來(lái)。 最后,索性裸雞出鏡?。紤]到和諧社會(huì),我們穿上了衣服) uisdc-weibo-201701014
△ 獠麝雞 然后帥氣的 羚羊pierre 又去把松樹(shù)、卷軸都優(yōu)化了一下。 uisdc-weibo-201701015
△ 松樹(shù)
uisdc-weibo-201701016
△ 卷軸+鞭炮
三、微博皮膚制作要點(diǎn)? 因?yàn)槲覀兊姆劢z用戶都是設(shè)計(jì)師,所以設(shè)計(jì)這些卡通形象和元素都不是難事,我們這里不強(qiáng)調(diào)細(xì)致的繪制方法了,主要是說(shuō)一下制作微博皮膚的幾個(gè)要點(diǎn):

1、要素莫出界 一定要控制好核心要素在 920px * 300px 封面圖里足夠的收斂,一旦超出,哪怕是一點(diǎn),譬如陰影超過(guò)了邊界,那么后面切圖上傳后,你會(huì)發(fā)現(xiàn)和背景圖不能很好的融合。我們用輔助線示意一下。這是我們測(cè)試了很多次才得到寶貴經(jīng)驗(yàn)!?。〈蠹乙欢ㄒ浐昧?。 ? uisdc-weibo-201701017
千萬(wàn)不要把封面圖里的光效、元素整到920px * 300px 以外的地方去了…
2、頭像的融合 我們制作皮膚的目的,除了彰顯個(gè)性、曝光(個(gè)人)品牌,其實(shí)也得考慮讓頭像(Logo)被眾星捧月一般,閃耀光芒。 你在構(gòu)思封面圖的時(shí)候,得想清楚展現(xiàn)哪幾個(gè)要素,并且能夠和頭像很好的結(jié)合起來(lái)。這樣你的設(shè)計(jì)才不會(huì)干擾大家記住你的ID,并且和頭像融為一體。如果是自媒體、企業(yè),封面圖里也可以像優(yōu)設(shè)一樣在左側(cè)展示二維碼和Slogan,或者你們的產(chǎn)品圖,這是絕佳的曝光機(jī)會(huì)。
3、封面圖里漸變色的場(chǎng)景還原 設(shè)計(jì)師在制作的時(shí)候很容易脫離使用場(chǎng)景來(lái)設(shè)計(jì),譬如制作Banner的時(shí)候,大家都是在PS里單獨(dú)設(shè)計(jì)Banner,卻沒(méi)有考慮Banner在實(shí)際網(wǎng)頁(yè)里的周邊環(huán)境,結(jié)果上線后,色彩和頁(yè)面環(huán)境格格不入,讓用戶生厭。 扯遠(yuǎn)了!我們這里單獨(dú)提到這里的陰影,其實(shí)就是因?yàn)樗_實(shí)是導(dǎo)致你是否能夠設(shè)計(jì)好皮膚的關(guān)鍵。我們可以用配圖示例一下。
uisdc-weibo-201701018
△ 封面圖 上傳前后 對(duì)比圖 ?所以,不難看出,其實(shí)我們應(yīng)該在設(shè)計(jì)的時(shí)候就要把這個(gè)漸變考慮進(jìn)去,因?yàn)榧恿藵u變后封面圖整體是有些黑的,而且和你原先設(shè)計(jì)的背景已經(jīng)不能融合了。 所以怎么辦??jī)?yōu)設(shè)教你一招,索性把封面圖以外的地方也拉出一條漸變陰影。然后再構(gòu)思封面和背景怎么融洽相處。見(jiàn)下圖。 uisdc-weibo-201701019
△ 索性將漸變橫向鋪滿 這樣做了之后,雖然解決了封面圖和背景違和的問(wèn)題,但是背景的設(shè)計(jì)肯定會(huì)難到不少人!因?yàn)檫@個(gè)漸變會(huì)干擾構(gòu)圖。大家可以看我們之前皮膚是這么處理的——背景色的分段!
uisdc-weibo-2017010110
△ 背景的分段色處理 ?傳背景的話,單獨(dú)看就是醬紫的。 uisdc-weibo-2017010111
△ 優(yōu)設(shè)2016的微博背景 但是這次,我們不滿足于現(xiàn)狀,為了讓背景和封面圖顯示得更完美,我們用到了層次感。通過(guò)2片云來(lái)融洽漸變給構(gòu)圖帶來(lái)的不適,見(jiàn)圖。 uisdc-weibo-2017010112
△ 2片云營(yíng)造層次感 當(dāng)然這個(gè)方案也有不完美的地方,本來(lái)我們都是有很大弧度的,上傳后卻發(fā)現(xiàn),前置的這片云中間部分不能有太大的變化,不然色彩的明暗會(huì)給微博瀏覽造成干擾。大家可以在我們微博PC端上下滾動(dòng)體驗(yàn)一下就知道了。每條微博之間的縫隙里是可以看到背景的。
四、其它制作 設(shè)計(jì)好PC端的皮膚后,我們也更新了手機(jī)版本的背景圖,尺寸是750px * 750px 同樣的,難點(diǎn)在于把頭像要展示在中間,不要和元素沖突。 uisdc-weibo-2017010113


25
評(píng)論區(qū)(0)
正在加載評(píng)論...