10 Web应用
10.1 常见的网络图像格式（Top）
目前，可以插入网页的图像格式有，GIF、JPG（JPEG）和PNG等三种。
10.1.1 Photoshop以GIF格式存储文件（Top）
存储的文件格式为CompuServe GIF；图像颜色模式为索引颜色。
提示：在“索引颜色”对话框（图1）上：
“调板”、“强制”框的选定值，以及它们的组合，会改变颜色数量。
单击“索引颜色”对话框上“好”后，在“GIF选项”对话框上，选定“行序”
。“正常”－图像文件下载完成后，方可显示；“交错”－浏览器以隔行显示方式下载图像（此选项会增大文件尺寸）。
名词解释：隔行GIF，是指图片文件按照隔行的方式来显示，比如先出奇数行，再出偶数行，造成图片是逐渐变清楚的。
10.1.2 ImagesReady以GIF格式存储文件（Top）
ImagesReady完成图像编辑后，先在“优化”面板（图3）设定选项，然后单击“文件”·“将优化结果存储为”。
在“将优化结果存储为”对话框上，“保存类型”有“仅限图像”、“HTML和图像”和“仅限HTML”等选项。
10.1.3 Photoshop以JPEG格式存储文件（Top）
将文件存储为JPEG（JPG）格式过程中，会出现“JPEG选项”对话框（图4）。
“图像选项”选项区中可以选定图象的品质（压缩级别）。在“品质”框输入（或拖动滑块）0 和 12 之间的数值。
提示：图象品质和压缩量之间总是一种互补的关系：较高品质图象比较低品质图象使用较低的压缩。
“格式选项”：“基线（标准）”格式，生成的文件可被所有的浏览器接受；“基线已优化”格式，优化图象的色彩品质并产生稍微小一些的文件（可能有的浏览器不支持）；“连续”格式，
创建在下载过程中逐步显示的图像
。
10.1.4 Photoshop以PNG格式存储文件（Top）
将编辑成果保存为PNG格式文件的方法与上述两种相似。保存过程中会出现类似图2所示的“PNG选项”的对话框。
PNG（读成“ ping” ）－ Portable Network Graphics ， 即，可移植的网络图象文件格式。是应对 GIF 格式的专利产生的Fireworks的默认格式
。
不论PNG的技术和知识产权具有多大优势，就其应用来说，它仍然不能与 GIF相提并论，在网络 (Web) 图像 模式中还只能算个小字辈。
W3C的 Chris Lilley也承认PNG并非无所不能。使用JPG文件格式存储照片效果要好一些。GIF提供了PNG所不具备的动画能力，尽管PNG的姊妹版MNG(Multiple-Image Network Graphics读成“ming”) 或称多重图像网络图形也支持动画效果。
10.2 优化图像（Top）
如果，要将Photoshop编辑的图像，存储为Web使用格式的文件，可使用“文件”·“存储为Web所有格式”命令。
在上述“存储为Web所有格式”对话框上，使用了“四联”视图。左上图是原图；右上图：JPEG格式，品质为6的效果；左下图：GIF格式，使用256色的效果；右下图：PNG8（位深8位）格式，使用256色的效果。
选定一幅图后，单击“存储”，即可将编辑成果存储为所需的格式文件。
提示：
⑴在“预设”选项区，“图像格式”框中可以选定图像格式：GIF、JPG、PNG
⑵使用颜色数量越少，图像文件越小，但是，效果也会变差。用户可以根据上述对话框，显示效果，选定使用颜色的数量。
“颜色”框中，用户可以自行输入需要的数字。即，不一定选用列表中列出的：256、128、64、32、16、8、4、2等数字。
10.3 切片图像（Top）
切片工具包含，切片工具和切片选取工具。
切片工具用于切割图像；切片选取工具用于编辑、保存切片。
10.3.1 切片工具（ Top ）
10.3.1.1 切片工具选项栏（ Top ）
“样式”列表框，选择切片类型。
选择“约束长宽”，可在右边“宽度”和“高度”框中设置比例（缺省值为1）。
选择“固定大小”，每次单击鼠标，都将在图像中切割出一块固定大小的矩形切片。具体尺寸在“宽度”和“高度”文字框中输人。
“基于参考线的切片”，当图像编辑窗口中存在参考线时，该按钮可用。
提示：是否显示切片及其编号等，与“视图”控制菜单中“显示”次级菜单中的设置有关。
10.3.1.2 创建切片（ Top ）
可以先设置好参考线，然后单击“基于参考线的切片”按钮。让软件自动按参考线切分图像。
提示：参考教材，讲解的是ImagesReady切片图像的操作方法。下面讲解的是用Photoshop CS切片图像的操作方法。
10.3.2 切片选取工具（ Top ）
10.3.2.1 显示/隐藏切片（ Top ）
切片选取工具的选项栏上，有一个“隐藏（显示）自动切片”按钮，单击该按钮，可以显示或隐藏所有非“用户切片”。
提示：⑴自动切片－用户制作切片时，只能创建矩形切片，由矩形边延长线分割而成的切片，称为自动切片，或非用户切片。
⑵隐藏/显示切片，还可以应用“视图”·“显示”次级菜单中的“切片”、“全部”和“无”命令。
10.3.2.2 切片选取工具选项栏 （ Top ）
“堆叠顺序”一组按钮：一个图像切割成两个以上切片后每个切片之间有一定堆叠（打开时显示）顺序。
“置为顶层”按钮，将当前切片移动至堆叠顶层。
“前移一层”按钮，当前切片向上移动一层。
“后移一层”按钮，当前切片向下移动一层。
“置为底层”按钮，将当前切片移动至堆叠的底层。
“转为用户切片”按钮，将当前切片激活（编号成蓝色），然后可以进行更改大小、删除等编辑。
“切片选项”按钮，单击后，打开“切片选项”对话框。
10.3.2..3 “切片选项”对话框设置（ Top ）
“切片类型”，默认选项“图像”，表示当前切片在网页中显示为图像。
“名称”框，设定切片的名称。
“URL”框，设定当前切片的超级链接的目标地址。
“Target”（目标）框，若输入“_blank”，则打开新窗口，显示超级链接目标。
“信息文本”框，在浏览器中，当鼠标移至该切片时，状态栏显示的信息。
“Alt标记”框，在浏览器中，当鼠标移至该切片时，显示的信息。若浏览器不能显示该切片图像时，将在该位置显示它。
“尺寸”选项区，“X”、“Y”是切片左上角在图像中的坐标；“W”、“H”是切片的宽度 、高度（单位像素）。
10.3.2.4 将当前图像保存为网页（ Top ）
在上述工作完成后。单击“文件”·“存储为Web所用格式”后，在“存储用于Web”对话框上设定有关选项。
注意：如果保存类型为图像，则每个切片保存为一个普通图像。上述“切片选项”对话框上的“URL”等设置无法保存。
10.4 图像映射（ Top ）
提示：图像映射，就是在Dream weaver和Fireworks所说的热点。参考书上讲解的是用ImagesReady制作图像映射。
实际上，图像映射主要是应用于网页，因此在Dream weaver中制作更灵活。
10.5 创建翻转效果（ Top ）
提示：翻转效果，就是Dream weaver的“鼠标经过图像”。参考书上讲解的是用ImagesReady制作图像映射。
10.6 制作GIF动画（ Top ）
本课件（网站）的刊头动画，就是用ImagesReady制作的。制作步骤如下：
⑴在PhotoshopCS中，新建一个750×120pt的图像文件。
⑵用文字工具，选用字体为Arial Black；文字大小为100pt，书写“PhotoshopCS”。
⑶为文字图层应用样式“斜面和浮雕”、“渐变叠加”和“描边”。
⑷单击工具箱下部“在ImagesReady中编辑”按钮，转到ImagesReady。
⑸用移动工具将文字水平移动到图像右边界的外侧。
⑹在“动画”面板上，单击“复制当前帧”，复制出第2帧。
⑺将第2帧选定为当前帧后，用移动工具将文字水平移动到图像中原位（刚转到ImagesReady时的位置）。
⑻单击“动画”面板上“过渡”按钮。
⑼在“过渡”对话框（右图）上，设定第1与第2帧之间需要添加多少过渡帧（右图中设定为40），然后单击“好”。
⑽选定最后一帧（第42帧）后，按Shift键，然后单击第1帧。将全部帧选定。
⑾在任何一帧的“0秒”右侧的三角形按钮上单击，然后在弹出的菜单上设定延时时间数。
提示：除了菜单上所列时间数，还可以在单击“其他”后，自行设定任何数值（例如，0.25秒）。
至此，一个简单的GIF动画就制作完成了。
提示：“动画”面板下部有一组播放制作按钮，用户可以通过它们在编辑窗口吕牟取暴利动画
⑿单击“文件”·“将优化结果存储为”。
⒀在“将优化结果存储为”对话框上，根据需要设定后单击“保存”。编辑的动画即导出为动画GIF格式的文件。
提示：“保存类型”框中，须选定“仅限图像（*.gif）”。
⒁单击“文件”·“存储为”，即可将编辑文件，保存为PSD格式文件。
主页 （TOP） |
