我们将使用新的字符样式和段落样式来帮助我们简化流程。
在本教程中，我将向您展示使用最新的Photoshop 制作简单简洁的设计博客的过程。
要遵循本教程，您将需要以下资源：
准备画布
步骤1
在Photoshop中打开“ 12列网格”文件。
从模板的主页下载模板，并在zip文件中搜索photoshop文件。
在此设计中，我们将使用960 gs作为其框架。
我们暂时不需要它。
单击“ 12 Col Grid”图层的眼睛图标将其隐藏；
第2步
添加更大的尺寸，并确保将其锚点设置为中心。
单击图像>画布大小 （或Ctrl + Alt + C ）。
当前的画布尺寸太小。
第三步
选择“ 垂直”，然后选择“位置： 185像素”以从画布左上角制作垂直参考线185像素。
单击查看>新指南以制作新指南，这将有助于我们准确设计。
按Ctrl + R以显示标尺。
第四步
在位置150像素 ， 1095像素和1130像素处绘制另一个垂直参考线。
以下是我们在画布中的最终指南。
准备色彩主题
第5步
单击预览链接以jpeg文件形式打开颜色组合。
对于此设计，我们将使用Colorlouver的漂亮颜色组合。
通过将图像直接放在画布中，我们可以更快，更轻松地对其颜色进行采样。
保存颜色组合并将其放置在Photoshop文件中。
准备背景
第6步
双击缩略图以更改其颜色。
选择背景 图层 ，然后单击“图层”面板顶部的锁定图标以将其解锁。
单击第二种颜色＃948371进行选择。
步骤7
这将是第二个背景。
在画布顶部绘制一个矩形。
步骤8
对于其笔触颜色，选择无 。
打开“拾色器”对话框后，单击第一种颜色将其选中。
在选项栏中 ，打开“ 填充 颜色”框，然后单击色轮图标 。
保持选定的形状。
步骤9
确保渐变在画布顶部居中。
**渐变工具 ，并用从白色到黑色的径向 渐变填充它。
新建一个图层，然后使用矩形选框工具选择上方的画布。
将其混合 模式更改为屏幕 ，并将不透明度降低到37％ 。
第10步
新建一个图层并将其命名为“阴影”。
单击确定以黑色填充选择。
将“ 使用”设置为“ 黑色” 。
点击编辑：填充 。
如图所示，在辅助背景的底部绘制一个矩形选择。
步骤11
单击滤镜>模糊>高斯模糊 。
使用高斯模糊软化它。
步骤12
通过将其转换为剪贴蒙版，阴影现在进入上层背景内部。
在不释放Alt键的情况下，单击以将图层转换为Clipping Mask 。
按住Alt键 ，然后将光标放在阴影和上背景层之间。
步骤13
在下面，您可以将结果放大100％。
将阴影不透明度降低到50％ ，使其变得微妙。
步骤14
为此，请选择所有图层 ，然后单击Ctrl + G。
将这些层放在一组中总是一个好主意。
标头
步骤15
如图所示，在上部画布上绘制一个矩形。
步骤16
在选项栏中 ，将“ 笔触颜色”设置为＃af9f8e 。
步骤17
对于其填充颜色，从＃d0c4b9到＃a89c91选择线性渐变 。
以下是100％视图中的结果。
网站名称
步骤18
对于其字体，请使用Sansation 。
双击文本并添加投影 。
观察如下所示的位置。
在设计的左侧添加站点的名称。
菜单
步骤19
再次注意放置。
使用Sansation 14 pt字体。
在菜单栏的另一侧绘制菜单。
步骤20
对于活动菜单，将其字体类型设置为粗体。
步骤21
添加图层样式 >阴影 。
使用Fill：＃3d3123和Stroke：None绘制一个三角形。
**“ 多边形”工具 ，并将“边数”设置为3 。
步骤22
选择“ ＃f76b6a”作为其“不带笔划”的填充。
**“ 线条”工具并将其权重设置为5 px 。
让我们通过在活动菜单下方添加一行来强调活动菜单。
将行放在活动菜单下，并在菜单栏底部添加1 px的空间。
使用字符样式
步骤23
要保存它，请**文本，然后单击“新字符样式”图标。
此功能是InDesign中“字符样式”的简化版本。
让我们将字符设置保存为字符样式。
双击新的字符样式，然后使用以下设置。
步骤24
要覆盖设置，请单击圆形箭头图标。
如果在“字符样式”旁边找到加号，则表示该字符具有不同的设置。
选择另一个菜单，然后单击“字符样式”以应用它。
步骤25
重复上一步，为活动菜单创建新的字符样式。
步骤26
如果我们在“字符样式顶部菜单-普通至Corbel”中编辑字体类型，则所有普通菜单都会自动更改为“ Corbel”。
请参阅下面的示例。
我们可以简单地编辑字符样式，以使用该样式编辑每个文本。
字符样式可帮助我们集中字符设置。
那么，使用字符样式有什么意义呢？
步骤27
用黑色填充它。
按住Ctrl键并单击菜单栏，以根据其形状进行新选择。
新建一个图层并将其放置在菜单栏下方。
步骤28
通过添加高斯模糊 ， 滤镜>模糊>高斯模糊来使其柔化。
使用Ctrl + D删除选择。
滑杆
步骤29
绘制一个矩形，宽10列（请参见下文）。
单击行预览旁边的小下拉箭头，并确保选中“ 内部对齐” 。
对于其笔划，选择大小为10 pt的 ＃c8baac 。
对于其填充颜色，选择＃dfd1c2 。
步骤30
如果需要，您可以移动图片并调整其大小，而不会影响其框架。
图片将自动进入滑块框。
通过按Ctrl + Alt + G将其转换为Clipping Mask 。
将图片粘贴到框架的顶部。
步骤31
降低其不透明度以使其微妙。
使用来自PSDfreemium的 像素图案添加“ 图层样式”>“图案覆盖” 。
确保将其卡在最外面的指南上。
在滑块后面用相同的颜色绘制另一个矩形。
步骤32
将图层形状转换为Clipping Mask 。
按Ctrl + T ，然后将其旋转45° 。
在带有Fill的形状上方绘制一个矩形：＃b3aca5 ， 不添加描边 。
步骤33
将图层形状转换为Clipping Mask 。
将其填充更改为较深的颜色。
复制形状并调整其大小。
步骤34
重复相同的步骤，在另一侧绘制另一个箭头。
步骤35
用黑色填充选择。
新建一个图层并将其转换为Clipping Mask 。
按住Ctrl键并单击幻灯片框以进行新选择。
步骤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
添加图层样式>描边 。
将其填充设置为白色 ，将其描边设置为#bebebe 。
在标题下绘制一个矩形形状，宽度为4列。
步骤54
将其转换为剪贴蒙版（ Ctrl + Alt + G ）。
将图像粘贴到形状顶部。
步骤55
将其转换为Clipping Mask 。
使用Fill：＃8e8380和Stroke：None绘制一个圆角矩形。
步骤56
为博客元数据创建新的字符样式。
步骤57
在形状顶部添加元数据文本，并应用我们之前制作的字符样式。
步骤58
单击类型>粘贴Lorem Ipsum，以用从Photoshop自动生成的Lorem Ipsum进行填充。
将其宽度设置为4列。
**文字工具，然后单击并拖动以创建一个文本框。
步骤59
单击“段落样式”面板上的新图标。
为字符内容创建新的段落样式。
双击段落样式，然后使用以下设置。
步骤60
您还可以尝试使用其缩进和间距设置。
将此样式应用于帖子内容。
对于网页设计，请禁用“断字”。
步骤61
为了保持一致，请使用与滑块相同的图案。
添加图层样式>图案叠加 。
使用Fill：＃8e8380和Stroke：None绘制一个圆角矩形。
步骤62
这样，我们可以轻松地将其用于其他按钮。
我建议您将其另存为字符样式。
添加按钮标签。
步骤63
另外，将其标签类型设置为粗体。
让我们复制它，并将其颜色更改为＃f76b6a 。
上一个按钮用于正常情况。
步骤64
Alt-拖动以复制组。
将帖子放置在组中，然后按Ctrl + J进行复制。
记住要更改每个帖子的图片和标题。
重复相同的步骤以发表更多帖子。
步骤65
记住将按钮之一设置为悬停状态。
我们将使用它进行页面导航。
复制“ 更多”按钮，并将其标签更改为数字。
步骤66：页脚
添加小部件标题及其描述。
让我们开始研究页脚。
步骤67
设置填充：无 ， 描边：＃8e8380 。
添加链接并在其下方绘制一条1像素的线。
步骤68
单击更多选项按钮，然后选择虚线 。
步骤69
将更多链接添加到小部件中。
步骤70
复制小部件。
步骤71
将链接之一设置为粗体。
我们还需要添加悬停条件。
为了保持一致，此链接的外观类似于菜单栏上的活动菜单。
将其颜色设置为＃f76b6a 。
在该活动链接下，添加一条5像素的线。
步骤72
将其填充设置为＃3d312 3。
在下部区域添加另一个矩形。
页脚信息
步骤73
给它一个深色的阴影以增加其背景的对比度。
使用“ 文字”工具添加页脚信息。
社交网络
步骤74
添加图层样式>外发光 。
从Daniele Selvitella添加一些社交媒体图标 。
步骤75
对于悬停条件，让我们保持其不透明度为100％ 。
将普通图标调低到50％ 。
步骤76
抓住自由手形光标图标，并将最小的手形光标放在活动或悬停链接上方。
最后结果
字符样式和段落样式对于每个Web设计师来说都是一个重大改进。
您可以看到最新的Photoshop版本具有一些用于设计Web布局的有趣功能。
这是我们的最终结果。
翻译自: https://www.hongkiat.com/blog/blog-layout-in-photoshop-cs6/