发布时间 : 星期五 文章Photoshop制作网站首页 - 图文更新完毕开始阅读a409053567ec102de2bd8950
3. 使用横排文字工具，输入“石桥花园”字样，字体为“方正流行体简体”。再输入“ShiQiaoGarden”，字体为“Bickham Script Pro”，字号均为“30 点”，文字如图1-1-2 所示布局。
图1-1-2
4. 这是一张拍摄自龙亭的花卉原始素材，采用了微距加上2.8 的大光圈，实现了浅景深的背景模糊效果，读者可以使用模糊工具或镜头模糊滤镜实现类似的效果，如图1-1-3 所示。
图1-1-3
5. 我们对图片进行简单的处理，执行菜单“图像> 调整> 色阶”，从两侧向中间调整黑色和白色滑块的位置以使图片主体更加突出，更富有感染力。原素材本身是16:9 宽屏的，我们使用选区工具加删除键进行适当的裁切，如图1-1-4 所示。
图1-1-4
5. 为了增加花卉的现代感和时尚感，我们进一步对图片进行加工，随意找一张图片，执行菜单“滤镜> 像素化> 马赛克”，数值调大，产生大色块的马赛克效果。然后通过素材或自己制作一张扭曲后的网格，这些都是待合成的素材，如图1-1-5 所示。
图1-1-5
6. 现在有网格、花卉和马赛克三层图片，网格放在最上层，将图层的混合模式设为“颜色加深”，不透明度设为“68%”。花卉层的混合模式设为“强光”，马赛克图层不变，三者的合成效果如图1-1-6所示。
图1-1-6
7. 下面要制作的是首页的导航条部分，使用矢量的“矩形工具”绘制一个长方形，注意该长方形不要画满，留一些黑边在周围，黑边上窄下粗，使其具有一定的层次感。十六进制颜色值为“#c8fcc5”，一种清淡的绿色，如图1-1-7 所示。
网页教学网
第二
因为相对于主体来说，内容部分并不是很容易出彩，所以其设计比主体更加需要清晰的思路，并非常考验制作者的耐心。通常情况下内容部分的主要工作都是在Dreamweaver 中，所以这里我们在Photoshop 中所设计的只是一个供参照的外观。
1. 在页面的右侧用矢量“矩形工具”绘制一个淡绿色的背景填充，该绿色的十六进制值为“#eefded”，几乎接近于白色，这是为了突出前景深绿色的文字。这里的文字内容都是虚构的，其十六进制颜色值为“#054d00”，布局的位置如图1-2-1 所示。
图1-2-1
2. 在文字的下面是播放在线视频的地方，我们这里插入一些图片进行占位。图片推荐在Adobe Stock Photos CS3 中进行查找，这是Adobe 提供的一个庞大的图片素材库，包含在Adobe Bridge CS3中，低质量的图片小样是完全免费的。因为网页需较高的下载速度，因此低质量的照片反而更适合于网页设计师。需要注意的是，该搜索功能暂时还不支持中文，所以这里我们搜索“bridge”来下载一些关于桥的照片，如图1-2-2 所示。