An Adobe Photoshop plugin


A better way to collect, export and store your design elements in one place


Work on and with PS CC 2014 and up



RESONATOR is an extension for collecting, exporting,
and storing graphical resources for various mobile platforms and the web.


RESONATOR collects all the design elements from all of your project's screens (icons, buttons, UI controls, etc.) into a single Res-Project.psd. Additionally, all of the elements are collected in the densities you need, so you can quickly fix “blurry” graphics and other defects that arise during resizing.

For Pixel Perfect designers!


RESONATOR exports all design elements with file names and a folder structure that are “correct” for developers. And it works for any platform: Android, iOS, Retina Web, and even Windows Phone :-)

Make more happy developers!


RESONATOR stores all the design elements you draw and transfers them  to developers in a single file. This means no more "slices" in separate  files and no more endlessly searching  for them when you need to fix  something.

You'll always know where  everything is!

Collect your design elements

A better way to collect, export and store your design elements in one place.

Mark a layer folder with “~”

Create a new group on Photoshop's layer panel  and put a designer element in it. Mark the folder  by putting a “~” symbol at the beginning of  the group's name.

For example, ~ic_menu_login.

Use a layer with “#”

If you want your element to later be saved in a set size, put it in the current folder with a “#” symbol  at the start of its name.

For example, #mask.

Draw nine-patch

If you want to save your element as .9.png, put special layers named “.content” and “.stretch” in the current folder with “~”. The “.content” layer determines the location of content within the element (the rightmost and bottommost black single-pixel lines); the “.stretch” determines how the element will stretch (the leftmost and topmost black single-pixel lines). Here's a short video that shows an example of how this works.

Learn more about 9.png by reading the Draw 9-Patch Guidelines for Android developers.

Collector: Selected

On Photoshop's layer panel, select one or more folders with a “~” symbol that you want to “collect” into Res-Project.psd and click the “Selected” button in the “COLLECTOR” subsection. RESONATOR will add only the elements you have selected to Res-Project.psd.

If you want to replace an icon in Res-Project.psd, give the same name to a new folder with a “~” symbol and click the “Selected” button. RESONATOR will delete the old icon and replace it with the updated version.

Collector: Everything

To replace all elements marked with the “~” symbol from a source file in the Res-Project.psd, click the “Everything” button.

What is Res-Project.psd?

It's a file where you collect and store all design elements
from all of your project's screens.

Structure of Res-Project.psd

Elements you mark with a “~” symbol and “collect” from source files are arranged in the Res-Project.psd in columns on a color background based on  the selected densities.

You can use the toolbar buttons in the “SAVER” subsection to copy, rename, and delete icons of all densities.


You choose the platform (Android, iOS, Retina Web or Windows Phone) and the densities needed for a slice in the resolution settings. Additionally, settings are saved separately for each Res-Project.psd.

Context-aware background

The color of the background layer is defined automatically from the source file. Thus, the elements always retain the context in which  they are used.

Export your design elements for developers

RESONATOR saves icons from the Res-Project.psd
with the “correct” folder structure and the “correct” names

Use a layer with “#”

RESONATOR “slices” icons into PNGs by cutting transparent pixels along their edges. If you want to save an icon  of a desired size, add a layer with  the “#” symbol at the beginning of its name to the folder with the icon.

For example, #mask.


On the PS layer panel, select one  or more folders with “~” that you want  to save and click the "Selected" button  in the "SAVER" subsection of  the panel. You can also choose  elements for slicing from a folder  with any density. RESONATOR automatically defines folders with  the same name in the Res-Project.psd  for other densities and slices them.

Naming resources

RESONATOR will arrange resource  files using a naming convention and folder structure that is “correct” for developers.

For example, for Android RESONATOR creates subfolders named “drawable-xxhdpi”, “drawable-xhdpi”, etc. and places files in them. For iOS RESONATOR adds the prefix “@2x”  or “@3x” to your names, as needed.

You’re in good company

RESONATOR is beloved around the world

Gabriele Ciufo, IQUII

“Probably the definitive tool to generate #UI assets!  #wantit #resource”

Vadim Sherbakov

“Resonator: A better way to collect, save and keep your design elements in one place.”

Eyal Zuri,

“The best link of the day on Muzli: Resonator  #ui #ux #design”