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.
When you are using Illustrator to design web graphics, you can either create entire web layouts or you can create individual pieces of art. For now, let's look at creating an entire web layout using Illustrator. When it comes to web design itself, structure is very important. Whether you plan on laying out your page using HTML tables or CSS, doing a little bit of planning in advance can really help you out. For example, when I sit down to create a web layout, what I will first do is sketch out some kind of an idea of what my page is going to look like, and what I end up creating is some type of a grid as you see here. When you break your page down into a grid in this way, it's really easy for you to focus on the individual parts of those pages.
Not only is it easier to build your pages from scratch in this way, it's also easy for you to update individual parts of them without disturbing the rest of the page. Once I have created this rough type sketch what I will then do is build an actual file inside of Illustrator. For example, here is a grid that I have created inside of Illustrator based on the sketch that I showed you just before. Because Illustrator is object- based, it's really easy to generate such a layout, and more importantly I can now use this to easily re-purpose it for layouts using slices, which will be useful in a table-based HTML layout or to create divs working with CSS.
Even more importantly if I am working with some kind of a Web Developer I could hand this off to them and they can build the site templates where that they need to. So now that you see the end result here, let me tell you how actually I went ahead and built this. I will come down to the Layers panel here and I will turn Off this layer called Slices. Going back to what we have already learned in this title, we know that anti-alias thinking cause certain problems. So when I create my boundaries here for this particular layout. I want to make sure that I don't use objects that have strokes on them. I am only going to use objects that have a fill. So I get started by coming over here and clicking on the Rectangle tool and I will draw my first rectangle. Just simply draw any shape, whatever it is that I want, and I will set my Stroke Color to None and I will set my Fill to Black.
And here is where Illustrator makes things really easy. I am going to go ahead and select this particular rectangle. Where I have been trying to position up Ai, I am going to use numbers. This is one of the reasons why I always have the Transform panel always available to me here in the workspace that I have created. So I will start by doming in the right dimensions first for this particular object. For the Width, I will type-in 215 pixels. I will hit the Tab key and specify 150 for the Height. To position it precisely where it needs to go, I will go first over here to the Transform panel and make sure my Reference Point is set to the upper left-hand corner. I will set the coordinate for my X value to 0. Now here is the tricky part. Normally you might think that I would type-in 0 for the Y value as well.
But Illustrator actually calculates its 0-0 point down here on the lower left-hand corner, not on the upper left- hand corner. Since my layout is set to 800X600, I will align the top left-hand corner to the 600 mark. And that way my object fits exactly where I needed to go. To make it easier I will actually come down to the Layers panel and create a new layer and I will take this little dot on the far right edge of the layer and drag it into that new layer that I created. Now since I will be creating a whole much of these boxes and I don't really have any strokes, what I like to do is applying Opacity value. This way we are able to kind of see what happens to the rest of my page. So with the object still selected, I will change the Opacity of this object to say 70%.
Now, let's go ahead and create the next shape. I will select the Rectangle tool again, but this time instead of drawing out of shape, I will simply click once on my artboard, in doing so a dialog box will come up asking me for the precise width and height for the shape I want to create. Since I have done my homework before and I have already sketched out my grid, I know the exact pixel dimensions I want to get for this. So I will type-in over here, 485 Wide by 100 High. It just saves me the time in first creating my shape and then having to adjust it later. All I need to do now is put it in the right position. I come over here to the X coordinate. I now know that this shape needs to go in around 215 for the X value. Again I know that because this particular object is 215 pixels wide, and again the upper left-hand corner needs to go to 600.
I will back the Opacity of this one to around 60%. In doing so I now see a visual difference between the slices that I have created here and here. And before I go any further, I just want to stop here for a moment. You may have used Photoshop before to draw out guys in order to create slices. Well, in Illustrator there are many ways to do this. I find just working with the rectangles to be far more intuitive. Let me create a few more of these boxes. I will click again here to get 100X100, and again, I will choose to position this all the way up here in the corner. I will change my Wide value to 600. And just to show you if I really don't want to go ahead and find that all the mess, I do know that the far right edge over here is 800. So if change my reference point to the upper right-hand corner, I can now change my X value to 800 and that again pops right into position where it needs to go. And I will dial back the Opacity of this one to maybe 50%, and I will continue to go to this process in order to get to the grid like I showed you here before. It's really simple, it's really easy to do, and most importantly once your grid is created everything else seems to fall into place.
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.