Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
In addition to using paragraph styles for large blocks of text in our designs, we can also use something called character styles to enhance individual aspects of our topography. One classic example of this is hyperlinks. I use this all the time inside of my designs to simulate where I want links to go and also what I want them to look like. So in this movie, I'm going to be exploring how to use character styles to style up individual pieces of text. So I'm going to zoom in on this top paragraph here and once I do that, I'm also going to bring up the Character Styles panel.
I can do that by going to the Window menu, going down to Type, and selecting Character Styles; that brings them up. They're going to live in the same box as paragraph styles, so if you already had paragraph styles open like this, just simply move over to Character Styles and you'll see it just like this. The first thing I need to do after I get that open is to select a piece of text, so I'm going to come right here in this first paragraph and simply double-click to start editing and then select this last bit of text here. And so once I have this last bit selected, I'm going to start making changes to it. And so hyperlinks in general have a different color. They might actually have an underline.
They might be bold. Any number of things could happen when it comes to hyperlinks, so I'm just going to add in some things here. So I want to stick with the color scheme that I've got going on here. I've got the orange and the light gray, so I'm going to make the hyperlink orange. So I'm just going to select orange from here. You'll see as soon as I do that, a little plus sign appears, indicating that I'm overwriting the normal character style, and that's okay. I'm also going to make this bold, and so in order to do that, I'm going to come up to the Character panel here for just a moment, and once I do that, I'm going to change from light to bold.
There we go. And then I'm also going to add an underline, and I can do that from the Character panel as well. So let's go back up to the Character panel here and I'll just click Underline right there. So now that I have all of this created, I can click on the new Character Style button. It's going to create Character Style 1. I can double-click that and I'll call this hyperlink and hit Enter, and now I have that style saved. And I'll click away from it and switch to my selection tool, and I'll pan down here, temporarily holding down my Spacebar key to do that, and I'm going to double-click inside of this.
I'll select this last bit of text as well, and let's apply the hyperlink style. And once I do that, you'll see it becomes bold, it changes the color to orange, and if I grab my selection tool, it looks just like the one above it. So I've now created a character style that I can then use to simulate hyperlinks anywhere in my designs and. So now that I have this saved, I can use this as many times as I want inside of this design of this design. I could create new artboards to stimulate pages and still use this character style across the board for everything. It helps me create a unified appearance throughout, and it also saves me a ton of time from having to set up all of those options like the bold, underline, and color change each and every time.
Now I just double-click, select a piece of text, click on the character style, it applies it, and I'm done. It saves me so much time in the long run, and I think it's going to save you a lot of time too.
Find answers to the most frequently asked questions about Illustrator for Web 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.