Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
When you're working with type in Photoshop, chances are you're going to apply some formatting to a certain piece of text that you're going to need to use over and over again, especially if you're doing something like web site design where you have to use a lot of body copy. In this movie, I'll be exploring the Character Styles panel inside of Photoshop and how you can utilize that to help streamline your text workflow. Let's first zoom in on this top portion of text right here. So I'll just go ahead and use Command+Plus or Ctrl+Plus to zoom in and I'll just pan over to show you that right in the middle. And so I've got this bit of text here which is sort of like a blog post and I've got several other examples of it down here at the bottom as well.
And what I want to do is apply some formatting to some pieces of this text and then use that in other places in my design. So I'm going to grab my Text tool first and once I have my Text tool selected, I'm just going to click inside of this text box to open it up. And then let's open up the Character Styles panel. That's over here in my dock. If you don't see that, just go to Window and select Character Styles and it'll appear for you. Now I notice when I have this open that there is automatically a None in the Character Styles which is selected. And I I'll also see this little Plus sign, which is next to it.
The Plus sign indicates that there's a style override, meaning that there is something overriding what this style is supposed to look like. I'm going to go ahead and remove that right off the bat, so I'm just going to clear the override with this little button here. When I do that, this is just going to give me plain text just like this, and that's okay, because this is what I want to start from, just plain old text. So now what I'm going to do is just select a piece of text. I'm going to come over into my Swatches panel and change it to blue. I am then going to come up and click on the Type panel button right here to toggle on the Character and the Paragraph panels, and then I'm going to underline that text.
Once I have that done, I'm going to come back over to my Character Style panel, click on New, and it creates a new character style for me. With this character style here, I'm going to double-click where it says Character Style 1, and I'm going to call this Hyperlink. So now it should apply the color of blue and the Underline to whatever text I have, and I hit OK. There we go. So now the Hyperlink style has been created. Anytime I want, I can go in and I can select a piece text, like this for instance, and I can apply that Hyperlink style and it automatically adjusts that for me.
For the remainder of this text, if I want to set it up where I can utilize the other properties of this, I'll need to set up something called a paragraph style, which would affect the overall look and feel of this paragraph as well as this heading. And that's something that we're going to explore in the very next movie.
There are currently no FAQs about Photoshop for Web Design.
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.