新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

类似文章有:

“尺规作图”新手入门教程与SubScribe插件的推荐使用

UI设计中的细节及技巧

作者:duanjian

经常有朋友在说,能把一款软件用精,那他就很牛逼了。我觉得,真的要精通一款软件可不是那么容易的! 比如,精通PRO—E ,会建模是熟练使用,会编程参数才是高级,一般设计师也就只能建模,算的上熟练使用。能说精通我觉得要达到林清安教授那样才算精通吧!

好了,我们现在来说Photoshop (简称PS ),ps真的功能很强大,能用于很多行业。能用它来修图美化, 能用来排版,能用于游戏原画制作,能处理渲染图…..对于我们UI设计,是必须熟练使用的画图软件。下面我 会把我这几年的使用及学到的总结出来的细节和技巧列出,大家看的时候可以练练手,如果你经常绘图标,那么我的这篇文章对你将会很有用。

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

钢笔工具

1、控制节点的调整(文章中网格设置为“编辑–>首选项–>参考线”)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

钢笔工具画画的节点分2部分:

1.是主节点,控制形状大致方向。

2.是调整路径曲线弧度的。

我记得在cs 3中 选中1节点,是可以按键盘“上下左右”进行微调的,且不受网格影响。也就是说,调整力度是小于1px的,若用鼠标选中1节点移动,最小距离是1px,大家可以在cs3中试试。

我现在用的是cs6 Exted版,就不能像cs3中那样小于1px的调整。就是说,在cs6中无论键盘或者鼠标移动,它最小距离都是1px。

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

节点2,当我们用【直接选择工具】新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng 点击图标时,打开控制节点。在没有开启网格时,节点2按住鼠标左键是可以随意移动的,注意此时你的移动距离是可以小于1PX的。当网格打开,你的移动单位距离只能是上下左右1PX。大家注意这个细节,在做小图标时候,这个技巧的微调,会让你的图标更清晰,锐度更高。

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

还要提醒大家注意的是,按住Ctrl+T缩小图标时候,在你缩小后不要觉得就完事了,你还需要微调节点位置,避免出现过多亚像素,使图标更清晰。效果如下:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

如上图所示:原图标放大,路径是对准了像素格的(右上角为100%状态整体效果图)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

缩小后的图标在放大打开网格,会发现有亚像素的存在了(左上角为100%状态)

在做100PX以上的图标时,你随意放大或者缩小是不容易用肉眼看到这些亚像素的。但是,当你做小图标时就能很容易出现亚像素,所以做完后我们还要稍微调整节点位置,让它对准像素格,我们在看下效果对比吧:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

2、用路径绘制对称图标

在我们用路径绘制对称图形时候,有两种方法,他们各有各的好处。我们来说下面这个图标的做法:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

方法一:拼接

观察这个“安全”图标,先分析结构,是由2个半盾构成的,然后中间减去了一个勾。所以呢我们绘制如下:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

方法二:半封闭复制

先分析结构,盾是连贯的,然后中间减去了一个勾。绘制如下:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

在我们复制用钢笔工具绘制的半封闭图形时候,不要选择图层Ctrl+J,因为在cs6中这样复制图形会变形。所以,我建议大家按照Alt+左键拖动复制!,这样复制出来才是一样的。

3、添加描点和删除描点绘制完整路径

在我们用形状绘制图形时候,使用直接选择工具新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng 删除多余的路径锚点,从而去除多余的路径线,在需要删除中间一段路径的时候,需要选用钢笔工具进行添加锚点,然后用直接选择工具选中进行删除。

具体如下:在你要删除的线段中间添加描点(【钢笔工具】或者【直接选择工具】均可),在用直接选择工具删除描点。

我们选择绘制一个相机图标:新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

1.先用圆角矩形工具绘制圆角矩形新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng 圆角设置为2px,填充颜色,效果如下图所示;

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

3.我们对比着左边做好的做,在右边绘制。打开网格,选择【直接选择工具】,添加描点(注意对称,在要删除的那段上要添加3个描点)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

3.使用【直接选择工具】删除多余的形状上锚点,这样去除多余的线段(删除那段中间的描点,两端点留下)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

简单就是下图:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

4.使用【钢笔工具】把剩下的线段画完(注意:2描点的指控点一定要拖到节点去,不然用钢笔工具从2点接着画的时候会弯曲)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

5.得到完整相机轮廓,有没有感觉非常的完整呢?

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

6.选择【椭圆工具】,在选择减去新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng ,按住shift+左键拖圆,大家注意,这些步骤是在一个图层完成的新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

 图标描边

在PS CS6出来后就已经新增加了一项描边功能。使用这个工具能使图标画出来非常的便捷,在绘制图标时相互结合选择时也需要一定抉择。当你绘制较小图标时,描边1px到2px可以选择【图层–>描边】这样制作icon更快捷,更节省时间。但是当你描边太大,就会有直线边。

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

而当你考虑到以后可能需要放大或者打印出来。此时,你就要选择【形状描边】或者【画一个图块再用减法】 因为这样随意你放大缩小他都不会失真,还有就是“画一个图块用减法”放大或者缩小是按比例放大和缩小。

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

1、虚线描边,2px,对齐(内描边)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

2、角点样式效果

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

3、描边形状可以绘制开放式路径图标

绘制图标时候会用到间断的形状新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng 这时候可以用路径描边样式,是支持开发路径描边的。我们就用开放路径描边来绘制下面图表中的3个(注意:下面图标还能用“减法”绘制)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

绘制“邮件”图标

1.用钢笔工具先画出形状

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

2.调整描边属性,4点粗,内描边,圆头端点,圆角点

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

3.效果图如下:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

4.同理绘制其他图标(注意:一个图标有多部分组成时,可能需要多个图层的单独路径新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

我们顺带提下“减法”的绘制

这种方法就是之前说的用【钢笔工具】来绘制那些较细的“线图标”,必要时会用到【添加描点】【删除描点】等工具,好处就是便于调整!

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

用形状来平均距离

大家在排版、布局、测距离时,普遍会用标尺工具和参考线。其实呢,我一般会用 新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng 或者平均距离。在ps CS6中,可以随意调整矩形工具大小,具体君下:

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

我们要的距离是32px,我们只需要按住Alt+左键拖动,就能精确的排列这4个图标的间距了。

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

选中【矩形工具】,我们还可以随意调整矩形的长宽,他就相当于一把随意的尺子。

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

选择工具

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

我们来看下面图标(按住Ctrl和路径选择工具切换使用)

新手入门【UI设计】教程篇之:Photoshop图标设计中的细节与技巧 设计理念 ps教程  ruanjian jiaocheng

结语:

写的有点多了,相信大家也累了。用了ps这几年,从不会到熟练,中间也付出了很多,从最开始的了解各个工 具到后来能做出自己想要的效果,都离不开辛勤的练习、学习。平时呢我除了用ps外,手还要练着PRO—E软件。 没办法,自己是工业设计专业出生,总是忘不了自己还会做三维,捏在手里总不会坏。

写这篇文章呢,只是想把我这几年学到的技巧+自己亲身遇到问题+探索解决告诉大家,有好的就要分享相信里面的问题大家也遇到过,也有些细节大家在阅读这篇文章前已经掌握,希望大家推荐给更多人学习这些细节.

属性标签: ,