32px Icon 绘制心得分享（附带PSD源文件与丑陋的手绘稿）（Ryan

siete_

夜王大人 发表于 2011-10-20 12:26:11 |显示全部楼层

登录/注册后可看大图                                 登录/注册后可看大图                                 登录/注册后可看大图 近期公司有项设计任务，为产品绘制一套超大数量的 Icon 库（预估会有1000个左右）。 我先从User入手，算是给队员们抛砖引玉。尽管没有细致去研究，但是也有一些心得体会Share给Team，也在这里晒一下，希望会对出入Icon绘制的新手们有所启发。（并附带源文件及丑陋的手绘稿）。 Ø 前期准备工作，分析要画的是什么？如何形象表现？建议先手绘构思好几种方案，手绘可以PS构图节省时间。会草图时尽可能的突破性思考，如果能跳出“固有思维模式”最好。比如，我构思User形象时，就在考虑是简约版、憨厚型、笼统型、侧面体、商务型……等等，乱七八糟的各种想法，在这些都粗略画了草稿后，选一两个感觉比较喜欢、适合软件界面使用的样式开始用PS绘制；(附件中附带了王征宇画的两版手绘稿，建议大家画图标前都尝试先做手绘准备) Ø 由于我先画的是32px icon，所以不想浪费宝贵的尺寸画成简约版，我选择了商务精细型，用钢笔工具、自定义形状工具搭建每个细微的层次，这是分解结构最好细致一些，哪怕只有一像素的东西也要单独图层绘制，好处是后期更改容易，同时分解到最细时，每个图层的图形就会比较简单，画起来比较容易，不至于紧张画了半天发现一个瑕疵，退不回去也更改不了，成了“鸡肋”。 Ø 绘制之前脑中先理清分解后层次先后关系，谁盖着谁，谁做主体、谁做衬托…… Ø 多做辅助线帮助定位，细小图标更需要辅助线帮忙。 Ø 建议画小Icon时尽量放大画布（1000% 或者3200%），定位准，留意每个细节的处理是否妥当。但是要时常切换100%正常状态查看效果，不要一味追求细节，回到正常预览状态就乱成一团。我比较习惯画完一两步就反复切换各种比例查看效果，确认还说得过去再画下一步。 Ø 不要在一个图标上扣起来没完，一时间想的总归会不到位，画出比较理想的图形即可，马上开始画下一个图标，等积累了数个图标再整体修改。因为每个图标不是单独存在的，它们在产品界面共同起到修饰页面，表达操作的意义。 Ø 建议每个图标不要画完一个即收工，多复制几个，这个改改颜色，那个改下样式，综合一对比，就会选出一个更理想的。 Ø 源文件一定不要合层，保留所有原始图层，后期会整体改样式、颜色等。 Ø 比例：这是最需要引起绘制者注意的地方，不是Size 32px，图标就要满格画成32px，那就大错特错了！看下上个月我发的《图标设计的原则》，里面有介绍怎么画“定位框”，我给大家的源文件包含了三个定位框，注意比例。这也是为了以后拼接组合图标留有充分的空间。 未完待续…… 本文由 站酷网 - wangyufeng_888 原创，转载请保留此信息，多谢合作。

没有纸

马克
谢谢楼主