photoshop制作web 2.0网页布局

在这个photoshop网页设计教程中我们将要学习怎么制作一个专业网站的2.0布局，以前我们学习了那么多的photoshop教程，似乎都有些长，那是因为这些教程都是非常详细。我保证只要你跟着去做就会发现很简单，你所要做的只是去试一试。

最终效果预览

详细教程
软件：Adobe Photoshop
版本：CS4
难度：中级
预计完成时间：大约两个小时

步骤1

为了确保能够对齐我们采用960s坐标制（从这里获取）下载打开文件
我们先创建背景图层，在背景层上右击，然后选择背景图层，命名为“bg”。

步骤2

我们运用了这么多参考线，所以我们需要打开视图>标尺。

步骤3

我们要为标题区设置下边框，所以需要在下方100px拖拽一条新的参考线，执行视图——新建参考线，位置：100

内容导航

• 第1页：photoshop制作web 2.0网页布局
• 第2页：photoshop制作web 2.0网页布局(2)
• 第3页：photoshop制作web 2.0网页布局(3)
• 第4页：photoshop制作web 2.0网页布局(4)
• 第5页：photoshop制作web 2.0网页布局(5)
• 第6页：photoshop制作web 2.0网页布局(6)
• 第7页：photoshop制作web 2.0网页布局(7)
• 第8页：photoshop制作web 2.0网页布局(8)
• 第9页：photoshop制作web 2.0网页布局(9)
• 第10页：photoshop制作web 2.0网页布局(10)
• 第11页：photoshop制作web 2.0网页布局(11)
• 第12页：photoshop制作web 2.0网页布局(12)
• 第13页：photoshop制作web 2.0网页布局(13)
• 第14页：photoshop制作web 2.0网页布局(14)
• 第15页：photoshop制作web 2.0网页布局(15)
• 第16页：photoshop制作web 2.0网页布局(16)
• 第17页：photoshop制作web 2.0网页布局(17)
• 第18页：photoshop制作web 2.0网页布局(18)
• 第19页：photoshop制作web 2.0网页布局(19)
• 第20页：photoshop制作web 2.0网页布局(20)
• 第21页：photoshop制作web 2.0网页布局(21)
• 第22页：photoshop制作web 2.0网页布局(22)
• 第23页：photoshop制作web 2.0网页布局(23)
• 第24页：photoshop制作web 2.0网页布局(24)
• 第25页：photoshop制作web 2.0网页布局(25)
• 第26页：photoshop制作web 2.0网页布局(26)
• 第27页：photoshop制作web 2.0网页布局(27)
• 第28页：photoshop制作web 2.0网页布局(28)
• 第29页：photoshop制作web 2.0网页布局(29)