中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited

17.3 \\17\.png
\\17\.psd
17.3.1  \\17\

17-64 17-67
图17-64 钢笔工具属性栏

17-65
17-66

图17-67 宣传海报效果

Step 1 1 0 0 0 ×1200

图17-65 未选中效果 图17-66 选中的效果
336

#efb82e17-68 Step 4 .png
17-73

2
4
#ffffff 17-74

Step 2 图17-68 设置背景色
Ctrl+Delete

图17-73 添加素材 图17-74 设置描边参数

17-69Shift+Alt Step 5
17-70 /
/
17-76
1
17-75
21

图17-69 绘制矩形 图17-70 复制并移动选区

Step 3 1 图17-75 定位锚点 图17-76 绘制第1条线条
30%17-71
17-72

图17-71 设置不透明度 图17-72 查看效果 Step 6
17-77

17-78

337

Ctrl
17-79

图17-77 添加锚点 图17-78 完成绘制 图17-79 调整路径 图17-83 选择命令 图17-84 填充路径
Step 7 Step 10 2 3
17-80Ctrl+T
17-85
17-81 17-86

图17-80 查看路径 图17-81 调整路径 图17-85 复制并调整图层 图17-86 绘制形状
Step 8 Step 11 10%

17-82 #9bf6f0

17-87

17-88

图17-82 存储路径

Step 9
17-83

17-84 图17-87 设置图层不透明度 图17-88 涂抹白色区域
338

Step 12 17-89 17.3.2 
17-90

图17-89 添加文字 图17-90 最终效果 17-93
图17-93 添加锚点

17-94

17-91
17-92

图17-94 删除锚点

17.3.3 

图17-91 平滑点 图17-92 角点

转换点工具可以转换锚点的类型，可以使路径在 17-95
平滑的曲线和直线之间相互转换，也可调整曲线 17-96
的形状，选择工具箱中的“转换点工具” ，当
将鼠标光标移动至需要转换的锚点上，光标变为

形状时，单击鼠标即可完成转换。在转换为平
滑点的锚点上按住鼠标左键不放并拖动，将会出
现锚点的控制柄，该锚点两侧的曲线在拖动的同
时也会发生相应的变化。

339

图17-95 选中锚点 图17-96 移动路径段 图17-99 变换路径

17.3.4  17.3.6 

17-97 17-100
17-98

图17-97 选择命令 图17-100 路径和选区的互换

图17-98 复制路径 17.3.7 

17.3.5  17-101

读书笔记

17-99
340

17.3.8 

17-102

图17-101 “填充路径”对话框

50%
9
/

图7-102 “描边路径”对话框

17.4 // //
17-103
17.4.1 
图17-103 “亮度/对比度”对话框
/
1. /
/

341

17-10417-105 Step 1 .jpgCtrl+J
/
/
17-109 17-108

图17-104 调整前 图17-105 调整后

2.

图17-108 “色阶”对话框 图17-109 取色
17-
Step 2 216
0 1.77
110
80%17-111

\\17\.jpg .jpg
\\17\.psd
\\17\

17-10617-107

图17-110 输入色阶值 图17-111 设置图层不透明度

Step 3 / /

0 +38 0 +8
17-112
图17-106 调整前
+32+40 -381017-113

图17-107 调整后 图17-112 设置红色 图17-113 设置黄色
342

Step 4 +54 17-114 17-118
+75
-68 0
17-115

图17-118 设置黑场

图17-114 调整蓝色 图17-115 调整后的效果 17-119

17-116 图17-119 设置灰场
17-117 17-120

图17-120 设置白场

图17-116 图像变暗 图17-117 图像变亮 读书笔记

Photoshop 3.

343

// Ctrl+M
17-121

图17-124 编辑点以修改曲线
17-125

图17-125 通过手绘来修改曲线

图17-121 “曲线”对话框

17-122
17-123

图17-122 反冲效果 图17-123 增强对比度效果

17-124
344

17.4.2  图17-128 调整后

Photoshop CC/ 2. /
1. /

// \\17\.jpg 17-129
17-126 \\17\.psd
\\17\
图17-126 “自然饱和度”对话框
17-130

图17-129 调整前

17-12717-128 图17-130 调整后
图17-127 调整前

345

