您的位置: 首页 > 软件教程 > Photoshop CC与前端的那些事

Photoshop CC与前端的那些事

9.0分
出处:isux.tencent 时间:2014-03-17

您可能感兴趣的话题: Photoshop  

核心提示:前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能,无需花更多时间来切图了。

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

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

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

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

Photoshop CC与前端的那些事

Photoshop CC与前端的那些事

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

Photoshop CC与前端的那些事

  常用技巧:

Photoshop CC与前端的那些事

  @2x Retina 图片的输出,在图层前添加 200% 即可,如 200% logo@2x.png ;

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

  {

  "generator-assets": {

  "svg-enabled": true,

  "webp-enabled": true

  }

  }

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

  复制 CSS

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

Photoshop CC与前端的那些事

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

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

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

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

网友评论

精品软件课程
更多 >
photoshop教程让你从入门到精通,从新... [详细]
快播播放器(Qvod Player)是一款基... [详细]
Word是由Microsoft公司出版的文字... [详细]
《植物大战僵尸》是一款极富策略性的小游戏,可... [详细]
Excel是office的重要组成部分。多特... [详细]