详细解析如何用眼睛捕捉每一粒像素

2016-02-17 00:39 4 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享详细解析如何用眼睛捕捉每一粒像素,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - 平面设计 】

这篇文章是放在即将出版的书里,因为愚人节辞职创办了一家界面设计公司,忙的不可开交,所以很久没有写教程与朋友们互动了,在此特将一篇教程奉献出来,希望可以帮助大家,也提高自己。

文章介绍:有一个想法

如果你被那些精致的图标吸引了,如果你是一位图标发烧友,如果你有好的想法正在寻找方法实现,那么这是一个很好的起点,因为那些诱人的艺术表现形式会诱惑着你不断的获取它们。得到这些艺术表现形式,你不必花去大量的金钱,起初,你只需要有一个好想法。

当我们在浏览网页,体验APP,使用软件时,会发现越来越多的图标都和身边的事物很相似,日历、相机、购物车等。没错,因为设计者会设计出贴近生活的图标,识别性更高,让用户在眼睛扫过的1到2秒内,便知道这个图标代表着什么。由此结论,对于新手设计者就可以从身边、从生活中去寻找素材。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(1-1)

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(1-2)

有一个态度

我习惯用笔去记录生活中的一些有意义或者无意义的想法,科技发展很快,现在我只需用iphone的记事本,便可以快速的记录在等汽车时突现的想法。记录久了就会把它当成设计清单,哪些可以用平面广告的形式去表现的更震撼,哪些可以用动画的形式去表现的更有趣,哪些则是用ICON的形式去表现的更有点击欲望。

大脑是一个庞大的库,记录的数据多,就会出现一个黯淡无光的点子,因为关联性引出了众多元素,组成了一个Good idea,这个在后期提到制作一个整体风格界面中是非常重要的。

有一张纸一支笔

律师在法庭上会运用自己准备好的逻辑思维加上强有力的资料证据去辩论,心理学家会恰当的使用各种专业的咨询技术,让来访者接纳自己,意识到自身存在的问题,而设计者起初则是通过一张纸和一支笔去将自己的想法实现给自己看,从而去分析此想法的实施方法与拓展性。图2-1为我在绘制塑料质感的草图,快速的将想法绘制到纸上,以方便我更好的去研究塑料质感的表现形式。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(2-1)

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(2-2)

有一个行为

战争前,我们在乎盾牌的密度、盔甲的轻度、武器的锋利。厮杀时,需要勇气、技巧、爆发力、体力。而战前,我们如何挑选出最精良的武器,如何获得最大的胜率?

我们需要一个行为,我会每天给自己指定一个目标,例如每天一标,一星期一教程,让清单因为我们的行为而供不应求。

每天有大量的设计爱好者访问设计网站,去学习别人的好作品,与其说学习,不如说是浪费时间,10%的人会仔细的浏览一次并去思考。30%会去把浏览过的收藏起来,便于以后浏览。60%的人会发表一些自己的感想与作者互动。80%的人则看看图,刺激下自己,发一句:大神,膜拜呀!然后叉了网页。我只想说这90%的人会在15分钟内忘记所看见的一切。我们需要做1%的人,就是去实践,不管大神的作品是否牛的想让你放弃这个行业,也不管自己的功底有多差,去做吧,你会发现其实大神也不过如此。很多朋友问我如何提高设计水平,我说了一大堆之后,他们通常会说:你功底好当然能做的好,像我们没有基础的就不行了。我很好奇什么是功底,功底是图层叠加叠出来的,没有功底就去叠加啊,叠加的多了,自然就有功底了,所以这些借口的背后还是因为没有行为。

当然,绘制图标的标准不能用艺术品的标准去衡量,好看不是关键,所以我们在绘制草图的时候,不必要担心自己的美术基础是否扎实,只要把自己的想法通过绘制的表现形式展示出来就可以,因为手稿是给自己看的,让我们更加认知自己的设计是否合理,不是为了画出来装X的。

当我们在纸上完成自己的思路后,尽量的在纸上去修改,如果没有定稿,在进行软件实现的时候修改会花费大量的时间。

