CSS3Ps:ps图层转CSS3代码之神器

 ,  ,  ,  , 

CSS3Ps是Photoshop的一个免费云插件,用来把图层转换为CSS3样式。这个插件解决了把一张图片转换为CSS样式时颜色、名称、大小等属性的对应问题。这是一个精巧、快速的插件。你仅需要获取一份副本并把这个插件放进CSS编辑区里。

0715223yJ

近期又做了个微信上手机触屏版的项目, 完工后总结了一些经验,无意中发现Photoshop里一些渐变、投影、内阴影的效果转化成CSS3如此之简单,那就是神器CSS3Ps插件。让我眼前一 亮啊。好啦,不卖关子了,进入正题,下面是我翻译CSS3Ps插件官网一篇介绍CSS3Ps:

首先我们得下载此插件,狠狠的点击一下:CSS3Ps,他们有三个版本:

  • Download for Adobe Photoshop CC
  • Download for Adobe Photoshop CS5 and CS6
  • Download for Adobe Photoshop CS3 and CS4

分别针对不同PS版本的,前两个版本下载的是CSS3Ps.zpx文件,第三个是CSS3Ps.jsx文件,下面分别介绍下其安装和使用方法。

一、CSS3Ps.zpx安装和使用方法

1、首先我们先关闭PS。然后运行下载好的CSS3Ps.zpx文件。

1397456872414

1397456872272

2、安装完毕后,我们重新打开PS,选择window(窗口) -> Extension(扩展) -> CSS3Ps,就会出现一个方块区域,见下图右下侧:

1397456872774

3、然后你可以新建图层设计几个渐变,投影等效果的按钮,点击上面那个有CSS3Ps字样的方框区域,如下图:

1397456872282

4、就会在默认谷歌浏览器新开一个页面就可以看到CSS3代码啦,如下图:

1397456872288

是不是很神奇呢,这样我们重构设计师的设计稿的时候方便了很多呢,不用去查看图层的各个效果了。虽然方便,但建议新手需要太依赖它,转化后,你要分析代码的含义所在,这样才会学到东西嘛。

官方网站:http://css3ps.com/

1 收藏

资源整理者简介:卢伟

设计师、极客爱好者 个人主页 · 贡献了320个资源 · 5 ·    


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer