在设计当中,像素风格自成一片,深入我们生活的方方面面,神奇的小方块拼凑到一起抽象的表现出各种各样的形态,但又有一种独特的美感。
其实,手机上应用的最早的图标就是像素图标,由于十几年前的屏幕显示分辨率有限,显示精度并没有现在的智能手机这么清晰。随着科技的发展,图标效果越来越出色,精度也越来越高,像素图标开始淡出时代。
【儿时回忆:魂斗罗】
但是,从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 像素图标绘制完成。
总结:绘制像素图标时,一定要注意图标的立体感、形象感和清晰度,采用矢量工具,添加高光和阴影增加立体感。按照上述要求多多练习,自然可以熟能生巧。
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved