• 作者： Eric Hoffman
• 译者：Sheneyan(子乌)
• 时间：2010-10-13
• 英文原文：Make an Elegant and Simple Blog Web Layout Using Photoshop

这篇网页设计教程会为你展示制作一个干净简单的部落格布局的PSD模板的过程。我们会制作这个部落格的首页设计。而教程的第二部分会引导你将PSD转换成HTML/CSS。

《简洁优雅的部落格网页布局教程》系列

这篇教程是一个系列的第一集。这部分(第一集)展示如何在Photoshop中制作模板，而在下一个教程(第二集)里你会看到如何利用这个PSD设计来制作HTML/CSS网页模板。

• 第一集：使用Photoshop建立一个简洁优雅的部落格网页布局
• 第二集：PSD/HTML转换：简洁优雅的CSS3网页布局

最终成果

点击下图可看到完整大小的工作成果。

创建一个新的PSD文件

1让我们直接开始吧。首先，打开Adobe Photoshop(废话)。我使用的是CS4，但其他CS版本也能做得很好。先创建一个新文档(Ctrl/Cmd + N)；设置文档大小为1046×1630 px，白色背景。

制作背景

2你的新PSD的背景图层应该是被锁定且无法编辑；我们需要为此做一些事。双击图层面板上的背景图层缩略图；会弹出一个新的图层对话窗口，点击OK按钮以使该图层可编辑。

3现在按住Ctrl(或Cmd键)单击图层面板上的背景图层缩略图(默认情况下Photoshop会将其更名为Layer 0)以在画板周围放置一个选择框。

