首页 前端知识 【UI】图标的制作

【UI】图标的制作

2024-09-06 00:09:37 前端知识 前端哥 47 644 我要收藏

实验一 扁平化图标的制作

【学习目标】

  1. 掌握扁平化图标的概念;
  2. 掌握CorelDraw软件贝塞尔工具、形状工具、镜像工具等绘制图形;
  3. 掌握扁平化图标设计的一般步骤。

【重点难点】

  1. CorelDraw软件贝塞尔工具、形状工具的使用;
  2. 图形比例的把握。

【学习内容】

1.使用CorelDraw软件贝塞尔工具、形状工具、镜像工具、创建轮廓工具、阴影工具等,制作如下图标。要求图形线条流畅、比例恰当。

2.保存cdr源文件,导出jpg、png格式图片。

【思考拓展】

利用贝塞尔工具等制作树叶图标。

【实验效果图】

实验1_1效果图

.cdr

.png

.jpg

实验1_2效果图

.cdr

.png

.jpg

【实验步骤】

一、实验1_1步骤

1、启动软件。启动好之后,单击“New blank document”创建新空白文档,点击默认设置。

 

复制素材之后把它直接粘贴工作区域,使用鼠标中键放大比例,拖拽调整位置

2、绘制蓝色的部分。点击工具栏【基本形状】,再点击属性栏的【完美形状】,选择“水滴”图形,绘制一个类似大小的一个水滴出来。在属性栏【轮廓宽度】调整形状粗细为100px

 

   

   

3、选中图形,选择菜单栏【排列】——【将轮廓转换为对象】,或者使用快捷键CTRL+shift+Q。单击它,它就变成一个面积,会出现很多很多节点,然再点击工具栏【形状工具】来操作节点

 

        

4、选中水滴尖角,使用键盘的delete键把它删掉。用这个工具栏【形状工具】把下边的两个节点选中,选中之后再选择属性栏【分割曲线】,把一个点变成两个点。

 

  

   

把左右两边节点分开,选中左边两个节点,再点击属性栏【连接接两个节点】把这两个节点合并。

 

 

     

5、选中左右两边多余的节点,使用delete键把它删掉了,然后拖拽来调整节点位置,调整这个控制线来调整曲度。

选中左右两边的节点,点击属性栏【平滑节点】将尖突改为平滑,通过调整下边控制线的长短方向去修改这条线的长短尺度。直到调到合适的一个粗细和位置

  

 

  

左键单击色板设置填充色为蓝色,右键单击色板设置轮廓色为无色

  

6、然后绘制叶子,使用工具栏【贝塞尔】绘制两个节点,使用工具栏【形状工具】选中这两个节点,选择属性栏【转换直线为曲线】,点击节点调整形状

 

 

 

移动到水滴图形上继续调整形状,左键单击色板设置填充色为绿色,右键单击色板设置轮廓色为无色

 

  

7、使用小键盘加号键复制第二片叶子,调整方向后,点击工具栏【形状工具】继续调整叶片大小和形状

 

  

8、创建阴影,点击工具栏【挑选工具】框住整个形状,点击属性栏中【Create boundary】来创建阴影

 

  

左键单击色板设置填充色为灰色,右键单击色板设置轮廓色为无色

再在右边对象管理器中点击阴影对象,拖拽到最下层

 

    

在点击工具栏【挑选工具】选中阴影,调整位置和角度

9、删除原始素材式。点击menu ber中【文件】——【导出】,导出png文件标志

10、效果图

二、实验1_2步骤

1、绘制叶片外轮廓,使用工具栏【贝塞尔】绘制五个节点,使用工具栏【形状工具】选中这五个节点,选择属性栏【转换直线为曲线】,点击节点调整形状

 

  

2、使用工具栏【填充工具】选择渐变,选择“线性渐变”后,选择颜色,

 

  

再使用使用工具栏【交互式填充工具】调整颜色

 

  

3、同理绘制第二个叶片,选择渐变时选择“射线渐变”,再使用使用工具栏【交互式填充工具】调整颜色

 

4、绘制叶脉,使用工具栏【贝塞尔】绘制两个节点,使用工具栏【形状工具】选中这两个节点,选择属性栏【转换直线为曲线】,点击节点调整形状

 

     

5、在以上的图形上双击增加节点,增加三个节点,绘制分支,选中节点,点击属性栏【使节点成为尖突】,再调整形状

 

  

  左键单击色板设置填充色为蓝色,右键单击色板设置轮廓色为无色

6、将上面图形叠加在一起,调试颜色

7、绘制叶片高光,使用工具栏【贝塞尔】绘制两个节点,使用工具栏【形状工具】选中这两个节点,选择属性栏【转换直线为曲线】,点击节点调整形状

  

左键单击色板设置填充色为白色,右键单击色板设置轮廓色为无色,使用工具栏【填充工具】选择渐变,选择“线性渐变”后,选择颜色,再使用使用工具栏【交互式填充工具】调整颜色

 

8、同理绘制其余高光

9、点击menu ber中【文件】——【导出】,导出png文件标志

10、效果图

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17777.html
标签
评论
发布的文章

jquery video视频轮播播放

2024-09-27 09:09:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!