疯狂素材网

简单网页界面制作

2013-03-29 0人评论 890次浏览 分类:Web设计

Final Result

教程资源

Lets Get Started

1. 我们要做的第一件事是创建一个新文档带有 1020 × 1200 的尺寸。

2.使用您的油漆桶工具 (G) 填充色 # D7D7D7 你背景图层。

3.我们然后将开始与将可容纳我们在我们的网页的顶部的登录信息的容器。 使用矩形选框工具 (M) 进行类似于以下的选择,并使用 # 000000 填充它。

4. 接下来,我们想要我们新创建的图层上添加一些混合选项。 为此,右键单击您在图层调板中的图层从下拉式菜单中选取混合选项。

5. 接下来是.我们登录域。 请确保您的前台设置为 # 313131,然后唱你圆角矩形工具 (U) 半径为 3px 创建类似以下内容的矩形。 它将作为您的登录窗体的输入框。 #FBFCDD 输入的文本的颜色。 您将密码字段使用相同的方法。

6. 对于按钮,登录我们要再次使用我们圆角矩形工具 (U) 3px 半径和使一个矩形,它看起来与以下类似:

7. 你的图层上添加下列混合选项:

8. 添加一些文本中的此案例”标志的”您图层,它将查找类似于以下。 然后,您可以复制一个注册按钮的样式。

9. 用矩形选框工具 (M) 再次,我们要让我们标头的背景。 创建类似于以下的选择和使用 # 000000 填充它。

10. 你的图层上添加下列混合选项:

11. 转到此页的顶部教程资源并找到打开此下一步的半色调刷包。 上一个新的图层,您的标题背景图层用白色画笔以上做类似于下面这样:

12. 下一步你的图层混合模式设置为 Overlay,并降低到约 6%不透明度。 然后将以下混合选项添加到您的半色调图层:

13. 我们需要安排所有文本链接将会都显示在我们的标题和我们的文本徽标的放置位置。 徽标中使用的字体是 #FFFFFF Calibri 作为其颜色。 该图标是从牛奶图标集提供教程资源中。 使用我们链接我用字体加粗黑体 # F7F6F6 作为我的字体颜色。

14. 要代表我们的活动链接,我们要再次使用我们圆角矩形工具 (U) 和使形状类似以下内容:

15. 您新创建的圆角的矩形图层上添加下列混合选项:

16. 即是我们的头,而现在是时候进入我们的搜索框。 这些图层将需要我们刚创建的头层以上。 再次用矩形选框工具 (M),进行类似于以下的选择,并使用 # 000000 填充它。

17. 将添加到其图层的混合以下选项:

18. 下一步使用矩形选框工具 (M),使一个矩形,它类似于以下,并使用 #FFFFFF 填充它。 然后降低其至 30%的图层的填充。

19. 将添加到其图层的混合以下选项:

20.对于我们搜索输入我们要创建类似这样的半径为 10px 使用我们圆角矩形工具 (U):

21. 您输入图层上添加下列混合选项:

22. 剩下的只是添加一个搜索图标 (我使用默认放大镜),及一些搜索文本和您几乎完整的头会如下所示。

23.我们需要将添加到此节的最后一件事是类别下拉式菜单。 为此使用矩形选框工具 (M) 进行类似于以下的选择。

24.将添加到其图层的混合以下选项:

25.使用您的多边形套索工具 (L) 作出类似以下内容的三角形和使用 # 000000 填充它。 然后添加”类别”文本用色 # 323232。

26. 我想创建一个类似的风格,themeforest.为我们”初步”框使用。 要做这再一次用矩形选框工具 (M)。

27. 你的图层上添加下列混合选项:

28. 接,我添加了我的背景图像。 为此,我只被创建黑箱我们的容器内。 我然后 proceded 安排一些的主题一起在一个循环中的缩略图。 一旦完成,我认为合并这些图层并降低至 20%不透明度。 然后剩下的只是添加一些文本。 文本的第一和第二行是 #FFFFFF,第三行是 #FBFCDD,而蓝色是 # 67C0ED。

29. 为我们特色的主题框添加一个心图标从单图标包,然后添加您的标题文本,用色 # 212121。 将下列混合选项添加到您的文本图层:

30. 使用您在步骤 26 中用于您介绍框的设置和你得东西,看起来像这样:

31.做同样的事,一个新的主题部分和然后及其时间,进入我们的页脚。

32.页脚会像标头。 所以请返回到步骤 9 一直走到这一点:

33. 因为标题使用颜色 #FFFFFF,以及说明和链接,使用颜色 # CADEF2。

34. 我们要做的最后一件事是创建每个文本区域之间 divs。 使用矩形选框工具 (M) 进行 1px 广泛选择和使用 # 030508 填充它。

35. 你的图层上添加下列混合选项:

36. 它的所有工作完成之后您的模板将会看起来如下所示:

源文件下载

顶一下
(0)
0%
踩一下
(0)
0%

发表评论共有0访客发表了评论

    暂无评论,快来抢沙发吧!

我来说几句吧

验证码: 看不清楚?