用PS做网页排版

用PS做网页版面.
做网页的时候主要是分组,图层组,把这个应用好了,头是头的组,头里面再细分LOGO组,顶条组,广告组,导航菜单组,组套组,一个地方一个地方的做,慢慢的就把整个图片做出来了,你从网上下载一些PSD文件格式的韩国网页模板来学习学习,这样的话你可以从中领悟到点什么。


做网页不复杂,只是需要的耐心多一点,把平常学到的一些技巧应用到其中去就可以了。做完之后切割,我不喜欢PS的切割,到是FW的切割我非常喜欢,所以我用PS做完后存一个GIF格式,然后到FW里面切割成小图片,再到DMX里面拉表格填充进去就好了。整体的工序也不是很复杂。

一个好的站点,不但要有精彩的内容,还需要有一个美观的页面。谈到美观就离不开图片,在页面中适当地用一些精美的图片作为点缀,会使你的网页大放异彩。但是,图片使用不当,也会适得其反,把你的访问者给吓跑。主要原因在于图片尺寸太大,访问者还没等打开就早已不耐烦了。??

现在向大家介绍一些对图片进行处理的方法,以使图片能在网页中迅速显示出来。?
? 选好图片格式?? 图片文件的格式有很多,如GIF、JPEG(文件扩展名为.jpg)、BMP、PNG等,它们都是可以用浏览器浏览的,但到底选择哪种图片格式比较好呢?其实在一般情况下我们只需选择前面的两种,即GIF格式与JPEG格式。

因为这两种文件格式能对图像进行很大程度的压缩,使得在产生相近视觉效果的前提下,图像文件尺寸却小很多。如果图像是通过扫描仪或者数码相机获取的,这种图片中所用到的色彩比较多,这时候我们应该选择使用JPEG格式来存储图像。

如果图片色彩比较少,一般选择GIF格式。?? 减少图片色彩数量?? 图片内色彩数量愈多,文件尺寸就愈大,在Paint Shop Pro软件的“Color”下拉菜单中,有一项“Decrease Color Depth”功能,它是用来减少图像所用颜色数目的,你可以选择其中的“16 Colors”,即将图片所使用的色彩数量减到16种颜色。

当颜色数目减少后,如果你认为图像质量变化不大,这时你就可以选用GIF格式。?? 对图片进行适当压缩?? 如果你认为色彩数量减少后图像的视觉效果明显变差,让你不能忍受,那么我们可以采用JPEG压缩格式。无论是使用什么样的图形处理软件,在以JPEG格式存盘时,都要向你询问JPEG的压缩比。

通常,采样50%到70%的压缩率比较好。你不妨在这时试着使用256色的格式将图片存储成GIF格式,与JPEG格式的文件比一比哪个字节数更少、图像质量如何,最终再决定使用什么图像格式。?
? 
 控制图片的尺寸?? 图形尺寸越小

,则字节数相应就会越少。这就要求在制作图像时,应尽量将图形四周无用的信息去掉,比如说你制作了一个非常漂亮的标题文字的图片,这个图片的背景最好与网页的底色相同或者用透明色,这时你制作的图片一定要让美术字尽量充满整个图像,不要让图片中底色边框过大。

还有就是在制作网页使用图片时,可以添加“Width”和“Height”属性,即标注原始图片的长度与宽度。这样可以帮助浏览器迅速、准确地对网页的版面进行安排,避免浏览器在显示图片的过程中重新调整、配置网页的版面。

?? 图片长宽度的标注方法为:width=x,height=y。其中的“x”、“y”表示图片的长宽各为多少像素(Pixels)。

需要说明的是,这个宽度和高度与图片本身的尺寸无关。也就是说,在一个大的图片上我们可通过更改图片这两个属性使图片在显示的时候变形,可以变大,也可以变小。?
? 更改图片的显示方式?? 图片减肥的方法已经全部送上,也就是说图片的字节数已经是无法再减少了。但是,我们还可以想办法在图片文件大小一定的情况下,让浏览者可以耐心地等待图片全部出来(抓住浏览者的心,^_^)的方法。其方法是采用隔行GIF和逐级JPEG方式。??

隔行GIF是指图片文件按照隔行的方式来显示,比如先出奇数行,再出偶数行,造成图片是逐渐变清楚的。将图片文件保存成隔行GIF格式的方法是:在Photoshop中进行保存时,选择“Interlaced”(如图1);在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non Interlaced”)。?

? 逐级JPEG文件可以让图片先以比较模糊的形式显示,随着文件数据不断从网上传过来,图片逐渐变清晰。将图片文件保存成逐级JPEG格式的方法是:在Photoshop中进行保存时,选择“Progressive”,图2是Photoshop 6.0英文版中的选项菜单,图3是Photoshop 5.0中文版中的选项菜单。

我们可以发现,在6.0中还增加文件尺寸与使用Modem下载时所需时间的指示,使我们的工作更加方便了。在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。?? 选用low source图片?? 如果在网页上要放一个较大的图片的时候,不妨选用“low source”(预览图)图片的方法。

即在显示原图之前,先提供一个解析度略差或长宽度略小的图片当做“low source”,使得浏览器可以先快速地展现出这个“low source”图片,图4是Dreamweaver中的图片属性面板。然后再渐渐地以高画质或较大图片取代之。通常,“low source”图片都是主图片的低分辨率、高压缩率的版本。??

注意?? 其中的width=x,height

=y是指Src(主图片)的长宽度,并非Low Src(预览图)的长宽度。如果你不加上width=x,height=y的标示,浏览器将一律视为以较小图片作为长宽尺寸。
??
特别提示?? 最后,还要说明一点的是:在制作图片时,单张图片不要超过30KB,每个网页的图片总量不要超过60KB(一般情况)。据统计分析,每页不超过60KB图片的网页,其下载速度是可以让人接受的。所有的图片都必须“减肥”为小图片(100×40),一般可以控制在6KB以内,动画控制在15KB以内,较大的图片可以分割成小图片。

