深度解析！如何与像素打交道

什么是像素眼？

为什么大神说越简约的设计越难？

为什么总是设计不出高端大气上档次的东西？

下面来深度解析一个按钮的秘密

从视觉角度来看，这是一枚灰色的icon，如果你认为是这样的，那高端大气上档次基本和你没啥关系了。

你可以用吸管吸取这个按钮的任何地方，发现它都不在最左侧区域，最左侧区域才是 白色－黑色，才是没有饱和度的色系。 从编号01这里可以看出，这里加了一点黄色，大家可以找找很多骚气的标，作者们都要么不是加了点蓝色，就是加了点红色 ，但是看上去像灰色系，这时候大家临摹的时候，就蛋疼了，怎么做也和原图不一样。

画这种色系不多，细腻，略装b的标，颜色幅度一定要控制好，就算颜色相近，都别用纯色，拉个渐变，不停的调整，颜色区域不要超过红色区域，这样你的渐变就会带有一种让别人看了似懂非懂、认为此作者非常有内涵、有文化的感觉。

内投影的技法很简单，我在绘制的时候，把距离0-5和大小0-5，透明度8%－90%全部混合试了一遍。最后找到一个看上去最顺眼的组合，千万不可抱着"差不多"的心态，对于细节来说，一点点"差不多"，效果上就会差很多。 ps:我用投影做的一像素高光是在pc上显示，所以我用了距离1，如果按钮是在iphone上显示，那么数值就要调整，因为iphone是高清屏，分辨率不一样，在pc上的一像素，可能在手机上看到的是一根超级超级细的线，所以要弘扬精益求精的精神，设置不同的参数，在手机上不停的演示。

圆形按钮与椭圆槽相差1px，这时候大家要严格要求的去绘制这个圆形，如果是一个工业设计后的按钮，你忍心让它七扭八歪吗？

渐变还可以用来做反光，如果在渐变的最后不加这个淡淡骚气的颜色，眼睛就会捕捉到，然后神马总监或者客户就会让你再改一版，因为他们不知道哪出了问题，只是你没有做到位而已。

投影很讲究，第一个投影是圆形自带的投影，投影幅度不大，但是很黑，第二层是动感模糊，第三层是数值比较大的动感模糊，三个叠在一起，不断的调整透明度，让他们融在一起。

动感模糊后的投影视觉看上去会比按钮要宽，感觉很不真实，所以我们要用涂抹工具把两边往里收一收。

简约而不简单，我想咱们搞设计的，玩视觉就要下点功夫，多多考虑，多多发现，不放过没一粒像素，我的很多设计朋友会在一个细节上刻画很久，我认为专注是一回事，责任就是一回事，不管是做视觉还是做交互，都是我们的本职，我们要有最基本的职业道德。所以设计与艺术的不同在于画错的一笔可能成为名画，而设计，是刻意的、有意的、合理的、布个局，弄个陷阱，让用户踩进去，享受你设计带给他们的喜悦和惊喜。我想，我们每一个人用一个负责任的态度去做事，设计师将会成为最值得尊敬的职业。

SparkDesign web: http://www.sparkdesign.cn/
邵飞微博：http://weibo.com/mrshaofei
Dribbble：http://dribbble.com/shaofei

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座：每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音（YY频道：15335158）分享实战经验。
设计微博：拥有粉丝量47万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：