PS清爽网页设计 新手入门参考网站

【 tulaoshi.com - PS 】

此教程比较简单，适合新手练习用，熟练PHOTOSHOP工具的操作。

最终效果

1 创建的尺寸在Photoshop新文件 1200px x 1050px。

2 现在，我们要建立的背景。选择渐变工具（G）的。请确保它被设置为 线性渐变。设置前景色 ＃a1e8fe 和背景色 ＃59d3fa 并创建一个象下面这样的梯度：

3 在一个新图层，创建一个 960px 全网- 12条，在每个酒吧 60px 宽的。每栏广场 20px 相距。放置在文件中心的网格。该网格应成为你的指导和建议，您的设计的主要内容不超过网格的宽度。

4 我们现在将创造标志和导航项目的容器。要创建的容器，使用圆角矩形的形状图层工具选择。设置半径 10px。

5 创建一个圆角矩形 300px 宽的。另外创建一个圆角矩形 620px 广泛，他们应为格位于如下：

6 应用这些图层样式设置到每个圆角矩形：

您的圆角矩形现在应该是这样的：

7 要创建导航项目，使用文字工具（T）的。使用颜色 ＃5f5f5f。

8 在一个新的层，让我们添加分隔符在每一个导航项目。在这里，我添加了一条线的颜色 ＃dedede。

9 重复分隔。使用图层“图层样式”混合选项“颜色叠加，改变重复的颜色 ＃000Tulaoshi.com。移动一个像素重复的权利。这将创建一个微妙的雕刻效果。

10 现在，我们创建下面的标志和导航头。使用文字工具（T）的，增加公司标语和它下面简要介绍。让我们再添加一个轻微的阴影它给它更多的层面。

11 为了填补这个空白旁边的标语，添加一台计算机或笔记本电脑的照片。这是你现在应该有：

12 下面简要介绍，随着圆角矩形工具使用 28px 半径，创建一个按钮，说“了解更多“。这是非常有用这样，如果用户希望更多地了解你的公司指出，这是容易获得的信息。

应用渐变叠加使用的按钮，上面的设置与 ＃086da0 作为底色和 ＃23a7ea 作为最高的颜色。

13 使用圆角矩形工具再次与 16px 半径，创建一个 300px 矩形。进入混合选项并添加作为步骤6相同的价值观阴影。

14 选择我们刚才创建的矩形（加利福尼亚/ Ctrl +单击），并创建一个高于此矩形新层。添加一个浅蓝色 （＃96e3fc），以透明渐变在矩形。

15 这种梯度移动一个像素了。这可能是一个非常微小的细节，但我们渴望的。它有点使它看起来有些不同，而不是只是一个普通的有梯度框。

16 这些图标是免费供个人使用;如果您打算使用教程设计用于商业目的，这些图标来代替一个允许你这样做。

17 重复框，我们刚刚创建的，其内容沿 两次，然后发布到网格它们均匀。更改框的两个新的内容，请你。它建议您更改每个方块的内容而不是重复他们，让他们都一样。这使得设计更象一个真正的，航行的网站看看，而不仅是懒洋洋完成样机（有益的要求向客户端）。

18 要添加更多的内容设计，我们可以添加一些下面的三个箱子文本，例如，通讯节将是巨大的。但是不要忘记，以确保顺利 内部 网格！

19 接下来，我们创建页脚，我们可以添加版权和网站的联系信息。

20 创建的尺寸在Photoshop新文件 25px x 25px 并填充黑色整个文档（＃000000）背景。

21 论与黑色背景层上，创建一个新层。使用缩放工具（2），放大的文件，其最大大小，所以我们可以清楚地看到。设置铅笔工具 1px 和前景色为白色（＃000000）。为您的文件，就像下面图片线。注意到多少像素您需要绘制和文件上的你需要借助他们在哪些领域。

就这样连接的行：

填充白色，以实现这一成果的空白领域：

22 隐藏与黑色背景层，进入“编辑定义图案。与黑色背景层只创建使白色更加明显。命名您的刷子“对角线”，并点击确定。

23 现在让我们回到我们刚才创建的样机。创建一个渐变背景之上的新层。进入编辑“填写的内容和下拉，使用模式。在自定义模式点击和寻找模式，我们刚创建了一个名为“对角线“并点击确定。您应该看到这样的：

24 设置这个层的混合模式以 覆盖 其透明度至 4％。 您现在应该是这样的：

25 从下到上，用一个普通的羽毛橡皮擦，清除掉对 60％ 的斜线，使其看起来就像这样：

26完成