跳到主要内容

设计像素完美的矢量图标

在本演练中,我将演示如何使用Adobe Illustrator内置的效果和核心工具,简化了绘制复杂形状的过程。

Illustrator有两种效果:Illustrator效果和Photoshop效果。两者都是在完全提交样式之前预览样式的好方法。但Photoshop Effects一旦完全应用,就需要将对象和形状转换为光栅,而大多数Illustrator效果都会保留矢量数据。

虽然许多图标是使用矢量绘制的,但它们通常在屏幕的位图世界中查看。注意像素级细节仍然很重要。

通过粘贴网格并在绘制元素时指定元素的确切位置,我们可以确保我们的矢量图标既清晰又像素完美。

01.开始......

创建一个新的Illustrator文档。将宽度/高度字段设置为28px。将单位设置为像素。单击确定。打开首选项>指南和网格....将Gridline设置为every:和Subdivisions:10px。单击确定。转到视图>显示网格。点击选择工具(V)并选择该行。转到效果>扭曲和变换> Zig Zag ....

02.之字形和曲线

输入尺寸:1px,每段脊:5px。将点设置为平滑。选择线段工具(\)。在保持班次时划一条线。在“变换”面板中,选择小网格并将X设置为14px,将Y设置为15px。设置宽度为22px。打开“笔触”面板。设置为1pt。选择该行,然后转到对象>扩展外观。

03.画一个圆圈

点击“L”键。单击画板。将宽度设置为5px。选择圆圈;点'C'。单击圆圈的顶部/左侧锚点。点击V,选择圆圈的较大部分并将其删除。选择最后一个弧。使用“变换”面板,选择右上角。将X设置为3px,将Y设置为14px。选择弧并转到对象>路径>连接。

04.重复的线条

选择路径。使用“变换”面板,选择左上角并将X和Y设置为0.5px。选中该行后,按住Opt / Alt移动该行以复制。选择新行,点击“R”并返回。在弹出窗口中,将角度设置为180度。使用“变换”面板,选择右下角并将X和Y设置为27.5px。

05.加入生产线

选择两行,复制它们,然后将它们粘贴到位(Shift + Cmd / Ctrl + V)。按R键旋转工具,然后按Return键。输入90%。选择所有四行并转到对象>路径>加入。选择新形状,然后转到对象>展开。在对话框中单击“确定”。单击“A”,单击轮廓的内边缘并单击“删除”。

06.构建框架

选择矩形工具(M);单击画板。在弹出窗口中,将宽度和高度设置为18px。单击确定。在“变换”面板中,选择中心点并将X和Y设置为14px。选择外框和方框。在“形状模式”下的“窗口”>“路径查找器”中,选择“减去前”。检查一切都排好了。

07.画头

在框架中绘制一个6px乘8px的矩形(点击'M')。在“变换”面板中,选择顶部中心点:将X设置为14px,将Y设置为7px。选择矩形并打开“效果”菜单。选择“样式”>“圆角”。在弹出窗口中,使半径为3px并转到“对象”>“展开外观”以使其成为单个对象。

08.建立肩膀

使用椭圆工具绘制椭圆。在弹出窗口中,将宽度设置为12pxm,将高度设置为6px。在“变换”面板中选择顶部中心点,将X设置为14px,将Y设置为16px。按M,单击任意位置并创建一个12px乘3px的矩形。在“变换”面板中,选择顶部中心点并将X设置为14px,将Y设置为19px。

09.合并形状

选择画板上的所有对象,然后在“路径查找器”面板中选择“联合”。曾经是四个形状现在是一个单一的形状。你有它。现在,您可以使用清晰的像素网格创建一个简单的矢量图标。它将以28px(56px,112px等)的倍数保持清晰,并且可以无限缩放。

单词:Jory Raphael

Jory Raphael是一位专注于清洁,可用图形的设计师和插画师。除了在他的佛蒙特工作室Sensible World工作之外,他还负责5by5的艺术作品,并且是字体铸造厂定制图标的创造者。Symbolicons本教程出现在计算机艺术问题235

像这样?阅读这些!



翻译字数超限