UI课程实验1 手绘风格图标设计

实验一手绘风格图标设计

一、实验类型

验证性实验

二、实验目的与任务

1、使学生熟悉Illustrator的操作界面。

2、掌握Illustrator的色彩融合技术

3、掌握Illustrator的实时上色技术；

三、预习要求

1、熟悉Adobe Illustrator CS5的图像菜单

四、实验基本原理

1、利用Adobe Illustrator CS5软件中钢笔工具进行图像绘制

2、利用Adobe Illustrator CS5进行图像美化和处理

五、实验内容

1、打开Adobe Illustrator CS5软件熟悉软件的界面；

2、基本操作的使用：文件的操作，颜色的配置，标尺、参考线和网格的使用，图像的显示和调整及如何调整画布等；

3、马克笔涂抹效果的制作；

4、绘制六角形图标；

5、圆角多边形绘制；

6、实时上色工具；

7、规则几何图标绘制

8、课后作业：树叶的绘制

六、实验步骤

1、马克笔涂抹效果的制作

（1）用画几个圆形的小点，填上自己想用的颜色，就像下面这样

（2）选择工具栏的混合工具，连续点击这三个点，一条用混合做的渐变就会出现

（3）选择这个混合，点击画笔工具栏的新建按钮(或者将其拖拽到画笔工具栏)，新建艺术画笔，默认选项就好，若果想保持画笔的圆头，可以像最后一张图那样设置在参考线之间拉

伸~

（4）画笔完成!

（5）之后用笔刷工具随便画，然后应用画笔即可。

各位请用画笔做出自己的名字。

2、绘制六角形图标

（1）在ai软件中，新建一个800*800的文档，画一个六边形的图形，如图所示

（2）然后选择直线工具，在六边形的图形画几条直线，如图所示

（3）接着选中直线和六边形，点击形状生成器工具，把多余的去掉，如图所示

（4）按住shift选中三角形的图形，按r键，再按alt移动锚点到中心点的位置，再按ctrl+d 复制几个出来，如图所示

（5）接下来把三角形描边去掉，如图所示

（6）最后给另外三角形添加渐变颜色，效果如下图所示

3、圆角多边形绘制

（1）新建一个300*300px的画板

（2）选择多边形工具

a.鼠标在画板上单击不放拖动绘制多边形

b.鼠标在画板上单击一下，弹出如图所示的多边形属性框，输入半径和变数，确定

绘制好的样式

选中刚绘制好的多边形，点击菜单栏，效果-风格化-圆角

在弹出的对话框中输入圆角半径，点确定

最终效果

4、实时上色工具

（1）打开软件做准备工作--打开ai，建立空白画布，如下图。其实打开ai有很多方法，就像打开别的软件一样，可以命令框启动，可以开始菜单栏启动，也可以桌面图标启动。

（2）画出俩圆--在ai界面左侧找到椭圆形工具，如图红色标记所示，按住shift同时拖动鼠标，画出俩圆，如下图。椭圆工具在简单图形工具里面，有时候显示的是巨型工具，或者别的什么工具，这个时候你只需将鼠标移动到那个图标位置，按下鼠标不动，等一小会儿就会跳出下啦菜单的，然后选择椭圆工具即可。

（3）选中两个圆，准备调出重合区域--首先点击ai界面左上方的那个空心黑色箭头，如图中所圈所示，然后按住shift键，同时依次点击两个圆，待俩元颜色加重后就表示选中了，这时候松开手。选中后的图形如图。

（4）选择填充颜色--点击ai界面对话框左上角的颜色选项，选择自己需要的颜色。具体位置如图中红色圈所示。

(5)重合区域上色--点击实时山色工具，如图中红圈内所示，然后去重合区域点击，待重合区域边界颜色加重后，表示选中了，然后再点击一下就可以上色啦。上色后的图如下图。

（6）重复3到5，可以分别上色旁边被分割出来的两个区域，上色后图形如下图：

5、规则几何图标绘制

首先，你应该知道，下面这四个图形可以组成复杂的图形。

当我想要将某个东西转换成图标时，我会仔细观察它，然后尽量将其打散成最简单的结构。例如，水滴形状可以使用三角形与圆形组成。

心形的图标可以用两个圆形和一个三角形组成。

通常使用adobe illustrator来创建这些形状。使用矢量形状可以更容易的控制线条的粗细、形状的相互关系以及它们的锚点。illustrator也可以很方便的将线条转换成形状，反之亦然。这一切看上去都很初级，但便是用这种方法来创建非常复杂的图标。下面是一个稍微复杂一些的例子：

界面图标

我们从这些图标中挑出一个进行解构，以便你能够了解我是怎样创建的。我们以垃圾桶的图标为例，这个图标由三个圆角矩形和三条线组成。

1）. 选择圆角矩形工具

2）. 拖出圆角矩形的形状

3）. 不断调整描边的大小，直到你满意为止。

一整套图标中，通常会选择一到两种描边尺寸。这样会使这些图标看上去一致并且有关联。

4）. 使用另外一个圆角矩形来创建盖子。

5）. 再使用一个圆角矩形来创建盖子的把手

6）. 擦除圆角矩形的下半部分。

7）. 通过在垃圾桶上增加三条竖线来创建条纹。

8）.如果你喜欢，也可以继续调整线条的颜色和粗细。

路径查找器是我在创建图标的过程中最为有用的工具之一。利用路径查找器，可以方便地进行形状的修剪、合并以及打断操作。

描边/填充工具能够很方便地在形状与描边键切换。

描边面板是我最喜爱的工具，在这里你可以将非常生硬的边角或线条的尾部修改为光滑的圆形。

当完成了一套图标的设计，我通常会将他们摆成一行，看看是否有的图标看上去很怪异或与整体不协调。接下来我会进行一些必要的调整。

最后一步，通常会在app中检查，观察这些图标是否在设备上看上去也十分完美。

最后，尽管illustrator软件的技巧很重要，但创建一个非常棒的图标的方法会更重要。最好的办法就是经常练习将你周围的东西解构成简单的图形。

七、实验报告要求

（一）按照实验步骤进行，完成实验内容，给出实验结果截图，切勿拷贝他人的作业,。