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

1、网页设计网页设计与网站建设与网站建设第第4 4章章 利用利用PhotoshopPhotoshop CS5 CS5进行进行网页设计网页设计 4.1 4.24.3 4.44.5设计设计网站首页网站首页界面界面设计网站设计网站Banner3.44.64.7网页草图的切片和导出网页草图的切片和导出Photoshop CS5简介简介设计网站设计网站LOGO设计网站导航栏设计网站导航栏设计设计网站网站子页界面子页界面第第4 4章章 利用利用PhotoshopPhotoshop CS5 CS5进行进行网页设计网页设计本章首先介绍了本章首先介绍了Photoshop cs5软件操作，通过多个图软件操作，通过多个

2、图像和网页界面的设计过程，讲解如何利用像和网页界面的设计过程，讲解如何利用Photoshop进进行网页设计。行网页设计。【本章学习目的】【本章学习目的】通过本章的学习，读者能够：通过本章的学习，读者能够：1. 掌握掌握Photoshop cs5软件基本操作软件基本操作2. 掌握利用掌握利用Photoshop cs5软件进行软件进行logo、导航、导航栏栏、banner设计设计3. 掌握利用掌握利用Photoshop cs5软件进行网站首页和内容页软件进行网站首页和内容页界面的设计界面的设计案例导入：案例导入：本章通过使用本章通过使用Photoshop CS5Photoshop CS5设计西京食

3、府网站（名称为虚拟）的设计西京食府网站（名称为虚拟）的bannerbanner、logologo、导航、导航栏、网站首页界面和子页界面等，详细介绍栏、网站首页界面和子页界面等，详细介绍Photoshop CS5Photoshop CS5在网页设计的不同阶段在网页设计的不同阶段是如何处理各种不同类型图像的。是如何处理各种不同类型图像的。4.1 Photoshop CS5简介简介Adobe PhotoshopAdobe Photoshop是一款功能强大的图像处理软件，由美国是一款功能强大的图像处理软件，由美国AdobeAdobe公司在公司在19901990年首次推出，在图像处理和电脑绘图领域中占据

4、了重大地位。经年首次推出，在图像处理和电脑绘图领域中占据了重大地位。经过多次更新换代，功能不断增强与完善，最新推出的过多次更新换代，功能不断增强与完善，最新推出的Photoshop CS5Photoshop CS5，新增加了许多功能，如：流体画布旋转的功能，调整面板的改进，新增加了许多功能，如：流体画布旋转的功能，调整面板的改进，创新的创新的3D3D与绘图合成等功能，使原有功能更加完善。与绘图合成等功能，使原有功能更加完善。PhotoshopPhotoshop的应用领域很广泛，在图像、网页设计、视频、的应用领域很广泛，在图像、网页设计、视频、WEBWEB出版各方出版各方面都有涉及。面都有涉及。

5、PhotoshopPhotoshop的专长在于图像处理，而不是图形创作。主的专长在于图像处理，而不是图形创作。主要用于平面设计、网页设计、绘画、标志设计、数码照片处理及一些要用于平面设计、网页设计、绘画、标志设计、数码照片处理及一些后期处理等方面。后期处理等方面。Photoshop CS5的工作界面由“菜单”栏、“属性”栏、“图像编辑”窗口、状态栏、工具箱、控制面板等组成。4.2 设计网站设计网站LOGO 本节以西京食府本节以西京食府logologo设计实例入手，讲述如何利用设计实例入手，讲述如何利用Photoshop Photoshop CS5CS5进行网站进行网站logologo设计，逐一

6、向读者展示设计，逐一向读者展示PhotoshopPhotoshop在网页设计的强在网页设计的强大功能。大功能。 主要涉及以下知识点：新建文件、选取框工具的使用、填充选主要涉及以下知识点：新建文件、选取框工具的使用、填充选取框、选取框的羽化效果和调整边缘的设置、输入文本等。取框、选取框的羽化效果和调整边缘的设置、输入文本等。操作步骤如下：操作步骤如下：1新建文件：尺寸为新建文件：尺寸为1080*425像素像素2绘制绘制logo（1）新建图层：选择）新建图层：选择“矩形选择矩形选择”工具工具 ，设置羽化值为，设置羽化值为15px，画一，画一个合适大小的个合适大小的logo矩形外框。矩形外框。（2）

7、填充底色。设置前景色为）填充底色。设置前景色为#561801，右击选择框，在弹出菜单，右击选择框，在弹出菜单中选择中选择“填充填充”命令，在弹出的对话框中，内容选择前景色，单击命令，在弹出的对话框中，内容选择前景色，单击“确定确定”按钮，如图按钮，如图4.5（a）所示。单击画布上方处属性栏的）所示。单击画布上方处属性栏的“调整调整边缘边缘”按钮，将对比度调整为按钮，将对比度调整为100%，选择输出到，选择输出到“新建图层新建图层”。（3）继续单击）继续单击“矩形选择矩形选择”工具，参数不变，单击工具，参数不变，单击logo中心点，创建中心点，创建一个和刚才大小一样的矩形外框，单击一个和刚才大小

8、一样的矩形外框，单击“矩形选择矩形选择”工具，将羽化值工具，将羽化值从原来从原来15px调整为调整为0px。按下。按下alt键，光标变为一个键，光标变为一个“+-”形状，形状，在左侧最上方点从外及内，从上向下拖动光标，拖动的选区为原来矩在左侧最上方点从外及内，从上向下拖动光标，拖动的选区为原来矩形外框的一半，即删除掉矩形的左半部分；方法同（形外框的一半，即删除掉矩形的左半部分；方法同（2）步骤，设置）步骤，设置前景色为白色，将右半部分填充为白色。前景色为白色，将右半部分填充为白色。（4）输入）输入logo文字部分。文字部分。（5）完善）完善logo。4.3 设计网站导航栏设计网站导航栏 网站导

9、航栏是网页设计中不可缺少的部分，导航栏的目的是让网站导航栏是网页设计中不可缺少的部分，导航栏的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到信息并管理信息，让用户在浏览网站过程中不至迷失。力地找到信息并管理信息，让用户在浏览网站过程中不至迷失。 主要涉及以下知识点：矢量图形工具的使用、标尺和辅助线的主要涉及以下知识点：矢量图形工具的使用、标尺和辅助线的使用、添加节点、调整节点、图层样式的使用、素材的置入、矢量使用、添加节点、调整节点、图层样式的使用、素材的置入、矢量蒙版的使用、输入文本等。蒙版的使用、输入文本

10、等。操作步骤如下：操作步骤如下：1新建文件：尺寸为新建文件：尺寸为820*100像素，像素，2绘制导航栏框架绘制导航栏框架 单击圆角矩形工具单击圆角矩形工具 ，半径为，半径为10，绘制导航栏框架，沿着圆角矩，绘制导航栏框架，沿着圆角矩形的顶部和底部添加多条辅助线；单击形的顶部和底部添加多条辅助线；单击“直接选择直接选择”工具工具 ，选中圆，选中圆角矩形左上角边缘弧度的二个节点向上向左侧移动至辅助线位置，同角矩形左上角边缘弧度的二个节点向上向左侧移动至辅助线位置，同理单击理单击“直接选择直接选择”工具选中右上角边缘弧度的二个节点向上向右移工具选中右上角边缘弧度的二个节点向上向右移动至辅助线位置，

11、单击动至辅助线位置，单击“添加节点添加节点”工具工具 ，在矩形的中心上下分别，在矩形的中心上下分别添加节点，拖动节点向中心靠拢，调整矩形弧度，最后将此图层命名添加节点，拖动节点向中心靠拢，调整矩形弧度，最后将此图层命名为框架图层。为框架图层。2.美化框架美化框架1）置入背景素材）置入背景素材“底纹底纹.jpg”，命名图层为，命名图层为“底纹底纹”。将底纹图像全。将底纹图像全部覆盖住导航栏框架，单击框架图层，将框架图层处的矢量蒙版标志部覆盖住导航栏框架，单击框架图层，将框架图层处的矢量蒙版标志 拖至拖至“底纹底纹”图层，删除框架图层，保留底纹图层。图层，删除框架图层，保留底纹图层。3）右击底纹图

12、层，在弹出菜单中选择）右击底纹图层，在弹出菜单中选择“混合选项混合选项”命令，在命令，在“图层样图层样式式”对话框中，分别设置对话框中，分别设置“浮面和斜雕浮面和斜雕”与与“内阴影内阴影”。4）单击）单击”横排文字横排文字“工具工具 ，选择字体颜色为，选择字体颜色为#4c0b00,字体为楷体，字体为楷体，输入导航栏文字内容。输入导航栏文字内容。4.4 设计网站设计网站Banner 网站网站bannerbanner是网站广告最直接的表现形式，通过网站是网站广告最直接的表现形式，通过网站bannerbanner的设计，的设计，突出强调网站的内容。突出强调网站的内容。 主要涉及以下知识点：素材的置入

13、、图像布局及图层上下位置的调整主要涉及以下知识点：素材的置入、图像布局及图层上下位置的调整、图像的自由变换、图层蒙版的使用、图层样式的使用、矢量蒙版的使用、图像的自由变换、图层蒙版的使用、图层样式的使用、矢量蒙版的使用、特效字的制作、渐变颜色的设置等。、特效字的制作、渐变颜色的设置等。操作步骤如下：操作步骤如下：1新建文件：新建文件：907*425像素像素2置入素材置入素材（1）依次置入泼墨窗户、花、佳肴、筷子、绿叶、星光、圆珠、云烟等素材，）依次置入泼墨窗户、花、佳肴、筷子、绿叶、星光、圆珠、云烟等素材，按下按下Ctrl+T组合键，拖动鼠标缩放图像的尺寸、调整素材和图层上下位置组合键，拖动鼠

