Need to transform design to code? Don't hardcode it, Avocode it!
See how
August 3, 2016

Can't decide whether design for Retina or higher? Here is a resolution

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

So you have this design and you want people to see it as crisp as their screen allows. The basic thinking would be, let's just design for every screen resolution. That works but it's a wee bit too time-consuming.

“Okay smart guy, then what should I do?”

When people open your app or your website in the browser, they never open a PSD or Sketch file, do they? They open the finished interface, lines of code describing colors, sizes, styles, distances and pictorial files pulled from libraries. That means that you can have the crispiest design in the world, but if you slice it incorrectly, you're doomed.

You already know that if you want to design for a higher resolution – either 2x (Retina) or 3x (iPhone 6 Plus and iPhone 6s Plus) you need to have:

  • a high res screen,
  • the patience to zoom in every time you want to align pixel perfectly on such a huge scale,
  • bigger storage to save these giant files,
  • each exportable element of the design has to be always divisible by 1, 2, 3, etc.

Good. Now let's have a look at three ways how to export your design assets at the correct resolution.

1. Export: Scale up

If you design in vectors, you can save a lot of time and storage. Once you open your design in Avocode, click on any vector shape and hit the blue EXPORT button. Then you can choose the appropriate resolution. That's correct: you can export vector shapes to PNG or JPEG at higher resolution (up to 4x).

Additionally if your interface should work on a not standard resolution display, feel free to type in the scale when you're exporting images. You can change the 1x, 2x, 3x, 4x to anything like 2,79x (anything to the second decimal number) and Avocode will recalculate the dimensions.

Now have a look at how it works in practice:

Tip: Think lightweight.

Don't use pics for boxes and lines. You can easily “draw” these in CSS. Use vector shapes as much as the environment allows. Then it's quite easy to scale your design for multiple resolutions. (Have a look how can vector shapes and smart objects help you with that.)

2. Export: Scale down

If your design contains bitmaps, better punch the resolution up and then export pictures (PNG, JPEG) at the same or lower resolution, so you don't lose any of that crispness.

You can scale down either by default at 0.5x and 0.25x or type in anything like 0.87 and Avocode will recalculate the dimensions.
Tip: Start using the slice tool.

If you don't want to export every single layer element, you can simply slice the canvas. Go to tools, choose "Slice", select a field and then you can either:

  • Export it right away. Just hit EXPORT and the rest is pretty clear. Note that you can only export slices as bitmaps.
  • Adjust the width and height by grabbing the blue marking line and pulling it to the desired direction.
  • Or move it around to position it right and then export.
Notice that once you select any element or mark an area by the slice tool, you can see the size and position distances in the down bar.

To get rid of the selected area just click on it and hit BACKSPACE on Mac or DELETE on Windows.

If something is blocking the sliced bit, you can either hide the layers on top of it or double-click the layer and it will open in a new tab, where you can export it all or slice it some more.

3. Export: Add Variant

The good news is that you can combine the two methods described above. For example, if you have a vector shape, you can export it either as a SVG, PNG or JPEG. Or you can export it as all of these at once. Plus you can export each of the bitmaps at different resolutions if you need to.

To launch this modal, just click on a layer and hit "Export"
To launch this modal, just click on a layer and hit "Export"
  • Then click “Add Variant”.
  • Choose a resolution and pick a format.
  • Add as many variants as you like.
  • Choose an export path.
  • Hit “Export” again.

By now you should have a folder full of precisely scaled assets somewhere on your computer. I think you know what to do next.

Do you know how we could make the vector shapes export feature better? Share your thoughts down below.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: