您现在的位置： 学淘宝 >> 文章中心 >> 淘宝装修 >> 正文

五分钟搞定PS+Imageready作店铺分类

作者：佚名    文章来源：不详    点击数：    更新时间：2007-8-4

给大家介绍的是如何使用PS+Image ready制作店铺分类小图标，步骤如下：
1.打开photoshop，新建一个文件，这里的高和宽我分别选的是30象素和130象素。注意在淘宝里面的店铺分类栏高度和宽度大家都要合理的安排好，我看见一些店铺分类栏宽度过大而造成整个网页版面的挤压变形。这样的视觉效果就反而不好了，大家一定要注意哦！分类栏的宽度以130-180象素内合适，高度以25-50象素内为宜啦！当然你也可以插点漂亮的小图，不过宽度方面一定要注意哦。。

2.选择圆角矩形工具（圆角半径可以选10px）在新建图层上宽的1/5处向后拖动到整个层，如图切记要选择实心的圆角矩形（如标注1处）点击那个按钮！

3.然后可以选择一些你喜欢的dd放在图层的第2层，你喜欢中意什么就放什么，我这里放个蝴蝶结做例子啦！唯一要注意的是选择的东西和我们上一步填充的颜色要有对比。如果是一个色系的也要有深浅的变化，这样做的分类栏才更为醒目！
在这里就可以看出，刚刚我建立透明图层的用意，是因为我们一会要输出的是gif格式的图片文件，我想让它有透明的效果，这样和淘宝自带的店铺风格更加融合~

4.接着选文字工具，就是photoshop工具栏上带T的那个按钮，然后在你做的文件的适当
位置点击一下，当形成一个字体的光标后，你就可以在上面打出你分类的文字啦~HOHO
在这里我选择的是玫红颜色，字体是黑体。最好不用笔画过粗或过细的字体哦，因为由于过粗，字体的体积就大，在分类栏比较狭小的空间就写不下太多的字啦，字体过细，买家有可能看不清楚造成反效果~

5.接下来我们在复制一个相同的文字图层为做gif动画备用。选择上一步的文字图层，向下直接拖动到复制图层按钮上（如图标注1），然后在改变新的文字图层的颜色，可以再选择文字工具，把帮助查询几个字选择后，在颜色选择区里选择合适的颜色（最好是对比较大的）。这样颜色就换成功啦！当然也可以按快捷键（ALT+DELETE）然后我们点它图层旁边的小眼睛，将它暂时隐藏起来~

6.终于我们开始动画制作啦，平时用photoshop制图的时候，发现在这个按钮没呢~（标注1）
点击它后，我们的photoshop就开启了它自带的另外一个专做gif动画的工具----------
（Adobe ImageReady）.它的功能虽然没有（Firework）强大，但做店铺分类栏的时候是比较方便和快捷的哦~画面右下角的面板是动画面板，我们一般是在那里进行操作的，首先，我们要改变动画桢的速度，在箭头的下拉菜单内（这里我选择1 sec）

7.这样我们就制作好第1桢动化啦，然后制作第2桢的时候，点击新建层按钮。再将玫红色文字图层隐藏起来，让白色文字图层显现出来，再改动次桢的速度（这里我选择0.2sec），点击播放按钮看一遍吧，是不是很有成就感呢~
最后就提到保存了，步骤是这样的，点击 文件（File）→输出（Saveoptimized as）后缀名选择（.gif）改下名字确定就保存成功啦！如果你还想制作多个分类条目，只要在ImageReady里面把文字的字体改动就可以啦，不用重复以前的步骤咯。在这里我把（帮助&查询改成格格坞设计空间）大家看看效果呢~