网页设计与网站建设-04利用Photoshop进行网页设计

《网页设计与网站建设》第4章利用PhotoshopCS5进行网页设计4.14.24.34.44.5设计网站首页界面设计网站Banner3.44.64.7网页草图的切片和导出PhotoshopCS5简介设计网站LOGO设计网站导航栏设计网站子页界面第4章利用PhotoshopCS5进行网页设计本章首先介绍了Photoshopcs5软件操作，通过多个图像和网页界面的设计过程，讲解如何利用Photoshop进行网页设计。【本章学习目的】通过本章的学习，读者能够：1.掌握Photoshopcs5软件基本操作2.掌握利用Photoshopcs5软件进行logo、导航栏、banner设计3.掌握利用Photoshopcs5软件进行网站首页和内容页界面的设计案例导入：

本章通过使用PhotoshopCS5设计西京食府网站（名称为虚拟）的banner、logo、导航栏、网站首页界面和子页界面等，详细介绍PhotoshopCS5在网页设计的不同阶段是如何处理各种不同类型图像的。4.1PhotoshopCS5简介AdobePhotoshop是一款功能强大的图像处理软件，由美国Adobe公司在1990年首次推出，在图像处理和电脑绘图领域中占据了重大地位。经过多次更新换代，功能不断增强与完善，最新推出的PhotoshopCS5，新增加了许多功能，如：流体画布旋转的功能，调整面板的改进，创新的3D与绘图合成等功能，使原有功能更加完善。Photoshop的应用领域很广泛，在图像、网页设计、视频、WEB出版各方面都有涉及。Photoshop的专长在于图像处理，而不是图形创作。主要用于平面设计、网页设计、绘画、标志设计、数码照片处理及一些后期处理等方面。PhotoshopCS5的工作界面由“菜单”栏、“属性”栏、“图像编辑”窗口、状态栏、工具箱、控制面板等组成。4.2设计网站LOGO

本节以西京食府logo设计实例入手，讲述如何利用PhotoshopCS5进行网站logo设计，逐一向读者展示Photoshop在网页设计的强大功能。

主要涉及以下知识点：新建文件、选取框工具的使用、填充选取框、选取框的羽化效果和调整边缘的设置、输入文本等。

操作步骤如下：1．新建文件：尺寸为1080*425像素2．绘制logo（1）新建图层：选择“矩形选择”工具，设置羽化值为15px，画一个合适大小的logo矩形外框。（2）填充底色。设置前景色为#561801，右击选择框，在弹出菜单中选择“填充”命令，在弹出的对话框中，内容选择前景色，单击“确定”按钮，如图4.5（a）所示。单击画布上方处属性栏的“调整边缘”按钮，将对比度调整为100%，选择输出到“新建图层”。（3）继续单击“矩形选择”工具，参数不变，单击logo中心点，创建一个和刚才大小一样的矩形外框，单击“矩形选择”工具，将羽化值从原来15px调整为0px。按下alt键，光标变为一个“+-”形状，在左侧最上方点从外及内，从上向下拖动光标，拖动的选区为原来矩形外框的一半，即删除掉矩形的左半部分；方法同（2）步骤，设置前景色为白色，将右半部分填充为白色。（4）输入logo文字部分。（5）完善logo。4.3设计网站导航栏

网站导航栏是网页设计中不可缺少的部分，导航栏的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到信息并管理信息，让用户在浏览网站过程中不至迷失。

主要涉及以下知识点：矢量图形工具的使用、标尺和辅助线的使用、添加节点、调整节点、图层样式的使用、素材的置入、矢量蒙版的使用、输入文本等。

操作步骤如下：1．新建文件：尺寸为820*100像素，2．绘制导航栏框架单击圆角矩形工具，半径为10，绘制导航栏框架，沿着圆角矩形的顶部和底部添加多条辅助线；单击“直接选择”工具，选中圆角矩形左上角边缘弧度的二个节点向上向左侧移动至辅助线位置，同理单击“直接选择”工具选中右上角边缘弧度的二个节点向上向右移动至辅助线位置，单击“添加节点”工具，在矩形的中心上下分别添加节点，拖动节点向中心靠拢，调整矩形弧度，最后将此图层命名为框架图层。2.美化框架1）置入背景素材“底纹.jpg”，命名图层为“底纹”。将底纹图像全部覆盖住导航栏框架，单击框架图层，将框架图层处的矢量蒙版标志拖至“底纹”图层，删除框架图层，保留底纹图层。3）右击底纹图层，在弹出菜单中选择“混合选项”命令，在“图层样式”对话框中，分别设置“浮面和斜雕”与“内阴影”。4）单击”横排文字“工具，选择字体颜色为#4c0b00,字体为楷体，输入导航栏文字内容。4.4设计网站Banner

网站banner是网站广告最直接的表现形式，通过网站banner的设计，突出强调网站的内容。

主要涉及以下知识点：素材的置入、图像布局及图层上下位置的调整、图像的自由变换、图层蒙版的使用、图层样式的使用、矢量蒙版的使用、特效字的制作、渐变颜色的设置等。

