平面设计与制作第13章.ppt

1、第第1313章章 网页设计网页设计13.1 13.1 网页设计基础网页设计基础12313.2 13.2 网页设计流程网页设计流程13.3 13.3 商务网页设计实例商务网页设计实例目录目录 网页的设计与制作少不了对图形图像的制作和加工，这就需网页的设计与制作少不了对图形图像的制作和加工，这就需要用到专门的图像处理软件。要用到专门的图像处理软件。Photoshop CS4Photoshop CS4是一款功能强大的图是一款功能强大的图像处理软件，由于它的界面简洁友好，可操作性强，可以和绝大像处理软件，由于它的界面简洁友好，可操作性强，可以和绝大多数的软件进行完美的整合，所以备受广大图形设计爱好者和

2、专多数的软件进行完美的整合，所以备受广大图形设计爱好者和专业图像设计人员的青睐，被广泛地应用在图像处理、广告、平面业图像设计人员的青睐，被广泛地应用在图像处理、广告、平面设计、多媒体界面设计和网页设计等领域。设计、多媒体界面设计和网页设计等领域。13.1 13.1 网页设计基础网页设计基础 网页设计是一门综合性技术，包含许多方面的内容。它包含网页设计是一门综合性技术，包含许多方面的内容。它包含网页布局设计、网页颜色选择及网页界面基本元素的设计等。因网页布局设计、网页颜色选择及网页界面基本元素的设计等。因此，在学习网页设计之前，先学习与之相关的一些基础知识就显此，在学习网页设计之前，先学习与之相

3、关的一些基础知识就显得格外重要。得格外重要。1.1.网页布局设计网页布局设计 1 1）页面尺寸）页面尺寸 2 2）版面分类）版面分类 2.2.网页颜色选择网页颜色选择 1 1）色彩的基本概念）色彩的基本概念 2 2）色彩的三原色）色彩的三原色 3 3）色彩的联想）色彩的联想网页界面网页界面3.3.网页界面基本元素的设计网页界面基本元素的设计 一般来说，网页的界面就是能够看到的该网页的画面。网页一般来说，网页的界面就是能够看到的该网页的画面。网页界面的基本元素主要由站标（界面的基本元素主要由站标（logologo）、导航条、广告条）、导航条、广告条（bannerbanner）、文字和图形组成）、

4、文字和图形组成。13.2 13.2 网页设计流程网页设计流程 网页设计是一个较连贯的制作过程，从工作的顺序及成果来网页设计是一个较连贯的制作过程，从工作的顺序及成果来看，网页设计的基本流程可以分为以下看，网页设计的基本流程可以分为以下3 3个阶段。个阶段。1.1.明确主题明确主题 2.2.设计版面设计版面 3.3.切割网页切割网页13.3 13.3 商务网页设计实例商务网页设计实例 随着信息技术的深入发展，网站平台作为企业发布信息、对随着信息技术的深入发展，网站平台作为企业发布信息、对外宣传的外宣传的“窗口窗口”作用也日益凸现。本节主要介绍应用文字工具、作用也日益凸现。本节主要介绍应用文字工具

5、、选区、填充、切片等制作商务网页的操作过程。本实例的最终效选区、填充、切片等制作商务网页的操作过程。本实例的最终效果如下图所示。果如下图所示。商务网页最终效果商务网页最终效果 （1 1）打开）打开Photoshop CS4Photoshop CS4，按，按Ctrl+NCtrl+N组合键，弹出组合键，弹出“新建新建”对对话框，设置话框，设置“名称名称”为为“商务网页商务网页”，“宽度宽度”为为1 0071 007像素，像素，“高度高度”为为600600像素，像素，“分辨率分辨率”为为7272像素像素/英寸，英寸，“颜色模式颜色模式”为为8 8位位RGBRGB颜色，颜色，“背景内容背景内容”为为“

6、白色白色”，如下图所示。，如下图所示。商务网页的商务网页的“新建新建”对话框参数设置对话框参数设置 （2 2）单击）单击“图层图层”面板中的面板中的“创建新组创建新组”按钮按钮 ，分别新建，分别新建“顶部顶部”、“中部中部”、“底部底部”3 3个图层组，并在个图层组，并在“顶部顶部”图层组图层组中新建中新建“导航导航”图层。图层。创建图层组和图层创建图层组和图层 （3 3）按）按Ctrl+RCtrl+R组合键显示标尺，单击标尺并拖动，在图像窗组合键显示标尺，单击标尺并拖动，在图像窗口中拖出口中拖出4 4条水平参考线。条水平参考线。显示标尺并设置参考线显示标尺并设置参考线 （4 4）在工具箱中单

