photoshop cs6_在Photoshop CS6中设计干净优雅的博客布局

在本教程中，我将向您展示使用最新的Photoshop 制作简单简洁的设计博客的过程。 我们将使用新的字符样式和段落样式来帮助我们简化流程。

要遵循本教程，您将需要以下资源：

• Bernd Montag提供的 免费字体清理 。
• PSDfreemium中的 26个可重复像素模式 。
• Daniele Selvitella提供的 免费社交媒体图标 。

• 演示版

准备画布

第1步

在此设计中，我们将使用960 gs作为其框架。 从模板的主页下载该模板，然后在zip文件中搜索photoshop文件。 在Photoshop中打开“ 12列网格”文件。

单击“ 12 Col Grid”图层的眼睛图标将其隐藏； 我们暂时不需要它。

第2步

当前的画布尺寸太小。 单击图像>画布大小 （或Ctrl + Alt + C ）。 添加更大的尺寸，并确保将其锚点设置为中心。

第三步

按Ctrl + R以显示标尺。 单击查看>新指南以制作新指南，这将有助于我们准确设计。 选择“ 垂直”，然后选择“位置： 185像素”以从画布左上角制作垂直参考线185像素。

第4步

在位置150像素 ， 1095像素和1130像素处绘制另一个垂直参考线。

以下是我们在画布中的最终指南。

准备色彩主题

第5步

对于此设计，我们将使用Colorlouver的漂亮颜色组合。 单击预览链接以jpeg文件形式打开颜色组合。

保存颜色组合并将其放置在Photoshop文件中。 通过将图像直接放在画布中，我们可以更快，更轻松地对其颜色进行采样。

准备背景

第6步

选择背景 图层 ，然后单击“图层”面板顶部的锁定图标以将其解锁。 双击缩略图以更改其颜色。

单击第二种颜色＃948371进行选择。

步骤7

在画布顶部绘制一个矩形。 这将是第二个背景。

步骤8

保持选定的形状。 在选项栏中 ，打开“ 填充 颜色”框，然后单击色轮图标 。 打开“拾色器”对话框后，单击第一种颜色将其选中。 对于其笔触颜色，选择无 。

步骤9

新建一个图层，然后使用矩形选框工具选择上方的画布。 激活渐变工具 ，并用从白色到黑色的径向 渐变填充它。 确保渐变位于画布上方。

将其混合 模式更改为屏幕 ，并将不透明度降低到37％ 。

第10步

新建一个图层，并将其命名为“阴影”。

如图所示，在辅助背景的底部绘制一个矩形选择。 点击编辑：填充 。 将“ 使用”设置为“ 黑色” 。 单击确定以黑色填充选择。

步骤11

使用高斯模糊软化它。 单击过滤器>模糊>高斯模糊 。

步骤12

按住Alt键 ，然后将光标放在阴影和上层背景层之间。 在不释放Alt键的情况下，单击以将图层转换为Clipping Mask 。 通过将其转换为剪贴蒙版，阴影现在进入上层背景内部。

步骤13

将阴影不透明度降低到50％ ，以使其微妙。 在下面，您可以将结果放大100％。

步骤14

将这些层放在一个组中总是一个好主意。 为此，请选择所有图层 ，然后单击Ctrl + G。

标头

步骤15

如图所示，在上部画布上绘制一个矩形。

步骤16

在选项栏中 ，将“ 笔触颜色”设置为＃af9f8e 。

步骤17

对于其填充颜色，从＃d0c4b9到＃a89c91选择线性渐变 。

以下是100％视图中的结果。

网站名称

步骤18

在设计的左侧添加站点的名称。 观察如下所示的位置。 双击文本并添加投影 。 对于其字体，请使用Sansation 。

菜单

步骤19

在菜单栏的另一侧绘制菜单。 使用Sansation 14 pt字体。 再次注意放置。

步骤20

对于活动菜单，将其字体类型设置为粗体。

步骤21

激活“ 多边形”工具 ，并将“边数”设置为3 。 使用Fill：＃3d3123和Stroke：None绘制一个三角形。 添加图层样式 >阴影 。

步骤22

让我们通过在活动菜单下方添加一行来强调活动菜单。 激活“ 线条”工具并将其权重设置为5 px 。 选择“ ＃f76b6a”作为其“不带笔划”的填充。