操作步骤如下：1．新建文件：907*425像素2．置入素材（1）依次置入泼墨窗户、花、佳肴、筷子、绿叶、星光、圆珠、云烟等素材，按下Ctrl+T组合键，拖动鼠标缩放图像的尺寸、调整素材和图层上下位置。（2）选中云烟图层，单击图层面板中“添加图层蒙版”按钮，然后选择渐变工具，使用渐变颜色为白色至黑色，在蒙版中，白色为不遮盖，黑色为全遮盖，自云烟图层的上方到下方拖动，实现图层的渐变隐藏。（3）在佳肴图层下方新建图层，选择“椭圆选择工具”，设置羽化为15像素，绘制一个和佳肴菜盘大小相当的椭圆选区，右击选区，填充颜色为灰色（#606060），实现图层底部阴影。3．输入广告语（1）单击文字工具，设置文字为方正隶二简体，输入文本“汇聚陕西民俗特色小吃”，调整汇聚字体为36号，其余文字为25号。（2）选择此文本图层，单击图层面板下方的图层样式向下黑色箭头，选择“混合选项”命令，进入“图层样式”对话框，选择“渐变叠加”，颜色渐变从#bb6e00到#571800到c77000（3）在“图层样式”对话框中再选择“描边”，为文本添加白色描边。4.5设计网站首页界面

在前面的章节已经制作了西京食府网站的logo、banner和导航栏，在本节里，需要制作的是一个网站完整的首页，通过实例，让大家更深入的了解一个网站页面的构成和设计，了解photoshop在网页设计中的一些常见功能和应用。主要涉及以下知识点：页面的布局、标尺与辅助线的使用、画笔的使用技巧、利用图层文件夹对图层进行管理、导入已设计好的PSD文件、置入素材、图像的自由变换、输入文本等。

操作步骤如下：1．新建文件：尺寸为1080*944像素。2．填充框架部分（1）新建图层，单击“矩形选择”工具，在网页的左侧绘制一个窄长形的矩形选取框，将前景色设置为#571800进行填充，复制此图层，放置于网页右侧，使两者对称。（2）单击文字工具，设置颜色为#571800，字体为宋体，字号为12点，输入“收藏|设为主页”，放置于网页的右上角。（3）单击文字工具，设置颜色为#858585，字体为楷体，字号为12点，输入底部导航与版权信息，放置于网页的底部居中。（4）新建图层，选择“画笔工具”，设置颜色为#571800，大小为3，笔触为柔边缘圆形，按下Shift键，在网页的底部绘制一条分割线，装饰网页。3．导入logo、banner、导航栏4．网站主体部分信息填充打开标尺，拖动辅助线，确定网页信息部分的四周边距。（1）优惠活动（2）置入菜品.jpg和设施.jpg，选择直排文字工具，颜色为黑色，字体为楷体，字号为17点，输入四至五种菜品名称，选中第一道特色菜，文本颜色为#c40800。4.6设计网站子页界面

在完成网站首页设计后，需要在其基础上，设计网站的子页，子页即网站的内容页。在子页的设计过程当中，可以和网站首页设计过程中一样，先将制作好的网站各部分依次导入，从而减少重复的工作量。

主要涉及以下知识点：页面的布局、导入已设计好的PSD文件、图像背景处理、置入素材、图层样式的使用、画笔的使用技巧、矢量工具的使用、节点添加、节点转换、节点调整、图层的链接、剪切蒙版的使用等。

操作步骤如下：1．新建文件：尺寸为1080*1911像素。2．填充框架部分3．导入logo、导航栏4．子页banner制作（1）从网站首页源文件中复制“汇聚陕西民俗特色小吃”文本；（2）置入古建筑.jpg素材，使用Ctrl+T组合键，将其缩放至合适大小，放置于banner位置，再置入闪光.jpg，缩放并放置合适位置；（3）单击文字工具，设置颜色为#6d5543，字体为楷体，字号为14点，输入菜品名称；（4）打开菜品.jpg，背景透明处理后复制至此。5．子页左侧导航栏制作（1）绘制导航栏底色。（2）绘制导航栏装饰条。（3）绘制菜品导航菜单。6．绘制主体部分背景、制作返回顶部按钮。7．填充主体部分4.7网页草图的切片和导出Photoshop中内置了切片工具，切片是最简单生成网页的方法之一，可将一个完整的网页切割许多小片，以便于图像和网页的上传与下载。通过导出为网页和图像后，可以用Dreamweaver软件进行网页的编辑。利用切片工具可以快速的进行图像的分割和网页的制作。（1）打开需要切片的网页界面图。（2）单击切片工具，对网页中需要单击链接的部分进行选中切割（3）右击切片区域，在弹出菜单中选择“编辑切片选项”命令，在弹出的“切片选项”对话框中可以对切片的属性进行调整和设置。（4）对网页上所有的按钮和链接都要进行一一切片，并设置相关参数。

（5）当切片编辑完成后，就可以输出图片为网页格式，单击“文件”→“存储为web和设备所有格式”命令，单击存储按钮，弹出“将优化结果存储为”窗口，选择格式为“HTML和图像”，选择保存的路径，单击“保存”按钮。本章小结本章主要介绍了利用Photoshop进行网页设计。1.PhotoshopCS5简介2.PhotoshopCS5的基本操作与主要功能3.利用PhotoshopCS5软件设计logo、导航栏、banner等4.利用PhotoshopCS5软件设计网站首页和网站子页练习题（1）Photoshop文档的扩展名是什么？它有什么特点？（2）Photoshop的主要的应用领域有哪些？（3）Photoshop与Fireworks相比，分析这两个软件的优劣势。（4）为什么要将网页界页