用photoshop做网页

《用photoshop做网页》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、实训项目二Photoshop制作网站首页　　第1讲制作首页的主体部分　　课程总览　　在本课程中，朋友们将学习到以下内容：　　••如何通过PhotoshopCS3进行网站首页的版面设计　　••各种网页版面元素的设计技巧和方法　　••如何进行网页的切图以及切片的属性设置　　••如何创建与Flash整合的FLV视频　　••在DreamweaverCS3中使用“Spry选项卡”构件　　••Photoshop、Flash、Dreamweaver的协同工作　　第1讲制作首页的主体部分　　本文以“石桥花园”的网站首页为例，来演示页面创作

2、的整个过程。其实“石桥花园”是不存在的，笔者虚构出来也并非只为完成本例，我一直向往生活在幽静、闲雅之所，虽然“石桥花园”离我的初衷有很多差异，但也多少能表达我的一些想法吧。　　书归正传，早先的网页页面设计一般是以Dreamweaver为中心，由Photoshop或Flash等软件来提供各种素材，如图片、动画、文字等。自从Photoshop出现了“切图”等专为网页设计所定制的功能后，设计的中心已慢慢转向了Photoshop。因为Photoshop本身以图像为基础的特性，决定了他能对版面施以更精确的控制，使网页的页面能够更加灵

3、活和生动的布局，这几乎完全解放了网页设计师的创作灵感，不再受方方正正的网页表格所约束。现在我们要制作的是“石桥花园”首页的主体部分，主体部分包括标题、主展示图片和导航条。网页教学网　　1.打开PhotoshopCS3,执行菜单“文件>新建”。在新建对话框中设置名称为“石桥花园”，宽度为“777”、高度为“800”，这个数字并不“官方”，只是我在平时工作当中测试出来的而已。对于网页来说，一般只用于屏幕显示，所以分辨率为“72”、颜色模式为“RGB颜色”，其它参数保持默认。　　2.按下Ctrl+A全选页面，执行菜单“编辑>填充

4、”将页面填为纯黑色。在工具箱中选择矢量的“矩形工具”，绘制一个如图1-1-1所示长方形A。然后使用白色的“直接选择工具”将该矢量形状扭曲成如图1-1-1中B所示外观，该形状的十六进制颜色值为“#246b34”，一种厚重的深绿色。　3.使用横排文字工具，输入“石桥花园”字样，字体为“方正流行体简体”。再输入“ShiQiaoGarden”，字体为“BickhamScriptPro”，字号均为“30点”，文字如图1-1-2所示布局。图1-1-2　　4.这是一张拍摄自龙亭的花卉原始素材，采用了微距加上2.8的大光圈，实现了浅景深的

5、背景模糊效果，读者可以使用模糊工具或镜头模糊滤镜实现类似的效果，如图1-1-3所示。图1-1-3　　5.我们对图片进行简单的处理，执行菜单“图像>调整>色阶”，从两侧向中间调整黑色和白色滑块的位置以使图片主体更加突出，更富有感染力。原素材本身是16:9宽屏的，我们使用选区工具加删除键进行适当的裁切，如图1-1-4所示。图1-1-4　　5.为了增加花卉的现代感和时尚感，我们进一步对图片进行加工，随意找一张图片，执行菜单“滤镜>像素化>马赛克”，数值调大，产生大色块的马赛克效果。然后通过素材或自己制作一张扭曲后的网格，这些都是

6、待合成的素材，如图1-1-5所示。图1-1-5　　6.现在有网格、花卉和马赛克三层图片，网格放在最上层，将图层的混合模式设为“颜色加深”，不透明度设为“68%”。花卉层的混合模式设为“强光”，马赛克图层不变，三者的合成效果如图1-1-6所示。图1-1-6　　7.下面要制作的是首页的导航条部分，使用矢量的“矩形工具”绘制一个长方形，注意该长方形不要画满，留一些黑边在周围，黑边上窄下粗，使其具有一定的层次感。十六进制颜色值为“#c8fcc5”，一种清淡的绿色，如图1-1-7所示。网页教学网第二因为相对于主体来说，内容部分并不是

7、很容易出彩，所以其设计比主体更加需要清晰的思路，并非常考验制作者的耐心。通常情况下内容部分的主要工作都是在Dreamweaver中，所以这里我们在Photoshop中所设计的只是一个供参照的外观。　　1.在页面的右侧用矢量“矩形工具”绘制一个淡绿色的背景填充，该绿色的十六进制值为“#eefded”，几乎接近于白色，这是为了突出前景深绿色的文字。这里的文字内容都是虚构的，其十六进制颜色值为“#054d00”，布局的位置如图1-2-1所示。图1-2-1　　2.在文字的下面是播放在线视频的地方，我们这里插入一些图片进行占位。图片

8、推荐在AdobeStockPhotosCS3中进行查找，这是Adobe提供的一个庞大的图片素材库，包含在AdobeBridgeCS3中，低质量的图片小样是完全免费的。因为网页需较高的下载速度，因此低质量的照片反而更适合于网页设计师。需要注意的是，该搜索功能暂时还不支持中文，所以这里我们搜索“bridge