Photoshop CC 与前端那些事

banner

Photoshop CC 与前端那些事

鸽子

Photoshop 是视觉设计师最强有力的武器之一,其实 Photoshop 也为前端开发同学带来很多惊喜。特别是从 Photoshop CC 版本开始,它变得越来越有趣。今天笔者就其中几个新特性给大家介绍一下。如果您也有更多新的发现,请在下方留言与大家进行讨论。

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

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

  • 请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态;
  • 依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;

prefrence

generator-0

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

generator

常用技巧:

  1. generator-2
  2. @2x Retina 图片的输出,在图层前添加 200% 即可,如 200% logo@2x.png ;
  3. 开启 WebP、SVG 格式的自动输出: 新建 generator.json 文件,内容如下:
    {
      "generator-assets":  {
        "svg-enabled": true,
        "webp-enabled": true
      }
    }

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

复制 CSS

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

ps-css3

  • 右击图层面板上的图层,选择“复制 CSS”,或点击菜单“图层->复制 CSS”;
  • 多个图层的批量获取,请选择多个图层,执行 Ctrl+G,将所选图层转为图层组。然后在该组上右击,选择“复制 CSS”,即可批量获取 CSS 代码。
  • 智能对象暂不支持“复制 CSS”功能,您可以栅格化该图层再来使用。

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

* 自动识别 CSS Sprite 图片,获取 background-position 信息;
* 自动识别是否图标;
* 优化 CSS3 渐变、文字、边框、阴影等 CSS 代码;
* 优化 RGB 颜色值成 十六进制颜色;
* 去除冗余 CSS 属性,如 position, z-index, left, top 等。

您也可以反馈更好的建议,让这个功能真正为大家所用。

图层管理

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

filter filter-0

filter-3 filter-4

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

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

seperator

WebP 插件

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

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

WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win

动作条件

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

if

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

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

guide-line

color

请更新至 Photoshop CC 14.2

参考资料:

WebP
What’s New in Photoshop CC
Introducing Adobe Generator for Photoshop CC

Tags: , , ,

鸽子
鸽子
上一遍
下一遍
QQ空间 腾讯微博 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. Ling says:

    看来要换CC用了

  2. (>_ says:

    试了下,生成图片那个有点鸡肋啊。比如我图标30pxX30px,然后想输出40pxX40px留出10px的透明区域的话,就不行了。

  3. alyssa says:

    cc太强大

  4. mqx says:

    如果要添加透明区域的话,可以添加图层蒙版。。那样透明区域也会输出。。另外gif文件格式也是支持的。。

  5. Joan says:

    太高端,不会 PS 压力大

  6. 单炒饭 says:

    CC太卡了,用不起。生成CSS真的是一个鸡肋的功能。csser们还要自己多写为好。

  7. JustIng says:

    PhotoshopCopyCSS这个的下载地址在哪里?能麻烦放出来一下么

  8. hsinglin says:

    赞鸽子:)
    好像ps cc 已经整合了css3ps进去了。
    切图那个也可以用cutandsliceme来做。这两个都是在cc之前实现的。

  9. 大葛 says:

    确实不错,提高了效率

  10. 国产XP says:

    支持IE6浏览器吗?

  11. faycheng says:

    PhotoshopCopyCSS做个mac版的吧

  12. 子曰去哪 says:

    被标题吸引了
    内容也很展,看来我把如此多娇的cc给毁了。。。

  13. , says:

    PS的功能太强大了

  14. 一巴掌 says:

    增效工具里木要有生成器怎么破~~

  15. 梦想家 says:

    只用来简单处理下图片,没想到还有这些~要去学习学习体现它的价值

  16. binggg says:

    @mqx
    现在遇到了类似的问题,但是不知道如何弄这个蒙版,求指教

  17. jup says:

    PHOTOSHOP CC中菜单“编辑->首选项->增效工具”中没有“生成器”一项。。难道是版本问题?

  18. kalends says:

    PhotoshopCopyCSS 下载 安装提示未找到photoshop安装目录 CC是14.2的,求解答

  19. 猫哥 says:

    哇,居然还有这么多隐藏功能,加300%前缀就可以兼容iPhone 6 plus了吧^_^ 感谢鸽子大神分享图片~

  20. PNG-24的后缀为logo.png32 PNG-24的位深度是32,如设定后缀为png24,位深度为24,则显示不透明的·

  21. 小鱼 says:

    为什么照着“开启 WebP、SVG 格式的自动输出: 新建 generator.json 文件,内容如下”
    这段话之后去做,但还是无法开启ps cc里的这个功能,版本是14.2.
    只能生成png格式的文件,电脑是mac,求解= =

  22. 木木鱼 says:

    自动输出svg不成功哦。。。

  23. 木木鱼 says:

    可以输出,但是用ai打不开,不知道是否可以直接使用。。。
    ai打开是代码。

  24. csdudu says:

    关于PhotoshopCopyCSS,其实基本功能我都实现了,但请问这两个功能具体是如何使用:
    * 自动识别 CSS Sprite 图片,获取 background-position 信息;
    * 自动识别是否图标;

    在网上和git没都搜索了,没发现具体的方法,请提示。

  25. 鞁BIDesign says:

    纠正:含Alpha通道的png图层命名为.png32

  26. amy-chan says:

    window系统:文件放到C:\Users\Administrator,然后重启ps,就ok啦。记得要重启。。。然后图层文件名改成xxx.svg ,妥妥的~

  27. semochai says:

    photoshop cc2015直接改图层名后缀,出SVG成功~