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!
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.
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.
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.
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.
To replace all elements marked with the “~” symbol from a source file in the Res-Project.psd, click the “Everything” button.
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.
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.
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.
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.
“Probably the definitive tool to generate #UI assets! http://resonator.cc/ #wantit #resource”
“Resonator: A better way to collect, save and keep your design elements in one place.”
“The best link of the day on Muzli: Resonator http://resonator.cc #ui #ux #design”