• Welcome to Journal web site.

我是 UI设计师

让设计传递下去

没有了
Prev

CSS3PS插件的使用教程详解

Data: 2014-03-11 23:52:58Form: JournalClick: 691

      现在HTML5趋向愈加热门,有更多的网站都希望用更少的图片来加快访问速度,那就意味着网站上的图片将用代码来实现,纯手写图片的工作量太大,于是乎就诞生了一款新的插件来帮助我们提高效率。


1、什么是CSS3Ps插件?

      CSS3Ps是一个基于云端的Photoshop插件,用来将Ps中带有样式的图层转成用CSS3实现的方式,外观一致,快速。您可以选择规则的形状图层和矩形的普通图层进行转换,图层样式中:内阴影,内发光,投影,外发光,渐变,描边等转换成CSS的box-shadow属性。可以在浏览器中看到的结果样式,拷贝代码使用。它适用于PsCS3及更高版本。

      最重要的是,它是完全免费的!你可以到下面的网址找到它并下载。(安装我就不管了)

http://css3ps.com/Download /

CSS3PS插件

插件安装以后可以从窗口菜单里把它拖出来,方便使用。

 

2、如果你已经安装好了,下面跟兔芷一起体验一下吧~

CSS3PS插件

 

这个插件只能实现规则形状的转换,圆形,矩形,圆角矩形,只有一个角是圆角也可以,红圈代表兔子的形状是不能变成Css代码的

CSS3PS插件

 

我们选中按钮图层,看到它一共有三个样式效果.然后点击这个神奇的按钮~!

等几秒钟.我们就得到了一串Css代码~!拷贝给开发大侠就行了~嘿~

 

CSS3PS插件

我们来对比一下效果.矮油~还不错哦~撒花撒花~

CSS3PS插件

 

3、试了之后是不是觉得很神奇~?这样就可以省掉到很多时间和精力了~

但是也不是万能,很多要注意的,下面总结了一些,跟大家分享

 

①.形状要是规则的圆形,矩形,圆角矩形,只有一个角是圆角也可以,其他形状目前还不

可正常转换。

CSS3PS插件

②.如果你把形状棚格化了,那么不好意思,哪怕你画的是圆形,你也只能得到大方块。

CSS3PS插件

③.渐变的角度要注意.如果不是垂直和水平.其他的角度可能会角度不对。

CSS3PS插件

④.描边效果只能用单色.不能用渐变色和图案。

CSS3PS插件

⑤.这个插件目前只支持Photoshop CS3以及更高的版本,精简版的软件可能会安装不上。

目前就这几项吧,还有很多在等着你亲自去发现~

由以上所述,在设计的时候要考虑转CSS是否能实现,可以多试试,转了之后看效果。

如果你是做网页的同学,简直是如虎添翼

轻松~效率~省脑子~一起来试试吧~

Name:
<提交>