此教程比较简单,适合新手练习用,熟练PHOTOSHOP工具的操作。
最终效果
1 创建的尺寸在Photoshop新文件 1200px x 1050px。
创建背景2 现在,我们要建立的背景。选择渐变工具(G)的。请确保它被设置为 线性渐变。设置前景色 #a1e8fe 和背景色 #59d3fa 并创建一个象下面这样的梯度:
放置到文档网格系统3 在一个新图层,创建一个 960px 全网- 12条,在每个酒吧 60px 宽的。每栏广场 20px 相距。放置在文件中心的网格。该网格应成为你的指导和建议,您的设计的主要内容不超过网格的宽度。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)制作徽标和导航容器项目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 这种梯度移动一个像素了。这可能是一个非常微小的细节,但我们渴望的。它有点使它看起来有些不同,而不是只是一个普通的有梯度框。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)制作一个号召性词语按钮16 这些图标是免费供个人使用;如果您打算使用教程设计用于商业目的,这些图标来代替一个允许你这样做。
17 重复框,我们刚刚创建的,其内容沿 两次,然后发布到网格它们均匀。更改框的两个新的内容,请你。它建议您更改每个方块的内容而不是重复他们,让他们都一样。这使得设计更象一个真正的,航行的网站看看,而不仅是懒洋洋完成样机(有益的要求向客户端)。
18 要添加更多的内容设计,我们可以添加一些下面的三个箱子文本,例如,通讯节将是巨大的。但是不要忘记,以确保顺利 内部 网格!
最后但并非最不重要...页脚19 接下来,我们创建页脚,我们可以添加版权和网站的联系信息。
蛋糕上的糖衣:创建对角线20 创建的尺寸在Photoshop新文件 25px x 25px 并填充黑色整个文档(#000000)背景。
21 论与黑色背景层上,创建一个新层。使用缩放工具(2),放大的文件,其最大大小,所以我们可以清楚地看到。设置铅笔工具 1px 和前景色为白色(#000000)。为您的文件,就像下面图片线。注意到多少像素您需要绘制和文件上的你需要借助他们在哪些领域。
就这样连接的行:
填充白色,以实现这一成果的空白领域:
22 隐藏与黑色背景层,进入“编辑定义图案。与黑色背景层只创建使白色更加明显。命名您的刷子“对角线”,并点击确定。
23 现在让我们回到我们刚才创建的样机。创建一个渐变背景之上的新层。进入编辑“填写的内容和下拉,使用模式。在自定义模式点击和寻找模式,我们刚创建了一个名为“对角线“并点击确定。您应该看到这样的:
24 设置这个层的混合模式以 覆盖 其透明度至 4%。 您现在应该是这样的:
25 从下到上,用一个普通的羽毛橡皮擦,清除掉对 60% 的斜线,使其看起来就像这样:
26完成