在本教程中，我将向您展示使用最新的Photoshop 制作简单简洁的设计博客的过程。 我们将使用新的字符样式和段落样式来帮助我们简化流程。
要遵循本教程，您将需要以下资源：
准备画布
第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/
扫一扫
3382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