Step 1 .jpg /
//
/
+10
+22 -7017-131

图17-133 调整后的效果

/

Step 2 图17-131 调整色相/饱和度 8
+45 -4 +33 17-134
17-132 17-135

17-137

图17-134 不同的预设 图17-135 原图

图17-132 选择并设置通道

除了选择不同的颜色通道外，还可选择“全图” 图17-136 深褐效果 图17-137 黄色提升效果
选项，此时可以对图像中所有颜色的色相、饱和
度、明度进行调整。

Step 3 /
17-133

346

17-138 Step 1 .jpg /
17-139 / -72 -34 -1117-143
17-140
17-144

图17-138 原图 图17-139 增大 图17-140 减少
饱和度 饱和度

图17-143 调整阴影 图17-144 效果
Step 2 -9 -2017-145
+37

17-146

17.4.3 

Photoshop

1.

图17-145 调整中间调 图17-146 效果

Step 3 / /

-11 +12 -33

\\17\.jpg -2817-147
\\17\.psd 17-148
\\17\

17-14117-142

图17-147 可选颜色 图17-148 效果

图17-141 调整前 图17-142 调整后

347

17-149 12
17-150 17-153

17-15417-156
3

图17-149 增强洋红的效果 图17-150 增强绿色的效果

17-151 图17-153 “预设”选项 图17-154 蓝色滤镜效果

图17-155 红外线效果 图17-156 最白效果
6
图17-151 对高光色调增强蓝色前后的效果
17-157
2. 200%17-158

-100%

/ 图17-157 洋红色为200% 图17-158 绿色为-100%
/
17-152 图17-152 “黑白”对话框 17-159

348

读书笔记

图17-159 色调效果

知识大爆炸
——高级绘图方式

1.

17-160

/ 17-161
/ 17-162

图17-160 吸管工具取色 图17-161 “颜色”面板 图17-162 “色板”面板

2.
Photoshop CC

17-163

图17-163 画笔工具属性栏

3.

Photoshop
//

349

入门篇/Introductory

Chapter

1807 08 09 10 11 12 13 14 15 16 17

350

18.1 Step 2 图18-2 创建参考线
18-3
18.1.1 

Photoshop CC

\\18\.psd
\\18\.psd2.psd
\\18\

18-1

Step 1 图18-1 创建切片后的效果 图18-3 创建切片
// .psd
/
18-2 读书笔记

创建参考线即是思考如何切片的过程，同时在切 Step 3
片时也方便进行切片。在切片过程中，为了使操 Photoshop
作更精确，需将编辑窗口放大后再进行切片。 18-4

351

URL 2.psd

图18-4 创建其他切片 \\18\2.psd
\\18\3.psd
Step 4 Ctrl+; Ctrl+; \\18\
Shift+Ctrl+S
18.1.1
2.psd
F7 Step 1 2.psd
03
18-5 18-8
18-6

图18-5 隐藏图层 图18-6 查看隐藏后的效果 图18-8 选择“编辑切片选项”命令
Step 5 18-7
Step 2
form_bg
18-9

图18-7 切片表单容器的背景 图18-9 “切片选项”对话框

18.1.2 

352

Step 3 bg_left
01 02 04 05bg_top
bg_right bg_bottom
18-10

图18-12 调整切片

18-13

图18-10 完成修改 图18-13 移动切片
Delete
切片名称应与实际信息关联，以便通过名称能知
道图像的功能或位置，并且一定要使用英文或数 18-14
字命名，不能使用中文命名。

18.1.3 

Photoshop

图18-14 删除切片

Shift 读书笔记
18-11

图18-11 选择切片
18-12

353

18.2

18.2.1  Dreamweaver
图18-16 显示四联
/ 18-15
Web

Web

显示选项 优化的图像 颜色表菜单 优化菜单

在浏览器中预览效果 状态栏 动画控件 Alt

图18-15 “存储为Web所用格式”对话框

Web

4

18-16
354

GIFPNG-8
/

/

18-17

/

Web Web

5 9

图18-17 在浏览器中进行浏览 2. JPEG
JPEG
18.2.2  Web JPEG18-20JPEG

Photoshop CCWeb

1. GIFPNG-8 图18-20 JPEG格式
Web
GIF
PNGGIF
18-1818-19

