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:
Good. Now let's have a look at three ways how to export your design assets at the correct resolution.
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.)
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.
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:
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.
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.
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.