在这个简单易懂的网页设计教程中，您将学习如何使用Adobe Photoshop构建一个漂亮的、圆滑的、专业级别的博客设计，稍后您可以将其用于您自己的博客主题。
最终结果
你可以看看我们要做什么。一定要点击它来查看全面的版本博客的布局。
设置Photoshop文档
1创建一个新的Photoshop文档，文件>新建(Ctrl + N)，画布尺寸为1024 px通过1184 px．
2使用编辑>填充(Shift + F5)填充背景图层的颜色# 252424．
创建布局的标题
3.我们首先要创建布局的Header部分。在一个新图层上，用矩形选框工具在画布的顶部创建一个矩形选区。使用下图作为创建选区的指导。
4用编辑>填充矩形选区(Shift + F5);使用黑色填充色# 000000．5为了增加一点情趣，我们想添加一个渐变叠加。进入图层面板，右键单击新创建的图层，选择混合选项，并添加渐变叠加使用下面的设置设置图层样式。
创建布局的导航菜单
6现在，我们要处理导航菜单。再次使用矩形选框工具(M)创建一个类似下图的选区，然后用白色填充(# FFFFFF)．
7在工具面板中，选择多边形套索工具，创建如下图所示的选区，然后选择编辑>清除，删除套索选区下方的区域。
8我们不只是想让它保持白色，所以让我们添加一个渐变叠加的图层样式到这个图层上。
你的导航菜单现在应该是这样的:
9接下来，在图层面板中，Ctrl +点击图层的缩略图，在导航菜单背景周围做一个选择。创建一个新图层，用白色填充选区，# FFFFFF．
10当仍然选中时，使用向下箭头键将选区向下推，然后选择编辑>清除。然后，取消当前选区(Ctrl + D)，并使用移动工具(V)将你的图层向下移动1px。它看起来像这样:
11改变图层的混合模式为柔和的灯光并降低不透明度为58%．
现在，您的导航将类似于下图。
12导航剩下的工作就是为链接添加一些文本。我使用海维提卡前色为白色(# FFFFFF)浏览所有的导航连结。“订阅RSS”的连结，我用橙色(# ED832E)．然后我在它旁边添加了一个漂亮的小feed图标提要图标您可以免费下载和使用(参见提要图标指南更多细节请访问他们的网站)。
制作布局的logo
13现在让我们来看看我们的logo。我们想让发光的颜色后面的文本首先。创建一个新图层，使用椭圆选框工具羽毛选项设置18 px，创建一个类似于下面的选区，用粉红色填充它(# DA4D89)．更改此图层的混合模式为生动的光．
14用同样的方法再创建两个图层，但将填充颜色改为绿色(# 06 fa05)和黄色(# FEFB03),线性光对于他们的图层混合模式。至于图层排序，让粉色在底部，绿色在中间，黄色在顶部，然后使用移动工具移动它们，直到你得到如下图所示的东西。
15我们现在要做的是将发光分组在一起。选择这三个图层，然后按Ctrl + G将它们分组到一个文件夹中。然后做一个类似下图的选择。
16选择仍然活跃，添加一个图层蒙版单击添加图层蒙版图标在你的图层面板底部。
你现在应该得到这样的结果:
17现在，我们只需要为我们的logo添加文本。我用的字体是InaiMathi的名字，我用的是标语Helvetica Neue(你可以在Six Revisions logo上看到这一点)。如图所示。
18现在,添加一个阴影而且渐变叠加图层样式到你的“Sleekside Studio的”(或任何你使用的网站名称)文本图层。
19然后，在标语上加上外发光和一个渐变叠加图层样式。
现在，您应该拥有如下图像所示的内容。
20.我们需要做的最后一件事是在头文件中添加一点1 px-高光泽到底部。用矩形选框工具(M)或工具面板上的单行选框工具在头部底部画一个1px高的选区，用白色填充。
21将图层的不透明度降低到约64%，然后将其混合模式更改为柔和的灯光．现在您应该得到如下图所示的内容。
致力于博客条目的设计
22是时候讨论如何显示我们的帖子了。使用矩形选框工具(M)，创建一个矩形选区，如下所示，并在它自己的图层上，填充白色(# FFFFFF)．这将保存每个博客文章条目的缩略图。
23现在插入一个渐变叠加图层样式设置如下。
24再次使用矩形选框工具，在缩略图夹旁边创建一个选区，并在它自己的图层上，填充白色(# FFFFFF)．这将包含博客文章条目摘录文本。
25接下来，我们需要在两个盒子之间创建一个高光和阴影。
使用矩形选框选区和下图制作这些1px的内嵌分割线。
26再次使用矩形选框工具，创建一个类似于下图的选区，并填充黑色(# 000000)．
27现在,添加一个渐变叠加在此图层上添加图层样式。
你的博客文章入口部分现在应该如下图所示。
28再次使用矩形选框工具创建一个1 px-高度选择(创建一个新图层)在你创建的博客文章摘录框的顶部，使它看起来很漂亮。降低此图层的不透明度为29%左右。
29最后一件事，我们需要做的博客文章入口设计是为“继续阅读”链接创建一个按钮，将用户引导到完整的博客文章。使用矩形选框工具(M)，创建一个类似于下图的选区，并填充黑色(# 000000)．用水平文字工具(T)在画布上添加文字，前景色为白色(# FFFFFF)．
30.接下来,插入一个渐变叠加图层样式到按钮的图层。
31最后，添加一些内容，使您的设计看起来像下图。添加示例内容将使模型看起来更真实，当您向客户展示它时。
设计一个分页博客功能
32许多博客显示分页在底部的链接，这样你可以很容易地浏览旧的帖子。让我们继续，并获得简单的分页布局。我只是加了些文字。对于活动页面，我使用了渐变叠加图层样式。
设计侧边栏
33是时候进入侧边栏了。用矩形选框工具在博文入口区域的右边做一个选区，用黑色填充(# 000000)．
34接下来,添加一个外发光,一个渐变叠加和一个中风图层样式。
35我们将在侧边栏设计的顶部预留125px x 125px的广告横幅位置，所以要为它们留下足够的空间。我们还想添加一个小搜索区域。对于标题，我使用了字体Helvetica CY．
我把字体的重量设置为平原浏览“搜索”文本及大胆的为“博客”文本。对于虚线作为分隔线，只需使用水平文字工具(T)和颜色选项设置为# 79818 d然后写上“——”。36在标题文本旁边添加一些图标。37对于搜索框，使用与步骤30中相同的图层样式，并添加一个中风使用以下设置设置图层样式。
38重复上面的步骤，在侧栏上添加更多的部分。这是我最后得出的结论:
创建布局的Footer部分
39现在，轮到Footer了。确保Footer的图层都在侧边栏图层之下。使用矩形选框工具(M)，创建一个类似于下图的选区，并填充# 000000．
40现在添加一个渐变叠加在上面的图层上添加图层样式。
41再次使用矩形选框，创建一个1 px-高选区，用白色填充# FFFFFF)使你的脚的顶部发亮。
42降低1px分光镜的不透明度24%，并设置图层的混合模式为柔和的灯光．现在只剩下以与侧栏类似的方式添加一些样例内容。
和……你完成!
恭喜你，你已经完成了教程。
如果您按照下面的步骤进行操作，您应该会得到如下图所示的内容。
下载源文件
如果您想检查您的工作与我的，您可以下载下面的最终PSD文件。
- impressive-blog-layout.zip(ZIP, 0.97 MB)
在Flickr上分享你的作品!
如果你跟着我，为什么不把你的作品发到六修订版用户组在Flickr上吗?我们很想看看你最终得到了什么!
