应用买例67优化图像网页制作(一) 目的:制作如图67.1所示的网页。 要点:本例中先完成背景的制作和对图像进 (ounter 行优化。主要应用Gradient Tool、 trike Motion Blur滤镜、 Shear滤镜、 Slice 分 tool等工具来制作完成 图67.1网页效果图 操作步骤 1.新建一副800×600像素大小的图 像,背景色为白色。 2.在 Layers面板中单击 Create new layer图标,新建一个图层取名为Layer 3.选择Edit Fill命令,在对话框中选 择用黑色填充,如图67.2所示。 图672新建图层 4.在 Layers面板中单击 Create new layer图标,新建一个图层取名为 Layer2 5.在工具箱中选Rectangular Marquee tool,在图像左上角画出一个小矩形。 6.选择 Edit Fill命令,在对话框中选 择用白色填充选区,如图67.3所示。 图67.3填充选区 7.打开 Actions面板,单击 Create new action图标新建一个动作 Action。然后回 到 Layers面板,按住Alt和 Shift键拖动白 色矩形向下移动,复制产生一个新的图层, 然后将两图层合并。 8.回到Actions面板,单击Stop Playing/Recording图标,停止录制动作。然 后重复单击Play图标, Photoshop会自动复 图67.4使用动作
67 优化图像━━网页制作（一） 目的：制作如图 67.1 所示的网页。 要点：本例中先完成背景的制作和对图像进 行优化。主要应用 Gradient Tool、 Motion Blur 滤镜、Shear 滤镜、Slice Tool 等工具来制作完成。 图 67.1 网页效果图 操作步骤 1．新建一副 800×600 像素大小的图 像，背景色为白色。 2．在 Layers 面板中单击 Create a new layer 图标，新建一个图层取名为 Layer 1。 3．选择 Edit | Fill 命令，在对话框中选 择用黑色填充，如图 67.2 所示。 4．在 Layers 面板中单击 Create a new layer 图标，新建一个图层取名为 Layer 2。 5．在工具箱中选 Rectangular Marquee Tool，在图像左上角画出一个小矩形。 6．选择 Edit | Fill 命令，在对话框中选 择用白色填充选区，如图 67.3 所示。 7．打开 Actions 面板，单击 Create new action 图标新建一个动作 Action 1。然后回 到 Layers 面板，按住 Alt 和 Shift 键拖动白 色矩形向下移动，复制产生一个新的图层， 然后将两图层合并。 8．回到 Actions 面板，单击 Stop Playing/Recording 图标，停止录制动作。然 后重复单击 Play 图标，Photoshop 会自动复 图 67.2 新建图层 图 67.3 填充选区 图 67.4 使用动作
第十六篇网页制作 新概念百例 制白色矩形并且合并图层,如图674所示 9.按住At和 Shift键拖动竖排矩形的 图像向右移动,复制产生一个图层,然后将 两个白色矩形的图层和 Layer1合并,如图 67.5所示。 10.在工具箱中选择 Rectangular Marquee Too,在两排小矩形中间画出矩形 选框,按 Delete键删除区域。 图67.5复制图像 11.打开 Actions面板,单击 Create new action图标新建一个动作 Action2。然后回 到 Layers面板,拖动矩形选框向下移动, 然后按 Delete键删除选框内区域 12.回到 Actions面板,单击Stop Playing/ Recording图标,停止录制动作。然 后重复单击Play图标, Photoshop会自动移 动选区并删除选区内图像,如图676所示 图676使用动作 13.在工具箱中选择 Magic Wand Tool, 在上方控制栏中去掉 Contiguous,然后用在 白色小矩形内单击,选中两排矩形区域。 14.在工具箱中选 Gradient Tool,在对 话框中设置灰白相间的渐变色,然后由上至 下拖动鼠标渐变填充选区,如图677所示。 15.选择Fl|Open命令,打开一副 图片。按住Crl+A全选图像。选择Edt 图67.7渐变填充 Copy命令,将图像拷贝至剪贴板中 16.回到原来编辑的图像,选择 Edit I Paste命令,将图像粘贴过来,并且移动到 Layer I的下方。选择Edt| Free Transform 命令,调整图像的大小 17.再打开4幅图像,填充满电影胶 片的5个空白区域,然后将刚拷贝过来的5 幅图象和 Layer1图层合并,如图678所示。 18.选择Fl|Open命令,打开一副 图67.8拷贝图像
第十六篇 网页制作 新概念百例 121 制白色矩形并且合并图层，如图 67.4 所示。 9．按住 Alt 和 Shift 键拖动竖排矩形的 图像向右移动，复制产生一个图层，然后将 两个白色矩形的图层和 Layer 1 合并，如图 67.5 所示。 10．在工具箱中选择 Rectangular Marquee Tool，在两排小矩形中间画出矩形 选框，按 Delete 键删除区域。 11．打开 Actions 面板，单击 Create new action 图标新建一个动作 Action 2。然后回 到 Layers 面板，拖动矩形选框向下移动， 然后按 Delete 键删除选框内区域。 12．回到 Actions 面板，单击 Stop Playing/Recording 图标，停止录制动作。然 后重复单击 Play 图标，Photoshop 会自动移 动选区并删除选区内图像，如图 67.6 所示。 13．在工具箱中选择 Magic Wand Tool， 在上方控制栏中去掉 Contiguous，然后用在 白色小矩形内单击，选中两排矩形区域。 14．在工具箱中选 Gradient Tool，在对 话框中设置灰白相间的渐变色，然后由上至 下拖动鼠标渐变填充选区，如图 67.7 所示。 15．选择 File | Open 命令，打开一副 图片。按住 Ctrl+A 全选图像。选择 Edit | Copy 命令，将图像拷贝至剪贴板中。 16．回到原来编辑的图像，选择 Edit | Paste 命令，将图像粘贴过来，并且移动到 Layer 1 的下方。选择 Edit | Free Transform 命令，调整图像的大小。 17．再打开 4 幅图像，填充满电影胶 片的 5 个空白区域，然后将刚拷贝过来的 5 幅图象和 Layer 1 图层合并，如图 67.8 所示。 18．选择 File | Open 命令，打开一副 图 67.5 复制图像 图 67.6 使用动作 图 67.7 渐变填充 图 67.8 拷贝图像
新概念百例 入门·创作·提高— Photoshop70 人物头像图片。拷贝过来并置于 Layer I的 上方 19.在 Layers面板中单击 Add layer ask)图标,添加蒙板。然后使蒙板处于编 辑状态,选择适当的虚化笔刷,使人物头像 的边缘与黑色背景之间柔和过渡,如图679 所示。 图679编辑蒙板 20.在 Layers面板中单击 Create a new ayer图标,新建一个图层type 21.选择Edt|fFⅢ命令,在对话框中 选择用白色填充选区 22.选择 Filter I Distort Shear命令, 在对话框中调整曲线的形状,使细长条白色 图案变成“C”的形状,如图67.10所示。 23.在 Layers面板中单击 Create a ney 图67.10切变滤镜 layer图标,新建一个图层 typel 24.按照上面同样的方法做出一个类 ounter 似 的图像。然后在工具箱中选择 Horizontal Type Tool添加文字,然后合并所 有文字图层,取名为Type,效果如图67ll 所示 25.选择 File New命令,新建一个50 图671完成其它文字 ×100像素大小的图像,背景为 Transparent 26.按住CtrH+A全选图像。然后选择 Select Transform Selection命令,调整选区 至一半大小,如图67.13所示。 27.在工具箱中将前景色设为R:216 图67.12变换选区 G:133、B:0。选择Edit|Fl命令,在对 话框中选择用前景色,如图67.14所示 28.选择 Image Image Size命令,调 整图像宽度为3px,高度为6px,缩小图像 图6713定义图案 29.选择Edt| Define pattern命令,弹 出 Define pattern对话框,给图案取名为
122 新概念百例 入门·创作·提高━━Photoshop7.0 人物头像图片。拷贝过来并置于 Layer 1 的 上方。 19．在 Layers 面板中单击 Add layer mask）图标，添加蒙板。然后使蒙板处于编 辑状态，选择适当的虚化笔刷，使人物头像 的边缘与黑色背景之间柔和过渡，如图 67.9 所示。 20．在 Layers 面板中单击 Create a new layer 图标，新建一个图层 type。 21．选择 Edit | Fill 命令，在对话框中 选择用白色填充选区。 22．选择 Filter | Distort | Shear 命令， 在对话框中调整曲线的形状，使细长条白色 图案变成“C”的形状，如图 67.10 所示。 23．在 Layers 面板中单击 Create a new layer 图标，新建一个图层 type1。 24．按照上面同样的方法做出一个类 似于“S”的图像。然后在工具箱中选择 Horizontal Type Tool 添加文字，然后合并所 有文字图层，取名为 Type，效果如图 67.11 所示。 25．选择 File| New 命令，新建一个 50 ×100 像素大小的图像，背景为 Transparent。 26．按住 Ctrl+A 全选图像。然后选择 Select | Transform Selection 命令，调整选区 至一半大小，如图 67.13 所示。 27．在工具箱中将前景色设为 R：216、 G：133、B：0。选择 Edit | Fill 命令，在对 话框中选择用前景色，如图 67.14 所示。 28．选择 Image | Image Size 命令，调 整图像宽度为 3px，高度为 6px，缩小图像。 29．选择 Edit | Define Pattern 命令，弹 出 Define Pattern 对话框，给图案取名为 图 67.9 编辑蒙板 图 67.10 切变滤镜 图 67.11 完成其它文字 图 67.12 变换选区 图 67.13 定义图案
第十六篇网页制作 浙桃念百例(∞ 30.回到原先编辑的图像,在 Layers orator 面板中单击 Create a new layer图标,新建 个图层line 31.在工具箱中选择 Rectanglar Marquee Tool画出一个长方形的矩形选区 选择Edt|Fl命令,在对话框中设置用 图67.14填充图案 “ Strip”图案填充, Opacity为100%,效果 如图67.14所示 32.按Ctrl+D键取消选区。选择 Filter Blur| Motion blur命令,在对话框中设置 outer Angle为0度, Distance为300,对图像进 )trike 行动感模糊。 33.在 Layers面板中单击 Add layer mask图标,添加蒙板。然后使蒙板处于编 辑状态,选择适当虚化笔刷,使抽线区域的 图67.15编辑蒙板 左侧与胶片之间均匀过渡,如图67.15所示。 34.在 Layers面板中单击 Add a layer style图标,选择 Drop Shadow,参数为默认 ounter 值,使文字产生投影效果,如图6716所示。 然后添加一些文字,如图6717所示 35.在工具箱中单击 Jump to imageready图标,打开 Imageready对图像 图67.16投影效果 进行编辑 36.现在在 Optimize面板中我们可以 看到图像的默认格式是Gif,对于一些色彩 ounter 不丰富的图案,我们把它存为Gif格式。 trike 些色彩丰富的图案,则要存为JPEG格式 37.在工具箱中选择 Slice tool在图像 左上方的图片处画出矩形区域,并且调整大 小。在 Optimize面板中的下拉菜单中将图 图67.17添加文字 像格式设为JPEG格式。在下方的 Slice面 板中还可以在URL文本框中输入链接。如
“Strip”。 30．回到原先编辑的图像，在 Layers 面板中单击 Create a new layer 图标，新建一 个图层 line。 31．在工具箱中选择 Rectanglar Marquee Tool 画出一个长方形的矩形选区。 选择 Edit | Fill 命令，在对话框中设置用 “Strip”图案填充，Opacity 为 100%，效果 如图 67.14 所示。 32．按 Ctrl+D 键取消选区。选择 Filter | Blur | Motion Blur 命令，在对话框中设置 Angle 为 0 度，Distance 为 300，对图像进 行动感模糊。 33．在 Layers 面板中单击 Add layer mask 图标，添加蒙板。然后使蒙板处于编 辑状态，选择适当虚化笔刷，使抽线区域的 左侧与胶片之间均匀过渡，如图 67.15 所示。 34．在 Layers 面板中单击 Add a layer style 图标，选择 Drop Shadow，参数为默认 值，使文字产生投影效果，如图 67.16 所示。 然后添加一些文字，如图 67.17 所示。 35．在工具箱中单击 Jump to Imageready 图标，打开 Imageready 对图像 进行编辑。 36．现在在 Optimize 面板中我们可以 看到图像的默认格式是 Gif，对于一些色彩 不丰富的图案，我们把它存为 Gif 格式。一 些色彩丰富的图案，则要存为 JPEG 格式。 37．在工具箱中选择 Slice Tool 在图像 左上方的图片处画出矩形区域，并且调整大 小。在 Optimize 面板中的下拉菜单中将图 像格式设为 JPEG 格式。在下方的 Slice 面 板中还可以在 URL 文本框中输入链接。如 图 67.14 填充图案 图 67.15 编辑蒙板 图 67.16 投影效果 图 67.17 添加文字 第十六篇 网页制作 新概念百例 123
新概念百例 入门·创作·提高— Photoshop70 图67.18所示 38.按照同样的方法,对图像中其它4 幅图片和图像右下方的人物图像画出切片, Lx⊥ke 并将格式设为JPEG格式,如图6719所示 39.单击Fie菜单,选择Save ptimized命令,将图像存储为Huml格式。 我们可以看到,图像的大小由原来的617k 变为了现在的199k。至此,页面制作和图 图67.18画出切片区域 像优化完毕,最终效果如图67.1所示 tr⊥ke 图67.19完成图像优化
124 新概念百例 入门·创作·提高━━Photoshop7.0 图 67.18 所示。 38．按照同样的方法，对图像中其它 4 幅图片和图像右下方的人物图像画出切片， 并将格式设为 JPEG 格式，如图 67.19 所示。 39．单击 File 菜单，选择 Save Optimized 命令，将图像存储为 Html 格式。 我们可以看到，图像的大小由原来的 617k 变为了现在的 199k。至此，页面制作和图 像优化完毕，最终效果如图 67.1 所示。 图 67.18 画出切片区域 图 67.19 完成图像优化