![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=1739330782-l6pawMCoHMZoYDPSMlMq5iQkGhXOFufJ-0-b055881499c0ff4f1f5352c2df3960ff)
图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=1739330782-lKgXzl6krCE3y67AWnr8AHzdfHlInz8w-0-b6a1cdb4d2cacace91cb148cb7dea02a)
图1-2 “新建”对话框
2 在菜单栏中执行“文件”/“打开”命令,弹出“打开”对话框,从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/背景.jpg”文件,如图1-3所示,单击“打开”按钮,打开该文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0009_0003.jpg?sign=1739330782-aMNdm9u6foaEmgHSuPHOeTCmwcdHfIm3-0-d9c69bbbbe01330961da7bb5e8c3e9bd)
图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=1739330782-JPiSdyn8RB2ue8qtW9vOonYf24Zw2bMb-0-fb3f4d267a6f1459f64c6c92988d1e37)
图1-4 粘贴图像
5 这时读者可以看到,粘贴的图像与背景的尺寸不一致,在“图层”面板选择“图层1”,按组合键Ctrl+T,在“图层1”图像外围会出现一个自由变换框,拖动该自由变换框的控制点,使其与背景尺寸一致,如图1-5所示,双击鼠标,退出编辑模式。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0002.jpg?sign=1739330782-EvfcRQuwY1pw8QqlOXVviI69N8kYSL1L-0-0cceb0461ac754bf24a643d79e1e35ff)
图1-5 编辑图层
6 在“图层”面板底部单击“创建新图层”按钮,创建一个新的图层——“图层2”,如图1-6所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0011.jpg?sign=1739330782-OGAh6nvDJzgzNUMrsjbvgeV1p13koSWb-0-d761eb814db1ce7d4918af0676aa9ae8)
图1-6 创建新图层
7 在工具箱中单击“圆角矩形工具”按钮,这时在属性栏内会出现其编辑参数,在属性栏激活
“填充像素”按钮,确定绘制属性,在“设置圆角半径”参数栏内键入20,确定圆角半径,如图1-7所示,按X键,使前景色和背景色互换。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0009.jpg?sign=1739330782-t5OGV1vV6U685zRv0JY0FlSCHEYnfgIK-0-695a3eb15aa9d15d1874186347075851)
图1-7 属性栏
提示
在默认状态下,前景色为黑色,背景色为白色,绘制的图形默认使用前景色,由于需要绘制的图形应为白色,所以按X键,使前景色和背景色互换,绘制出白色的图形。
8 参照图1-8所示的位置和尺寸绘制一个圆角矩形。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0010_0012.jpg?sign=1739330782-YoQBn68zdhntGpQvX7jBRTNIOYi9B2rx-0-2eccc16a3a95f4ebbfe9e9c5bae565e6)
图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=1739330782-DsLJyS2eLJzwibm9NsxP3RXEKVOu3fX3-0-2a5e252356f8ba64a718b78fe2fb8ebc)
图1-9 设置“投影”复选框
10 选择“样式”选项组中的“描边”复选框,进入描边编辑窗口,双击“设置描边颜色”显示窗,打开“选取描边颜色”对话框,在该对话框内的R、G、B参数栏内均键入155,如图1-10所示,单击“确定”按钮退出该对话框,使描边颜色为浅灰色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0011_0003.jpg?sign=1739330782-pbx1eOF68LMX6AE9QXbTrLtdUJn92MTA-0-ea73a09cca54687f34de0f35bed2dd6a)
图1-10 “选取描边颜色”对话框
11 退出“选取描边颜色”对话框后,在描边编辑窗口内的“大小”参数栏内键入2,在“位置”下拉式选项栏中选择“外部”选项,如图1-11所示,单击“确定”按钮,退出“图层样式”对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0012_0001.jpg?sign=1739330782-B3NJEgwC3NLtWyiFKTLpGMBi0vHiSD3T-0-3613d3bdc1040799d538050f540c0c81)
图1-11 设置“描边”复选框
12 图层样式编辑完成后,“图层2”的效果如图1-12所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0012_0002.jpg?sign=1739330782-aqHMq8hbMLewHWtGUm6NF2QlAelb6iQp-0-54e585def29df128e6eb009a562a1fe5)
图1-12 设置图层样式
13 在菜单栏中执行“文件”/“打开”命令,弹出“打开”对话框,从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/绘图.jpg”文件,如图1-13所示,单击“打开”按钮,打开该文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0012_0004.jpg?sign=1739330782-P2qkkYIpiiM88ZQXfBtRNy5rzIrzl6hT-0-8a58c08439fe89dae77abf02702e576e)
图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=1739330782-qJTBouVrUgCaUh3wM4XZbFMxddS0ft7B-0-5e83922b4f733bdbd9d28d9f05221bb2)
图1-14 移动图像
16 在“图层”面板中选择“图层3”层,然后按住Ctrl键单击“图层2”的图层标识图,加载选区,在菜单栏中执行“选择”/“修改”/“收缩”命令,打开“收缩选区”对话框,在该对话框的“收缩量”参数栏内键入4,如图1-15所示,然后单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0013_0004.jpg?sign=1739330782-daZg5G21UYArGQKTzwB5jxRiauRRIkAl-0-966a89510bd7c58cec9a8f3f2dce85d2)
图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=1739330782-my8JjGbRYylsT5b6FmoKzJI7aGW9wUqw-0-bfc3f9ac1c2c8360acfbc70fd109f726)
图1-16 删除选区内的图像
18 确定“图层3”层处于被选择状态,在菜单栏中执行“图像”/“调整”/“色相/饱和度”命令,打开“色相/饱和度”对话框。在“饱和度”和“明度”参数栏中均键入15,如图1-17所示,然后单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0013_0008.jpg?sign=1739330782-ZasUxsHyVvabzJ9groEaWQiqxZCWoXjE-0-072c6da62d2dfa7471fb35aa870a89ec)
图1-17 “色相/饱和度”对话框
19 在菜单栏中执行“文件”/“打开”命令,打开“打开”对话框,从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/蒲公英.jpg”文件,如图1-18所示,单击“打开”按钮,打开该文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0014_0001.jpg?sign=1739330782-Xn1gaKrq5OMoTwN193NHJfOgoEtSoE2u-0-6064d7c41605f3e45f6c1c694022ea79)
图1-18 “打开”对话框
20 确定“蒲公英.jpg”处于可编辑状态,在菜单栏中执行“选择”/“色彩范围”命令,打开“色彩范围”对话框,在“颜色容差”参数栏内键入55,如图1-19所示,然后单击“蒲公英.jpg”中白色的部分,单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0014_0004.jpg?sign=1739330782-MHWGvPswQ5ECAUrvv6kZJL4iIznsygYH-0-4cacc144ea4da66e6a344fe0cade053c)
图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=1739330782-6itwcCtgSrzFL9eq4K2V2d3jNN7FPRub-0-36f943d57e9ab75235701876f02d82a5)
图1-20 反选选区
22 确定“蒲公英网页背景”文件处于可编辑状态,按组合键Ctrl+V粘贴图像,这时在“图层”面板中会出现一个新图层——“图层4”。
23 选择“图层4”,在菜单栏执行“编辑”/“变换”/“水平翻转”命令,将该层图像翻转,如图1-21所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0001.jpg?sign=1739330782-ck4KWmFwozlalWgnHqoE2ptFJWqv9L3S-0-55d9f79d2236b0d480af7fe12156137c)
图1-21 翻转图像
24 按组合键Ctrl+T,出现一个自由变换框,编辑该自由变换框的控制点,缩放“图层4”层图像大小,双击鼠标,退出编辑模式。然后将其移动至如图1-22所示的位置。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0002.jpg?sign=1739330782-llMkytKXOA4aaVebEjdFZxcsiO8PjQes-0-518c997a22afa23cf7e50fbbc3ac9cf2)
图1-22 缩放图层
25 在工具箱单击“矩形选框工具”按钮,在如图1-23所示的位置绘制一个矩形选区。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0006.jpg?sign=1739330782-WEeGkxEcaV84bauKKDkuXmGPiHwGtdrz-0-57beddf6f0cfa6da2b7de3b301a29a3c)
图1-23 绘制矩形选区
26 按Delete键,删除选区内的图像,然后按组合键Ctrl+D取消选区,效果如图1-24所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0007.jpg?sign=1739330782-CT9lF7ycy9NkD1WX5QPjSXKbsMIz14u4-0-d3514a5917b73e1c0c3f5c4ca89a560c)
图1-24 删除选区内的图像
27 在“图层”面板选择“图层4”,按住鼠标左键将其拖动至“创建新图层”按钮,如图1-25所示,在“图层”面板会出现“图层4副本”层。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0011.jpg?sign=1739330782-4TL1VVSsRm5s0IN09x0puawuoa3ils2O-0-af02a8776801fa3dee8ba239998f3b98)
图1-25 复制图层
28 按住Ctrl键并单击“图层4”的图层缩览图,加载选区,然后右击选区,在弹出的快捷菜单中选择“填充”选项,打开“填充”对话框,在“使用”下拉式选项栏中选择“前景色”选项,如图1-26所示,单击“确定”按钮,退出该对话框,将选区填充为白色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0015_0012.jpg?sign=1739330782-neBtdrig1gp2IOq8eUJGqWDKBYZeEaFC-0-f4d2614b36d0766a1930e53bd6496524)
图1-26 “填充”对话框
29 在工具箱单击“移动工具”按钮,按键盘上的“←”键和“↓”键,微调“图层4”,使蒲公英出现白色边缘,如图1-27所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0005.jpg?sign=1739330782-ptp8wnW8l5xNrgw00rNYbmZBvANHpT9q-0-127562707e8dc42f2a272900bb852edc)
图1-27 移动图层
30 单击工具箱中的“横排文字工具”按钮,在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项,在“设置字体大小”参数栏内键入35,将“设置文本颜色”显示窗内的颜色设置为白色,在如图1-28所示的位置键入DANDELION。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0006.jpg?sign=1739330782-fCgXvDemh6LPhD1zEXFUJKaG5UAEst1o-0-751f8470528fbfcbad0285bac7ac1d19)
图1-28 键入文本
31 单击工具箱中的“横排文字工具”按钮,选择DANDELION中的字母D,在属性栏内将“设置文本颜色”显示窗内的颜色设置为黑色,如图1-29所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0010.jpg?sign=1739330782-nJ2ndfZziAbMF1m7L82pneVIl0YfsMqb-0-34ceccb2d51372a2b9b39d40f2b11d8c)
图1-29 改变字母颜色
32 在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项,在“设置字体大小”参数栏内键入30,将“设置文本颜色”显示窗内的颜色设置为白色,在如图1-30所示的位置键入Tramp。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0016_0011.jpg?sign=1739330782-bfsjXvxmUNrCv6AZ36tnPjNnd2ccGF6s-0-6f72828122efb6e18d02d5648e0a3ac5)
图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=1739330782-errezj6S4UaOM3y1MVQEwuznz3Lt45cD-0-2c41944b605324ec8f882d4eb140cf9e)
图1-31 编辑字母颜色
34 在属性栏内的“设置字体系列”下拉式选项栏中选择Arial选项,在“设置字体大小”参数栏内键入25,将“设置文本颜色”显示窗内的颜色设置为白色,然后在如图1-32所示的位置键入www.dandelion.com。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0017_0002.jpg?sign=1739330782-2td8GjhWWaSiRzK0rRZN8ptJwwLv2X2e-0-5d6b0be4a6c61f56ee57902108f40d58)
图1-32 键入网址
35 现在网页背景的制作就全部完成了,完成后的效果如图1-33所示,如果读者在制作过程中遇到了什么问题,可以打开本书附带光盘中“使用Photoshop CS3编辑网页素材/实例1:蒲公英网站背景素材/蒲公英网站背景素材.psd”文件,该文件为本实例完成后的效果。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0017_0004.jpg?sign=1739330782-o3RG1qNnOwNXI0W9DJQ7elTaNpjesONf-0-ef7f61d91cc606dff01f52f388d9a790)
图1-33 蒲公英网站网页背景素材