JPEG
/

图18-18 GIF格式 图18-19 PNG-8格式

355

JPEG \\18\.psd
\\18\\
3. PNG-24 \\18\
PNG-24
256JPEG Step 1 .psd
18-21PNG-24
18-23

图18-21 PNG-24格式 Step 2 图18-23 创建切片
01
4. WBMP
WBMP18-22 top_0118-24
WBMP
图18-24 编辑切片选项
图18-22 WBMP格式

18.2.3  Web

Web Web
HTML

image.html
356

Step 3 18-28
/ Web
18-25

图18-27 设置优化选项 图18-28 选择命令
Step 6

18-29

图18-25 选择“存储为Web所用格式”命令
Step 4 Web

18-26

图18-29 设置输出选项
Step 7 Web

HTML

18-30

图18-26 双联对比
Step 5 PNG-8

18-27

图18-30 设置保存的格式

357

Step 8 在“存储为Web所用格式”对话框中允许为每一
.html 个切片进行不同的属性设置，操作时应根据切片
images18-31 图像的实际情况进行设置。

读书笔记

图18-31 查看输出的效果

知识大爆炸
——切片和网页图像格式

1.
Dreamweaver

18-32

Dreamweaver 图18-32 切片后的图像效果
Dreamweaver
18-3312
358

18-34

图18-33 渐变色背景的切片方法 图18-34 重复对象的切片方法

2.

GIFJPGPNG

GIF GIFGIFGIFGIF

GIFGIFGIF

GIF

JPG JPGJPG

JPG

PNG PNG

PNG

PNGPNG

读书笔记

359

362
Chapter 19

380
Chapter 20

414

Chapter 21

432

Chapter 22

实战篇

Instance

>>>

实战篇/Instance

Chapter

19 20 21 22

制作

文本元素

的应用
19.1 Logo文件和图层 图像操作
的应用 的应用

LogoLogotype

\\19\.jpg After Logo
\\19\Logo.psd Photoshop CC
\\19\Logo LogoLogo
Logo
Step 1 Photoshop CC/
Step 3
logo Mead millet food restaurant
1200 19-3
600

19-1

图19-2 绘制路径 图19-3 输入路径文本
Step 4 /

Algerian52140
#ffa70019-4

19-5

图19-1 新建图像

Step 2 /

19-2

图19-4 设置文本属性 图19-5 查看文本
Step 5 .jpg 363

2

19-6 62 #91c611
logo.psd
logo.psd 19-12.jpg
1Ctrl+T 19-13

19-7

图19-6 获取叉子选区 图19-7 调整选区图层
Step 6 .jpg
图19-12 设置文本属性 图19-13 查看文本
19-8 Step 9 3 #ffffff
logo.psd
19-14
X19-9

图19-8 获取刀子选区 图19-9 调整刀子图层

Step 7 1
2
19-10
19-11

图19-14 渐变叠加

Step 10 6
#91c61119-15

读书笔记

图19-10 链接图层 图19-11 调整图层位置
Step 8

364

Step 11
19-16

图19-15 设置描边 图19-16 应用图层样式效果
Photoshop
19.2 文件和图层 图像操作 文本元素
的应用 的应用
的应用

After \\19\.psd
\\19\
Step 1 Photoshop CC/ 19-18
600500 Step 2
Alt
0

19-17

图19-17 新建图像 图19-18 转换背景图层

365

Step 3 / / Step 6
15%120
#ffffff °
2 19-22

#fcf2d5120%
19-19

图19-22 设置内阴影

Step 4 图19-19 设置渐变叠加 Step 7
#f8b551 #e79a26100%
50 119-23
19-20

Step 5 图19-20 绘制圆角矩形 图19-23 设置内发光样式
66%
6 Step 8
#cfcccc 20%
9019-21 19-24

图19-21 设置描边样式 图19-24 设置渐变叠加样式
366

Step 9 #939090 °19-28
11%47%
Shift 90
19-25

图19-25 绘制正圆

Step 10 -90°4 1 图19-28 设置描边
10%
19-26 Step 13
46%
50%119-29

图19-26 设置内阴影样式 图19-29 设置内发光样式

Step 11 Step 14 °
10%120 0% 019-30
16%19-27 4