将行放在活动菜单下，并在菜单栏底部添加1 px的空间。

使用字符样式

步骤23

让我们将字符设置保存为字符样式。 此功能是InDesign中“字符样式”的简化版本。 要保存它，请激活文本，然后单击“新字符样式”图标。

双击新的字符样式，然后使用以下设置。

步骤24

选择另一个菜单，然后单击“字符样式”以应用它。 如果在“字符样式”旁边找到加号，则表示该字符具有不同的设置。 要覆盖设置，请单击圆形箭头图标。

步骤25

重复上一步，为活动菜单创建新的字符样式。

步骤26

那么，使用字符样式有什么意义呢？ 字符样式可帮助我们集中字符设置。 我们可以简单地编辑“字符样式”以使用该样式编辑每个文本。 请参阅下面的示例。 如果我们在“字符样式顶部菜单 ”中选择“字体”，则对所有普通菜单都会自动更改为“ Corbel”。

步骤27

新建一个图层并将其放置在菜单栏下方。 按住Ctrl键并单击菜单栏，以根据其形状进行新选择。 用黑色填充它。

步骤28

使用Ctrl + D删除选择。 通过添加高斯模糊 ， 滤镜>模糊>高斯模糊来对其进行软化。

滑杆

步骤29

绘制一个矩形，宽度为10列（请参见下文）。

对于其填充颜​​色，选择＃dfd1c2 。 对于其笔划，选择大小为10 pt的 ＃c8baac 。 单击行预览旁边的小下拉箭头，并确保选中“ 内部对齐” 。

步骤30

将图片粘贴到框架的顶部。 通过按Ctrl + Alt + G将其转换为Clipping Mask 。 图片将自动进入滑块框架。 如果需要，您可以移动图片并调整其大小，而不会影响其框架。

步骤31

在滑块后面用相同的颜色绘制另一个矩形。 确保将其卡在最外面的导轨上。 使用来自PSDfreemium的 像素图案添加“ 图层样式”>“图案覆盖” 。 降低其不透明度以使其微妙。

步骤32

在带有Fill的形状上方绘制一个矩形：＃b3aca5 ， 不添加描边 。 按Ctrl + T ，然后将其旋转45° 。 将图层形状转换为Clipping Mask 。

步骤33

复制形状并调整其大小。 将其填充更改为较深的颜色。 将图层形状转换为Clipping Mask 。

步骤34

重复相同的步骤，在另一侧绘制另一个箭头。

步骤35

按住Ctrl键并单击幻灯片框以进行新选择。 新建一个图层并将其转换为Clipping Mask 。 用黑色填充选择。

步骤36

取消选择（ Ctrl + D ），然后使用高斯模糊将其软化 。

如果需要，可以减少阴影不透明度。

步骤37

使用Fill＃c8baac在滑块的角上绘制一个圆角矩形。

步骤38

在形状内画一个圆。 将其笔触设置为大小为1 pt的 黑色 ，然后删除“填充” 。

步骤39

使用路径选择工具选择圆路径。 Shift + Alt-拖动路径以复制它。

重复此步骤以绘制更多的圆圈。

步骤40

选择一个圆弧路径。 按Ctrl + Shift + J将其剪切到新图层。

步骤41

在选项栏中 ，删除其“ 描边”并将其“ 填充”更改为＃e38989到＃bb5c5c的径向渐变。 添加图层样式>外发光和阴影 。

步骤42

在滑块下绘制一个椭圆形选择。 制作一个新层，并用黑色填充。

步骤43

取消选择（ Ctrl + D ）。 使用高斯模糊软化它。

较低的背景

步骤44

为底部背景绘制另一个矩形。 使用与滑块形状相同的“ 填充和描边”颜色。

与往常一样，请谨慎对待其放置位置。 我们希望它涵盖画布上的所有指南。

添加图层样式>图案叠加 。

以下是100％放大率的结果。

步骤45

使用矩形选框工具选择其上方区域。

步骤46

制作一个新层，将其放置在形状后面。 用黑色填充选择。 按Ctrl + T ，右键单击并选择Perspective 。

向外拖动其上角。

再次右键单击并选择缩放 。 向下拖动上手柄。

右键单击并选择“ 变形” 。 向内拖动左右两段。

