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

PS网页布局设计与Html切图

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

这次,我们要来讲解一下如何用PS来制作一个网页效果图并对其进行裁剪,即使你不懂任何的HTML语法和原理,只要你看完本期教程,那么离独立完成自己的个人网站的目标就不远了。

会有朋友说是不是用FIREWORKS比较好,笔者的意见是先学好PS再用FW便会得心应手,PS是个基础的东西,先打好基础。

一、网页布局理论

再精美的网页,它也是有个大概布局的。比方说新浪网的首页,它的布局就是图1中右边灰色部分的样式,网页设计师用网页制作工具(如DW、FP)画好相应的表格,然后填充表格的颜色,加如相应的字和一些网页特效,就形成了一个网站的首页。如图: 

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

可是自己不会网页制作工具,是不是就不能做出精美的网页呢?答案是可以的,我们用 PHOTOSHOP的“保存图片的WEB功能”就可以轻松实现。不会画表格?可以在PS上做表格,总之自己想象中的的网站是什么样的、什么颜色的、什么风格的等等,我们把这些想法当一张效果图制作出来,裁剪好,只需要一个步骤,PS就会帮我们自动生成一个网页,无需懂得HTML代码。那么教程正式开始!

二、制作网页效果图

每个人的想法是不一样的的,设计理念也是不一样的,在本教程中的图片例子,引用北极的个人网站文字版网页效果图进行讲解,不论什么样的效果图,步骤都是一样的,要做到举一反三。先看看这个网页的效果图。如图:

PS网页布局设计与Html切图-制作网页效果图-www.garden29.com

观察效果图我们可以看出,该效果图总体上分三行一列:最上面标题为一行;中间的内容部分为一行;最下面的相关信息为一行;整体为一列;细分的话最上面一行又可以分为三列;中间内容部分可以分为两列;最下面相关信息部分又可以分为两行。整体的布局应该如图3样式。如图:

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

布局分布出来以后,一些制作网页的老手该开始启动网页制作工具勾画表格了。那我们初者要做什么呢?下一步就要用PS的图片裁剪功能,根据上图的布局分布样式,对网页效果图进行裁剪。 

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