分享此网站可得100G教程,联系小洁领取点击这里给我发消息

一个图标的思考过程?

icon图标 学UI设计 683次浏览 0个评论


一个图标的思考过程?

葫芦丝

第一步,我从网上找了一个葫芦丝的图片,如下图所示:
一个图标的思考过程?

 

第二步:分析:

一个图标的思考过程?

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

一个图标的思考过程?

第四步:软件操作:

1:画出基本轮廓

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

一个图标的思考过程?

 

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

 

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

 

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

一个图标的思考过程?

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

2:添加颜色

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

 

一个图标的思考过程?

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

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

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

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

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

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

 

 

第六步:在葫芦丝的周围放上一些装饰性的元素:
一个图标的思考过程?

恭喜你!葫芦丝的icon画完了,不要忘记交作业哦~


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (1)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!