使用高斯模糊软化它。

将不透明度降低到20％ 。

步骤47

在背景内部绘制一个白色矩形。 这将成为网站主要内容的背景。

在背景的左侧，右侧和上方添加10像素的间距。 间距应该很容易，因为我们已在早期步骤中完成了指南。 添加图层样式>外发光 。

步骤48

添加新的参考线，距离图形上侧25像素。

节标题

步骤49

为页面部分标题及其描述添加新的字符样式。

使用“文字”工具添加节标题及其描述。 应用我们之前制作的样式。 请确保在其背景的上侧添加25 px的空间，并获得之前制作的指南的帮助。

步骤50

在网站的描述下，使用Fill：＃938270和Stroke：None画一条5像素的线条。

博客文章

步骤51

为帖子标题设置另一个字符样式。

步骤52

添加帖子标题并应用以前的字符样式。

步骤53

在标题下绘制一个矩形形状，宽度为4列。 将其填充设置为白色 ，将其描边设置为#bebebe 。 添加图层样式>描边 。

步骤54

将图像粘贴到形状顶部。 将其转换为剪贴蒙版（ Ctrl + Alt + G ）。

步骤55

使用Fill：＃8e8380和Stroke：None绘制一个圆角矩形。 将其转换为Clipping Mask 。

步骤56

为博客元数据创建新的字符样式。

步骤57

在形状顶部添加元数据文本，并应用我们之前制作的字符样式。

步骤58

激活文字工具，然后单击并拖动以创建一个文本框。 将其宽度设置为4列。 单击类型>粘贴Lorem Ipsum，以从Photoshop中自动生成的Lorem Ipsum填充它。

步骤59

为字符内容创建新的段落样式。 单击“段落样式”面板上的新图标。

双击段落样式，然后使用以下设置。

步骤60

将此样式应用于帖子内容。 您也可以尝试使用其缩进和间距设置。

对于网页设计，请禁用“断字”。

步骤61

使用Fill：＃8e8380和Stroke：None绘制一个圆角矩形。 添加图层样式>图案叠加 。 为了保持一致，请使用与滑块相同的图案。

步骤62

添加按钮标签。 我建议您将其另存为字符样式。 这样，我们可以轻松地将其用于其他按钮。

步骤63

上一个按钮用于正常情况。 让我们复制它，并将其颜色更改为＃f76b6a 。 另外，将其标签类型设置为粗体。

步骤64

将帖子放置在组中，然后按Ctrl + J进行复制。 Alt-拖动以复制组。

重复相同的步骤以发表更多帖子。 记住要更改每个帖子的图片和标题。

步骤65

复制“ 更多”按钮，并将其标签更改为数字。 我们将使用它进行页面导航。 请记住将按钮之一设置为悬停状态。

步骤66：页脚

让我们开始研究页脚。 添加小部件标题及其描述。

步骤67

添加链接并在其下方绘制一条1 px的线。 设置填充：无 ， 描边：＃8e8380 。

步骤68

单击更多选项按钮，然后选择虚线 。

步骤69

将更多链接添加到小部件中。

步骤70

复制小部件。

步骤71

我们还需要添加悬停条件。 将链接之一设置为粗体。

在该活动链接下方，添加一条5像素的线。 将其颜色设置为＃f76b6a 。 为了保持一致，此链接的外观类似于菜单栏上的活动菜单。

步骤72

在下部区域添加另一个矩形。 将其填充设置为＃3d312 3。

页脚信息

步骤73

使用“ 文字”工具添加页脚信息。 给它一个深色的阴影以增加其背景的对比度。

社交网络

步骤74

从Daniele Selvitella添加一些社交媒体图标 。 添加图层样式>外发光 。

步骤75

将普通图标调低到50％ 。 对于悬停条件，我们只需将其不透明度保持在100％即可 。

步骤76

抓住自由手形光标图标，并将最小的手形光标放在活动或悬停链接上方。

最后结果

这是我们的最终结果。 您可以看到最新的Photoshop版本具有一些用于设计Web布局的有趣功能。 字符样式和段落样式对于每个Web设计师来说都是一个重大改进。

• 演示版
• 下载源

翻译自: https://www.hongkiat.com/blog/blog-layout-in-photoshop-cs6/