ps设计淘宝店招图片

2022-12-26 18:35:34 来源/作者: / 己有:34人学习过

把想切的地方用那个标尺拉好。然后用切片工具切成如下图:

其实你也可以整张图片保存好在DW里面做热点。但是我的店招要弄搜索栏。有时候有个地方要改,所以我还是比较喜欢切片。而且旗舰店的要做关注的链接。 切片后,导航也可以把一些按钮换成GIF的,这样的店招就可以一闪一闪的(详情搜索淘宝店铺 爱予宝 的那个店招)。

如果怕切不好,请下载FW来切片。 PS或者FW切片后,如果切片复杂,都是会有个【分隔符】的图片。这个图片是没有像素的图片,目的是稳定表格,这个分隔符需要在代码里面加进去的。如果你用div来做的布局,就不用这个分隔符。(注:div是一种代码的层)

淘宝美工:店招

切好片之后按 ctrl+shift+alt+s 保存 要把图片和html都保存下来 如下图

淘宝美工:店招

然后继续在PS里面把店招恢复回1920*150的大小。在店招中间部分加一层白色(如下图),这个步骤是制作店招的背景的,目的是减少背景的KB数(大小)。然后把这个图片整张保存下来就OK了。

淘宝美工:店招

下面简单说说DW大家就会懂的了,DW很简单的。 打开DW,把刚刚切片出来的那个html直接拉到DW里面。然后大家看下图:

淘宝美工:店招

淘宝美工:店招

完成上面的步骤之后,其实就基本完成的了。但是很多人这样做完后放到店招上面还是乱的。为啥呢?我来教大家一招,首先在DW的代码模式下,用光标选定 <img 然后点击编辑 点击查找和替换 如下图

淘宝美工:店招

最后就是把制作好的背景也传上去就OK的啦。

制作教程不容易。希望大家多多关注我。有神马不懂的尽管留言。谢谢。