在设计当中，像素风格自成一片，深入我们生活的方方面面，神奇的小方块拼凑到一起抽象的表现出各种各样的形态，但又有一种独特的美感。

其实，手机上应用的最早的图标就是像素图标，由于十几年前的屏幕显示分辨率有限，显示精度并没有现在的智能手机这么清晰。随着科技的发展，图标效果越来越出色，精度也越来越高，像素图标开始淡出时代。

【儿时回忆：魂斗罗】

但是，从2014年开始，一些热门的手机游戏开始走复古像素风，并且引领了风潮。这说明“没有过时的设计，只有使用不当的设计”。

【像素游戏：《flAppy bird》】

同时，banner、广告、订阅号、海报、艺术插画都大批量采用像素设计风。因为这种设计门槛低，并且上手快，因此是UI设计入门的首选方式。

既然像素风这么受欢迎，那还等什么，和数艺君一起跟着实例操作起来~

像素图标操作实例

下面数艺君会讲解如何绘制像素图标。这类图标一般是成套出现的，这里会讲解4种像素图标。虽然只是很小的一枚图标，但其风格和特点还是各有不同的。

01 打开Photoshop软件，新建“像素图标”文档，设置“宽度”为16像素，“高度”为16像素，“分辨率”为 72，再单击“确定”按钮。

02 绘制杯子图标。单击“矩形工具”，然后在选项栏设置“填充”颜色为黑色。

TIPS：像素图标呈现的锯齿感正是其特点的体现。制作像素图标可以使用“铅笔工具”，但因为需要进行每1像素的绘制，过程麻烦并缓慢，所以该工具不常用。常用的工具为矢量工具，绘制标准又易于修改。

铅笔工具绘制1像素宽图形

矩形工具绘制1像素宽图形

03 使用“矩形工具”在画布上绘制矩形。

04 绘制杯子缺口。选择画布下方的矩形，按快捷键Ctrl T进入自由变换模式，将矩形进行缩放。

TIPS：没有直接使用“椭圆形工具”是因为在像素绘画中不会出现绝对的圆，因为绘制时会出现虚边。有马赛克和虚边存在就不能生成矢量图，所以使用其他方法绘制圆或圆弧。

05 选择左右两边的矩形，按快捷键Ctrl T进行缩放。

06 选中所有矩形图层，按快捷键Ctrl E进行合并，修改图层名称为“轮廓”。

07 绘制杯里的水。新建“水”图层，使用“矩形工具”绘制矩形，设置“填充”颜色为（R:68，G:146，B:252）。

08 新建“亮部”图层，使用“矩形工具”在水上方绘制2像素的图像，设置“填充”颜色为（R:105，G:169，B:255）。

TIPS：做像素图标时，图形之间的间隔通常采用偶数单位格或4的倍数单位格，比如2、4、8、16 等。

09 使用“矩形工具”绘制多个2像素的图像，然后选中绘制的矩形图层，按快捷键Ctrl E进行合并，设置“填充”颜色为（R:51，G:121，B:215），再修改图层名称为“暗部”。

10 新建“气泡”图层，然后在“杯子”中绘制方形，接着在选项栏设置“填充”为白色，再选中所有图层，按快捷键Ctrl G进行编组，最后修改组名称为“杯子”。

11 绘制警告图标。新建图层，使用“矩形工具”绘制图形。

12 使用“矩形工具”在矩形中绘制图形，选中所有图层，按快捷键Ctrl E进行合并，修改图层名称为“边框”。

13 新建“填充色”图层，使用“矩形工具”绘制图形，设置“填充”颜色为（R:254，G:87，B:87）。

14 新建“高光”图层，使用“矩形工具”绘制图形，设置“填充”颜色为（R:255，G:107，B:107）。

15 新建“阴影”图层，使用“矩形工具”绘制图形，设置“填充”颜色为（R:225，G:59，B:59）。

16 新建“叹号”图层，使用“矩形工具”绘制图形，设置“填充”颜色为白色。

17 复制“叹号”图层，然后将图形向下拖曳，接着双击复制图层，设置“填充”颜色为（R:225，G:59，B:59），再修改图层名称为“叹号投影”。

18 按快捷键Ctrl G将绘制的“叹号”图层编组，最后修改组名称为“警告”。

TIPS：复制图层除了可以采用选择右键菜单栏选项和按快捷键Ctrl J的方式外，选中需要复制的图层，按住Alt键向下拖动，也可以复制该图层。

19 绘制发言图标。使用“矩形工具”绘制图形，按快捷键Ctrl E进行合并，修改图层名称为“轮廓”。

20 新建“填充色”图层，使用“矩形工具”绘制图形，在选项栏设置“填充”颜色为（R:96，G:193，B:53），再将图层移动到“外框”图层下方。

TIPS：使用“直接选择工具”可以选择矢量图形的锚点，比使用“路径选择工具”更加灵活。若要进行修改，使用“直接选择工具”框选需要的锚点就可以了。

21 使用“矩形工具”绘制图形，然后设置“填充”颜色为白色，接着选中绘制的图层，按快捷键Ctrl G将绘制的图层成组，修改组名称为“消息”。

22 绘制饭团图标。新建“外框”图层，使用“矩形工具”绘制图形。

TIPS：选中需要复制的图形，按住Alt键拖曳到需要的位置后，图形就会复制一份。需要选中多个图形时，按住Shift键，使用“路径选择工具”或“直接选择工具”进行选择即可。

23 新建“填充色”图层，使用“矩形工具”在外框内绘制多个图形，设置“填充”颜色为（R:99，G:253，B:202），再选中绘制的所有图层按快捷键Ctrl E进行合并。

24 新建“高光”图层，使用“矩形工具”绘制图形，设置“填充”颜色为（R:255，G:214，B:116）。

25 新建“阴影”图层，使用“矩形工具”绘制图形，设置“填充”颜色为（R:237，G:166，B:53）。

26 新建“紫菜”图层，使用“矩形工具”绘制图形，设置“填充”颜色为黑色，并将图形垂直居中。

TIPS：我们可以使用“分布工具”准确调整图形的位置。首先按快捷键Ctrl A，此时画布上会出现虚线，再选中需要调整位置的图形所在的图层，接着单击“移动工具”，并在选项栏中选择“水平居中对齐”，图形就居中了。

27 像素图标绘制完成。

总结：绘制像素图标时，一定要注意图标的立体感、形象感和清晰度，采用矢量工具，添加高光和阴影增加立体感。按照上述要求多多练习，自然可以熟能生巧。