网页主图是一个网页的门面，它体现所在网页的整体风格。例如，如图所示是一个公司的主页，主页设计在很大程度上决定了整个网页的主体色彩、布局以及风格。因此，在网页设计时，一般应首先在Photoshop中网页设计主页图形。

设计网页主图是比较关键的环节，主图制作得好坏，将直接关系到能否吸引浏览者的注意力。一个优秀的主图寥寥几笔就能生动地勾画网站的特点。一般来说，主图的颜色必须与网页完美融合、有独特的创意，这是制作主图时必须注意的。另外，网页中的主图不仅要好看，还应恰当地表现网页主题思想、图像文件大小等要求。

提示：主图是多种多样的，它可以是一幅极具创意的特效图像，也可以是一个特别精致的小图，或者干脆整个网页就使用一幅大图，如图所示是两家类型和风格迥然不同的主页，网站主题、颜色和布局都不同，但主页中都使用了一幅大图，而这个简单漂亮的图形充分体现出了其网页的特色。

　制作主页头部标题和导航区域主页头部标题和导航区域具体操作如下。

第1步，启动Photoshop，新建文档，设置画布大小为1000像素×1000像素大小。选择【视图】|【标尺】命令，显示标尺刻度。

第2步，在左侧和顶部分别拖动辅助线，用辅助线勾画出页面布局的草图。

第3步，制作头部标题和导航区域。共分4个小步骤，第1步制作头部修饰边框，第2步制作头部渐变背景，第3步制作主导航按钮，第4步制作次导航按钮。

第4步，头部修饰边框需要自定义一块纹理图案。然后选择【编辑】|【定义图案】命令，把当前图案图像定义为Photoshop图案。

第5步，自定义图案越小越好，保存在同一文件夹中。用【矩形选框工具】绘制一个1004像素×28像素的长条矩形。

第6步，新建图层，选择【编辑】|【填充】命令，在【填充】对话框的【使用】下拉列表框中选择【图案】选项，然后选择上面定义好的背景图案。单击【确定】按钮，填充选区，制作顶部装饰条。

第7步，用【直线工具】绘制一条直线，在工具选项栏中设置填充颜色为#e4b5a6，粗细为4像素，然后按住Shift键，在顶部拉出一条直线。

第8步，新建图层，使用【渐变工具】在线条的下方应用渐变填充，渐变类型为直线渐变，颜色从白色到浅黄色。

第9步，关于导航按钮可以用文本制作，按钮间隔点为直线，并设置直线点线线型。

制作广告区

广告区主要是导入事先制作好的广告条，并输入装饰性的文字。

【操作步骤】

第1步，先制作好两条广告条。

第2步，在Photoshop中，选择【文件】|【置入】命令，在打开的【置入】对话框中选择上面的广告条。

第3步，按Ctrl+T快捷键，调整置入的图像大小，并使用【移动工具】调整位置。

第4步，用【文本工具】在广告条的图像中输入修饰性文本，如图9.11所示。

制作标题新闻区

标题新闻区位于主页的左侧，主要列表显示最新最重要的新闻标题，单击链接可以打开二级页面查看详细内容。

【操作步骤】

第1步，先导入栏目的标题背景图案，背景图案可以事先在Photoshop中制作完成。

第2步，再导入栏目图标，用文本输入标题和副标题。

第3步，在栏目标题的下面增加栏目间隔线和指示图标，其中间隔线设置为虚线显示，颜色为灰色。

第4步，复制该间隔线和指示图标，按向下方向键移动位置，重复多次操作，制作一序列间隔线和指示图标。

第5步，用圆角矩形绘制两个功能区，并导入装饰图标，用【文本工具】输入跳转按钮。

制作标题文字

在网页设计中，标题文字比较重要，因为标题文字设计得是否吸引人，将直接关系着网页的整体效果。而在设计标题文字时，除了名字好听、易懂、富有情趣之外，还要在文字效果的创意上下一番工夫，这样才能引起浏览者的注意。

文字的输入和编辑

第1步，用【椭圆工具】绘制路标指示牌前的图标，用文本输入路径提示文字。用【直线工具】绘制一条宽为69.9像素、大小为1像素的直线，颜色和上面文本颜色一致，全部为土黄色（#D98359）。再用【矩形工具】绘制一个长方形，长为69.9像素，高为4像素，填充色为浅青色（#456A9.C），和上面直线紧密排列在一起。

第2步，新建一个图层文件夹，命名为“主体区1”。用【文本工具】输入标题和内容英文字母，用圆角矩形工具绘制一个区域边框，并导入新闻图片。

第3步，绘制一条虚线作为信息分隔线，用【圆角矩形工具】绘制一个圆角矩形按钮，在【属性】面板中应用投影滤镜效果。

第4步，全部设计完毕，用鼠标拖动“主体区1”文件夹，复制该文件夹所有内容，并用方向键整体移动复制的文件夹内容。用此方式制作3个相同设计的图片新闻区。第5步，在次主体区域绘制两条直线，作为分隔线，并设置颜色，输入标题。