在Photoshop中设计一个有纹理的“即将到来”的网页

预览

点击下面的图片查看作品全面．

教程资源

• 图标:功能图标集Liam McKay(功能)
• 材质:垃圾抓包纹理02作者:JC Parmley(设计指导)
• 图片:stripes-pattern

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

首先在Photoshop中创建一个新文档(Ctrl/Cmd + N)。画布大小应该是1200px * 1000px，它应该有一个白色背景。

步骤2:创建Photoshop参考线

现在添加Photoshop参考线，这样我们就可以保持设计元素的正确对齐。如需添加参考线，请执行“查看>新建参考线”。

我们将创建2个垂直导轨和5个水平导轨。

在以下位置创建垂直参考线:

• 250 px
• 950 px

在以下位置创建水平参考线:

• 100 px
• 210 px
• 500 px
• 730 px
• 850 px

步骤3:创建纹理背景

双击锁定的背景图层，重命名为“White”。

这个过程解锁背景层，以便我们可以修改它。

创建一个新图层组Background(图层>新建>组)，并移动白色图层到组中。所有与设计背景相关的图层都将放在这个图层组中。

接下来，创建一个新图层(图层>新建>图层或按Shift + Ctrl/Cmd + N)命名为Gradient。

设置前景色为蓝色(#005C9D)，背景色为亮蓝色(#40A5DB)，然后选择渐变工具(G)。使用渐变工具从画布的底部拖动到顶部填充渐变图层;按住Shift同时拖动，使一个完美的垂直颜色梯度。

然后，将渐变图层的不透明度降低到70%。

设置前景色为白色(#FFFFFF)，背景色为黑色(#000000)。创建一个新图层Stripes，然后在这个新图层上使用云彩滤镜(滤镜>渲染>云彩)。

之后，选择滤镜>模糊>运动模糊，设置角度为45^o和距离为450px。

设置“条纹”图层的混合模式为叠加，不透明度为50%。如下图所示，这就产生了一种条纹的光线效果。

我们将在网页布局的顶部创建云。

新建图层组Clouds，并移动到Background图层组中;将它放在该组中的其他图层之上。

设置前景色为白色(#FFFFFF)，并使用椭圆工具(U)，绘制几个椭圆，使一个插图，卡通般的云如下所示。

之后，右键单击“云”图层组，在出现的上下文菜单中选择合并组(Ctrl/Cmd + E)。这将合并图层组为一个图层。

在图层面板中，“云”图层是活动图层，点击图层>图层样式>混合选项，进入图层样式对话框，然后给图层一个投影。

设置“云”图层的混合模式为柔光，并降低其不透明度为30%。

创建一个新图层(Shift + Ctrl/Cmd + N)，命名为“Light”，并将其置于所有其他图层之上。选择画笔工具(B)，并使用选项栏加载基本的刷子Photoshop附带的库。

设置你的前景色为白色(#FFFFFF)，选择软、机械笔刷尖端，并设置700px作为笔刷的主直径。在画布的顶部中心单击一次以应用画笔描边。

将“Light”图层的不透明度降低到65%。

我们现在要给我们的背景添加一个纹理。

我用过垃圾抓取袋:纹理包来自设计说明书免费赠品部分。具体来说，我用了垃圾抓包纹理02．下载并在Photoshop中打开这个纹理。

把它放在我们的文档中，然后重命名它的图层为“Texture”。按Ctrl/Cmd + T激活自由变换，然后调整你的纹理，以适应画布内部。

转到图像>调整>黑白将纹理转换为灰度。

让我们模糊一下纹理层。转到滤镜>锐化>非锐化蒙版，并使用以下设置:

• 数额:35%
• 半径:2 px
• 阈值:0的水平

现在将纹理图层的混合模式设置为柔光，并将其不透明度降低到40%。

我们已经完成了背景。

步骤4:创建头部

在图层面板中，你现在可以折叠背景图层组，点击组名旁边的灰色小三角形;这将允许我们专注于我们工作的另一部分，以及使我们的图层面板更容易导航。

创建一个新图层组Header(它应该在Background图层组的顶部)。

选择水平文字工具(T)，在选项栏中，设置工具，使您使用的字体:Georgia，斜体，62px字体大小。

写下你的网站名称(在本教程中，我写的是“Design instruction Premium”)。使用我们之前创建的Photoshop参考线来对齐文本。

双击文本图层进入图层样式窗口，然后给它一个投影和渐变叠加。

阴影

渐变叠加

这是我们图层样式的结果(可以使用CSS3的样式在HTML中重新创建)文本阴影财产和梯度()值)。

步骤5:创建Body容器

创建一个新图层组Body，并将其移动到Header组下面。设置前景色为白色(#FFFFFF)，然后使用矩形工具(U)在我们创建的Photoshop参考线之间画一个矩形，如下图所示。

切换到自定义形状工具(U)。

确保你有箭头已加载形状库(它默认带有Photoshop)。定位命名为箭头12然后画一个箭头(如下图所示)。

使用编辑>自由变换> 90^oCCW旋转箭头，使其指向上方。使用移动工具(V)定位箭头，如下图所示。

在图层面板中选择矩形图层和箭头图层，然后选择图层>合并图层(Ctrl/Cmd + E)合并它们。

这使得主体容器看起来有点像一个语音气泡。重命名合并层为一些直观的东西，如“Box”。将“Box”图层作为活动图层，点击图层>图层样式>混合选项，进入图层样式窗口，这样你就可以给图层一个描边。

进入>噪音>添加噪音，并使用以下设置:

• 数额:1%
• 地理分布:统一的
• 单色:检查

下载条纹图案图案并在Photoshop中打开。

转到编辑>定义图案以保存图像为Photoshop图案(有关此主题的更多信息，请阅读Photoshop模式指南)。

创建一个新图层(Shift + Ctrl/Cmd + N)，命名为Stripes。选择油漆桶工具(G)并将其设置为模式选项，然后使用图案选择器(也位于选项栏中)定位并选择您安装的条纹图案。

通过Ctrl/Cmd +点击“box”图层的缩略图加载一个选区。使用油漆桶工具填充所选区域的条纹图案。

将“Stripes”图层的不透明度调整为1%。

步骤6:创建Web表单输入字段

新建图层(Shift + Ctrl/Cmd + N)命名为Input。

设置前景色为灰色(#F4F4F4)，然后，使用矩形工具(U)，画一个矩形，如下图所示。

接下来，给Input图层一个内阴影和描边图层样式。

内阴影

中风

确保Input图层仍然是活动图层，然后按Ctrl/Cmd + J复制该图层。使用移动工具将复制的图层移动到第一个图层的下面。然后用同样的方法创建第三个矩形。

下载功能图标集，解压缩压缩包，然后找到并打开这些图标:

1. mail_reply_48.png
2. twitter_boxed_48.png
3. user_48.png

在我们的文档中放置图标，如下所示:

设置前景色为灰色(#BABABA)，切换到水平文字工具(T)，设置工具为Georgia，斜体，字体大小为28px，然后写上“Your Name:”(或类似的东西)。

这个文本是输入字段的标签。

为文本图层设置投影图层样式。

使用与上面相同的过程在输入字段上写更多的标签。

步骤7:添加一个介绍性段落

设置前景色为明亮的蓝色(#F7FBFE)，在正文下面写一个介绍性的段落，字体:Arial, Regular, 18px，使用水平文字工具(T)。

给介绍段一个投影图层样式。

步骤8:创建一个大的UI按钮

新建图层Button(按Shift + Ctrl/Cmd + N)。切换到圆角矩形工具(U)，设置半径为10px，然后在Photoshop参考线之间绘制一个大按钮，如下图所示。

给Button图层一个渐变叠加和描边。

渐变叠加

中风

通过Ctrl/Cmd +在图层面板中点击“button”图层的缩略图预览来加载按钮周围的选区。之后，创建一个新图层(Shift + Ctrl/Cmd + N)，命名为“Button stripes”。

用我们之前在新图层上使用的条纹图案填充选区，然后降低图层的不透明度为3%。

切换到水平文字工具(T)，选择格鲁吉亚，斜体，48px字体大小为按钮书写文本(书写文本，“订阅现在”或类似的东西)。右键单击“Header”文本层(显示“Design instruction Premium”的图层)，然后选择复制图层样式从出现的上下文菜单。接下来，右键单击“Subscribe Now”文本层，然后选择粘贴图层样式从出现的菜单中。

这应该复制我们应用于Design instruction Premium层的渐变叠加/投影图层样式。

新建图层(Shift + Ctrl/Cmd + N)，命名为Shadow。设置前景色为黑色(#000000)，然后使用椭圆工具(U)在按钮的正下方画一个非常短而宽的椭圆。

通过滤镜>模糊>高斯模糊软化椭圆-使用半径3px。降低“阴影”图层的不透明度为20%。

步骤9:创建页脚

创建新层组Footer。

设置前景色为深灰色(#202020)，然后使用水平文字工具(T)设置为Arial, Regular，字体大小为14px，写上你的版权信息。给这个文本图层添加投影。

教程汇总

恭喜你!我们已经完成了“即将到来”的网页设计。

我们介绍了一些有用的和流行的技术，如如何创建一个详细的和有纹理的背景，如何创建一个简单而有风格的盒子，如何制作一个大的UI按钮，如何使用模式，以及如何对文本进行风格化。

我想听听你对这个教程和最终结果的看法。与我们分享你自己的结果，在评论中链接到它，并张贴在设计指导社区Flickr组池．

下载源文件

• textured_comingsoon_webpage(zip, 9.07 mb)