也可以用 矩形工具 画一个矩形（400，52，200，117），颜色： #e3dfc6
See below the final result of header and logo.
下面是最终的头部区域和LOGO
STEP 5 Contents of the left part
步骤5：左边部分的内容
It’s easier to create the contents, use the Text tool (T) to create the title. I used the two following colours: the grey #706d5c and the red #d7281e and the same font than the one used for the menu but with a size of 90px.
内容部分是非常容易创建的，用文字工具创建标题。我用后面的两种颜色，灰色： #706d5c，红色： #d7281e，字体和菜单栏上的字体一样，但是字号改为90px
Use same method to create the paragraphs, with the fonts Times New Roman et Tahoma and a size of 12px.
用同样的方法创建段落，字体用Times New Roman ， 字号：20px ；另一段字体用Tahoma， 字号11px
STEP 6 Contents of the right part
步骤6：右边部分的内容
I used one more time a resource downloaded from our website partnership Shutterstock. Download the vector file, and then open it under Illustrator. Copy and paste it into your Photoshop document. Change the height size regarding the number of text lines.
我多次从我们的网站合作伙伴关系的Shutterstock上下载资源。下载矢量文件，然后在Illustrator中打开它。复制并粘贴到你的Photoshop文件。调整和文本行数的高度相同的尺寸。
The result below must be what you get under Photoshop.
你所得到的Photoshop中的结果必定和下面一样的吧
STEP 7 The pider
步骤7：分割器
I created a sharing bar under the content; it helps to come back to the top of the page (if you want to create a landing page, check further in this tutorial).
我在内容下创建了一个共享栏，它有助于回来页面顶部（如果你想创建一个登陆页面，请查看本教程中后半部分）。
Duplicate the bar (the one with the size of 1000x5px we previously created), then place it under the contents.
复制横栏（我们之前创建的1000px*5px的矩形），然后把它摆放到内容的下方（0，716）
Go back to your first vector document under Illustrator, then select and copy the small round including the rocket. Copy the small logo into your Photoshop document. Put the round in the center of your picture (see the picture below).
回到你第一个Illustrator中的矢量文档，然后选择并复制包括火箭的小圆。复制小的LOGO到你的PS文档。摆放到你的图片中的圆的中心（参看下图）
Remember the method to place an element in the middle of your picture. Press on Cltr/Tab + A to create an active selection around aall your document. Select now the Move tool (V) and click on icon “Align the centres on the horizontal direction” (located in the options bar, on the top of your screen).
记住如何把一个元素放置在您的图片中的方法。按CLTR+ A全选您的文件。现在选择移动工具（V），点击图标“的中心对齐在水平方向”（位于屏幕顶部的选项栏中）。
Add two layer styles on your logo: a colour overlay and a stroke of 5px (use for both style, the colour #e3dfc6).
给你的LOGO添加两个图层样式：一个颜色叠加和5px的描边（ 描边样式的颜色： #e3dfc6 ），
See the result of the pider rocket.
查看分割火箭的结果
STEP 8 Create the footer
步骤8：创建页脚
Regarding the footer, duplicate the first grey bar created in the first step. Use the Move tool (V) to move the copy at the bottom of your document.
关于页脚，重复第一步骤中创建的第一个灰色横栏。使用移动工具（V）将它移动在文档底部的（0，853）。
Duplicate the red logo and place the copy at the bottom of your document.
复制红色的LOGO并摆放到你的文档的底部
Add a stroke of 5px using the layer styles (colour #e3dfc6).
添加一个5px的描边的图层样式（颜色： #e3dfc6）
Use the Text tool (T) to create the Copyright of your website, on the left side of your logo. (I used the grey #706d5c and the red #d7281e as well as the fonts Times and Myriad).
用文字工具在你的LOGO的左边创建你的网页的版权信息。（我用的颜色，灰色： #706d5c，红色： #d7281e，字体最好选择Times和Myriad）
红色的字体：Times New Roman；字号：15px，加粗；颜色： #d7281e
灰色的字体：Myriad Pro；字号：12px；颜色： #706d5c
Same thing regarding the links to the social networks and the reminde of the top menu. Reserve place for free spaces between each social network links, to insert the regarding icons.
和有关的社会网络和reminde的顶部的菜单做同样的事情。准备空间为社会媒体链接的，插入有关图标。
两行文字和左边的两行文字字体相同，颜色：#d7281e和 #706d5c
Go to these pages to download the Twitter, Facebook, and Dribbble icons.
到这些页面下载Twitter, Facebook, 和 Dribbble 图标。
Reduce the icons sizes regarding the texts sizes.
调整图标的尺寸和文字的尺寸一样
On each icon, add a colour overlay #706d5c (menu layer> layer style> colour overlay).
给每个图标，添加颜色叠加样式，颜色： #706d5c（点击： 图层 > 图层样式 > 颜色叠加 ）
We are already finished with The Template! As I told you at beginning of this tutorial, it was really easy.
Here are some ideas to create the other pages.
我们已经完成了模版！就像我之前告诉你的，它是非常容易的
这儿有一些创建另外一些页面的设计，可以参考一下
或
或
或
后记：这篇教程简洁明了，比较简单，整体页面风格清新朴素。尤其是利用描边的颜色（和背景色颜色一致）来实现图片和其他元素之间的分割的技术让人眼前一亮。
更多PS网页设计教程XXV——使用Photoshop设计的老式组合布局相关文章请关注PHP中文网！
查看更多关于PS网页设计教程XXV——使用Photoshop设计的老式组合布局的详细内容...