解析icon制作——设计自己风格的icon

解析icon制作——设计自己风格的icon

手机应用越来越成为我们生活中必不可少的一部分,icon的设计也成为我们我们身边的设计,看看站酷里各种手机主题大 […]

2014-05-19

手机应用越来越成为我们生活中必不可少的一部分,icon的设计也成为我们我们身边的设计,看看站酷里各种手机主题大赛、桌面插件设计大赛,各位设计师精美的设计,作为设计师的你是不是也摩拳擦掌?但icon的设计算是一类新的设计吧,如何开始动手呢?需要注意哪些?不能下个素材拼拼改改就行了吧?那样是不是太水了?还算是设计不就是抄袭么?想自己设计一套有自己风格的icon么?请用心看完下面的内容吧。

本次使用的工具是:photoshop(ps)

一、制作前的准备工作

1.勾选使用图形处理器选项:首选项>性能(注:绘画史尽量不要启用该选项。因为是图像高清出力,电脑会有延迟现象),选中后重启ps才会生效。勾选后的最大化界面显示,每一个个子就代表一个像素格子。
性能修改2.把标尺和文字都设置成像素:首选项>单位与标尺(设置后ps中的单位会一像素的形式显示)
3.勾选下面途中选项:首选项>常规>将矢量工具与变换与像素网格对齐。
单位设置
4.为你的文件制作同步对比图:窗口>排列(点击此选项后就会出现同步窗口设置成100%话不显示,方便预览实际比例中的icon形态)。
新建对比
5.打开信息窗口:窗口>信息(方便随时浏览icon尺寸)。
信息窗口

二、同一种icon的不同制作方式

方式一:圆角矩形相切法
适用于:各类线性icon绘制(圆角可以自由控制)
像素:不限

方式二:圆角/直角矩形相加法
适用于:各类线性icon绘制(内圆角为直角)
像素:不限

方式三:直角矩形相切法&港币切圆角法
适用于:各类线性icon绘制(圆角可以自由控制)
像素:不限

方式四:形状路径描边法
适用于:ios7极细线条icon绘制(圆角可以自由控制)
像素:1px-3px

注:这四种icon的制作方式仅供参考,同一个icon也可以兼备这四种制作方式,方法不详仅供参考。
不同制作方式

三、安全框的使用方式
1.普通标准安全框                                                                                        2.正辅形标准安全框
安全框

注:安全框的作用就是让一套复杂的icon做到视觉大小统一化,请注意安全框只是起到参考作用,居停的视觉大小比例还需要多做练习,最终用积累的经验和视觉比例关系去衡量最终大小。
线性的icon视觉统一化药店,线的粗细要一直,圆角大小要一致,切角角度要一致,辅形大小要一致等。

四、复杂icon制作方式
复杂的制作方式

制作icon尺寸一般为:32*32px,64*64px,128*128px。

米饭工作室整理编辑,感谢原文作者:又见章鱼哥。