WEB开发网
开发学院图形图像PhotoShop Photoshop网站设计实例:甜蜜糖果店 阅读

Photoshop网站设计实例:甜蜜糖果店

 2010-07-06 08:24:50 来源:WEB开发网   
核心提示:26. 要添加一些额外的细节,比如标签,Photoshop网站设计实例:甜蜜糖果店(2),我们要在顶部切出一个小的块, 使用您的多边形套索工具(L)的,我改变了混合模式柔光,不透明度,作出选择类似于以下命令,然后选择“选择>逆时针旋转”

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

26. 要添加一些额外的细节,比如标签。我们要在顶部切出一个小的块。 使用您的多边形套索工具(L)的,作出选择类似于以下命令,然后选择“选择>逆时针旋转”。 然后击中层图层蒙板图标调色板选项卡上选择与你的层。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

27. 最后一步是要增加一个像我们周围的白色边缘。我们将其设置为柔光,不透明度,然后降低到约62%。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

28. 现在为头部的背景做个风车效果类似以下所示:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

29. 现在添加下面层混合选项到您:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

30. 为了实现我们的糖果包装线,我们要创建一个模式。因此,为了这样做,我们要创建一个新文件的尺寸600 × 600。创建一个新层,并删除你的背景层,使您留下了一个透明的文件。然后添加以下方式(我做我的背景一束黑色的矩形,以便可以看到更好的,但你的将是透明的):

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

31. 然后进入“编辑”>定义模式“,并将其命名条纹。关闭了您的条纹文件,然后返回到您的模板了。CTRL+点击您的糖果背景使之成为选择,然后用你的模式邮票工具来刷上一层上方的新创建的模式:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

32. 改变混合模式为叠加,不透明度和降低至28%和已完成的头会如下所示:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

绘制标志

12. 为标志,我准备了“ 糖心图标“。就是下面的效果。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

13. 把字添加下面的混合选项:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

14. 在字体上加入阴影:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

15. 使用您的圆角矩形工具(U)与10px半径,和一个#BC3D56前景,使一个矩形,它类似于以下内容:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

16. 我们要突出我们的圆角矩形。为此,点击圆角矩形图层调色板,然后转到“选择>修改”>渐变“,并在对话框中输入1。 填写您的选择与#FFFFFF上一个新层,然后合同一改再进入“编辑”>清除“。你将留下一个白线,看起来像这样:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

17. 改变混合模式为柔光在这一层,然后降低透明度为38%。现在添加到您的下列混合选项突出层:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

18. 添加一些文本,以象征意义,它的颜色#FDDCE3链接,你就会有一些看起来像这样:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

19. 现在我们需要创建一个搜索栏。 用你的钢笔工具,创建一个形状像一个下面的#72A0E5前景。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

20. 使用CTRL+ J来重复你的形状,然后进入“编辑>变换>水平翻转和对齐下面的方式。选择这两个层次,然后右击。 选择合并图层从下拉菜单:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

21. 现在添加下面混合选项到搜索框:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

22. 所有这一切都为搜索框左边是添加一个输入字段与你的圆角矩形工具与5px半径。然后我用从NIXUS图标包一个放大镜图标。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

23. 我们的头部最后一个方面是我们的主网站导航。使用您喜欢的矩形工具,画出一个矩形。 我们的第一个链接“糖果”是#FFFFFF,而其它的链接是#FDDCE3。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

24. 下面我将着重表现点开的链接,我们使用的是一个矩形,颜色不重要,突出是重点:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

25. 现在,在您的标签层,添加以下混合选项给它一个很好的渐变。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

26. 要添加一些额外的细节,比如标签。我们要在顶部切出一个小的块。 使用您的多边形套索工具(L)的,作出选择类似于以下命令,然后选择“选择>逆时针旋转”。 然后击中层图层蒙板图标调色板选项卡上选择与你的层。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

27. 最后一步是要增加一个像我们周围的白色边缘。我们将其设置为柔光,不透明度,然后降低到约62%。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

28. 现在为头部的背景做个风车效果类似以下所示:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

29. 现在添加下面层混合选项到您:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

30. 为了实现我们的糖果包装线,我们要创建一个模式。因此,为了这样做,我们要创建一个新文件的尺寸600 × 600。创建一个新层,并删除你的背景层,使您留下了一个透明的文件。然后添加以下方式(我做我的背景一束黑色的矩形,以便可以看到更好的,但你的将是透明的):

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

31. 然后进入“编辑”>定义模式“,并将其命名条纹。关闭了您的条纹文件,然后返回到您的模板了。CTRL+点击您的糖果背景使之成为选择,然后用你的模式邮票工具来刷上一层上方的新创建的模式:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

32. 改变混合模式为叠加,不透明度和降低至28%和已完成的头会如下所示:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

内容区

33. 内容方面将主要依赖于图像和文本的位置,并保持事情简单。 我们将有一个白色的背景,并使用我们的正文文本的颜色#28140D,为标题#AF3F55,和#我们联系5987CB。

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

页脚

34.最后一步是添加一个脚注。使用您的圆角半径均为15px与矩形工具,使一个形状像在你的内容层以下所示:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

35. 现在添加下面混合选项到新创建的圆角矩形层:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

36. 我接着使用相同的糖果效果来增加条纹的页脚。我改变了混合模式柔光,不透明度,降低至15%的时间。

37. 这一切都在现在是添加一些文本和页脚中的任何图标和您的最终结果将类似于以下内容:

Photoshop网站设计实例;甜蜜糖果店_www.cncms.com整理

思源提供psd源文件下载

上一页  1 2 

Tags:Photoshop 网站设计 实例

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接