免费打造属于自己的店铺公告栏

今天跟大家探讨的是关于装修的问题，虽然模板有千千万万，但它们都真正适合自己的店铺吗？在这里装修不求人淘宝学堂教你免费打造属于自己的店铺公告栏。

首先我们需要的软件是photoshop(也就是PS)和dreamweaver 

1、首先打开PS，依次点击“文件”  ----   “新建”

创建一个 750*750 分辨率为72的文件

2、从网上找一张图片来作为背景，我们店里的整体颜色都是绿色的，所以我找来一张绿色的图片作为背景，快捷键“ctrl+o”导入图片。

3、选择PS左侧面板上的按钮，把原图拖拽到咱们新建的文件中来

4、点击左侧面板的按钮在背景图上托一个框出来（这个框就是以后我们输入文字的公告栏，大小根据自己店铺和背景图的大小定），然后点击右侧面板上的 按钮新建图层， 接着左侧面板选择颜色 。

5、在拖出的那个框中填充颜色，快捷键“alt+delete”

我们还要给这个框描边，方法是：点击鼠标右键，选择描边

进入描边选项

按键盘上的“ctrl+d”把框周围的虚线去掉

6、给这个框加入立体感，点击右侧面板的按钮，选择投影选项

进入投影选项，数据如下

最后效果

7、打字，选择左侧面板的按钮，这个按钮就是一个打字工具，选择后鼠标点击图片任意部分就可以打字了。

字体、大小、颜色 在这里调

如果想让字体有立体感同上，选择右侧面板的，自己可以DIY，试着做一下。

8、我们还需要一个框，同样点击左侧面板的 按钮，右侧面板的新建图层，这里颜色我们选择白色，“alt+delete”填充颜色，然后鼠标右键选择描边 ，这个框是用来放客服旺旺的图标的地方，可根据客服的多少来选择这个框的大小。

进入描边选项

选择颜色

9、给这个图层加一个蒙版，选择右侧面板的按钮。

10、依次选择  渐变工具     渐变颜色

渐变颜色我们选择第一个，左白右黑

按住键盘上的“shift”用鼠标拉一条线，按住“shift”目的是拉的线是直线。

最后的效果

11、从网上找来一张客服图片，从PS中"ctrl+o"导入这张图片

选择左侧面板的按钮，把原图拖拽到自己的文件中

如果大小不一可按一下键盘上的“ctrl+t”鼠标调节大小，大小调节好之后“回车”确认

   

12、左侧面板选择按钮，然后打上字

13、把你的旺旺图标截一下图放在这里，这里的旺旺图标是不会动的，目的是一会切片的时候尺寸不会错

14、再从网上找来一张 收藏本店 ，这个最后加上链接，顾客朋友就可以点击这里收藏你的店铺了。

如果感觉还是比较空，就输入关于店铺介绍的文字

15、选择左侧面板上的按钮，进行切片，切片的时候注意，1.公告栏 2.旺旺图标切成一个一个的3.收藏本店  这3个地方一定要切好，公告栏是我们以后要放文字的地方，旺旺图标使我们最后要把它替换成客服的旺旺代码，方便顾客和我们联系，收藏本店使我们要单独加入链接。

16、存储，依次点击“文件”---“存储为Web所用格式”

点击“save”

临时保存在桌面上吧

存储之后我们得到这两个文件

好了，下一步我们要使用的软件是 “dreamweaver”

1、打开软件，选择“打开”

选择我们刚刚存储的文件

选择“设计”

2、用鼠标点击一下公告栏，记住源文件和尺寸

如上图，这个的源文件是“images/未完成-03.gif” 宽：424  高：425  记住之后按键盘上的“delete”也就是删除键，然后找到背景后边的文件夹图标。

选择刚才PS存储的images

打开之后找到刚刚让你记住的源文件，也就是images/未完成-03.gif点击“确定”

输入尺寸  宽424   高425 ，然后鼠标点击一下其他的图就等于确认了，看是不是被我们删除的图又回来了，只不过它是作为背景回来的，我们可以在上边写字了，写上几个字用来做记号，比如输入“插入内容”

3、旺旺图标也是一样，同样选定第一个旺旺图标，记住源文件和尺寸

删除之后再从背景里边找到被我们删掉的图片，也就是“images/未完成-07.gif” 

替换好之后我们就可以在旺旺图标上打字了，这里你可以打上几个字作为记号，目的就是以后放在淘宝自定义以后我们可以用旺旺代码来替换这两个字，来实现顾客点击这里就可以和我们联系，比如说我们先在这里打上“客服”两个字，等把代码复制到自定义里边我们就可以用旺旺代码来替换“客服”这两个字了，如果不替换这两个字那么它一点用处都没有，有很多网站可以生成旺旺代码，大家可以搜索一下。

4、我们需要把PS存储的另一个文件里边的图片全部都要上传到我们的图片空间，记住不要勾选下边这几项，以免最后乱码。

已经上传到空间了

5、我们从软件中切换到代码

选择需要替换的部分，也就是“images/未完成-x.gif”

从淘宝图片空间复制链接，需要注意一点，替换的时候一定要看准文件名，1就替换1,2就替换2，千万不要替换错了哦，替换的时候尽量采用快捷键“ctrl+c和ctrl+v”来复制粘贴，以免弄错。

OK，替换好了

6、把所有需要替换的全部替换完成之后我们也快大功告成了，复制粘贴到店铺首页的自定义，注意要切换到代码再粘贴哦，旺旺图标一定要记得替换，公告栏里的文字想让它成为自下往上滚动的效果，我们还要从代码做文章，切换到代码在你做记号的那个位置也就是“插入内容”这个地方替换成代码：

<marquee scrollamount="3" direction="up">文字部分替换成你想要让公告栏显示的文字</marquee>

全部搞定之后我们就可以预览一下了，发布之前记得要把你原来的自定义备份一下，避免出问题了没得还原了。