第18章 Dreamweaver与Photoshop的完美结合

Presentation on theme: "第18章 Dreamweaver与Photoshop的完美结合"— Presentation transcript:

1 第18章 Dreamweaver与Photoshop的完美结合
Dreamweaver CS4和Photoshop CS4都是Adobe Creative Suite 4的组件，两者的整合可以提高网页 制作和图像处理的效率。本章将主要介绍在 Dreamweaver CS4中插入Photoshop图像，复制 Photoshop选区到Dreamweaver CS4页面中以及使用 Photoshop CS4制作切片。

2 18.1 在Dreamweaver中插入Photoshop 图像
在Dreamweaver CS4中可以直接插入Photoshop的源 文件，也就是“.psd”格式的图像。系统会自动生 成相应的Web图像。 可以将Photoshop选区复制到页面中。

3 18.2 改变图像大小 “图像”菜单｜“图像大小” 。

4 18.3 抠图 使用套索工具选择选区。 复制选区。 粘贴到目标位置。

5 18.4 添加蒙板 方法很多，介绍两种常用的方法： 使用选框工具选择区域｜“图层”｜ “图层蒙板”｜“显示选区”｜“滤 镜”｜“模糊”｜“高斯模糊”。

6 18.4 添加蒙板 单击图层面板中的“蒙板”按 钮 ｜再单击工具面板中的“画笔 工具”｜颜色选择为黑色｜再设置画 笔的硬度和不透明度｜在图层上拖动 鼠标。 注： 黑色：遮住 白色：显示

7 18.5 改变图层的颜色 方法很多，如： 选中图层｜“图像”｜“调整”｜“色相/饱和 度” 选中图层｜“图像”｜“调整”｜“渐变映射”
18.5 改变图层的颜色 方法很多，如： 选中图层｜“图像”｜“调整”｜“色相/饱和 度” 选中图层｜“图像”｜“调整”｜“渐变映射” 选中图层｜“图像”｜“调整”｜“色彩平衡”

8 18.6 在图层上输入并格式化文本 使用工具面板上文本工具输入文字 文字的格式 选中文本 单击工具栏上的设置按钮

9 18.7 图片的剪切 有时我们只需要图片中的一部分，这时可以使用剪切 工具把无用的部分剪掉。方法如下： 单击工具面板中的剪切工具按钮
18.7 图片的剪切 有时我们只需要图片中的一部分，这时可以使用剪切 工具把无用的部分剪掉。方法如下： 单击工具面板中的剪切工具按钮 在图层中拖动鼠标 回车确定

10 18.8 区域擦除 有时从网上下载的图片中，有我们不需要的东西，就 可以使用污点修复工具把它擦除。方法如下： 选中图层
18.8 区域擦除 有时从网上下载的图片中，有我们不需要的东西，就 可以使用污点修复工具把它擦除。方法如下： 选中图层 单击工具面板中的“污点修复工具”按钮 在图层中拖动鼠标

11 18.9 区域复制 有时需要复制图片中的一部分时，就需要使用仿制图 章工具进行区域复制。方法如下： 选中图层
18.9 区域复制 有时需要复制图片中的一部分时，就需要使用仿制图 章工具进行区域复制。方法如下： 选中图层 单击工具面板中的“仿制图章工具”按钮 在工具栏中选择画笔的大小 按下Alt键，再单击要复制的区域 在目标区域单击

12 切片功能 Photoshop CS4具有切片功能，并能够方便地导出切 片（切割图片）以及包含切片的HTML文件。利用这种 方法可以快速生成网页。使用方法如下： 单击工具面板中的“切片工具” 在图层中拖动鼠标

13 在任一切片内单击右键会弹出如下菜单： 单击“编辑切片选项”弹出如下对话框：

14 “文件”｜“存储为Web和设备所用格式”

15 仅限图像(*.gif)：仅完成切割图片功能
HTML和图像(*.html)：完成切割图片和图片生成 网页双重功能