文档介绍：该【用PS做网页版面】是由【小辰GG1】上传分享，文档一共【9】页，该文档可以免费在线阅读，需要了解更多关于【用PS做网页版面】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。用PS做网页版面.
做网页的时候主要是分组,图层组,把这个应用好了,头是头的组,头里面再细分
LOGO组,顶条组,广告组,导航菜单组,组套组,一个地方一个地方的做,慢慢的
就把整个图片做出来了,你从网上下载一些PSD文件格式的韩国网页模板来学****学<br****这样的话你可以从中领悟到点什么。做网页不复杂,只是需要的耐心多一点,
把平常学到的一些技巧应用到其中去就可以了。做完之后切割,我不喜欢PS的切割,
到是FW的切割我非常喜欢,所以我用PS做完后存一个GIF格式,然后到FW里面切
割成小图片,再到DMX里面拉表格填充进去就好了。整体的工序也不是很复杂。
一个好的站点,不但要有精彩的内容,还需要有一个美观的页面。谈到美观就离不
开图片,在页面中适当地用一些精美的图片作点为缀,会使你的网页大放异彩。但
是,图片使用不当,也会适得其反,把你的访问者给吓跑。主要原因在于图片尺寸
太大,访问者还没等打开就早已不耐烦了。
现在向大家介绍一些对图片进行处理的方法,以使图片能在网页中迅速显示出
来。
选好图片格式
图片文件的格式有很多,如GIF、JPEG()、BMP、PNG等,
它们都是可以用浏览器浏览的,但到底选择哪种图片格式比较好呢?其实在一般情
况下我们只需选择前面的两种,即GIF格式与JPEG格式。因为这两种文件格式能
对图像进行很大程度的压缩,使得在产生相近视觉效果的前提下,图像文件尺寸却
小很多。如果图像是通过扫描仪或者数码相机获取的,这种图片中所用到的色彩比
较多,这时候我们应该选择使用JPEG格式来存储图像。如果图片色彩比较少,一
般选择GIF格式。
减少图片色彩数量
图片内色彩数量愈多,文件尺寸就愈大,在PaintShopPro软件的“Color”下拉
菜单中,有一项“DecreaseColorDepth”功能,它是用来减少图像所用颜色数目的,
你可以选择其中的“16Colors”,即将图片所使用的色彩数量减到16种颜色。当颜色
数目减少后,如果你认为图像质量变化不大,这时你就可以选用GIF格式。
对图片进行适当压缩
如果你认为色彩数量减少后图像的视觉效果明显变差,让你不能忍受,那么我
们可以采用JPEG压缩格式。无论是使用什么样的图形处理软件,在以JPEG格式
存盘时,都要向你询问JPEG的压缩比。通常,采样50%到70%的压缩率比较好。
你不妨在这时试着使用256色的格式将图片存储成GIF格式,与JPEG格式的文件
比一比哪个字节数更少、图像质量如何,最终再决定使用什么图像格式。
控制图片的尺寸
图形尺寸越小,字节数则相应就会越少。这就要求在制作图像时,应尽量将图
形四周无用的信息去掉,比如说你制作了一个非常漂亮的标题文字的图片,这个图
片的背景最好与网页的底色相同或者用透明色,这时你制作的图片一定要让美术字
尽量充满整个图像,不要让图片中底色边框过大。还有就是在制作网页使用图片时,
可以添加“Width”和“Height”属性,即标注原始图片的长度与宽度。这样可以帮助浏
览器迅速、准确地对网页的版面进行安排,避免浏览器在显示图片的过程中重新调
整、配置网页的版面。
图片长宽度的标注方法为:width=x,height=y。其中的“x”、“y”表示图片的长
宽各为多少像素(Pixels)。需要说明的是,这个宽度和高度与图片本身的尺寸无关。
图片都是主图片的低分辨率、高压缩率的版本。
注意
其中的width=x,height=y是指Src(主图片)的长宽度,并非LowSrc(预览
图)的长宽度。如果你不加上width=x,height=y的标示,浏览器将一律视为以较小
图片作为长宽尺寸。
特别提示
最后,还要说明一点的是:在制作图片时,单张图片不要超过30KB,每个网
页的图片总量不要超过60KB(一般情况)。据统计分析,每页不超过60KB图片的
网页,其下载速度是可以让人接受的。所有的图片都必须“减肥”为小图片(100×40),
一般可以控制在6KB以内,动画控制在15KB以内,较大的图片可以分割成小图片。
Photoshop做网页(模板)→第一步,做好基本设置↑
当我们一切经过深思熟虑之后,栏目的框架也已在脑中显现雏形,现在是运用
手中的鼠标来实现的时候了。但是这时常常由于文件的设置不当,造成无法在浏览
器中显示出来。为了避免错误的发生,只有开始时正确的文件设置才是良好的开端。
以下是在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(PortableNetworkGraphics)是一种新兴的网络图形格式,结合了GIF
和JPEG的优点,具有存储形式丰富的特点。PNG最大色深为48bit,采用无损压缩
方案存储。
附录:制作网页必须注意的:
1、页面内容翔实
网络是虚拟的,而网站往往体现的是现实世界中的一个实体,如公司或个人。如何
把这些实体的元素通过虚拟的网络空间来展现出来,并且引起浏览者的注意呢?只
有那些极富特色、内容翔实、浏览顺畅、效果独特的网页才能使人驻足观看,及使
用、功能和服务容于网站之中,从而达到网站的特定目的。
2、视觉效果新颖
网页形象要不落俗套,要重点突出一个“新”字,这个原则要求我们要结合自身的实
际情况创作出一个独特的网站。我们在设计网页时,要尽量做到“少”而“精”,又必须
突出“新”。把内容的独特的元素,如名称、标志、标准字体、标准色等等。通过这
些元素的合理应用,来实现网站形象与个性的塑造提高视觉效果。
3、栏目布局明确
一个网站有很多的页面和主题、链接,这就需要注意其流畅的导向性。要做到使页
面合理流畅、环环相扣、可信安全,这几点是一个优秀网站的精神所在,也是吸引
力的来源。强调要注意把网站内容的层次性和空间性突出显示出来,使人一眼就能
看出你的网站重点突出,结构分明。
4、特殊字体慎用
在photoshop中虽然可以使用任意字体,但是当页面上传至网络空间中,文字是非
图片形式可编辑的时候,你不能预测你的访问者在他们的计算机上将看到什么。也
许在你的计算机里看起来相当好的网页,在另一个不同的平台上看起来可能就会变
形走样。所以要避免你所选择的字体在访问者的计算机上不能显示,特殊字体要慎
用!
总而言之,photoshop制作网页时利用图像装饰网站空间的方法也各不相同,而最
终的效果,取决于设计师对艺术的理解与把握。