在Photoshop中创建一个优雅的图案网页设计

Trevin Shirey著
大约16分钟阅读
Trevin是WebFX的业务开发高级总监。他参与过450多个营销活动，20多年来一直在建设网站。他的作品被《搜索引擎土地》、《今日美国》、《快公司》和《公司》推荐。

预览

点击下面的图片查看全尺寸．

教程资源

刷:垃圾金属划痕作者:Sebastiano GuerrieroWeGraphics）
字体:龙虾by Pablo Impallari (FontSquirrel)
字体:贝巴作者:恒川良一(dafont.com)
字体:Baskerville by urw++
刷:高质量的粗糙和肮脏的Photoshop笔刷通过克里斯·斯普纳(Blog.SpoonGraphics)

步骤1:创建一个新的Photoshop文档

首先创建一个新文档(Cmd/Ctrl + N)，设置宽度为1000px，高度为950px。

确保颜色模式设置为RGB颜色．双击默认的背景图层，在打开的新建图层对话窗口中按Enter，解锁背景图层。再次双击背景图层(解锁时默认重命名为“0层”)，打开图层样式对话框。

我们的设计将有一个浅灰色的背景色，所以我们将给它一个颜色叠加设置为#EBEBEB。创建一个新的Photoshop文档在应用颜色叠加后，通过在图层面板中右键单击它并选择将图层转换为智能对象转换为智能对象从出现的菜单中。图层仍然是激活层，点击滤镜>噪点>添加噪点。

设置数量为2%，给背景一个微妙的，颗粒状的纹理。创建一个新的Photoshop文档

步骤2:创建自定义Photoshop图案

我们将创建3个不同的自定义模式用于web布局。为此，我们需要创建3个新的Photoshop文档。

模式1

我们将创建的第一个Photoshop文档的画布大小为38x38px。创建自定义Photoshop图案使用矩形选框工具(M)/自由变换(Cmd/Ctrl + T)或铅笔工具创建一个对角图案，如下图所示(下图是放大的)。确保背景层是透明的;如果没有，删除默认的背景层。

选择所有(Cmd/Ctrl + A)，然后点击编辑>定义图案。保存您的模式。创建自定义Photoshop图案

模式2

接下来，我们将创建一个3x3px的Photoshop文档。

创建自定义Photoshop图案使用矩形选框工具(M)(你可能想要设置样式选项为)固定大小，然后使用宽度和高度为1px)，创建如下所示的三个黑色正方形。同样，确保背景是透明的，选择所有(Cmd/Ctrl + A)，然后点击编辑>定义图案保存图案。创建自定义Photoshop图案

模式3

最后，我们将为我们的第三个自定义图案创建一个130x20px的Photoshop文档。

创建自定义Photoshop图案创建一个新图层(Cmd/Ctrl + Shift + N)，并使用椭圆选框工具画一个圆，样式选项设置为固定大小，宽度和高度为20px。用黑色填充圆圈，选择#000000作为前景色，然后按Option/Alt + Backspace(用前景色填充选区的快捷键)。点击“选择>全部”来加载整个画布周围的选区，点击“图层>对齐图层到选区>水平中心”，将圆圈定位在中心，然后点击“图层>对齐图层到选区>底部边缘”，将圆圈定位在画布的底部。

在一个新图层上，创建另一个形状，这次是一个黑色矩形，尺寸:20px(宽)和120px(高)。将这个矩形对齐到画布的顶部。将我们绘制的艺术品保存为图案。

创建自定义Photoshop图案

步骤3:创建Header Section

切换回主Photoshop文档。创建新图层header。在画布的顶部创建一个高130px，宽100%的矩形选区。点击编辑>填充打开填充对话框窗口。在Use选项下，选择模式然后选择我们从上一步做的第三个图案。

按确定填充矩形选择与我们的模式。创建标题部分现在双击header图层打开图层样式对话框。给这个图层一个渐变叠加(设置如下所示)。

