Tip:
Highlight text to annotate it
X
Working with exact pixel dimensions is really important when creating web
graphics. To help you out Illustrator actually has a grid. I am going to go to
the View menu here and choose Show Grid. This grid basically is basically a whole bunch
of boxes here. Almost like graph paper for all of you old
time designers out there. Now, specifically for web graphics though,
it would be really great if I could set up Illustrator so that each square inside
of that grid represents a single pixel. That way as I am working on my design
I could really make it easy for me to make sure that everything is set correctly.
I will do this by adjusting my Preferences for how the grid gets displayed.
Again, I will go to the Illustrator menu here and I will choose Preferences.
I will also choose here Guides & Grid. If you are on Windows you would choose
Edit > Preferences and then again go to Guides & Grid.
Now, there are two settings here that are important for me to know about. First
one is Gridline every. Those are these big bold lines that appear over here.
So what I like to do is set my Gridline to every 10 Pixels. This way
I basically get a solid line that from a distance or even without squinting too
hard at my monitor, I can easily count off pixels in increments of 10.
I will also set the Subdivisions to 10. So what that means is that I will now
have a thick line every 10 pixels, and then in between that I will have 10
squares inside of that. This means that every box that I will see inside of my
grid will represent a single pixel. Now, what I will also do is I will set my
grid over here to be in front by unchecking this box. Now I will click OK.
Let's zoom in on my artwork here to see what's happening here. I will zoom in
right let's say on this particular part of the graphic, and as I zoom in here
I can see that every box that appears here represents a single pixel. Because
I have set my Gridlines to be every 10 Pixels, I can quickly count off,
10, 20, 30, 40, 50, 60, 70, and know that this graphic is approximately 70 Pixels
wide. In reality, it could be somewhat annoying
to have my grid always in front of the graphics. I just wanted to show you these
possible settings that you can actually have the grid appear either in front
of or behind all of your artwork. I will go back to the Preferences setting
right here and I will turn that setting back on. In this way, I can see exactly
where that grid is, but it doesn't get in way of the graphics.
An important keyboard shortcut is Command+' or if you are on a PC, Ctrl+'. That easily
toggles the grid on and off. Now that you know how to make the grid work
for you, I am sure that you will find it useful as you start creating web graphics.