UI设计细节及技巧

ss41499108 · 发表于 2014-12-4 02:08:14

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

x

提示：教程详细步骤在二楼！

想下载该教程的可以到这里下载:点击进入下载页

教程编号:135320 作者：duanjianlove 出处：站酷

ss41499108 · 发表于 2014-12-4 02:08:14

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

ss41499108 · 发表于 2014-12-4 02:08:14

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

ss41499108 · 发表于 2014-12-4 02:08:14

1、虚线描边，2px，对齐（内描边）

ss41499108 · 发表于 2014-12-4 02:08:14

2、触点样式效果

ss41499108 · 发表于 2014-12-4 02:08:14

3、描边路径可以绘制开放式路径图标
绘制图标时会用到间断的路径，这时候可以用路径搭边样式，是支持开放路径描边的。我们就用开放路径描边来绘制下面图表中的三个（下图图标还能用“路径减法”绘制）

ss41499108 · 发表于 2014-12-4 02:08:14

绘制邮件图标
1、用钢笔工具先画路径

ss41499108 · 发表于 2014-12-4 02:08:14

2、调整描边属性，4点粗，内描边，回头端点，圆角点。

ss41499108 · 发表于 2014-12-4 02:08:14

3效果图如下：

ss41499108 · 发表于 2014-12-4 02:08:14

4、同理绘制其它图标（注意，一个图标有多部分组成时，可能需要多个图层的单独路径）

ss41499108 · 发表于 2014-12-4 02:08:14

4、我们顺带提下“路径减法”的绘制
这种方法就是之前说的用钢笔工具“来绘制那些较细的”线图标，必要时会用到“添加描点”、删除描点工具，好处就是便于调整。

ss41499108 · 发表于 2014-12-4 02:08:14

ss41499108 · 发表于 2014-12-4 02:08:14

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

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

ss41499108 · 发表于 2014-12-4 02:08:14

ss41499108 · 发表于 2014-12-4 02:08:14

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

账号		自动登录	找回密码
密码			注册

[UI设计] UI设计细节及技巧

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。