点击： 混合选项 > 描边 ，按照后面的参数设置描边：尺寸：20px，颜色： #919392。 再添加投影样式。
Copy and paste this element 5 times :) Place these squares with the interval of 20px.
复制粘贴这个对象5次，利用间隔20px的参考线摆放这些正方形
Step 18
步骤18
With the help of a clipping mask, insert the image into the square.
为了创建剪贴蒙版，把图片插入到正方形的地方
As you can see, you really can use this block for all sorts of purposes. Result:
如你所见，你可以尽情的使用这个区块。结果：
Step 19
步骤19
The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer.
网页的页脚和头部区域同样重要，就是如此。问问自己，“你希望当你的访问者到达页面的底部的时候做什么？”。你的答案就是你设计页脚的伟大起点。
Now it is time to design a cool footer for our cute website layout. Let's make it bright :)
是时候来设计我们可爱的网站布局的很酷的页脚。让我们使它明亮。
Add some gradient, for example #3a8df1 - #6bafff, and inner shadow
添加一些渐变，例如： #3a8df1 - #6bafff，和内阴影
Step 20
步骤20
We'll add three blocks into our footer: Quick links, About Us and Follow Us
我们将要在页脚添加三个区块：Quick links，About Us和Follow Us
Use the Arial Regular font for titles (30px) and add styles as on the screenshots below:
给标题用Arial Regular字体（字号：30px），并按照截屏添加图层样式 （颜色：白色）
Use the Arial Regular font for the text in the About Us section (12px).
给About Us部分用Arial Regular字体（字号：12px）添加文字
The text for the Quick Links section - 22px.
Quick Links部分的文字（字号：22px）
Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter
在Follow部分添加一些标准图标：RSS、Google Plus+和Twitter
Woohoo! We did it! The final result of our tutorial:
喔！我们完成啦！这是我们教程的最终效果
后记：
这个网页的风格是清爽，没有采用什么特殊的技术，仅仅是用了一些基本的技术（图层样式、剪贴蒙版等）。但就是这些简单的搭配，搭出了不一样的清爽。在翻译的过程中，对某些参数也进行了一些的修正，使其看起来更加合适整体风格。
更多PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局 相关文章请关注PHP中文网！
查看更多关于PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局的详细内容...