xml地图|网站地图|网站标签 [设为首页] [加入收藏]

在Photoshop中一键生成CSS3代码,黄金分割工具分享

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

推荐给大家一款免费PS扩展插件CSS3Ps,灰常好用,可以将Photoshop图层特效等效果直接转为CSS3代码,无需为了再浏览网页查询css3代码的写法,无需手动查看ps图层特殊的数据来编写css3代码,大大提升编写代码的效率,走过路过的同学不过错过哈!Come on,直接进去正题吧!!!

无论是设计或是摄影构图,合理使用黄金比例可以让你的作品更美观,但是要计算黄金比计算是很麻烦的,所以今天设计达人网小编为大家分享Photoshop黄金分割工具,使用它可以轻易画出黄金螺旋,黄金三角,三分法,对角线等比例。

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

下图为Photoshop CS5图层的混合选项菜单。

图片 1

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

图片 2 

Divine Proportions Toolkit使用方法

CSS3Ps介绍

图片 3

这个使用是很简单的,可以直接点击对应的黄金比例按钮就能自动生成,又或者用选区工具画出一个区域然后再点击面板按钮生成即可。

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

有了CSS3Ps,上面的特效可以直接导出CSS3代码~

黄金矩形(水平和垂直)

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.

以webkit浏览器为主的css3代码示例:

图片 4

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

圆角边框:-webkit-border-radius: 5px;    模块阴影:-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.45);    模块内阴影:-webkit-box-shadow: inset 0 20px rgba(255,255,255,.55);    文本阴影:text-shadow: 3px 4px 5px rgba(4,0,0,.75);    文本内阴影:text-shadow: inset 3px 4px 5px rgba(0,0,0,.75);    模块内发光:-webkit-box-shadow:inset 0 0 17px rgba(255,255,190,.41);    文本内发光:text-shadow: inset 0 0 5px rgba(249,247,189,.75);    线性渐变:-webkit-linear-gradient(bottom, rgba(222,0,120,.74), rgba(255,150,0,.74));

黄金分割线

.zxp格式安装和使用方法

这些效果,只要一键即可转化为css3代码,操作起来十分简单...

图片 5

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

 图片 6

黄金螺旋(斐波那契螺旋线)

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

设计稿示例PSD源文件:

图片 7

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

下载

三分法

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

安装CSS3PS官方视频教程:

图片 8

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

**CSS3PS下载地址:**

图片 9

.jsx格式的使用方法

针对Adobe Photoshop CS5和CS6的版本下载

V形

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

针对Adobe Photoshop CS3和CS4的版本下载

图片 10

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

针对Photoshop CS5和CS6版本的安装过程(来至官方教程):

黄金三角形

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

1.如果Adobe Photoshop的运行,将其关闭。

图片 11

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

2.下载“CSS3Ps.zpx”文件。

交叉对角线

压缩包版本的使用方法

3.在Adobe Extension Manager中点击“Accept”按钮。

图片 12

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

图片 13

对角线

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

4.当安装程序完成后,你会看到以下的画面。现在你可以运行Adobe Photoshop。

图片 14

2、复制CSS3Ps文件夹,粘贴到这个目录下:C:Program FilesCommon FilesAdobeCEPextensions,这里有些童鞋会找不到CEP目录,不用担心,你可以尝试下这个目录:C:Program FilesCommon FilesAdobeCEPextensions;

图片 15

安装Divine Proportions Toolkit扩展工具

3、开启PS,打开"Window" → "Extensions" → "CSS3Ps"。

5.在Adobe Photoshop中选中“窗口”- >“扩展” - >“ CSS3Ps”菜单项。

下载divine_proportions_toolkit_1_0_4.zip,点击这里进入下载页。

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

图片 16   图片 17

解压后,选择对应版本进行安装,安装文件名为Divine Proportions Toolkit.zxp,因为是通过Adobe扩展管理器安装的,有的绿色版可能没这个管理器,请去Adobe官网下载。重启Photoshop,选择菜单窗口-扩展功能-Divine Proportions Toolkit,此时你应该看到这工具的面板了。

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

6.恭喜!现在,您可以选择您的层并转换他们CSS了。

解压后我们只看到Photoshop CS5和CS6两个版本,但我在CC上用CS6的安装文件也能正常,如下图:

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

在Photoshop CS3和CS4中使用脚本(来至官方教程)**

图片 18

转化后的格式

1.选择你要转换的层

PHOTOSHOP CS5的面板是不一样的,如下图:

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

图片 19

图片 20

注意事项

2.选择“文件” - >“脚本” - >“浏览...” 菜单项

本PS扩展小编只测试了Photoshop CS6、Photoshop CC(非2014)两个版,使用均正常,不过官方作者说CC版本会有些脚本不兼容,但我没发现呢?

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

图片 21

另外给大家附上黄金比的详细介绍及计算工具,或许也有用到的地方:

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

3.选择“CSS3Ps.jsx”文件

PS工具下载

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

图片 22

兼容性:Photoshop CS5 | CS6 | CC (CC版本部分脚本不兼容,使用CS6的zxp安装)

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

4.该脚本将运行并打开一个浏览器窗口的转换结果

下载地址::

总结

图片 23

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

 


本文由必威发布于Web前端,转载请注明出处:在Photoshop中一键生成CSS3代码,黄金分割工具分享