接下来让我们动手去实践绘制一个ICON。(以下操作在Photoshop中完成)

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-1)

练习上图(3-1)的质感可以让我们学习到如何把握好光影,因为盒子有凹有凸。首先我们需要新建很多层将盒子的结构绘制出来,将其拼凑到一起。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-2)

这些外形都可以用钢笔工具去实现,我们可以先用色块去表现物体的明暗,背景用灰色,这样无论是高光和阴影都可以看的见。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-3)

用同样的方法绘制出盒子里的方块,记得一定要分图层,便于修改。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-4)

凹凸感的绘制就需要用到加深和减淡工具,调整曝光度的参数,值越大效果越明显,所以我们在绘制的时候,尽量让曝光度值的参数设置小一点,这样微调起来可以拿捏的准。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

(3-5)

一像素的偏移可以起到很大的作用,让物体看上去更有凹凸感。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-6)

在网上搜索皮材质关键字会出来很多皮质感素材,就可以拿来用了,直接用图层叠加到需要添加材质的图层上就可以了。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-7)

增加一些高光,让方块更有玻璃的质感,更加通透。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-8)

首先观察物体的投影,我们发现传统的高斯模糊或者图层样式里的投影根本无法做到真实生活中物体的投影,在这里我们使用动感模糊,改变它的角度,这样会使投影更加真实。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-9)

阴影我用了三层,运用了运动模糊和涂抹工具,可以找个实物去观察它的投影,运用多层叠加到一起,让阴影更加真实。

详细解析如何用眼睛捕捉每一粒像素,PS教程,图老师教程网

(3-10)

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

(3-10)为最终效果,大家可以感觉到对于形态比较复杂的图标,图层混合模式里的效果很难实现,这时候就需要我们运用一些微调工具,例如:加深、减淡、涂抹、橡皮擦、蒙板等。不放过每一粒像素,有时候感觉自己画的图标有问题,突破不了,不是手法的问题,很多是缺少观察。希望大家多尝试,试着运用以上的技巧把缺少的那块补上吧!

来源:https://www.tulaoshi.com/n/20160217/1576922.html

延伸阅读
图标是网页中的常见元素,主要功能是表意,也包含装饰及品牌传递的作用。存储为gif、png等位图格式的图标,称为像素图标,大小通常为16px、24px、32px等。当然像素图标也可以理解为像素风格的图标,不一定是位图格式存在,本文中我们按格式去理解。与像素图标相对的是矢量图标,通常以svg格式及字体格式存在,大小可以随意调整。这篇文章主要介...
最近像素画在游戏设计、插画设计等领域又有了逐渐回暖的趋势,这或许是一种怀旧,或许是对其他设计腻味了。总之,现在是时候问一句:关于像素画你知道些什么?如果你是像素画小白,那今天从头开始来学习吧。 @飞屋睿UIdesign :从太空入侵者到超级玛丽,旧时代的游戏行业里好像像素画这样的艺术形式已经广为人知。就像当年小时候我们玩游戏...
在设计网页和程序界面的时候,为了确保每一个像素的颜色、纹理和位置都准确地呈现,大多数设计师都会被搞得疲惫不堪。一不小心,一些很常用的操作像移动、旋转和粘贴就会让你的辛勤劳动付之东流。但是,如果能对你的工作流程做些小小的改动,就能在项目中始终保持作品的高质量。 像素完美之旋转 如果你不够小心,那么在Photoshop中旋转图层就...
经验分享 图钉问: 类似痘痘一样大的,白色一粒粒的,能挤黑头的是什麽东西,长密密的 图老师答: 根据您的描述告诉您,这种情况最好是看一下照片,便于分析病情变化的
这篇科普文超级实用!如果现在让你说清楚像素、英寸,Dpi 三者的区别以及关系,可以不百度回答我吗?如果这些基础的设计知识你都忘了,立刻花10分钟来学习一下。 Dpi(每平方英寸像素数目):图像细节程度的度量 Dpi 代表每平方英寸上所含点的数目,它决定了一副图像在细节上到底有多细(尽管并不依赖于你的视觉感受)。但是,什么是点? 点是一个...

经验教程

608

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部