Adobe generator syntax ‘cheatsheet’

Design3 min readView on GitHub

I’m always looking up the Adobe generator syntax and yet I never bookmark it. I feel like it would be a valuable resource to clearly show. Something I think the Adobe documentation lacks. This could be the reason I haven’t bookmarked it.

Overview

Each image is made up of dimensions, filename and quality.

See the Pen raZgNL by Steve (@stevemckinney) on CodePen.

Dimensions

It’s necessary to have a space after the dimensions. Don’t put a space between the dimensions where width and height are specified. px is assumed if no measurement is specified. To have the image width or height calculated automatically, use a ‘?’ for the value. Like so ?x1200 name.jpg or 1200x? name.jpg.

File quality

The quality can’t have a space between it. Quality can be a number 8 or percentage 80%. For filetypes like png you can specify png-8, png-32, etc.

1x, 2x and beyond

filename.jpg, 200% filename@2x.jpg, 300% filename@3x.jpg

Comma separate your list

This is a comma separated list of values. Using percentage as the size.

SVG

filename.svg

Take care

I’ve found simpler shapes work for the SVG export. A common use I think would be icon fonts. Make sure you convert these layers to a shape, otherwise it will try make it into an SVG using the font.


If you found this article useful, why not support the upkeep of this website?

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.

Also, as a subscriber I can provide critique on your designs—send something through after you confirm your subscription.