第06章 使用Photoshop美化“北京奥运吉祥物-福娃”网站.pptVIP

6.3.8 精彩图片区设计 精彩图片区以图文的方式表现了关于奥运、福娃的各类图片，其设计与福娃动态区的设计完全相同，这里可以使用复制图层的方法将“福娃动态”组进行复制，然后更改组名称为“精彩图片”，然后在每个图层上更改背景、文字以及图层名称，调整大小，其最终效果如图所示。 6.3.9 名人说福娃区设计 名人说福娃区表现各界人士对“2008北京奥运会吉祥物-福娃”的评论，其设计与福娃动态区的设计完全相同，这里可以使用复制图层的方法将“福娃动态”组进行复制，然后更改组名称为“名人说福娃”，然后在每个图层上更改背景、文字以及图层名称，调整大小，其最终效果如图所示。 6.3.10 投票调查区设计 投票调查区以互动的形式征求广大用户对“北京奥运会吉祥物—福娃”网站的满意度，其设计与公告栏区的设计完全相同，这里可以使用复制图层的方法将“公告栏”组进行复制，然后更改组名称为“公告 ”，然后在每个图层上更改背景、文字，图层名称，调整大小，其最终效果如图所示。 6.3.11 版权区设计 （1）新建“渐变背景”图层，使用“矩形选框工具（M）”创建版权区背景选区，选择工具栏中的“渐变工具（G）”，设置渐变样式，如图所示，在渐变背景选区设置垂直渐变效果。 （ 2）新建“渐变线”图层，选择工具栏中的“直线工具（U）”，在工具属性栏设置创建路径按钮，粗细为3px，在渐变背景上方建立路径，选择菜单中的“窗口”→“路径”命令，调用出路径控制面板，单击“将路径作为选区载人”按钮将路径转化为选区，使用福娃动态区中设置的“渐变辅助线”渐变样式，设置水平渐变效果。 （3）选择“横排文字工具（T）”，输入版权信息。 建立“版权区”组，整理图层，最终完成版权区设计，其效果如图所示。 值得注意的是设计完网站的各个区域后，用户可以根据网站的整体效果，对网站的局部区域进行分层修改，至此，网站首页页面设计完成，其效果图如图所示。 6.4.1 图像格式介绍 在网页制作过程中，图片的制作十分重要，用户使用Photoshop可以制作出更加美观的图片，但是图片的大小直接影响网页的载入速度。Photoshop CS3支持.psd、.bmp、.jpg、.gif、.png等20多种格式的文件，在实际应用中，用户可以根据实际需求来选择图像文件的格式。 6.4 效果图切片输出 常用的图像文件格式有： （1）PSD格式 （2）BMP格式 （3）JPEG格式 （4）GIF格式 （5）PNG格式 6.4.2 创建与编辑切片 用户完成网页效果图的设计之后，就可以在图片中划分出不同的功能区域，这种功能区域就是切片。 网页效果图通过切割后，在使用Dreamweaver制作网页的过程中可以在不同的切片中进行布局和编辑，另外，进行切割后也加速了网页的显示速度。 1.划分切片 （1）打开fuwa.psd效果图文件，单击下图工具栏中的“切片工具组”按钮，在弹出的快捷菜单中，选择切片工具，然后在图像中准备划分切片的区域按下鼠标左键进行拖动，释放鼠标左键后，软件自动划分将整个图片划分为若干个切片选区，其中每个选区的左上角显示出当前切片选区的名称。 （2）使用相同的方法，以参考线为辅助标准，为图片中的其他区域绘制切片选区，最终完成切片工作，如图所示。 2.编辑切片选项 （1）选择工具栏中的切片选择工具，在需要编辑的切片上单击鼠标右键，在弹出的快捷菜单中选择“编辑切片选项”命令，打开“切片选项”对话框，如图所示。 （2）用户在“切片选项”对话框中可以输入切片的名称，也可以在需要超链接的切片中输入URL地址等，单击“确定”按钮完成设置。 3.切片原则和常见问题 （1）切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。 （2）对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来 （3）输出文件后，需要在Dreamweaver中进行编辑，原则上是少用图片，如果能用背景颜色代替的就使用背景颜色，能使用图案的也尽可能使用图案平铺来形成背景，以加速网页的显示。 6.4.3输出切片 用户在网页图片中划分切片、编辑切片后，在PSD格式的文件中只能看到设置的参数，却看不到网页的效果。如果将制作的图片发布为.htm或.html格式的网页文件，就可以在浏览器中观察相应的效果了。另外，如果在网页中使用的图片过多则可能会影响浏览网页的速度，所以在发布前还应对图片进行优化处理，以减少其存储空间。 下面对“fuwa.psd”图片文件进行优化，然后输出为.html格式的网页文件