菜菜美妞

小编:hello!好久不见,今天菜菜给大家带来的是一篇如何将生活中的物品快速的转化为图标的过程,教程写的比较详细,很容易上手,赶快动起来吧,大家不要忘记交作业!

 

11

葫芦丝

第一步,我从网上找了一个葫芦丝的图片,如下图所示:

540ec4e5n09273612

 

第二步:分析:

 

540ec4e5n09273612

第三步:在纸上画出草稿:

 

qq%e5%9b%be%e7%89%8720161102172200

第四步:软件操作:

1:画出基本轮廓

第一步:新建一个400*300的画布;使用椭圆工具画两个椭圆,摆放如下如所示的位置,填充描边颜色为:#4f3a72,打开路径查找器,形状模式选择“联集”,使用剪刀工具剪开端点,将端点设置为3个像素的圆形,如下图所示:

11

 

 

第二步:使用矩形工具画一个矩形,填充描边颜色为:#4f3a72,使用直接选择工具选择矩形上方的左锚点向右拉,右锚点向左拉,然后复制第一步中的形状,将复制出的副本形状放到矩形的上方,选择矩形和形状副本,打开路径查找器,形状模式选择“减去顶层”,如下图所示:11

 

第三步:使用矩形工具画一个矩形(标数字1的矩形),填充描边颜色为:#4f3a72,再次使用矩形工具画一个矩形(标数字2的矩形),填充描边颜色为:#4f3a72,使用直接选择工具选择第二个矩形下方右边的锚点向上拉,复制出副本(Ctrl+c,ctrl+f),打开“变换”面板,点击右侧的快捷菜单中选择“水平翻转”,将三个矩形摆放如 下图所示的位置,然后将标有数字3的矩形使用剪刀工具剪开端点,删除多余的路径,将端点设置为3个像素的圆形,使用椭圆工具画一个3个像素的椭圆,然后复制第一步中的形状,(注意:将复制出的图形放在三个矩形的上方),选择左边的矩形和图形副本,打开路径查找器,形状模式选择“减去顶层”,将中间的矩形和右边的矩形重复做此操作,如下图所示:

11

 

第四步:使用椭圆工具的同时按下shift键画出正圆,作为葫芦丝的音量键,如下图所示:

 

11

做到这一步的时候,葫芦丝的基本形状就画好了

2:添加颜色

第一步:使用椭圆工具画两个椭圆,摆放如下如所示的位置,填充颜色为:#6379ff,打开路径查找器,形状模式选择“联集”,然后将整个形状放到葫芦丝基本形状的后面,向后拉动,如下图所示:

 

11

第二步:复制两个第一步中的形状,填充颜色为:#8294ff,将最上方的形状向左拉动,打开路径查找器,形状模式选择“交集”,如下图所示:

11

第三步:使用矩形工具画一个矩形,填充描边颜色为:#6379ff,使用直接选择锚点工具选择矩形上方的左锚点向右拉,右锚点向左拉,然后将整个形状向右移动如下图所示:

11

第四步:复制两个第三步中的形状,填充颜色为:#8294ff,将最上方的形状向左移动动,打开路径查找器,形状模式选择“交集”,如下图所示:

11

第五步:使用矩形工具画一个比较长的矩形,填充描边颜色为:#ff3b77,然后再次使用矩形工具画一个比较小的矩形,填充描边颜色为:#ff3b77,使用直接选择工具选择第二个矩形下方左边的锚点向上拉,复制出副本(ctrl+c,ctrl+f),打开“变换”面板,点击右侧的快捷菜单中选择“水平翻转”,然后选中三个形状,打开路径查找器,形状模式选中“联集”,将整个形状向右移动,如下图所示:11

第六步:复制出第五步的两个形状图层,将最上面的图层向左移动,打开路径查找器,形状模式选择“交集”,填充颜色为:#ff759f,如下图所示:

11

第五步:使用弧形工具画一条弧,填充描边颜色为白色,使用剪刀减去多余的路径,将端点设置为两个像素的圆形,如下图所示:11

 

 

第六步:在葫芦丝的周围放上一些装饰性的元素:

11

恭喜你!葫芦丝的icon画完了,不要忘记交作业哦~
我希望你能喜欢这个教程,除了画出好看的icon;还学会了如何使用形状工具、基本图形、以及路径查找器面板和镜像工具变形工具等,我们可以使用这些简单的方法画出更多的好看的ICON~

转载请注明:学UI网 » 一个图标的思考过程?

登录收藏
 
你可能喜欢的:
AI+PS绘制扁平滑轮少女风格插画AI+PS绘制扁平滑轮少女风格插画
绘制酸唧唧的泡菜黄瓜绘制酸唧唧的泡菜黄瓜
5 招轻松打造系统图标规范5 招轻松打造系统图标规范
GET,教你画一个贱贱的刺客伍六七GET,教你画一个贱贱的刺客伍六七
超级详细的AI绘制一组小黄人教程超级详细的AI绘制一组小黄人教程
【热气球】用AI绘制质插画【热气球】用AI绘制质插画
使用AI绘制2.5D人物插画使用AI绘制2.5D人物插画
【每周临摹】大尺度,用AI绘制扁平夸张风格人物插画【每周临摹】大尺度,用AI绘制扁平夸张风格人物插画
图标自检手册图标自检手册
交互动效教程 - 导航栏滑动动效交互动效教程 – 导航栏滑动动效