Viewed: 3523
Design

Adobe generator syntax ‘cheatsheet’

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.

Next to read

Using Photoshop linked smart objects for more modular designs

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner every time.

Join my list and I’ll send you the template and new tutorials to help you design beautiful websites (currently monthly).