描边的颜色： #343434
9. Again with the rectangle tool draw a white 'window', double click into Blending Options and put in the settings below.
9、再用矩形工具画窗户 （168，335，864，274） ，双击打开图层样式，按下图设置样式
10. Next for the slider I've got some ice cream images, I've shrunk the images down (using the ctrl+t method we used earlier). To make the white background of the images transparent I've put all the ice cream images into a folder and set the Blending Mode to Multiply.
10、接下来在左边将用到一些冰激淋图片，缩小这些图片（用之前的Ctrl+T的方法）。为了使白色背景看起来象透明的，我将这些图片归并一组，然后设置组的混合选项为正片叠底
11. For the slider I've used the font Heartbreaker, I've rotated the text by pressing ctrl+t and rotating the edges. I've gotten an Hand Drawn , copied & pasted it into the canvas and have changed the size & rotated it using the ctrl+t method & changed the colour by double clicking into Blending Options > Color Overlay.
11、另一边我用Heartbreaker字体 （用Pristina字体替代，具体的设置如下图） 添加一些文本，按Ctrl+T，旋转文字。我获得一些手绘图案，拷贝到画布上，用Ctrl+T调整大小，旋转角度，双击打开图层样式窗口，设置颜色叠加样式去更改颜色
文字的格式设置如下图
由于图案比较简单，直接自己手绘了。先新建图层，然后在新图层上用画笔工具手绘，仔细点就可以了
12. Now draw a box with the rounded rectangle tool, double click into Blending Options and put in the settings below & rotate the box. Using the circle tool draw a black circle & with the line tool draw 2 lines for strings. Place the blue sign layers into a folder.
12、用圆角矩形画一个方块 （宽80px，高60px） ，双击打开图层样式窗口按照下图设置样式，旋转该方块，用椭圆工具画一个小黑圆，用直线工具画两条直线。把这些蓝色符号的层归并到一个组
渐变叠加的颜色： #3789cd，#2f6ba3，#3789cd
方块旋转的角度建议是159度，因为之前设置的渐变叠加的角度是111度，通过计算可知159度是渐变的方向和方块的方向一致
13. Duplicate the blue sign folder by dragging them to the new layer icon. Go into the Custom Shape tool and choose the arrow, draw a white arrow on each blue sign.
13、复制蓝色符号的文件夹，拖动到新建图层的图标上。用自定义形状工具，选择箭头，在每一个蓝色的符号上添加一个箭头
14. Next draw a 'title' box using the rectangle tool, double click into Blending Options and put in the same red gradient as the 'roof' & put in a 1px dark grey stroke. Next draw a white box with a 1px stroke. Holding down the ctrl key select the 2 shapes you created and duplicate them 4 more times. Place each of them where you want. To make a box larger press ctrl+t and stretch out the box.
14、接下来用矩形工具画标题方块 （168，630，264，45） ，双击打开图层样式窗口，添加和roof图层一样的渐变叠加，并添加1px的深灰色 （#343434） 的描边，接下来画一个白色的方块 （168，675，264，195） ，1px的描边。
按住Ctrl键选择两个图层，复制四次。移动每个方块到合适的位置。然后用Ctrl+T更改一个方块的大小
如下图，五个标题方块的位置分别是（168，630），（468，630），（768，630），（168，900），（768，900）
左下角的大方块的宽度为564px，大方块中白色方块的高度为416
15. I've put in the headings with the font Bebe Neue, and written out the content in Arial font. I've gotten the icons from the Danish Royalty Free Icon set.
15、在每个方块书写标题，用字体Bebe Neue；书写内容，用字体Arial。我从Danish Royalty Free Icon上获得了一些免费的图标
直接复制roof图层上的文字图层，移到合适的位置，修改标题文字。Danish Royalty Free Icon的链接已经失效，改从其他地方获得图标
16. Using the rectangle shape tool draw out some boxes for the contact form using the colour below. Double click into Blending Options > Stroke and put a 1px dark grey stroke. Draw a button with the rounded rectangle tool & put in the same gradient and stroke as the red title box.
16、用矩形工具在contact表单里画一些方块，颜色如后所示（#ebebeb）。双击打开图层样式窗口，添加1px的深色 （#343434） 描边。用圆角矩形工具添加一个按钮，给按钮添加和标题栏一样的渐变叠加和描边样式
17, Next holding down the shift key draw 2 boxed with the rectangle tool like below, one white & small and the second large. On the larger box double click into Blending Options and put in the settings below:
17、接下来用矩形工具按住Shift键画两个正方形，如下图所示，一个白色小点的，和一个白色大点的。在大点的正方形上双击打开图层样式，按下图设置样式
为了醒目，小的白色正方形颜色改成红色
Write out the example post title & post description.
书写博客的标题和说明， 标题的字体和标题栏里的字体一样，颜色为红色，说明文字的字体和其他栏目里的字体一样
18. Next copy & paste an example image, right click and Create Clipping Mask (this will crop the image to the size of the white square).
18、接下来复制粘贴一个示意图片，右键创建一个剪贴蒙版（这会使你的图片限制在白色正方形中， 本示例为了醒目，已经改成红色 ）
19. Duplicate the send button you created earlier and place it as a button under the post, change the 'send' to 'continue reading'.
19、复制你之前创建的第二个按钮，把按钮移到说明文字的下方，把send改成continue reading
20. Next I've gotten some icy pole social icons and placed them on top of the layout.
20、接下来，下载一些icy pole social icons，把它移到布局的合适位置
21. Next write out the title of your website, I've used the font Heartbreaker. Double click on the title into Blending Options and put in the settings below:
21、接下来添加网站的标题，字体：Heartbreaker，双击文字图层打开图层样式，按下图设置样式：
Go into the Custom Shape Tool & choose this snow flake symbol & while holding down the shift key draw some snow flakes.
切换到自定义形状工具，选择雪花形状，按住Shift键，添加一些雪花
22. Lastly write out some Copyright details for the footer.
22、最后在页脚添加一些版权信息
Final Result
最终结果
后记：
夏日里的清凉。由于该教程是参照960布局系统完成的，有些局部的尺寸比较随意。在翻译的时候，计算这些尺寸费了一番功夫。
对设计师来说，天生对尺寸有很好的把握，就是鼠标拖拖，尺寸也能拿捏的到位。
对编码者来说，初期学习阶段，还是要仔细计算各部分的尺寸为好。等将来做的多了，感觉到位了，再随意点也不迟。
更多PS网页设计教程VII——在Photoshop中设计卡通店面布局相关文章请关注PHP中文网！
查看更多关于PS网页设计教程VII——在Photoshop中设计卡通店面布局的详细内容...