设计一组精美的足球图标

版权声明:转载请注明 https://blog.csdn.net/jhjklk/article/details/84976557

(本教程由寻图标icon.52112.com提供)

建立新文档

我们首先建立一个新文档(文件>新建或控制-N),进行以下调整:

  • 画板数量: 4

  • 版面设置:从右向左

  • 间距: 64像素

  • 宽度: 128像素

  • 高度: 128像素

  • 单位:像素

“ 高级”选项:

  • 色彩模式: RGB

  • 光栅效果:屏幕(72 ppi)

设置图层

一旦我们建立了新文档,接下来我们则需要设置几个图层,以便将参考网格与图标分开,这将有助于我们简化工作流程。

打开“ 图层”面板,创建两个图层,将其命名:

  • 第1层>参考网格

  • 第2层>图标

(本教程由寻图标icon.52112.com提供)

创建参考网格

接来下开始创建参考网格,这将有助于我们对齐图标和调整图标大小。

第1步

选择矩形工具(M)创建一个128x128像素的正方形,使用#F15A24进行着色,然后使用“ 对齐”面板的“ 水平和垂直对齐中心”选项定位到第一个画板的中心。

第2步

创建另一个较小的120x120像素正方形(#FFFFFF),将其定位到前一个形状的中心,用作我们的绘图区域,提供4像素的轮廓。

第3步

使用Control + G键盘快捷键选择两个形状并将它们组合在一起,然后创建它们的副本(Control + C)添加到剪贴板,然后我们使用(Control + F)粘贴到每个剩余的画板上。组合并锁定背景图层,进行下一步操作。

(本教程由寻图标icon.52112.com提供)

创建足球鞋图标

定位到第一个画板选择第一图层,我们开始创建足球鞋图标。

第1步

选择椭圆工具(L),然后使用120x120 px的圆创建背景,使用#5FB3FF对其进行着色,然后定位到底层画板的中心。

第2步

接下来的创建一个112x12像素的矩形,使用#FFFFFF进行着色然后放在位置绘图区域底边40像素的位置。

第3步

选择“ 变换”面板的“ 矩形属性”中将其底角的半径设置为8 px,调整我们刚刚创建的矩形的形状。

第4步

使用描边方法为形状赋予轮廓,然后创建它的副本(Control + C),粘贴在图形前面(Control + F),将其颜色更改为#19649B进行调整。使用填色(Shift + X)填充颜色,将生成的形状的权重设置为8 px,将角设置为圆形。

第5步

使用12 px高8 px宽的画笔(#19649B)绘制垂直线条,放置在位于距离鞋底左边缘24 px的位置,使用Control +G选择并将所有三个形状组合在一起。

第6步

创建一个8x10像素的矩形(#19649B)开始处理鞋底的锯齿,使用直接选择工具(A)单独选择其底部锚点进行调整,然后使用箭头键或移动工具(右键单击>变换>移动>水平>±2 px将其推入内部方向2像素的距离(具体取决于你从哪一侧开始)。将生成的形状添加为4 px的轮廓(#19649B),分组(Control + G),然后将绘制的图形定位在鞋底的底部边缘上,距离左锚点4像素的位置。

第7步

给刚刚创建的图形添加四个副本(Control + C> Control + F四次),将他们放置在参考图像中看到的位置。创建完成时,不要忘记选择并分组(Control + G)当前创建的形状,然后再继续下一步。

第8步

创建一个112x36 px的矩形开始绘制靴子的上部分,使用#9FDFFF进行着色,然后将其放置在鞋底的顶部边缘上方。

第9步

使用添加锚点工具(+)给刚刚创建的形状添加几个新锚点,通过使用直接选择工具(A)单击并拖动它们调整到它们在参考图像中看到的位置。

第10步

调整其底部和右侧脚踝的锚点使用平滑选项进行调整,然后重新选择锚点的把手,进行调整,直到你得到一个不错的弧度。

第11步

给刚刚创建的形状添加副本(Control + C> Control + F)添加内部的高光,将其与内部对齐的并添加8 px的轮廓(#FFFFFF)。

第12步

选择并将其底部锚点向下推进4 px(右键单击>)来调整其高度。(变换>移动>垂直> 4像素)。

第13步

使用20x16 px矩形(#FFFFFF)添加鞋子的脚跟,将其左上角的半径设置为“ 变换”面板的“ 矩形属性”中的16 px。为生成的形状添加8 px的轮廓(#19649B),给图形进行分组(Control + G),然后将两者放在上部填充形状的右下角。

第14步

创建三条24 px宽36 px高的斜线(#19649B)绘制阿迪达斯鞋子的线条,彼此间隔16 px,进行分组(Control + G)然后定位在如参考图像所示的位置。

第15步

创建一个32x16 px的矩形(#19649B)添加脚趾部分的侧面部分,我们将对齐到鞋子上部分的左下角,然后通过重新定位其右上方的锚点,使其最终与第一个条纹平行。

第16步

创建4x4 px的圆创建鞋带孔眼,使用#19649B进行着色,然后定位到参考图像中高光的上部。

第17步

靴子的上半部分完成以后我们就可以进行分组(Control + G)了,我们选择前面粘贴底层填充形状的副本(Control + C)来掩盖它们(Control + F)然后选择副本和组,右键单击>制作剪贴蒙版。

第18步

接下来给靴子的上部添加8 px粗轮廓(#19649B)完成图标,选择所有完成的图形并进行分组(Control + G),然后对整个图标执行相同操作。

(本教程由寻图标icon.52112.com提供)

创建足球场图标

一旦我们完成了第一个图标的处理,我们就可以跳到下一个画板,我们将逐步在该区域创建足球场图标。

第1步

首先使用120x120 px的圆创建背景,使用#5FB3FF对其进行着色,然后将中心对齐到底层的画板。

第2步

接下来创建一个56x64 px矩形(#9FDFFF)开始处理足球场的左半部分,给矩形创建8 px的内部高光(#FFFFFF)和8 px的轮廓(#19649B),我们将绘制的图形进行分组(Control + G)然后居中对齐到绘图区域的左边缘。

第3步

创建一个8 px轮廓(#19649B)12x24像素的矩形(#FFFFFF),将其进行分组(Control + G),然后将中心对齐到上一步骤形状的左边缘。

第4步

创建12x16 px的矩形(#FFFFFF),将其右角的半径设置为8 px进行调整,将图形定位在上一步创建图形的下方(右键单击>排列>向下一层移动) 。完成后,选择刚刚创建的图形并进行组合(Control + G)。

第5步

给我们刚刚完成图形创建副本(Control + C> Control + F)移动到右半部分,给图形做垂直反射(右键单击>变换>反射>垂直),然后定位到绘图区域的另一侧。

第6步

创建24x24 px的圆(#FFFFFF)创建8 px的轮廓(#19649B)给圆形的中间添加一个24 px高8 px宽的直线(#19649B),使用Control + G键盘快捷键将三个图形组合在一起。

第7步

完成图标,创建几个4x4 px圆圈(#19649B)作为球员,调整到参考图像中看到的阵型或您自己选择的阵型进行定位,选择所有图形并进行分组(Control + G)。

(本教程由寻图标icon.52112.com提供)

创建裁判口哨图标

一旦我们完成了第二个图标的处理,我们就可以转到相邻的画板,创建裁判哨子。

第1步

创建120x120 px的圆圈添加背景,使用#5FB3FF对其进行着色,然后将中心对齐到下面的活动绘图区域。

第2步

使用64x64 px圆圈为哨子的圆形部分创建主要形状,我们将使用#9FDFFF进行着色,然后将其定位在距活动绘图区域左边缘中心16 px的位置。

第3步

使用添加锚点工具(+)在圆形的右上部分添加新锚点来,然后使用直接选择工具(A)择顶部锚点并删除它(Delete)。

第4步

选择钢笔工具(P),创建参考图像中的形状。

第5步

使用“ 实时角”工具将其内侧角的半径设置为8 px,然后使用“ 移动”工具选择并将其右侧部分的底部锚点向内推动4 px的距离来调整生成的路径(右侧单击>变换>移动>水平> -4 px)。

第6步

给我们刚刚创建的图形添加8 px的内部高光(#FFFFFF)和8 px的轮廓(#19649B),在移动之前选择并将它们组合在一起(Control + G)进行下一步。

第7步

创建16x16像素的圆(#FFFFFF)添加哨子的装饰,在其上方我们再添加一个较小的8x8像素(#19649B)圆,将其分组(Control + G)然后定位到哨子圆形的中心部分。

第8步

创建20x4 px矩形(#19649B)创建哨子上方的小口,通过选择并将其左下锚点向内推动4 px(右键单击>变换>移动>水平> 4 px)进行调整。为生成的形状创建8 px的轮廓(#19649B),给图形进行分组(Control + G),然后将两个定位在参考图像中的位置。

第9步

使用8x4 px矩形(#19649B)和8 px粗轮廓(#19649B)添加凸起部分,将它们分组(Control + G)然后定位在喙顶部。

第10步

创建12x12 px和8 px轮廓的圆(#19649B)添加哨子底部的小圆,将其定位在哨子圆形部分的前端。完成后,选择并将所有组成形状组合(Control + G)在一起,然后对整个图标执行相同操作。

(本教程由寻图标icon.52112.com提供)

创建扩音器图标

接下来我们跳转到最后一个画板,开始进行扬声器的绘制。

第1步

首先创建120x120像素的圆作为背景,使用#5FB3FF对其进行着色,然后将中心对齐到下面的绘图区域。

第2步

使用112x64 px矩形为扩音器创建主要形状,使用#9FDFFF进行着色,然后将中心对齐到底层画板。

第3步

选择并将左锚点向内推动20 px的距离来调整我们刚刚创建的矩形的形状(右键单击>变换>移动>垂直>±20像素,具体取决于从哪一侧开始)。

第4步

将生成的形状赋予8 px内部高光(#FFFFFF),完成之后,继续进行下一步。

第5步

创建四条44 px宽64 px高的直线(#19649B)为扬声器添加细节,将彼此的间隔调整为24 px,给完成的图形进行分组(Control + G),然后将它们居中对齐到底层画板。

第6步

创建一个88x64像素的矩形并添加8 px的轮廓(#19649B)放置在下图所示的位置,创建它的副本(Control + C> Control + F)来屏蔽对角线细节(选择副本形状>右侧单击>制作剪贴蒙版)。完成后,选择蒙版形状和矩形,并使用Control + G键盘快捷键将它们组合在一起。

第7步

使用填充形状的副本(Control + C> Control + F)遮住我们刚刚创建的形状,添加8 px的轮廓,然后再继续下一步。

第8步

创建32像素和72像素高同样宽8像素的直线(#19649B)分别放置在圆形的后部和前部。完成后,使用Control + G键盘快捷键选择并分组刚刚创建的形状。

第9步

完成图标,创建24x24 px和8 px轮廓的圆(#19649B),将其放置在扬声器的后面(右键单击>排列>向后排列),如参考中所示图像。完成图形以后,将所有图形选择并组合(Control + G)在一起。

完成

(本教程由寻图标icon.52112.com提供)

猜你喜欢

转载自blog.csdn.net/jhjklk/article/details/84976557