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 creating web graphics inside of Illustrator, I always say it's easy to get caught up in all the aspects of publishing your web graphics, and sometimes you forget about the power that Illustrator has. Let's take a moment to look at one of the most powerful features inside of Illustrator, the Appearance panel, and see how that might help us create our web graphics. For example, let's create something called a dynamic text button. Maybe you want to create some navigation inside of our website. So we want to create a word that has some kind of a button appearance. Now maybe the button is exactly the same size as the text, then we want to make sure that each time that I create a new button, that the button is resized to fit just the text inside of it. It's really easy to do this using some of the effects that are available through the Appearance panel.
I'll get started by adding some text to my page. Let me take my Text tool over here, click on my artboard and let's type in the word Apparel. I'll change the Point Size here to 18 points. I use Myriad Pro. Let's go ahead and choose Bold for now. And again, if you don't have the exact same typeface, that's fine. Be creative. I am using a little bit over here so we can see it somewhat better. Center it on my screen here. And the first thing I want to do is create the actual button itself. But here's a really cool thing, instead of creating a separate shape I am going to create the button using the fill of the object itself. But I am going to create a new fill for this object, and then I am going to do something special to that fill. Let's take a look, I am going to go over to the Appearance panel, I see that I have my type object targeted right here, and I'll come down here to this button to choose, Add New Fill.
Just so that it will be easier to see, I am going to change the color of that fill to something else. For now I'll choose Yellow, only because that's my favorite color. So by taking a look at the Appearance panel, what I have here are the characters, which are still filled black, and then I have a new fill, which I have created that's yellow that's on top of that. So the first thing I want to do is I want to move that yellow fill beneath the black characters. To do so I'll click on the fill itself, and just drag it beneath the characters. Now you can see that over here that the black fills in front. Now that doesn't look very interesting, but the next step I am going to take that fill, the yellow fill that I have created, and turn it into the Appearance of a button.
I'll go to the Appearance panel and I'll highlight that yellow fill that I have created. I'll click on the Effects button here, I'll choose Convert to Shape, and then I'll choose Rounded Rectangle, this brings up the dialog box here called Shape Options. Now I'll be honest with you, when I first saw that feature, Convert to Rounded Rectangle, I always thought well why would I want to create one shape and then convert it to a rounded rectangle, I'll just create a rounded rectangle for the beginning. But then I realized that you can apply this text. And in this case, it's actually a live and editable as well. So I'll click on the Preview button and you can see what happens here is I have taken that yellow fill which said the word Apparel, and I have converted that yellow fill, to an actual rounded rectangle.
Now you have two options when you create these shapes. You can either create an absolute shape meaning that that shape is always constant in size, or I can choose an option here called Relative. That means that the fill that I am now converting into a Rounded Rectangle will change in size relative to the actual fill itself. Now by default, Illustrator adds Extra Width and Extra Height of 18 pixels. That's way too much what I need for my button here. So for Extra Width, let me change it to around 6 pixels, and for Extra Height let's try 4 pixels. I'll also change the Radius of that particular rounded rectangle to something a little bit less dramatic, maybe around 6 pixels as well. Now that I have applied those settings, I'll click OK, and there you have it, a dynamic text button. Take a look at this. If I go ahead now and I switch back to my Type tool and I will highlight that word Apparel. Let's say I change it now to Events. As I type the word, the Background button automatically updates itself.
Remember that that yellow background that we are seeing right now? The yellow rounded rectangle is simply the letters Events that turns into a rounded rectangle. So as I change the text, the rounded rectangle simply updates itself as I type it. Let's try something longer. Let me erase that text right here and type in Contact Us. Again as I do so, I will get that button that automatically adjusts as I type it. So when you are creating web graphics inside of Illustrator, always remember the power that you have inside of Illustrator. It's all about being efficient, productive and creative.
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.