photoshop博客
在本教程中，我将向您展示如何在Photoshop中创建简单，优雅的博客布局。 我们将在首屏（无论可能在何处）上使用强烈的图像，并进行一些直接的消息传递，然后使用非常整洁而优雅的字体。
教程资产
为了继续进行下去，您将需要以下（免费提供）资产：
准备好文档
第1步
首先使用下面显示的设置创建一个新文档（ File> New… ）。 您可以随意使用任何喜欢的尺寸的画布-毕竟，网络的宽度不是固定的。
第2步
让我们设置一些指南，以便我们的布局具有足够的空间并看上去平衡。 我并不总是使用网格，但是设置一些准则可以确保整洁并有助于定义我们网站的宽度。 转到查看>新指南…并设置一些指南。 我通常选择1000px作为网站宽度，并从角落添加一些准则，以使它有足够的呼吸空间。
注意：本教程使用的准则：垂直为100像素，285像素，445像素，600像素，605像素，765像素，925像素和1100像素。
提示：您还可以使用GuideGuide Photoshop插件使此过程更快。
第三步
坚持使用此Photoshop礼仪可以使事情井井有条，并且易于浏览或编辑。 让我们创建三个名为“页眉”，“内容”，“共享”和“页脚”的图层组。 要创建组，请进入“ 图层”>“新建”>“组...”，并为每个组指定一个标题。 要快速创建组，只需单击图标。
设计页眉区域
标题区域在与用户互动和确保访问者停留在网站上起着非常重要的作用。 在此博客中，我将使用伦敦咖啡馆的欢迎镜头。 为您的项目选择图像时，请确保将正确的消息发送给访问者，并满足客户的需求。
第1步
让我们首先创建博客的背景。 在“ Header组内，使用“ 矩形工具”（U）绘制任何颜色的矩形形状。 在我的情况下，我绘制了1200x600px大小的矩形并将其放在文档的顶部。
现在下载Cafe photo ，将其拖到Photoshop文档中并将其放置在矩形层上方。 将图像层重命名为以后可以识别的名称，就我而言，我使用的是IMG。 之后，按住Alt键并将鼠标悬停在照片层上，直到看到一个向下的小箭头，然后松开它。 您刚刚创建了一个Clipping Mask 。
现在按CMD + T并调整照片大小以适合您的需求。
提示：按住Shift键可按比例进行变换。
第2步
现在，我们需要使博客背景更暗，更中性，因此，当我们将副本放在最上面时，它便可读。 通过进入滤镜>模糊>高斯模糊...并将Radius设置为3像素 ，来稍微模糊我们的图像。 使用轻微的模糊效果有助于消除清晰的图像细节，并使访问者的眼睛专注于更突出的元素（在我们的博客消息中）。
让我们在放置的图像上方创建一个新层，并使其如上图所示，成为剪贴蒙版 。 然后用黑色阴影填充它，并将不透明度降低到50％，这样我们的图像会变暗，但仍然很明显。
第三步
现在该为我们的博客添加徽标了。 在Header组内创建一个新组，并将其命名为Logo 。 在本教程中，我将使用一个基于字体的简单徽标。 选择“ 水平字体工具（T）”，“边沁（Bentham）” 30px大小的字体，然后写博客的标题。 请注意，字母间距比平常大，创建了更优雅的外观和感觉，并使大写字母更易于阅读。
为了增加重点，让我们在其周围做一个边框。 选择一个矩形工具（U）并绘制一个比文本稍大的矩形。
现在，在图层上单击鼠标右键，然后选择“ 混合选项...”，应用以下笔触选项。
最后，将矩形图层Fill设置为0％ ，您在虚构徽标周围会有一个漂亮的1px笔触。
第4步
这是我们添加博客消息的时刻，该消息总结了此博客的全部内容。 选择60px大小的Bentham字体为Horizontal Type（T），并为您的读者写下一条简短的消息。 确保行高足够大，以便文本有呼吸的空间并看上去平衡。
对于＆符，我使用了Baskerville（斜体），因为它比较华丽。 对于辅助消息，我使用了设置为20px的 PT衬线（斜体）字体。 确保将消息垂直放置在标题图像的中间，以使其看起来平衡且优美。
设计内容区域
单击组标题旁边的小箭头，以最小化“ 标题”组，然后打开“内容”组，以便组织所有层并易于浏览。
第1步
让我们开始制作博客文章。 选择“ 水平字体工具”（T） ，然后使用深色和相当大的字体写下您的帖子标题。 尽量避免使用绝对黑色，而选择更细微的颜色，例如深灰色，这样看起来就不会太粗糙。 在本教程中，我使用深灰色#444444 42px大小的Bentham字体大写。 将标题放在文档的中间，并在顶部留出足够的空间，以便使读者注意标题。
第2步
将字体大小减小到14px左右，然后输入博客文章的日期，作者，类别，标签，位置或您想要的任何内容，以便为读者提供出版物的概述。 就我而言，我将条目的日期和位置大写，以保持标题真实。
第三步
无论设计多么出色，没有真实内容的博客都一文不值。 使用水平字体工具（T）按住鼠标键，在第二和倒数第二条准则之间放置一个容器。 这些准则之间的容器宽度应为640px ，高度取决于帖子的长度。
将背景色设置为更浅，更容易观看的颜色。 在我的情况下，我使用较浅的灰色#6f6f6f 18px PT 衬线，并将行高设置为34px 。 线条高度通常应在1.5-1.9左右，具体取决于字体的样式。 您可以通过将使用的字体大小乘以1.9轻松地计算行高，例如，在我的情况下，我使用18px字体大小，因此： 18*1.8=34.2 。
第4步
作为设计师，您始终需要考虑设计动态环境，因此请包括超链接的样式或按钮的悬停状态。 相信我，开发人员将为此感谢您。 选择一种将在您的主副本中突出显示的微妙颜色，突出显示将链接到其他位置并更改其颜色的短语之一。 就我而言，我使用的是浅红色#e3514e 。
设计共享按钮
我们已经完成了博客文章的主要副本，现在将创建一些共享按钮，以便读者可以与他们选择的网络共享内容。
第1步
最小化“ 内容”组，并打开“ 共享”组，我们将在其中放置按钮。 选择一个矩形工具（U）并在第二个和倒数第二个准则之间绘制一个矩形作为主要文章副本。 在我的情况下是640x54px 。 然后右键单击，选择“ 混合选项...”，然后应用以下选项。
最后，将图层的“ 填充”选项减小为0％ ，您将为社交媒体网络提供一个大纲容器。
第2步
选择线条工具（U）并将宽度设置为1px ，然后绘制三条垂直线，将我们的容器分成四个相等的部分。 该准则将帮助他们定位。 确保线条与容器的轮廓颜色相同。
提示：按住Shift键可确保线条完美笔直。
提示：点击CMD +； 隐藏/显示准则。
第三步
最后，选择“ 水平字体工具”（T）并编写一些副本，让人们知道它是用于共享的。 就我而言，我使用简单的SHARE：，之后写下了可共享的社交网络的名称。
将名称放置在容器内，并将其居中放置在分隔的块的中间。
第4步
大！ 社交共享已经完成，我们要做的就是为按钮创建鼠标悬停状态。 只需选择“ 矩形工具”（U），并使用与链接相同的颜色，即可在覆盖划分空间的社交网络名称之一下方绘制一个矩形。
设计页脚
现在是时候通过放置带有版权信息的简单页脚来包装我们的博客设计了。
第1步
最小化共享组并打开页脚组。 之后，在底部横向于文档水平方向绘制一个简单的矩形，并在顶部保留足够的空间。 我使用灰色#555555和形状上方约110px的白色空间。
第2步
最后，选择“ 水平字体工具（T）”并写下一些简单的版权副本。 在我的情况下，我使用了PT Serif 14px white #FFFFFF 。 将您的副本放置在矩形的中间，并将其垂直对齐。
结论
在本教程中，我们逐步完成了创建非常简单而优雅的博客布局的过程。 它在首屏上方具有强大的基于图像的标题，并使用排版优先方法来处理博客的内容。
查看使用Postach.io创建Evernote支持的博客并为其主题 ，我们将在其中为浏览器构建此博客布局，并与博客平台集成以取得良好效果！
如果您有任何疑问或想法，请在评论区域告诉我们！
翻译自: https://webdesign.tutsplus.com/tutorials/designing-an-elegant-blog-layout-in-photoshop--cms-20972
photoshop博客
扫一扫
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
