⚠️ Zeplin currently only works for Photoshop CC 2015 and up, make sure you have a supported version installed.

Installing the plugin

The text was updated successfully, but these errors were encountered. Here's a guide on how to export your Photoshop designs to Zeplin.Thanks to Designmodo for the wonderful 'Slides' Photoshop resource: http://designmodo.com/sl. Adobe Photoshop - you will also have to run Photoshop to prepare and import design files Figma - you’re good to go with just a browser To be able to export designs to Zeplin, for all design formats apart from Figma, you need to download the Zeplin desktop app, which installs respective graphics editor plugins.

When you launch Zeplin's Windows app, the Photoshop plugin should be installed automatically and you should see the Zeplin plugin in Photoshop. If the plugin is not visible, you can install it from Zeplin's menu up top: “Help > Install Photoshop Plugin”

• Zeplin is a perfect place to have an up-to-date repository for pixel-perfect comps which anyone can see and comment on. Everybody is loving to work with Zeplin:) AJ M.
• When you launch Zeplin's Windows app, the Photoshop plugin should be installed automatically and you should see the Zeplin plugin in Photoshop. If the plugin is not visible, you can install it from Zeplin's menu up top: “Help Install Photoshop Plugin” Did you try to install via the menu and didn’t work?

Did you try to install via the menu and didn’t work?

If installing from the menu doesn't work, you can try installing the plugin manually. This requires two different components to be installed, the plugin and the panel.

To install the plugin:

• Cpp for mac. Download the plugin from here.

• Unzip it and copy the folder called io.zeplin.photoshop-plugin.

• Paste it under Photoshop’s Plug-insGenerator folder.

And finally, the panel:

• Download the panel from here.

• Unzip it and copy the folder called io.zeplin.photoshop-panel.

• Press Win+R, type %APPDATA%AdobeCEPextensions , and press enter. (If the CEP folder doesn't exist, you can create it manually.)

• Paste it to the revealed explorer window.

Now when you restart Photoshop, you should see the Zeplin plugin in the menu up top: “Window > Extensions > Zeplin”

Related articles:

Zeplin Photoshop

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. Versions for mac key. 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:

Zeplin Photoshop Plugin

• Draw a rectangle with the rectangle tool (U) — this is the transparent part.

• Set its color to “None” from the properties panel. Microsoft office for mac app store.

• Group these two layers and mark the group as an asset.

Zeplin Plugin For Photoshop

Here’s how this should look like, exported to Zeplin:

Zeppelin To Photoshop Convert

Related articles: