<div id="qw3sj"></div>

    <div id="qw3sj"></div>

  • <dd id="qw3sj"></dd>
    • 思缘论坛首页
    • 论坛搜索
    • 下载记录
    • 每日签到
    • 设计软件,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.如何创建参考网格

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

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

    现在,在我们的例子中,我们将?#30343;?#29992;一个尺寸创建图标包,更?#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;鵆ontrol-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完成了老铁们!

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


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

    TOP

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

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

    附件

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

    2018-9-21 23:59

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


    TOP

    发新话题

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

    Powered by Discuz Copyright © 2005-2019 www.451bhky.tw All rights reserved.

    安徽11选5开奖结果