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

* * 第13章 网页设计 13.1 网页设计基础 1 2 3 13.2 网页设计流程 13.3 商务网页设计实例 目录 网页的设计与制作少不了对图形图像的制作和加工，这就需要用到专门的图像处理软件。Photoshop CS4是一款功能强大的图像处理软件，由于它的界面简洁友好，可操作性强，可以和绝大多数的软件进行完美的整合，所以备受广大图形设计爱好者和专业图像设计人员的青睐，被广泛地应用在图像处理、广告、平面设计、多媒体界面设计和网页设计等领域。 13.1 网页设计基础 网页设计是一门综合性技术，包含许多方面的内容。它包含网页布局设计、网页颜色选择及网页界面基本元素的设计等。因此，在学习网页设计之前，先学习与之相关的一些基础知识就显得格外重要。 1. 网页布局设计 1）页面尺寸 2）版面分类 2. 网页颜色选择 1）色彩的基本概念 2）色彩的三原色 3）色彩的联想 网页界面 3. 网页界面基本元素的设计 一般来说，网页的界面就是能够看到的该网页的画面。网页界面的基本元素主要由站标（logo）、导航条、广告条（banner）、文字和图形组成。 13.2 网页设计流程 网页设计是一个较连贯的制作过程，从工作的顺序及成果来看，网页设计的基本流程可以分为以下3个阶段。 1.明确主题 2.设计版面 3.切割网页 13.3 商务网页设计实例 随着信息技术的深入发展，网站平台作为企业发布信息、对外宣传的“窗口”作用也日益凸现。本节主要介绍应用文字工具、选区、填充、切片等制作商务网页的操作过程。本实例的最终效果如下图所示。 商务网页最终效果 （1）打开Photoshop CS4，按Ctrl+N组合键，弹出“新建”对话框，设置“名称”为“商务网页”，“宽度”为1 007像素，“高度”为600像素，“分辨率”为72像素/英寸，“颜色模式”为8位RGB颜色，“背景内容”为“白色”，如下图所示。 商务网页的“新建”对话框参数设置 （2）单击“图层”面板中的“创建新组”按钮 ，分别新建“顶部”、“中部”、“底部”3个图层组，并在“顶部”图层组中新建“导航”图层。 创建图层组和图层 （3）按Ctrl+R组合键显示标尺，单击标尺并拖动，在图像窗口中拖出4条水平参考线。 显示标尺并设置参考线 （4）在工具箱中单击“矩形选框工具”按钮，在工作区中拖出一个矩形选区。 绘制矩形选区 （5）在工具箱中单击“渐变工具”按钮，接着在其属性栏中单击“点按可编辑渐变”按钮，弹出“渐变编辑器”对话框，并设置参数。然后在选区内从上到下方向渐变。 设置渐变参数 渐变效果图 （6）打开素材文件logo.tif，修改“图层0”名称为“logo”，使用“移动工具”将其拖动到“商务网页.psd”文件中，调整合适的位置和大小。 logo效果图 （7）将前景色设置为黑色，单击“横排文字工具”按钮，在其属性栏中设置合适的字体和大小（黑体，18点），然后在工作区中单击并输入相关文字。 文字导航条 （8）在工具箱中单击“直线工具”按钮，然后在画布中绘制导航分割线。 直线工具属性栏参数设置 绘制导航分割线 （9）单击“横排文字工具”按钮，在其属性栏中设置合适的字体和大小（宋体，14点），然后在工作区右上角单击并输入相关文字。 右上角文字导航条 （10）参照操作步骤（8），绘制右上角文字导航分割线。 绘制右上角文字导航分割线 （11）在“图层”面板中新建“搜索栏”图层。在工具箱中将前景色设置为白色，单击“矩形选框工具”按钮，在工作区中拖出一个矩形选区，并填充为白色。 绘制填充搜索栏 （12）单击“图层”面板中的“添加图层样式”按钮，在弹出的菜单中选择“描边”菜单项，接着在弹出的“图层样式”对话框中设置如图所示的参数，然后单击“确定”按钮。 “描边”选项参数设置 （13）将前景色设置为黑色，单击“横排文字工具”按钮，在其工具属性栏中设置合适的字体和大小（宋体，14点），然后在搜索栏中单击并输入相关文字。 搜索栏文字输入 （14）参照操作步骤（11）~（13），制作出搜索按钮，并输入合适的文字，得到如图所示的图像效果。 搜索栏按钮设置 （15）打开素材文件“Banner.tif”，选择“背景”图层，使用“移动工具”将其拖动到“商务网页.psd”文件中，调整合适的位置和大小。 添加网站banner （16）在“图层”面板中新建“新闻边框”图层。在工