Photoshop CC自动切图与前端CSS代码教程

2016-07-08 06:19:05 来源/作者:艺设网 / 情非得已 己被围观

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

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

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

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

Photoshop CC自动切图与前端CSS代码 Photoshop CC自动切图与前端CSS代码

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

Photoshop CC自动切图与前端CSS代码

常用技巧:

Photoshop CC自动切图与前端CSS代码

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

开启 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。

分享到:0

标签(TAG)

更多精彩内容

  • Photoshop制作科技感十足的水晶艺术字教程Photoshop制作科技感十足的水晶艺
  • Photoshop制作仿水墨画效果的中国风江南水乡意境主题风景图片Photoshop制作仿水墨画效果的中国
  • Photoshop给建筑物风景图片制作成漫画线稿效果教程Photoshop给建筑物风景图片制作成
  • Photoshop移动和缩放工具的使用技巧,提升工作效率Photoshop移动和缩放工具的使用技