网站设计与制作第5章 网站图像设计与应用

在选项栏中单击 按钮，打开【字符】面板，设置 字体、大小和颜色（#336600），然后切换至【段落】 面板，将文本设置为居中对齐。
除了可通过文字工具的选项栏设置文字属性外，还 可以利用【字符】和【段落】面板来设置更多的文 字属性。如果是对图层中所有文字应用相同的属性， 只需将文字所在的图层置为当前图层，然后在文字 工具的选项栏中单击 按钮，或在菜单栏中选择 【窗口】/【字符】或【段落】命令，打开【字符】 和【段落】面板进行设置即可。如果要设置部分文 字的属性，需要先选中这些文字。
图像收缩。在菜单栏中选择【选择】/【修改】】/ 【收缩】命令，打开【收缩选区】对话框，将收缩 量设置为“5” 。
选择和拷贝图像。在菜单栏中选择【选择】/【全部】 命令选择图像，然后选择【编辑】/【拷贝】命令复 制图像。 如果要选择整幅图像，可以在菜单栏中选择【选择】 /【全部】命令，要取消选择可以选择【选择】/【取 消选择】命令或直接用鼠标单击图像，要再次选择 已经取消的选择，可以选择【选择】/【重新选择】 命令，如果在图像中选择了部分区域，此时要将所 选择区域以外的区域选择，可以选择【选择】/【反 向】命令。
54编辑图像调整图像大小调整画布大小创建新图层编辑普通文字栅格化文字创建渐变效果设置图层样式旋转画布自由变换图像变换图像羽化图像裁剪图像描边选区541调整图像大小调整图像大小是图像编辑的基本操作对于特别大的图像经常需要进行缩小操作对于特别小的图像有时需要放大操作
网页设计与制作
第5章
网站图像设计与应用
椭圆选框工具。在工具箱中选择椭圆选框工具，设 置选项栏的属性，然后按住Shift键不放，在图像窗 口左端绘制一个正圆形选区。
油漆桶工具 。在工具箱中选择油漆桶工具，然后设 置其前景色为“#ff9966”，接着在正圆形选区内单击 鼠标填充颜色。
【编辑】/【填充】命令。填充选区就是在选区的内 部填充颜色或图案。除了使用油漆桶工具来填充选 区颜色外，还可以在菜单栏中选择【编辑】/【填充】 命令进行填充。使用该命令不仅可以填充前景色、 背景色和图案，还可以设置填充颜色或图案的混合 模式和不透明度。
5.4.2
调整画布大小
除了调整图像大小外，有时也会遇到需要调整画布 大小的情况。画布是图像的可编辑区域，可以调整 画布的大小以满足设计需要。方法是，打开图像， 然后选择【图像】/【画布大小】命令打开【画布大 小】对话框，重新设置画布大小等参数即可。 默认情况下，画布大小与图像大小是相等的。当调 整图像尺寸时，图像会相应放大或缩小。当改变画 布尺寸时，只会裁切或扩展画布，而图像本身不会 被缩放。
5.4.7
设置图层样式
图层样式主要包括投影、阴影、发光、斜面和浮雕 以及描边等。利用图层样式可以对图层中的图像快 速应用效果，通过【图层样式】面板还可以查看各 种预设的图层样式，并且仅通过单击鼠标即可在图 像中应用样式，也可以通过对图层中的图像应用多 种效果创建自定样式。 选中图像右侧文字所在的图层，在菜单栏中选择 【图层】/【图层样式】/【描边】命令，打开【图层 样式】对话框，将描边大小设置为“2”，描边颜色 设置为白色。
5.4.3
创建新图层
图层是利用Photoshop CS5进行图形绘制和图像处理的最基础 也是最重要的功能，可以说每一幅图像的处理都离不开图层 的应用。引入图层，可以将图像中各个元素分层处理和保存， 从而使图像的编辑处理具有很大的弹性和操作空间。每个图 层相当于一个独立的图像文件，几乎所有的命令都能对某个 图层进行独立的编辑操作。可以将图层想像成是一张张叠起 来的透明画纸，如果图层上没有图像，就可以一直看到底下 的背景图层。 对图层的操作主要通过【图层】面板进行。【图层】面板是 一个相当重要的控制面板。它的主要功能是显示当前图像的 所有图层、图层样式、图层混合模式及【不透明度】等参数 的设置，以方便设计者对图像进行调整修改。
本章主要介绍使用Photoshop CS5处理图 像、使用Dreamweaver CS5在网页中插入和设 置图像的基本方法。
学习目标
了解Photoshop CS5的工作界面。 掌握创建和存储图像文件的方法。 掌握编辑图像的基本方法。 掌握在网页中插入和设置图像的方法。
5.1 设计思路
本章将使用Photoshop CS5来设计“梦想集团”网站 的网站标识等图像，通过网站标识等图像的设计与 制作来学习Photoshop CS5的基本操作方法。在制作 网站标识的过程中，将会涉及到创建和存储图像、 编辑图像等基本知识。在图像设计完毕后，接着在 Dreamweaver CS5网页文档中插入制作好的图像， 使网页更漂亮。
创建选区。简单地讲，创建选区就是为图像的局部 区域筑起一道封闭的“墙”。当用户只对图像中的 某个区域进行复制、删除、填充等操作时，可以先 创建该区域的选区，然后再编辑，这样只会改变选 区内的图像，而选区外的图像不会受到影响。由此 可见，选区的创建质量将直接影响到图像处理质量。 在Photoshop中，创建选区的方法有多种，可以使用 选区工具直接创建选区，也可以使用命令来创建选 区。 当在工具箱中选择选区工具按钮时，在选项栏会显 示该工具的属性参数，可以根据实际需要进行设置， 然后再创建选区。
文字图层经过栅格化变为普通图层后，就可以使用 画笔等工具进行绘画了。
5.4.6
创建渐变效果
在图像中，图层蒙版中颜色的变化使其所在图层图 像的相应位置产生透明效果。恰当地使用图层蒙版， 会创建出许多意想不到的效果。 在【图层】面板中单击 按钮添加图层蒙板，在工 具箱中选择 （渐变工具）按钮，进行属性设置。 按住鼠标左不放，在图像左侧“梦想集团”文字处 从右向左划出一条渐变线的位置，需要 将光标放在文字的下方，当光标呈现 形状时，按 下鼠标左键并拖动即可，或按住Ctrl键，将光标放在 文字上，然后按下鼠标左键并拖动也可移动文字。 如果要在确认操作后移动文字，需要在工具箱中选 择 工具，然后在【图层】面板中选中文字图层， 在窗口中用鼠标左键拖动文字即可。 将鼠标光标移至图像窗口的右侧位置，按住鼠标左 键不放绘制矩形框，然后释放鼠标创建一个具有8个 控制点的文本框，在文本框内输入段落文本，输入 完毕后，按Ctrl+Enter 组合键确认输入操作。
5.3
新建和存储文件
新建文件 存储文件
5.3.1
新建文件
在菜单栏中选择【文件】/【新建】命令，打开【新 建】对话框。
5.3.2
存储文件
在菜单栏中选择【文件】/【存储为】命令，打开 【存储为】对话框。
对于新建的空白文件没有进行任何编辑操作，在保存 时只能选择【存储为】命令。如果新建文件后进行了 编辑操作，在保存时使用【存储】和【存储为】命令 的性质是一样的，都是为当前文件命名并进行保存。 但对于打开已存在的文件进行编辑后再保存，就要分 清使用【存储】命令和【存储为】命令的异同了， 【存储】命令是将文件以原文件名进行保存，而【存 储为】命令可将修改后的文件重命名后进行保存。
5.4.8
旋转画布
在编辑图像时可能会需要对画布进行旋转，例如， 180º 旋转、90º 旋转、任意角度翻转、水平翻转和垂 直翻转等。 打开图像，在菜单栏中选择【图像】/【图像旋转】/ 【任意角度】命令，打开【旋转画布】对话框，并 设置相应的参数。 特别要提醒读者的是，这里的旋转是指对整个画布 的操作，当执行相应命令时，无论当前图层是哪个 图层，都将对所有图层起作用，包括背景图层。
5.4
调整图像大小 调整画布大小 创建新图层 编辑普通文字 栅格化文字 创建渐变效果 设置图层样式 旋转画布 自由变换图像 变换图像 羽化图像 裁剪图像 描边选区
编辑图像
5.4.1
调整图像大小
调整图像大小是图像编辑的基本操作，对于特别大 的图像经常需要进行缩小操作，对于特别小的图像 有时需要放大操作。 在菜单栏中选择【图像】/【图像大小】命令，打开 【图像大小】对话框， 根据需要进行设置。 修改【宽度】和【高度】参数后，从【图像大小】 对话框的【像素大小】组名后面可以看到修改后图 像大小为“293.0K”，括号内的“58.6K”表示图像的 原来大小。 在改变图像文件的大小时，如果图像由大变小，其 印刷质量不会降低。如图像由小变大，其印刷品质 将会下降。
创建变形文字。在工具箱中再次单击【横排文字工 具】按钮，然后在选项栏中单击按钮打开【变形文 字】对话框，在【样式】下拉列表中选择“贝壳”。
利用【变形文字】命令可以在保持文字可编辑的状 态下，使用系统提供的15种不同的变形样式将文字 扭曲为不同的形状，使其呈现弧形、旗帜等特殊效 果。
5.4.5
栅格化文字
常用的图层类型主要分为背景图层、普通图层、调 节图层、效果图层、形状图层、蒙版图层以及文本 图层等几大类。 图层的基本操作包括图层的创建、显示或隐藏、复 制与删除、链接与合并、对齐与分布等。
5.4.4
编辑普通文字
文字在图像中往往起着画龙点睛的作用，一件完整 的作品都需要有文字内容来说明主题或通过特殊编 排的文字来衬托整个画面。 在工具箱中单击（横排文字工具）按钮，然后在选 项栏中设置文字属性。 文字属性设置完毕后，将鼠标光标移至图像窗口中 并单击鼠标，确认一个插入点，在出现闪烁的光标 后输入文字。 输入完毕后，按Ctrl+Enter 组合键确认输入操作，此 时在【图层】面板中系统将自动创建一个文本图层。
不能使用画笔工具、铅笔工具、渐变工具等绘画工具 直接在文本图层上绘画，也不能直接对其应用滤镜操 作。要解决这个问题，需要将文本图层进行栅格化处 理。 保证文本图层处于选中状态，在菜单栏中选择【图层】 /【栅格化】/【文字】或【图层】命令，或在【图层】 面板的文字图层上单击鼠标右键，在弹出的快捷菜单 中选择【栅格化文字】命令对文字进行栅格化。在菜 单栏中选择【图层】/【栅格化】/【图层】命令，或在 【图层】面板的文字图层上单击鼠标右键，在弹出的 快捷菜单中选择【栅格化文字】命令都可对文字进行 栅格化。文本图层一旦经过栅格化被转换为普通图层 后，用户将无法再编辑文本内容。
5.2.2
工具箱
工具箱默认位于工作界 面的左侧，包含 Photoshop CS5的各种图 形绘制和图像处理工具。
5.2.3
选项栏
选项栏位于菜单栏的下方，显示工具箱中当前选择 工具的参数和选项设置。在工具箱中选择不同的工 具时，选项栏中显示的选项和参数也各不相同。
5.2.4
控制面板
控制面板默认位于工作界面的右侧，在Photoshop CS5中共提供了25种控制面板。利用这些控制面板可 以对当前图像的色彩、样式、图层以及相关的操作 等进行设置。 在实际工作中，为了操作方便，经常需要调出某个 控制面板、调整工作界面中部分面板的位置或将其 隐藏等。在菜单栏中选择【窗口】命令将会弹出下 拉菜单，该菜单包含Photoshop CS5的所有控制面板。 在默认状态下，控制面板都是以组的形式堆叠在绘 图窗口的右侧。
通过控制点，可以调整文本框的大小。将鼠标光标放置在段 落文本框的控制点上，当鼠标光标呈双向箭头时按下鼠标左 键并拖动可调整文本框的大小。将鼠标光标放置在文本框的 内部，按住Ctrl键的同时，按下鼠标左键并拖动可以移动文本 框的位置。将鼠标光标移至文本框的外侧，当鼠标光标呈 形 状时，按下鼠标左键并拖动可以旋转文本框。 选择文字工具后，按住Alt键的同时，在图像窗口中绘制矩形 文本框，此时的矩形文本框将以最初鼠标光标所在的位置为 中心，停止汇制时将弹出【段落文字大小】对话框，并显示 当前所汇制矩形文本框的宽度和高度，当然也可以从中精确 调整矩形文本框的大小。
5.2
认识Photoshop CS5
工作界面 工具箱 选项栏 控制面板
5.2.1
工作界面
启动Photoshop CS5，在菜单栏中选择【文件】/【打 开】命令，在文档窗口中打开一幅图像。
Photoshop CS5工作界面按其功能可分为标题栏、菜单栏、选项 栏、工具箱、控制面板、文档窗口、文档标题栏、文档状态栏 等几部分，下面对其功能进行简要说明。 •标题栏：主要用来放置常用工具和命令。 •菜单栏：主要用来放置所有菜单命令。 •选项栏：又称属性栏，主要用来设置所选择工具的属性参数。 •工具箱：主要用来放置所有工具按钮。 •控制面板：除了工具箱和选项栏外的其他面板放置于此。 •文档窗口：即图像处理工作区，其顶端是文档标题栏，主要 用来显示图像文件名称、当前缩放百分比、颜色模式和位深等， 其底部是文档状态栏，主要用来显示当前图像相关状态和编辑 信息等。