如何制作简约时尚的社交媒体图标

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

创建新文档

启动Illustrator创建新的项目文件“文件”>“新建” 或者“Control-N”。然后为新文件命名,设置尺寸,然后选择像素 单位 RGB 色彩模式

接下来,转到编辑>首选项>常规并将键盘增量设置为1像素,然后转到单位将数据设置如下图所示选项。接下来绘制的过程中你会发现这些设置将为你提供很大的帮助

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

创建图标形状

第1步

使用椭圆工具(L)画板上绘制一个98 x 98像素的圆圈,并创建4px深灰色描边

转到“视图”>“标尺”>“显示标尺”,然后在圆的四周创建参考线,作为活动绘图区域

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

第2步

接下来,使用矩形工具(M)绘制一个30 x 30像素的正方形,在正方形的对角线之间绘制一个三角形。将此三角形移动到灰色圆圈的左下方。确保它没有超出绘图区域

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

第3步

接下来我们需要做一些小调整。使用添加锚点工具(+)在三角形上添加一个新的锚点。将此点拖动到灰色轮廓上避免接触到圆圈内部。最后,用与圆圈相同的深灰色着色


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

第4步

选择灰色圆圈并转到对象>扩展外观,将圆圈内部笔触变为填充,选择生成的灰色环形状以及三角形,然后在“路径查找器” 面板中选择“ 联集” 将它们合并为单个形状。图标的主要形状就完成了


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

第5步

制作“图标形状”的五个副本,然后依照参考图像或进入“对齐” 面板将它们排列在画板上。将每个图标形状移动到单独的图层并相应地命名它们,方便之后在“图层”面板中进行图标的调整

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

创建脸书(Facebook)图标

第1步

定位到“Facebook图标”图层,选择文字工具(T)并使用World of Water字体粗体,在画板上输入字母“f” ,尺寸为 68pt。填充与形状相同的填充颜色并赋予文字2pt的轮廓

转到对象>扩展轮廓两次以展开文本。然后在图标形状内移动字母,与图标形状对齐

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

第2步

将图标形状和徽标保存为两个单独的形状,将它们合并为复合路径。进入“路径查找器” 面板中按“联集”,然后按“对象”>“复合路径”>“制作”(Control-8)


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

创建照片墙(Instagram)图标

第1步

定位在“Instagram图标”图层上。使用矩形工具(M)画板上绘制44 x 44像素正方形; 然后转到形状面板并在圆角半径中输入10 px获得圆角(1)。用相同的深灰色填充此形状

使用椭圆工具(L)绘制一个25 x 25像素的圆; 然后选择两个形状并选择对齐面板中的水平对齐中心垂直对齐中心(2)

选中两个形状的同时,在“路径查找器” 面板中选择“减去顶层” 获得复合路径(3)

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

第2步

接下来,在图标上绘制一个细长的46 x 2 px矩形; 然后选择两个形状并在“路径查找器”面板中选择“减去顶层”,然后进入“对象”>“复合路径”>“制作”(Control-8)(1)

在图标的右上方绘制一个5 x 5 px圆圈,选中两个形状后,在“路径查找器”面板中选择“减去顶层”,然后选择“对象”>“复合路径”>“制作”(Control-8)(2)

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

第3步

绘制18 x 18像素的圆圈,使用相同的深灰色给它创建一个2pt的轮廓。选择图标形状以及此圆圈,然后在“对齐” 面板中按“水平对齐中心”和“垂直对齐中心” 确保它们完美对齐(1)

保持选中状态,转到对象>扩展对象以将笔划转换为形状(2)。选择两个形状并在“路径查找器”面板中选择“联集”,然后选择“对象”>“复合路径”>“制作”(Control-8)(3)

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

第4步

将完成的复合形状排列在图标形状的中心(1)

此时,“Instagram图标”图层上应该有两个形状:徽标和图标形状。保持选中它们,进入“路径查找器”面板中按“联集”, 然后选择“对象”>“复合路径”>“制作”(Control-8)(2)将它们合并到新的复合路径中

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

创建推特(Twitter)图标

第1步

定位在“Twitter图标”图层上,创建一个27.5 x 27.5 px的圆圈,填充与图标形状相同的深灰色。切换到钢笔工具(P)绘制小鸟的主体形状,如下图所示

创建喙,绘制一个类似三角形的形状,然后转到对象>变换>反射,选中水平, 然后点击复制以获得下半部分

最后,用钢笔工具(P)绘制翅膀的形状。选择所有形状并在“路径查找器” 面板中选择“联集” 将它们合并为单个形状

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

第2步

将鸟标志移动到图标形状内,将其排列在中心位置(1)

在“Twitter图标”图层上,您现在应该有两个形状:徽标和图标形状。选择两个形状进入“ 路径查找器”面板单击“联集”,然后选择“对象”>“复合路径”>“制作”(Control-8)

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

创建优兔(YouTube)图标

第1步

定位在“YouTube图标”图层上。使用矩形工具(M)在画板上 绘制一个50 x 37像素的矩形(1); 然后转到变形面板并在圆角半径中输入8 px获得圆角(2)

接下来,在圆角矩形的中心位置(3)绘制一个小三角形,然后保持选中两个图形,进入“路径查找器”面板中选择“减去顶层” 获得复合路径(4)

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

第2步

将徽标移动到图标形状内并将其排列在形状中心(1)。如果需要,将图标形状和徽标合并到新的复合路径中(2)

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

创建色拉布(Snapchat)图标

第1步

在“Snapchat图标”图层上,绘制一个27 x 43像素的矩形(1); 然后转到“变形”面板并在“圆角半径”中输入12px,获得圆角矩形(2)

使用直接选择工具(A)选择形状的左下角和右下角锚点,将它们向外移动一段距离(3)。切换到添加锚点工具(+)并使用它在底部添加三个新的锚点; 然后移动它们并调整手柄以创建波浪形形的底部(4)

使用添加锚点工具(+)在左侧和右侧添加其他两个锚点; 然后将它们向内移动,获得类似幽灵的形状(5)

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

第2步

使用相同的深灰色填充上一步骤中获得的形状(1)。然后使用钢笔工具(P)绘制两条短线条作为手臂,并将粗细设置为4pt。选择“描边” 面板中的“圆形端点”选项以获得圆形末端(2)。保持选中手臂形状的同时,转到对象>扩展外观将笔划变为形状(3)

选择所有形状,然后在“路径查找器” 面板中选择“联集” 将它们合并为单个形状(4)

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

第3步

将徽标移动到图标形状内,将其排列在图标形状的中心(1)。如果需要,也可以将徽标和图标形状合并到一个新的复合路径中(2)

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

创建矢量Pinterest图标

第1步

在“Pinterest图标”图层上,使用文本工具(T)使用Magnolia脚本字体在画板上写下字母“P” ,大小设置为64pt(1)。转到对象>扩展外观将文本转换为形状(2)

直接选择工具(A)的帮助下 ,移动文字上的一些锚点获得尖形的底端,使其顶部变得更圆,使其右侧不那么圆(3) ,最后,你会得到一个更像原始徽标的形状(4),当然也不需要完全相同

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

第2步

将徽标移动到图标形状的中心位置(1)。如果需要,可以将徽标和图标形状合并为新的复合路径(2)

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

保存图标

第1步

首先将所有图标整齐的排放在画板上

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

第2步

我们以Facebook图标为例。使用矩形工具(M)绘制一个98 x 98像素的正方形。选中图标和方形,选择水平对齐中心垂直对齐中心确保它们居中对齐

仅选择正方形并转到对象>画板>转换为画板以定义新区域。转到文件>导出>另存为Web来保存图标。选择您需要的文件类型,PNG,透明背景或JPEG,然后点击保存。对其余图标执行相同操作以单独保存它们

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

创建图标通知符号

第1步

使用矩形工具(M)绘制一个80 x 50像素矩形,并用浅红色(1)着色。在“变换”面板中,选择“圆角半径”输入10px获得圆角矩形(2)

在圆角矩形的底部绘制一个小三角形(3),然后保持选中两个形状,进入“路径查找器”面板选择“联集” 将它们合并为单个形状(4)

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

第2步

在圆角矩形的左侧绘制白色的11 x 11像素 圆圈 ,然后在其下方绘制一个15.5 x 6像素矩形。在圆角矩形中将圆角半径设置为4px(1)

使用文本工具(T)并使用Sniglet字体写入“1”或者任意的数字,大小设置为27磅。给它一个白色填充和0.75pt的轮廓(2)

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

第3步

首先绘制一个14 x 14像素的圆圈,填充白色(1)。使用直接选择工具(A)选择底部锚点并向下移动一定距离获得类似花瓣的形状(2); 然后在“变换”面板(3)中将此形状旋转20度。转到对象>变换>反射,选中垂直并单击复制获取第二个形状,通过使它们的底部锚点重叠来对齐它们(4)

保持选中两个形状的同时,在“路径查找器”面板中选择“联集” 将它们合并为心形(5)

最后,使用相同的字体和设置在形状的旁边输入数字(6)

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

第4步

将创建好的形状放置在图标的右上方,完成通知符号

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

完成

(本教程由寻图标icon.52112.com提供)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,271评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,725评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,252评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,634评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,549评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,985评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,471评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,128评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,257评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,233评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,235评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,940评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,528评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,623评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,858评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,245评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,790评论 2 339

推荐阅读更多精彩内容