预览
点击下面的图片查看作品全面．
教程资源
- 字体:Meredith Mandel设计的ChunkFive
- 图标:免费独家矢量图标包:Web用户界面
- 图标:免费图标包:矢量3D社交图标
步骤1:创建一个新的Photoshop文档
打开Adobe Photoshop，开始创建一个新文档(Ctrl/Cmd + N)。使文档1200px(宽度)乘1600px(高度)。使用白色作为背景。
步骤2:创建参考线
对齐在网页设计中非常重要。为了帮助精确对齐，我们将在我们的工作中添加指南。为了帮助我们准确地放置参考线，我们将使用View > New Guide。
在以下位置创建4个垂直导轨和7个水平导轨:
| 垂直指南 | 水平指南 |
| 115 px | 160 px |
| 140 px | 265 px |
| 1060 px | 590 px |
| 1085 px | 890 px |
| 1300 px | |
| 1360 px | |
| 1490 px |
步骤3:创建设计的背景
我们将创建一个非常微妙的噪音纹理的黑色背景。首先，创建一个新的图层组(layer > new > group)，它将包含所有与背景相关的图层。在图层组内，创建一个新图层(Shift + Ctrl/Cmd + N)，命名为BG。
设置前景色为非常深的蓝色(#0a0d15)。用深蓝色的前景色填充新创建的图层，只需按Alt/Opt + Backspace。
确保活动层仍然是“BG”层。
去过滤>噪音>添加噪音。对于噪声设置，使用0.95%的量，将分布设置为均匀，如果选中了单色，则取消勾选。通过单击OK应用筛选器。
现在我们要在背景上创建更暗的块，使它更有趣。新建图层(Shift + Ctrl/Cmd +N)，命名为Block。确保Block图层在BG图层之上。
选择矩形选框工具(M)，在第一个水平参考线和第三个水平参考线之间创建一个选区。用黑色(#000000)填充所选区域。
降低“Block”图层的不透明度为30%。
使用相同的方法创建2个更多的暗块;使用下面的图片作为参考。
我们现在要给暗块一些嵌入边界。创建一个新层。
设置前景色为非常深的蓝色(#080a0f)。选择铅笔工具(B)并设置它的大小为1px。在第一个方块的顶部画一条水平线;按住Shift键画一条完美的直线。
现在将前景色更改为更亮的蓝色(#121829)。在第一条线下面再画一条线。
您现在可以缩小以查看整个画布。
确保在图层面板中选择了我们的线条图层，然后复制4次(Ctrl/Cmd + J)。将复制的线条放在第3、4、6和7条水平参考线上。选择图层的线放置在第3条水平参考线上，使用自由变换(Ctrl/Cmd + T)将高度更改为-100%。
对第6条水平参考线做同样的操作。
步骤4:制作博客的Logo
现在我们已经完成了背景，接下来的步骤将处理头部。首先，为与头部相关的层创建一个新组;你可以将这个组命名为Header。
让我们为我们的博客构建一个标志。
的图标，我们可以使用一个漂亮的语音气泡图标Web用户界面矢量图标包．下载包并打开chat_256.png文件在Photoshop。之后，按Ctrl/Cmd + Alt/Option + I打开图像大小对话框窗口。
更改PNG文件的宽度和高度为44px。将图标转移到我们的主文档。使用移动工具(V)将图标放置在头部的左侧(如下所示)。
接下来，我们将输入标识的文本。我们将使用免费的ChunkFive字体。如果您还没有这种字体，请下载并安装它(我们将在本教程中多次使用这种字体)。
选择水平文字工具(T)，设置你的字体为ChunkFive，设置大小为30pt，并选择锐作为抗锯齿方法。颜色并不重要，因为我们将使用图层样式来赋予文本我们需要的外观。写下你想要的文本-在本教程中，我使用“设计指导”作为文本。
右键单击“设计指导”文本层并选择混合选项．给我们的文本一个投影和渐变叠加(设置如下所示)。
阴影
渐变叠加
渐变叠加的颜色是#4d5266， #5f677c， #5f677c和#989eac。
这是我们应用到图层上的图层效果的结果:
我们将风格化我们的博客的标志文本与一个微妙的聚光灯效果，也将提高投影层的效果。在logo的文本层下面创建一个新层。
设置前景色为白色(#ffffff)。选择画笔工具(B)，选择软机械200px基本笔刷设置中的画笔。单击文本中心的某处。
通过切换图层的混合模式为柔光，并将其不透明度降低到50%来减少笔刷的突出。
步骤5:创建主导航菜单
现在让我们来研究一下主导航菜单，它只是一个指向我们网站主要页面的水平链接列表。设置你的前景色为我们的链接的颜色，这是一个中间色调灰色(#7a7a7a)。选择水平文字工具(T)，选择Arial字体，设置大小为14pt，并书写导航的文本(例如，“Home”，“About”，“Portfolio”，“Blog”，等等)。
点击图层>图层样式>混合选项，打开图层样式对话框。给文本图层一个投影(建议设置如下所示)。
我们将给活动链接一个独特的风格，让用户知道他们在网站的哪个部分。
用水平文字工具，选中单词“Blog”，然后将其颜色改为浅灰色(#e5e5e5)。
我们将给活动链接层一个不同的背景风格，以增加其与其他链接的独特性。在导航文本层下面创建一个新层。
设置前景色为白色(#ffffff)，选择矩形工具(U)在Blog链接下面画一个矩形(如下图所示)。降低矩形的不透明度为4%。
我们已经完成了布局的标题。
步骤6:创建博客的“欢迎”文本
现在我们已经完成了标题，我们可以移动到布局的主要内容区域。接下来的几个步骤将处理布局的主要区域。创建一个名为“Body”的新图层组，它将包含与主内容区域相关的所有图层(和图层组)。
我希望，到目前为止，您已经看到了一个趋势，即我们正在为布局的每个主要组件创建图层组，以保持我们的工作有组织。这是因为其他人(比如将PSD布局转换为功能HTML/CSS模板的前端开发人员)可能需要使用我们的工作，所以在设计web布局和界面时，我们必须尽可能地整洁。
现在，我们将创建一个大的“欢迎”文本块，这在许多作品集设计中都很常见。
使用水平文字工具(T)，设置它的ChunkFive字体，并选择24pt作为字体大小。写一条“欢迎”的信息，比如“欢迎来到Design instruction Studio博客”。将“welcome”文本放置在布局的中心和标题下方。你可以从logo的文本中复制图层样式(在图层面板中右键单击它的图层，选择复制图层样式)，并将其粘贴到“welcome”消息文本层(在图层面板中右键单击该层，选择粘贴图层样式）.
步骤7:创建主要内容的背景
我们将创建一个灰色的圆角背景作为我们的主要内容区域的背景。设置前景色为灰色(#e8e8e8)。使用圆角矩形工具(U)(半径为5px)绘制一个大的圆角矩形，使用我们之前设置的参考线。
步骤8:创建辅助导航菜单
现在我们将创建网页设计布局的次要菜单，它将位于主要内容区域的顶部。辅助导航菜单是用户在博客的不同类别之间导航的一种方式。首先，设置前景色为另一种灰色(#989eac)。
使用水平文字工具(T)，将ChunkFive字体设置为16pt，写出你博客的类别(例如，“新闻”，“摄影”，“文章”等)。
设置前景色为深灰色(#505050)，然后使用圆角矩形工具(U)(半径设置为5px)在活动类别后面绘制一个深灰色的圆角矩形(如下所示)。
双击图层面板中的深灰色圆角矩形，打开图层样式对话框窗口。
给深灰色圆角矩形一个投影和一个内阴影。
阴影
内阴影
现在将圆角矩形图层的不透明度降低到20%。同时，将活动类别文本的颜色更改为浅灰色/灰白色(#f5f5f5)。
让我们创建一个分隔符，位于次要导航链接的下方，将菜单与主要内容区域的其他部分分开。
为分隔线创建一个新层。设置前景色为灰色(#c0c0c2)。选择铅笔工具(B)，设置笔刷大小为1px。
在二级导航链接下方画一条水平线，按住Shift键画一条直线。
接下来，改变前景色为白色(#ffffff)。在第一条直线的正下方再画一条直线。
减少第二层图层的不透明度为50%。
步骤9:创建第一篇博客文章
现在我们要创建博客文章，因此，让我们在Body图层组中创建一个新的图层组;我们可以称这个新组为“博客帖子”。
创建一个新的垂直指南，以描绘博客内容(位于左侧)与侧边栏(将位于右侧)之间的边界。点击查看>新建参考线，创建一个720px的垂直参考线。
让我们写下博客文章的标题。设置前景色为中色调灰色(#989eac)。选择水平文字工具(T)，设置你的字体为Georgia (a合法的字体)，斜体，大小为24pt。
我们想要保持在我们的博客文章部分的垂直参考线之间，所以，用水平文字工具，点击并按住左边的参考线，然后拖动，直到你捕捉到右边的参考线。在此文本框内，写下您的博客文章的标题(例如，“在Adobe Photoshop中制作软垃圾产品广告设计”)。
接下来，给博客标题一个微妙的阴影层效果(设置如下所示)。
现在让我们为这篇博客文章制作主图。设置前景色为灰色(#d5d5d5)。然后，使用矩形工具(U)在博客标题下面画一个矩形，使用垂直参考线来帮助调整它的大小。
选择一个图像(最好是一个大的)放在这个灰色矩形中。我只是用了一个图像以前的设计指导教程．把你的图像放在我们的工作中，在灰色矩形的中心。
如果它太大，不要担心，我们接下来会解决这个问题。你的图像位于灰色矩形图层的顶部，按Ctrl/Cmd +单击灰色矩形图层，在它周围做一个选区。接下来，选择>修改>契约和契约你的选择5px。
回到你的图像图层，复制选定的区域(Ctrl/Cmd + C)，粘贴复制的区域(Ctrl/Cmd + V)，这应该会创建一个新图层。现在你可以删除原始图像，你应该会得到一个边缘有5px边框的图像。
现在我们将在博客文章的图片上创建一个“阅读更多”按钮。首先，设置前景色为黑色(#000000)。然后选择圆角矩形工具(U)，并确保它的半径为5px。
在博文图片的右下方画一个黑色圆角矩形。
如果你画了一个圆角矩形作为形状图层(这是圆角矩形工具的默认设置)，你必须通过选择>图层>形状来将它转换为栅格化图层。
现在我们需要删除按钮溢出图像的区域。
为此，首先按住Ctrl/Cmd在图像周围创建一个选区，然后在图层面板中单击该图层。然后，颠倒选区(Shift + Ctrl/Cmd + I)并删除所选区域。你会看到我们的“Read More”按钮的背景现在在右边有一条直边，使它看起来好像是围绕着图像。
将该图层的不透明度降低到50%，让一些博客文章的图像通过按钮显示出来。
要完成我们的按钮，我们只需要输入“Read more”文本。设置前景色为白色(#ffffff)，然后使用水平文字工具，字体:Arial, Regular，大小:12pt，在我们的按钮居中书写文本:Read more。
我们将在博客图片下面添加一个漂亮的阴影。因此，让我们在灰色边框下面创建一个新图层。设置前景色为黑色(#000000)，使用矩形工具(U)画一个矩形，宽度略小于灰色边框。
栅格化黑色矩形的图层(图层>栅格化>形状)，然后编辑>变换>弯曲，变换形状，使它在中间弯曲(如下所示)。
接下来，选择滤镜>模糊>高斯模糊。设置模糊的半径为6px，按OK应用高斯模糊滤镜。
因此，阴影不是那么强烈，减少阴影层的不透明度为20%。你可能需要通过向上移动一点来调整阴影的位置。
现在是时候添加博客文章的摘录(也称为“预告片”)了。
设置前景色为灰色(#989eac)，用水平文字工具，在文章图片的下面写一些文章的摘录。我使用的是Arial字体，字号为13pt。
我们需要将次要导航菜单下方的水平线复制到第一篇博客文章的底部。
首先，使用矩形选框工具(M)在水平线周围做一个选区(使用垂直参考线来帮助你做出适当的选区)。
在图层面板中，找到有水平线的图层，点击使其成为活动图层。复制(Ctrl/Cmd + C)线条，回到“Blog post”图层组，粘贴复制的选区(这将自动为线条创建一个新图层)。
使用移动工具(V)移动文章摘录下面的水平线。将图层的不透明度降低到50%。
步骤10:创建第二篇博文
复制Blog post图层组。使用移动工具将复制的图层组的内容移动到第一个图层组的下面。
更改博客文章的标题、图片和摘录，使其看起来与第一篇博客文章不同。
对于这个图像，我只是使用了另一个以前的设计指导教程．
步骤11:创建分页导航
分页导航是包含大量内容的博客的一种流行设计模式。本质上，这是一种快速浏览旧博客文章的方法。你可以在底部看到它的作用设计指导首页还有分类页面。
让我们创建一个新的图层组(layer > new > group)用于分页导航。现在设置前景色为灰色(#989eac)。用水平文字工具(T)， Arial, Regular, 14pt字体，书写“Pages:”，与左侧参考线对齐。
然后写下页码(“1 2 3 4 5”)以及“最后”，对齐到右边的指南。
步骤12:创建侧边栏
让我们为侧边栏创建一个新的图层组(图层> new > group)。
我们还需要一个新的垂直指南来描绘侧边栏内容的左边缘，以便在博客文章区域和侧边栏区域之间有一点空间。新建760px的垂直参考线(View > new guide)。
用水平文字工具(T)，字体:灰色(#989eac)，字体:ChunkFive, 18pt，书写“Sponsors”。将这篇文章与第一篇博客文章的标题对齐。复制博客标题的图层样式，并粘贴到“赞助商”文本图层，给它一个非常微妙的阴影。
作为横幅广告的占位符，找一些300x250px的图片，并把它们放在“赞助商”文本的下面。我使用的图片来自以前的设计指导教程，你可以导航到在这里而且在这里．
在横幅广告下面，使用与“赞助商”标题相同的风格写“热门帖子”标题。
在标题下面，用Arial字体，Regular字体，14pt大小列出最受欢迎的博客文章。创建另一个部分，这次的标题为“Friends”。在“朋友”标题下面，列出你的博客列表。
步骤13:创建社交媒体按钮
没有社交媒体的博客算什么?我们将创建链接到博客的社交媒体帐户的按钮。我们将把它们放在主要内容区域的下面。
首先为社交媒体文本和按钮创建一个新的图层组(图层> new > group)。
书写“Connect Us”，对齐于左侧参考线，使用ChunkFive字体，大小为24pt。复制Welcome文本的图层样式，并粘贴到这个文本图层中。
现在让我们画出社交媒体按钮的背景。设置前景色为白色(#ffffff)，然后使用圆角矩形工具(U)绘制4个圆角矩形(如下所示)，然后将其图层不透明度降低为4%。
对于社交媒体图标，我使用了4个很棒的图标Vector 3D社交图标图标包。
下载软件包，然后在Photoshop中打开4个你最喜欢的社交媒体图标。将图标(图像>图像大小)调整为42x42px。调整图标大小后，将它们复制到文档中。
把图标放在我们刚才画的圆角矩形的顶部。然后在图标右侧输入社交媒体服务的名称(例如，“Stumble Upon”，“Facebook”等)，使用灰色(#989eac)， Arial, Regular，大小为14pt。
步骤14:创建一个简单的页脚
这是本教程的最后一步。现在，我们将创建一个简单的页脚，包括版权文本和设计师信息，以及“在Twitter上关注我们!”“文字-动作。让我们首先为页脚图层创建一个新的图层组(layer > new > group)。
我们将先处理比较简单的部分:版权文本。设置前景色为灰色(#8f9093)，使用Arial字体输入版权信息，字号为13pt。
中选择Twitter图标免费图标包:矢量3D社交图标我们之前下载的。
同样，将图像大小调整为42x42px。将图标放置在页脚区域，与右边的参考线对齐(如下所示)。
然后用与版权文本相同的颜色，写上“在Twitter上关注我们!”图标的左边。
用圆角矩形工具(U)，半径为15px，创建黑色(#000000)的背景(#000000)，用于“Follow us on Twitter!”“文本。
在我们刚刚绘制的黑色圆角矩形上应用投影图层效果(设置如下所示)。
将黑色圆角矩形的图层减少到40%，你会注意到我们的背景产生了一个微妙的“压入”效果。
教程汇总
我们终于完成了博客的设计，恭喜你!在本Photoshop网页设计教程中，我们介绍了网页设计师的几种流行技术。首先，在组织方面，您会注意到我们创建了大量的图层组，这确实有助于划分我们的PSD文件，并使其更容易使用。
我们还使用了具有精确位置的指南，这对于保持我们的设计元素正确对齐非常重要。我们讨论了几种技术，比如使用图层样式来设置文本图层，创建微妙的光效(在创建网站标志中可以看到)，嵌入分隔符，以及快速简单的网页按钮。我希望你觉得本教程有用，并鼓励你在评论中留下你的想法和问题。
下载源文件
- modern_sleek_blog(zip, 2.69 mb)
