Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

如何用Photoshop设计优雅的部落格版面

by
Difficulty:IntermediateLength:MediumLanguages:

Chinese (Simplified) (中文(简体)) translation by Stypstive (you can also view the original English article)

Final product image
What You'll Be Creating

我将在这个教程中秀出如何在Photoshop里制作出一个简洁、优雅的部落格版面。 在最上方,我们将使用一张风格感强烈的图片(任何一张均可)并放上一段字体优雅的小短文。

教程使用素材

依据教程,您将会需要以下的(免费)素材

准备开始咯

第一步

首先新建文档(File>New..),依照下图的设置。 你可依个人喜好设定任何尺寸-网页宽度并非固定。

请确认文档的分辨率设置为 72 pixels/inch

第二步

设置指导线,让整个画面的空间看起来更加谐调 。 我并不常使用指导线,但它能使网页看起来整洁并保持宽度的一致性。 选择View>New Guide ...设置一些指导线。 通常我将网页宽度设为1000px并从边角上加上一些导线,让整个画面有更多的留白空间。

注︰ 在教程中指导线的设定为 ︰ 垂直 100px、 285px、 445px、 600px、 605px、 765px、 925px 和 1100px。

提示 ︰ 你也可以使用 GuideGuide Photoshop 外挂程序,来加快你的设置。

第三步

依照这个 Photoshop的范例,能让页面看起来条列分明且更容易流览或编辑。 请新增三个图层群组并分别命名为 Header, Content, Sharing及 Footer。 若要建立新的图层群组请到 Layer > New > Group…,并将群组名更名为上列所述。 你也可直接点下面的小图标来新增图层群组。 你也可直接点下面的小图标来新增图层群组。

设计最上层的标头画面

在这个部落格,标头的设计于使用者及访客均扮演重要的角色 。 我使用一个具有欢迎感的画面-伦敦一家咖啡馆。 当你在选择图片时,必须注意你的图像是否与访客所想要造访的部落格信息相符。

第一步

建立部落格的背景。 在Header的群组中,使用工具列上的Rectangle Tool (U)画出一个长方型。 这里我使用 1200x600px 大小的矩形,并将它移到在画面的上方。

现在请把下载的咖啡厅照片拖到 Photoshop 文件里,并将它放矩形图层的上方。 将图像图层重命名为你以后可以识别的名字,在这里我使用 IMG。 然后请按住 ALT 键并在照片图层上点一下,直到你看到一个小方格及一个向下箭头,再放开。 你已经成功建立一个剪裁遮色片了。

现在请按住 CMD+T 并将图片缩放至你需要的大小。

提示 ︰ 按住 Shift 键,可依原图比例做缩放。

第二步

现在我们需要将背景色弄的深一点让它看起来更自然,同时也让放在上面的文字更清楚易读。 将图片做一点模糊的效果,到 Filter > Blur > Gaussian Blur...,将Radius设为 3 px。 使用模糊效果来柔化图片可以让访客更聚焦在我们所要传达的文字信息上。

在图片图层的上方再新建一个剪裁遮色片,方法请参照前一步骤。 将其填成黑色并将透明度设为50%,这样我们的可以使我们的图片颜色更深但仍保有它的能见度。

第三步

现在添加上部落格的Logo。 在Header群组中,建一个新的图层群组,并命名为Logo 。 在本教程中我使用一个以简单文字排版的Logo。 在工具列上选择Horizontal Type Tool (T),打上你部落格的标题,并将字体设为Bentham,文字大小设为30px。 请注意将字体间的间距拉大并全部使用大写字体,让它看起来更为优雅。

在文字外加上边框让它看起来更为显眼。 用 Rectangle Tool (U)画出一个稍微比文字再大一点的矩型。

现在在文字的图层上按滑鼠右键选择Blending Options... ,将外框笔划设置如下图所示。

最后将矩型图层的填充值设为0%,如此你的Logo周围就有一个1px宽的外框线。

第四步

现在我们就要加入一些关于部落格简短介绍的文字。 选择Horizontal Type (T),将字体设为Bentham,大小为60px,并写下你想要给部落格访客的简介。 请注意每个文字间的间距间是否有足够的空间,让文字看起来更为清爽。

关于 & 的符号我使用Baskerville (Italic),让它看起来更具装饰性。 在小标上,我使用PT Serif (Italic) ,大小设为20px。 请确保大小两段文字均完美的垂直对齐画面的正中央,让它看起来更加谐调与优雅。

建立内文部分建立内文部分

按下Header图层群组旁的小箭头将图层群组闭合并打开Content图层群组,如此你能够更有组织性且更易于流览你的所有图层。

第一步

开始建制我们的部落格文章。 使用Horizontal Type Tool (T),用深色与较大的字体写下你的文章标题。 尽量避免使用全黑,请选一个更较细緻的颜色,如黑灰色,如此画面才不会看起来太过刺眼。 在教程中我使用深灰色 #444444 42px 大小的Bentham字体,并将其全部改为大写形式。 将你的大标移到文件的中间并让其上下有更多的留白,如此读者更能将把视线移到这里。

第二步

将字体的尺寸缩到约14px并输入刊登日期、作者、分类、标注、地点或任何你想要加入的,如此它可提供读者对你发表的文作有些许的概念。 在这里我只加入了日期和地点,并延续大写的型式以和大标保持一致性。

第三步

没有实际内容的部落格是一文不值的,无论设计的多好。 使用Horizontal Type Tool (T) 按住滑鼠左键在第二与倒数第二条指导线中拖出一个文字框。 文字框的宽度应介于640px而高度则依照你的文章内容。

将背景色改成较亮且不伤眼的浅色系。 在这我使用亮灰色 #6f6f6f PT Serif字型将文字大小设为18px ,行高设为34px。 根据字体的样式,行高通常约为 1.5-1.9 倍的字体大小。 你可以轻鬆地以字体大小乘上1.9倍计算出行高,如这里我使用 18px 字体大小,所以行高即为 18 * 1.8 = 34.2

第四步

作为一个设计师,你总是需要考虑到整个动态的环境,包含超连结的样式或滑鼠滑过的状态。 相信我,程序开发者将会感谢你的这项举动。 挑选一个适当颜色能使你的文章更加显著,将文章内能够连结到其他的地方用不同的颜色突显出来。 这里我使用浅红色#e3514e

设计分享的按键

我们已完成部落格的主要内容,而现在我们要制作一些按键让读者能够将它们分享到他们想要的其他网页上。

第一步

将内容图层群组(Content)闭合并打开共享图层群组(Sharing),我们将会放置我们的按钮。 如制作内文方式,用Rectangle Tool (U)在第二和倒数第二条指导线之间的绘制一个矩型。 在这里我用 640x54 px。 之后按下右键,选择Blending Options...,并将选项设置如下图所示:

使用颜色#838383

最后,将图层的填充选项设为 0%。你就有一个只有边框的网络分享区块了。

第二步

选取线条工具 (U) 并设置宽度为 1px 后,绘制三个垂直的线条,将我们的内文分成均等的四个部分。 你可以使用指导线来帮忙对齐。 请确保所有分隔线的线条颜色与外框线一致。

小提示:按住Shift键可以画直完全的直线。

小提示:点击CMD+; 可以隐藏或显示出指导线。

第三步

最后选取Horizontal Type Tool (T) 并输入一些文字,提示访客可以分享内文至他们想要的媒体上。 在这里我只使用简单的分享,之后我输入一些可供分享的社群网站的名字。

将名字分别放在每个区块的正中央。

第四步

太棒了! 分享文章的部分已经完成了,现在我们只要再昌上几个滑鼠滑过的按键就大功告成。 一样使用Rectangle Tool (U),并选用之前用于超连结的颜色,在社群名程的下面画出一个将区块填满的矩型。

设计页脚

终于要将我们的部落格加上一些著作权资讯页脚的时候了。

第一步

将(Sharing)分享的图层群组闭合,打开(Footer)页脚的群组。 接著从文件最左至最右画出一个简单的矩型,并在其上方预留一些空间。 我用灰色 #555555 并在上方留约 110px 的空间。 我用灰色 #555555 并在上方留约 110px 的空间。

第二步

最后用Horizontal Type Tool (T)输入简单的版权资讯文字。 这里我将使用PT Serif 字体 大小14px 颜色设为白色#FFFFFF 。 将你所输入的文字放在灰色色框的正中间。

现在我们完成了整个版型咯。 恭喜!!

总结

这个教程是把制作一个简单的部落格版型的步骤跑了一遍。 它只使用了一张较具张力的图片及一些文字排版。

你可以到 Create and Theme an Evernote Powered Blog With Postach.io 去观看我们如何适当地将版型套用到现有的部落格平台上。

如果有任何的疑问或想法,欢迎在下面的留言栏提出。

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.