第11章综合实训案例1——多媒体界面的设计

第11章综合实训案例1——多媒体界面的设计案例简介案例制作步骤背景知识介绍本章主要内容：《Photoshop平面设计实用教程(第二版)》清华大学出版社11.1案例简介本案例介绍用Photoshop进行多媒体软件界面的设计和制作的方法。通过本案例的制作读者将对多媒体软件界面各个构成要素的制作过程有一个深入的了解。11.1.1案例设计思路本案例制作的是一个多媒体软件的主界面。在设计时要求满足相应功能的需要，界面结构设计合理且尽可能简洁，在视觉上要求富于设计感。本案例在设计时，以蓝色作为整个界面的主色调，容易让使用者产生心灵的感应。标题适当使用特效，以便对软件的主体有清晰明确的认识，突出重点。按钮设计实用简单，但又不失美观，并且与背景搭配合理。按钮在布局上做到内部结构布局合理，简单明了，便于用户操作，方便用户灵活的运用。界面整体风格与软件本身的结合度强，使之合乎现代的时尚感和大局观。11.1.2案例制作说明本案例在制作中没有使用复杂的操作。案例的制作分为背景的制作，标题的制作、按钮的制作和最终效果图的制作这几步。1．背景制作制作过程中使用背景素材图片来构建界面背景，这样能减小制作工作量，提高制作效率。在制作过程中使用了图层蒙板和【切变】滤镜来创建图像背景效果。同时使用矢量工具来绘制主体部分的装饰线，并通过添加【图层样式】来获得透明的水晶效果，使背景更富有现代感。2．标题的制作在创建标题后，分别对标题的不同文字部分创建不同的效果。对标题中的英文字符，采用了【马赛克】滤镜和【描边】特效创建边缘像素文字效果。同时对标题中的汉字字符应用【图层样式】创建水晶字体效果。11.1.2案例制作说明3．按钮制作多媒体软件中的按钮分为常态、鼠标滑过和鼠标按下这3种状态，为了便于按钮在具体软件中使用，按钮采用单独的文件形式制作。按钮的制作使用【图层样式】创建特效。4．效果图的制作效果图的制作是在制作时放置功能按钮和说明文字的过程，使用【移动工具】来移动对象进行界面的布局，使用【自由变换】命令调整对象的大小，使之符合界面的要求。11.2案例制作步骤下面，详细介绍本案例的制作步骤。11.2.1制作背景背景的制作分为两步完成，先为作品添加素材并应用滤镜对素材进行处理。然后，使用路径工具创建背景装饰并为其添加图层样式效果。11.2.1制作背景1．添加并处理素材图片（1）打开【新建】对话框，设置如图11-1所示。将新文档保存为“多媒体界面.psd”文件。（2）打开水滴.jpg和底纹.jpg文件。将“水滴.jpg”拖放到新文档中，如图11-2所示。图11-1【新建】对话框的设置图11-2放置素材图片11.2.1制作背景（3）为图层添加图层蒙板。选择【渐变工具】，渐变设置为【从背景色到前景色】，选择【径向渐变】。在图层蒙板中创建从中心向外侧的径向渐变效果，如图11-3所示。图11-3在图层蒙板中创建径向渐变11.2.1制作背景（4）将“底纹.jpg”拖放到图像中来，如图11-4所示。【高斯模糊】参数设置，如图11-5所示。应用滤镜，图像的效果如图11-6所示。图11-4放置第二张图片图11-5【高斯模糊】图11-6应用后效果11.2.1制作背景（5）在【切变】对话框中对滤镜效果进行设置，如图11-7所示。应用滤镜，此时图像的效果如图11-8所示。图11-7【切变】对话框图11-8应用【切变】滤镜后的图像效果11.2.1制作背景（6）为图层添加图层蒙板，在蒙板中创建由左上角到右下角的线性渐变效果，如图11-9所示。（7）在【波浪】对话框中对滤镜效果进行设置，如图11-10所示。应用滤镜，图像的效果如图11-11所示。图11-9蒙板中渐变效果图11-10【波浪】参数设置图11-11应用后效果11.2.1制作背景（8）选择【图层1】。打开【色阶】对话框，在对话框中调整中间灰色滑块位置将图像适当加亮，如图11-12所示。此时图像效果如图11-13所示。图11-12调整中间灰色滑块的位置图11-13调整色阶后的图像效果11.2.1制作背景2．制作装饰物（1）选择【椭圆工具】，在选项栏中对工具进行设置，如图11-14所示。使用【椭圆工具】绘制2个圆形路径，如图11-15所示。图11-14【椭圆工具】选项栏的设置图11-15绘制2个圆形路径11.2.1制作背景（2）打开路径调板，单击【路径】调板下的【将路径作为选区载入】按钮，获得选区，如图11-16所示。选择【选择】→【变换选区】命令，对选区进行变换，如图11-17所示。图11-16将路径转换为选区图11-17变换选区11.2.1制作背景（3）创建一个新层，选择【渐变工具】，打开【渐变编辑器】对渐变进行编辑，选择左侧颜色为当前图像中深蓝色区域颜色，中间颜色为当前图像中浅蓝色区域颜色，右侧颜色为白色，如图11-18所示。使用【渐变工具】从下向上在选区创建线性渐变效果，如图11-19所示。图11-18使用【渐变编辑器】编辑渐变图11-19在选区中创建线性渐变效果11.2.1制作背景（4）取消选区，在【图层样式】对话框中选中【投影】复选框，对投影进行设置，如图11-20所示（5）选中【内阴影】复选框，对内阴影效果进行设置，如图11-21所示。图11-20投影效果的设置图11-21设置内阴影效果11.2.1制作背景（6）选中【外发光】复选框，对外发光效果进行设置，如图11-22所示。（7）选中【内发光】复选框，对内发光效果进行设置，如图11-23所示。图11.22设置外发光效果图11-23设置内发光效果11.2.1制作背景（8）选中【斜面和浮雕】复选框，对斜面和浮雕效果进行设置，如图11-24所示。选中【等高线】复选框，对等高线参数进行设置，如图11-25所示。图11-24设置斜面和浮雕效果图11-25等高线参数的设置11.2.1制作背景（9）选中【光泽】复选框，同时对参数进行设置，如图11-26所示。（10）选中【颜色叠加】复选框，同时对参数进行设置，如图11-27所示。图11-26【光泽】的参数设置图11-27【颜色叠加】的参数设置11.2.1制作背景（11）完成所有参数设置后，单击【确定】按钮关闭【图层样式】对话框，此时图像效果如图11-28所示。图11-28添加图层样式后的图像效果11.2.2创建标题1．“PhotoshopCS5”文字效果的创建（1）创建文字PhotoshopCS5，打开【字符】调板设置字符样式，如图11-29所示。（2）将文字图层栅格化。打开【马赛克】对话框。在对话框中对滤镜进行设置，如图11-30所示。应用滤镜，此时文字的效果，如图11-31所示。图11-31应用滤镜后效果图11-30对话框图11-29设置字符样式11.2.2创建标题（3）打开【图层样式】对话框。选中【描边】复选框，对其参数进行设置，如图11-32所示。（4）选中【投影】复选框，对其参数进行设置，如图11-33所示。此时文字效果如图11-34所示。图11-32【描边】图11-33【投影】图11-34应用后的文字效果11.2.2创建标题2．标题中“平面设计技巧详解”文字效果的创建（1）创建文字“平面设计技巧详解”，使用【字符】调板设置字符样式，如图11-35所示。（2）选【投影】、【内发光】、【斜面和浮雕】、【颜色叠加】，并分别对投影样式进行设置。创建的文字标题效果，如图11-36所示。图11-35创建文字并设置字符样式图11-36创建的文字标题效果11.2.3制作导航图标1．制作图标（1）打开图标1.jpg文件。选择【裁切工具】，对图片进行裁切操作，如图11-37所示。（2）打开【图像大小】对话框，在对话框中设置新图像的大小，如图11-38所示。单击【确定】按钮缩小图像，如图11-39所示。图11-37裁切素材图片图11-38【图像大小】设置图11-39缩小图像11.2.3制作导航图标（3）使用【移动工具】将缩小后的图像放置到当前处理的图像中，并在【图层】调板中将该图像所在的图层命名为“图标1”，如图11-40所示。图11-40放置图像11.2.3制作导航图标2．制作装饰线（1）创建一个新图层，命名为“图标1线条”。使用【钢笔工具】创建矢量路径，如图11-41所示。（2）在【画笔】调板中对画笔进行设置。这里将画笔笔尖的直径设置为1个像素，同时选中【形状动态】复选框，如图11-42所示。图11-41创建矢量路径图11-42设置画笔笔尖11.2.3制作导航图标（3）前景色为白色，【用画笔描绘路径】。在【路径】调板中将路径删除。在【图层】调板中将【图标1线条】图层放置到【图标1】图层的下方。此时的图像效果，如图11-43所示。3．制作其他图标效果：采用相同方式添加图标，并为图标添加装饰性线条，如图11-44所示。图11-43绘制线条图11-44添加其他图标11.2.4制作导航按钮按钮一般有正常状态、鼠标滑过状态、按下状态这3种状态。下面，介绍本实例中的导航按钮的制作。1．制作常态时的按钮（1）打开【新建】对话框，在【新建】对话框中对新建文档进行设置，如图11-45所示。图11-45【新建】对话框的设置11.2.4制作导航按钮（2）选择【圆角矩形工具】，在选项栏中对工具进行设置，如图11-46所示。使用该工具在新文档中绘制一个圆角矩形，如图11-47所示。（3）将路径转换为选区，用蓝色填充选区，如图11-48所示。图11-46选项栏中工具的设置图11-47绘制一个圆角矩形图11-48用蓝色填充选区11.2.4制作导航按钮（4）取消选区，为图层添加【投影】样式，其参数设置，如图11-49示。（5）为图层添加【描边】图层样式，如图11-50所示。图像的效果如图11-51所示。图11-49设置【投影】图11-50设置【描边】图11-51图像效果11.2.4制作导航按钮（6）选择【直排文字工具】，在图像中输入文字，并使用【字符】调板设置文字样式，如图11-52所示。（7）保存文件，完成第一个按钮的制作。图11-52创建文字并设置文字样式11.2.4制作导航按钮2．制作鼠标滑过状态按钮（1）在“按钮常态1.psd”文件中按Ctrl键单击【图层1】图层载入选区，如图11-53所示。（2）前景色设置为浅蓝色（其颜色值为R：197，G：223，B：249），使用【油漆桶工具】填充选区，如图11-54所示。图11-53载入选区图11-54填充选区11.2.4制作导航按钮3．制作鼠标按下状态按钮（1）打开“按钮常态1.psd”文件。【图层样式】对话框中取消选中【投影】，如图11-55所示。（2）此时图像的效果，如图11-56所示。将文件保存为“按钮按下1.psd”。至此，按钮1的3种状态按钮制作完成。图11-55取消【投影】复选框的选中图11-56取消【投影】样式效果后的图像效果11.2.4制作导航按钮4．其他按钮的制作（1）打开“按钮常态1.psd”文件，在按钮标签文字所在的图层中将文字改为新按钮的标签文字，并适当调整文字的大小，如图11-57所示。图11-57修改文字并调整文字大小11.2.4制作导航按钮（2）将文档保存为“按钮常态2.psd”完成第2个常态下的按钮制作。打开“按钮滑过1.psd”文件，将按钮标签改为“素材与源文件”，同样修改文字大小。（3）按相同的方法制作第2个按钮按下状态时的按钮。完成第2个按钮的制作。（4）按照上面介绍的方法完成本案例的其他2个按钮的制作，完成本案例的所有按钮的制作。11.2.4制作导航按钮5．圆形水晶按钮的制作（1）打开【新建】对话框，如图11-58所示。将文件保存为“水晶按钮常态.psd”。（2）在【工具箱】中选择【椭圆选框工具】在图像中绘制一个圆形选区，以蓝色的前景色填充选区，如图11-59所示。图11-58【新建】对话框的设置图11-59绘制圆形选区11.2.4制作导航按钮（3）取消选区。打开【图层样式】对话框，采用11.2.2小节中相同的步骤和设置为图层添加样式效果。再为图层添加一个【描边】效果，其参数设置，如图11-60所示。（4）此时获得一个水晶按钮，如图11-61所示。保存文件，完成水晶按