Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
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.
There are currently no FAQs about Illustrator CS4 for the Web.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.