Photo shop做网页(模板)→第一步,做好基本设置↑
??? 当我们一切经过深思熟虑之后,栏目的框架也已在脑中显现雏形,现在是运用手中的鼠标来实现的时候了。但是这时常常由于文件的设置不当,造成无法在浏览器中显示出来。为了避免错误的发生,只有开始时正确的文件设置才是良好的开端。

以下是在Photoshop中页面的设置需要注意的3个问题:

一、网页色彩模式的设置: 

 1、RGB RGB色彩模式是目前运用最广泛的色彩模式之一,它能适应多种输出的需要,并能较完整地还原图像的颜色信息。如现在大多数的显示屏、RGB打印、多种写真输出设备都需要用RGB色彩模式的图像来输出。一般图像都是采用此模式,也是网页上常用的。 

 2、索引模式 索引模式和灰度模式比较类似,它的每个象素点也可以有256种颜色容量,但它可以负载彩色。索引模式的图像最多只能有256种颜色。当图像转换成索引模式时,系统会自动根据图像上的颜色归纳出能代表大多数的256种颜色,就象一张颜色表,然后用这256种来代替整个图像上所有的颜色信息。 索引的图像只支持一个图层,并且只有一个索引彩色通道。索引模式主要用于网络上的图片传输和一些对图像象素、大小等有严格要求的地方。 

 3、灰度模式 在灰度模式的图像上,每个象素能负载2的8次方(256)种灰度级别,范围值从0(黑色)至255(白色)。其表现方式用油墨的覆盖浓度来表示,0%为白色,100%为黑色。当彩色图像转换成灰度模式后,图像会去掉颜色信息,以灰度显示图像,类似黑白照片的效果。图像的单色通道实际上也可以也看作是一张灰度图片。灰度模式的图像只有一个灰色通道。网页中不建议采用此模式,因为我们的网页色彩也是吸引访问者的原因之一,如果使用灰色图片,很难从视觉上让人产生兴趣。
 
二、网页分辨率的设置: 大家一定在设计网面时,苦恼过不同分辨率下显示的问题,由于客户端分辨率的设置不同,显示时就会出现错位问题。但是这个问题只有在后

台代码中可以解决,而我们在Photoshop中制作网页时只需将文件设置为屏幕显示的分辨率72 就可以了,图片不宜过大否则不容易显示影响浏览速度。以屏幕显示宽度尺寸最佳,超过会有滚动条出现。 

三、网页文件格式的设置:
1、PSD格式(Photoshop格式) Adobe公司开发的图像处理软件Photoshop中自建的标准文件格式就是PSD格式,在该软件所支持的各种格式中,PSD格式存取速度比其它格式快很多,功能也很强大。由于Photoshop软件越来越广泛地应用,所以这个格式也逐步流行起来。PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。这个格式只用于原图存储方便于修改之用。

2、BMP位图格式 最典型的应用BMP格式的程序就是Windows的画笔。文件几乎不压缩,占用磁盘空间较大,它的颜色存储格式有1位、4位、8位及24位,该格式是当今应用比较广泛的一种格式。但缺点是该格式文件比较大,所以只能应用在单机上,不受网络欢迎。

3、GIF格式 该图形格式却在Internet上被广泛地应用,原因主要是256种颜色已经较能满足主页图形需要,而且文件较小,适合网络环境传输和使用。可以存储动画属性。

4、JPEG格式 可以用不同的压缩比例对这种文件压缩,其压缩技术十分先进,对图像质量影响不大,因此可以用最少的磁盘空间得到较好的图像质量。由于它优异的性能,所以应用非常广泛,而在Internet上,它更是主流图形格式。

5、PNG格式 PNG(Portable Network Graphics)是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点。PNG最大色深为48bit,采用无损压缩方案存储。

附录:制作网页必须注意的:??

?1、页面内容翔实网络是虚拟的,而网站往往体现的是现实世界中的一个实体,如公司或个人。如何把这些实体的元素通过虚拟的网络空间来展现出来,并且引起浏览者的注意呢?只有那些极富特色、内容翔实、浏览顺畅、效果独特的网页才能使人驻足观看,及使用、功能和服务容于网站之中,从而达到网站的特定目的。 

2、视觉效果新颖网页形象要不落俗套,要重点突出一个“新”字,这个原则要求我们要结合自身的实际情况创作出一个独特的网站。我们在设计网页时,要尽量做到“少”而“精”,又必须突出“新”。把内容的独特的元素,如名称、标志、标准字体、标准色等等。通过这些元素的合理应用,来实现网站形象与个性的塑造提高视觉效果。

3、栏目布局明确一个网站有很多的页面和主题、链接,这就需要注意其流畅的导向性。要做到使页面合

理流畅、环环相扣、可信安全,这几点是一个优秀网站的精神所在,也是吸引力的来源。强调要注意把网站内容的层次性和空间性突出显示出来,使人一眼就能看出你的网站重点突出,结构分明。

4、特殊字体慎用在photoshop中虽然可以使用任意字体,但是当页面上传至网络空间中,文字是非图片形式可编辑的时候,你不能预测你的访问者在他们的计算机上将看到什么。也许在你的计算机里看起来相当好的网页,在另一个不同的平台上看起来可能就会变形走样。所以要避免你所选择的字体在访问者的计算机上不能显示,特殊字体要慎用!总而言之,photoshop制作网页时利用图像装饰网站空间的方法也各不相同,而最终的效果,取决于设计师对艺术的理解与把握。

相关文档
最新文档