在这个循序渐进的网页设计教程中，您将学习如何使用Photoshop制作一个美丽而抢眼的垃圾主题网页布局。本教程适用于初学者和中级Photoshop用户。这是一个两部分教程系列它将向你展示如何制作垃圾摇滚网页设计使用Photoshop，第二部分作为后续的网页开发教程，为您提供如何使用基于标准的HTML和CSS将设计模型转换为功能齐全的网页的指导。作为一个网页设计师这将是一个很好的技能。
更新:本系列教程的第二部分已经发布:
- 第2部分:如何从头开始编写垃圾网页设计
最终结果
点击下面的图片查看全尺寸版本我们将在本Photoshop教程中一起创建的设计。
设置Photoshop文档
1在Photoshop中创建一个具有尺寸的新文档1200 pxx1160 px并与文档设置如下图所示。
创建布局的背景
2在第一层，用渐变工具创建我们的背景。
确保选择线性渐变作为渐变类型。设置前景色为# 9 d6000和背景色# FFFFFF．
3.我们将为渐变背景添加一些纹理。
下载轻Grunge纹理从Bittbox.com．这些纹理对个人和商业用途都是免费的，但不得以任何方式出售或重新分发。我们将使用这个集合中的几个纹理，所以为了方便，在整个教程中保持集合的内容方便。
打开名为3484741593 _7575a6ebc7_b.jpg在Photoshop中，文件>打开…(Ctrl + O)，将这个纹理拖到我们的设计中，并改变这个纹理的混合模式为覆盖．
使用变换工具(CTRL + T)，通过拖动纹理周围的变换控件，使这个纹理适合画布的大小。
4使用普通羽毛橡皮(E)与一个300 px主直径和不透明度设置为21%，擦除右侧和远底部区域的纹理。下图显示了我们将擦除的区域(检查图像的高亮区域)。
我们这样做是因为我们要创建的网站是左倾的。通过指定的擦除方式，我们不需要担心必须无缝平铺纹理，我们只需要平铺渐变背景。
5从轻Grunge纹理设置,打开3484744611 _f995d6c67f_b.jpg然后拖到我们的画布上。
使用变换工具(T)旋转它顺时针90度．改变这个纹理的混合模式为光度和图层的不透明度39%．对这个纹理重复步骤4，用软橡皮擦去部分图层。
6下载墨水涂鸦笔刷集从FudgeGraphics.com。这些刷子对个人和商业使用都是免费的，但不得以任何方式出售或重新分发。激活笔刷工具(B)，点击如下图所示的小箭头来加载这个笔刷集。
一旦画笔面板显示出来，点击另一个小箭头，然后点击负载刷．参考下图。
7在纹理上面创建一个新图层。
前景色设置为# 000000，使用我们下载的Ink Scribbles笔刷集中的第6个笔刷。
在画布的左上方单击一次，应用画笔描边。没有必要显示整个笔刷。
将其定位为只有笔触的右下部分将出现在画布上。
更改此图层的混合模式为覆盖图层不透明度为52%．我们现在应该得到如下图所示的东西。
8重复步骤7，但这一次，使用墨水潦草笔刷集的第9个笔刷。
设置此图层的混合模式为覆盖并将不透明度值降低到41%．我们现在应该得到如下图所示的东西。
9创建一个新层。我们将使用墨水涂鸦笔刷组的第6个笔刷，但笔刷的主直径调整为432 px．单击画布的左上角以应用画笔描边。
10使用涂抹工具，选择羽毛笔刷，通过在画布上向下拖动鼠标来涂抹图层。一直这样做，直到得到如下图所示的结果。
11更改此图层的混合模式为覆盖它的不透明度35%．
现在您应该得到如下图所示的内容。
设置Photoshop指南
12现在我们要添加内容。确保我们的内容以Photoshop画布为中心，而不是超过1000 px宽。
为了确保我们的网站内容在1000px以内，使用Photoshop参考线，从Photoshop左侧和顶部的标尺中拖动它们(参见下图)。
制作网站Logo
13使用水平文字工具(T)，将颜色设置为# 3 a0707，将标题添加到我们的模型;这将作为网站的标志。这里，我使用的字体是斯塔姆皮特从dafont.com．
此字体仅供个人使用。如果你想使用另一种蹩脚的字体，你可以找到一个大量收集的垃圾字体在dafont.com上。
制作网站的主导航
14在logo的右侧，添加导航文本，使用相同的字体和颜色。
15在每个导航项之间添加分隔。用水平文字工具，用相同的字体和颜色，输入字母"我，有效地在它们之间创建垂直分隔。请注意:分隔符的字体大小必须增加，使其略大于导航项。
复制字母“I”4次，并将其均匀地分布在导航栏上。
制作“特色作品”部分
16在我们的标题和导航下面，我们将添加一个“Featured Work”部分。添加个人工作的照片或屏幕截图(作为缩略图)。
在左侧添加作品的描述。相同的字体(斯塔姆皮特)用于标题，副本的其余部分是网络安全字体，称为天线．
对于有特色的工作缩略图，通过右键单击图层并在上下文菜单上选择“图层样式…”来添加一个描边，打开图层样式对话框(或者:双击该图层也会打开图层样式对话框)。
使用下面的设置为笔画混合选项。笔画的颜色是# BA5009．
制作“更多工作样本”部分
17现在，我们将在“Featured Work”缩略图下面添加一个“More Work Samples”部分。
对于标题文本，使用颜色# BA5009．
对于缩略图周围的描边，遵循步骤16中的相同指示。笔画的颜色是#E7C788．
设计“关于这个网站”部分
18在“更多工作样本”部分的对面，添加一个“关于这个网站”部分。使用与“More Work Samples”标题相同的字体类型、字号和颜色。
使用天线剩下的部分。
设计次要内容部分
19在我们的“关于这个网站”和“更多工作样本”部分下面，我们将创建三个部分来容纳“联系”，“Flickr”和“Twitter”部分。应该使用与上一步(步骤18)相同的字体类型、字体大小和字体颜色。
制作网站页脚
20.在我们刚刚创建的三个部分下面，使用矩形选框工具(M)创建一个选区。使用油漆桶工具(G)，用颜色填充这个选区# BA5009．这填写的选择将作为网站的版权信息的背景。
21使用橡皮擦工具(E)，选择任何我们下载的墨水涂鸦笔刷设置笔刷，并将其不透明度更改为21%．
擦除我们在上一步中创建的矩形的一些区域，然后使用水平文字工具(T)在我们的文档中心添加版权文本。
确保在添加版权时，反锯齿是打开的。
这确保了小尺寸的类型更加清晰和可读。
制作水平分隔线
22现在，我们将为每个部分添加部门。创建一个新层。
使用铅笔工具(B)，主直径为2 px，在我们的画布上画一条直线来描绘网站的标题。绘制直线时按住Shift键，确保所绘制的直线是直线。
23选择橡皮擦工具(E)
从墨水涂鸦笔刷组中选择任何笔刷，并将其主直径减小到97 px不透明度降低到40%．稍微擦除一些区域，使铅笔线变得粗糙。
24通过右键单击该图层并在上下文菜单中选择“复制图层…”来复制两次除法层。
使用复制层分离每个部分;以下图为例。
完成了!
恭喜你，我们完成了我们的垃圾网页布局模型!如果你遵循这个循序渐进的教程，你应该得到一个网页设计模型如下图所示。
显然你会做的事设计大学网站，但它是伟大的和独特的艺术家，乐队等。
“垃圾网页设计”系列教程
本教程是第一部分这是一个两部分的系列教程，向您展示如何在Photoshop中创建一个垃圾网页设计，然后如何将垃圾网页设计模型编码为基于标准的(X)HTML模板。下一篇文章将于下周发布，为了确保在第二部分发布后立即通知您，您必须这样做订阅六修RSS提要．
- 第1部分:如何使用Photoshop创建一个垃圾网页设计
- 第2部分:如何从头开始编写垃圾网页设计
相关内容
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
