首页 > 网页教程 > 设计分享 > 在视觉设计中对像素的深度解析

在视觉设计中对像素的深度解析

时间:2013-08-26    来源:优设网

什么是像素眼?

为什么大神说越简约的设计越难? 为什么总是设计不出高端大气上档次的东西?

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

如何深入理解像素

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

如何深入理解像素

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

如何深入理解像素

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

如何深入理解像素

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

如何深入理解像素

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

如何深入理解像素

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

如何深入理解像素

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

如何深入理解像素

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

如何深入理解像素

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

相关推荐
网页PS设计教程:手把手教你制作漂亮的商业模板
网页PS设计教程:手把手教你制作WordPress新闻博客模板
网页PS设计教程:手把手教你制作简洁风格的网页按钮
18个值得网页设计师收藏的超棒CSS3教程
网页设计教程分享—能影响观众的网站首页设计10个要点
网页设计教程:关于网页设计的那些事儿
网站设计教程分享 回归内容“简洁大气”设计指南
网页设计教程:必须注意的最常见网页可用性错误
10个漂亮实用并附带源码的Web设计教程分享
网页设计教程:网站背景中的他!她!它!
设计教程:写给网页设计新手的10条实用法则
LOGO到品牌包装!百度钱包品牌LOGO设计教程
网页设计教程!有哪些技巧可以搞定大图设计?
网站设计教程:如何为网站搭配图片?
PS海报设计教程:如何临摹一张绚丽的艺术海报?
20个适合初学者的UI设计教程推荐
UI设计教程:从零开始做APP之界面设计篇
UI设计教程:从零开始做APP之切图标注篇
动效教程:产品的动效设计
设计教程:这10个小技巧让长表单填写更省事
腾讯CDC:泛泛而谈界面中的斑马纹设计
简单而又不单调的网页视觉设计技巧
如何杜绝网页设计中视噪对用户的影响
如何让手绘应用于视觉设计中而增强亲和力和感染力
网页视觉设计如何针对用户有效表达信息
网站页面设计中光的特效设计引导用户视觉焦点
网页设计教程:5个原则助你设计一个成功的购买按钮
案例分析社交型网站首页设计的优秀设计原则
从网站可用性的角度深入分析苹果和微软官网设计的优劣
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
视觉设计之材质绘制的色彩理论
网站设计之10个儿童网站分析及设计特点总结
网页配色经验分享:叠柔配色技巧及图解分析

精彩推荐

热门教程