网店模板制作与设计全流程图.docx

网店模板制作与设计全流程图.docx

《网店模板制作与设计全流程图.docx》由会员分享，可在线阅读，更多相关《网店模板制作与设计全流程图.docx（9页珍藏版）》请在冰点文库上搜索。

网店模板制作与设计全流程图

制作模版这里面有很多复杂的问题的，作为启蒙性的教程，我这里只介绍最简单的方法和形式，其他的大家可以在此基础上自己开发、研究，如有问题欢迎赐教。

   准备工具和素材：

Photoshop7.0和Frontpage2003和相应图片（也可以自己创作）

   下面进入正题吧1.打开Photoshop，点击上方的“文件—新建”，新建一800*1200的画布，这里把底色设置为白色。

   2.然后点击“文件—打开”，找到自己想要用于模版上的图片，打开（大家可以事先把图片的大小调整好，以适合于模版使用）。

   接着，先在图片上按下“Ctrl+A”（全选），注意这时候图片四周会出现一个虚线框，然后再按下"Ctrl+C"（复制）。

   3.然后回到我们最开始建立的那800*1200的画布上，按下“Ctrl+V”（粘贴），图片就被粘贴到画布上了。

如果位置不合适的话，可以点击左边的“移动工具”，将图案拖动到合适的位置上。

   4.可以根据图案对模版做些装饰，比如我这里面就用椭圆工具画出几个圆圈，并用与图案相近的蓝色填充。

然后再点击椭圆工具，画一个大一点的椭圆出来，用来放置店铺公告。

可以把“不透明度”设置为60%，这样看起来效果更好些。

   5.接下来在模版上写上自己的店铺名称。

点击左边的“文字工具”，在店铺公告的上方写上店铺名称，注意可以在窗口上方的地方调整字体、字号以及文字颜色。

然后可以点击右边的“添加图层样式”，根据个人喜好选择诸如阴影、描边、外发光等效果，使文字更好看。

   6.可以对模版进行些装饰，最简单的办法就是选择“自定形状工具”，画出一些喜欢的图形来。

 然后用“文字工具”把要做的容写上，比如“逛逛小店”、“店铺介绍”、“信用评价”和“收藏店铺”等。

   7.下边就要来处理模版的主体部分了。

首先我们用一个方框把主体部分框起来。

点击“自定形状工具”，在窗口上方“形状”右边的下箭头上点一下，选一个合适的形状，这里我用的是CheckBox，用这个形状把模版余下的部分框起来。

注意边框的颜色是在窗口上部的地方进行选择的。

   8.然后就是往上添加各项需要的容啦~~首先在右边的“图层”中选中“背景”层（就是我们最开始建立的那个画布），然后可以用“自定形状工具”画个小花什么的，或者贴上自己喜欢的小图片也可以。

我这里用的是“自定形状工具”中的Blob2。

   9.再选择“文字工具”在图案旁边写上“宝贝展示”，和前边提到的一样，文字的相关属性在窗口上部的地方设置。

可以用“移动工具”调整一下文字的位置。

   10.同样方法，写出“宝贝描述”、“买家必读”、“邮资说明”、“联系掌柜”、“推荐宝贝”等容。

注意：

不要担心每项之间的空白部分过窄，因为模版做好之后，这些地方都是可伸缩的，所以放多少容都没问题，不用担心的~~

   11.可以在模版上加上你的信息容，如水印啦、制作者啦什么的。

   12.然后就是很艰巨的切片任务啦!

选择切片工具，把所有要添加文字或者图片、的地方都单独切出来。

切片这一过程很重要，刚开始的时候大家可能会不熟练，总有这样那样的问题（最后成品模版如果出现断裂的话，通常问题都是出在切片这一关）。

别灰心，多试几次，多琢磨琢磨，多练练，肯定会好的!

   另外：

我这里介绍的只是最简单的模版，就是主体部分只需上下切，而不用左右切成两部分的。

实际中，如果大家想要做左右分块的模版（比如左边放产品图片、介绍，右边放宝贝分类、推荐这样的），切片是很需要技巧的。

由于表达能力有限，我在这里说不明白具体要注意的问题。

不过大家只要多练习多思考，一定可以摸索出规律的。

加油哦~~

   13.下一步就是点击“文件—保存为Web所用格式”，将模版存为HTML格式的文件（实际上是一个HTML文件和一个图象文件夹）。

  Photoshop的工作完成喽，大家辛苦了！

喝杯茶，好戏还在后头