在APP UI中我们经常见到木纹元素，木头的纹理质感给人一种与众不同的感觉。

1.设计思路

本实例制作木头纹理图标，绘制圆形作为图标的基本形，为图层添加“图案叠加”图层样式，实现木纹效果；在木纹上添加高光，实现玻璃罩的反光与阴影，立体感与视觉感十足。图2‑212所示为制作流程图。

图2‑212 制作流程图

2.参考素材

根据设计思路搜集素材作为参考，包括木纹素材、玻璃罩素材以及其他木纹图标，如图2‑213所示。

图2‑213 参考素材

3.制作图标

01 下面介绍木头纹理图标的制作。使用“椭圆工具”按住Shift键绘制正圆，如图2‑214所示。

02 在“图层样式”对话框中设置“投影”选项，如图2‑215所示。

图2‑214 绘制正圆

图2‑215 设置“投影”选项

03 单击“确定”按钮，图像效果如图2‑216所示。

04 在“图层”面板中设置不透明度为40%、填充为0%，如图2‑217所示。

图2‑216 图像效果

图2‑217 设置不透明度与填充

05 按Ctrl+J组合键复制一层，并修改图层样式，如图2‑218所示。

图2‑218 修改图层样式

06 单击“确定”按钮，图像效果如图2‑219所示。

图2‑219 图像效果

07 使用“椭圆工具”绘制椭圆，如图2‑220所示。

图2‑220 绘制椭圆

08 为图层添加“内阴影”图层样式如图2‑221所示。

图2‑221 添加“内阴影”图层样式

09 设置图层填充为0%，效果如图2‑222所示。

图2‑222 设置填充后的效果

提示：不透明度调节的是整个图层的不透明度，填充只是改变填充部分的不透明度。

10 复制图层并将圆压扁，然后取消选中“内阴影”

复选框，设置“投影”参数，如图2‑223所示。

11 执行确定操作后图像如图2‑224所示

图2‑223 设置“投影”参数

图2‑224 设置投影后的效果

12 复制图层，效果如图2‑225所示。

13 使用“椭圆工具”绘制椭圆，如图2‑226所示。然后选择图层，单击鼠标右键，执行“从图层建立组”命令。

图2‑225 复制图层

图2‑226 绘制椭圆

14 为图层添加“内发光”“渐变叠加”“投影”样式，如图2‑227所示。

图2‑227 添加图层样式

15 单击“确定”按钮，图像如图2‑228所示。

16 使用“椭圆工具”绘制椭圆，并在“属性”面板中设置填充色为线性渐变，如图2‑229所示。

图2‑228 图像效果

图2‑229 设置填充色

17 图像效果如图2‑230所示

18 将其转换为智能对象，执行“滤镜”|“模糊”|“高斯模糊”命令模糊后的效果如图2‑231所示。

图2‑230 图像效果

(www.daowen.com)

图2‑231 高斯模糊效果

19 再次绘制椭圆，对椭圆进行变形，设置填充颜色为白色到透明的径向渐变，如图2‑232所示。

图2‑232 设置填充颜色

20 设置组的不透明度为61%，图像效果如图2‑233所示。

图2‑233 设置不透明度效果

21 为图层设置“斜面和浮雕”以及“渐变叠加”样式，如图2‑234所示。

图2‑234 添加图层样式

22 执行确定操作后的效果如图2‑235所示。

图2‑235 图像效果

23 添加“斜面和浮雕”以及“渐变叠加”样式，如图2‑236所示。

图2‑236 添加图层样式

24 执行确定操作后的图像效果如图2‑237所示。

图2‑237 图像效果

25 使用“圆角矩形工具”绘制指针如图2‑238所示。

图2‑238 绘制指针

26 选择一个圆角矩形图层，设置“颜色叠加”和“投影”样式，如图2‑239所示。

图2‑239 添加图层样式

27 确定后拷贝图层样式，粘贴到另外两个圆角矩形的图层上，并修改“颜色叠加”的颜色，完成的效果如图2‑240所示。

图2‑240 完成的效果

28 使用“横排文字工具”输入文字，如图2‑241所示。

图2‑241 输入文字

29 添加“颜色叠加”和“投影”图层样式，效果如图2‑242所示。

图2‑242 添加图层样式效果

30 添加素材图片，并为其添加“投影”图层样式，如图2‑243所示。

　　图2‑243 添加“投影”图层样式

31 执行确定操作后图像效果如图2‑244所示。

图2‑244 图像效果

32 使用“椭圆工具”绘制椭圆如图2‑245所示。32

　　图2‑245 绘制椭圆

33 为图层添加“内阴影”“内发光”和“渐变叠加”样式，如图2‑246所示。

图2‑246 添加图层样式

34 单击“确定”按钮后的图像效果如图2‑247所示。

图2‑247 图像效果

35 复制图层，然后清除图层样式，添加“斜面和浮雕”“等高线”样式，如图2‑248所示。3435

图2‑248 添加图层样式

36 添加“描边”“内阴影”图层样式，如图2‑249所示。

图2‑249 添加图层样式

37 设置图层的不透明度为40%、填充为0%，如图2‑250所示，此时的图像效果如图2‑251所示。然后新建图层，添加素材，完成效果如图2‑252所示。

图2‑250 设置参数

图2‑251 图像效果

图2‑252 添加素材