1、第10章 Photoshop设计网页元素,10.1 设计网站图标和Logo 10.2 设计网页广告图像 10.3 设计网页按钮和导航条 10.4 设计网页,开 始,网页元素就是指网页中使用到的一切用于组织结构和表达内容的对象。组织结构包括按钮、布局、层、导航条和链接等。表达内容包括Logo、Banner、文字、图像和Flash等。本章从范例入手，学习运用Photoshop CS3创建各种网页元素的方法和技巧。,本章主要内容：,10.1.1 绘制网站图标 10.1.2 绘制网站Logo,返回本章首页,10.1 设计网站图标和Logo,网站图标指显示在浏览器地址栏左侧的小图标，简单明了，视觉效果突
2、出。网站Logo徽标主要是各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。,10.1.1 绘制网站图标,返回本节,网站图标是一个网站的标志性图片，它的英文名称叫Favicon，打开浏览器，地址栏的左侧的IE图标变成了特别的小图标，这就是网站图标，或者叫网站头像。如图10-1所示即是百度的网站图标。另外，在浏览器收藏夹的网址前也可以看到网址前的这些特别的图标，如图10-2所示。,图10-1 百度图标,图10-2 收藏夹里的网站图标,10.1.1 绘制网站图标,返回本节,图10-3 完成后放大的效果,1 新建文件 2 绘制矢量图形 3 图形的保存,10.1.2 绘制网站Logo
3、,返回本节,一个设计独特的网站Logo能给浏览者以深刻的第一印象，它不仅代表了网站本身，也突出网站的性质，是网站的“眼睛”。本范例利用Photoshop CS3的多种绘图工具来绘制一个设计类网站的Logo。作品简单醒目，很好地传递了网站的基本信息。范例效果如图10-15所示。,图10-15 网站logo效果图,1新建文件 2文字的输入与编辑 3文字变形 4用自定形状修饰文字 5加入网址文字及说明,10.2.1 制作网站Banner 10.2.2 绘制网页通栏广告,返回本章首页,10.2 设计网页广告图像,作为专业的平面设计软件，Photoshop在设计网页广告图像方面功能强大。本小节以范例的方
4、式介绍用Photoshop CS3制作网站Banner和网页广告的方法。,10.2.1 制作网站Banner,返回本节,Banner是指网页中的广告条，一般使用Gif格式的动态图像文件，以达到吸引观者注意力的目的，也可以使用静态图形。下面设计制作一个时装网站Banner。范例效果如图10-30所示，实际效果是动态的。,图10-30 网站banner效果图,1新建文件并打开素材图片 2输入文字 3添加动画效果 4保存输出动画,10.2.2 绘制网页通栏广告,返回本节,网页通栏广告是指左右与网页同宽，高度一般为100至200像素的图片广告，这种广告多为静态。它常常以抢眼的位置和旖旎的色彩达到吸引浏
5、览者眼球的目的。下面就以图10-41所示效果为例，完成一幅950120像素的通栏广告。,图10-41 通栏广告效果图,1新建文件并打开素材图片 2布局文字 3修饰广告图片,10.3.1 绘制网页按钮 10.3.2 绘制网页导航条,返回本章首页,10.3 设计网页按钮和导航条,按钮是网页中用于导航的重要元素，导航条是一组按钮的集合，它提供了到网站不同栏目的链接。网页按钮和导航条设计的好坏，不仅能增强网页的视觉效果，而且能使导航清晰自然。,10.3.1 绘制网页按钮,返回本节,本范例学习绘制一个具有水晶质感的网页导航按钮，效果如图10-53所示。,图10-53 水晶按钮效果图,1新建文件并制作渐变
6、底图 2制作水晶效果 3添加电话形状,10.3.2 绘制网页导航条,返回本节,导航条不仅要美观、醒目，在功能表达上也要一目了然。整个站点中的导航栏风格通常都是一致的，以方便浏览者了解网站的所有内容，并且知道自己所处的位置。下面就一起来制作如图10-58所示的导航条。其中“公司介绍”为当前页效果。,图10-58 导航条效果图,1绘制圆角矩形 2制作矩形导航效果 3添加渐变效果 4制作倒影 5输入导航条文字 6导航菜单的突出显示,返回本章首页,10.4 设计网页,Photoshop CS3可以快速创建网站和用户界面原型，并能通过切片和优化，将图片直接转换成 Web格式。本小节将综合使用Photos
7、hop CS3的各种工具完整地制作一个网页作品，以期对网页制作流程有一个大致的认识，达到心领神会的目的，如图10-68是绘制好的网页。,图10-68 绘制好的网页,10.4.1 绘制网页 10.4.2 创建切片 10.4.3 优化切片并导出HTML文件 10.4.4 在Dreamweaver中编辑网页,10.4.1 绘制网页,返回本节,1新建文件并绘制网页顶部背景 2添加网站Logo和导航条 3绘制站内搜索栏 4绘制左侧栏目 5绘制右侧栏目 6绘制底部栏目并整理图层,10.4.2 创建切片,返回本节,切片是将 Photoshop 的整张大图分割成多个较小的图片，然后在网页中通过表格形式重新将小
8、图片拼接成完整的图像，这是将Photoshop设计制作的网页图片转化成真正网页的重要步骤。 将图像切片至少有3个主要优点：一是优化。由于网速的限制，网页元素要尽可能在确保图像快速下载的同时保证质量。切片可以使用最适合的文件格式和压缩设置来优化每个独立切片。二是创建链接。切片制作好后，可以对不同的切片制作不同的链接。三是可以更新网页的某些部分。使用切片可以轻松地更新网页中经常更改的部分。例如，当前日期、最新公告等，利用切片可以快速更改局部内容而不用更换整个网页。1网页头部切片2网页中下部左侧栏切片,Thank you very much !,本章到此结束， 谢谢您的光临！,结束放映,返回本章首页,
