当前位置:首页 > PS教程 > 网页设计

ps设计淘宝店招图片

  • 2022-12-25 00:44:07
  • 来源/作者:互联网/佚名
  • 己被围观

教大家自己动手制作一个店招。

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

其实你也可以整张图片保存好在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的啦。

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

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条