14、标缩放图像的尺寸、调整素材和图层上下位置。（2）选中云烟图层，单击图层面板中）选中云烟图层，单击图层面板中“添加图层蒙版添加图层蒙版” 按钮，然后选择按钮，然后选择 渐变渐变工具，使用渐变颜色为白色至黑色，在蒙版中，白色为不遮盖，黑色为全遮工具，使用渐变颜色为白色至黑色，在蒙版中，白色为不遮盖，黑色为全遮盖，自云烟图层的上方到下方拖动，实现图层的渐变隐藏。盖，自云烟图层的上方到下方拖动，实现图层的渐变隐藏。（3）在佳肴图层下方新建图层，选择）在佳肴图层下方新建图层，选择“椭圆选择工具椭圆选择工具” ，设置羽化为，设置羽化为15像素像素，绘制一个和佳肴菜盘大小相当的椭圆选区，右击选区，填充颜色为

15、灰色（，绘制一个和佳肴菜盘大小相当的椭圆选区，右击选区，填充颜色为灰色（#606060），实现图层底部阴影。），实现图层底部阴影。3输入广告语输入广告语（1）单击文字工具）单击文字工具 ，设置文字为方正隶二简体，输入文本，设置文字为方正隶二简体，输入文本“汇聚陕西民俗特汇聚陕西民俗特色小吃色小吃”，调整汇聚字体为，调整汇聚字体为36号，其余文字为号，其余文字为25号。号。（2）选择此文本图层，单击图层面板下方的图层样式）选择此文本图层，单击图层面板下方的图层样式 向下黑色箭头，选择向下黑色箭头，选择“混合选项混合选项”命令，进入命令，进入“图层样式图层样式”对话框，选择对话框，选择“渐变叠加渐

16、变叠加”，颜色渐变，颜色渐变从从#bb6e00到到#571800到到c77000（3）在）在“图层样式图层样式”对话框中再选择对话框中再选择“描边描边”，为文本添加白色描边。，为文本添加白色描边。4.5 设计网站首页界面设计网站首页界面 在前面的章节已经制作了西京食府网站的在前面的章节已经制作了西京食府网站的logologo、bannerbanner和导航栏，在和导航栏，在本节里，需要制作的是一个网站完整的首页，通过实例，让大家更深本节里，需要制作的是一个网站完整的首页，通过实例，让大家更深入的了解一个网站页面的构成和设计，了解入的了解一个网站页面的构成和设计，了解photoshopphoto

17、shop在网页设计中的在网页设计中的一些常见功能和应用。一些常见功能和应用。主要涉及以下知识点：页面的布局、标尺与辅助线的使用、画笔的使用技主要涉及以下知识点：页面的布局、标尺与辅助线的使用、画笔的使用技巧、利用图层文件夹对图层进行管理、导入已设计好的巧、利用图层文件夹对图层进行管理、导入已设计好的PSDPSD文件、置入文件、置入素材、图像的自由变换、输入文本等。素材、图像的自由变换、输入文本等。操作步骤如下：操作步骤如下：1新建文件：尺寸为新建文件：尺寸为1080*944像素。像素。2填充框架部分填充框架部分（1）新建图层，单击）新建图层，单击“矩形选择矩形选择”工具工具 ，在网页的左侧绘制

18、一个窄长形的矩，在网页的左侧绘制一个窄长形的矩形选取框，将前景色设置为形选取框，将前景色设置为#571800进行填充，复制此图层，放置于网页进行填充，复制此图层，放置于网页右侧，使两者对称。右侧，使两者对称。（2）单击文字工具）单击文字工具 ，设置颜色为，设置颜色为#571800，字体为宋体，字号为，字体为宋体，字号为12点，输点，输入入“收藏收藏|设为主页设为主页”，放置于网页的右上角。，放置于网页的右上角。（3）单击文字工具）单击文字工具 ，设置颜色为，设置颜色为#858585，字体为楷体，字号为，字体为楷体，字号为12点，输点，输入底部导航与版权信息，放置于网页的底部居中。入底部导航与版

19、权信息，放置于网页的底部居中。（4）新建图层，选择）新建图层，选择“画笔工具画笔工具” ，设置颜色为，设置颜色为#571800，大小为，大小为3，笔触，笔触为柔边缘圆形，按下为柔边缘圆形，按下Shift键，在网页的底部绘制一条分割线，装饰网页。键，在网页的底部绘制一条分割线，装饰网页。3导入导入logo、banner、导航栏、导航栏4网站主体部分信息填充网站主体部分信息填充打开标尺，拖动辅助线，确定网页信息部分的四周边距。打开标尺，拖动辅助线，确定网页信息部分的四周边距。（1）优惠活动）优惠活动（2）置入菜品）置入菜品.jpg和设施和设施.jpg，选择直排文字工具，颜色为黑色，字体为楷，选择直

