• <menu id="s2mg8"></menu>
    <tt id="s2mg8"></tt>
    <object id="s2mg8"><label id="s2mg8"></label></object>
    • 思缘论坛首页
    • 思缘图库
    • PS教程
    • 论坛搜索
    • 下载记录
    • 每日签到
    • 设计软件,PS下载
    • VIP素材区预览
    • VIP素材区下载
    • 缘分?#39029;?#20540;
    发新话题
    打印

    [精彩实例] Illustrator设计卡通风格的网页分享图标

    Illustrator设计卡通风格的网页分享图标

    来源站酷     作者公众UI设计微课堂

    先看看效果图



    1.如何设置新文档

    由于我非常确定您已经在后台运行了Illustrator因此请将其启动并使用以下设置设置新文档(文件>新建或控制-N)

    画板数量 1

    宽度 800像素

    身高 600 px

    单位 像素

    然后从高级选项卡

    颜色模式 RGB

    栅格效果屏幕(72ppi)

    预览模式默认



    快速提示你们中的一些人可能已经注意到将新对象与像素网格对齐选项丢失这是因为我正在运行该软件的新版CC 2017版本其中Illustrator 处理形状捕捉到底层像素网格的方式发生了很大变化

    2.如何设置自定义网格

    由于我们将使用像素完美的工作流创建图标因此我?#20999;?#35201;设置一个漂亮的小网格?#21592;?#25105;们可以完全控制我们的形状 - 也就是说如果我们运行的是旧版本的该软件

    步骤1

    转到编辑>首选项>指南和网格子菜单然后调整以下设置

    网格线 1 px

    细分 1



    快速提示通过深入阅读Illustrator网格系统的工作原理您可以更多地了解网格

    第2步

    一旦我们设置了自定义网格我?#20999;?#35201;做的就是确保我们的形状看起来很清晰可以在视图菜单下找到对齐网格选项每当您进入像素预览时就会转换为对齐像素模式

    现在如果您对整个像素完美的工作流程很陌生我强烈建议您仔细阅读我如何创建像素完美的艺术作品教程这将有助于您立即拓宽技术技能

    3.如何设置图层

    在创建新文档的情况下使用几个图层来构建项目将是一个不错的主意因为通过这种方式我们可以一次关注一个图标从而保持稳定的工作流程

    这就是说调出图层面板并总共创建四个图层我们将重新命名为

    第1层参考网格

    第2层电话共享

    第3层电子邮件共享

    第4层即时通讯分享



    4.如何创建参考网格

    该 基准网格 (或基础网格)是一组精确的界定参考面这让我们专注于规模性和一致性以建立我们的图标

    通常网格的大小决定了实际图标的大小并且它们应该始终是您在开始新项目时做出的第一个决定因为您始终希望从最小的可能大小开始并在此基础上进行构建

    现在在我们的例子中我们将只使用一个尺寸创建图标包更?#38750;?#22320;说是128 x 128像素这是一个相当大的尺寸

    步骤1

    首先锁定除参考网格图层以外的所有图层然后抓住矩形工具(M)并创建一个128 x 128像素的橙色(#F15A24)方形这将有助于定义图标的整体大小



    第2步

    添加另一个更小的120 x 120 px one(#FFFFFF)它将作为我们的活动绘图区域从而为我们提供全方位4 px填充



    第3步

    使用Control-G键盘快捷键对组成参考网格的两个方块进行分组然后在彼此距离为40 px的位置创建两个副本确保将它们对齐到画板的?#34892;ġ?br />
    完成后锁定当前图层并转到下一个图层在那里我们将开始处理第一个图标



    5.如何创建电话共享图标

    随着文档的全部设置让我们通过确保我们位于正确的图层(这将是第二个)然后放大第一个参考网格来启动项目?#21592;?#25105;们可以更好地了解我们的图标的形状

    步骤1

    使?#20040;?#26377;8像素?#21069;?#24452;的56 x 94像素?#27493;?#30697;形创建其主体 然后将其置于底层活动绘图区域的左下角开始使用左?#21482;?#30830;保将 4 px缺口为其大纲#C4CEE8



    第2步

    通过创建它的一个副本(Control-C)我们将在前面?#31243;?Control-F)然后通过将其颜色更改为#2B3249然后将其重量设置为8 px

    完成后使用Control-G键盘快捷键选择并将两个形状组合在一起



    第3步

    通过创建一个32 x 58像素的矩形开始工作我们将使用该像素的颜色#8195C1然后水平居中对齐到我们刚分组的两个形状距离填充形状顶部边缘12像素可见表面



    步骤4

    使用Stroke方法 为显示器显示8 px厚的轮廓(#2B3249)然后将两个形状选择并分组(Control-G)



    第5步

    使用我们将使用的8 x 8像素圆圈创建?#21482;?#30340;底部圆形按钮#2B3249然后居中对齐



    第6步

    打开 像素预览模式然后使用?#22987;?#24037;具(P)在前置扬声器单元中绘制使?#20040;?#26377;圆形帽的12 px宽 4 px厚行程(我们将使用该颜色)然后居中对准可见?#21482;?#19978;部的表面#2B3249



    第7步

    使用12 x 4像素的矩形创建?#21482;?#30340;电源按钮我们将使用该矩形进行彩色#2B3249然后将其放置在距离当前绘图区域左边缘12像素的较大轮廓上



    第8步

    调整我们刚刚创建的形状方法是在 变形面板的 矩?#38382;?#24615;中将顶角的半径 设置为2 px然后将所有?#21482;?#30340;构图形状选择并分组(Control-G)



    第9步

    使用我们刚完成工作的副本(Control-C> Control-F)创建第二部?#21482;?#25105;们将在水平和垂直方向上进行反射(右键单击>变换>反射>水平/垂直)然后然后定位到活动绘图区域的?#20063;?#23558;其与其顶部边缘对齐



    第10步

    通过创建一个20 x 20像素圆来开始工作通过创建一个20 x 20像素圆我们将使用该圆#ED664C然后将其放置在左侧?#21482;?#26174;示屏上距离其顶边9像素左边距6像素



    第11步

    通过创建另外两个20 x 20像素圆圈(#ED664C)继续在心脏上工作在?#20063;?#23450;位一个使其最终重叠第一个表面 4个像素最后一个在底部这样它重叠其他两个表面 8个像素



    第12步

    一旦你有三个圆圈选择并使用探路者的统一形状模式将它们合并成一个更大的形状



    步骤13

    通过删除统一过程中创建的?#34892;?#38170;点只需使用删除锚点工具( - )单击它们即可调整生成的形状



    第14步

    继续调整新的形状方法是选择锚的手柄并拖动它们?#21592;?#22312;每个侧面都获得良好的曲率完成之后用圆形连接将生成的形状绘制为8像素厚的轮廓(#2B3249)然后选择两个形状并将它们组合在一起



    第15步

    由于我们希望心脏保持在?#21482;?#26174;示屏的可见表面因此我们必须使用一个24 x 50像素的矩形(用黄色突出显示)屏蔽它我们将?#34892;?#23545;准显示屏然后只需选择心脏和矩形右键单击并选择 制作剪辑蒙版?#20445;?#30830;保使用Control-G键盘快捷键将它和左侧?#21482;?#20998;组在一起



    步骤16

    通过创建蒙面心脏的副本完成图标然后将其对?#21152;也只?#30340;显示屏确保垂直翻转(右键单击>变换>反射>垂直)

    一旦到位将其与电话一起分组(Control-G)然后?#36816;?#26377;图标的组成部分进行相同处理



    6.如何创建电子邮件共享图标

    假设你已经移动到下一层(这将是第三层)放大第二个参考网格让我们开始吧

    步骤1

    使用一个96 x 64像素的矩形创建信封的主体我们将使用这个矩形进行着色#ED664C然后居中对齐底层的有效绘画区域距离其底边4像素



    第2步

    通过在 变形面板的 矩?#38382;?#24615;中将 其?#25417;?#30340;半径设置为8像素调整刚创建的形状



    第3步

    使用Stroke方法 为生成的形状绘制一个8像素厚的轮廓(#2B3249)只有这次将其角设置为圆形加入确保在之后选择并将两个形状分组(Control-G)



    步骤4

    使用一个96 x 64像素的矩形创建信封的上半部分我们将使用该矩形#BF402E 然后居中对齐其底部将其定位使其下半部分与其重叠



    第5步

    通过使用添加锚点工具(+)向其每个边缘的?#34892;?#28155;加一个新的锚点然后删除其角点(使用参考图像突出显示)在删除锚点工具( - )



    第6步

    给出生成的形状为8像素厚的轮廓(#2B3249)确保将笔画的角设置为圆形加入之后将两个形状选择并分组(Control-G)



    第7步

    选择?#30452;使?#20855;(P)并 使?#20040;?#26377;圆帽的8 px厚行程 (#2B3249)绘制信封的?#25945;?#23545;角线细节线



    第8步

    使用一个64 x 80像素的?#27493;?#30697;形创建字母的主体该矩形具有8 像素的?#27493;前?#24452;我们将使用该颜色#F4E9E9 然后居中对齐底层的有效绘图区域距离其顶边4像素



    第9步

    给出我们刚刚创建了8像素厚轮廓的#2B3249形状()然后使用Control-G键盘快捷键选择并分组两个形状

    第10步

    快速解锁前一层然后创建一个我们已蒙版的心脏副本(Control-C)并将其?#31243;?#22238;(Control-F)到当前图层上?#34892;?#23545;准信封的字母将它定位在一定距离的8 PX从填充形状的可见表面

    然后一旦完成使用Control-G键盘快捷键选择并分组它们



    第11步

    通过创建信封上部的副本(Control-C)(我们将在前面?#31243;Control-F)然后通过删除其顶部锚点进行调整来掩盖我们刚刚分组的两个图形然后关闭路径使其跟随信封本身的宽度



    第12步

    现在正如您可能已经看到的那样我?#20999;?#35201;通过双击它来隔离掩模然后添加口袋轮廓的向下部分的副本以正确掩盖字母的表面

    完成后您可以选择遮罩的形状和信封的上部分并将其组合(Control-G)以防止意外分离

    步骤13

    选择?#30452;使?#20855;(P)并使用4 px厚的笔画(#2B3249)绘制箭头的前部分确保将头部的帽和角设置为圆形

    慢慢来一旦完成使用Control-G键盘快捷键选择并分组这?#25945;?#36335;径

    第14步

    使用28 px宽 4 px粗Stroke(#2B3249)绘制箭头的后部分我们将在活动绘图区域的左边缘和字母的轮廓之间放置该Stroke()



    第15步

    使用12 x 12像素的正方形创建小?#27493;?#25105;们将使用该正方形进行着色#EAA74E然后居中对齐箭头的背部距离当前绘图区域的左边缘2像素



    步骤16

    调整我们刚刚通过添加新的定位点到每个使用它的侧边缘的?#34892;?#21019;建的形状添加锚点工具(A) 然后选择和通过的距离将他们推向?#20063;? PX使用的移动工具(?#19968;?gt;变换>移动>水平> 6 PX)



    步骤17

    通过给出生成的形状一个4 px厚的轮廓(#2B3249)以圆形连接分组(Control-G)然后将它们发送到箭头背部的背面(右键单击>变换>排列>发?#22836;?#22238;)

    完成后请不要忘记使用Control-G键盘快捷键选择并分组所有图标的组成部分



    7.如何创建IM共享图标

    我们现在下?#26723;?#31532;三个?#24425;?#26368;后一个图标所以假设您已经移动到最后一层放大其参考网格并让我们完成这一步

    步骤1

    使用一个88 x 68 px矩形创建左边的文本框的主体我们将使用这个矩形进行着色#C2A6DD然后将其放置在底层活动绘图区域的左上角并在其周围留出4 px的空隙作为轮廓

    第2步

    通过在 变形面板的 矩?#38382;?#24615;中将其顶部和右下角的半径 设置为8像素调整刚创建的形状



    第3步

    切换到 像素预览模式(Alt-Control-Y)然后使用添加定位点工具(+)为文本框的底边添加一个新的定位点将其定位在距离其左侧20像素的位置



    步骤4

    使用直?#21451;?#25321;工具(A)选择其左下角定位点然后使用移动工具(右键单击>变换>移动>垂直> 16像素)将其下移16个像素点从而继续调整形状



    第5步

    使用圆形连接 为生成的形状提供8像素厚的轮廓(#2B3249)然后使用Control-G 键盘快捷键选择并将它们组合在一起



    第6步

    从之前的一个图标 创建一个小心脏的副本(Control-C)然后?#31243;?Control-F)到当前图层上?#34892;?#23545;齐到文本框的主体



    第7步

    使用三个6 x 6像素圆形在距彼此2 px的位置创建小点我们将使用这些圆点进行着色#2B3249组(Control-G)然后将其放置 在文本框的右下角留下一个4 px的差距在他们周围

    完成后使用Control-G键盘快捷键选择并组合迄今为止创建的所?#34892;?#29366;



    第8步

    创建左侧文本框的填充和轮廓的副本(Control-C> Control-F)并将它们与底层活动绘图区域的右下角对齐确保之后水平翻转它们(右键单击>变换>反射>水平)将填充形状的颜色更改为#9F88BA



    第9步

    打开 像素预览模式(Alt键-控制-Y )和绘制使用小文本行18像素宽 4 PX厚行程线(#2B3249)随后加入另一34像素宽 4 PX粗线在距离4 PX从它组(Control-G)这两个形状然后将它们放置在距文本框左边缘和底边缘8 px的 距离处



    第10步

    通过选择并将(Control-G)所有正确的文本框的合?#23578;?#29366;分组在一起然后将它们发回到后面(右键单击>排列>发送到后面)结束图标

    噢别忘了将所有图标的组成部分分组因为你不想让它们四处飞舞



    OK完成了老铁们!

    你有它 - 一个可爱的小图标包可以用来与那个特别的人分享你的爱我希望你已经设法跟随每一步并且像在这个过程中一样有乐趣


    加入论坛VIP下尽您想要的素材点击进入

    如果您在做图或者看教程PHOTOSHOP方面遇到任何问题请到问题交流区提问地址http://www.ucvv.tw/forum-41-1.html我们会在第一时间帮助您解决问题如果在教程后面跟帖一律不给予解决~

    TOP

    ?#34892;?#27004;主分享多练习提高技术

    ?#34892;?#27004;主分享多练习提高技术效果还行吧给自己点个赞

    附件

    ai制作卡通风格的网页分享图标.jpg (45.91 KB)

    2018-9-21 23:59

    ai制作卡通风格的网页分享图标.jpg


    TOP

    发新话题

    关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

    工信部备案沪ICP备09005587号 ?#32617;?#24066;公安?#30452;?#26696;编号32058302001042

    Powered by Discuz Copyright © 2005-2015 www.ucvv.tw All rights reserved.

    11ѡ5 ˫