这篇文章距离上次修改已过半年,其中的信息可能已经有所发展或是发生改变。

转换为语音并朗读全文 00:00 / 00:00

AtlasCss:一个可以根据你的CSS文档而衍生图像拼合技术的小插件。通过这个插件会生成一个文件,里面包含了所有的图标,运用于CSS Sprites。

使用方法:

⒈下载插件 AtlasCss.zip(汉化版:AtlasCss汉化版
⒉将文件解压到"Your Applications folder"/Adobe Photoshop/Presets/Scripts
20130607105732 ⒊打开 Photoshop
⒋选择 Files>Scripts>AtlasCss(文件>脚本>AtlasCss)
20130607110007604
⒌浏览并选择来源文件夹
⒍选中“启用数据文件导出”创建CSS文件
⒎设置高度、宽度和外边距(图例中,宽度=200 高度= 200 外边距 =5,高宽足够,所以“需要的页数”只有1个)
20130607110639 ⒏使用所选文件夹中的所有图像,并产生一个新的文件
⒐然后裁剪文件删除掉多余的空间
⒑保存文件
20130607111247 ⒒转到来源图片文件夹中,在那里,你会发现文件 sprite.css
⒓它为每个图像创建了一个新的类,它的x和y位置宽度高度
20130607112027

20130607112148
⒔现在,在您的主css文件中,你应该加上CSS Sprites的位置,例如:

.sprite-image { background-image:url(sprite.png); }

⒕最后用一点点的jQuery能够创建悬停和点击效果。


查看演示官方下载本地下载汉化版下载

带符号 * 的表示必填项
  1. JaneCC
    JaneCC

    中文版链接失效,请问能更新一下吗

    回复
    1. 麦田一根葱
      麦田一根葱博主

      已修复 :)

      回复
  2. 董建
    董建

    这个东西很方便实用,赞!

    回复
  3. 麻辣妹妹
    麻辣妹妹

    恭喜恭喜博主,你的右边的百度广告成功挂上去了 :razz:

    回复
  4. 刘荣焕
    刘荣焕

    这个不错 制得一用

    回复
    1. 麦田一根葱
      麦田一根葱博主

      谢谢

      回复
  5. 沫小熙iBlog
    沫小熙iBlog

    PS很强大

    回复
  6. Leniy
    Leniy

    是腾讯那人写的那个么

    回复
    1. 麦田一根葱
      麦田一根葱博主

      不清楚,这是一款老外写的插件。

      回复
  7. 林木木
    林木木

    这个插件方便,正要做个优化可以用来~

    回复
    1. 麦田一根葱
      麦田一根葱博主

      那就收下吧!哈哈

      回复
  8. 黎健雄
    黎健雄

    卧槽。。原来那个CSS是这样来的。
    我还以为是手写的。。

    回复
    1. 麦田一根葱
      麦田一根葱博主

      其实还真是手写的,只是这插件更快捷!

      回复