图层转CSS3 photoshop扩展CSS3Ps插件简介

这篇文章发布于 2013年09月7日,星期六,23:20,归类于 Design相关。 阅读 58619 次, 今日 19 次 11 条评论

 

一、开头不飞点口水不舒服

CSS3的世界已经愈发侵犯我们的世界,so,当下,很多设计师设计的东西都是通过CSS3来实现,而不是想办法弄一张图片,例如,一些渐变效果,投影等。

但是,有时候,我们的渐变可能是斜的,或者说起点不是从边缘开始。对于web重构人员来讲,要准确表达设计师的效果就比较头疼了。因为肉眼显然无法精确识别,现有的些工具大多测量尺寸、间距,获取颜色值之类,无法判断渐变的起止点或者投影的距离以及模糊程度。唯一的办法就是深入PSD文件,寻找效果实现的原始参数,这是一项比较耗费精力与时间的事情。而且,很多设计师并不重视图层的保护以及实现方法的选择,造成参数丢失。总之,出现了新的配合上的难题。

解决之道有两个,一是设计师标注好参数,设计师辛苦;二是重构人员去PSD寻找(前提设计师没有把参数毁尸灭迹),重构辛苦。

不管怎么看,都是比较低效的。

So,很自然的,我们会想到工具,有没有什么玩意可以简化大家的工作呢?

CSS3Ps为一款高质量的photoshop扩展,俗称插件。某种程度上,可以简化上面遇到的问题。

那到底CSS3Ps是何方神圣呢?

二、CSS3Ps的大致介绍

此扩展官方地址:http://css3ps.com/

首页有视频展示,youtube视频,翻墙。优酷上有相关视频,感谢下载上传的这位兄弟Thruth,我借过来用用:

其使用很简单的,安装好扩展,然后选中图层,点击某标志,就会在浏览器中显示对应的CSS3代码了。
首页显示的操作流程

官方有各个版本photoshop的下载,包括最新的photoshop CC. 下载地址:http://css3ps.com/Download/

下载

三、我的使用演示

事非经过不知难,因此,我特定自己尝试了一下:
我目前使用的是CS6, 因此,下载的是下面这个文件(PS3/PS4使用参见官方示意),双击之:
下载后的文件

然后就会出现下面这个:
photoshop扩展安装 张鑫旭-鑫空间-鑫生活

然后下面这个:
photoshop扩展安装中

然后就会下面这样:
接受协议

接受之,然后就会:
安装完成

如上,安装完毕。此时,重启或打开photoshop,点击window(窗口) -> Extension(扩展) -> CSS3Ps 就会出现一个方块区域,见下图右侧:
窗口 扩展

下面变身设计师,画个圆角矩形,搞个渐变投影什么的,选中该图层,然后点击上面那个有CSS3Ps字样的方框区域:
绘图

默认的Chrome就会打开,便秘一段时间后,就会出现下面这个:
CSS3代码呈现

至此,个人适用完毕。

四、评价以及其他

说说个人的看法吧。

看上去使用很方便,但是,对于我个人而言,价值其实有限。为何?效率,点击图层到浏览器中呈现,跨环境了;跨环境无所谓,关键浏览器中的呈现速度慢至极,还不如自己直接查看图层样式参数来得快;呈现慢就算OK,但是,呈现出来的代码私有前缀加全了,很多属性,例如圆角,现在都不需要私有前缀了,最多就需要个-webkit满足低版本移动设备,我需要再额外删除。

我觉得此扩展适用于不懂CSS的设计师。

So,从我自身角度讲,我更希望此扩展的功能是,点击图层,直接在photoshop中直接显示木有私有前缀的代码片段,这才是我想要的;否则,还是显得很复杂。所以,我有自己制作一个扩展的意向。但需要在我了解photoshop CC相关CSS功能之后。

需要注意的
能够识别成CSS3的图层是有限制的。例如,渐变CSS3似乎只能使用图层样式的渐变才能识别,投影、描边等都尽量使用fx图层样式,

图层样式

圆角需要使用圆角矩形工具,而且似乎要保留路径。

这是参数获取所必须的。

因此,需要传达、或者说告诫设计师们,当你们实现一些效果的时候,保留图层,保留路径,保留参数,尽量使用图层样式,对你我都会更好一点。

据传,photoshop cc可以直接导出为CSS3. 但是,目前,我还没有使用过cc, 因此,其中究竟如何我尚未清楚,是否能完全取代CSS3Ps也不能确定。但,目前而言,对于部分群体,CSS3Ps是相当有用的。

您是怎么看的呢?

(本篇完)

分享到:
×


发表评论(目前11 条评论)

  1. 321说道:

    为什么我下载下载之后,双击毫无反应 。

  2. 迷茫妹说道:

    喜欢你对技术的描述方式。
    我用的是CS6,操作步骤跟你一样。
    但是。。。为何我的chrome浏览器毫无反应?
    隔了好久CS6突然来个什么无法把您的数据(之类的)提交到我们的服务器!
    然后它就像挂掉了一样再也木有了反应。。。
    ps: 我的渐变用的是fx图层的,一共就两个简单的圆角按钮

  3. singlexyz说道:

    哈哈哈哈,超爱,赞一个

  4. 秋水天长说道:

    其实我感觉最重要的还是渐变色

  5. 窍门天下说道:

    感觉用处不是很大,一般像圆角,投影啥的参数都比较简单,手写也不费事,主要是一些CSS动画代码有点复杂,但CSS3ps也做不了代码生成

  6. web前端之家说道:

    我下载的这个“Download for Adobe Photoshop CS3 and CS4”怎么是个“CSS3Ps.jsx”文件,擦,咋回事,官网出问题了吗~~

  7. Ken说道:

    photoshop cc已经出来了。强大的css源码展现功能有了。

  8. bluemsn说道:

    恩。这个工具用了快一年了,是挺方便的,缺点,不须是图层样式的效果,大小的话,必须是矢量图,不然就隔屁了。。。记得还有一个工具,是可以帮助前端切图,生成不同尺寸的大小和命名的,方便ios 和安卓的 应用!

  9. 一堵墙说道:

    一些图形还是不能正确转换,而且基于 PS 感觉好奇怪,基于 DW 多好。