快速将PSD特效转化成CSS3代码

2015-01-29阅读(9244)评论(3)牵着狗狗看MM

苏州实时公交查询

这是一个PS插件
css3ps
官网地址:http://css3ps.com/

下载

下载适用于Adobe Photoshop CC 2014
下载适用于Adobe Photoshop CS5, CS6 and CC
下载适用于Adobe Photoshop CS3 and CS4

Photoshop CS5, CS6 and CC的安装方法

  1. 如果Photoshop在运行,那么请关闭
  2. 打开”CSS3Ps.zpx”文件
  3. 点击”Accept” button.
    Adobe Extension Manager - Accept License
  4. 安装完后如下图. 然后就可以运行Photoshop了.
    Adobe Extension Manager - Plugin Installed
  5. 在Photoshop中点击”Window(窗口) -> Extensions(扩展) -> CSS3Ps” .
    Extension menu item in Mac OS
    Extension menu item in Windows
  6. 恭喜!现在你能选择你的层然后把他们转化成CSS了

在Photoshop CS3 and CS4则使用script (脚本)方式

  1. 选择你想要转化的层
    xp-screen-1
  2. 依次选择 “File(文件) -> Scripts(脚本) -> Browse(浏览)…” menu item
    xp-screen-2
  3. 选取”CSS3Ps.jsx” 文件
    xp-screen-3
  4. 脚本将会运行,然后会打开一个附带转化结果的浏览器窗口
    xp-screen-4

PS:此插件能够识别成CSS3的图层是有限制的。例如,渐变CSS3似乎只能使用图层样式的渐变才能识别,投影、描边等都尽量使用fx图层样式。
所以有条件的话,在设计师设计之前,跟设计师打个招呼,尽量保留图层,保留路径,保留参数,尽量使用图层样式,这样会方便些。

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 快速将PSD特效转化成CSS3代码
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