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

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

 2010-07-06 08:24:50 来源:WEB开发网   
核心提示:这个photoshop网页设计教程将和大家一起设计一个甜蜜的糖果店网站,这个设计包含有创造性的背景和标志,Photoshop网站设计实例:甜蜜糖果店,色彩丰富、充满童趣,文章末尾提供psd源文件下载,突出是重点:25. 现在,在您的标签层,最终完成效果如下,相关素材下载如下

这个photoshop网页设计教程将和大家一起设计一个甜蜜的糖果店网站,这个设计包含有创造性的背景和标志,色彩丰富、充满童趣。文章末尾提供psd源文件下载。

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

最终完成效果如下。

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

相关素材下载如下。

风车笔刷、图标包、字体包、心形标志

  教程开始

1。 打开Photoshop,创建一个新文档,尺寸1200 × 1000像素。

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

制作背景

2. 第一个方面,我们将开始的是背景。 使用您的油漆桶工具(G)的填充#FD6E8A你的背景层。

3. 我们希望创造一个圆点图案,我们可以添加到我们的背景。 要做到这一点,我们需要创建一个新文档的尺寸45 × 53。

4. 创建一个新的透明层和删除你的背景层。接下来添加椭圆工具按以下方式两个圆圈。我用椭圆选取框。

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

5. 转到“编辑”>定义图案“,然后插入您的圆点图案名称的名称。 然后可以关闭了这个文件,并返回到您的模板,我们将使用我们的新创建的格局。

6. 在你的图层调色板创建一个新的空白图层,并将其命名点。 使用您的图案邮票(S)和发现在下拉菜单中的圆点刷。 然后继续用大刷子刷软,直到你有结果类似于以下内容:

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

7.然后,降低你的点层的不透明度约2%。 这将保持在非常微妙的背景。

8. 现在使用椭圆工具,创建一个圆圈,像下面的样子:

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

9. 然后,我们要用我们的钢笔工具(P)来创建一个看起来像下面的顶部形状:

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

10. 做完上一步,选择这两个层,然后右键单击并选择合并到一个层,把一层他们。降低你的层不透明度19%左右。然后,我们要重复两次CTRL+ j,这一层 以下列方式移动你的形状。让你的第二个副本24%不透明度,然后让你的第三个42%。

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

11. 最后,我们将增加触摸到我们的背景是,增加了风车效果。 我们将使用从刷一刷这个包 。随后设置颜色#FD6E8A前景,放置在它下面的方式。我不透明度降低至约22%。

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. 现在,在您的标签层,添加以下混合选项给它一个很好的渐变。

1 2  下一页

Tags:Photoshop 网站设计 实例

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