20、排文字工具，颜色为黑色，字体为楷体，字号为体，字号为17点，输入四至五种菜品名称，选中第一道特色菜，文本颜色为点，输入四至五种菜品名称，选中第一道特色菜，文本颜色为#c40800。4.6 设计网站子页界面设计网站子页界面 在完成网站首页设计后，需要在其基础上，设计网站的子页，子页即在完成网站首页设计后，需要在其基础上，设计网站的子页，子页即网站的内容页。在子页的设计过程当中，可以和网站首页设计过程中网站的内容页。在子页的设计过程当中，可以和网站首页设计过程中一样，先将制作好的网站各部分依次导入，从而减少重复的工作量。一样，先将制作好的网站各部分依次导入，从而减少重复的工作量。 主要涉及以下知识

21、点：页面的布局、导入已设计好的主要涉及以下知识点：页面的布局、导入已设计好的PSDPSD文件、图文件、图像背景处理、置入素材、图层样式的使用、画笔的使用技巧、矢量工像背景处理、置入素材、图层样式的使用、画笔的使用技巧、矢量工具的使用、节点添加、节点转换、节点调整、图层的链接、剪切蒙版具的使用、节点添加、节点转换、节点调整、图层的链接、剪切蒙版的使用等。的使用等。操作步骤如下：操作步骤如下：1新建文件：尺寸为新建文件：尺寸为1080*1911像素。像素。2填充框架部分填充框架部分3导入导入logo、导航栏、导航栏4子页子页banner制作制作（1）从网站首页源文件中复制）从网站首页源文件中复制“

22、汇聚陕西民俗特色小吃汇聚陕西民俗特色小吃”文本；文本；（2）置入古建筑）置入古建筑.jpg素材，使用素材，使用Ctrl+T组合键，将其缩放至合适大小，放置组合键，将其缩放至合适大小，放置于于banner位置，再置入闪光位置，再置入闪光.jpg，缩放并放置合适位置；，缩放并放置合适位置；（3）单击文字工具）单击文字工具 ，设置颜色为，设置颜色为#6d5543，字体为楷体，字号为，字体为楷体，字号为14点，输点，输入菜品名称；入菜品名称；（4）打开菜品）打开菜品.jpg，背景透明处理后复制至此。，背景透明处理后复制至此。5子页左侧导航栏制作子页左侧导航栏制作（1）绘制导航栏底色。）绘制导航栏底色。

23、（2）绘制导航栏装饰条。）绘制导航栏装饰条。（3）绘制菜品导航菜单。）绘制菜品导航菜单。6绘制主体部分背景、制作返回顶部按钮。绘制主体部分背景、制作返回顶部按钮。7填充主体部分填充主体部分4.7 网页草图的切片和导出网页草图的切片和导出 Photoshop Photoshop中内置了切片工具，切片是最简单生成网页的方法之一，可将一个中内置了切片工具，切片是最简单生成网页的方法之一，可将一个完整的网页切割许多小片，以便于图像和网页的上传与下载。通过导出为网页完整的网页切割许多小片，以便于图像和网页的上传与下载。通过导出为网页和图像后，可以用和图像后，可以用DreamweaverDreamweav

24、er软件进行网页的编辑。利用切片工具可以快速软件进行网页的编辑。利用切片工具可以快速的进行图像的分割和网页的制作。的进行图像的分割和网页的制作。 （1 1）打开需要切片的网页界面图。）打开需要切片的网页界面图。 （2 2）单击切片工具）单击切片工具 ，对网页中需要单击链接的部分进行选中切割，对网页中需要单击链接的部分进行选中切割 （3 3）右击切片区域，在弹出菜单中选择）右击切片区域，在弹出菜单中选择“编辑切片选项编辑切片选项”命令，在弹出的命令，在弹出的“切片选项切片选项”对话框中可以对切片的属性进行调整和设置。对话框中可以对切片的属性进行调整和设置。 （4 4）对网页上所有的按钮和链接都要进行一一切片，并设置相关参数。）对网页上所有的按钮和链接都要进行一一切片，并设置相关参数。 （5 5）当切片编辑完成后，就可以输出图片为网页格式，单击）当切片编辑完成后，就可以输出图片为网页格式，单击“文件文件”“”“存存储为储为webweb和设备所有格式和设备所有格式”命令，单击存储按钮，弹出命令，单击存储按钮，弹出“将优化结果存储为将优化结果存储为”窗口，选择格式为窗口，选择格式为“HTM