Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

Workflows

Generate image assets from layer names in Paint by Zaweba

Name a layer logo.png or hero@2x.png and Paint by Zaweba exports it to an assets folder on every save. How to name layers for sizes, quality and folders.

Generate image assets from layer names in Paint by Zaweba

If you design screens, websites or game graphics, you probably export the same layers again every time you change them. File > Generate > Image Assets in Paint by Zaweba turns that chore into something that just happens. You name layers like file names, and Paint by Zaweba exports them to a folder next to the document and refreshes them every time you save.

How the naming works

The layer name is the instruction. A layer called logo.png is exported as a PNG called logo.png. A layer called banner.jpg80 is exported as a JPEG at quality 80. Put a scale in front, as in 200% hero@2x.png, and the layer is exported at double size under that name, which is how you make sharp images for high density screens. Put a size in front, as in 120x80 thumb.png, and it comes out at exactly those pixel dimensions. Add a folder, as in icons/home.webp, and the file lands in a subfolder as WebP.

All of them go into a document-assets folder beside your document. Because the names describe the outputs, anyone opening the file can see what will be produced without opening a dialog.

Why it saves so much time

The real gain is the refresh on every save. Change the colour of a button, press save, and the button image in the assets folder is already updated. If a developer's project points at that folder, or you copy it across regularly, the latest graphics are always there. You stop forgetting to export one of twenty icons after a late change, because you never export them by hand.

It also keeps a design file honest. When the outputs are defined in the layer names, the document becomes the single source for its assets.

Setting up a document

Put each asset on its own layer, or in a group if it is made of several layers. Name it with the file name you want, including the extension. Add a scale or size in front where you need more than one version, for instance a normal and a @2x copy of the same element. Use folder prefixes to keep icons, backgrounds and photos apart.

Then switch Generate > Image Assets on and save. Look in the document-assets folder to confirm everything arrived as expected.

Things to watch

Names must be exact. A missing extension or a typo means the layer is treated as an ordinary layer. If an asset doesn't appear, the layer name is the first thing to check.

Quality and format belong in the name. If an image looks too compressed, raise the number after the extension, as in jpg90, rather than looking for a dialog setting.

Keep source sizes generous. A layer designed small and exported at 200% will look soft. Design at the largest size needed and let smaller versions scale down.

How it fits

Generate Image Assets is the automatic member of the export family in Paint by Zaweba. Export As is the hands-on version, good for one-off sets of sizes. Slices cut a single flat design into pieces with an HTML page. Save for Web squeezes one picture to the smallest file. When your work is an evolving design that feeds a project, assets from layer names is usually the one that saves the most time.