7.1 开天辟地软件的界面设计
效果预览
这次我们将一起来学习洪恩开天辟地系列软件界面的设计和制作方法，通过这样的实战制作我们可以清楚的了解到整个软件界面的每一步设计思路和制作流程，对我们的实际创作会很有帮助和启示。本实例综合应用了我们前面讲到的各种知识和技巧，从背景的设置到每一个按钮的制作都作了详细的讲解和思路的解剖。创作中，我们需要留意其中每一步的创作思路和设计方法，注意和以前所学过的基础知识结合起来思考。完成的作品如图7-1-1所示。
图 7-1- 1 效果预览
知识提要
◇ 透视变形的运用
◇ 路径的简单运用
◇ 图层样式效果的灵活使用
◇ 简单几何图形的绘制
制作步骤
7.1.1 制作背景图案
步骤1 创建新的图像文件
为了适应大多数用户的浏览习惯，我们的软件一般是在800×600的屏幕模式下开发的，所以软件的界面也应该按照这个规格来设计。于是，我们首先执行【文件】菜单中的【新建…】命令，或者按快捷键Ctrl+N，打开“新建”对话框，输入图像的名称为“开天辟地入门篇”，然后把图像的宽度设置为800像素；高度设置为600像素；图像模式设置为RGB颜色。完成后按【好】按钮，如图7-1-2所示。
图 7-1- 2 创建新文件
步骤2 创建图层分组并对其命名
用鼠标点击图层面板上的【创建新组】按钮，新建一个图层分组（如图7-1-3所示），随后双击图层分组缩览图的名称，将其改为“背景图案”，如图7-1-4所示。
图 7-1- 3 创建新的图层分组
图 7-1- 4 分组命名
提示：图层分组功能可以帮助我们有效的管理庞大的图层结构，这在一些拥有大量图层的设计中显得十分必要。它的用法十分简单，大家跟着看下去就知道了。
步骤3 制作背景颜色
接着我们按一下图层面板上的【创建新图层】按钮新建一个图层，这时，新建的图层会自动排列在我们刚刚新建的 “背景图案”中（如图7-1-5所示）。随后我们将前景色设置为灰色（＃E6E6E6）并按快捷键Alt+BackSpace用前景色填充图层。完成后的效果如图7-1-6所示。这作为我们软件界面的第一层底色，接下来我们会在这层底色的基础上再添加其他的画面元素。
提示：在创建了一个图层组后，我们所新建的所有图层都会自动排列在那个图层组中，直至我们再次新建一个图层组或者自己改变图层的叠放顺序为止。
图 7-1- 5 创建新图层
图 7-1- 6 填充图层
步骤4 调用素材图像
为了配合软件的主题构想，给人一种清新、自然和悦目的感觉，我们选择一幅蓝天白云的图片作为我们主要的背景图案。于是我们执行【文件】菜单中的【打开…】命令，或者按快捷键Ctrl+O，打开我们选择的素材图片，如图7-1-7所示。随后我们在工具箱中选择移动工具（或者按快捷键V）在素材图像窗口中点击并按住鼠标左键，将素材图片拖动到我们的界面设计窗口中并移动到合适的位置。位置放好了之后松开鼠标即可，现在我们看到的效果如图7-1-8所示。
小常识：大家在放置素材图片的时候要注意它对整个画面布局的影响，因为要判断一幅作品是否成功，它的排版布局的效果具有很大的影响，这也就是我们所说的构图。构图成功我们的作品也就成功了一半了！这个说起来简单，但是要做得好却要我们长时间的积累和体会。
图 7-1- 7 素材图片
图 7-1- 8 应用素材图片
步骤5 调用另一副素材图像
接下来我们打开一幅排满了方格的素材图片（如图7-1-9所示），用我们刚刚所说的方法将它拖动到界面设计的窗口中，随后我们使用魔术棒工具将方格图案中黑色方格的部分选中，再按Del键将所选的部分去掉，完成后按组合键Ctrl+D取消选区。这时我们看到如图7-1-10所示的效果。
图 7-1- 9 方格图片
图 7-1- 10
步骤6 对素材图片进行透视变形处理
现在开始对刚刚处理好的素材图片进行透视变形的处理，这样做可以使画面看起来具有强烈的空间感。执行【编辑】|【变换】|【透视】命令进入透视变换编辑状态，这时我们可以通过拖动图片边角上的几个控制点来使图像产生透视变形（如图7-1-11所示）。我们最终将图像变形成如图7-1-12所示的样子，然后按Enter键结束透视变换编辑状态。
提示：刚学Photoshop的时候透视变换的编辑会有点困难，它还需要一定的理论知识作为基础，大家可以自己多试试多练练，体会一下其中的窍门。
图 7-1- 11
图 7-1- 12 透视变形
步骤7 制作图像渐隐效果
为了让方格的效果自然的融入到我们的背景图案中，我们用图层蒙版做一个图像渐隐的效果。首先我们点击图层面板中的【添加蒙板】按钮（如图7-1-13所示），随后在工具箱中选择渐变工具（或者按快捷键G），在图像中从右上角往左下角拉出一个由黑到白的渐变，这样图像渐隐的效果就出来了，如图7-1-14所示。
小技巧：创建了图层蒙板之后，我们的编辑会自动在蒙板上进行，所以我们制作的渐变效果就变成了蒙板的渐变，这样就得到图像渐隐的效果了。
图 7-1- 13 创建图层蒙板
图 7-1- 14 图层渐隐效果
步骤8 制作半透明图像区域
现在我们的背景效果基本上已经做出来了，为了让背景的图案不至于抢了画面的焦点，我们做一个白色半透明的图层来控制一下画面的整体效果，这样做也可以划分一下界面的布局，使效果看起来更加严谨和统一。首先点击图层面板上的创建新图层按钮创建一个新图层（如图7-1-15所示），然后选择工具箱中的矩形选框工具（或者按快捷键M）贴着画面的左右两边制作一个矩形选区（如图7-1-16所示）。完成后将前景色设置为白色并按快捷键Alt+BackSpace用白色填充选区。最后在图层面板上将图层的不透明度设置为30％（如图7-1-17所示）即可。现在我们看到的效果如图7-1-18所示。
图 7-1- 15 创建新图层
图 7-1- 16 建立选区
图 7-1- 17 改变不透明度
图 7-1- 18 改变不透明度后的效果
7.1.2 装饰效果的制作
步骤9 创建新的图层组并对其命名
现在的背景图案看起来还是单调了一些，我们可以想办法增加一些动感和立体的元素进去。怎么做呢？首先，我们点击图层面板上的【创建新组】按钮，新建一个图层分组并将它命名为“装饰效果”（如图7-1-19所示）。随后点击面板上的【创建新图层】按钮，新建一个图层，如图7-1-20所示。
图 7-1- 19 创建并命名图层组
图 7-1- 20 创建新图层
步骤10 制作随机线条
如图7-1-21所示在工具箱中选择直线工具（快捷键U），然后在直线工具选项栏中选择“填充象素”选项（如图7-1-22所示），在图像中随意画一些长短不一的直线段，效果如图7-1-23所示。
图 7-1- 21 选择直线工具
图 7-1- 22 选择“填充象素”选项
图 7-1- 23 绘画随机线条
步骤11 制作动感线条效果
执行【滤镜】|【模糊】|【动感模糊…】命令打开“动感模糊”滤镜对话框。在这里将“角度”设置为0；“距离”设置为300（如图7-1-24所示）。完成后我们会得到如图7-1-25所示的效果。
提示：动感模糊滤镜可以帮助我们做出运动、活跃的画面效果，这里是其中一个应用。
图 7-1- 24 设置动感模糊滤镜
图 7-1- 25 动感模糊后的效果
返回 Photoshop入门与进阶实例 专题 | 返回 Photoshop教程 栏目 | 返回 精选专题 列表
步骤12 制作轮廓路径
接下来我们对界面的边角处做一些修饰，是画面看起来更加舒服和自然。设想把画面的右上角变成立体内凹的天空会是个什么效果呢？我们马上来试试看。首先回到我们一开始打开的那幅天空素材图片，然后如图7-1-26所示在工具箱中选择钢笔工具（或者按快捷键P），选择素材图片中较为漂亮的部分，在上面建立如图7-1-27所示的路径效果。
图 7-1- 26 选择钢笔工具
图 7-1- 27 制作路径
步骤13 利用轮廓路径调用素材图像
接着我们打开路径面板，在上面点击【将路径转化为选区】按钮（如图7-1-28所示）。这时我们得到如图7-1-29所示的选择效果。继续执行【编辑】|【拷贝】命令（或者按快捷键Ctrl+C）将选区中的内容调入剪贴板。随后返回我们设计界面的图像窗口执行【编辑】|【粘贴】命令（或者按快捷键Ctrl+V）将刚刚选区中的内容调入到当前的图像中，并自动新建一个图层，效果如图7-1-30和图7-1-31所示。
小技巧：通过拷贝和粘贴的操作我们也可以调用素材图片，而且有时候应用起来会比拖动操作来的更加方便。
图 7-1- 28将路径转化为选区
图 7-1- 29 当前的选区效果
图 7-1- 30 将图片调入
图 7-1- 31 自动新建图层
步骤14 制作立体内凹效果
现在我们的图片已经有了，怎么将它变成立体内凹的效果呢？请看！双击刚刚新建的素材图层缩览图（如图7-1-32所示）打开图层样式对话框，在这里选择左边的“内阴影”样式，将它的各项参数设置成如图7-1-33所示的效果。完成后按【好】按钮结束操作，我们即可看到如图7-1-34所示的效果，怎么样？很神奇吧！
图 7-1- 32 双击图层缩览图
图 7-1- 33 设置内阴影样式
图 7-1- 34 运用图层样式后的效果
步骤15 制作另外一幅内凹图像
接下来我们画面的对左下角如法炮制，找一幅不同的图片来处理，完成后我们可以看到如图7-1-35所示的效果。这样界面装饰效果的制作也就基本完成了。
图 7-1- 35 处理左下角的效果
7.1.3 软件标题的处理
标题的处理要求简练夺目，我们可以考虑对标题文字进行一些框线的修饰以及特效处理来达到醒目突出的视觉效果。一起来看看怎么做吧！
步骤16 制作正方形色块
首先我们选择工具箱中的矩形选框工具（或者按快捷键M），随后新建一个图层（如图7-1-36所示），在这个图层上制作一个正方形的选区并用白色填充，完成后取消选区，效果如图7-1-37所示。
提示：矩形选框工具可以方便的制作出一些轮廓简单的几何图形，大家留意一下它的用法。
图 7-1- 36 创建新图层
图 7-1- 37 绘制小正方形
步骤17 制作不同大小的色块
用类似上一步的操作，制作一个边长较小的黑色正方形并移动到如图7-1-38所示的位置。跟着再来，制作一个褐色的小长方形，并移动到如图7-1-39所示的位置。随后将这个褐色小长方形的不透明度调整为80％（如图7-1-40所示），并对它进行描边的操作，得到一个具有1象素边框的半透明褐色长方形。完成后，我们可以看到如图7-1-41所示的效果。
图 7-1- 38 制作黑色正方形
图 7-1- 39 制作褐色长方形
图 7-1- 40 调整图层不透明度
图 7-1- 41 完成后的效果
步骤18 完成修饰图形并输入标题文字
我们打算在这里输入“入门篇”三个字，于是我们将刚刚弄好的线框造型复制三次并对齐，得到如图7-1-42所示的效果。跟着我们选择工具箱中的文字工具（或者按快捷键T），在相应的工具选项栏中设置好字体和大小，然后即可在图像中输入文字。完成后我们可以得到如图7-1-43所示的效果。
图 7-1- 42 将复制图层复制3次
图 7-1- 43 输入文字
步骤19 添加修饰线条
为了让软件标题显得更加活泼和突出，我们再在标题的旁边制作一些修饰性的线条效果。为了观察方便，我们先将制作好的小标题隐藏掉。首先，我们着用钢笔工具在画面中勾勒出如图7-1-44所示的路径效果。随后新建一个图层，打开路径面板，点击上面的【用笔刷填充路径】按钮（如图7-1-45所示）完成路径填充的操作。现在我们会看到如图7-1-46所示的效果。
图 7-1- 44
图 7-1- 45
图 7-1- 46
步骤20 放射线条的制作
现在我们再来添加一些具有动感效果的线条。首先我们运用本例中第十步和第十一步介绍的方法制作一条长短适中的白色动感直线（如图7-1-47所示），随后按组合键Ctrl+Alt+T对线条进行复制变形的操作（如图7-1-48所示），多次重复上面的复制变形操作并将线条移动到合适的位置我们就可以制作出方向各异的动感线条效果，如图7-1-49所示。最后我们再用画笔工具加上一些简单的线圈图案修饰就可以得到我们需要的装饰效果了。现在重新打开刚刚隐藏掉的小标题，我们会看到如图7-1-50所示的效果，这样看起来舒服多了吧？
图 7-1- 47
图 7-1- 48
图 7-1- 49
图 7-1- 50
提示：这一步的操作有比较大的随意性，我们的修饰线条可以是千姿百态的，只要最终能够达到丰富画面的效果就可以了。
步骤21 添加特效文字标题
首先我们选择工具箱中的文字工具（或者按快捷键T），在工具选项栏中我们将字体设置为“华文行楷”；大小设置为48pt（如图7-1-51所示），随后在图像中输入“开天辟地 ///”的字样（如图7-1-52所示）。接下来我们就可以运用前面学过的文字特效的制作方法，对“开天辟地 ///”文字标题进行处理，完成后我们将文字移动到合适的位置，效果如图7-1-53所示。这样，软件标题的制作也就完成了。
图 7-1- 51
图 7-1- 52
图 7-1- 53 创建标题文字
7.1.4 学习进度按钮的制作
为了表现我们使用这个软件进行学习的阶段性，我们需要在软件的界面中添加一些学习进度按钮。下面我们就一起来看看制作的过程。
步骤22 制作正圆色块
第一步我们需要建立一个表示阶段编号的按钮，在开始之前我们先创建一个图层组并命名为“进度按钮”（如图7-1-54所示）。接下来创建一个新图层，然后选择工具箱中的椭圆选框工具（快捷键M），在图像中建立一个如图7-1-55所示的选区并按快捷键Alt+BackSpace用前景色填充。完成后效果如图7-1-56所示。
小技巧：记得常用快捷键，这样就不用老是在繁琐的菜单里忙着找命令了。
图 7-1- 54 新建图层组
图 7-1- 55 建立选区
图 7-1- 56 填充选区
步骤23 设置圆形色块的图层样式效果
跟着我们调整一下编号按钮的样式。双击图层缩览图打开图层样式对话框，然后分别“投影”、“内投影”、“颜色叠加”以及“描边”样式。各参数的设置如图7-1-57至图7-1-60所示。完成后我们将得到如图7-1-61所示的效果。
提示：图层样式功能看起来参数多多，不过用起来一点都不麻烦，反而极大的提高了我们的工作效率！
图 7-1- 57 设置投影样式
图 7-1- 58设置内投影样式
图 7-1- 59设置颜色叠加样式
图 7-1- 60设置描边样式
图 7-1- 61 图层样式处理后的效果
步骤24 导入按钮图片
接下来我们打开一张按钮的素材图片（如图7-1-62所示），将它拖放到软件界面的图像中并移动到合适的位置。完成后的效果如图7-1-63所示。
图 7-1- 62
图 7-1- 63
步骤25 加入直线完成按钮的造型
为了使按钮的结构看起来更加统一，我们用一条直线将编号部分和按钮部分链接起来，完成后我们可以看到如图7-1-64所示的效果。现在整个按钮的造型已经完成了。
图 7-1- 64 加入链接线条
步骤26 输入文字内容并完成其他相同按钮的制作
现在我们可以开始输入文字了，设置好字体、大小以及颜色之后，我们分别在编号和进度提示按钮两个地方输入文字。得到如图7-1-65所示的效果。接下来我们如法炮制，把余下的所有按钮都制作出来，最终得到如图7-1-66所示的效果。
图 7-1- 65 输入文字
图 7-1- 66 制作其余的进度按钮
7.1.5 公司标志和导航按钮的制作
公司标志和导航按钮是一个软件界面中必备的两个要素，我们现在就来看看它们的制作过程。
步骤27 制作线条造型
首先我们用索套工具以及多边形工具等绘图工具制作出如图7-1-67所示的线条造型，注意左边留空的两个空白的区域，这是留作放公司的标志用的。
提示：绘图工具的应用可以千变万化，多看看多练练我们才会有进步喔！
图 7-1- 67 建立线条造型
步骤28 调入公司标志
造型弄好了之后我们打开公司的标志图片，然后选择移动工具（如图7-1-68所示）将标志拖放到我们的界面设计图中并移动到合适的位置，这时我们看到如图7-1-69所示的效果。
图 7-1- 68 选择移动工具
图 7-1- 69 加入公司按钮
步骤29 添加3D按钮
随后我们找来两个用3D软件制作的导航按钮，同样用移动工具将它们放置到合适的位置（如图7-1-71所示），这样整个软件的界面设计就完成了，我们最终会看到如图7-1-71所示的效果。
提示：在进行一些比较大型的设计创作的时候，我们通常会需要其他软件的帮助，特别是一些三维软件，它们能够使创作变得更加简单和出色。
图 7-1- 70 加入导航按钮
图 7-1- 71 最终效果