7、击）在工具箱中单击“矩形选框工具矩形选框工具”按钮，在工作区中拖按钮，在工作区中拖出一个矩形选区。出一个矩形选区。绘制矩形选区绘制矩形选区 （5 5）在工具箱中单击）在工具箱中单击“渐变工具渐变工具”按钮，接着在其属性栏中按钮，接着在其属性栏中单击单击“点按可编辑渐变点按可编辑渐变”按钮，弹出按钮，弹出“渐变编辑器渐变编辑器”对话框，并对话框，并设置参数。然后在选区内从上到下方向渐变。设置参数。然后在选区内从上到下方向渐变。设置渐变参数设置渐变参数渐变效果图渐变效果图 （6 6）打开素材文件）打开素材文件logo.tiflogo.tif，修改，修改“图层图层0”0”名称为名称为“logo”lo

8、go”，使用使用“移动工具移动工具”将其拖动到将其拖动到“商务网页商务网页.psdpsd”文件中，调整合文件中，调整合适的位置和大小。适的位置和大小。logologo效果图效果图 （7 7）将前景色设置为黑色，单击）将前景色设置为黑色，单击“横排文字工具横排文字工具”按钮，在其按钮，在其属性栏中设置合适的字体和大小（黑体，属性栏中设置合适的字体和大小（黑体，1818点），然后在工作区点），然后在工作区中单击并输入相关文字。中单击并输入相关文字。文字导航条文字导航条 （8 8）在工具箱中单击）在工具箱中单击“直线工具直线工具”按钮，然后在画布中绘制导按钮，然后在画布中绘制导航分割线。航分割线。直

9、线工具属性栏参数设置直线工具属性栏参数设置绘制导航分割线绘制导航分割线 （9 9）单击）单击“横排文字工具横排文字工具”按钮，在其属性栏中设置合适的按钮，在其属性栏中设置合适的字体和大小（宋体，字体和大小（宋体，1414点），然后在工作区右上角单击并输入相点），然后在工作区右上角单击并输入相关文字。关文字。右上角文字导航条右上角文字导航条（1010）参照操作步骤（）参照操作步骤（8 8），绘制右上角文字导航分割线。），绘制右上角文字导航分割线。绘制右上角文字导航分割线绘制右上角文字导航分割线 （1111）在）在“图层图层”面板中新建面板中新建“搜索栏搜索栏”图层。在工具箱中将图层。在工具箱中将

10、前景色设置为白色，单击前景色设置为白色，单击“矩形选框工具矩形选框工具”按钮，在工作区中拖按钮，在工作区中拖出一个矩形选区，并填充为白色。出一个矩形选区，并填充为白色。绘制填充搜索栏绘制填充搜索栏 （1212）单击）单击“图层图层”面板中的面板中的“添加图层样式添加图层样式”按钮，在弹出按钮，在弹出的菜单中选择的菜单中选择“描边描边”菜单项，接着在弹出的菜单项，接着在弹出的“图层样式图层样式”对话对话框中设置如图所示的参数，然后单击框中设置如图所示的参数，然后单击“确定确定”按钮。按钮。“描边描边”选项参数设置选项参数设置 （1313）将前景色设置为黑色，单击）将前景色设置为黑色，单击“横排文

11、字工具横排文字工具”按钮，在按钮，在其工具属性栏中设置合适的字体和大小（宋体，其工具属性栏中设置合适的字体和大小（宋体，1414点），然后在点），然后在搜索栏中单击并输入相关文字。搜索栏中单击并输入相关文字。搜索栏文字输入搜索栏文字输入 （1414）参照操作步骤（）参照操作步骤（1111）（1313），制作出搜索按钮，并输），制作出搜索按钮，并输入合适的文字，得到如图所示的图像效果。入合适的文字，得到如图所示的图像效果。搜索栏按钮设置搜索栏按钮设置 （1515）打开素材文件）打开素材文件“Banner.tifBanner.tif”，选择，选择“背景背景”图层，使图层，使用用“移动工具移动工具”

