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.
Now we are going to continue our look at formatting text by exploring the Paragraph Styles panel inside of Photoshop. So the first thing I need to do is I need to actually start formatting some of this text. So I am going to select this paragraph here. With this paragraph selected, I am going to make some changes. I'm going to change the font, for instance. So I will scroll up and I'll change this font to Helvetica. Once I have that done, I am going to make sure that it's on the regular font weight, and let's change the Size to 12. There we go. And I want to make sure that the color is set to somewhat of a dark gray. There we go.
Now I've got all of this set. I am going to go over to the Paragraph Styles. Notice Basic Paragraph is currently being overwritten, and that's okay. I'm going to create a new paragraph style, and I'll double-click on it and I'll call this Body Text. Now underneath here, it's overriding some of the settings that I set up before, so I am just going to change some of those. So Font Family, that's going to be Helvetica, 12, and we are ready to go. So I will hit OK, and there we go.
So now when I come in, I can actually start a new line of text and just start typing and it should adopt that Body Text style. If I select that text, you are going to notice there is a little Plus sign right there, and if there is a Plus sign, that means there is an override happening. So I will just clear the override and it should automatically snap it back to my original text, just like so. If I want to make a change to the Body Text style, that's pretty easy to do. I come over here, double-click on Body Text, and I can come into all of these different sections, like Advanced Character Formatting to change the width and height of the characters, turn on different portions of OpenType features. I can also change the Indents and Spacing.
So for instance here, if I wanted to change the indents, I could change any of that that I wanted to. I could add space before or after a paragraph. In this case, I think I'll add some space after. So let's add maybe 10 points after. And by the way, you're seeing me use something called a scrubby slider right here. If you notice when I mouse over this portion of the dialog box, it actually shows me that little hand.
That allows me to scrub by clicking and dragging to the left or to the right to increase the value number. Once I do that, I can move this panel out of the way and I can start to see a preview if I want, of what that looks like. So here is a preview of before and after. So it's adding some space between those paragraphs. I might actually add a little bit more space to this. Let's go back to about maybe 15. There we go. And I will just round that off to 15 even. Now I'll hit OK.
So now anytime I apply this paragraph style, it's automatically going to have the Helvetica Font, regular weight, 12 points, it's going to be black, and it's going to have 15 points of space after it. If I want to use this somewhere else, no big deal. I can come right down here. I will commit to the change up top first. Still using my Text tool, I'll come down and click in this section of text. I will grab this text here and select Body Text. When I select Body Text, there might be a style override happening. That's because I had formatting already applied to this text. That's okay.
Just clear the override, and it should go right to the Body Text. And if I hit Enter, it gives me that amount of space. So there you go. And again, anytime I need to make a change to Body Text, I just double-click on the word, go in, change it up any way I need to. Character Formatting, Open Type, Indents and Spacing, Composition, Justification, Hyphenation. Once you're done with that, hit OK.
Any changes you make should automatically update inside of your document. Let's add one more piece to this to complete the look. I am going to come up here and I am going to select Sample Heading, and once Sample Heading is selected at the top, I'm going to change this to Helvetica. Once I have Helvetica changed, I am going to change the size to 18. Actually let's bump that up a little bit more, maybe 24. Give it a nice big heading. Once I do that, I'm going to open up the Character and Paragraph panels. And inside of the Character panel I don't think I need to do anything other than maybe underline it to give it a little bit of an underline. And then in the Paragraph section, I am going to add some space after.
So I am just going to take this and I will crank it up. You see it moves everything down a little bit. I think 10 points should be enough there. Close that panel, go into my Paragraph Styles, and I'll click New to create a new paragraph style. Double-click to open it up. Paragraph Style 1, I am going to change this to Heading. It has adopted all my things here: Helvetica, Regular, 24 points. Let's change the color while we are in here. Let's change it to a nice orange color. Hit OK.
You notice as I do that, it updates right there. And I'll hit OK. Now, if I come down here to these blog posts, select this sample text, pick Heading, notice it's got an override because of the previous formatting. That's okay; just clear it and it goes right back to where it should. I am going to shrink this box up just a tad. Hit the check mark in the Options bar to commit, pan down, grab this Heading. Again, I will remove the style override and apply the Heading, and there we go.
So now instead of having to go in and individually format each one of these, I've gone through and formatted the paragraphs using my Paragraph Styles. I also added some hyperlinks using some of the character styles that I created, and it is just a great way for you to streamline your workflow when you are working with text. So take some time, set up your own paragraph and character styles, and see if it doesn't help you get where you are going a little bit faster.
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.