项目八 使用Photoshop CS5制作网页效果图（课件）-《网页制作三合一案例教程》同步教学（航空工业出版社）

项目八 使用Photoshop CS5制作网页效果图 任务一 输入和设置文本 任务二 创建与编辑切片 任务三 图像的优化与输出 任务一 输入和设置文本 任务说明 Photoshop提供了4种文字工具：“横排文字工具” 、“直排文字工具” 、“横排文字蒙版工具” 和“直排文字蒙版工具” 。本任务主要学习“横排文字工具” 和“直排文字工具” 的应用。 预备知识 一、输入文本 Photoshop中的文本包括“点文本”和“段落文本”。如果需要输入的文字较少，可以使用文字工具直接单击来输入点文本；如果需要输入较多的文字，可以使用文字工具在图像中单击并拖出一个文本框，然后把大段的文字以段落的形式输入在文本框里，下面分别介绍。 1．输入点文本 点文本的输入方式很简单。在选择横排或直排文字工具后，在“工具属性栏”中设置文字属性，设置完文字属性后，在文档窗口中要输入文本的位置单击，当出现闪烁的光标后即可输入文本。在输入完毕后可以按【Ctrl+Enter】组合键结束输入，此时系统会自动新建一个文本图层。 2．输入段落文本 选择横排或直排文字工具后在工具属性栏中设置合适的文字属性；然后将鼠标光标移至图像窗口中，此时光标呈 或 形状，按住鼠标左键不放并拖动鼠标，当达到所需位置后松开鼠标，绘制一个文本框，待文本框左上角出现闪烁的光标时，即可输入文字，输入完毕后按【Ctrl+Enter】组合键结束输入。 二、设置文本格式 1．选择文本 选择横排或直排文字工具后，将光标移至文字区域单击，系统会自动将文本图层设置为当前图层，并进入文本编辑状态。此时可以在插入点输入文字，也可以按住鼠标左键的同时拖动鼠标选中单个或多个文字。另外，双击“图层”调板中文本图层的缩览图，可以选中图层中的所有文字。 2．设置字符格式 选中文本后，单击工具属性栏中的 按钮，或选择“窗口”>“字符”菜单，打开“字符”调板，在其中可更改文本的字体、大小、颜色、行距、间距等属性。 3．设置段落格式 可应用“段落”调板设置所选段落或光标所在段落的格式。 三、设置变形文字 使用Photoshop CS5提供的“文字变形”命令，可以使文本呈现弧形、波浪形和鱼形等特殊效果。 任务实施——制作“天音”网站主页效果图 在学习了前面的知识后，已经能够制作出简单的网页效果图。本节我们通过制作“天音”网站主页的效果图，来对前面的知识做一个全面的总结（具体操作可参考本书配套视频8-1.swf）。 任务二 创建与编辑切片 任务说明 切片主要用于把在Photoshop中制作的网页效果图切割成不同的小图像，这样能针对图像特点将不同的图像输出为不同的格式，从而有效加快网页下载速度。 预备知识 一、创建切片 在工具箱中选择“切片工具” ，然后在图像上单击并按住鼠标左键拖动，到适当位置后松开鼠标，即可创建一个切片（用户创建的切片显示为蓝色）。 二、编辑切片 创建切片后，如果需要放大、缩小或移动切片，可以使用“切片选择工具” 单击选择切片，然后执行下面的编辑操作。 如要移动切片，可以拖动鼠标或按键盘上的4个方向键来实现。 如要放大或缩小切片，可以通过拖动切片边框中点或四个角上的控制点来实现。 如要删除切片，可以按【Delete】键或【Backspace】键。 任务实施——切割“天音”网页效果图 在学习了切片的创建和编辑后，本节通过切割上节创建的“天音”网页效果图来学习切片在实际网页制作中的应用（具体操作可参考本书配套视频8-2.swf）。 任务三 图像的优化与输出 任务说明 一般对网页图像的要求是，以尽可能小的文件显示尽可能清晰的图像，从而使网页下载速度达到最快。所以Photoshop提供了图像优化功能。优化是通过调整图像的显示品质和文件大小，使其达到最佳状态。经过优化后的图像就可以输出为各种格式的文件。 预备知识 一、优化图像 Photoshop提供了两种优化图像的方式。 基本优化，通过选择“文件”>“存储为”菜单，可以将图像存储为GIF、JPEG或PNG格式文件。 精确优化，选择“文件”>“存储为Web和设备所用格式”菜单，可以使用Photoshop中的优化功能，以不同的文件格式和不同的文件属性预览优化图像。 二、输出图像 在上节的“存储为Web和设备所用格式”对话框中设置各项属性后，单击“存储”按钮，将弹出“将优化结果存储为”对话框。设置好所有参数后，单击“保存”按钮，就可以将切割好的图像输出为很多小图像了。 $$