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.
I am going to create a New Web Document here using the web profile. I am just going to use the regular Standard settings, because I want to spend a few moments talking about the interface inside of Illustrator. One of the great things that Adobe has done recently is made a unified interface that applies across the entire creative suite. Even better, you can customize this workspace to fit your exact needs, and once you have positioned everything just the way that you like it, you can save or capture that as a workspace. In fact, the Illustrator team did a wonderful job by including several workspaces that are already created inside of the program.
Take a look here at the top of the screen, where it says Essentials. If you click on that, that gives you access to some of the other settings that are already inside of Illustrator. For example, some of these workspaces are optimized for different types of workflows. For example, Painting. For our needs though, it's interesting to note that Illustrator also comes with a Web workspace. I will go ahead and choose that option, but I will be honest with you, as a web designer on my own, I don't necessarily find this as useful. By setting up this workspace, Adobe is basically telling us that these are the web features that are part of illustrator, but I find that, based on experience; I like to set up my workspace just a little bit different.
So what I would like to do is spend a few moments showing you how I create my Web 2.0 workspace. In fact, I will be honest with you, I want to let you know that I really like the way that Flash has their interface laid out, so a lot of the things that I am going to be doing here inside of Illustrator does come from Flash. I will start by grabbing this dark gray bar right here and dragging it out so that it no longer is attached to the side of the screen. The first thing I want to talk about here is working with the toolbar. I am going to take the tools that are currently on the left side of my screen right now and drag them all the way across to the right side, and snap them to the side of the screen here. I will also click once in the bar here to make it a single row of tools instead of a double row of tools.
Basically, what I am looking for here is to have all of my tools and panels on one side of the screen, so my eye always knows to go towards that one side of the screen and my artwork is going to everywhere else. Next, I want to think about some of the most important tools or panels that I will be using when creating web graphics inside of Illustrator. The first thing is the Transform panel. That becomes really important because it will allow me to precisely position my graphics on my screen. I will go to the Window menu and I will choose here Transform. I will take that panel right here, drag it right here, and as soon as I approach the side here a little bar kind of comes out. I release the mouse and now that becomes its own doc right here on the side of the screen.
I will also add the Align panel directly to that area as well. This way I have Transform and Align together. Next comes working with Color. I will take my Swatches panel from here and I will drag that here as well. I will also bring the Color panel directly to that area, and I will also specify that right here, from the flyout menu of the Color panel, that I choose Web Safe RGB. In this case, I can see the hexadecimal values of the colors that I choose. Next, I will drag over Graphic Styles, and also Symbols. These libraries will help me maintain and also create the web graphics.
Finally, I will bring my Appearance panel right over here and also my Layers panel. I always find that for most of the graphics that I create the Appearance and the Layers panels are very, very important. In fact, in Illustrator CS4 the Appearance panel is really important because it gives me access directly to some of the panels. For example, the Stroke panel and even the Swatches panel directly from these little squares. So what I have here is basically most of the panels that I will be using on a day-to-day basis when I am creating my web graphics. I will just add a few more things to really fill out my Web 2.0 workspace.
I will start off by working with the Pathfinder panel. I will drag that in over here to create a new doc, but I will also collapse that doc, because I don't need to use it as much. I will also move my cursor just a little bit left here, where it turns into a double arrow, and I will click and drag so that this becomes just an icon. Now I will go to the Window menu here and I will also open up my Attributes panel. The Attributes panel is important because it gives me options for applying image maps. Clicking on the tab right here, I will drag that over here as well. There are two more panels that I use quite often. One of them is the Links panel. I will go ahead and I will drag that over here as well. Also, the Actions panel. Let me close these, and now I have created my Optimize workspace for working with web graphics. Because these panels aren't used as much, I can simply click on them and then make them go away as needed.
Finally, I will save my workspace. I will go over here to where it says Web, click, and then choose Save Workspace. I will give it a name; let's call it Web 2.0. You can actually use a period or any punctuation when you save a workspace, so I will call it Web 2 space 0 for now. Click OK, and now I have done it. I have created my web workspace that's optimized for the way that I work. What's great about this is that we all know that Illustrator can be used for so many different tasks. When I am working on something else, I can change my workspace to be optimized for that kind of workflow. For example, I will go over here, instead of Web 2.0, let's go, for example, to Typography. Everything changes, optimized for that kind of workflow. When I am ready to work inside of web graphics again, I simply come up to the top here, choose my own workspace, and I'm ready to go.
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.