之前讲过海报拼版和如何用代码装修店面。今天我就简单说一下店面的简单设计和装修。

还是那句话，新手想看，大神请绕道。

不用多说，直接打开盒子，打开PS，按CTRL+N，新建一个文档，大小950*150像素，分辨率72dpi。如果高度为150像素，会覆盖系统自带的导航栏，后面装修的时候会有说明。当然，店铺设计有很多种，这是简单的排版方式之一。想好看，就好好学设计，加油。

选择矩形工具(U)，然后在屏幕上用鼠标点击，会弹出一个对话框，输入950像素和30像素。这里，30像素的高度是商店招牌系统自带的导航条的高度。

把你的店的品牌或名称放在上面，加上一个小标语，然后在自定义形状(U)里放一个心形。再画一个圆角矩形，上面写着:关注我们。至于心形怎么找，圆角矩形的弧度怎么掌握，可以去百度或者留言问。这里就不多说了。

右边画一个长方形输入文字:存储或储存像我们这样的词，在长方形上划一个小笔画。数字

然后就是导航栏上的分类。大致分类包括:首页、所有宝贝、XX依旧新、畅销推荐等。，接着是你的产品的分类。比如外套，连衣裙，打底裤，西装，毛衣，裤子.....这是需要自己整理的具体物品(所有要上架的品类，请提前在店铺后台建立相应的品类，并对商品进行分类)。

中间有一些空。加一些优惠券就行了。当然，你也可以添加产品图纸。我不太喜欢加产品。如果觉得乱，就加优惠券。不加什么的话，有的处女座老板会说:你在这干嘛空，加我的产品……那个……LOGO比较大。

老板，够了。简单的店招已经设计好了，下一步就是保存上传到你的图片空房间。也可以在这里做一个动态图，用时间轴创建一个2帧以上的动态图。

选择第二帧并移动要移动的位置。比如暖冬依旧新，满减优惠。选择暖冬还新的文字，按数字键5，这样这个文字的透明度就可以快速调整到50%(0-9自行测试)，这样第一帧字体透明度100%，第二帧字体透明度50%，会有由亮到暗的变化，然后优惠券在第一帧上移，第二帧下移。然后调整旁边护理的透明度，和暖冬是一样的。最终效果如下，虽然有点低，但意在教你如何做动态店铺招数。

保存，ask-另存为Web使用的格式，快捷键:Shift+Ctrl+Ait+S，在弹出的页面右上角选择GIF格式(动态图)，其他默认就可以了。如下图

保存后新建一个1920*150像素的文档，然后使用矩形工具创建一个1920*30的矩形，填充与店牌相同的颜色。然后将矩形移动到底部，按Shift+Ctrl+Ait+S保存一张JPG图片。这是页眉的背景图片。

打开一个可以在线转换代码的网站，比如工作助手(现在是某设计)，找一个通用的全屏热点生成工具。

将我们的店招图片上传到您网店的图片空房间(建议在图片空房间设置相应的文件夹以便后期管理)。上传后，将鼠标放在店牌图片上会有四个选项显示，选择第二个选项:复制链接。如下图

将复制的链接粘贴到热点生成工具网站的相应位置。如图所示。

然后用鼠标在图片上点击左键，画出需要添加的热点。图。

然后，可以复制每个热点需要跳转到相应热点的链接。具体来说，点击绘制的热点框，右边会弹出热点属性栏，然后将需要跳转的链接复制到属性框的链接项。

比如店铺收藏:打开自己店铺的首页，鼠标悬停在自己店铺的名称上会显示店铺信息，右下角有一个收藏店铺，鼠标悬停在收藏店铺字样上，右键点击复制链接地址，然后粘贴到热点网站页面的热点链接位置。链接请到后台复制你为分类创建的页面，首页是自己店铺的URL链接。其他链接在百度上就找不到了，这里就不多说了。

所有热点落定后，右上角有生成的代码。单击生成代码。复制代码

打开店铺装修，在店铺位置双击打开编辑模式，勾选自定义。单击代码模式复制刚刚生成的代码。在下面输入身高150。默认为120，120高度，显示系统自带导航。如果不需要自己设计导航，设置店招的时候可以做120的高度。或者这里的身高是默认的120。

这样店铺招聘就完成了80%。因为还有一个页面背景没有设置。点击装饰页最左侧的页眉，在页眉背景色显示出来之前将其移除。选择关闭页面下边距，点击替换页眉背景图，选择我们之前做的1920*150的背景图。不要平铺在下面并应用于所有页面。

这样就可以得到一个简单的店铺装修，预览效果，点击每个热点是否正确，最后选择发布。

好了，今天的教程结束了。如果你有什么不明白的，请在下面留言。如果我看到了，我会回复。如果我没看到，我很抱歉。请找到度娘。下一期我们要讲什么？我还没决定...吼吼吼~