图19-27 设置渐变叠加样式 图19-30 设置投影
Step 12 1

367

Step 15

19-31
19-32

图19-35 设置内阴影样式

图19-31 绘制阴影 图19-32 调整图层顺序 Step 19 Adobe

Step 16 Std4660
19-33 #8c540619-36ON
19-37

图19-33 绘制圆形

Step 17

100% #dfdddd 图19-36 设置文字属性 图19-37 输入文本
#f1efef19-34 Step 20

1
0%019-38

Step 18 图19-34 设置渐变叠加样式 1
8% 90°

0%019-35 图19-38 设置文本投影样式
368

Step 21 Step 22 A l t
19-39
19-41
019-40
#7bb812
#468d26

19-42

图19-39 查看效果 图19-40 新建组

图19-41 复制图层组 图19-42 制作OFF按钮

按钮上的文字颜色，可选择与按钮填充色相近的
色系，但颜色较深一些。

读书笔记

19.3 文件和图层 图像操作 文本元素
的应用 的应用 的应用

After \\19\.psd
\\19\

369

Step 1 Photoshop CC/
600 420 19-43

图19-45 新建图层 图19-46 绘制矩形选区

Step 4 #05375e#2a92e3

19-47

图19-43 新建图像 图19-47 填充对称渐变
Step 2 Ctrl+D/
#2e2e2e#1c1c1c

19-44

Step 5
/

60%#00000028
19-48

图19-44 填充径向背景

Step 3 图19-48 设置外发光样式

19-45 Step 6
19-46

370

50
19-49

图19-51 设置字符样式 图19-52 输入文本

导航条中的文本内容应该根据网站的性质进行分
类，如果公司是购物网站，则可以输入产品类
别、会员中心、我的订单、联系方式和在线留言
等内容；如果公司是企业网站，则可以输入产品
信息、促销信息和产品类别、企业信息等。

Step 9 /
19-53
//
/ 19-54

图19-49 “渐变编辑器”对话框

Step 7 1
#05375e19-50

图19-53 选择两个图层 图19-54 居中对齐图层

Step 8 图19-50 设置描边大小 Step 10
16 19-51 60 °2 12
19-52

371

19-55

图19-55 设置投影样式 图19-60 设置描边样式
2
Step 11 Step 14
19-56 19-61

19-57

图19-56 新建图层 图19-57 绘制矩形选区 图19-61 最终效果

Step 12 #044271#033a65

19-58
40%
19-59

图19-58 绘制线性渐变 读书笔记
Step 13
1#052b4819-60 图19-59 调整图层

372

19.4 文件和图层 影片剪辑 ActionScript
的应用 的应用
的应用

Flash

After \\19\.jpg
\\19\.fla
\\19\

Step 1 Flash CC/ Step 3 / /
// /
960608
#ffffff Flash19-62 2

/
19-64
.flv

Step 2 图19-62 新建文档
.jpg Ctrl+R

19-63

图19-64 选择视频

图19-63 导入背景图片 Step 4
19-65

373

Step 6
my_player
500
22019-67
19-68

图19-65 新建Div标签 图19-67 设置视频大小 图19-68 查看视频
ActionScript 3.0 Step 7 3

Step 5 19-69
19-66 3

19-70

图19-69 绘制矩形方块 图19-70 创建遮罩层
/
Step 8 4
Video

PlayButton
PauseButton19-71

图19-66 完成导入

读书笔记

图19-71 添加组件
374

Step 9 PlayButton Step 11 6
_play30 10
19-72PauseButton FlashCtrl+Enter
_pause
3019-73 19-75

图19-72 PlayButton设置 图19-73 PauseButton设置

Step 10 5 /

19-74

图19-74 输入控制代码 图19-75 预览效果

19.5 关键帧 引导动画 属性设置 Flash
Flash
的应用 的应用 的应用
\\19\.jpg.png
After \\19\.fla
\\19\

375

Step 1 Flash CC /

110045019-76

Step 4

图19-76 新建Flash文档 Alpha GB
Flash 100% A R G B
Step 2 2
1 0 255 255 25519-799
19-77 R
Ctrl+R 16819-80
.jpg

图19-79 编辑第2帧 图19-80 编辑第9帧

Step 5 15

RG B12519-81

25

