网页设计与网站建设_04利用Photoshop进行网页设计解剖.ppt

《网页设计与网站建设》 第4章 利用Photoshop CS5进行网页设计 4.1 4.2 4.3 4.4 4.5 设计网站首页界面 设计网站Banner 3.4 4.6 4.7 网页草图的切片和导出 Photoshop CS5简介 设计网站LOGO 设计网站导航栏 设计网站子页界面 第4章 利用Photoshop CS5进行网页设计 　本章首先介绍了Photoshop cs5软件操作，通过多个图像和网页界面的设计过程，讲解如何利用Photoshop进行网页设计。 【本章学习目的】 通过本章的学习，读者能够： 1. 掌握Photoshop cs5软件基本操作 2. 掌握利用Photoshop cs5软件进行logo、导航栏、banner设计 3. 掌握利用Photoshop cs5软件进行网站首页和内容页界面的设计 案例导入：本章通过使用Photoshop CS5设计西京食府网站（名称为虚拟）的banner、logo、导航栏、网站首页界面和子页界面等，详细介绍Photoshop CS5在网页设计的不同阶段是如何处理各种不同类型图像的。 4.1 Photoshop CS5简介 Adobe Photoshop是一款功能强大的图像处理软件，由美国Adobe公司在1990年首次推出，在图像处理和电脑绘图领域中占据了重大地位。经过多次更新换代，功能不断增强与完善，最新推出的Photoshop CS5，新增加了许多功能，如：流体画布旋转的功能，调整面板的改进，创新的3D与绘图合成等功能，使原有功能更加完善。 Photoshop的应用领域很广泛，在图像、网页设计、视频、WEB出版各方面都有涉及。Photoshop的专长在于图像处理，而不是图形创作。主要用于平面设计、网页设计、绘画、标志设计、数码照片处理及一些后期处理等方面。 Photoshop CS5的工作界面由“菜单”栏、“属性”栏、“图像编辑”窗口、状态栏、工具箱、控制面板等组成。 4.2 设计网站LOGO 本节以西京食府logo设计实例入手，讲述如何利用Photoshop CS5进行网站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