header_v1.7.40

32px Icon 绘制心得分享(第二期.附带源文件)Ryan Wang

7年前发布

原创文章 / UI / 教程
王羽枫 原创,如需商业用途或转载请与王羽枫联系,谢谢配合。

继续为新产品绘制32px icon,近期完成了一批各种系统诊断信息的标识,赛选出八个有代表性意义的晒一下。1、Accept(同意)2、Cancel、Error(同意、错误;名词)3、

继续为新产品绘制32px icon,近期完成了一批各种系统诊断信息的标识,赛选出八个有代表性意义的晒一下。

1、Accept(同意)
2、Cancel、Error(同意、错误;名词)
3、Busy、Stop(忙碌、停止;名词)
4、Error(错误,差错;名词)
5、Warning(警告,警报;名词)
6、Exclamation(喊(惊)叫;感叹词)
7、Information(信息;名词)
8、Help(帮助;名词)

由于我就职为外企软件公司,所以绘制图标时,必须要考虑的客观因素有:
1、这是软件界面,区别于网页桌面程序、手机等工业设计,大前提必须适用于软件界面;
2、软件直销全球六大洲,要兼顾不同种族、不同国家、不同文化……的客户人群;
3、种种因素制约,不能写实路线,不能卡通风格,不能另类艺术,不能……

所以简约、清新、亮丽、大方等是设计的基调,因为这套新产品的底色是淡蓝色色系,比较素,这些信息提醒图标要给客户最醒目的提示作用,所以颜色就偏向重色系,突出“亮”的主题。

设计时的小心理:
看过太多这种 Web icon,不想千篇一律,就在细节上画了些心思。比如对号、感叹号都是用形状画出矢量图层,又做了细节调整,达到想要的效果,有的弧度突出力度,有点圆滑重点下移。共同的目的,看起来不像大多数同类图标那么死板!

注意事项:
想要做到自己特点的图形,必须要自行修改路径,并且要不耐其凡,有耐心,反复反复放大缩小查看效果,放到3200倍去细扣 0.001 像素,不要忽略这小小的数值,精品是需要汗水和心血共铸的!

废话少说,同样贡献出源文件,供新手学习,高手批评。

 


1
    Hello PM 意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功