Photoshop CC版让代码设计更容易 PS CC与前端那些事

本文由 小小米 发表于 2014-03-24 来源:太平洋电脑
Photoshop是视觉设计师最强有力的武器之一,同时也为前端开发同学带来很多惊喜。特别是从Photoshop CC版本开始,Photoshop CC版变得越来越有趣。今天笔者就Photoshop CC版中几个新特性给大家介绍一下。

Photoshop是视觉设计师最强有力的武器之一,其实Photoshop也为前端开发同学带来很多惊喜。特别是从Photoshop CC版本开始,Photoshop CC版变得越来越有趣。今天笔者就Photoshop CC版中几个新特性给大家介绍一下。

一、自动切图(含WebP、SVG格式)

前端开发人员经常需要将很多图层切出成独立的图片。Photoshop CC版有了自动切图功能,无需花更多时间来切图了。只需在图层名后添加相应格式后缀(如.png),即可自动输出所需格式的图片。

1、请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态;

2、依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;

试着修改某个图层命名(如iTunes.png),然后检查当前psd文件所在目录下的“文件名-assets”的目录,打开此目录,发现iTunes.png已经躺在里面了。

Photoshop CC版常用技巧:

1、见下图;

[email protected] Retina图片的输出,在图层前添加200%即可,如200% [email protected] ;

3、开启 WebP、SVG 格式的自动输出:新建generator.json 文件,内容如下:

将此配置文件拷贝至: Windows: (Win+R后输入 %USERPROFILE% )目录下,如 C:\Users\xxx Mac OS: $HOME 如“Macintosh HD>Users>xxx”目录下WebP输出暂只支持Mac OS。

二、复制CSS

Photoshop CC终于推出了“复制CSS” 功能。它能让开发人员快速获取形状的CSS代码。其实不少设计师也很想学习CSS,有了这个功能,可以让这些爱学习的设计师熟悉CSS代码与图形的对应关系;

1、右击图层面板上的图层,选择“复制CSS”,或点击菜单“图层->复制CSS”;

2、多个图层的批量获取,请选择多个图层,执行Ctrl+G,将所选图层转为图层组。然后在该组上右击,选择“复制CSS”,即可批量获取CSS代码。

3、智能对象暂不支持“复制CSS”功能,您可以栅格化该图层再来使用。

当前的版本的此功能,包含了很多冗余信息和不太友好的写法,可能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能,您可以下载“PhotoshopCopyCSS ”来增强Photoshop CC自带的“复制 CSS”功能,提升CSS代码的真正采用率;目前的优化有:

  • 自动识别CSS Sprite图片,获取background-position信息;

  • 自动识别是否图标;

  • 优化CSS3渐变、文字、边框、阴影等CSS代码;

  • 优化RGB颜色值成 十六进制颜色;

  • 去除冗余CSS属性,如position, z-index, left, top等。

三、图层管理

前端开发同学接手的psd文档,往往有大量图层,我们需要对其进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图层类型、名称、效果、属性等条件进行快速定位图层。

使用此功能可以很方便定位到当前选定图层,非常适合含有大量图层的psd文档。

另外隔离图层也是个很不错的功能。开启隔离图层功能之后,我们可以通过移动选择工具,点选画布上的内容,找出我们需要的图层将其整理成一个独立的psd文件。

四、WebP插件

WebP是Google为减少数据量、加速网络传输的目的而开发的图片格式。特别适合移动端图片的传输。大大节省带宽,目前只有Google Chrome浏览器对其原生支持。

Photoshop CC的Mac OS版自带输出WebP功能。Windows下您可以下载此插件来输出WebP格式。安装后,可以在Photoshop菜单“文件->另存为”对话框中选择“WebP格式图片”。

五、动作条件

Photoshop CC新增了动作条件,可以根据不同条件执行命令或其他动作。

六、智能参考线/使用图层颜色

这两个功能并不是Photoshop CC的新功能。为什么要在这里说呢,因为它能辅助我们一秒居中对齐、一秒贴边,这个非常实用。另外也建议设计师使用图层颜色来标出改动位置,这样前端开发同学便能快速定位图层。

本文标题:Photoshop CC版让代码设计更容易 PS CC与前端那些事
本文地址:http://www.chncomic.com/info/201403/38002.html
看完这篇文章有何感觉?已经有0人表态
0


蛋疼
0


恶心
0


期待
0


难过
0


碉堡
0


关注
0


酱油
0


愤怒