RGB6519-82

图19-77 导入图片到舞台

Step 3

19-78

图19-81 编辑第15帧 图19-82 编辑第25帧
19-83
Step 6 38

RG B10

40

图19-78 查看导入后的效果 RGB619-84
376

图19-88 转换位图为元件

图19-83 编辑第38帧 图19-84 编辑第40帧 Step 10
19-85 19-8955
Step 7 55
19-90
R G B3

56

RGB019-86

图19-89 移动元件实例位置 图19-90 编辑第55帧

Step 11
3

图19-85 编辑第55帧 图19-86 编辑第56帧 19-91

Step 8 29

19-87

图19-91 绘制斜线

Step 12
3

Step 9 图19-87 创建传统补间动画 2 25
2 65 19-922 4
25Ctrl+R 55
.png 19-93
Step 13 41

19-88 30
19-94
19-95

377

19-101

图19-92 对齐起始点中心点 图19-93 对齐结束点中心点

图19-98 移动文本位置 图19-99 绘制色块

图19-100 移动色块位置 图19-101 绘制另一个色块
Step 17 56
图19-94 设置文本属性 图19-95 输入文本 19-102
Step 14 50
19-96
5 47

19-97

图19-96 编辑关键帧 图19-97 添加文本 Step 18 2 图19-102 编辑文本
Step 15 56 50% 65 7
19-98
6 34 19-103

Alpha

19-99 47 图19-103 “时间轴”面板
Step 16 47 Step 19 FlashCtrl+Enter
19-100 19-104
7

378

19.6 图19-104 预览效果
Flash
Photoshop

19.6.1

Photoshop19-105

图19-105 竖条广告条 \\19\.png
\\19\.psd
19.6.2 \\19\

Flash CCActionScript
19-106

图19-106 风景动画

\\19\.png
\\19\.fla
\\19\

379

实战篇/Instance

Chapter

2019 21 22

制作

20.1 文件和图层 图像操作 文本元素
的应用 的应用
的应用

Photoshop CC

banner

\\20\\\
\\20\.psd
\\20\

After

Step 1 Photoshop CC/ 955

952
20-1

图20-1 新建图像 图20-2 绘制参考线

Step 2 / Step 3
20-2 20-3

381

|| Step 5
20-4

#ff9933 6cb302 #e95470 #000000
40% 3 6
20-6
Logo20-7
3

图20-3 新建图层组 图20-4 输入文本

Step 4 .png

.psdEnter

20-5 图20-6 添加文本 图20-7 链接图层
图20-5 栅格化图层 Step 6

#99cc33
20-8Ctrl+D

Step 7 图20-8 绘制导航底纹
12 20-9
#ffffff

图20-9 添加文本和分割线

Photoshop Step 8
.psd 20-10

382 #33993320-11

图20-10 绘制路径 Step 11 .jpg
20-15

Step 9 图20-11 填充选区
#ffffff /
/
图20-15 添加风景图片
20-12
banner 涂抹蒙版区域时，应选择带有柔光的画笔样式，
20-13 且可根据需要设置不透明度的值，以使隐藏后的
效果更加美观。
图20-12 制作光照效果 图20-13 新建图层组
Step 12
Step 10 bgbanner .png
#000000
.jpg 20-16
//

banner20-14

图20-16 添加素材

图20-14 新建图层蒙版 Step 13
.png

20-17

383

30%
23220-20

图20-17 查看banner效果

Step 14

#dcdada

120-18 图20-20 设置投影样式
Photoshop
Step 17

#ffbe95
.png20-21

Step 15 图20-18 绘制分割线和文本框
#ff984b 6
20-19

Step 18 图20-21 添加其他元素
9494941 #edeeee

.png

图20-19 绘制圆角矩形 .png.png.png
20-22
Step 19

.psd.psd

Step 16 1 .png
20-23

384

4

图20-22 添加社区版块 图20-23 添加记录面板 Step 23
.png
Step 20
bg 20-27

#000000 图20-27 添加滚动图片版块
#ffffff
20-24

图20-24 绘制底部效果 Step 24
Step 21 Logo
Logo
20-25 20-28

Step 22 图20-25 查看效果
20-26 5

图20-28 添加单列选区

读书笔记

图20-26 添加主体版块

385