Photoshop: Fast image exports for the web

In Photoshop menu enable: Menu > File > Generate > Image Assets

Name layers you want to export as separate images in the format:

Scale name.typeQuality > 200% background@2.jpg5

The images are saved in a subfolder at the original file\’s location named originalFileName-assets.

Only tagged layers named correctly are generated. Invisible layers, even if tagged are not. Use unique names… of course. ^}^

///

Naming ref

/ mostly copied from the specs on github /

Formats:

.png – Defaults to png 32. Supported flavours include: .png8, .png24, .png32
.jpg – The default quality is 9 (or 90%). Options include: .jpg(1-10), .jpg(1-100%)
.gif – Basic alpha transparency, no options

Scaling

____% – Percentage-based scaling
____ x ____ – Dimension-based scaling defaults to pixels, other units include: px, in, cm, mm. ? = *
____, ____ – Commas create multiple files from a single group / layer: each tag must be properly formatted with a valid file extension

Save in a specific subfolder

folder name/file name.ext

Default asset specifications

Create an empty layer and name with default + default settings tags.

Examples:

default hi-res/, will save all images in \’hi-res\’ subfolder.
default hi-res/@2x, will save all images in \’hi-res\’ subfolder adding the suffix \’@2x\’ to each of them.
default 50% lo-res/, will save at 50% in subfolder \’low-res\’.
default hi-res/@2x + 50% lo-res/, will save in both subfolders

General examples

200% gorilla.png
300 x 200 disproportionate.jpg or 50in x 10in gargantuan.png or ?x150 thumbail.jpg5
50% little/kooky.png, 1000% big/awesome.jpg
42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif

///

Using masks to Crop

Layers and groups with masks are being cropped. Those groups can be nested. The largest mask inside because of the transparencies! Be aware that the inner layer or group mask will not crop the outer groups. You will have to duplicate the layer if you have overlapping masks.

For more information, you can check the adobe-photoshop/github.

///

Configuration Options & WebP

There is an extensive list of setting you can check at the adobe-photoshop/github. The most notable is the support for WebP! The best part is that John Peterson did an opensource / free / extension to set up those options > Generator Config Extension.

Thx