在今天的这个教程中，木木和童学们分享：使用photoshop设计一个非常清爽的网站主页，特色是网站的配色非常的不错，童学们好好学习一下。

效果图：

1。在这个网页设计教程中，使用的是960网格，所以童学们得先下载一个960网络，然后导入到photoshop软件中。通过编辑>画布大小，改变文件的大小为：1600x1500px。

（注：宽度可以自由更改，但为了能在宽屏的显示器中也能更好的显示，建议大家还是用1600px）
2.找一张清爽的水图片，导入到photoshop中。

3.在视图>添加新参考线，添加三条水平参考线：80px，110px和170px。
4。接下来我们制作网站的LOGO。选择“文字工具”并设属性：字体大小72px;输入网站的名字，接下来设置文字的样式。

如下图：

效果如下图：

5。做完网站的LOGO后，接下来开始做网站的导航。
选择“圆角矩形工具”并设圆角半径为：15px，并填充白色；设不透明度为：70%。

6.在网站的导航条上添加文字；文字的属性为：#0263a4；大小24px。
7。接下来制作导航的hover状态。
选择“圆角矩形工具”并设圆角半径为：15px，绘制一个按钮出来并填充黑色。双击此图层添加图层样式。

效果如下图：

8。制作搜索栏
还是使用“圆角矩形工具”并设圆角半径为：15px，绘制想要的长度，并设“图层样式”设置如下图：

“内阴影”选项：不透明改为：0%

找一个“放大镜的图标”放置在右边。

头部做完了，接下来就开始做产品展示部分。

9。新增参考线：200px，465px和500px.还是选择“圆角矩形工具”并设圆角半径为：15px。从500参考线往上绘制一个圆角矩形并填充白色，

设不透明度为：70%。

10。接下来制作左侧的方块。
依然使有“圆角矩形工具”，从465参考线开始绘制一个高为300，宽为560的矩形，双击打开此图层设其“图层样式”
效果如下图：

11.在这个左侧的方框里添加一个小方框来放图片。这个小方框的大小为：500x221px。并设“图层样式”

设置效果下图：

12。在方框的右侧添加一些内空

添加一个“more”的按钮，copy第7步的“图层样式”。

13.绘制图片的滑块
绘制一个小矩形，并设如第12步的图层样式。
接下来我们使用“椭圆工具”按shift键绘制一个小正圆，然后填充＃e8e8e8 并设图层样式：

最终的效果哪下图：

14.添加一条新的参照线：550px.接下来我们来做内容的背景。选择圆角矩形工具”并设圆角半径为：15px，从参照线：550px到页面的底部。

15。添加一条参考线：680px；从这个参考线到550px那条之间，添加类似“公告栏”文字。

16。添加一条参考线：880px，和参考线：680px之间，使用“矩形工具”绘制一个矩形，填充任一颜色，

并添加如下图的“图层样式”。

添加一些尺寸为：180*135px的图片，并设“图层样式”。

17.接下来我们给图片的两边加一个“箭头”，使用“自定义图形”选择一个箭头的形状，并设置“图层样式”(颜色叠加：＃87cdf5)

18。添加图片和文字，如下图：

19。再次添加新参考线：1280px和1350px，使用“矩形工具”绘制出一个矩形，并设如下图“图层样式”

20。添加图标（图标的颜色：＃87cdf5），文字

21。接下来绘制分隔线

使用“线条工具”绘制两条坚线，一条填充：＃0270bc；另一条：#148bcf。

然后点击“面板”上的“蒙版图标”，

添变效果如下图：

22。最终效果如下图：漂亮不，一个清爽的网页布局就在你手上制作出来了。

全教程完,学完记得交作业。如果本教程对您有所帮助，请推荐给你的朋友。