photoshop制作一个简单的电子商务网站.docx

photoshop制作一个简单的电子商务网站.docx

《photoshop制作一个简单的电子商务网站.docx》由会员分享，可在线阅读，更多相关《photoshop制作一个简单的电子商务网站.docx（14页珍藏版）》请在冰豆网上搜索。

photoshop制作一个简单的电子商务网站

这次我们使用photoshop制作一个简单的电子商务网站模板,之所以说简单,是由于页面的内容相对较少,所以不会向门户站需要考虑过多的用户体验过程

新建一白色背景,大小为760x770px的文件

建立一新图层（Shift+Ctrl+Alt+N）

为背景图层增加渐变效果:

设置前景色#3a6ed3,背景色#04005e

用渐变工具在背景图层中从上往下拉条渐变线.

随后用"圆角矩形工具"画如下图3个形状,这里我使用不同的颜色只是为了以后说明方便

现在我们为白色的形状增加图层样式:

渐变颜色设置:

设置渐变参数:

在图层面板中将绿色形状图层拖动到橙色形状图层之下

为绿色的形状图形增加如下图层样式:

设置渐变参数:

设置渐变参数:

为橙色形状图层增加如下图层样式:

设置渐变参数:

完成后效果图如下:

选择"矩形工具"制作如下图橙色矩形形状:

为其应用如下图图层渐变样式 

效果如下图:

Clicktoenlarge

现在我们需要制作一个图案,随后将其应用到此矩形图层中

新建一图层,将文件放大1600^,使用铅笔工作制作如下图样子

编辑>自定义图案

设置你的图案名字

然后返回我们的页面文件

新建一图层（Shift+Ctrl+Alt+N）,使用"矩形选取框"在如下图位置画上长条矩形选框:

选择油漆桶工具,选择之前制作的图案:

填充长条选框,按ctrl+d取消选择:

复制这个图层,使用键盘将其移动到如下图位置（内容页面低部）:

使用橡皮工具擦除部分长度,使其看上去没有原来这么长

Clicktoenlarge

新建立一图层,再次使用"矩形选取框工具"制作如下选框:

Clicktoenlarge

填充颜色为#5b5b5b

我们为页面增加文字

Clicktoenlarge

再为版面加入图片

使用圆角矩形工具,图层样式如下:

选择混合模式为颜色

复制这个形状5次,制作页面效果如下,:

然后我制作了个简单的LOGO标志

新建立12x12大小的透明背景文件,放大1600%,使用铅笔工具画如下箭头:

移动箭头图层到页面设计中:

使用键盘打字"------",使用变形工具翻转90度,复制图层制作如下导航效果:

新建立一透明背景文件,大小10x10px

放大1600%后使用铅笔工具绘制如下形状图案,这里我使用蓝色背景只是为了让你上去更清楚,实际制作中蓝色区域是使用透明背景,你需要画的是白色区域:

编辑>自定义图案

回到我们的页面设计搞中

新建立一图层,使用"矩形选取工具"绘制如下图选区

Clicktoenlarge

使用油漆桶工具填充,使用之前制作的图案,设置不透明度为25%

为这个图层添加图层蒙版

按"D"与"X"键,设置黑白渐变,从下往上绘制一条渐变线,结果如下图:

我们再为头部增加图片与文字,最后完成页面设计搞如下

们再为头部增加图片与文字,最后完成页面设计搞如下