界面就是在使用工具完成任务的过程中，你所做的操作及工具的响应的总和。所以用户界面设计不仅要考虑如何摆放按钮和菜单，还要考虑程序、设备与用户如何互动。但是由于用户看不到隐藏在背后的代码，所以界面就代表了产品的全部。
9.1 日历图标
icon是一种图标格式，用于系统图标、软件图标等。常见的软件或Windows桌面上的那些图标一般都是PNG格式的。接下来就来教大家如何制作好看的icon图标。
本节案例讲解的是如何制作日历图标。在智能手机中日历图标是非常常见的一种图标，如何将看似简单的图标做得更加时尚？本案例我们要学习的是，首先使用圆角矩形工具绘制日历图标的形状，然后添加图层样式制作立体感，最后使用文字工具在页面上输入文字来突出图标的主题。
原始文件：无
最终文件：Chapter 09/Complete/9-1-1.psd
01 新建文件 执行“文件＞新建”命令，或按Ctrl+N组合键，打开“新建文档”对话框，设置参数。
02 绘制形状 单击工具箱中的“圆角矩形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为咖啡色（R：62，G：26，B：4），半径为55像素，在页面上绘制形状，将图层名称修改为“木板底部”。
03 添加效果 双击“木板底部”图层，在弹出的“图层样式”对话框中选择“描边”、“渐变叠加”选项，设置参数，为其添加效果。
04 添加效果 继续在“图层样式”对话框中选择“内发光”、“投影”选项，设置参数，为其添加效果。
05 绘制形状 使用同样的方法制作出“木板上层”。
06 创建剪贴蒙版 执行“文件＞打开”命令，在打开的对话框中选择“木纹.jpg”素材，将其打开拖入到场景中，在“图层”面板中将该图层的混合模式调整为“柔光”。执行“图层＞创建剪贴蒙版”命令，为图层创建剪贴蒙版。
07 绘制形状 单击工具箱中的“圆角矩形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为任意色，设置半径为30像素，在页面上绘制形状，将图层名称修改为“纸张”。双击该图层，在弹出的“图层样式”对话框中选择“渐变叠加”、“投影”选项，设置参数，为其添加效果。
08 绘制形状 使用同样的方法制作出其他效果。
09 绘制形状 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，在页面上绘制形状，将图层名称修改为“右边固定栓底部”。双击该图层，在弹出的“图层样式”对话框中选择“斜面和浮雕”、“颜色叠加”选项，设置参数，为其添加效果。
10 绘制阴影 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“路径”，在页面上绘制路径，按下快捷键Ctrl+Enter将路径转换为选区。按下快捷键Shift+F6，在弹出的“羽化选区”对话框中设置羽化半径为5像素，设置前景色为黑色，按下快捷键Alt+Delete填充颜色，按下Ctrl+D组合键取消选区，将图层名称修改为“右边投影”，在“图层”面板中将该图层的不透明度调整为50％。
11 绘制形状 单击工具箱中的“椭圆工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为咖啡色（R：86，G：42，B：12），按住Shift键在页面上绘制正圆，将图层名称修改为“右边圆形”。双击该图层，在弹出的“图层样式”对话框中选择“内阴影”、“投影”选项，设置参数，为其添加效果。
12 绘制形状 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，在页面上绘制形状，将图层名称修改为“右边固定栓”。双击该图层，在弹出的“图层样式”对话框中选择“斜面和浮雕”、“渐变叠加”选项，设置参数，为其添加效果。
13 绘制形状 使用同样的方法制作出左边的固定栓。
14 添加文字 单击工具箱中的“文字工具”按钮，在“字符”面板中设置文字的字体、字号、颜色等参数，在页面上输入文字。
15 添加投影 双击文字图层，在弹出的“图层样式”对话框中选择“投影”选项，设置参数，为其添加效果。
16 添加文字 单击工具箱中的“文字工具”按钮，在“字符”面板中设置文字的字体、字号、颜色等参数，在页面上输入文字。
17 添加效果 双击文字图层，在弹出的“图层样式”对话框中选择“内阴影”、“投影”选项，设置参数，为其添加效果。
9.2 收音机图标
本节案例讲解的是如何制作收音机图标。在智能手机中收音机图标是非常常见的一种图标，如何将看似简单的图标做得更加时尚？本案例我们要学习的是，首先使用圆角矩形工具绘制收音机图标的形状，然后添加图层样式制作立体感，最后使用文字工具在页面上输入文字来突出图标的主题。
原始文件：Chapter 09/Media/9-2-1.jpg
最终文件：Chapter 09/Complete/9-2-1.psd
01 新建文件 执行“文件＞打开”命令，在打开的对话框中选择“9-2-1.jpg”素材将其打开。
02 绘制形状 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为任意色，在页面上绘制形状，将图层名称修改为“天线”。
03 添加效果 双击“天线”图层，在弹出的对话框中选择“斜面和浮雕”、“渐变叠加”选项，设置参数，为其添加效果。
04 绘制形状 单击工具箱中的“圆角矩形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为浅灰色（R：239，G：238，B：233），半径为80像素，在页面上绘制形状，将图层名称修改为“收音机底部”。双击该图层，在弹出的“图层样式”对话框中选择“内阴影”选项，设置参数。
05 添加效果 继续在弹出的“图层样式”对话框中选择“渐变叠加”选项，设置参数，添加渐变叠加效果。
06 添加效果 使用同样的方法制作出其他效果。
07 添加素材 执行“文件＞打开”命令，在弹出的打开对话框中选择“声孔.png”素材，将其打开拖入到场景中并放置到合适的位置。
08 绘制形状 单击工具箱中的“椭圆工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为任意色，按住Shift键在页面上绘制正圆，将图层名称修改为“右边按钮”，在“图层”面板中设置填充为0％。双击该图层，在弹出的“图层样式”对话框中选择“描边”选项，设置参数，为其添加效果。
09 添加效果 继续在“图层样式”对话框中选择“内阴影”、“投影”选项，设置参数，为其添加效果。
10 绘制形状 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为黑色，在页面上绘制形状，将图层名称修改为“加号”，在“图层”面板中设置填充为10％。双击该图层，在弹出的“图层样式”对话框中选择“内阴影”、“投影”选项，设置参数、为其添加效果。
11 绘制形状 使用同样的方法制作出其他效果。
12 绘制形状 使用同样的方法制作出中间按钮。单击工具箱中的“矩形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为黑色，在页面上绘制矩形，在“图层”面板中设置填充为10％。执行“图层＞创建剪贴蒙版”命令，为其创建剪贴蒙版。双击该图层，在弹出的“图层样式”对话框中选择“内阴影”、“投影”选项，设置参数，为其添加效果。
13 制作高光 使用同样的方法制作出按钮背景。单击工具箱中的“钢笔工具”按钮，设置工作模式为“形状”，填充为白色到透明的渐变，在页面上绘制矩形，将图层名称修改为“高光”，在“图层”面板中设置不透明度为65％。
14 制作文字 使用同样的方法制作出文字效果。
15 制作高光 使用同样的方法制作出其他高光效果。
9.3 金属按钮设计
UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅要让软件变得有个性、有品位，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。那么本节案例就来为大家讲解UI小零件的设计。
在智能手机中按钮图标是经常出现的图标，本例的重点是制作金属拉丝效果、立体效果，以及利用光影知识制作发光效果。本案例我们要学习的是，首先使用椭圆工具绘制正圆，然后添加图层样式来体现按钮的金属质感及金属拉丝效果。
原始文件：无
最终文件：Chapter 09/Complete/9-3-1.jpg
01 新建文件 执行“文件＞新建”命令，或按Ctrl+N组合键，打开“新建文档”对话框，设置参数，设置前景色为深蓝色（R：25，G：31，B：46），按下快捷键Alt+Delete填充颜色。
02 绘制形状 单击工具箱中的“椭圆工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为深灰色（R：26，G：28，B：35），按住Shift键在页面上绘制正圆。双击该图层，在弹出的“图层样式”对话框中选择“内阴影”、“渐变叠加”选项，设置参数，为其添加效果。
03 绘制形状 使用同样的方法继续制作正圆形。
04 绘制形状 继续使用“椭圆工具”绘制正圆，为“椭圆3”图层。双击“椭圆3”图层，在弹出的“图层样式”对话框中选择“渐变叠加”选项，设置参数，为其添加效果。
05 绘制形状 使用同样的方法绘制其他正圆形。
06 绘制形状 单击工具箱中的“椭圆工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为任意色，按住Shift键在页面上绘制正圆，在“图层”面板中设置填充为0％。双击该图层，在弹出的“图层样式”对话框中选择“描边”选项，设置参数，为其添加效果。
07 绘制形状 使用同样的方法制作其他效果，并为其创建一个组，将纹理图层放到组中，在“图层”面板中，将组的不透明度调整为13％。
08 绘制形状 使用同样的方法制作其他效果。单击工具箱中的“钢笔工具”按钮，设置工作模式为“形状”，填充颜色为深灰色（R：95，G：103，B：121），在页面上绘制形状。双击该图层，在弹出的“图层样式”对话框中选择“内阴影”选项，设置参数，为其添加效果。为该按钮创建组并命名为“左边按钮”。
09 绘制形状 使用同样的方法制作右边按钮。
9.4 彩色进度条和下拉菜单设计
本节案例讲解如何制作彩色进度条和下拉菜单。彩色进度条主要使用椭圆工具、圆角矩形工具来制作图标的形状，配合文字使图标变得更加具有时尚感。下拉菜单主要使用矩形工具绘制形状，为形状添加图层样式使图标更加立体、更加精致，再使用文字工具添加文字使图标看起来更加充实。
原始文件：Chapter 09/Media/9-4-1（1）、（2）.jpg
最终文件：Chapter 09/Complete/9-4-1（1）、（2）.psd
01 新建文件 执行“文件＞打开”命令，在打开的对话框中选择“9-4-1（1）.jpg”素材将其打开。
02 绘制形状 单击工具箱中的“椭圆工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为深灰色（R：23，G：22，B：33），在页面上绘制正圆。
03 添加效果 双击“椭圆1”图层，在弹出的“图层样式”对话框中选择“描边”、“内发光”选项，设置参数，为其添加效果。
04 添加效果 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为任意色，在页面上绘制形状，将图层名称修改为“半圆”。双击该图层，在弹出的“图层样式”对话框中选择“渐变叠加”选项，设置参数，为其添加效果。执行“图层＞创建剪贴蒙版”命令，为其创建剪贴蒙版。
05 绘制形状 新建一个“矩形1”图层，单击工具箱中的“矩形选框工具”按钮，在页面上绘制矩形选框。单击工具箱中的“渐变工具”按钮，在选项栏中选择线性渐变，单击“点按可编辑渐变”按钮，在弹出的对话框中设置渐变颜色为黑色到透明，单击“确定”按钮完成，在选框内拖曳鼠标为其填充渐变，按下快捷键Ctrl+D取消选区。
06 创建剪贴蒙版 在“图层”面板中设置“矩形1”图层的混合模式为“柔光”。执行“图层＞创建剪贴蒙版”命令，为其创建剪贴蒙版。
07 添加效果 使用同样的方法制作其他效果。
08 绘制形状 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为任意色，在页面上绘制形状，将图层名称修改为“进度条”。双击该图层，在弹出的“图层样式”对话框中选择“渐变叠加”选项，设置参数，为其添加效果。
09 绘制形状 单击工具箱中的“椭圆工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为深灰色（R：23，G：22，B：33），在页面上绘制形状。双击该图层，在弹出的“图层样式”对话框中选择“斜面和浮雕”、“内发光”选项，设置参数，为其添加效果。
10 绘制形状 继续在“图层样式”对话框中选择“渐变叠加”、“外发光”、“投影”选项，设置参数，为其添加效果。
11 绘制形状 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为黑色，在页面上绘制形状，将图层名称修改为“球纹理”，在“图层”面板中将该图层的不透明度调整为13％。
12 绘制形状 新建一个“高光”图层，单击工具箱中的“画笔工具”按钮，在选项栏中选择一个虚一点的画笔笔触，设置前景色为白色，在页面上绘制高光。单击“图层”面板下方的“添加图层蒙版”按钮，为图层添加蒙版。在图层蒙版中使用椭圆选框工具绘制选区，按下快捷键Ctrl+Shift+I将选区进行反选，为选区填充灰色（R：120，G：120，B：120）,按下快捷键Ctrl+D取消选区。
13 添加效果 在“图层”面板中将“高光”图层的混合模式修改为“叠加”，不透明度调整为74％。
14 添加效果 使用同样的方法制作高光效果。
15 添加文字 单击工具箱中的“文字工具”按钮，在“字符”面板中设置文字的“字体”、“字号”、“颜色”等参数，在页面上输入文字。
16 添加效果 双击文字图层，在弹出的“图层样式”对话框中选择“斜面和浮雕”、“渐变叠加”、“投影”选项，设置参数，为其添加效果。
17 添加文字 使用同样的方法制作其他文字。
18 绘制形状 单击工具箱中的“椭圆工具”按钮，在选项栏中设置工作模式为“形状”，设置颜色为深灰色（R：53，G：49，B：72），在页面上绘制形状。将该图层的图层顺序调整到“75％”文字图层之下。
19 绘制形状 双击“椭圆3”图层，在弹出的“图层样式”对话框中选择“描边”、“内阴影”、“外发光”选项，设置参数，为其添加效果。
20 添加形状 使用同样的方法绘制其他形状。
21 打开文件 执行“文件＞打开”命令，在打开的对话框中选择“9-4-1（2）.jpg”素材将其打开。
22 绘制形状 单击工具箱中的“圆角矩形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为白色，设置半径为80像素，在页面上绘制形状，在“图层”面板中将该图层名称修改为“搜索栏”。
23 添加效果 双击“搜索栏”图层，在弹出的“图层样式”对话框中选择“斜面和浮雕”、“描边”、“内阴影”选项，设置参数，为其添加效果。
24 添加文字 单击工具箱中的“文字工具”按钮，在“字符”面板中设置文字的“字体”、“字号”、“颜色”等参数，在页面上输入文字。
25 绘制形状 单击工具箱中的“钢笔工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为浅灰色（R：196，G：198，B：210），在页面上绘制形状，将该图层名称修改为“搜索标志”。
26 绘制形状 单击工具箱中的“矩形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为白色，在页面上绘制形状，将该图层名称修改为“底部”。双击该图层，在弹出的“图层样式”对话框中选择“内阴影”、“渐变叠加”选项，设置参数，为其添加效果。
27 绘制形状 使用同样的方法，在页面上绘制形状并添加文字。
28 绘制形状 使用同样的方法，在页面上绘制形状并添加文字。
29 绘制形状 单击工具箱中的“圆角矩形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为无颜色，在页面上绘制形状，将该图层名称修改为“外框”。双击该图层，在弹出的“图层样式”对话框中选择“描边”、“投影”选项，设置参数，为其添加效果。
30 绘制形状 使用同样的方法，在页面上绘制形状并添加文字。
31 绘制形状 单击工具箱中的“多边形工具”按钮，在选项栏中设置工作模式为“形状”，填充颜色为浅灰色（R：192，G：195，B：210），边为“3”。单击按钮，在弹出的下拉菜单中取消勾选“星形”、“平滑拐角”，在页面上绘制三角形。