![Photoshop CS3 Flash CS3 Dreamweaver CS3网页制作50例](https://wfqqreader-1252317822.image.myqcloud.com/cover/857/687857/b_687857.jpg)
第1篇 使用Photoshop CS3编辑网页素材
一个优秀的网站,离不开漂亮的素材,网页使用的图形图像素材,通常需要在专业的二维软件中进行创建和编辑。Photoshop CS3是一款优秀的图形图像编辑软件,在网页设计中,该软件通常用于图片素材的编辑和处理,使用Photoshop CS3中的切片工具,还可以设置网页布局,与Dreamweaver CS3配合,能够快速完成网页制作,在这一部分中,将为读者讲解使用Photoshop CS3编辑网页素材的方法。
实例1 蒲公英网站网页背景素材
实例说明
网页背景素材,通常都是由漂亮的图片组成的,Photoshop CS3是一款专业的位图处理软件,能够很方便地设置图片尺寸、分辨率,并能够对各种类型的位图进行编辑。在本实例中,将和读者一道制作蒲公英网站网页背景素材,由于本实例为本书的第一个实例,所以本实例将使用Photoshop CS3中最基础的选择、绘制和编辑工具来完成动画的设置,使读者了解Photoshop CS3的工作流程。
技术要点
在制作本实例时,首先需要创建一个1024×768的标准网页文件,然后导入位图,设置背景底纹;接下来使用Photoshop CS3自带的绘制工具配合外部导入的位图设置网页上的图形;最后在网页中添加文本,完成网页的制作。
本实例中设计的网站,为一个乡村摇滚音乐网站。为了配合网站主题,该网站背景为蓝绿色底纹,主题图案为一张卡片上蒲公英飘出的画面之外,卡片使用了较为鲜艳的金黄色背景,由于网页还需要添加各种按钮、文本框等附件,所以会有较多的留白部分,图1-1为本实例完成后的效果。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0008_0001.jpg?sign=1738922393-KFwmpslomLnMbzOcARvzPVJeTfZKQESj-0-3ea8aa730f191c9b3e050bbfd8989f57)
图1-1 蒲公英网站网页背景素材
1 运行Photoshop CS3,执行菜单栏中的“文件”/“新建”命令,打开“新建”对话框。在“名称”文本框中键入“蒲公英网页背景”。在“宽度”参数栏内键入1024,在“高度”参数栏内键入768,单位设置为“像素”,在“分辨率”参数栏内键入72,在“颜色模式”下拉式选项栏中选择“RGB颜色”选项,在“背景内容”下拉式选项栏中选择“白色”选项,如图1-2所示,单击“确定”按钮,创建一个新文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0009_0001.jpg?sign=1738922393-Vnqc0qKcVB23Y2u17Vnod08CNh3uveTR-0-ae1c4ee9b96f2cd3a6a0868a267d9725)
图1-2 “新建”对话框
2 在菜单栏中执行“文件”/“打开”命令,弹出“打开”对话框,从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/背景.jpg”文件,如图1-3所示,单击“打开”按钮,打开该文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0009_0003.jpg?sign=1738922393-Bh4QDFy0tp2S4p3lNKyq3GROfL1AMvMS-0-98fd408c50bba939e7cd4b91ff372b01)
图1-3 “打开”对话框
3 确定“背景.jpg”处于可编辑状态,按组合键Ctrl+A全选图像,然后按组合键Ctrl+C,复制图层。
4 确定“蒲公英网页背景”文件处于可编辑状态,按组合键Ctrl+V粘贴图像,如图1-4所示,这时在“图层”面板中会出现一个新的图层——“图层1”。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0001.jpg?sign=1738922393-f6kGGshvDhPRy5vsijZT08eaxN4gnsd7-0-0f167c128aa849ce8601869ce61d4e27)
图1-4 粘贴图像
5 这时读者可以看到,粘贴的图像与背景的尺寸不一致,在“图层”面板选择“图层1”,按组合键Ctrl+T,在“图层1”图像外围会出现一个自由变换框,拖动该自由变换框的控制点,使其与背景尺寸一致,如图1-5所示,双击鼠标,退出编辑模式。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0002.jpg?sign=1738922393-pMNKFfbX6lWiblaBMLvF6jMuWL6wg1Ce-0-9e325c50e0e2b083d42f39ea46f1f183)
图1-5 编辑图层
6 在“图层”面板底部单击“创建新图层”按钮,创建一个新的图层——“图层2”,如图1-6所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0011.jpg?sign=1738922393-FSSScbfHNpCtZhQsqWZSGvjS2svRmMli-0-0a0ca83addcef4cf31e8a69960101fb9)
图1-6 创建新图层
7 在工具箱中单击“圆角矩形工具”按钮,这时在属性栏内会出现其编辑参数,在属性栏激活
“填充像素”按钮,确定绘制属性,在“设置圆角半径”参数栏内键入20,确定圆角半径,如图1-7所示,按X键,使前景色和背景色互换。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0009.jpg?sign=1738922393-bp3HFdg7cpdrNCvUYAA9AKDkE7Syu9Pf-0-7342413932af153644c2d7be42e35e30)
图1-7 属性栏
提示
在默认状态下,前景色为黑色,背景色为白色,绘制的图形默认使用前景色,由于需要绘制的图形应为白色,所以按X键,使前景色和背景色互换,绘制出白色的图形。
8 参照图1-8所示的位置和尺寸绘制一个圆角矩形。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0012.jpg?sign=1738922393-TBtGb8cfOkwW7srNfwgGVtX6MvlAtBWL-0-bd06b3bf8e3d4fc834a0c5c801751130)
图1-8 绘制圆角矩形
9 在“图层”面板中双击“图层2”的图层缩览图,打开“图层样式”对话框。选择“样式”选项组中的“投影”复选框,进入投影编辑窗口。在“不透明度”参数栏内键入30,在“角度”参数栏内键入120,在“距离”、“扩展”和“大小”参数栏中分别键入4、4、12,如图1-9所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0011_0001.jpg?sign=1738922393-7nYCwnj2oOaDdtcYV2921yqCt0ESEdHC-0-9db6f9f29e7508957d650a7862c6fe0b)
图1-9 设置“投影”复选框
10 选择“样式”选项组中的“描边”复选框,进入描边编辑窗口,双击“设置描边颜色”显示窗,打开“选取描边颜色”对话框,在该对话框内的R、G、B参数栏内均键入155,如图1-10所示,单击“确定”按钮退出该对话框,使描边颜色为浅灰色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0011_0003.jpg?sign=1738922393-ta8yKnWe1uZqxHYmqfE1XQWoZikXyr2z-0-2542a32482df932d70243221ffa285e0)
图1-10 “选取描边颜色”对话框
11 退出“选取描边颜色”对话框后,在描边编辑窗口内的“大小”参数栏内键入2,在“位置”下拉式选项栏中选择“外部”选项,如图1-11所示,单击“确定”按钮,退出“图层样式”对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0012_0001.jpg?sign=1738922393-tnddZfD1UgpLICfZIlxWUT4uHvbFiSzo-0-ca9dd0ede270a8d2d49f17468e43e671)
图1-11 设置“描边”复选框
12 图层样式编辑完成后,“图层2”的效果如图1-12所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0012_0002.jpg?sign=1738922393-hmTDC7p55HhXra8DdIh9xII0DY917JhG-0-8ed87374f004fdf44e86b42d2ca6f03a)
图1-12 设置图层样式
13 在菜单栏中执行“文件”/“打开”命令,弹出“打开”对话框,从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/绘图.jpg”文件,如图1-13所示,单击“打开”按钮,打开该文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0012_0004.jpg?sign=1738922393-HfbseI4uibknzUyWvnRwfU26eKoq2ybb-0-16122f3e978a33bfee50f99bb2d7eaaf)
图1-13 “打开”对话框
14 确定“绘图.jpg”处于可编辑状态,按组合键Ctrl+A全选图像,然后按组合键Ctrl+C,复制选区中的图像。
15 确定“蒲公英网页背景”文件为可编辑状态,按组合键Ctrl+V粘贴图像,这时在“图层”面板中会出现一个新图层——“图层3”,将粘贴的图像移动至如图1-14所示的位置。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0013_0003.jpg?sign=1738922393-Fa70SrJPvggBurwDANxsdHB1ugi8NQyY-0-4a84bc1b40df749154aa40f549ad9c94)
图1-14 移动图像
16 在“图层”面板中选择“图层3”层,然后按住Ctrl键单击“图层2”的图层标识图,加载选区,在菜单栏中执行“选择”/“修改”/“收缩”命令,打开“收缩选区”对话框,在该对话框的“收缩量”参数栏内键入4,如图1-15所示,然后单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0013_0004.jpg?sign=1738922393-WrQXAT30djmPTvhRhgJhuMND3Rn8Qg8l-0-b6e406def7a5f3d0881b1f24924c0d89)
图1-15 “收缩选区”对话框
17 按组合键Ctrl+Shift+I反选选区,然后按Delete键,删除选区内的图像,效果如图1-16所示。最后按组合键Ctrl+D取消选区。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0013_0007.jpg?sign=1738922393-56LIimEX26t7mwxak5EfuITDA1gHypVP-0-c62481a2b9173bb2ce6271aca96a7a1e)
图1-16 删除选区内的图像
18 确定“图层3”层处于被选择状态,在菜单栏中执行“图像”/“调整”/“色相/饱和度”命令,打开“色相/饱和度”对话框。在“饱和度”和“明度”参数栏中均键入15,如图1-17所示,然后单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0013_0008.jpg?sign=1738922393-1eEJGKVzyvhiL4x0Q2pYkUMBSEmdaWWl-0-fe769f452fcf5fdbdc65b30a580c5bc3)
图1-17 “色相/饱和度”对话框
19 在菜单栏中执行“文件”/“打开”命令,打开“打开”对话框,从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/蒲公英.jpg”文件,如图1-18所示,单击“打开”按钮,打开该文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0014_0001.jpg?sign=1738922393-6KLZwi9vNhKPljIM7E8nKXNU4VTiH6AS-0-73d44b11899ca59f246f1a6d1bf6d187)
图1-18 “打开”对话框
20 确定“蒲公英.jpg”处于可编辑状态,在菜单栏中执行“选择”/“色彩范围”命令,打开“色彩范围”对话框,在“颜色容差”参数栏内键入55,如图1-19所示,然后单击“蒲公英.jpg”中白色的部分,单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0014_0004.jpg?sign=1738922393-9AcVc4cRMLsTjfSHeR6L7YwPlmjfnkFA-0-e5654060859c41e38b68332cf8fe5aea)
图1-19 “色彩范围”对话框
21 退出“色彩范围”对话框后,在“蒲公英.jpg”图像会出现一个选区,按组合键Ctrl+Shift+I反选选区,如图1-20所示,然后按组合键Ctrl+C,复制选区内的图像。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0014_0005.jpg?sign=1738922393-Eht3CXJWaD9V7is5ndvV84yAjT3vf8fq-0-eb9edfe016339b18b362c3e765f11b14)
图1-20 反选选区
22 确定“蒲公英网页背景”文件处于可编辑状态,按组合键Ctrl+V粘贴图像,这时在“图层”面板中会出现一个新图层——“图层4”。
23 选择“图层4”,在菜单栏执行“编辑”/“变换”/“水平翻转”命令,将该层图像翻转,如图1-21所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0001.jpg?sign=1738922393-C0vS1ChnOUicojFXBtdINhKzQlB3AzR7-0-ba271c5bad651ee374c1d1488750548e)
图1-21 翻转图像
24 按组合键Ctrl+T,出现一个自由变换框,编辑该自由变换框的控制点,缩放“图层4”层图像大小,双击鼠标,退出编辑模式。然后将其移动至如图1-22所示的位置。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0002.jpg?sign=1738922393-0N5rHsJ46HKK3bePKoKBM8cXUaaeW85W-0-b2b2e2807f2070abb7db89cb9883849a)
图1-22 缩放图层
25 在工具箱单击“矩形选框工具”按钮,在如图1-23所示的位置绘制一个矩形选区。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0006.jpg?sign=1738922393-l8kD3hJAB4udHqEGnNEtdt1RY9cmeBZY-0-6ebf88b410138968a22224e0855d4e47)
图1-23 绘制矩形选区
26 按Delete键,删除选区内的图像,然后按组合键Ctrl+D取消选区,效果如图1-24所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0007.jpg?sign=1738922393-ld5WC6ek1lGjcKMWcXmwyiDNcOQ4IAry-0-8692686632d37927064240c973678ccc)
图1-24 删除选区内的图像
27 在“图层”面板选择“图层4”,按住鼠标左键将其拖动至“创建新图层”按钮,如图1-25所示,在“图层”面板会出现“图层4副本”层。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0011.jpg?sign=1738922393-hNC0HVax1CGVxzhDOyTr818ZYNgj4A7O-0-9cfa3dfaaac22004beebc23ec12fb2a3)
图1-25 复制图层
28 按住Ctrl键并单击“图层4”的图层缩览图,加载选区,然后右击选区,在弹出的快捷菜单中选择“填充”选项,打开“填充”对话框,在“使用”下拉式选项栏中选择“前景色”选项,如图1-26所示,单击“确定”按钮,退出该对话框,将选区填充为白色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0012.jpg?sign=1738922393-OFE5LCFRWDu3KegxoqVfd9LGER0cvAsY-0-071b4d2c875e9b4111b7757304e44565)
图1-26 “填充”对话框
29 在工具箱单击“移动工具”按钮,按键盘上的“←”键和“↓”键,微调“图层4”,使蒲公英出现白色边缘,如图1-27所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0005.jpg?sign=1738922393-HjFchyasDEhlTJphFjxBHwOEoWcCUtYy-0-4c592390823b65d3330c0a265c4f8cb5)
图1-27 移动图层
30 单击工具箱中的“横排文字工具”按钮,在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项,在“设置字体大小”参数栏内键入35,将“设置文本颜色”显示窗内的颜色设置为白色,在如图1-28所示的位置键入DANDELION。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0006.jpg?sign=1738922393-WxGUl1MSRdOSmRg58NaHSXrV1W1Zcdqn-0-5c16b3ebb623cabb0c851f335d190754)
图1-28 键入文本
31 单击工具箱中的“横排文字工具”按钮,选择DANDELION中的字母D,在属性栏内将“设置文本颜色”显示窗内的颜色设置为黑色,如图1-29所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0010.jpg?sign=1738922393-Ck9uSxfMy534FgNCCTfdbMJuG5KKHR8v-0-e656243dab9101f491b9eacd4111ece7)
图1-29 改变字母颜色
32 在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项,在“设置字体大小”参数栏内键入30,将“设置文本颜色”显示窗内的颜色设置为白色,在如图1-30所示的位置键入Tramp。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0011.jpg?sign=1738922393-K74zyGrNJR7HKwEvHIKCfu4iBDld5iSj-0-b0730ee413fd0a21060e7ec1ba457abe)
图1-30 键入文本
33 选择Tramp中的字母T,在属性栏内将“设置文本颜色”显示窗内的颜色设置为R、G、B值分别为255、200、70的橘黄色,如图1-31所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1738922393-Rt3JUNyWHs3yb4BnjaHHXd4LKwZ8Jtnw-0-079002f1d7e086fb9e0f205d18c05d76)
图1-31 编辑字母颜色
34 在属性栏内的“设置字体系列”下拉式选项栏中选择Arial选项,在“设置字体大小”参数栏内键入25,将“设置文本颜色”显示窗内的颜色设置为白色,然后在如图1-32所示的位置键入www.dandelion.com。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0017_0002.jpg?sign=1738922393-cCdnKYPKHQrbxV4KvPbYhAxjlHBRrSfK-0-ad5365147f166c082a99c4a7d84f09fd)
图1-32 键入网址
35 现在网页背景的制作就全部完成了,完成后的效果如图1-33所示,如果读者在制作过程中遇到了什么问题,可以打开本书附带光盘中“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/蒲公英网站背景素材.psd”文件,该文件为本实例完成后的效果。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0017_0004.jpg?sign=1738922393-wS8sNENKs9vFXdMgqdAuLn1y5OZEvuzn-0-7bd0436a648217e6ab894880e25f02ff)
图1-33 蒲公英网站网页背景素材