使用Photoshop制作一个优雅而简单的博客网页布局

优雅和简单的博客网页布局教程系列

本教程是由两部分组成的系列教程的第一部分。

这部分(第1部分)处理如何在Photoshop中构建模型，而在下一个教程(第2部分)你将展示如何创建一个HTML/CSS网页模板的PSD设计。

• 第1部分:使用Photoshop制作一个优雅而简单的博客网页布局
• 第2部分:PSD/HTML转换:优雅和简单的CSS3 Web布局(*即将推出)

最终结果

点击下面的图片查看作品全面．

创建一个新的Photoshop文档

1我们直接开始工作吧。首先，打开Adobe Photoshop(很明显)。我使用的是CS4，但其他CS版本也可以正常工作。

首先创建一个新文档(Ctrl/Cmd + N);制作文件1046 px通过1630 px与一个白色背景。

创建背景

2新Photoshop文档的默认背景层将被锁定且不可编辑;我们得做点什么。双击图层面板中背景图层的缩略图;这将打开新建图层对话框窗口，只需按下OK按钮，使图层可编辑。

3.现在在图层面板中按Ctrl/Cmd +单击背景图层的缩略图(默认情况下，Photoshop将其重命名为图层0)，在画布周围放置一个选区。

4在工具面板中设置背景色为蓝色(# 45 a0ac)并按下Ctrl/Cmd + Backspace，这是键盘上的快捷键，用于用背景色填充选区。

5你的背景图层现在应该是深蓝色的。选择过滤>噪音>添加噪音背景图层仍然被选中。

更改金额为2%然后应用滤镜。

设置一些初始Photoshop参考线

6为了使我们的工作保持一致，在以下位置设置三个垂直参考线(查看>新参考线):60.5 px，505 px而且955 px．

提示:通过按Ctrl/Cmd +;切换Photoshop参考线的可见性。

7同时设置水平导向40像素．

添加博客名称

8在工具面板中选择水平文字工具(T)，然后在左上方输入你的博客名称。在本例中，我使用博物馆版500大小大在65年葡．文本颜色应为深灰色(# 252525)，与我们的深蓝色背景形成良好而微妙的对比。

顺便说一下，当你选择水平文字工具时，你可以在选项栏中设置所有这些类型选项。

9在图层面板中双击你博客名字的类型图层，进入图层样式对话窗口。应用投影图层样式和内阴影图层样式给文本一个凸版印刷/插图排版看。

更改投影的颜色为浅蓝色(# 3 f9cb0)，将混合模式调至屏幕，以及Distance和Size to1 px．

10将文本与参考线对齐，就像我使用移动工具(V)来定位文本一样。

添加主导航菜单链接

11再次使用水平文字工具，创建四个(独立的)导航栏链接，使用与之前相同的字体，但这一次，将字体大小减小为20 pt。在单独的图层中输入它们。在本教程中，菜单项为“主页”、“关于”、“档案”和“联系人”。

12将第四个导航栏链接(“Contact”)与最右边的指南对齐，第一个导航栏链接(“Home”)与博客名称的指南右侧对齐。

另外两个链接应该在它们之间。

13为了使它们完美对齐，在图层面板中选择所有4个图层。然后选择图层>对齐>垂直。

14为了使导航栏链接之间有相等的间距，在图层面板中选择所有4个图层，然后选择层>分布>水平中心。

15添加水平参考线(查看>新参考线)88 px然后用移动工具(V)移动链接，使文本停留在参考线上。

创建活动导航菜单链接背景

16我们将用不同的背景、文本颜色和形状突出显示用户所在的页面。背景的形状有点像“书签”(这给了我们的布局某种形式的视觉语义)。

我将向你展示如何创建这个“书签”形状。首先，创建一个新图层(命名为linkbg)。在工具面板中选择矩形选框工具(M)。

在矩形选框工具的选项栏中，将“样式”选项更改为固定大小然后设置宽度选项为100 px和高度选项148 px。将您的选框选择放在我们的导航菜单栏周围的画布上。

17更改您的背景颜色为我们的深灰色(# 252525)并按Ctrl/Cmd + Backspace填充矩形。

18现在选择自定义形状工具，在选项栏中设置形状选项为箭头2(这是一个预先包装的自定义形状，附带Photoshop)。

19用自定义形状工具在你的画布上画一个箭头，然后在图层面板中选择它的图层，这样你就可以旋转它向上指向(编辑>变换> 90^o公约)．

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

21在图层面板中，修改图层堆叠顺序，确保箭头层在灰色的linkbg层之上。

22在图层面板中选择箭头图层和linkbg图层，然后选择层>对齐>水平中心。

23Ctrl/Cmd +在图层面板中单击箭头图层的缩略图，在箭头周围放置一个选区，切换到“linkbg”图层，然后按Backspace或Delete删除箭头选区下面的区域。

在此之后，你不再需要箭头图层，所以你可以删除该图层。

24现在您应该有了活动导航菜单链接的背景，它看起来有点像书签。让我们通过应用内发光、颜色叠加和描边图层样式来设置这个图层，以匹配我们的logo的外观和感觉。

内辉光色应为深灰色(# 2 e2e2e2)．

你不一定需要这个图层样式，因为我们之前已经用这个颜色填充了它。

风格化和定位导航菜单链接

25是时候给我们的菜单栏链接一些样式了。首先，为其他三个非活动链接(“About”，“Archives”和“Contact”)添加投影图层样式。

26接下来，将第一个链接(“Home”)的文本颜色更改为白色(# ffffff)使用水平文字工具(T)。

27使用将第一个链接与书签形状水平对齐层>对齐>水平中心。我在“Home”文本下面添加了一个我在Adobe Illustrator中创建的小嗖嗖矢量形状，但可以随意跳过它。

创建一个水平插入分割线

28添加另一个水平导向160 px。

29选择矩形选框工具(M)创建一个矩形选框890年x1px薄，矩形选择。

30.添加一个新图层(命名为“dividertop”)，在新图层中，按Ctrl/Cmd + Backspace来填充矩形，填充任意颜色。

31为“dividertop”图层添加颜色叠加图层样式，使矩形的颜色比我们的深蓝色背景颜色(# 2 c7c88)．

32使用移动工具(V)将矩形对齐到左边和顶部的参考线。

33复制图层，并将其移动到原始矩形的正下方。

重命名图层为“dividerbottom”。

34给它一个浅蓝色的颜色叠加图层样式(# 4 fbaca)．

设计发布日期背景

35我们现在完成了布局的标题区域。让我们转到主要内容区域，从第一篇博客文章的日期开始。

首先要做的是:我们需要在210 px。

36在工具面板中选择圆角矩形工具(U)，并在它的选项栏中，更改半径为10厘米。

37创建一个75年x150px用圆角矩形工具绘制圆角矩形。

38为圆角矩形图层添加内阴影图层样式，内阴影的颜色设置为蓝色(# 3793 a0)．

39应用颜色叠加图层样式，设置为比内阴影更深的蓝色(# 2 c788)．

40给形状一个描边，应用描边图层样式，描边颜色为深蓝色(# 1 a5a64)而不是内阴影的颜色。

41重命名形状图层为“datebg”(代表“日期背景”)，以保持你的工作有条理，然后对图层进行栅格化(右键单击它，然后选择栅格化图层)。

42使用矩形选框工具，选择形状右侧的约1/3，然后删除所选区域。

43仍然在“datebg”层，通过滤镜>噪声>添加噪声;使用2%查看“金额”选项。

创建Post Date的垂直阴影

44现在为日期的背景创建一个新的阴影层。使用椭圆选框工具(M)，制作一个椭圆17像素宽,100 px高;最准确的方法是使用固定大小作为椭圆选框工具的样式选项，并输入宽度和高度的尺寸。

45将选项放在日期背景的右侧。填充选区(Shift + F5)用黑色(# 000000)并将图层重命名为“shadow”。

46在阴影图层上应用高斯模糊(滤镜>模糊>高斯模糊)，设置半径选项为3 px。

47使用矩形选框工具，选择模糊椭圆阴影的右半边，然后通过退格键或删除键删除这半边。

48通过降低图层的不透明度来完成阴影55%。

添加日期文本、博客标题和元数据

49完成日期背景后，是时候添加博客条目发布的日期了。

从工具面板中使用水平文字工具(T)，使用Museo Slab 500写下你的日期。数值日应该在附近42 pt字体大小和月份(在数字日下面的新一行上)应该为20 pt。我选择写“13 APR”，APR在另一行。

50使用我们之前使用的移动工具和图层对齐命令，将半椭圆形的阴影(“shadow”图层)，日期背景(“datebg”图层)和日期类型的图层文本正确对齐。

51作为文章的标题，我选择了格鲁吉亚字体35分字体大小。对于元数据(作者，评论数量)，我使用图拉真Pro at20分;你可以找到中间的点/格鲁吉亚逗号，我用来分隔作者的名字和评论的数量在这里-复制粘贴到Photoshop。同样，调整文本的前导/行高为28 px。你可以在窗口>字符面板中这样做。

这是我们的日期，博客文章标题和博客文章元数据。

52添加一个垂直引导165 px。将文本与刚刚创建的指南和日期对齐。

添加博客文章导入图片

53使用矩形选框工具(M)创建一个480年x150px矩形(高度取决于你要使用的图像大小，但这个模板的最大宽度是480px)。

54在新图层上用任意颜色填充选区，然后应用描边图层样式来表示图像的边框。

边框颜色为深灰色(# 1 b1b1b)．

添加和定位博客文章条目的内容

55找一张你的照片，粘贴到你的Photoshop文档中。我使用了一张滑雪板选手的照片，但你选择哪一张并不重要;这只是我们PSD模型里的花瓶。用自由变换(Ctrl/Cmd + T)调整图像的大小，使其适合我们的矩形。

56切换到水平文字工具(T)，并在图像下方粘贴一些文本。

您可以使用Lorem Ipsum生成器工具，如这一个为了在一瞬间生成一些文本，但它从来都不是一个坏主意，使用真正的网络副本，使模型看起来尽可能准确。我的字体选择的文本内容是投石机MS在17 pt字体大小和行高为28 pt。

57在图层面板中选择所有博客文章设计元素，并使用我们创建的参考线将其与阴影对齐。

58添加一个新的水平导向450 px。将文本与左参考线和新参考线对齐。

59在图层面板中选择所有的博客文章图层(“datebg”，“shadow”，“date”，博客文章标题文本，元数据文本，图像背景，图像和博客文章文本)，并将它们分组到图层>组图层(Ctrl/Cmd + G)，这将把所有的图层放在一个文件夹中。命名图层组为Post 1。

在博客文章条目的底部添加一个插入水平分隔线

60在700px处添加另一条水平参考线。

复制之前创建的分隔线，重命名图层为“dividerpost”。

61用自由变换调整分割线的宽度，使其与导入图像的宽度相同。然后使用移动工具(V)移动分隔线，使其位于我们刚刚创建的水平导轨上。

添加另一个博客文章条目

62复制Post 1图层组，重命名为Post 2。

63添加一个新的水平导向720 px并将日期框的阴影(Post 2)与新的参考线对齐。

64改变Post 2图层组中的元素，使它看起来与第一篇博客文章不同;例如，评论号、日期和博客标题都可以更改。

构建侧边栏的背景

65创建一个250年x350px使用矩形选框工具在矩形选框选区中填充任意颜色，在一个新图层“侧边栏”上。这个矩形是侧栏的背景。

66将侧边栏与水平参考线对齐210 px最右边的垂直引导线是我们之前创建的。

67给侧边栏的背景一个颜色叠加图层样式;颜色叠加的颜色应该是深蓝色(# 2 c7c88)．

68同样，给侧边栏背景一个描边图层样式，描边颜色为深蓝色(# 116678)．

69设置一个垂直引导730 px一个在930 px;我们将使用这些参考线来确保侧栏内有一些填充。

创建搜索功能

70用圆角矩形工具(U)绘制一个圆角矩形，从左边的垂直导轨(730px)到右边的垂直导轨;圆角矩形应该在周围25个像素高。

命名此形状图层为searchbar。赋予圆角矩形一个白色(# ffffff叠加图层样式。

71找到一个放大镜图标来代表搜索按钮(你可以使用网络工具，如IconFinder寻找免费图标)。

72将图标放置在白色圆角矩形内(向左)。

73做一个水平分割线，就像我们之前做的那样，从730px的垂直参考线延伸到930px的垂直参考线样式。在它和搜索栏之间添加一点间距。

添加侧边栏文本

74现在来看文本。

我添加了一个侧边栏标题(“Recent Posts”)，使用水平文字工具(T)设置为Georgia字体和字体大小为23 pt．我列出了最近三篇使用Trebuchet MS字体的博客文章17 ptleading/line-height，同样是at28 pt。把这个文本层叫做recent posts。

75从上面复制水平分隔符，并移动它，使其位于“recent posts”的底部。

76创建另一个与之前相同的文本层，但这次是最近的评论。

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

设计侧边栏广告单元

78画几个118年x118px使用矩形选框工具绘制正方形。按住Shift键让你的盒子在高度和宽度上保持比例相等。

79在右边对齐一个正方形(到右边的参考线)，在左边对齐另一个正方形(到左边的参考线)。

80用灰色填充两个方格(# f6f6f6)使用颜色叠加图层样式。

这给了我们一个可以加的地方81根据你想要多少广告空间，复制两个灰色框几次或更多。

侧边栏管家

82将所有的边栏元素图层分组，并将该图层组命名为“sidebar”，以保持我们的模型有组织(如果你的前端开发人员必须为你将PSD转换为HTML/CSS，他/她会喜欢你的)。

布局主博客页脚

83做两个新的水平导向:一个在1220 px另一个在1550 px。

84使用矩形选框工具(M)，在布局底部的两条新参考线之间，在我们的页脚之间，画一个矩形，横跨整个网页布局的宽度。用深灰色填充此矩形(# 2 c7c88)．这是页脚的背景。

85在我们的页脚的背景上应用噪音过滤器(过滤器>噪音>添加噪音)使用1%为金额值。

86涂上黑色(# 000000)内阴影图层样式的页脚的背景。

87现在创建三个大小相同、宽度相同的文本列。

在这种情况下，我复制了一些有趣的文本从维基百科给我一些真正的网页复制页脚文本。标题(“Widget title”)设置为23 pt格鲁吉亚和正常文本投石机MS在17 pt。不要忘记将前导/行高更改为28 pt !

创建主博客页脚列分隔符

88对于页脚文本列之间的白色垂直分隔符，我们将使用模式。第一步是创建一个新的Photoshop文档(Ctrl/Cmd + N)，宽度为1 px及高度3 px。

89近距离放大，这样你就可以看到你的工作(使用缩放工具)。

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

91在画布周围选择(Ctrl/Cmd + A)，然后选择编辑>定义图案。

给你的图案命名一些有逻辑的东西，比如“垂直点”。

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

93制作垂直矩形选框(1 x280px)．

94添加一个新图层，按Shift + F5看到填充对话框窗口。在“使用”选项下拉菜单中，从列表中找到我们制作的图案(“垂直点”)，然后按“确定”，用它填充矩形选框。

95复制带有虚线垂直分隔线的图层，并将它们放置在三个脚列之间。

96将文本列分组在各自的图层组中。垂直对齐文本列图层组。

97为两个虚线垂直分隔符添加白色颜色叠加图层样式，使它们显示为白色。

创建辅助页脚

98在布局的最底部创建一个短矩形选框，并填充为深灰色(# 1 f2024)．

99应用噪音滤镜的数量设置为1%。

One hundred.输入一些文本，如您的版权信息使用Trebuchet MS字体17 pt字体大小。

将文本与背景水平对齐，放置在最左边的参考线上。

完成了!

我们完成了!这不是很容易吗?

优雅和简单的博客网页布局教程系列

• 第1部分:使用Photoshop制作一个优雅而简单的博客网页布局
• 第2部分:PSD/HTML转换:优雅和简单的CSS3 Web布局(*即将推出)

下载源文件

• simple_elegant_bloglayout-psd(zip, 1.61 mb)

相关内容

• 如何用Photoshop设计一个干净的商业网站
• PSD/HTML转换:代码一个干净的商业网站设计
• 在Photoshop中创建一个干净和专业的网页设计