Setting up your .AI file

*gentle reminder: I still have no idea what I’m doing.

OKAY FINALLY. LETSDOTHIS.

Command mutha truckin’ N

Some things I think that matter:

Artboards. Don’t put them all on one big artboard, it’s a giant pain in the butt to export them to pngs later, especially if you’re iterating or working with other people and they need a lot of small updates. This way you can just export them all at once.

Size. I don’t care what size you make your icon, just make it an even number, or at least a whole number

Pixels. ’cause we ARE talking icons here people.

*note: pt≠px .

Pixel = smallest unit of measure on a screen

Point = smallest unit of measure in typography

Points are device dependant. eg. Apple could set a pt=2px. Pixels are independent, and now, so are you.

(Except for type, your type is still totally pt dependant)

✓Align New Objects to Pixel Grid. We’ll be pasting the objects in, so make sure that new objects land on the pixel grid (you’ll have to open up advanced settings)

K. Almost there. Preferences tho.

I don’t really tweak that many preferences…

Make sure that the keyboard increment is one whole pixel, sometimes it defaults to a weird number.

I don’t stress to hard about what my gridline increments are. TBH I wouldn’t use them for icons this big, but they’re pretty handy for tiny icons. Aim for some increment of 8 (aka don’t use 10, because half is 5, which is odd, and things get wonky around odd numbers).

Bringing it all together

Turn on pixel preview ⌥⌘Y

Start pasting in your icons ⌘V

Drop them each into their own artboard, group & centre with align to artboard.

So, they pretty much fit (thanks square from step two!) Cool! Let’s scale them. First to make sure they all fit on their artboard, second to make sure they have the same amount of white space. Yoda & the speeder are the widest, so they’ll make good references to compare back to. I usually just blur my eyes to check if the white space around them is about the same. Real technical.

(Most of the time when people want you to export icons, they want them to take up the whole container. So, like, do that. Or more accurately, consider the context. If they’re going to be in a list next to each other, their relative size matters. If they’re not, they probably want to use the whole container. That IS why they gave you a size.)

Make sure “snap to pixel” (⬆⌘’) is turned on, then select your icon and open the transform pallet.

Okay, in this order:

Make sure “Scale strokes & effects” is turned off

Turn on “Align to Pixel Grid”

Scale your object

Change as many of the values to whole numbers as you can (so probably 2–3, on the rare, beautiful occasion you can have all 4)

Did you see what happens when you turn on “Align to Pixel Grid”

COOL.

So I feel pretty good about the sizes of these. Now we can get picky.

This is more eye ballin’ folks, hope you weren’t expecting to learn any actual techniques.. Let’s get a second look at these suckers. Got to window > new window. This will give you a second window of the same file. Then view it at actual size (⌘1), and resize the window to fit an artboard.

Actually, don’t arrange your windows like that, you’ll lose the top one as soon as you click on the bottom one — move it over. If you do lose the top window, hold down the dock icon and select “show all windows”

Changes you make in one will be reflected in the other. Cool, right! So now you can go through each icon and look for problem areas (like where chewies.. chin-hair-tuft..? meets his lip). You can use the same technique of aligning objects to the pixel grid, or manually move them around. Sometimes times it just means finding an aliased line and moving over and back, and letting the “snap to pixel” do the work. Sometimes it means removing details. Sometimes it means re-drawing elements to fit on the grid.

Things to look for:

- Strokes that aren’t on the grid

- Strokes that are too close to each other

- Strokes that aren’t whole numbers (see: pixel fitting)

- Strokes that aren’t thick enough or too thick

- Low contrast

- Use your judgement on curves. It’s generally better when their bezier curve is pulled vertical/horizontal/at 45 degrees, but tbh I decide I like my curve better all the time

- Decimal points in the width/height/location (in the transform window)

Scaling Down

Yeah okay I cheated with my big icons. This is based completely on my experience, and has no basis in science or math or education, but probably at least a little bit of math..

~100px

You can still get away with up to 2pt & 1pt lines, but you’ve got to get back in there and remove some the details. Make the features bigger, or remove them all together. Simplify your colours, increase the contrast, or think about switching to just one colour. I’m switching to one colour here for you to see the 1pt vs 2pt strokes (naaaah I just forgot to use the coloured icon because I was in the middle of sending these to print with GOLD mutha’truckin foil, that was a pretty good made up reason tho, right?). Think about removing rounded caps. I don’t remove them every time, but they are definitely serving to make it blurrier at this point. Straighten any lines that you can. Decide if your line is going to be 1pt or 2pt based on how you want it centred in the object.

>50px

So right around here, you switch from just cleaning it up & simplifying; to actually redrawing it for the new constraints. I start by changing everything to a 1pt stroke, you can change them later, but it’s a nice place to start (so you can see everything). I don’t have a star wars example for this part, so I’ll just tell you: this is where you start lining things up. Y’know, like when you have different types of papers & folders that are haphazardly strewn just so? Un-strew them.

Or maybe they’re like a star wars org chart on the death star? It’s got to need a bit of structure to get anything done…

Okay back to the Taun taun. This is where we start counting pixels. I know that I want the vertical line on her mouth to be centred and 1px, which means both the head and the 2 parts that make up the … snout…? need to be an odd number of pixels wide (you can change it in the transform pallet), as well as the length of the eyes. Once those are all lined up I can simplify the rest. Delete everything that’s not an actual thing: eg. the horns can stay, but the fur details gotta go, they’re not really “things” they’re just decoration. Anything that you can’t figure out how to simplify, you can usually change to a fill. Keep an eye out for lines that come close, but don’t overlap. It can get really muddy when one area ends up being 4px deep, on a 2px icon (eg. where the snout meets the horn).

I started to simplify all of them for you, then I remembered I haven’t done my taxes yet. SooooOoOOooOoo… That’s it! That’s all the things I know how to do.

As always, all questions and suggestions are welcome!