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.
One of the obvious benefits of using Illustrator for not just web design but any kind of design is that any thing that you create is vector based. Meaning that you can scale it to any size that you need. Now in reality, when you are creating web graphics, you are always designing your artwork to just the size that you need. However, there may be times when you are asked to deliver artwork in other sizes as well and rather than have to resize everything, you may be able to take advantage of some of the functionality inside of Illustrator that allows you to scale your graphics as necessary. For example, take a look at this file. I have several banners that I have created and maybe I am being asked to deliver this one banner in a different size, not 300x250 but maybe they want to be that it's just 200 pixels wide.
Instead of having to create a brand new artboard and then resize that artwork right here, I can do so directly to the Save for Web dialog box. The first thing I will do is I make this active artboard by clicking anywhere within that area. Next, I will go to the File menu and I will choose Save for Web & Devices. Maybe I need to deliver this as a JPEG file. So I will change the file format from GIF to JPEG. Now let's take a look at this tab over here called Image Size. Right now the Image Size panel tells me the Width and Height of my graphic. It's 300x250 as it was originally created. But by leaving the Constrain Proportions options turned on, I will go over here where it says Width and change to the width that I really need, which is 200 pixels. Then I click the Apply button and you notice that right here in the Save for Web dialog box and my image gets resized to the exact dimensions that I need.
Now when I click Save I created the file just at the size that I needed, without having to change or adjust anything of my original file. Now here was an example where I actually reduce the file size but remember we are working with vector graphics here. For example, if I want to change this to width of 800, I will type that in right here, click Apply and now everything gets resized and looks crystal clear, just the way it should be. Again, I don't have to do this inside of my Illustrator document, I can do this right here inside of Save for Web. So this happens just at the export time. Unlike Photoshop where it has to recreate my artwork at each individual size, I find myself coming back again and again inside of Illustrator because I can easily resize my graphics as necessary.
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.