Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
Throughout this chapter, we learned a few techniques, for example, like simulating the CSS box model by creating maybe colored backgrounds behind area text objects, and also creating reflections. Now, obviously if you're going to employ these throughout many different parts of your designs, you may find it tedious to keep adding these particular settings. Well one of the nice things about working with Illustrator is this concept of something called the graphic style. In fact, a graphic style also does mimic, on some level, the concept of how you work with CSS, the ability to make a change in one place and have that change happen in many other places.
So I am going to show you how to define graphic styles, but also how to make modifications to them so you could easily make a change across entire documents. Let's see how that works. Now, on the top over here at this file called graphic_styles.ai, I have some text that has reflection applied to it, and I have an area text object that also has a separate field that's been applied to simulate the CSS box model. However, down here on the bottom, I have just regular text, and also an area text object that only has the inset applied, but it doesn't have any color in the background, which might be able to help simulate padding, for example.
So let's see how we might be able to create styles to help us easily apply this throughout our documents. The first thing I'm going to do here is open up my Graphic Styles panel. Now, Illustrator does have some default settings here, but I am going to create my own styles. The easiest way to define a style is actually to take the object itself and simply drag it right onto the Graphic Styles panel. Notice here it creates something called Graphic Style. Well, that won't do. We need to actually change it. So I'm going to change this over here to reflection. Now, this over here, maybe I'm using as a sidebar throughout my site.
So if I want to define a style for this, I'm simply going to take the object and drag it into my Graphic Styles panel, and I'll rename that something called sidebar, for example. Great! Now, I want to quickly style other pieces of art, or other objects in my documents with those particular styles. It's as easy as selecting some text here, for example, and just clicking on reflection, or clicking on this area text object, and turning it into a sidebar. Pretty simple, huh? Let's talk about the most powerful aspect though of working with graphic styles.
That's once you've applied them, you can easily make changes. For example, let's say we find out from our client that the sidebar has the wrong background color. We want it to be a different color. So let's see how we make that change. First of all, I'm going to make sure that I have nothing selected in my document. You can see there right now in my Appearance panel, it says No Selection. When nothing is selected, you can click on any graphic style, and the Appearance panel will display all the settings that are available inside of that style, or all the settings that make up that style. So if I click on reflection, for example, you can see that I have an additional fill, and that fill has a transform effect, and that fill actually has a gradient applied to it.
If I click on the sidebar graphic style, I see that's created by having a separate fill being added, and there is a convert to rectangles that is applied to that fill, but the important thing to realize here is that the Appearance panel says No Selection, but it's displaying the settings for the sidebar graphic style. So that means that Illustrator knows that I've now clicked on the sidebar style, and I'm viewing the settings for that style in the Appearance panel. Well, let's go ahead now and change the color to something else. I'm going to click on the fill color right here, change it to maybe this nice, bright green color.
Illustrator does not update or modify the style. It doesn't know that I want to do that yet, but what I can do is come over here to the flyout menu of the Appearance panel, and choose this option called Redefine Graphic Style "sidebar." You see what happened is that I clicked on the sidebar style, those settings were loaded into my Appearance panel, and then as soon as I made a change, because nothing was selected, Illustrator assumes that maybe I want that change to now help redefine the style. But it doesn't do it automatically, because it's not sure, but this setting allows me to now finalize that particular setting.
So I'm going to choose Redefine Graphic Style "sidebar," and watch what happens on the screen. When you do so, it now updates that artwork anywhere else inside of the document. So graphic styles can be extremely helpful in ensuring that your design is consistent across all the web pages in your design. And if you have all your web pages setup as artboards inside of a single Illustrator document, well you can now make a change quickly across all your pages almost the same as you can with CSS.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.