第1天 快速入门Photoshop图形界面设计
今天是学习的第1天，首先对图形界面的发展历史等相关知识进行讲解，以使读者对图形界面的历史和重要性有简单的了解，然后向读者介绍如何设计出精美的按钮和导航栏等问题，在今天的学习中会一一向大家进行解答。
通过学习今天的内容，大家可以自己动手设计一些按钮和导航栏了。
好，让我们开始今天的行程吧。
学习目的：掌握按钮和导航栏的设计方法
知识点：选区的创建与编辑、图像的变换
学习时间：一天
Photoshop图形界面设计
用户界面设计为什么这么重要
用户界面从字面上来说，是面向用户的。用户界面的发展经历了从低级到高级的过程，用户界面在软件系统中的价值比重也越来越高，用户界面的设计不仅要美观，而且要实用。用户界面是人机之间交流、沟通的层面，用户界面设计是以人为中心，使产品达到简单使用和愉悦使用的设计。
设计精美的按钮
界面设计的重要性
界面是用户与网页交互的窗口，用户通过界面向计算机输入信息进行控制、查询和操作；网页则通过界面向用户提供信息，以供阅读、分析、判断。所以，界面设计在网页中占有很重要的位置。
界面设计的原则
界面设计是浏览者与网页交流的平台，由于它在网页中具有特殊位置，所以其设计要遵循一定的原则。首先是简易性，简易是为了方便用户使用，了解网页内容。其次是清楚安全，指在用户做出危险的选择时有信息介入系统的提示。最后是灵活人性化，指让用户轻松快捷的使用。
界面设计的要求
界面设计是浏览者接触网页的第一印象，所以它的设计风格要与整体页面相一致，颜色的搭配要符合人们的视觉习惯，并与页面的整体色调相协调。其中，字体的选用不要过于花哨，选用平常的字体即可。
1.1 什么是界面设计
界面设计是为了满足专业化、标准化需求而对软件的使用界面进行美化、优化、规范化的设计分支，具体包括软件启动封面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条及状态栏设计、安装过程设计、包装及商品化。图1-1所示为直观的按钮设计。
图1-1 直观的按钮设计
1.2 图形界面的分类
随着科技的发展，人们对信息的需求量也在不断增多，所以，图形界面也越来越多样化和细分化，不同的图形界面在设计上也会有不同的特点。图形界面可以分为以下几类：
● 软件用户界面：软件只是一种工具，然而人们与软件的交互性操作都是通过软件界面来进行的。所以，软件界面的设计不仅要美观而且要易用。图1-2所示为设计精美的软件用户界面。
图1-2 设计精美的软件用户界面
● 网站界面：网络的发展带来了网站界面设计的繁荣，随着网络的发展，网站界面已经从最初的纯文字内容发展到现在的包含图像、视频、动画等多种媒体的新形式。网站界面必须具有独立性和创意性。在网站界面设计中，最重要的是使用户方便地查找信息，并能够感受到方便操作所带来的乐趣。图1-3所示为设计精美的网站界面。
图1-3 设计精美的网站界面
● 手机界面：随着科技的发展，手机的功能也越来越强大。手机界面的设计要人性化，不仅要方便使用，还要美观。图1-4所示为设计精美的手机界面。
图1-4 设计精美的手机界面
● 系统桌面设计：桌面设计通常指操作系统的桌面主题设计，它同样属于人机交互界面的设计。在崇尚个性的今天，很多用户对千篇一律的系统默认桌面产生了厌倦，因此打造一个与众不同、充满个性化色彩的系统桌面成为每个人的心愿，于是越来
越多的设计师开始重视系统桌面的设计，以彰显个性。图1-5所示为系统桌面设计。
图1-5 系统桌面设计
● 游戏界面：游戏软件界面的制作通常比较华丽、主题明确，三维效果十分普遍，多以游戏中的人物或物品为主体，视觉效果占十分重要的地位。图1-6所示为设计精美的游戏界面。
图1-6 设计精美的游戏界面
● 播放器界面：在激烈的市场竞争中，软件产品仅有强大的功能是远远不够的，将易用性与美观相结合，才能适应用户的需求，从而创造出更高的价值。图1-7所示为设计精美的播放器界面。
图1-7 设计精美的播放器界面
1.3 交互概念与图形界面
人机交互是一门研究系统与用户之间的交互关系的学问，系统可以是计算机化的系统和软件。
图形界面通常指用户可见的部分，是人与计算机或软件之间传递、交换信息的媒介和对话的接口，是用户与系统之间进行交流的起始平台。它们之间有着紧密的联系，但又是两个完全不同的概念。
1.4 导航栏和按钮的设计要点
导航栏和按钮都是我们在网页中经常看到的，使得我们的操作更加方便，接下来了解一下它们的设计要点。
1.导航栏
导航栏如果设计得恰到好处，会给网页增色很多。导航栏的设计不能太花哨，因为导航栏属于功能物件，喧宾夺主就不好了。导航栏的设计主要有以下几个要点：
● 在导航栏目不多的情况下，通常是一排，横竖都可以。其实，若栏目超过6个就可以考虑用两排。
● 在导航栏目很多的情况下，也可以多排，甚至不规则的多排（一排个数不同或长度不同）。商业设计或门户网站通常会有多个频道，在设计的时候需要考虑横向双排，因为使用竖排会占用太多空间。
● 通常在内容不多的情况下，可能无所谓栏目，站点就包括了导航的具体内容。
● 双排导航未必要挨在一起，可以发挥想象，自由排列。
● 图片式导航比较美观，但占用的空间比较大。
● 目前网站中使用较多的导航栏是用Flash制作的网站导航，其体积小，视觉效果强烈。
● 内容较丰富的站点，可以考虑使用快捷导航，即框架快捷导航。因为不管你进入到哪个页面都可以快速跳转到另外的栏目，更加方便自己的操作。
图1-8所示为网站中的导航栏。
图1-8 导航栏
2.按钮
如今，按钮的设计要求越来越高，网页中按钮的设计主要有以下几个要点：
● 设计的按钮要与页面的整体风格相协调，不能太抢眼。
● 有些单调的页面，要靠花哨的按钮来点缀。
● 插图与字体的搭配，要考虑字迹清楚，色彩简单，不能超过4种。
● 很长的按钮可能是框架的分解，应尽量纤细一些，否则页面会显得臃肿。图1-9所示为网站中的按钮。
图1-9 网站的按钮
1.5 数字化图像基础
计算机的数字化图像分为两种类型，即位图和矢量图，Photoshop主要用来处理位图。
1.位图图像
位图也称为点阵图，它是由许许多多的点组成的，这些点被称为像素。位图图像可以表现丰富的色彩变化并产生逼真的效果，很容易在不同软件之间交换使用，但它在保存图像时需要记录每一个像素的色彩信息，因此所占用的存储空间较大。另外，位图图像在旋转或缩放时会产生锯齿，如图1-10所示。
图1-10 位图图像及其放大效果
2.矢量图形
矢量图形通过数学的向量方式来进行计算，使用这种方式记录的文件所占用的存储空间很小，由于它与分辨率无关，所以在进行旋转、缩放等操作时可以保持对象光滑、无锯齿，如图1-11所示。矢量图的缺点是不易制作色彩变化丰富的图像，绘制出来的图像也不是很逼真，并且不易在不同软件中交换使用。
图1-11 矢量图及其放大效果
1.6 初识Photoshop
要想真正掌握和使用一个软件，首先要对该软件有所了解，接下来了解一下Photoshop的基本操作界面和工作环境。
Photoshop CS5的工作界面进行了许多改进，图像处理区域更加开阔，文档的切换也变得更加快捷，这些改进为我们创造了方便的工作环境。启动Photoshop CS5后，会出现如图1-12所示的工作界面，其中包含文档窗口、菜单栏、选项栏及面板等。
图1-12 Photoshop CS5工作界面
● 菜单栏：单击菜单栏名称可打开菜单，菜单中包含了可执行的各种命令。
● 选项栏：用来设置工具的各种选项，会随所选工具的不同而变换内容。
● 标题栏：显示了文档名称、文件格式、颜色模式和窗口缩放比例等信息。如果文档中包含了多个图层，则标题栏中还会显示当前工作的图层名称。
● 文档窗口：即图像显示的区域，用于编辑和修改图像。
● 面板：用于配合图像编辑的Photoshop的功能设置。
● 状态栏：可显示文档大小、文档尺寸、当前工具和窗口缩放比例等信息。
1.7 文件的基本操作
在对软件的操作界面有了一定的了解后，接下来让我们从基本的操作开始学习。
1.新建文件
启动Photoshop CS5软件，执行“文件>新建”命令，弹出“新建”对话框，如图1-13所示。在该对话框中可以设置文档的名称、文档的大小、分辨率及颜色模式等。
图1-13 “新建”对话框
2.打开文件
● 常规的打开方法：执行“文件>打开”命令，弹出“打开”对话框，如图1-14所示。在“打开”对话框中可以对查找范围、文件名称、文件类型进行设置。按快捷键Ctrl+O，也可以弹出“打开”对话框。
图1-14 “打开”对话框
● 打开最近打开过的图像：当在Photoshop中进行了保存文件或打开文件的操作后，在“文件>最近打开文件”子菜单中就会显示出以前编辑过的图像文件。利用“文件>最近打开文件”菜单中的文件列表，可以快速打开最近使用过的文件。
3.存储文件
执行“文件>存储”命令，弹出“存储为”对话框，如图1-15所示。在该对话框中可以对存储的位置、存储的名称、存储的格式等进行相应设置。
图1-15 “存储为”对话框
Photoshop CS5支持多种文件格式，如TIF、GIF、JPEG、PSD、PNG等，文件格式决定了图像数据的存储方式以及文件是否与一些应用程序兼容。
● PSD格式：PSD格式在保存时会将文件压缩，以减少占用的磁盘空间。但PSD格式所包含的图像数据信息较多，因此比其他格式的图像文件要大得多。
● JPEG格式：此格式的最大特点是文件比较小，经过了高位率的压缩。JPEG是目前所有格式中压缩率最高的格式。但是JPEG格式在压缩保存的过程中会以失真方式丢掉一些数据，因而保存后的图像与原图像有所差别，没有原图像的质量好，故印刷品最好不要用此图像格式。
● TIF格式：此格式可以在许多图像软件和平台之间进行转换，是一种灵活的位图图像格式。TIF格式支持RGB、CMYK、Lab、索引、位图和灰度模式，并且在RGB、CMYK和灰度3种颜色模式中还支持使用通道、图层和路径的功能。
1.8 多种选区的创建与编辑方法
选区是Photoshop中最基本的功能，使用选区可以对图像的局部进行操作，而不影响图像中其他部分的效果。接下来学习一下选区的创建与编辑。
1.选区的创建
● 创建规则形状的选区。所谓规则形状的选区是指矩形、椭圆两种图形，以及通过这两种图形延伸出来的正方形、正圆形。
打开一张素材图像，如图1-16所示。使用“矩形选框工具”在图像中创建选区，然后按快捷键Ctrl+J，复制选区中的内容，“图层”面板如图1-17所示。
图1-16 素材图像
图1-17 “图层”面板
对“图层1”添加相应的图层样式，“图层”面板如图1-18所示，图像效果如图1-19所示。
图1-18 “图层”面板
图1-19 图像效果
● 创建不规则形状的选区。不规则形状的选区可以通过5种工具创建，分别是：“套索工具”、“多边形套索工具”、“磁性套索工具”、“快速选择工具”和“魔棒工具”。
打开一张素材图像，如图1-20所示。然后选择“套索工具”，在画布中单击并拖曳鼠标，最后将光标移至起点处，释放鼠标即可完成选区的绘制，如图1-21所示。
图1-20 素材图像
图1-21 绘制选区
● 其他创建选区的方法。前面已经对选区的创建进行了简单的讲解，除了前面的方法以外，还可以通过色彩范围、快速蒙版等方法创建选区，这些多种多样的创建选区的方法构成了Photoshop强大的选区创建功能。
打开一张素材图像，如图1-22所示。执行“选择>色彩范围”命令，使用“吸管工具”在人物的衣服上单击可以得到选区，如图1-23所示。
图1-22 素材图像
图1-23 “色彩范围”对话框
2.选区的编辑
● 移动选区。打开一张素材图像，使用“椭圆选框工具”在图像中创建选区，如图1-24所示。确定在“选项”栏中显示的选区运算方式为“新选区”，将光标放置到选区中，单击并拖动鼠标即可移动选区，如图1-25所示。
图1-24 创建选区
图1-25 移动选区
● 通过命令对选区进行编辑。通过“选择>修改”下的子菜单对选区进行编辑，完成对选区的扩展、收缩、平滑、羽化等操作。注意这些命令只对选区起作用。
打开一张素材图像，使用创建选区工具创建选区，如图1-26所示。执行“选择>修改>边界”命令，在弹出的对话框中进行设置，可以得到新的选区，如图1-27所示。
图1-26 创建选区
图1-27 执行边界选区后的效果
● 变换选区。在图像中创建选区时，有时需要对选区或选区中的内容进行编辑，如进行缩小、放大旋转等操作。
打开一张素材图像，使用创建选区工具创建选区，如图1-28所示。执行“选择>变换选区”命令，对选区进行旋转操作，如图1-29所示。
图1-28 创建选区
图1-29 旋转选区
● 为选区描边。在对图像进行编辑操作的时候，可以对选区进行描边等操作，完成一些特殊的效果。
打开一张素材图像，在图像中创建一个选区，如图1-30所示。执行“编辑>描边”命令，弹出“描边”对话框，设置完成后，效果如图1-31所示。
图1-30 创建选区
图1-31 为选区描边
1.9 图像的变换操作
在进行一些设计的时候，经常会碰到要对图像进行变换操作的情况。在Photoshop CS5中，可以使用相关命令对图像进行缩放、旋转、斜切、翻转等操作。
1.移动图像
在“图层”面板中选中要移动对象所在的图层，单击工具箱中的“移动工具”按钮，在图像中拖动鼠标即可移动对象。
打开一张素材图像，使用创建选区工具在图像中创建选区，然后按快捷键Ctrl+J复制选区中的内容，如图1-32所示。选择“图层1”，使用“移动工具”拖动鼠标即可移动选区内的图像，如图1-33所示。
图1-32 创建选区并复制选区中的内容
图1-33 移动选区内的图像
2.自由变换图像
执行“编辑>自由变换”命令，在“选项”栏中会出现相应的参数设置，可以通过更准确的数字来控制图像自由变换的位置和大小。
打开一张素材图像，使用创建选区工具在图像中创建选区，然后按快捷键Ctrl+J复制选区中的内容，如图1-34所示。按快捷键Ctrl+T对图像进行等比例放大，并移动到合适的位置，如图1-35所示。
图1-34 创建选区并复制选区中的内容
图1-35 图像效果
3.斜切图像
通过执行“变换”子菜单下的“斜切”命令，可以对图像进行斜切操作。
打开一张素材图像，使用创建选区工具在图像中创建选区，然后按快捷键Ctrl+J复制选区中的内容，如图1-36所示。执行“编辑>变换>斜切”命令，对图像进行斜切操作，如图1-37所示。
图1-36 创建选区并复制选区中的内容
图1-37 图像效果
4.扭曲图像
通过执行“变换”子菜单下的“扭曲”命令，可以对图像进行扭曲操作。
打开一张素材图像，使用创建选区工具在图像中创建选区，然后按快捷键Ctrl+J复制选区中的内容，如图1-38所示。执行“编辑>变换>扭曲”命令，对图像进行扭曲操作，如图1-39所示。
图1-38 创建选区并复制选区中的内容
图1-39 图像效果
5.透视图像
通过执行“变换”子菜单下的“透视”命令，可以对图像进行透视操作。
打开一张素材图像，按快捷键Ctrl+J复制“背景”图层，得到“背景 副本”图层，如图1-40所示。执行“编辑>变换>透视”命令，对图像进行透视操作，如图1-41所示。
图1-40 素材图像
图1-41 图像效果
6.变形图像
通过执行“变换”子菜单下的“变形”命令，可以对图像进行变形操作。
打开一张素材图像，按快捷键Ctrl+J复制“背景”图层，得到“背景 副本”图层，如图1-42所示。执行“编辑>变换>变形”命令，对图像进行变形操作，如图1-43所示。
图1-42 素材图像
图1-43 图像效果
7.翻转图像
“变换”子菜单提供了两个“翻转”命令，一是水平翻转，二是垂直翻转，大家可以根据自己的需要对图像进行翻转操作。
打开一张素材图像，按快捷键Ctrl+J复制“背景”图层，得到“背景 副本”图层，如图1-44所示。执行“编辑>变换>水平翻转”命令，并将图像移动到合适的位置，如图1-45所示。
图1-44 素材图像
图1-45 图像效果
1.10 设置颜色
在进行设计的时候，大家经常会对所绘制的图形填充颜色，那么怎样来设置颜色？接下来就让我们一起来学习一下。
1.使用“拾色器”对话框
拾色器是定义颜色的对话框，可以单击需要的颜色进行设置，也可以使用颜色值精确地设置颜色。
在工具箱中单击“前景色”图标，弹出“拾色器”对话框，可以在该对话框中对颜色进行设置，如图1-46所示。
图1-46 “拾色器”对话框
2.使用“颜色”面板
使用“颜色”面板设置颜色和在“拾色器”对话框中设置颜色一样轻松，并且可以选择不同的颜色模式来设置颜色。
执行“窗口>颜色”命令，即可打开“颜色”面板，如图1-47所示。在默认情况下，“颜色”面板提供的是RGB颜色模式的滑块，可以使用鼠标拖动滑块或在其后面输入数值来设置颜色。
图1-47“颜色”面板
3.使用“色板”面板
“色板”面板可存储用户经常使用的颜色，也可以在其中添加和删除预设颜色，或者为不同的项目显示不同的颜色库。
执行“窗口>色板”命令，即可打开“色板”面板，如图1-48所示。移动鼠标指针至面板的色板方格中，此时指针变成吸管形状，单击即可选定当前指定的颜色。
图1-48“色板”面板
自我检测
了解了图形界面的相关知识，并且学习了Photoshop中选区的应用后，我们现在已经可以应用所学习的图形界面的相关知识和Photoshop知识设计按钮和导航了。下面就开始付诸于行动，大家一起动手来练习按钮和导航的设计吧！
制作网站水晶风格按钮
制作网站质感按钮
制作网站首页按钮图标
制作个性下载按钮
制作炫酷音乐按钮
制作播放按钮
制作网站快速导航
制作网站导航栏
1/制作网站水晶风格按钮
简单精致的按钮在网页或软件中是比较常见的，也是最常用到的设计，它必须在很小的范围内有序地排列字体和图标，以及颜色的搭配等内容。在制作的过程中，要考虑观看者的视觉感受，不需要过于花哨，字体的设计简单明了即可。
● 使用到的技术 圆角矩形工具、横排文字工具、自定形状工具、图层样式
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\网站水晶风格按钮.swf
● 源文件地址 光盘\源文件\第1天\网站水晶风格按钮.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关选项进行设置，单击“确定”按钮，新建一个文档。
02 选择“圆角矩形工具”，设置“前景色”为RGB（0、103、146），在画布中绘制圆角矩形。
03 选择“形状1”图层，为其添加“投影”图层样式，并对相关参数进行设置。
04 在“图层样式”对话框中选择“渐变叠加”复选框，对相关参数进行设置。
05 在“图层样式”对话框中选择“描边”复选框，对相关参数进行设置。
06 完成“图层样式”对话框的设置，可以看到图像效果。
07 选择“圆角矩形工具”，在“选项”栏上单击“形状图层”按钮，设置“半径”为5px、“前景色”为白色，在画布中绘制一个圆角矩形。
08 完成圆角矩形的绘制，在画布中再绘制一个圆角矩形。
09 选择“形状2”图层，为其添加“渐变叠加”图层样式，并对相关参数进行设置。
10 在“图层样式”对话框中选择“描边”复选框，对相关参数进行设置。
11 单击“确定”按钮，设置该图层的“混合模式”为“叠加”、“不透明度”为53%、“填充”为0%。
12 使用相同的方法，制作出“形状3”图层。
13 选择“椭圆工具”，在“选项”栏上单击“形状图层”按钮，按住Shift键，在画布中绘制一个正圆形。
14 选择“形状4”，为其添加“渐变叠加”图层样式，并对相关参数进行设置。
15 在“图层样式”对话框中选择“描边”复选框，对相关参数进行设置。
16 完成“图层样式”对话框的设置，设置该图层的“混合模式”为“柔光”。
17 使用“自定形状工具”，打开“自定形状”拾色器，选择箭头形状，在画布中绘制白色箭头。
18 选择“形状5”图层，为其添加“投影”图层样式，并对相关参数进行设置。
19 在“图层样式”对话框中选择“内阴影”复选框，对相关参数进行设置。
20 在“图层样式”对话框中选择“渐变叠加”复选框，对相关参数进行设置。
21 在“图层样式”对话框中选择“描边”复选框，对相关参数进行设置。
22 完成“图层样式”对话框的设置，可以看到图像效果。
23 选择“横排文字工具”，在“字符”面板中进行相关参数设置，然后输入文字。
24 选择“点击查询”图层，为其添加“投影”图层样式，并对相关参数进行设置。
25 在“图层样式”对话框中选择“内阴影”复选框，对相关参数进行设置。
26 在“图层样式”对话框中选择“外发光”复选框，对相关参数进行设置。
27 为图像添加“内发光”图层样式，并设置相应参数。
28 在“图层样式”对话框中选择“渐变叠加”复选框，对相关参数进行设置。
29 完成网站按钮的制作，为按钮添加渐变背景和倒影，得到最终效果。
☆ 操作小贴士 ☆
图层样式是Photoshop比较实用的功能之一，它可以为图层添加内阴影、外发光、斜面、叠加和描边等效果，从而创建具有立体感和质感的按钮、图标、文字和图片效果。
注意，“背景”图层不能添加图层样式。如果要为其添加样式，需要先将“背景”图层转换为普通图层。
2/制作网站质感按钮
按钮的功能非常强大，在UI设计中经常用到。在设计时必须注意，图标的位置和大小都要适中，字体要选用比较常见的字体，颜色的搭配要符合设计整体的视觉要求，简单实用即可。
● 使用到的技术 圆角矩形工具、横排字体工具、椭圆工具、图层样式
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\网站质感按钮.swf
● 源文件地址 光盘\源文件\第1天\网站质感按钮.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关参数进行设置，然后单击“确定”按钮，新建一个文档。
02 使用“圆角矩形工具”，设置“前景色”为RGB（101、179、0），在画布中绘制圆角矩形。
03 选择“形状1”图层，为其添加“投影”图层样式，并对相关参数进行设置。
04 选择“内阴影”复选框，对相关参数进行 设置。
05 选择“斜面和浮雕”复选框，对相关参数进行设置。
06 选择“渐变叠加”复选框，对相关参数进行 设置。
07 单击“确定”按钮，完成“图层样式”对话框的设置，可以看到图像效果。
08 按住Ctrl键，单击“形状1”图层的矢量蒙版缩略图，载入选区。新建“图层1”，设置“前景色”为RGB（100、179、0），然后按快捷键Alt+Delete填充前景色。
09 取消选区，为该图层添加“内阴影”图层样式，并对相关参数进行设置。
10 在“图层样式”对话框中选择“内发光”复选框，并对相关参数进行设置。
11 单击“确定”按钮，设置该图层的“填充” 为0%。
12 使用相同的方法，绘制出“图层2”中的圆角矩形。
13 选择“图层2”，为其添加“内阴影”图层样式，并对相关参数进行设置。
14 选择“内发光”复选框，对相关参数进行 设置。
15 选择“斜面和浮雕”复选框，对相关参数进行设置。
16 完成“图层样式”对话框的设置，设置该图层的“填充”为0%。
17 选择“椭圆工具”，在“选项”栏上单击“形状图层”按钮。设置“前景色”为黑色，按住Shift键，在画布中绘制一个正圆形。
18 为该图层添加“内阴影”图层样式，并对相关参数进行设置。
19 完成“图层样式”对话框的设置，设置该图层的“混合模式”为“颜色加深”、“填充”为64%。
20 选择“自定形状工具”，打开“自定形状”拾色器，选择箭头形状，在画布中绘制白色箭头。
21 使用“直接选择工具”和“转换点工具”，对其做相应调整。
22 选择“形状3”图层，为其添加“投影”图层样式，并对相关参数进行设置。
23 选择“渐变叠加”复选框，对相关参数进行设置。
24 完成“图层样式”对话框的设置，可以看到图像效果。
25 选择“横排文字工具”，在“字符”面板中进行参数设置，然后输入文字。
26 选择“Download”图层，为其添加“投影”图层样式，并对相关参数进行设置。
27 选择“内阴影”复选框，对相关参数进行设置。
28 选择“外发光”复选框，对相关参数进行设置。
29 完成“图层样式”对话框的设置，设置该图层的“混合模式”为“颜色加深”。
30 使用相同的方法，制作出其他文字效果。
31 完成金属质感按钮的制作，为其添加倒影和渐变背景，得到最终效果。
☆ 操作小贴士 ☆
图层样式的“内阴影”在按钮中是比较实用的功能之一，它可以在按钮内部添加阴影。大家可以任意设置阴影的颜色、不透明度、混合模式、角度、距离、大小等参数，以使按钮更具有立体感和质感。
在输出按钮时要特别注意其尺寸与原始尺寸要保持一致。根据实际需要，可以选择背景透明或不透明，导出的格式可以选择“PNG”或“GIF”。
3/制作网站首页按钮图标
返回首页的按钮在网站中是不可缺少的，其设计体现了网站的风格和设计者的构思，在设计时需要考虑按钮的美观性和高度的可识别性，以给浏览者不一样的视觉享受。本按钮以红色为主色调，它像一盏指路灯一样闪闪发光，简单大方、实用精巧。
● 使用到的技术 椭圆工具、图层混合模式、图层样式
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\网站首页按钮图标.swf
● 源文件地址 光盘\源文件\第1天\网站首页按钮图标.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关选项进行设置，然后单击“确定”按钮，新建一个文档。
02 设置“前景色”为RGB（33、40、43），按快捷键Alt+Delete填充前景色。
03 新建“图层1”，设置“前景色”为R G B（20、24、26）。选择“椭圆工具”，按住Shift键在画布中绘制正圆形。
04 新建“图层2”，选择“椭圆选框工具”按住Shift键，绘制正圆选区。
05 按住Ctrl+Alt组合键单击“图层1”的缩略图，载入“图层1”选区。
06 选择“渐变工具”，打开“渐变编辑器”对话框，设置渐变颜色。
07 在选区中拖动鼠标填充线性渐变，并取消选区。
08 设置“图层2”的“混合模式”为“颜色减淡”。
09 载入“图层1”选区，按快捷键Shift+F6，弹出“羽化选区”对话框，设置相关参数。
10 新建“图层3”，为选区填充RGB（255、70、46），并设置该图层的“混合模式”为“叠加”。
11 新建“图层4”，设置“前景色”为RGB（88、0、0），在画布中绘制正圆形。
12 选择“图层4”，为其添加“斜面和浮雕”图层样式，并对相关参数进行设置。
13 完成“图层样式”对话框的设置，可以看到图像效果。
14 载入“图层4”选区，执行“选择>修改>收缩”命令，弹出“收缩选区”对话框，设置相关参数。
15 新建“图层5”，在选区中填充线性渐变，并设置该图层的“混合模式”为“柔光”、“不透明度”为28%。
16 使用相同的方法，绘制出按钮的高光。
17 载入“图层4”选区，选择“椭圆选框工具”，按住Alt键绘制椭圆选区，减去多余选区部分。
18 新建“图层7”，为选区填充RGB（140、21、21），并设置该图层的“混合模式”为“叠加”、“不透明度”为83%。
19 使用相同的方法，绘制出高光图像。
20 使用“自定形状工具”，选择合适的箭头形状，绘制路径，然后使用“直接选择工具”对路径进行调整。
21 使用相同的方法，在画布中绘制路径。
22 选择“矩形工具”，在“选项”栏中单击“从路径区域减去”按钮，绘制路径。
23 新建“图层10”，将路径转换为选区，为选区填充白色。
24 选择“图层10”，为其添加“投影”图层样式，并对相关参数进行设置。
25 选择“外发光”复选框，对相关参数进行设置。
26 完成“图层样式”对话框的设置，可以看到图像效果。
27 完成网站首页按钮的设计，得到最终效果。
☆ 操作小贴士 ☆
在绘制多个路径时，可以在“选项”栏中进行相应的设置，其中包括“添加到路径区域”、“从路径区域减去”、“交叉路径区域”和“重叠区域除外”，单击不同的按钮，可以得到不同的效果。
4/制作个性下载按钮
下载按钮在网站中非常实用，因为很多浏览者会用到，在设计时应该简洁、一目了然。本下载按钮采用橙色作为主色调，热情大方，采用清爽的蓝色作为下载图标，配合立体感很强的文字，既美观又好用。
● 使用到的技术 圆角矩形工具、钢笔工具、图层混合模式、图层样式
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\个性下载按钮.swf
● 源文件地址 光盘\源文件\第1天\个性下载按钮.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关选项进行设置，然后单击“确定”按钮，新建一个文档。
02 选择“圆角矩形工具”，在画布中绘制圆角矩形。
03 选择“形状1”图层，为其添加“投影”图样式，并对相关选项进行设置。层
04 选择“渐变叠加”复选框，对相关选项进行设置。
05 选择“描边”复选框，对相关选项进行设置。
06 完成“图层样式”对话框的设置，可以看到图像效果。
07 载入“形状1”图层选区，执行“选择>修改>收缩”命令，弹出“收缩选区”对话框，设置其相应参数。
08 新建“图层1”，设置“前景色”为白色，为选区填充前景色。
09 选择“图层1”，为其添加“渐变叠加”图层样式，并对相关选项进行设置。
10 选择“描边”复选框，并对相关选项进行设置。
11 完成“图层样式”对话框的设置，设置该图层的“混合模式”、“不透明度”和“填充”。
12 选择“矩形工具”，在画布中绘制矩形，然后使用“直接选择工具”调整路径。
13 选择“形状2”，为其添加“渐变叠加”图层样式，并对相关选项进行设置。
14 完成“图层样式”对话框的设置，可以看到图像效果。
15 使用相同的方法，绘制出相似的图形。
16 选择“钢笔工具”，在“选项”栏上进行相应设置，然后在画布中绘制图形。
17 选择“形状3”，为其添加“投影”图层样式，并对相关选项进行设置。
18 选择“渐变叠加”复选框，对相关选项进行设置。
19 完成“图层样式”对话框的设置，可以看到图像效果。
20 使用相同的方法，完成相似图形效果的绘制。
21 选择“横排文字工具”，在“字符”面板中进行相应的设置，然后输入文字。
22 选择“Download”图层，为其添加“投影”图层样式，并对相关选项进行设置。
23 选择“内阴影”复选框，对相关选项进行设置。
24 选择“内发光”复选框，对相关选项进行设置。
25 选择“渐变叠加”复选框，对相关选项进行设置。
26 完成“图层样式”对话框的设置，可以看到文字效果。
27 使用相同的方法，完成按钮上其他文字和图形的绘制。
28 选择“直线工具”，在“选项”栏上进行相应设置，然后在画布中绘制直线。
29 设置“形状11”图层的“混合模式”为“叠加”。
30 使用相同方法输入文字，然后按快捷键Ctrl+T调出变换框，对文字进行旋转。
31 完成网站下载按钮的设计，为按钮添加背景和投影，得到最终效果。
☆ 操作小贴士 ☆
“叠加”混合模式属于Photoshop中的对比模式，对比混合模式在进行混合时，50%的灰色会完全消失，任何亮度值高于50%灰色的像素都可能加亮下面图层的图像，亮度值低于50%的像素则可能使下面图层的图像变暗。使用“叠加模式”混合后，图像的色调会发生变化，但图像的高光和暗调被保留。
5/制作炫酷音乐按钮
在当今社会中，上网已经变得非常普遍了。在网页上添加一些小按钮是必不可少的，它们也是网页构成的主要组成部分。那么怎样才能将这些不可或缺的小按钮设计得既简单又吸引人的注意力呢？下面让我们一起来学习一下！
● 使用到的技术 椭圆工具、钢笔工具、图层样式、画笔工具、自定形状工具
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\炫酷音乐按钮.swf
● 源文件地址 光盘\源文件\第1天\炫酷音乐按钮.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关参数进行设置，然后单击“确定”按钮，新建一个文档。
02 新建“图层1”，设置“前景色”为R G B（63、63、63），然后选择“椭圆工具”，按住Shift键，在画布中绘制正圆形。
03 使用“椭圆工具”，在画布中绘制两个正圆形路径。
04 新建“图层2”，设置“前景色”为黑色。将路径转化为选区，为选区填充前景色。
05 选择“图层2”，为其添加“渐变叠加”图层样式，并对相关选项进行设置。
06 完成“图层样式”对话框的设置，设置该图层的“不透明度”为85%。
07 使用相同方法，完成相似内容的制作。
08 新建“图层4”，选择“椭圆选框工具”，在画布中绘制正圆形选区。
09 选择“渐变工具”，打开“渐变编辑器”对话框，设置渐变颜色。
10 完成渐变颜色的设置，在选区中拖动鼠标填充径向渐变颜色。
11 使用相同方法，完成相似内容的制作。
12 新建“图层6”，使用“钢笔工具”在画布中绘制路径。
13 按快捷键Ctrl+Enter，将路径转换为选区，并为选区填充白色。
14 取消选区，设置该图层的“混合模式”为“柔光”、“不透明度”为50%。
15 新建“图层7”，选择“画笔工具”，打开“画笔预设”选取器，载入外部“星空1”画笔，并选择合适的笔触。
16 在画布中合适的位置绘制图形。
17 使用相同方法，载入“星空”画笔，然后选择合适的笔触，在画布中绘制图形。
18 打开“画笔”面板，在“画笔”面板中进行相应设置。
19 选择“散布”复选框，并对其参数进行设置。
20 新建“图层9”，载入“图层4”选区，然后选择“画笔工具”，在画布中进行绘制。
21 取消选区，在“图层”面板中进行相应设置。
22 使用“自定形状工具”，打开“自定形状”拾色器，选择合适的形状。
23 在画布中拖曳鼠标，绘制路径。
24 新建“图层10”，将路径转换为选区，并为选区填充白色。按快捷键Ctrl+T，对图像进行自由变换操作。
25 新建“图层11”，选择“椭圆选框工具”，在画布中绘制选区，并为选区填充黑色。
26 执行“滤镜>模糊>高斯模糊”命令，在弹出的对话框中进行相应设置。
27 在“图层”面板中调整图层顺序，完成音乐按钮的设计，得到最终效果。
☆ 操作小贴士 ☆
要想为图层添加样式，方法不是唯一的。通常，打开“图层样式”对话框的方法有3种，下面来了解一下。
第1种方法：执行“图层>图层样式”下拉菜单中的样式命令，可打开“图层样式”对话框。
第2种方法：在“图层”面板中单击“添加图层样式”按钮，在弹出的下拉菜单中选择任意一种样式，也可以打开“图层样式”对话框。
第3种方法：双击需要添加样式的图层，也可以打开“图层样式”对话框。
6/制作播放按钮
在浏览网页的时候，大家经常会看到各种各样的按钮，这些按钮在网页中有着不可或缺的作用，那么这些按钮是怎样制作出来的呢？接下来就让我们一起来学习一下。
● 使用到的技术 椭圆选框工具、羽化命令、图层样式、变换选区
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\播放按钮.swf
● 源文件地址 光盘\源文件\第1天\播放按钮.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关参数进行设置，然后单击“确定”按钮，新建一个文档。
02 新建“图层1”，选择“椭圆选框工具”绘制正圆形选区，并为选区填充黑色。
03 选择“图层1”，为其添加“投影”图层样式，并对相关参数进行设置。
04 选择“斜面和浮雕”复选框，对相关参数进行设置。
05 选择“渐变叠加”复选框，对相关参数进行设置。
06 完成“图层样式”对话框的设置，可以看到图像效果。
07 按住Ctrl键，单击“图层1”缩览图载入选区，新建“图层2”。
08 执行“选择>变换选区”命令，对选区的大小进行调整。
09 设置“前景色”为RGB（230、230、230），为选区填充前景色。
10 保留选区，使用相同的方法，对选区的大小进行相应调整。按Delete键，删除选区中的图像。
11 选择“图层2”，为其添加“投影”图层样式，并对相关参数进行设置。
12 选择“内发光”复选框，并对相关参数进行设置。
13 完成“图层样式”对话框的设置，可以看到图像效果。
14 新建“图层3”，选择“椭圆选框工具”，在画布中绘制椭圆选区。
15 执行“选择>修改>羽化”命令，在弹出的对话框中进行设置。
16 为选区填充白色，按快捷键Ctrl+D取消选区。
17 设置“图层3”的“不透明度”为15%。
18 使用相同方法，完成相似内容的制作。
19 新建“图层16”，选择“椭圆工具”，在“选项”栏上单击“填充像素”按钮，在画布中绘制正圆形。
20 选择“图层16”，为其添加“描边”图层样式，并对相关参数进行设置。
21 完成“图层样式”对话框的设置，可以看到图像效果。
22 使用相同方法，完成相似内容的制作。
23 选择“多边形工具”，在画布中绘制三角形。
24 为该图层添加“描边”图层样式，并对相关参数进行设置。
25 完成“图层样式”对话框的设置，结束该播放按钮的制作，得到最终效果。
☆ 操作小贴士 ☆
羽化是通过建立选区和选区周围像素之间的转换边界来模糊边缘的，这种模糊方式将丢失选区边缘的一些图像细节，如果选区较小，而羽化半径设置较大，将会弹出警告对话框。
7/制作网站快速导航
导航在网站设计中是很重要的部分，导航不仅介绍了网站的大致内容，还可以让浏览者更快地进入想要了解的页面。那么这些导航是怎样做出来的呢？接下来，就让我们一起来学习一下。
● 使用到的技术 圆角矩形工具、横排文字工具、图层样式、画笔工具、图层蒙版
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\网站快速导航.swf
● 源文件地址 光盘\源文件\第1天\网站快速导航.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关参数进行设置，然后单击“确定”按钮，新建一个文档。
02 设置“前景色”为RGB（222、255、213），为画布填充前景色。
03 新建“图层1”，选择“圆角矩形工具”，在“选项”栏上进行相应设置，然后在画布中绘制圆角矩形。
04 选择“图层1”，为其添加“描边”图层样式，并对相关参数进行设置。
05 完成“图层样式”对话框的设置，可以看到图像效果。
06 选择“渐变工具”，打开“渐变编辑器”对话框，设置渐变颜色。
07 载入“形状1”选区，新建图层，为选区填充线性渐变，并设置该图层的“填充”为40%。
08 使用相同方法，在画布中绘制圆角矩形，并填充相应的渐变颜色。
09 载入“形状1”选区，然后选择“矩形选框工具”，按住Alt键，在画布中绘制矩形，将两个选区相减。
10 新建“图层4”，选择“渐变工具”，打开“渐变编辑器”对话框，设置渐变颜色。
11 在选区中拖动鼠标，填充线性渐变。
12 保留选区，为该图层添加蒙版，然后使用“画笔工具”在蒙版中进行涂抹。
13 设置该图层的“填充”为33%。
14 复制“图层4”，得到“图层4副本”图层，执行“编辑>变换>垂直翻转”命令，并将图像移动到合适的位置。
15 使用相同方法，完成相似内容的制作。
16 选择“横排文字工具”，在“字符”面板中进行相应设置，然后在画布中单击输入文字。
17 根据前面的制作方法，完成其他图像的绘制。
18 选择“横排文字工具”，在“字符”面板中进行相应设置，然后在画布中输入文字。
19 为文字图层添加“投影”图层样式，并对相关参数进行设置。
20 完成“图层样式”对话框的设置，可以看到文字效果。
21 选择“直线工具”，在“选项”栏上进行相应设置，然后在画布中绘制直线。
22 为“形状2”图层添加“投影”图层样式，并对相关参数进行设置。
23 完成“图层样式”对话框的设置，结束网站快速导航的制作，得到最终效果。
☆ 操作小贴士 ☆
在使用“圆角矩形工具”绘制图形时，“选项”栏上有3个不同的绘图模式按钮，在“填充像素”绘图模式下绘制图形，由于不能创建矢量蒙版，所以，在“路径”面板中不会创建路径。
8/制作网站导航栏
打开网页，首先映入眼帘的是网站导航栏，由于它可以帮助浏览者了解更多需要的东西，或发现自己特别感兴趣的内容，所以导航栏是网站必不可少的，也是最重要的组成部分之一，那么导航栏是怎样制作的呢？下面让我们一起来学习一下。
● 使用到的技术 椭圆工具、高斯模糊、图层样式
● 学习时间 30分钟
● 视频地址 光盘\视频\第1天\网站导航栏.swf
● 源文件地址 光盘\源文件\第1天\网站导航栏.psd
01 执行“文件>新建”命令，弹出“新建”对话框，对相关参数进行设置，然后单击“确定”按钮，新建一个文档。
02 新建“图层1”，选择“圆角矩形工具”，在“选项”栏中进行相应设置，然后在画布中绘制圆角矩形路径。
03 设置“前景色”为RGB（68、176、250），将路径转换为选区，为选区填充前景色。
04 选择“图层1”，为其添加“斜面和浮雕”图层样式，并对相关参数进行设置。
05 选择“渐变叠加”复选框，对相关参数进行设置。
06 选择“描边”复选框，对相关参数进行设置。
07 完成“图层样式”对话框的设置，可以看到图像效果。
08 使用相同方法，完成“图层2”中图像效果的绘制。
09 新建“图层3”，选择“椭圆选框工具”，在画布中绘制椭圆选区。
10 为选区填充白色，并载入“图层1”选区。按快捷键Ctrl+Shift+I反选选区，删除不需要的部分。
11 选择“图层3”，执行“滤镜>模糊>高斯模糊”命令，在弹出的对话框中进行相应设置。
12 新建“图层4”，选择“画笔工具”，使用合适的画笔在画布中进行涂抹。
13 选择“橡皮擦工具”，擦除不需要的部分。
14 使用相同方法，完成相似内容的制作。
15 载入“图层1”选区，选择“椭圆选框工具”，按住Alt键，在画布中绘制椭圆，将两个选区相减。
16 执行“选择>修改>收缩”命令，在弹出的对话框中进行相应的设置。
17 新建“图层7”，为选区填充白色。选择“橡皮擦工具”，擦除不需要的部分。
18 设置该图层的“不透明度”为20%。
19 选择“横排文字工具”，在“字符”面板中对相关参数进行设置，并输入文字。
20 使用相同方法，完成相似内容的制作。
21 选择“多边形工具”，在“选项”栏中进行相应设置，在画布中绘制三角形。
22 选择“图层1”，为其添加“投影”图层样式，并对相关参数进行设置。
23 完成“图层样式”对话框的设置，结束网站导航栏的设计制作，得到最终效果。
☆ 操作小贴士 ☆
使用“高斯模糊”滤镜可以添加低频细节，使图像产生一种朦胧效果。在使用该命令时，半径用来设置模糊的范围，以像素为单位，设置得数值越高，模糊的效果越强烈。
☆ 自我评价 ☆
通过以上几个按钮和导航栏的设计练习，我深深感到精致的按钮和好的导航栏，会给网页增色很多。大家可以根据自己的爱好，结合Photoshop中相关的工具和命令，来设计一些精美的按钮和导航栏，但是在平时要多加练习。
☆ 总结扩展 ☆
上面几个案例主要介绍了几种不同按钮和导航栏的设计制作，在设计制作的过程中，主要使用了圆角矩形工具、椭圆选框工具、横排文字工具、羽化、高斯模糊、选区的变换操作和图层样式等，具体要求如下表：
按钮和导航栏都是网页的构成要素，也是非常重要的，无论是哪个网页都需要用到按钮和导航栏。今天主要介绍了图形界面的基础知识以及相关按钮和导航栏的制作，完成今天的学习后，大家能够熟练掌握按钮和导航栏的设计制作。在接下来的一天，我们将学习有关图标的设计制作，准备好了吗？让我们一起出发吧！