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

1、photoshop制作一个简单的电子商务网站这次我们使用photoshop制作一个简单的电子商务网站模板,之所以说简单,是由于页面的内容相对较少,所以不会向门户站需要考虑过多的用户体验过程新建一白色背景,大小为760 x 770 px的文件建立一新图层(Shift+Ctrl+Alt+N)为背景图层增加渐变效果:设置前景色#3a6ed3 ,背景色#04005e用渐变工具在背景图层中从上往下拉条渐变线.随后用圆角矩形工具画如下图3个形状,这里我使用不同的颜色只是为了以后说明方便现在我们为白色的形状增加图层样式:渐变颜色设置:设置渐变参数:在图层面板中将绿色形状图层拖动到橙色形状图层之下为绿色的形状

2、图形增加如下图层样式:设置渐变参数:设置渐变参数:为橙色形状图层增加如下图层样式:设置渐变参数:完成后效果图如下:选择矩形工具制作如下图橙色矩形形状:为其应用如下图图层渐变样式效果如下图:Click to enlarge现在我们需要制作一个图案,随后将其应用到此矩形图层中新建一图层,将文件放大1600,使用铅笔工作制作如下图样子编辑自定义图案设置你的图案名字然后返回我们的页面文件新建一图层(Shift+Ctrl+Alt+N),使用矩形选取框在如下图位置画上长条矩形选框:选择油漆桶工具,选择之前制作的图案:填充长条选框,按ctrl+d取消选择:复制这个图层,使用键盘将其移动到如下图位置(内容页面

3、低部):使用橡皮工具擦除部分长度,使其看上去没有原来这么长Click to enlarge新建立一图层,再次使用矩形选取框工具制作如下选框:Click to enlarge填充颜色为#5b5b5b我们为页面增加文字Click to enlarge再为版面加入图片使用圆角矩形工具,图层样式如下:选择混合模式为颜色复制这个形状5次,制作页面效果如下,:然后我制作了个简单的LOGO标志新建立12 x 12 大小的透明背景文件,放大1600 %,使用铅笔工具画如下箭头:移动箭头图层到页面设计中:使用键盘打字 - - ,使用变形工具翻转90度,复制图层制作如下导航效果:新建立一透明背景文件,大小10 x 10 px放大1600%后使用铅笔工具绘制如下形状图案,这里我使用蓝色背景只是为了让你上去更清楚,实际制作中蓝色区域是使用透明背景,你需要画的是白色区域:编辑自定义图案回到我们的页面设计搞中新建立一图层,使用矩形选取工具绘制如下图选区Click to enlarge使用油漆桶工具填充,使用之前制作的图案,设置不透明度为25%为这个图层添加图层蒙版按D与X键,设置黑白渐变,从下往上绘制一条渐变线,结果如下图:我们再为头部增加图片与文字,最后完成页面设计搞如下们再为头部增加图片与文字,最后完成页面设计搞如下