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

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

平面设计学院
200

个作品

65

人关注

2

人点评

更新时间:2022-04-11 07:46:20
发布时间:24小时内
来源:会员/上传
正文内容详情
photoshop 是视觉设计师最强有力的武器之一,其实 Photoshop 也为前端开发同学带来很多惊喜。特别是从 Photoshop CC 版本开始,它变得越来越有趣。今天笔者就其中几个新特性给大家介绍一下。如果您也有更多新的发现,请在下方留言与大家进行讨论。

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

前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能,无需花更多时间来切图了。只需在图层名后添加相应格式后缀(如.png),即可自动输出所需格式的图片。
  • 请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态;
  • 依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;
Photoshop CC自动切图与前端CSS代码_NO.01 Photoshop CC自动切图与前端CSS代码_NO.02
试着修改某个图层命名(如 iTunes.png),然后检查当前 psd 文件所在目录下的“文件名-assets” 的目录,打开此目录,发现 iTunes.png 已经躺在里面了。
Photoshop CC自动切图与前端CSS代码_NO.03

常用技巧:

Photoshop CC自动切图与前端CSS代码_NO.04
@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。

为您推荐以下设计知识

暂无点评

查看更多评论
微信沟通 电话咨询