有爱,有技术,有你^_^)y
╱人◕‿‿◕人╲订下契约(注册新用户)

合作站点账号登陆

QQ登录

只需一步,快速开始

快捷导航
查看: 5435|回复: 56
收起左侧

[网页设计] 【搬运】Photoshop设计一个糖果店网站教程

[复制链接]

该用户从未签到

92

主题

118

好友

2万

积分

第一章

积分
22227
发表于 2012-3-10 12:26:30 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有账号?╱人◕‿‿◕人╲订下契约(注册新用户)

x
本帖最后由 绯色の胖子 于 2015-2-24 08:46 编辑

最终结果

                               
登录/注册后可看大图
教程开始

1。 打开Photoshop和创建一个新文档的尺寸1200 × 1000。


                               
登录/注册后可看大图


制作背景

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

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

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


                               
登录/注册后可看大图


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

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


                               
登录/注册后可看大图


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

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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


标志

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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


                               
登录/注册后可看大图


                               
登录/注册后可看大图


14. 在字体上加入阴影:


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


内容区

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


                               
登录/注册后可看大图


页脚

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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


                               
登录/注册后可看大图


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

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

                               
登录/注册后可看大图




评分

参与人数 1宅币 +30 贡献 +4 收起 理由
苏南0 + 30 + 4 →_→手滑

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~
回复

使用道具 举报

该用户从未签到

1

主题

5

好友

1968

积分

Continue

积分
1968
发表于 2012-3-17 03:25:58 | 显示全部楼层
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

74

主题

290

好友

3万

积分

第二章

麵包是銀子家的乃們這些魂淡淡不准跟窩搶><!

积分
33777
发表于 2012-3-17 05:44:48 | 显示全部楼层
啊啊>3<这个我也见到了~

点评

=3=  发表于 2012-3-17 06:03
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

23

主题

108

好友

3万

积分

第二章

积分
35058
发表于 2012-3-17 10:50:22 | 显示全部楼层
好吧。。。我只是来看看的说。。。
似真似假似仙,如痴如梦如癫,仲有佳丽千万,不及红颜一半,许我三千笔墨,绘你绝世容颜。
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

29

好友

6192

积分

序章

积分
6192
发表于 2012-4-6 16:50:46 | 显示全部楼层
刚好学到了用PS设计网页
多谢楼主~
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

14

好友

670

积分

New Game

积分
670
发表于 2012-4-8 19:18:23 | 显示全部楼层
我就看看……居然是英文版……
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 2 天

连续签到: 1 天

[LV.1]初来乍到

6

主题

44

好友

3851

积分

序章

积分
3851
发表于 2012-4-22 10:22:42 | 显示全部楼层
= =不会用英文版ps的娃子你们伤不起~
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

3

好友

2060

积分

Continue

积分
2060
发表于 2012-5-23 18:54:32 | 显示全部楼层
高端
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

10

主题

26

好友

4816

积分

序章

积分
4816
发表于 2012-5-27 17:42:39 | 显示全部楼层
学习了 好强大的样子#7125!
窝每次都是配色苦手啊,各种效果一到实际运用的时候就想不起来#7149!
好羡慕能设计出漂亮效果的大手们#7103!
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

3

好友

1302

积分

Continue

积分
1302
发表于 2012-6-1 23:19:24 | 显示全部楼层
英文版的。好纠结啊~
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

9

主题

13

好友

3248

积分

序章

积分
3248
发表于 2012-6-13 12:46:31 | 显示全部楼层
能告诉我那个风车效果怎么做出来的吗?我找不到这个
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

6

主题

33

好友

1万

积分

第一章

积分
14048
发表于 2012-6-22 18:27:11 | 显示全部楼层
想来看看。。
天文地理---->メ大象蚂蚁---->メ四书五经---->メ▍没有蜡笔的小新---->メ。。。
回复 支持 反对

使用道具 举报

该用户从未签到

54

主题

289

好友

12万

积分

最终章

路西法

积分
120819
发表于 2012-6-24 12:25:35 | 显示全部楼层
我说这个题目怎么这么熟悉呢

点评

╮( ̄▽ ̄")╭  发表于 2012-6-24 14:35
海天龙战血玄幻,披发长歌览大荒。
回复 支持 反对

使用道具 举报

该用户从未签到

18

主题

37

好友

9058

积分

序章

积分
9058
发表于 2012-8-10 17:17:09 | 显示全部楼层
居然是英文版的PS。。。莫非是很多年前天朝人还不能用汉化的出品......
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

59

主题

77

好友

2万

积分

第一章

积分
26226
发表于 2012-8-16 18:28:38 | 显示全部楼层
果斷把這個當做PS入門教程來看- -
請叫我 某R
回复 支持 反对

使用道具 举报

本版积分规则

小黑屋|手机版|技术宅(基宅) ( 粤ICP备18082987号-1 | 浙公网安备 33010902001746号 )

GMT+8, 2024-4-29 10:17 , Processed in 0.404528 second(s), 49 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表