2017福利教程！教你制作个性化的微博皮肤（附源文件）

优设最近换了新的微博皮肤后，大家都很喜欢，也想知道是怎么做的，所以在2017年元旦节分享出来，将制作方法和源文件分享给大家。

优设微博皮肤PSD下载地址

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

大家知道，几年前新浪微博改版后，在封面图上的DIV（ class="S_shadow " ）里通过CSS设置了一个黑色渐变，当时被大家一阵吐槽，其实主要是为了防止用户背景过白的时候，上面的白色字昵称看不见而做的小优化。

也正是因为这个渐变让新浪微博皮肤的设计难度增大了，因为设计师在制作的时候要考虑到封面图与背景统一起来。现在说大家可能不明白，我们后面会讲到。

首先，要特别感谢 羚羊pierre 为优设制定的皮肤，为了让皮肤看上去自然，我们来来回回修改了很多次....

一、制作皮肤前，我们需要先知道图片的最佳尺寸

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

（ 1920px * 1446px  这个主要是兼容当前较大的分辨率，你也可以更大，目前这个分辨率是我们反复测试过后，与封面图可以吻合。 图片更大后，有可能会被微博缩小，具体原因不清楚，要问微博的同学）

二、确定设计要素

优设的卡通形象是一只鸡，聊设计→獠麝鸡。每年我们会都制定生肖对应的小鸡形象，今年是本命年了，所以就不用再cosplay其他生肖了....

新年想喜庆一点，所以确定了几个基本关键字：优设的卡通形象、新年元素、网站二维码。

高效鬼畜的​@羚羊pierre 很快出了一版上了色的草稿，见下图。

△ 优设微博封面手稿——春丽版

雅蠛蝶！居然把我们小鸡搞成“春丽”版本了，我赶紧和设计师说，把头顶上的包子拿掉，能不能换个有设计师喜欢的头饰物品？

老练的羚羊pierre 同学二话不说：稍等！

没错！带△ beats耳机的獠麝鸡~

不过这个B怎么有点奇怪！！！！

我赶紧是搜索了一下，发现好像哪里不对？

△ Beats Studio Wireless

△ 制作中...

大家也知道优设是不怎么发广告的，一琢磨，怕大家戳着我们鼻子说，艹！优设沦落到不务正业，不搞设计，去打耳机广告！

所以这一稿，我也觉得不对，就和设计师说要换下来。

最后，索性裸鸡出镜！（考虑到和谐社会，我们穿上了衣服）

△ 獠麝鸡

然后帅气的 羚羊pierre 又去把松树、卷轴都优化了一下。

△ 松树

△ 卷轴+鞭炮

三、微博皮肤制作要点​

因为我们的粉丝用户都是设计师，所以设计这些卡通形象和元素都不是难事，我们这里不强调细致的绘制方法了，主要是说一下制作微博皮肤的几个要点：

当然你们如果也想看小鸡是怎么一步步画出来的，后面我们也可以让老司机@羚羊pierre 出小白教程来教大家...

1、要素莫出界

一定要控制好核心要素在 920px * 300px 封面图里足够的收敛，一旦超出，哪怕是一点，譬如阴影超过了边界，那么后面切图上传后，你会发现和背景图不能很好的融合。我们用辅助线示意一下。这是我们测试了很多次才得到宝贵经验！！！大家一定要记好了。 ​

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

2、头像的融合

我们制作皮肤的目的，除了彰显个性、曝光（个人）品牌，其实也得考虑让头像（Logo）被众星捧月一般，闪耀光芒。

你在构思封面图的时候，得想清楚展现哪几个要素，并且能够和头像很好的结合起来。这样你的设计才不会干扰大家记住你的ID，并且和头像融为一体。如果是自媒体、企业，封面图里也可以像优设一样在左侧展示二维码和Slogan，或者你们的产品图，这是绝佳的曝光机会。

3、封面图里渐变色的场景还原

设计师在制作的时候很容易脱离使用场景来设计，譬如制作Banner的时候，大家都是在PS里单独设计Banner，却没有考虑Banner在实际网页里的周边环境，结果上线后，色彩和页面环境格格不入，让用户生厌。

扯远了！我们这里单独提到这里的阴影，其实就是因为它确实是导致你是否能够设计好皮肤的关键。我们可以用配图示例一下。

△ 封面图 上传前后 对比图

​所以，不难看出，其实我们应该在设计的时候就要把这个渐变考虑进去，因为加了渐变后封面图整体是有些黑的，而且和你原先设计的背景已经不能融合了。

所以怎么办？优设教你一招，索性把封面图以外的地方也拉出一条渐变阴影。然后再构思封面和背景怎么融洽相处。见下图。

△ 索性将渐变横向铺满

这样做了之后，虽然解决了封面图和背景违和的问题，但是背景的设计肯定会难到不少人！因为这个渐变会干扰构图。大家可以看我们之前皮肤是这么处理的——背景色的分段！

当时很多微博号和企业号还借鉴了优设@优秀网页设计 的微博皮肤。

△ 背景的分段色处理

​传背景的话，单独看就是酱紫的。

△ 优设2016的微博背景

但是这次，我们不满足于现状，为了让背景和封面图显示得更完美，我们用到了层次感。通过2片云来融洽渐变给构图带来的不适，见图。

△ 2片云营造层次感

当然这个方案也有不完美的地方，本来我们都是有很大弧度的，上传后却发现，前置的这片云中间部分不能有太大的变化，不然色彩的明暗会给微博浏览造成干扰。大家可以在我们微博PC端上下滚动体验一下就知道了。每条微博之间的缝隙里是可以看到背景的。

四、其它制作

设计好PC端的皮肤后，我们也更新了手机版本的背景图，尺寸是750px * 750px

同样的，难点在于把头像要展示在中间，不要和元素冲突。

△ 手机微博背景

皮肤的纹理哪里来？

另外，细心的同学不难发现，我们在皮肤里运用了不少纹理，大家可能平时不知道在哪里下载，
这里推荐大家前往我们设计师导航http://hao.uisdc.com 顶部的资源下载中，寻找“百变纹理”网站即可，里面有最实用的无缝纹理下载。

优设微博皮肤PSD下载地址

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

以上是整理后PSD源文件，给大家更好的借鉴学习，大家可以随意修改封面图左侧的优设信息和二维码直接来推广您的个人品牌，不用来向我们授权。

如果觉得好，记得回来在微博文章底部给个赞赏。也欢迎大家关注@优秀网页设计 。像这样实用有趣的教程，我们还有成千上万个~

最后，祝大家新年快乐，2017万事如意，年薪百万，当然还有最重要的，身体健康~

拜个早年丨设计师专属福袋

1. 自带年味儿的中文字体丨10款年味十足的书法字体打包免费下载
2. 贺岁插画教程丨手把手教你绘制喜庆好看的新年贺岁插画

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com