Illustrator quick tip: export 2x with a 1x canvas

So you use Illustrator for designing websites, and that could be because you’re on a retina screen and Illustrator is vector. So you can design at 1x and it not matter, at least that’s the case for me. However, when it comes to exporting it’s a pain, you can use ‘Save to Web’ and increase the size to 200%, but that’s tedious. You know how to export SVG, but exporting PNG files is the issue at retina sizes. In this post I will show you how to overcome that.

Design

2,917 views

Illustrator quick tip: export 2x with a 1x canvas (featured image)

This method is no longer relevant with Illustrator CC export for screens.

Previously covering ways of exporting SVG in Illustrator led me to realise, that it’s actually not readily apparent how to export at 2x or other higher density sizes. If you need to export PNG files it’s not as convenient as Photoshop’s generator functionality. This quick tip will show you how to work around the lack of generator style functionality in Illustrator.

Using export

Export is part of Adobe Illustrator CC, if you don’t have that then skip to the ’Save As’ section. To export a set of artboards at a larger size, you follow the regular path of using export.

To export press cmd + alt + e or go to file > export.

Use artboards

You will be presented with a window to choose your file name and location. Modify this as necessary, then select ’Use Artboards’.

Changing the resolution

This next step is the most important, as this is what allows us to export at a different size. The dropdown menu has a few options, in this case you want to select ‘Other’.

In the ppi field add 144. The current resolution is Screen 72 ppi, so with doubling it, this will get you the 2x size.

Things to watch out for

If you have any images, if they are at their maximum size in the file they will be scaled up. So their quality may appear poorer in the 2x version. The way to get round this is to make sure the images are large enough and resize them down.

That‘s everything, an easy to overlook part of the process of exporting in Illustrator.

View on Github

Next to read

Design

Responsive vertical rhythm

I wrote a fairly lengthy post previously on vertical rhythm. I considered adding a section on how to adjust font sizes whilst maintaining vertical rhythm. However, with the experience of seeing how people struggle with the topic of vertical rhythm, it was best to keep it for a separate post.I will assume you do have a grasp of vertical rhythm, at this point, otherwise some parts may not make sense. In the examples I will be using em units, with Sass. So I assume you will have an understanding of how em units work. However, I will give you a brief overview.

Design

You don’t need an extension for Photoshop grids

In the October 2014 update, Adobe added a new grid/guide creator and it’s great. It covers the majority of things extensions like GuideGuide do and has a couple of advantages.I’m not sure it’s been given the attention it deserves, a small feature, yet one we will use so often. It’s simple to use and allows you to save (like GuideGuide) and should sync your grid layouts with Creative Cloud.