4在工具面板中设置背景色为蓝色(#45a0ac)并使用快捷键Ctrl/Cmd+Backspace，让选中的部分填充上该背景色。

5你的背景色现在应该已经设置为暗影蓝。确保背景图层仍被选中的情况下选择菜单滤镜 > 杂色 > 添加杂色。将数量改为2%并应用滤镜。

设置一些Photoshop初始参考线

6 为了方便我们的作品对齐，设置三条垂直参考线(视图 > 新参考线)在这几个位置：60.5px，505px 和 955px。

技巧：使用快捷键Ctrl/Cmd + ; 来切换你的Photoshop参考线是否可见。

7在40px处也设置一条水平参考线。

添加部落格名称

8选择工具面板上的横排文字工具(T)，然后在左上角输入你的部落格名称。在这里，我使用字体Museo Slab 500，字体大小65pt。字体颜色设置成了暗灰(#252525)，与我们暗蓝色的背景形成不错且有些微妙的对比。顺便说一下，当你选中横排文字工具后，你可以在选项栏中设置所有这些类型的选项。

9在位于图层面板的你部落格名称的文本图层上双击鼠标，弹出图层样式对话框窗口。勾选投影和内投影样式以让文本有活版/插图排版效果。

修改投影的颜色为亮蓝(#3f9cb0)，混合模式为屏幕(我猜是第一个“正常”，不过不是很确定)，并把距离和大小设置为1px。

修改内投影的距离和大小为2px。

10使用移动工具(V)将文本对齐到刚才设置的参考线以定位文本。

添加主页导航菜单链接

11再次使用横排文字工具，使用和刚才相同的字体创建四个(独立的)导航栏链接，字体大小缩小为20pt。将他们写在不同的图层里。在这个教程中，菜单项分别为“Home”，“About”，“Archives”和“Contact”。

12将第四个导航栏链接(“Contace”)对齐到参考线最右端，而第一个导航栏链接与部落格名称右侧的参考线对齐。其他两个链接在他们之间。

13为了将他们对齐，在图层面板中选中这四个图层，然后选择图层 > 对齐 > 垂直。

14为了保证导航栏链接之间有相同的空白，在图层面板上选中这四个图层，然后选择图层 > 分布 > 水平居中。

15在88px处添加一条水平参考线(视图 > 新参考线)，使用移动工具(V)将这些链接放置于参考线之上。

制作活动导航菜单链接背景

16我们将用不同的背景色、字体颜色和阴影来高亮用户所在的页面。背景将会饰以类似“书签”的阴影(赋予我们布局一些视觉上的语义)。我会向你展示如何制作这个“书签”阴影。首先，创建一个新图层(将其命名为“linkbg”)。从工具面板中选中矩形选框工具(M)。在这个矩形选框工具的选项栏中，将样式选项改为固定大小并设置宽度选项为100px，高度选项为148px。将你的矩形选框置于画板上我们导航菜单栏周围。

17改变背景色为我们的暗灰(#252525)，点击Ctrl/Cmd + Backspace 填充矩形阴影。

18现在选中自定义形状工具(U)并在选项栏中设置形状选项为Arrow 2(是Photoshop于封装的自定义形状，子乌注：不知道是不是我用的版本是简化版，没找到Arrow 2，我用Arrow 9代替)。

19使用自定义形状工具在你的画板上画这个箭头，然后在图层面板上选中它所在的图层，将其旋转以朝上 (编辑 > 变换 > 旋转90^o 逆时针).

20右键单击箭头图层，选择 栅格化图层 将其转换成普通图层。

21在图层面板上修改图层的顺序以确保箭头图层在灰色“linkbg”层之上。

22在图层面板上选中箭头图层和“linkbg”层，选择图层 > 对齐 > 水平居中。

23Ctrl/Cmd + 单击图层面板的箭头图层缩略图以选中该图层，切换到“linkbg”图层，单击backspace或delete删除箭头图层下的区域。

做完之后，你不再需要这个箭头图层啦，干掉他就是了。

24现在你的活动导航菜单连接已经有了一个看着像书签的背景。通过应用内发光、颜色叠加和描边来设计这个图层以匹配我们logo的观感。

内发光颜色设为暗灰 (#2e2d2d).

颜色叠加再次使用我们的暗灰 (#252525)。你并不一定需要这个图层样式，因为之前我们已经使用了这个颜色填充图层。

描边颜色设为黑色 (#000000).

现在我们的“书签”活动链接指示看起来应该像这样：

设定导航菜单链接的样式和位置

25现在该给我们的菜单栏链接设置一些样式。首先，添加一个投影样式到其他三个非激活连接上(“About”、“Archives”和“Contact”)。

26下一步，使用横排文字工具(T)改变第一个链接(“Home”)的文本颜色为白色。

27使用 图层 > 对齐 > 水平居中来水平对齐第一个链接和书签形状。我在“Home”文本下加了个在Adobe Illustrator下制作的小小的波浪矢量形状，不过可以不管它。

制作水平内陷分隔线

28在160px处添加另一条水平参考线。

29选中矩形选框工具(M)并创建一个 890×1px 大小的瘦长选框。

30添加新的图层(命名为“dividertop”)，在这个新图层上，单击Ctrl/Cmd+Backspace用任意颜色填充刚才的矩形。

31给“dividertop”图层应用一个颜色叠加图层样式以使该矩形的颜色比我们的暗蓝背景颜色稍亮(#2c7c88)。

32使用移动工具(V)将这个矩形与参考线左对齐和上对齐。

33复制图层并将它向原有矩形的右下方移动。重命名图层为“dividerbottom”。

34给它设置一个亮蓝颜色叠加图层样式(#4fbaca)。

在图层面板中同时选中“dividertop”和“dividerbottom”图层来链接它们——右键单击它们其中一个，从右键菜单中选择链接图层。这样当我们需要移动它们的时候它们会一起移动。

设计发布日期背景

35我们现在完成了布局的头部区域。接下来是主体内容部分，先是第一个部落格文章条目的日期。再首先：我们需要在210px处添加另一条水平参考线。

36在工具面板中选中圆角矩形工具(U)，在它的选项栏中，改变半径为10cm。

37使用那个圆角矩形工具创建一个75×150px大小的圆角矩形。

38给刚才的圆角矩形图层应用一个内阴影样式——设置内阴影的颜色为蓝色(#3793a0)。

39应用一个比内阴影更深的蓝色叠加图层样式(#2c788).

40给这个形状应用一个描边图层样式——使用比内阴影更深的蓝色线条颜色(#1a5a64)。

41将这个图层重名为“datebg”(意即“日期背景”)以使你的作品有组织，接着栅格化这个图层(右键单击，选择栅格化图层)。

42使用矩形选框工具，选中形状右边部分的1/3，删除选中区域。

43还是在图层“datebg”，通过滤镜 > 杂色 > 添加杂色添加一个杂色滤镜，数量选项设置为2%。

制作发布日期的垂直阴影

44现在给日期背景的阴影创建一个新图层。使用椭圆选框工具(M)，做一个大约17px宽100px高的椭圆形；最精确的方式是使用椭圆选框工具样式选项里的固定大小并输入宽和高的维度。

45将这个选框置于日期背景的右端。使用黑色(#000000)填充选框(Shift+F5)并将图层命名为“shadow”。

46在“shadow”图层上应用一个高斯模糊(滤镜 > 模糊 > 高斯模糊)，设定半径选项为3px。

47使用矩形选框工具，选中该模糊椭圆阴影的右半部分，单击backspace或delete删除这半部分。

48降低图层的透明度至55%，结束。

添加日期文本，文章标题，元数据

49日期背景完成后，接下来是添加部落格文章发布的日期。点击工具面板上的横排文字工具(T)，使用字体Museo Slab 500写下你的日期。数字天数的字体大小应该是42pt，而月份——位于数字天数下的一行——为20pt。我输入的是“13 APR”，APR另起一行。

50使用移动工具和之前使用过的图层对齐命令对齐半椭圆阴影(图层“shadow”)、日期背景(“datebg”)和日期文本图层。

51至于文章的标题，我选择Georgia系列字体，35pt大小。而元数据(作者、回复数)，我使用20pt的Trajan Pro。你可以看到我用middle dot/Georgian comma来分隔作者名与回复数——直接复制并将其黏贴到Photoshop中。另外，修改文本行高为28px。你可以在窗口 > 字符面板中修改。

下面是我们的日期，部落格文章标题，以及文章元数据。

52在165px处添加一条垂直参考线。将你的文本与参考线和日期对齐。

添加部落格文章前置图像

53使用矩形选框工具(M)，创建一个480×150px 矩形(高取决于你使用的图像尺寸，但针对这个模板，最大宽度为480px)。

54在一个新图层上使用随便一种颜色填充你的选框，然后应用一个描边图层样式来给我们的图片加个边框。边框的颜色是暗灰(#1b1b1b)。

添加并定位部落格文章内容

55照一张你的图片并将其黏贴到你的PSD文件中。我用了一张滑雪板的图，不过你选什么样的图片并不重要；它只是我们PSD样板中的小点缀(eye candy，华而不实的东西)。使用自由变换(Ctrl/Cmd + T)调整你图片的大小以使其恰好塞进我们的矩形框中。

56切换到横排文字工具(T)并在图片下黏贴一些文本。你可以使用类似这个的Loerm Ipsum生成工具(用于排版的常用无意义文字)在一瞬间生成些文本，不过用一些网页副本来让这个样板尽可能的真实不会是个坏主意。我为文本内容选用的字体是Trebuchet MS，17pt大小，并设置行高为28pt。

57在图层面板中选中所有的部落格文章设计元素并以我们创建的参考线为基准对齐。

58在450px处添加一条新的水平参考线。让文本与左侧参考线和新参考线对齐。

59从图层面板中选中所有的部落格文章图层(“datebg”、“shadow”、“date”、部落格文章标题文本、元数据文本、图片背景、图片以及部落格文章文本)，试用 图层编组(Ctrl/Cmd + G)将他们一起分组，这会让所有的所有这些图层位于同一个文件夹下。命名这个图层分组为“Post 1”。

在部落格文章底部加一条内陷水平分割线

60在700px处添加另一条水平参考线。复制我们刚才创建的分割线并命名该图层为“dividerpost”。

61使用自由变换调整这个分割线的尺寸让它和前置图像一样宽度。接着使用移动工具(V)将其挪动到我们刚创建的水平参考线位置。

添加另一篇部落格文章

62复制图层分组“Post 1”并重命名为“Post 2”。

63在720px处添加新的水平参考线，将Post 2的日期框的阴影与新参考线对齐。

64改变图层分组“Post 2”的元素以使它与第一篇部落格文章区分开来；比如，改掉回复数，日期，和部落格文章标题。

制作侧边栏背景

65使用矩形选框工具创建一个250×350px大小的矩形(在一个新图层将这个矩形选框用随便一种颜色填充，并将新矩形命名为“sidebar”)。这个矩形是我们的侧边栏背景。

66让这个侧边栏与位于210px的水平参考线和我们之前创建的最右边的垂直参考线对齐。

67给这个侧边栏背景设一个颜色叠加图层样式；颜色叠加的颜色设为暗蓝(#2c7c88)。

68另外，给侧边栏背景也设一个描边图层样式，描边颜色更暗一些(#116678)。

69在730px和930px各设置一条垂直参考线；我们利用这些参考线确保在我们的侧边栏内部有一些留白。

制作搜索栏

70使用圆角矩形工具(U)从左边的垂直参考线(730px位置)画至右边的垂直参考线；这个圆角矩形大约25px高。将这个阴影图层命名为“searchbar”。给这个圆角矩形设一个白色(#ffffff)的颜色叠加图层样式。

71找一个放大镜图标来充当搜索按钮(你可以使用类似IconFinder的在线工具来寻找免费图标)。

72将这个图标定位在白色圆角矩形内部(在其左部)。

73创建一条就像我们之前做的水平分割线。跨度从730px的垂直参考线到930px的垂直参考线。在它和搜索栏之间保留一点小小的空白。

添加侧边栏文字

74现在轮到文字了。我使用横排文字工具(T)加了一个侧边栏标题(“最近文章”)——Georia字体，字体大小23pt。其下我列了最近发布的三篇部落格文章，使用字体Trebuchet MS，大小17pt，行高28pt。将这个文本图层命名为“recent posts”。

75复制上面的水平分割线并将它移动到“recent posts”的底部。

76创建另一个类似的文本图层，命名为“recent comments”。

77将这两个文本块与左侧参考线对齐。

设计侧边栏广告位

78使用矩形选框工具画一对118×118px大小的正方形。按住shift键以确保你的方块的宽和高完全一致。

79将一个方块右对齐(靠向右边参考线)而另一个左对齐(靠向左边参考线)。

80使用灰色(#f6f6f6)颜色涂层叠加样式填充这两个正方形。这是给我们的部落格放置 banner广告的地方。

81将这两个灰色方块复制两次或更多，这取决于你打算放几个广告。

侧边栏整理

82将所有的侧边栏元素图层编组并命名这个图层分组为“sidebar”以保持我们的样板整洁(如果你和一个将你的PSD转成HTML/CSS的前端工程师一起工作，他会因此爱死你的)。

布局主体页脚

83新增两条新的水平参考线：一条在1220px而另一条位于1550px。

84使用矩形选框工具(M)，横跨整个页面布局宽度——两条新参考线之间——画一个矩形，这就是我们的页脚呆的地方。使用暗灰(#2c7c88填充矩形。这是我们的页脚背景。

85给我们的页脚背景应用一个杂色滤镜(滤镜 > 杂色 > 添加杂色)，数量设为1%。

86给页脚背景应用一个黑色(#000000)内阴影图层样式。

87现在添加三个一样尺寸的文本栏，全都一样宽度。在这里，我为页脚文本的真实网页副本而从维基百科复制了一些有趣的内容。标题(“Widget title”)设为Georiga，23pt，普通文本则为Trebuchet MS，17pt。别忘了将行高改为28pt！

制作主体页脚栏目分割线

88为了制作页脚文本栏目之间的白色垂直分割线，我们将使用图案(pattern)。第一部是创建一个新的PSD文件(Ctrl/Cmd + N)，宽度为1px、高度为3px。

89放大到足够近以让你能看清你的作品(使用缩放工具)。

90使用矩形选框工具和编辑 > 填充将第一个像素(顶端)染为黑色(#000000)。

91选中整个画板(Ctrl/Cmd + A)然后选择 编辑 > 定义图案(子乌注：CS4中将Define Pattern翻译为定义图案)。命名你的模式，如“Vertical Dots”。

92切换回我们的主要Photoshop文档。

93创建垂直的矩形选框(1×280px)。

94添加新的图层并单击Shift + F5查看填充对话框窗口。在使用选项下拉菜单中，从列表中找到我们刚创建的图案(“Vertical Dots”)并单击OK，使用它来将我们的矩形选框填满。

95复制这个虚线垂直分割线图层并将它们放置于三个页脚栏目之间。

96将这些文本栏目进行编组，垂直对齐。

97添加一个白色颜色叠加图层样式到每一个虚线垂直分割线上，让他们显示为白色。

创建辅助页脚

98就在布局的正底部创建一个短的矩形选框，并用暗灰(#1f2024)填充。

99应用杂色滤镜，数量设为1%。

100输入一些文本，例如你的版权信息，使用字体Trebuchet MS，17pt。将文本与最左边的参考线水平对齐。

结束！

大功告成！这不是很简单吗？(照着做很简单……我翻这100条翻了好久……)

简洁优雅的部落格网页布局教程系列

• 第一集：使用Photoshop建立一个简洁优雅的部落格网页布局
• 第二集：PSD/HTML转换：简洁优雅的CSS3网页布局

下载源文件

• psd文件 (ZIP, 1.61 MB)

子乌注：以后我都会用部落格来翻译blog，还是喜欢这个台湾的译法。