- App+软件+游戏+网站界面设计教程
- 李晓斌
- 2618字
- 2021-04-04 11:38:19
实战练习02 设计制作逼真的话筒图标
视 频：资源包\视频\第2章\2-4-5.mp4
源文件：资源包\源文件\第2章\2-4-5.psd
●案例分析
该案例的制作方法略微复杂，涉及很多工具和命令。其中底座和支架部分是由各种形状工具绘制完成的；话筒是由“钢笔工具”和形状工具配合完成的；话筒的蜂窝状纹理是通过图案填充和“球面化”滤镜处理完成的。案例的完成效果如图2-61所示。
图2-61
●制作步骤
01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-62所示。使用“渐变工具”在画布中心拖动鼠标填充从白色到RGB（150、150、150）的径向渐变，效果如图2-63所示。
图2-62
图2-63
02 使用“椭圆工具”，设置“工具模式”为“形状”，在画布中创建一个310px×70px的椭圆，如图2-64所示。双击该图层缩览图，打开“图层样式”对话框，选择“渐变叠加”选项进行相应设置，如图2-65所示。
图2-64
图2-65
03 设置完成后单击“确定”按钮，得到的图形效果如图2-66所示。按快捷键【Ctrl+J】复制该图层，将其等比例缩小，然后打开“图层样式”对话框，修改“渐变叠加”选项的参数，如图2-67所示。
图2-66
图2-67
04 设置完成后单击“确定”按钮，得到的图形效果如图2-68所示。在“背景”图层上方新建“图层1”，使用黑色柔边画笔涂抹出图形的阴影，并设置该图层的“不透明度”为60%，如图2-69、图2-70所示。
图2-68
图2-69
图2-70
提示
在使用“画笔工具”涂抹画布时，如果前期涂抹得不是十分完美，也可以使用“橡皮擦工具”在涂抹完成后稍加修改。
05 使用“矩形工具”，设置“工具模式”为“形状”，在画布中拖动鼠标创建一个22px×416px的矩形，如图2-71所示。双击该图层缩览图，打开“图层样式”对话框，选择“内阴影”选项进行相应设置，如图2-72所示。
图2-71
图2-72
06 继续在对话框中选择“渐变叠加”选项进行相应设置，如图2-73所示。设置完成后单击“确定”按钮，可以看到图形效果，如图2-74所示。
图2-73
图2-74
07 使用相同方法完成相似内容的制作，如图2-75、图2-76所示。选中除“背景”图层之外的全部图层，按快捷键【Ctrl+G】进行编组，并将其重命名为“底座”，如图2-77所示。
图2-75
图2-76
图2-77
08 使用“钢笔工具”，设置“工具模式”为“形状”，在画布中绘制出话筒的线缆，如图2-78所示。双击该图层缩览图，弹出“图层样式”对话框，选择“渐变叠加”选项进行相应设置，如图2-79所示。
图2-78
图2-79
09 设置完成后单击“确定”按钮，得到的图形效果如图2-80所示。使用“圆角矩形工具”在线缆上绘制一个任意颜色的圆角矩形，并适当调整其大小和角度，如图2-81所示。
图2-80
图2-81
10 双击该图层缩览图，打开“图层样式”对话框，选择“渐变叠加”选项进行相应设置，如图2-82所示。设置完成后单击“确定”按钮，得到的图形效果如图2-83所示。
图2-82
图2-83
11 使用相同方法完成相似内容的制作，如图2-84、图2-85所示。新建一个30px×30px的文档，然后使用“椭圆工具”在画布中央创建一个15px×15px的黑色正圆，如图2-86所示。
图2-84
图2-85
图2-86
提示
本案例的步骤11：在定义图层之前请务必先隐藏“背景”图层，否则填充图案后的画布为白色背景而不是透明背景，后面的操作将难以进行。
12 执行“编辑>定义图案”命令，弹出“图案名称”对话框，将圆点图形定义为“图案5”，如图2-87所示。新建“图层3”，执行“编辑>填充”命令，为画布填充刚刚定义的“图案5”，如图2-88、图2-89所示。
图2-87
图2-88
图2-89
知识链接
该案例中自定义图案的步骤也可以直接在当前文档中完成
新建一个图层，按下【Alt】键单击该图层缩览图前面的眼睛图标，隐藏其他的图层；
使用“矩形选框工具”创建合适大小的选区，并绘制圆点；
执行“编辑>定义图案”命令，将选区内图像定义为新的图案。
13 按快捷键【Ctrl+T】适当调整画布的大小和角度，如图2-90所示。按【Ctrl】键单击下方图层的缩览图载入选区，然后为“图层3”添加图层蒙版，如图2-91、图2-92所示。
图2-90
图2-91
图2-92
14 载入蒙版选区，执行“滤镜>扭曲>球面化”命令，在弹出的“球面化”对话框中设置参数，如图2-93所示。设置完成后可以看到图形效果，如图2-94所示。
图2-93
图2-94
提示
执行过“球面化”命令后，话筒上的点阵图纹理会变得很模糊，请酌情执行“滤镜>锐化>USM 锐化”命令锐化图像。
15 双击该图层缩览图，在弹出的“图层样式”对话框中选择“渐变叠加”选项进行相应设置，如图2-95所示。设置完成后单击“确定”按钮，得到的图形效果如图2-96所示。
图2-95
图2-96
16 使用“钢笔工具”，设置“工具模式”为“形状”，在画布中创建如图2-97所示的图形（颜色任意）。双击该图层缩览图，打开“图层样式”对话框，选择“渐变叠加”选项设置参数，如图2-98所示。
图2-97
图2-98
17 设置完成后单击“确定”按钮，图形效果如图2-99所示。再次使用“钢笔工具”在话筒上创建如图2-100所示的图形，颜色任意。
图2-99
图2-100
18 双击该图层缩览图，在弹出的“图层样式”对话框中选择“渐变叠加”选项进行相应设置，如图2-101所示。设置完成后可以看到图形效果，如图2-102所示。
图2-101
图2-102
19 使用相同方法完成相似内容的制作，并选中相关的图层进行编组，重命名为“话筒”，如图2-103所示。至此，完成逼真话筒的全部制作过程，最终效果如图2-104所示。
图2-103
图2-104
20 隐藏“背景”图层，执行“图层>裁切”命令，裁掉文档边缘的透明像素，如图2-105所示。执行“文件>导出>导出为”命令，弹出“导出为”对话框，设置各项参数，如图2-106所示。
图2-105
图2-106
21 设置完成后，单击“全部导出”按钮，在弹出的对话框中选择存储切图的文件夹。文件导出后，图像效果如图2-107所示。
图2-107
2.4.6 扁平化风格图标
扁平化图标在软件UI界面设计中应用得越来越多，因其简洁、大方、直观和易用等特点，越来越受到人们的喜爱和欢迎。在人们的日常生活中，每天都要接触手机和电脑等媒体，细心观察可以发现不同风格的扁平化图标，概括起来主要有四种：基础、阴影、长阴影和微渐变风格。
●基础风格扁平化图标
基础风格的扁平化图标，不添加任何的渐变、阴影、高光等体现图标透视感的图形元素，而是通过极其简约的基本形状图形、符号等表现出图标的主题，如图2-108所示。
图2-108
●阴影风格扁平化图标
阴影风格的扁平化图标主要是为图标中主体图形元素添加常规的阴影效果，如图2-109所示。
图2-109
●长阴影风格扁平化图标
长阴影风格的扁平化图标是目前最流行，也是应用范围最广的图标。目前，长阴影设计主要应用于较小的对象和元素。如图2-110所示为长阴影风格的扁平化图标。
图2-110
●微渐变风格扁平化图标
扁平化设计风格虽然摒弃渐变、高光和阴影等图形透视元素，但并不是完全不用，在扁平化设计风格中有一种风格称为“微渐变风格”。微渐变风格就是将简单的图形元素与传统高光表现方式相结合，通过微渐变的方式体现出图标的层次感和立体感，如图2-111所示。
图2-111