×

见证奇迹:在Photoshop中一键生成CSS3代码!

作者:admin2017.11.08来源:Web前端之家浏览:1866评论:0
关键词:photoshopCSSPs
微信公众号

微信公众号

ban.jpg

闲余之时,突悟文一篇,忽有所得,与君共析之。

不知道大家是否记得先前我分享的一篇文章:你不知道的秘密之Web前端开发制图神器Cutterman,经常关注本网站的童鞋应该是看过的,那篇文章主要讲叙设计师和Web前端开发工程师在处理一些图形和icon的photoshop插件使用方法,便于提高我们在项目中的工作效率,没看过的赶紧去学习下。

今天分享的内容也是跟photoshop相关,主要分析在Photoshop中如何将图层的属性一键转化成CSS3代码,可能有些童鞋有点惊讶,这也可以?莫惊慌,见证奇迹的时刻到了,接下来带你进入“CSS3Ps“的“梦幻世界”。

CSS3Ps介绍

CSS3Ps是基于Photoshop的一款插件,转化的代码支持现在流行的css、scss,sass。它对于Photoshop不同的版本有相对应的版本,如下:

Download for Adobe Photoshop CC 2015.
Download for Adobe Photoshop CC 2014.
Download for Adobe Photoshop CS5, CS6 and CC.
Download for Adobe Photoshop CS3 and CS4.

大家可以根据自己使用的Photoshop版本下载。这里要提醒下大家,下载下来的文件格式有.zxp和jsx压缩包格式的,接下来我们一起了解下安装和使用方法:

.zxp格式安装和使用方法

1、如果您是下载的是CS5, CS6,CC and CC2014,解压后的文件格式是.zxp,按照提示操作吧。首先我们先关闭PS。然后运行下载好的.zxp文件。

Adobe Extension Manager - Accept License

Adobe Extension Manager - Plugin Installed

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

窗口 扩展

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

绘图

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

CSS3代码呈现

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

.jsx格式的使用方法

其实上面的只是.zxp的介绍,在官网上如果我们选择第三个版本“Download for Adobe Photoshop CS3 and CS4”,发现下载下来的是“CSS3Ps_CS3_CS4.jsx”文件,按照上面的流程用不了,有些童鞋就蛋疼了;莫急莫急。其实原理一样的,跟着一起看下操作吧:

1、下载好CSS3Ps_CS3_CS4.jsx格式的版本后,我们打开PS,然后选择”文件“>“脚本”>“浏览”,选中我们刚才下载的CSS3Ps_CS3_CS4.jsx格式文件。

QQ图片20130914142133.jpg

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

QQ图片20130914142428.jpg

两种方法同一个效果而已,只是PS版本不同而带来的操作效率而已。

压缩包版本的使用方法

上面两种方法是针对CC2015以下版本的,如果您用的是CC2015版本的PS,对应下载下来的是绿色的压缩包,不用安装,只用解压,然后把文件放到对应的目录就可以了,操作如下:

1、关闭PS,解压压缩包;

2、复制CSS3Ps文件夹,粘贴到这个目录下:C:\Program Files\Common Files\Adobe\CEP\extensions\,这里有些童鞋会找不到CEP目录,不用担心,你可以尝试下这个目录:C:\Program Files(X86)\Common Files\Adobe\CEP\extensions\;

3、开启PS,打开"Window(窗口)" → "Extensions(扩展)" → "CSS3Ps"。

就可以看到CSS3Ps的窗口,如下图:

图片.png

具体怎么玩,跟.zxp格式的操作方法一样。

说明:先前我用的是CS4-6,后面更新到CC2015后,发现还可以用CS4的.jsx的方法,大家可以尝试下,说明这几个版本可以通用,当然还是建议大家应用对应的版本,避免出现BUG吧。至于CC2015更高的版本还没用过压缩包版本,如果有童鞋测试可以的话,可以留言分享下。

转化后的格式

通过PS的图层属性转化出来的代码,CSS3Ps提供了三种格式,你可以在页面的右下角找到,分别是css、scss,sass。这个是比较实用的,大家根据自己项目的需求选择应用。

注意事项

金无足赤,人无完人,CSS3Ps虽好,也是有缺点的,如果设计师在给图层添加效果的时候没有选择“混合属性”,直接在图层里应用的,这时候CSS3Ps貌似不能用了。

图片.png

只有像上图那样单独给图层添加混合属性的时候才能用哟,这个要跟设计师沟通好。

还有一点必须说明下,CSS3Ps不是万能的,目前支持的属性如下图:

QQ截图20171108113946.jpg

我们看情况使用,不过在平时项目中的效果基本都是可以搞定的,除了一些特殊的,比如浮雕,纹理。

总结

每天一小步,成功一大步。如有问题,可以加入群一起来讨论:295431592。



温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/photoshopCSS3PSMethod.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    谢谢楼主。。。。。。。。...

  • weblft

    表示不想加班,但是很难!!!...

  • 前端菜鸟

    也不全是我总结的哟,只是学习,大部分是来自大神的杰作。...

  • admin

    感觉不像前端菜鸟,学术很专啊,加油!...

  • admin

    可以的,底部有申请连接的。...

  • BudgetVM优惠码

    朋友交换链接吗...

  • 问我

    我...

  • admin

    是的,很难,可以笔记下来,便于查阅。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero