优艾设计网

photoshop图层样式和路径绘制UI小图标

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:福特少普ps
作者佚名   出处:jjying 相信很多和我一样的设计爱好者和初学者都是通过photoshop这样的图形软件而熟悉设计的。虽然软件只是工具,创意还是完全来自我们的大脑,但是软件 使用技法很大程度上决定了我们作

因为是要做的是一个光盘驱动器,所以增加了一张半藏的光盘。光盘也是用路径做了3个同心圆,一个用来作为中间不全反射的白色部分,另两层则使用径向的渐变效果来模拟光盘的样子,一层的叠加控制灰度,另外一层控制颜色。为了和整个图标的风格相符合,渐变用得还是比较柔和的颜色。最后在驱动器的正面加上光盘插孔,因为细节不多,只需要用灰色画个很窄的椭圆即可。

photoshop图层样式和路径绘制UI小图标

图标大体完工。结束时在驱动器边缘的地方新建图层加入一些渐变效果来增强高光,并且加入了DVD的标志来表现这是个DVD光盘驱动器。

这样图标在48x48分辨率下就完工了,然后我们可以直接对源文件进行缩放来制作32x32的版本:

photoshop图层样式和路径绘制UI小图标

一般不建议同时缩放图层效果,因为对于描边等一般都精确到象素的效果来说在各个分辨率下保持一致有助于控制统一性,所以我们需要手工调整一下效果,比如缩小光泽和内发光等的尺寸。调整之后得到的图象有些图层会产生错位,稍微调整一下位置即可得到比较理想的效果。

photoshop图层样式和路径绘制UI小图标

接下来就是一般最令人头痛的16x16图标。很多时候在这样的分辨率下即使只是1px的边缘模糊成2个象素也足以使图标的整体效果变样。所以我觉得这样的小图标主要是修改其边缘。用路径和图层样式的好处在这里十分明显。先把32x32大小的文件调整成16x16:

photoshop图层样式和路径绘制UI小图标

我首先去掉了dvd标志的图层,因为在这种尺寸下,肯定怎么都看不清了。由于路径描点精确到亚象素(暂时这么叫吧,呵呵),所以经过缩放之后常常看到路径的边缘不在整数的象素坐标上,这样的结果就让本来大小为1象素的效果如描边等被需化了。经过简单的调整把描点重新移动到画面中象素的边缘即可保证图标的清晰。将所有移位的描点都处理过之后16象素的图标也完成了,当然,虽然16象素与32等图标大小只差一倍,但因为包含象素少,所以很多部位必须进行取舍以在保证图标元素不丢失的同时仍然突出细节。比如在这里,因为驱动器前面板只剩3象素高,所以光盘插入孔也没必要继续存在,只需在光盘和面板接触的面板之间淡淡的加上一个深色的图层略微做一下区分。另外,16象素下的路径往往在经过我们的调整后变化较大,常会改变原来的透视,所以需要我们不断调试取得比较好的效果保证不失真。

photoshop图层样式和路径绘制UI小图标

以上只是个人在以往积累的一丁点经验,所谓闭门造车,难免有很多不足,只希望能抛砖引玉,大家一起交流心得,共同提高:D

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消