欢迎来到神秘园PS教程自学网,这里是Photoshop爱好者的乐园![登录][注册]

PS网页布局设计与Html切图

2011年11月14日17:09来源:互联网编辑:Nero

三、裁剪效果图

1、打开网页效果图,点裁剪工具,一般选择切片工具,这个时候鼠标就会变成裁纸刀的样子。如图:

PS网页布局设计与Html切图-裁剪工具-www.garden29.com

2、为了裁剪的精确进行,在裁剪开始前按CTRL+R打开标尺,图象周围就会出现标尺为裁减提供参照。按照布局分布,对效果图进行裁剪。如图:

PS网页布局设计与Html切图-精确裁剪-www.garden29.com

还需要注意的是,在裁剪效果图之前要确定好哪些地方需要进行预留,比方本效果图上的“草原部分”是预留给文字内容的,而旁边的“石板”是预留给文字标题的,这两个部分是要进行嵌入式框架处理的。

3、适当调整下各个切片之见的匹配问题,确认无误后,点菜单—文件—储存为WEB所用格式。如图:

PS网页布局设计与Html切图-存储为Web格式-www.garden29.com

在之后的弹出对话框中,让选择图片质量。因为图片质量过高的话,影响网页的浏览速度;图片质量过低的话就会色彩失真影响美观。这里要点四联显示,PS会自动给出四种不同颜色,选择又不太大又没有明显失真的样式。图7上显示我们可以发现第2种是最符合网页图片要求的,所以在确认没问题后点“储存”选择好储存位置,会提示“储存的某些文件为包含拉丁字符,可能会与某些浏览器不兼容”不用管它,点确定。之后PS就自动生成了一个网页,网页的名字和效果图的名字一致。

 PS网页布局设计与Html切图-保存-www.garden29.com

4、浏览器中的效果。如图:

PS网页布局设计与Html切图-浏览器中的效果-www.garden29.com

总结

有些朋友会问,在浏览器中的效果和效果图一致,为什么还要费劲将其裁剪呢?这是因为一张整的效果图大小可能在200K或更高,浏览器下载就会变慢,要知道访问速度太慢的网站是会被浏览者放弃的,所以要把整图裁剪成小块,加快下载速度;其次,网站是要进行更新的,根据布局裁剪在以后的更新过程中会很方便的。有时间的话,给大家带来一个网页效果图从布局创意到上传网站空间全过程的教程。

教程由[www.Garden29.com]收集整理
ps教程自学网 ps照片 ps抠图教程 ps鼠绘教程 ps字体 ps技巧 ps入门 ps知识问答
下次找不到怎么办?★一键收藏分享★
更多
设计软件教程
PS网页设计效果图推荐>>