Photoshop open beta, now!
We’ve been alpha testing Zeplin’s Photoshop plugin for a while now. It’s time to release the beta to the masses! 🍸
For the ones who are not familiar, a quick introduction: Zeplin is an app that helps UI designers and front-end developers work together efficiently by generating specs, assets and style guides from designs, that are tailored to platform needs. To learn more, check out zeplin.io.
The open beta is available on the Mac app and the Windows app.
All about artboards
Artboards are a nifty feature Adobe released recently, focused solely on UI designers, letting them iterate fast and stay organized. So we — of course — wanted to make use of them! When exported, each artboard in your Photoshop file becomes a screen in Zeplin that teammates can inspect and collaborate on. As artboards are introduced in CC 2015 though, that’s the only supported version at the moment.
How do I get it?
You probably already have it, if you’re on the latest version of the desktop app! If you’re new, register here, or download the app here.
When launched, the Mac app automatically installs the plugin to your Photoshop (only if CC 2015 and up). 🔮 Restart your Photoshop after launching Zeplin — if it was already open — and from the menu up top: Window > Extensions > Zeplin
Exporting designs to Zeplin
When you select any layer inside an artboard (using the selection tool, “V”) the Zeplin panel will display a shiny big button to start the export process.
You can either export artboards one by one or export multiple artboards at once by dragging and selecting multiple layers, like so:
If you haven’t worked with artboards yet, it’s incredibly easy to convert a group to an artboard by simply right-clicking it on the Layers panel and selecting “Artboard from Group…”.
Here’s how it all works under the hood: When you click the shiny big button the plugin exports the layer data and the images, launches the Zeplin app which then asks you to select a project and starts the upload.
Setting up assets
When you select an individual layer or a group, you’ll notice an additional button on the panel that lets you mark the 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 list all the necessary assets to developers.
For layer groups, you also have the option to ignore its sublayers to avoid exporting unnecessary layer data, keeping your Zeplin screens less cluttered.
Assets with transparent backgrounds
In a lot of cases, you might need to add paddings around your icons as well. Let’s say you have 500x500 px Bulbasaur but you want to export it as 600x600px, 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 it looks like in Zeplin:
If you want to keep some groups together as a single layer, you can also check the ‘Ignore sublayers of the group’ option from the Zeplin panel.
We have a long way to go but we’re incredibly excited and looking forward to hearing what you all think — ping us at support@zeplin.io!
👋
P.S: As this is technically still a beta, please remember use it at your own risk!
Big thanks to Oz Pinhas for the iOS GUI and to Designmodo for the templates used in this post.