创建标题部分将“header”图层转换为智能对象，然后对其进行栅格化(右键单击该图层并选择)栅格化图层从出现的菜单)。去过滤>噪音>添加噪音;金额用2%。复制“header”层(Cmd/Ctrl + J)，然后重命名复制层为“stripes-thin”。Cmd/Ctrl +点击“stripes-thin”图层的缩略图来加载它周围的选区。按“Delete”键删除所选区域。用我们在步骤2中创建的第二个图案填充所选区域。创建标题部分再次复制header图层，重命名为stripes-thick。这个新层应该在“header”层之上，但在“stripes-thin”层之下。Cmd/Ctrl +点击该图层，在其内容周围加载一个选区，然后按Delete删除所选区域。保持你的选择活跃。

用粗条纹图案填充所选区域(我们在步骤2中创建的第一个图案)。选择所有3个图层，按Cmd/Ctrl + G将它们放在一个图层组中，并设置图层组的混合模式为覆盖。设置“条纹-厚”图层的不透明度为3%，设置“条纹-薄”图层的不透明度为15%。创建标题部分现在下载免费样品(或购买，它并不贵，绝对值得)垃圾金属划痕刷子。

安装刷包。创建一个新图层，设置前景色为白色(#FFFFFF)，切换到笔刷工具(B)，选择一些金属划痕笔刷，并应用到我们的头部部分。然后设置划痕层的不透明度为15%。

创建标题部分

步骤4:添加站点Logo

首先，我们需要Photoshop指南来帮助我们做出完美的对齐。我们将添加两个20px和980px的垂直导轨，和一个65px的水平导轨。点击查看>新建参考线，可以准确地创建参考线。

使用水平文字工具(T)写出站点的名称。我用了免费的龙虾字体大小为50pt，文本为“Calaka”。添加站点Logo/名称给文本图层一个投影(设置如下所示)。复制文本层(Cmd/Ctrl + J)，通过右键单击并选择清除复制层上的图层样式清除图层样式，然后栅格化图层。Cmd/Ctrl +点击图层的缩略图来加载文本周围的选区，然后按Delete删除所选区域。

用我们在步骤2中做的第二个图案填充选定的区域。然后，切换到移动工具(V)将细条纹图案向右移动4px，向下移动4px。双击图层进入图层样式对话框窗口，然后给它一个白色的颜色叠加(#FFFFFF)。添加站点Logo/名称创建一个新层。

切换到笔刷工具(B)(设置如下所示)，点击一次，给logo的区域一个白色的辉光。设置白色发光层的混合模式为覆盖并将不透明度降低到40%。

步骤5:创建导航栏

对于导航栏，我们将有4个链接(可以随意添加):“主页”，“关于”，“作品集”和“联系人”。我用的是(免费)贝巴字体大小为20pt。使用水平文字工具(T)在不同的文本层上书写链接。选择所有的文本图层，选择图层>对齐>垂直中心，将它们对齐在一行。

使用移动工具(V)定位链接，以便在它们之间留下一些空白。用圆角矩形工具创建Home链接的背景;圆角矩形背景将作为一个视觉标志来表示用户所在的页面。创建导航栏给圆角矩形背景一个渐变叠加，内发光和描边。

渐变叠加

中风

渐变叠加

内发光

渐变叠加之后，将图层的混合模式改为覆盖不透明度为62%左右。我还在链接上添加了黑色的阴影，给它们一些深度。

步骤6:创建介绍文本

头文件完成。

接下来，我们将在标题下面创建介绍文本部分。用户需要马上知道他或她在与谁打交道，所以让我们添加一个大的介绍/问候文本。我使用Bebas字体(与导航链接相同)，字号为100pt，在介绍文本的标题处输入“Hey There”。

创建介绍文本给文本层一个黑色到深灰色的颜色梯度。为了帮助从rgb转换颜色为十六进制，看看这个工具．栅格化文本层，然后选择滤镜>杂色>添加杂色(使用3%的数量给它一个微妙的纹理)。

再次双击“Hey There”图层，打开图层样式窗口，然后给图层一个白色的投影。创建介绍文本复制图层(Ctrl/Cmd + J)，清除复制层上的图层样式，然后Cmd/Ctrl +单击复制层的缩略图来加载文本周围的选区。按Delete删除所选区域，然后用我们在步骤2中创建的细条纹自定义图案填充所选区域。将条纹图层拖到“Hey There”图层下面，向下移动4px，向右移动，创建一个有图案的投影效果。创建介绍文本在“Hey There”标题的右边写一些介绍。给介绍副本一个深绿色覆盖(#797c26)。