Design Retina Ready (With Tips)

I have always always loved Adobe Illustrator.

From a 32 x 32 icon to a billboard sized illustration—infinite scalability is a must for me.

This extends beyond the web, especially in print where typical web resolutions just will not re-produce well. Good branding extends beyond the online world however, so limiting yourself with low resolution graphics is a sin of the highest order. Like any design software, Adobe Illustrator has strengths and weaknesses. Here’s what comes to mind.

The Strengths and Weaknesses of Designing a Website in Illustrator

Weaknesses of Illustrator

1. Working with images is very limited.
2. Pixel perfection is hard to obtain (There is a way though. Will post a few tips below.)
3. Development from an Illustrator file…missing images fonts and such. (CS6 Has a fix now! See below.)
4. Can actually destroy vector graphics when scaling up and down objects with “Align to pixel grid”. (See below.)
5. Photoshop has amazing effects tools… Illustrator doesn’t have the same level of effects but it does have a few goodies.
6. Any complex effects with images or design elements should be done in photoshop. (Can place any image very easily when done.)
7. File Size. Illustrator files with images can be stupidly large…

Strengths of Illustrator (I’ll try to keep this short.)

1. Scalability (Design can go straight to print, and is ready for retina displays)
2. The alignment tools! Center to art board, align to selection… I could go on.
3. Multiple art-boards.
4. I can completely re-produce almost all CSS3 styling options with built in effects. (Drop Shadows can be used like border – top – bottom.)
5. Accurately sizing boxes or shapes perfectly by typing the dimensions.
6. Working to grids is easy to setup.
7. Speed – Photoshop is great and I am pretty fast in it, but I can layout a site much quicker in Illustrator.
8. Packaging your files for sharing. This has finally been added in the latest update. It’s kind of a game changer.
9. Save for web no different than Photoshops.
10. Save as SVG for retina displays.

As I noted above here are some simple fixes to the issues I have come across.

Pixel Perfect Fix

Make sure sizes aren’t 200.5 px – Should be 200 px. No half sizes.
Make sure to check “Align to pixel grid“

Damaging Logos or any vector object with “Align to Pixel Grid”

If you size down anything with “Align to Pixel Grid” and then size it back up, it will actually destroy the vector paths. Turn it off when you wish to avoid this. Note how the text is affected the most.