render.ly

boosting

designer & developer workflow

The flow

Designer & developer workflow boosted

Render.ly lets you add variants to screens, manage assets, detailed design specs and in the end automatically exports all of them with a one click. Our technology is smart enough to export only those elements that were changed. Thanks to the latest Adobe Generator technology we are the fastest plugin out there and the only one that works seamlessly in the background.

Innovative idea

Screens with variants

Create a group for each variant and put “+” in front. Render.ly will automatically export as many screens as variants you have. All with same header, footer and other shared layers around variants. Each top level group is treated as a separate screen so you can build entire app/website in one .psd

Speed Up Export Speed Up Export Speed Up Export

boost your workflow

sign up to Render.ly now

By clicking to sign up, you are agreeing to the Render.ly Terms of Service.

How it works

Learn the basics

Treat each top-level group as a separate screen.

Use prefixes to organize your design.

Use masks to control the size of the screens.

Basics

"+" Create multiple variants

Adding “+” prefix will create a screen variant, which will be exported as a separate screen.

e.g. Render.ly will generate: home.jpg, home-place.jpg and home-questions.jpg.

Variants can share common layers and groups.

Variant

“-” Exclude specified elements

Adding “-” will exclude a layer or a group from all screens and variants.

Hint: Useful when you have a bunch of elements “for later” or some example images, assets, etc.

Exclude

“*” Multiply specified elements

Add “*” prefix to include a layer or a group into all variants.

Element with “*” will be merged with all variants on the same level and deeper.

At the same time, it will be ignored during the export not to create a separate screen

containing only this layer (which would happen without asterisk).

e.g. you want to merge a “status-bar-blue” with all screens, but you don’t need it as a separate screen

Multiply

“btn” buttons with states

Add “btn” prefix to create a button.

Add different states by naming inner layers or groups like :hover, :pressed or :gocrazy

Each button state will be exported as a separate .png, .gif

Buttons

“ico” for all the icons

Add “ico” prefix to create an icon, it can be either a group or a single layer.

All icons will be exported as a transparent .png

Hint: It’s a good idea to keep icons as vectors, as of next release we will convert them into fonts!

Icons

“img” for all the images

Add “img” prefix to create a raster image. By default it will be exported as .jpg.

You can change the format by adding .png in the end of the layer.

Hint: It’s useful for exporting placeholder images, backgrounds, etc.

Images

boost your workflow

sign up to Render.ly now

By clicking to sign up, you are agreeing to
the Render.ly Terms of Service.

Downloading extension & example.psd

Your download should start immediately, if not, please use this link.
It would be awesome if you helped us to spread the word!

We sent you the extension & example.psd

Check your inbox and install the extension. Have fun.
It would be awesome if you helped us to spread the word!