Join Sue Jenkins for an in-depth discussion in this video Graphic styles for the web, part of Productivity Tips for Web Designers.
- Hello everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson I'll show you how to create and use graphic styles, working with the Graphic Styles and the Appearance panels. Graphic styles in Illustrator are saved, reusable sets of style instructions that you can apply to different objects, groups of objects, or selected layers on your Artboard, all with a single click. Each graphic style can include any combination of appearance traits, like strokes, fills, effects, blending modes, even transparency.
You can even create styles of just effects, like a flag warp or a twist, which is pretty cool. Now, creating and using graphic styles can be a really great way to save time when you're working on a web layout and also during the development process. Not only can you create and use as many of your own graphic styles as you like, but there are a bunch of free graphic style libraries that come with Illustrator. And there are tons and tons of additional style libraries, available on the web, many of them for free.
So you could just Google for those. When you first open a Document, the default set of graphic styles will appear in your Graphic Styles panel, which should already be open in your panel dock. If you don't see it, you can open it by going to the Window menu, and choose Graphic Styles. Mine's already open here on the right in the panel dock. By default, all of the Graphic Styles will display using a little square shape, but you could change it to a little type shape by choosing the Use Text for Preview from the panel's menu, and it'll show you what that style would look like if it were applied to a letter.
I actually prefer it in the other way, so I'll switch back to Use Square for Preview. Now, to apply a style, all you need to do is select an object on your Artboard, and then click the button for that style to have it applied. So I've already created a few different ones here. And I'll show you how to do it. Just select your object. Click the style, apply it. It's super easy. Not only can you use the styles that are in the Graphic Styles panel, but you can create your own and apply them, and even modify or manipulate the ones that are already there.
Graphic Styles also work on live, editable text, so here's a letter, and I can apply a style to that. And you can get pretty fancy with the styles that you create. You can do offsets, all kinds of different effects with your styles. There's so much that you can do with them. Also, I'd like to point this out. You can reverse engineer a Graphic Style to learn more about it. And the way you can learn about a particular Graphic Style is to look at the Appearance panel once you have an object with a style applied to it.
So, in this instance, I can see that this particular object has a stroke with no fill, and then it has a fill with a pattern, and then below that, another fill. And if I toggle off the visibiltiy of the different elements, I can see which part is which, so if I hide that yellow fill, I can see that the pattern fill has some transparency, so if I wanted to, I could go in and change the background color of that pattern, and create a completely new pattern. And then Save that, as a Graphic Style, or actually, redefine the existing style.
To redefine a graphic style, with the object selected, you go to the appearance panel, choose the drop-down menu, and select Redefine Graphic Style. Now in this instance, this particular style doesn't have a name, so it's calling it Generaic Graphic Style. But if I Redifine it, you'll see that the instance automatically updated, not only the object, but other instances that were also using it, which is pretty cool. Now, let me show you another technique. This text block right here is actually text with a style around it, behind it, so that if I wanted to add more copy, I could, and the box will automatically expand.
So, I wanted to say, "LEARN MORE "ABOUT IT", the box expands, and this is a great button technique, a button style. So, let me show you how you do it. First, you're going to start by selecting your text. Then, you're going to go over to your Appearance panel. And you're going to click the button to add a new fill, and you're gonna do that twice. So you have two fills, one on top of the other. One will be the color of your text, and the other will the color for your button. When you're changing the colors, you can do it right from the Appearance panel.
So I will change my text color to white, and I will change the fill color to something happy, like a bright pink. How about this one? So, we don't see it yet, we're not finished yet. Don't worry about that. The next step is to create the background by converting that fill into a rectangle shape. So, you wanna make sure that fill layer is selected, then click on the fx button at the bottom of the panel. Go up to Convert to Shape, and choose Rectangle, or you could choose Rounded Rectangle, if you like.
If you wanna see what this looks like, turn on your Preview button. And then you can modify the extra width and the extra height around the button. I'm just gonna leave it as is, and click OK. And then I can create a style from this, with my object selected, I'll click the Add New Graphic Style button. Then, when I select the next block of text, all I have to do is click that button to apply it to the text. Another really super amazing thing that you can do with Graphic Styles is you can perform transformations and then save those transformations, to apply later as a Graphic Style.
So, with this little Wingding shape selected, I'll click on the fx button at the bottom of the Appearance panel, go up to Distort & Transform, and choose Transform. Now, this dialog box does math, and I love this. So, let's say I wanna rotate this around a center point, six times, what I can do is plug in some math, 360 degrees divided by six. I do need to edit the registration point for this object so that it rotates around the bottom, middle. And then I can choose the number of sides, or transform.
Let's turn on the Preview. So the original object stays in place, and then we have one, two, three, four, five objects around it, and then click OK. Now, this can be saved as a Graphic Style. So if I click on the button and say, "Give me a new one", notice it gives me overlapping shapes. So it's remembering the transformation, not the object. So I can now select another object and apply that transformation to it, which is pretty handy. Now, the last thing I wanna show you is that you can create Graphic Styles from brushes, as I've already done here.
So, in this little map illustration, I've created one Graphic Style to indicate toll roads, like this, and another style to indicate a two-lane highway, like this. So this red line will be my two-lane highway, which I can apply with this button. And the green lines, which I'll shift, click, to select both of them, will be my toll road. And that's just a Graphic Style. So, my very last little tip for you is that if you happen to apply a Graphic Style to a group or a layer, and you don't see the style applied to your object, let me show you on these three little buttons here, so let's apply something like this.
So, I applied the metal button, but I don't see it. What you'll do is you'll go over to your Appearance panel, and you'll see the layer called Contents. You're going to need to drag that below the Fill Layer, or several Fill Layers, and then you should see the style applied to your selected objects. As you can see, Graphic Styles are totally versatile, and they're great for buttons, and banners, wire frame elements, type treatments, effects, and pretty much anything you throw at it. As you play around with the Appearance panel and the Graphic Styles, think of ways that you can use these tools to save time during the design and development process for all your web and mobile projects.
Since you can apply Graphic Styles to any selected object, group of object, or a selected layer on your Artboard, the possibilities are unlimited.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.