在本Photoshop网页设计教程中，您将学习如何创建动态和高影响力的背景，您可以在自己的网页布局中使用。我们将讨论颜色/渐变技术，灯光效果，并使用纹理和模式。
介绍
在视觉设计网站时，一些小细节会让设计脱颖而出。在本教程中，我将向你展示一些增强网站外观的方法。我们还将看一些应用这些技术或这些技术组合的人的例子。
颜色/梯度
如果使用得当，渐变效果很好。在大多数情况下，当你设计一个渐变网站时，你应该使用微妙的颜色变化。颜色和渐变真的可以给你的网站更多的维度，使它流行。
让我们从一些实验开始。
线性渐变
让我们从基础开始:线性梯度。在选择渐变时，一个很好的做法是使用两种颜色，它们之间的对比度不高，但足够让效果仍然明显。我们将使用深蓝色色调。
（R:10 g:34 b:55)．单击并从标题的顶部向下拖动线性梯度。这给了一个微妙的变化，有助于给设计一点“魅力”。
下面是一些使用线性渐变的网站的例子:
球场
Spundo
Dermapure
径向梯度
接下来是径向梯度。选择渐变工具(G)，选择径向渐变选项。点击并拖动文档中间的一个小渐变(我们将调整它的大小)。
将渐变移到文档的顶部。使用编辑>自由变换(Ctrl + T)，然后使用变换控件拉伸径向梯度，使梯度达到你的网站的边缘。然后使用移动工具(V)移动它，使渐变的中间位于文档的顶部。
下面是一些使用径向渐变的网站的例子:
Webdever
Pixeloop媒体
经典手包澳大利亚
颜色
就像渐变一样，你可以通过使用独特的颜色来让你的网站流行起来。坚持我们的蓝色，我们可以改变整个网站的这个颜色。我唯一改变的另一件事是帖子的背景颜色，让它有更好的对比。
我们也可以把颜色和渐变结合起来。
下面是一些使用纯色的网站的例子:
一个美丽的网络
Guifx
灯光效果
这很像渐变，但在颜色上有更多的变化。为了达到这个效果，从白色背景开始，进入滤镜>渲染>灯光效果。将您的设置更改为如下图所示。
你可以使用不同的设置，但重要的是要记住，顶部的颜色将是你想看到的颜色，底部的颜色需要是黑色。改变混合模式为屏幕。重复此步骤两次，将颜色更改为不同深浅的蓝色，使它们变小，并将其移动到文档的左右两侧。
你改变的颜色越多，你的背景就越有活力。
下面是一些使用灯光效果的例子:
GreenLite Web解决方案
levon.co.za
RedoPC
材质/模式
纹理和图案可以给你的网站一些额外的东西，使它真正脱颖而出。它们可以为你的网站提供更多的细节，这是你仅仅使用渐变和灯光效果无法获得的。它们还可以帮助改变你的网站的情绪和外观，这取决于你决定使用什么纹理或图案。
纹理
在这个例子中，我们将使用来自无符号设计；下面是纹理文件链接:IMG_1283.JPG。将它带入Photoshop文档，并使用Edit >自由变换(Ctrl + T)调整它的大小，使其横跨整个文档。现在我们要调整高汤的纹理，使其变暗，以便与黑色背景更好地搭配。
打开水平调整，图像>水平>调整…(Ctrl + L)，并调整箭头，使图形左侧没有开放空间。
现在打开曲线调整对话框，图像>调整>曲线…
(Ctrl + M)，并调整设置为类似下图，记住，我们想要一个纹理，将与背景很好地融合。
让我们去掉硬边，这样我们就能平滑过渡到纯色。确保你在纹理层上，点击图层面板底部的添加图层蒙版图标添加一个图层蒙版。
从工具栏中选择线性渐变，并使用黑色(# 000000)作为前景色，点击并拖动文档左右两侧的渐变，以及从图像底部到标题底部的渐变，以使其平滑过渡。
下面是一些很好的使用纹理的例子:
2009年Sanjoaninas
Explovent
振兴非洲
lebloe
模式
我不会向你展示如何创建图案，但如果你想学习，你可以去看看我写的这个教程，叫做“用图案创建一个很棒的背景”。让我们看看如何在我们的设计中添加模式。我将从上面引用的教程中采用碳纤维图案。
我们想要做与纹理相同的遮罩，但首先让我们使用矩形选框工具(M)开始，然后在文档的顶部创建一个框选区，并填充我们的图案。
将图层的不透明度降低到左右20%并掩码边缘类似于我们在上面的纹理部分中使用的方法。
我们可以通过添加任何渐变或照明技术来混合它与纹理或图案。
下面是一些使用模式的网站的好例子:
ILLUSIO
加布里埃尔Nunes
丹尼暗黑破坏神
总结
这只是一个起点。正如您在示例中所看到的，您可以通过混合和创造性地使用这些元素来做许多事情。尝试一些变化与你的下一个网站布局。
你的想法呢?
你觉得高冲击力的背景怎么样?此外，如果你已经学习了本教程，想要展示你的作品，不要犹豫，在评论中留下链接!
相关内容
作者简介
泰勒丹尼斯来自新罕布什尔州阿什兰的兼职自由设计师。他也是设计博客的创建者/作者丹尼斯设计/博客，一个致力于提供高质量教程和灵感的网站。你可以在Twitter上关注他或者在他的个人地盘丹尼斯的设计。
