网页设计与网站建设(第二版) 教学课件 作者 杜永红第4章 利用Photoshop进行网页设计.ppt

《网页设计与网站建设(第二版) 教学课件 作者 杜永红第4章 利用Photoshop进行网页设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、用Photoshopcs5软件进行logo、导航栏、banner设计3.掌握利用Photoshopcs5软件进行网站首页和内容页界面的设计案例导入：本章通过使用PhotoshopCS5设计西京食府网站（名称为虚拟）的banner、logo、导航栏、网站首页界面和子页界面等，详细介绍PhotoshopCS5在网页设计的不同阶段是如何处理各种不同类型图像的。4.1PhotoshopCS5简介AdobePhotoshop是一款功能强大的图像处理软件，由美国Adobe公司在1990年首次推出，在图像处理和电脑绘图领域中占据了重大地

3、位。经过多次更新换代，功能不断增强与完善，最新推出的PhotoshopCS5，新增加了许多功能，如：流体画布旋转的功能，调整面板的改进，创新的3D与绘图合成等功能，使原有功能更加完善。Photoshop的应用领域很广泛，在图像、网页设计、视频、WEB出版各方面都有涉及。Photoshop的专长在于图像处理，而不是图形创作。主要用于平面设计、网页设计、绘画、标志设计、数码照片处理及一些后期处理等方面。PhotoshopCS5的工作界面由“菜单”栏、“属性”栏、“图像编辑”窗口、状态栏、工具箱、控制面板等组成。4.2设计网站L

4、OGO本节以西京食府logo设计实例入手，讲述如何利用PhotoshopCS5进行网站logo设计，逐一向读者展示Photoshop在网页设计的强大功能。主要涉及以下知识点：新建文件、选取框工具的使用、填充选取框、选取框的羽化效果和调整边缘的设置、输入文本等。操作步骤如下：1．新建文件：尺寸为1080*425像素2．绘制logo（1）新建图层：选择“矩形选择”工具，设置羽化值为15px，画一个合适大小的logo矩形外框。（2）填充底色。设置前景色为#561801，右击选择框，在弹出菜单中选择“填充”命令，在弹出的对话框中，

5、内容选择前景色，单击“确定”按钮，如图4.5（a）所示。单击画布上方处属性栏的“调整边缘”按钮，将对比度调整为100%，选择输出到“新建图层”。（3）继续单击“矩形选择”工具，参数不变，单击logo中心点，创建一个和刚才大小一样的矩形外框，单击“矩形选择”工具，将羽化值从原来15px调整为0px。按下alt键，光标变为一个“+-”形状，在左侧最上方点从外及内，从上向下拖动光标，拖动的选区为原来矩形外框的一半，即删除掉矩形的左半部分；方法同（2）步骤，设置前景色为白色，将右半部分填充为白色。（4）输入logo文字部分。（5）

6、完善logo。4.3设计网站导航栏网站导航栏是网页设计中不可缺少的部分，导航栏的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到信息并管理信息，让用户在浏览网站过程中不至迷失。主要涉及以下知识点：矢量图形工具的使用、标尺和辅助线的使用、添加节点、调整节点、图层样式的使用、素材的置入、矢量蒙版的使用、输入文本等。操作步骤如下：1．新建文件：尺寸为820*100像素，2．绘制导航栏框架单击圆角矩形工具，半径为10，绘制导航栏框架，沿着圆角矩形的顶部和底部添加多条辅助线；单击“直接选择”工具，选中圆角矩

7、形左上角边缘弧度的二个节点向上向左侧移动至辅助线位置，同理单击“直接选择”工具选中右上角边缘弧度的二个节点向上向右移动至辅助线位置，单击“添加节点”工具，在矩形的中心上下分别添加节点，拖动节点向中心靠拢，调整矩形弧度，最后将此图层命名为框架图层。2.美化框架1）置入背景素材“底纹.jpg”，命名图层为“底纹”。将底纹图像全部覆盖住导航栏框架，单击框架图层，将框架图层处的矢量蒙版标志拖至“底纹”图层，删除框架图层，保留底纹图层。3）右击底纹图层，在弹出菜单中选择“混合选项”命令，在“图层样式”对话框中，分别设置“浮面和斜雕”

8、与“内阴影”。4）单击”横排文字“工具，选择字体颜色为#4c0b00,字体为楷体，输入导航栏文字内容。4.4设计网站Banner网站banner是网站广告最直接的表现形式，通过网站banner的设计，突出强调网站的内容。主要涉及以下知识点：素材的置入、图像布局及图层上下位置的调整、图像的自由变换、图层蒙