When you select an individual layer or a group in Photoshop, you’ll notice an additional button on the Zeplin panel that lets you mark this selected layer/group as an asset.
After marking it as an asset, Zeplin exports all the necessary images with different scales, formats and suffixes, depending on the platform you’re designing for. You don’t even need to think about which sizes you should export them at, just clicking the layer inside Zeplin will show all the necessary assets to developers.
For layer groups, you have the option to ignore its sublayers to avoid exporting unnecessary layer data, keeping your Zeplin screens less cluttered.
☝️This basically adds “-g-” in front of your layer names.
Assets with transparent backgrounds
In a lot of cases, you might need to add paddings around your icons. Let’s say you have 500px ⨉ 500px Bulbasaur but you want to export it as 600px ⨉ 600px, with a transparent background. Here’s the quickest way to accomplish this using a layer mask:
- Draw a rectangle with the rectangle tool (U) — this is the transparent part.
- Set its color to “None” from the properties panel.
- Group these two layers and mark the group as an asset.
Here’s how this should look like, exported to Zeplin:
