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

显示全部楼层 · 2023-3-10 04:25:19

[导读]这个Photoshop网页设计教程将和大家一起设计一个甜蜜的糖果店网站，这个设计包含有创造性的背景和标志，色彩丰富、充满童趣。
　　这个Photoshop网页设计教程将和大家一起设计一个甜蜜的糖果店网站，这个设计包含有创造性的背景和标志，色彩丰富、充满童趣。

131250H9432620-F4109.jpg (19.75 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250H9432620-F4109.jpg
　　最终完成效果如下。

131250H950b10-G5T0.jpg (394.48 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250H950b10-G5T0.jpg
　　相关如下。
　　风车笔刷、包、字体包、心形标志

131250H9A5440-H2224.png (6.25 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250H9A5440-H2224.png
　　教程开始
　　1。打开Photoshop，创建一个新文档，尺寸1200 × 1000像素。

131250Ha04630-I4405.jpg (89.23 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250Ha04630-I4405.jpg
　　制作背景
　　2. 第一个方面，我们将开始的是背景。使用您的油漆桶工具(G)的填充#FD6E8A你的背景层。
　　3. 我们希望创造一个圆点图案，我们可以添加到我们的背景。要做到这一点，我们需要创建一个新文档的尺寸45 × 53。
　　4. 创建一个新的透明层和删除你的背景层。接下来添加椭圆工具按以下方式两个圆圈。我用椭圆选取框。

131250Hb1ZZ-JcP.jpg (44.13 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250Hb1ZZ-JcP.jpg
　　5. 转到“编辑”>定义图案“，然后插入您的圆点图案名称的名称。然后可以关闭了这个文件，并返回到您的模板，我们将使用我们的新创建的格局。
　　6. 在你的图层调色板创建一个新的空白图层，并将其命名点。使用您的图案邮票(S)和发现在下拉菜单中的圆点刷。然后继续用大刷子刷软，直到你有结果类似于以下内容：

131250Hc04G0-KW56.jpg (288.75 KB, 下载次数: 0, 售价: 4 金钱)

老师傅 · 2023-3-10 05:19:20

[导读]这个Photoshop网页设计教程将和大家一起设计一个甜蜜的糖果店网站，这个设计包含有创造性的背景和标志，色彩丰富、充满童趣。

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

131250I051F60-P9450.jpg (31.69 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I051F60-P9450.jpg
　　13. 把字添加下面的混合选项：

131250I059D50-Q3C7.jpg (107.58 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I059D50-Q3C7.jpg

131250I0H1E0-R1435.jpg (96.12 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I0H1E0-R1435.jpg

131250I0R2320-S4C0.jpg (109.18 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I0R2320-S4C0.jpg
　　14. 在字体上加入阴影：

131250I09320P-T3349.jpg (32.57 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I09320P-T3349.jpg
　　15. 使用您的圆角矩形工具(U)与10px半径，和一个#BC3D56前景，使一个矩形，它类似于以下内容：

131250I104330-U9595.jpg (25.22 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 04:25 上传

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

131250I11553F-VN61.jpg (25.18 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I11553F-VN61.jpg
　　17. 改变混合模式为柔光在这一层，然后降低透明度为38%。现在添加到您的下列混合选项突出层：

131250I124360-WMJ.jpg (101.11 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I124360-WMJ.jpg

131250I13402F-XLK.jpg (109.54 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I13402F-XLK.jpg
　　18. 添加一些文本，以象征意义，它的颜色#FDDCE3链接，你就会有一些看起来像这样：

131250I1453510-Y4009.jpg (32.33 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I1453510-Y4009.jpg
　　19. 现在我们需要创建一个搜索栏。用你的工具，创建一个形状像一个下面的#72A0E5前景。

131250I153MP-Z2602.jpg (49.04 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I153MP-Z2602.jpg
　　20. 使用CTRL+ J来重复你的形状，然后进入“编辑>变换>水平翻转和对齐下面的方式。选择这两个层次，然后右击。选择合并图层从下拉菜单：

131250I1621H0-91T45.jpg (50.1 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I1621H0-91T45.jpg
　　21. 现在添加下面混合选项到搜索框：

131250I1G0M0-925c5.jpg (102.04 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I1G0M0-925c5.jpg
　　22. 所有这一切都为搜索框左边是添加一个输入字段与你的圆角矩形工具与5px半径。然后我用从NIXUS图标包一个放大镜。

131250I1OMP-933T2.jpg (36 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I1OMP-933T2.jpg
　　23. 我们的头部最后一个方面是我们的主网站导航。使用您喜欢的矩形工具，画出一个矩形。我们的第一个链接“糖果”是#FFFFFF，而其它的链接是#FDDCE3。

131250I1YR30-94b35.jpg (76.98 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I1YR30-94b35.jpg
　　24. 下面我将着重表现点开的链接，我们使用的是一个矩形，颜色不重要，突出是重点：

131250I200O20-955224.jpg (52.82 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I200O20-955224.jpg
　　25. 现在，在您的标签层，添加以下混合选项给它一个很好的渐变。

131250I2125160-962564.jpg (95.83 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I2125160-962564.jpg

131250I224920-a50D.jpg (113.08 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

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

131250I23IM0-b1X9.jpg (29.26 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I23IM0-b1X9.jpg
　　27. 最后一步是要增加一个像我们周围的白色边缘。我们将其设置为柔光，不透明度，然后降低到约62%。

131250I24KB0-c1C3.jpg (26.88 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 04:25 上传

点击文件名下载附件
131250I24KB0-c1C3.jpg
　　28. 现在为头部的背景做个风车效果类似以下所示：

131250I2563540-10063c.jpg (75.84 KB, 下载次数: 0, 售价: 2 金钱)

老师傅 · 2023-3-10 06:07:03

[导读]这个Photoshop网页设计教程将和大家一起设计一个甜蜜的糖果店网站，这个设计包含有创造性的背景和标志，色彩丰富、充满童趣。

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

131250I32G630-10E221.jpg (309.31 KB, 下载次数: 0, 售价: 1 金钱)

[ps] Photoshop网站设计实例：甜蜜糖果店

浏览过的版块