12、将其拖动到将其拖动到“商务网页商务网页.psdpsd”文件中，调整合适文件中，调整合适的位置和大小。的位置和大小。添加网站添加网站bannerbanner （1616）在）在“图层图层”面板中新建面板中新建“新闻边框新闻边框”图层。在工具箱中图层。在工具箱中单击单击“矩形选框工具矩形选框工具”按钮，在工作区中拖出一个矩形选区。按钮，在工作区中拖出一个矩形选区。绘制绘制“新闻边框新闻边框”图层的矩形选区图层的矩形选区 （1717）在工具箱中单击）在工具箱中单击“渐变工具渐变工具”按钮，接着在其属性栏中按钮，接着在其属性栏中单击单击“点按可编辑渐变点按可编辑渐变”按钮，弹出按钮，弹出“渐变编辑器渐

13、变编辑器”对话框并设对话框并设置参数。然后在选区内从上到下方向渐变。最后为该图层添加置参数。然后在选区内从上到下方向渐变。最后为该图层添加“描边描边”图层样式。图层样式。设置设置“新图边框新图边框”图层矩形选区的渐变参数图层矩形选区的渐变参数渐变、描边矩形选区渐变、描边矩形选区 （1818）在工具箱单击）在工具箱单击“横排文字工具横排文字工具”按钮，在其属性栏中设按钮，在其属性栏中设置合适的字体和大小，然后在工作区中单击并输入相关文字。置合适的字体和大小，然后在工作区中单击并输入相关文字。添加新闻添加新闻 （1919）参考操作步骤（）参考操作步骤（1616）（1818），制作出），制作出“相关

14、链接相关链接”边边框，并输入合适的文字。框，并输入合适的文字。添加相关链接添加相关链接 （2020）打开素材文件）打开素材文件“left.tifleft.tif”、“middle.tifmiddle.tif”和和“right.tifright.tif”，使用，使用“移动工具移动工具”分别将其拖动到分别将其拖动到“商务网商务网页页.psdpsd”文件中，调整合适的位置和大小文件中，调整合适的位置和大小 。添加图片文本内容添加图片文本内容 （2121）在工具箱中将前景色设为）在工具箱中将前景色设为“#2c88b1”#2c88b1”，单击，单击“横排文横排文字工具字工具”按钮，在其属性栏中设置合适的

15、字体和大小，然后在工按钮，在其属性栏中设置合适的字体和大小，然后在工作区中单击并输入相关文字。作区中单击并输入相关文字。添加底部文字信息添加底部文字信息 （2222）为了提高网页的访问速度，需要对网页图片进行分割处）为了提高网页的访问速度，需要对网页图片进行分割处理。在工具箱中单击理。在工具箱中单击“切片工具切片工具”按钮，单击其属性栏中的按钮，单击其属性栏中的“基基于参考线的切片于参考线的切片”按钮，即可基于参考线的划分方式创建切片。按钮，即可基于参考线的划分方式创建切片。创建切片效果创建切片效果 （2323）在创建完切片）在创建完切片后，执行菜单栏中后，执行菜单栏中“文文件件”“”“存储为

16、存储为WebWeb和设和设备所用格式备所用格式”命令，弹命令，弹出出“存储为存储为WebWeb和设备所和设备所用格式用格式”对话框，如图对话框，如图所示。所示。“存储为存储为WebWeb和设备所用格式和设备所用格式”对话框对话框 （2424）单击）单击“存储为存储为WebWeb和设备所用格式和设备所用格式”对话框右上角的对话框右上角的“优优化菜单化菜单”按钮，在弹出的菜单栏中选择按钮，在弹出的菜单栏中选择“编辑输出设置编辑输出设置”菜单项，菜单项，如图所示。如图所示。“编辑输出设置编辑输出设置”菜单项菜单项 （2525）在弹出的）在弹出的“输出设置输出设置”对话框中可以命名文件和切片，对话框中可以命名文件和切片，也可以在存储优化图像时处理背景图像。要使用预设的输出选项，也可以在存储优化图像时处理背景图像。要使用预设的输出选项，只需在只需在“设置设置”下拉列表框中选择即可，如图所示。下拉列表框中选择即可，如图所示。“输出设置输出设置”对话框对话框 （2626）单击）单击“确定确定”按钮返回按钮返回“存储为存储为WebWeb和设备所和设备所用格式用格式”对话框。设置完毕，单击对话框。设置完毕，单击“存储存储”按钮即可选按钮即可选择路径保存择路径保存HTMLHTML和切片内容。和切片内容。至此，本实例就制作好了。至此，本实例就制作好了。第第1313章章 结束！结束！