案例1：甜心烘焙坊的网页界面设计

案例1：甜心烘焙坊的网页界面设计

下面，以甜心烘焙坊网站的首页界面设计作为案例，学习利用Photoshop制作网页界面的流程和步骤，完成效果如图3-36所示。

图3-36

（1）画布设置

打开Photoshop CS软件，单击“文件”下拉菜单，选择“新建”命令（或者按下快捷键“Ctrl+N”），这时，会弹出一个对话框，在对应的选框中输入数值：将首页的宽度设定为“1000像素”，高度为“1200像素”，分辨率为“96像素/英寸”，颜色模式为“RGB颜色（8位）”，背景内容为“白色”（图3-37）。在PS的工作区即可显示出网页的白色背景。

图3-37

（2）页面背景图设置

页面背景图设置分为以下几个步骤。

①用鼠标单击“图层”下拉菜单，选择“新建”图层（或者按下快捷键“Ctrl+Shift+N”），选择“选区”工具中的矩形选区，按住鼠标左键进行拖动，拉出虚线选框（图3-38）。

图3-38

②选择PS工具栏最下方的“前景色/背景色”按钮，弹出颜色选择框，勾选“只有Web颜色”，选择合适的颜色，单击“确定”按钮，给虚线选框填充颜色（图3-39）。勾选“只有Web颜色”的目的在于将颜色选框的颜色范围界定在Web可显示的范围之内。

图3-39

③用同样的方式，选择另一种颜色填充在用鼠标拖出的竖条虚线框中。然后，同时按住键盘上的“Shift”键和“Alt”键，并单击鼠标左键进行拖动，多次复制，可得到如图3-40所示的色彩条效果。

图3-40

④底部的背景条设计。按预先构想，在同一图层上将网页的底部也设计成相应的效果，用鼠标左键单击工具栏的“T”字图标，输入设定的文字。将文字颜色设置为“深棕色”，单击“确定”按钮（图3-41）。效果如图3-42所示。

图3-41

(https://www.daowen.com)

图3-42

（3）导航按钮设置

在这个网站中，设计者预先设定了6个导航按钮，分别是“首页”“糕点名录”“人气推荐”“DIY展示”“烘焙常识”和“关于我们”。对于导航按钮的分配和内容，需要在网站策划阶段就做好相关划分。另外，在导航条之外，设计者还设置了两个非常人性化的导航按钮，分别是右上角的“在线订购”和“会员登录”。

用矩形选框工具拖出矩形框，填充前景色，再分别拖动鼠标，绘制出单独的导航按钮，并水平排列；单击文字按钮，分别输入“首页”“糕点名录”“人气推荐”“DIY展示”“烘焙常识”和“关于我们”6组文字，用移动工具使文字居中排列。至此，导航条设计完毕（图3-43）。

图3-43

（4）Banner设计

新建图层，命名为“Banner”。用矩形选框工具框选预留出的页面位置，用渐变填充工具选择“对称渐变”，从左至右拖动鼠标，完成渐变色填充。然后将需要的图片和文字填入相应的位置，用“自由变换”命令将元素调整至合适大小（图3-44）。

图3-44

（5）主图部分设置

在这个网页中，主图分为两个部分——上部的3个信息块和下部的糕点样式组图。

①按比例用鼠标框选出大小合适的矩形，单击“编辑”下拉菜单，选择“描边”命令，弹出如图3-45所示的对话框。将描边的宽度设定为“1px”，颜色选择前景色。

图3-45

②用鼠标拉出较窄的矩形，填充前景色，选择文字工具，单击鼠标左键，输入“优惠活动”，调整文字字号和颜色（图3-46）。

图3-46

③按照这样的步骤逐步完成3个信息块的设计，最后，将选好的糕点图片裁切为统一大小，按照预先设定的样式整齐排列，完成主图部分设置（图3-47）。

图3-47

现在，一个完整的首页就制作完成了，可以再进行适当的调整，完善网页界面设计的最终效果。