1. Using Text Styles in Photoshop CS6Creating a paragraph style for the body text| 00:00 | Now to begin styling our text in
Photoshop, I am going to open up webdesign.psd
| | 00:04 | from the exercise files.
| | 00:06 | I am going to zoom up here a little bit.
| | 00:09 | Now, inside of Photoshop CS6, we are
going to come up to the Window menu, come
| | 00:12 | down and choose Character Styles.
| | 00:16 | Let's go back to the Window menu,
let's bring up Paragraph Styles.
| | 00:18 | So now with these two palettes open
I am going to customize my workspace.
| | 00:23 | I am going to grab these and drag the
Paragraph Styles above my Layers panel,
| | 00:27 | and then the Character Styles
underneath the Paragraph Styles. I'll resize
| | 00:33 | these a little bit.
| | 00:34 | So the first thing I want to do is
create a paragraph style and I want to base,
| | 00:40 | it on the characters inside of this promo text.
| | 00:42 | So if I select some of these
characters, I can see this is Arial, set to
| | 00:45 | regular, 14 pt, and a medium gray.
| | 00:48 | So let's come over the Paragraph style.
Let's come down and click New Paragraph Style.
| | 00:53 | It's going to name this,
Paragraph Style 1. Double-click it.
| | 00:58 | So notice if you have some of the characters
selected, Photoshop will pick up these styles.
| | 01:01 | I'll start by renaming this body.
| | 01:05 | On the left-hand side, we can
define other properties as well.
| | 01:07 | Let's come down to OpenType Features.
| | 01:09 | Let's turn off Standard Ligatures.
| | 01:12 | We don't want to have any OpenType
properties being set here since most
| | 01:15 | browsers don't support that.
| | 01:16 | Next, let's come down to Hyphenation.
| | 01:18 | Let's turn Hyphenation off,
since web browsers don't come with
| | 01:20 | Hyphenation dictionaries.
| | 01:22 | Let's come over here and click OK.
| | 01:25 | Now that I have a Paragraph
Style created, let's come down here.
| | 01:27 | I am going to select all of the text here.
| | 01:29 | I am going to click on Body.
| | 01:31 | You will see a plus sign here.
| | 01:33 | Many times when applying a Paragraph
Style in Photoshop, Photoshop will add
| | 01:36 | these styles to what is
currently existing in that text block.
| | 01:39 | So we can come down here and click on
this button here, which is Clear Overrides.
| | 01:43 | Once we click on this, the text
inside of his area will have all of the
| | 01:47 | definitions of this Paragraph Style.
| | 01:50 | Now to commit this change, let's come
up here and click on the check sign.
| | 01:54 | You can also hit Command+Return or
Ctrl+Return in Photoshop to commit text changes.
| | 01:59 | With our Type tool still selected,
let's come out to the next text block. Let's
| | 02:03 | do a Select All. Let's do a Clear Overrides.
| | 02:07 | In some cases here, you will see
that the text actually reverts back to its original state.
| | 02:12 | So what you do in Photoshop is come back,
go back to Basic Paragraph style and
| | 02:16 | then back to Body and that will reset it.
Command+Return to commit. Next block, select all.
| | 02:23 | I'll go to Basic Paragraph and then
back to Body, then Clear Overrides.
| | 02:30 | Command+Return to accept. And then up
here for our Welcome text, we'll do a
| | 02:34 | select all, Basic Paragraph, then
back to Body, and then Clear Overrides.
| | 02:41 | Command+Return to accept the text exchanges.
| | 02:43 | So now we have the body text assigned
to all four of these Paragraph Styles.
| | 02:48 | To test this, let's come back to the
Paragraph Style, let's double-click Body,
| | 02:52 | and if I come in here and make a
change, Color for example, and come in here
| | 02:57 | and make the Type Red, we'll see that
all four text blocks in the background
| | 03:00 | now show up as red.
| | 03:01 | So I now have a Paragraph Style linked
to all of these individual text blocks.
| | 03:06 | So I am going to hit Cancel
here and then Cancel one more time.
| | 03:09 | So now that I have my workspace
adjusted and I have my first Paragraph Style in
| | 03:11 | place, next we'll create a
Paragraph Style for the headings.
| | Collapse this transcript |
| Creating a paragraph style for the headings| 00:00 | Now we are going to style
the headings for our web page.
| | 00:02 | So let's come down and select the Welcome text.
| | 00:05 | With this selected, let's come up to
Paragraph Styles, create a new style.
| | 00:09 | I'll double-click Paragraph Style
1 to rename it and set properties.
| | 00:12 | First we'll name this h1.
| | 00:17 | Let's come down to the Type
Size. I'll type in 28 points.
| | 00:22 | Now, as I make changes, notice you
can see the changes in the background.
| | 00:26 | Let's come over to Color, click on the
swatch, get the Eyedropper tool over in
| | 00:30 | the canvas area. Let's select Orange and click OK.
| | 00:35 | Next let's come down to Indents and Spacing.
| | 00:37 | I want to set Spacing after the
paragraph of 12 points, and once I have these in
| | 00:43 | place, I'll come up and click OK.
| | 00:44 | Now with our h1 created, let's
come down and create our h2s.
| | 00:47 | So let's come down and select the Promo
Heading. Let's make a new paragraph style.
| | 00:53 | Double-click this, rename this one h2.
| | 00:56 | We are going to set the Size to 16 points here.
| | 01:02 | Click on the color swatch.
We'll select the same orange color, click OK.
| | 01:07 | For the Font Style we are
going to come in and choose Bold.
| | 01:10 | I don't want to change anything about
the Spacing, and then we'll click OK.
| | 01:14 | So now with the h2 assigned,
let's select the text for Promo Heading 2.
| | 01:20 | Let's come up to the Paragraph
Styles. Let's assign heading 2.
| | 01:25 | Commit the changes, select the third
Promo Heading, assign the h2 paragraph style, and
| | 01:31 | then commit the changes.
| | 01:34 | So now with our headings styled,
next we are going to create a style to
| | 01:37 | represent our hyperlinks.
| | Collapse this transcript |
| Creating a character style for hyperlinks| 00:00 | Next I want to create a character
style to represent the hyperlinks.
| | 00:03 | So I want to do a few things here.
| | 00:04 | One, I want to make sure that there is
no overrides, such as Italic or Bold font
| | 00:07 | faces, and two, I don't want to apply
this style to the selected text block.
| | 00:14 | So first, in the Layers panel, let's
select any layer that's not a text layer.
| | 00:17 | Next, let's come up to Character Styles.
Let's create a new Character Style.
| | 00:21 | Then let's double-click it.
| | 00:23 | Let's name this link.
| | 00:25 | Notice when we have no text selected,
all of these properties are empty.
| | 00:29 | Let's come down and click Underline,
then Color, and come down and choose the
| | 00:34 | blue from the triangle in the
Promo area. Click OK, then OK again.
| | 00:40 | Now, let's come into the
Welcome text. Let's select some text.
| | 00:44 | Come over and apply the link
Character Style, commit the text.
| | 00:49 | So now without anything like bold or
italic, we can apply the hyperlink style
| | 00:54 | which will underline and color the
type blue, but it won't hinder things like
| | 00:58 | bold or italic if those
are already set in our text.
| | 01:01 | Now, you'll notice that we have learned
more text in our Promo areas. We're going
| | 01:04 | to first create a Paragraph Style with
these since we want to style the type a
| | 01:07 | little bit differently and then
we'll apply the Character Style as well.
| | 01:11 | That way we can control all the
linking colors from the Character Style.
| | Collapse this transcript |
| Combining paragraph and character styles| 00:00 | Now to style the Promo links, let's
come down and select the Learn more
| | 00:03 | inside of the first Promo.
| | 00:06 | With that selected, let's come up
and create a new Paragraph Style.
| | 00:11 | Once that's created, let's double-click this.
| | 00:16 | We'll name this promo_link.
Let's come down to the Font Size.
| | 00:21 | Let's set this to 11 points.
| | 00:24 | Let's turn on Faux Bold,
set the Case to All Caps.
| | 00:29 | Next, let's come over to Indents and
Spacing. Let's add 6 points of spacing
| | 00:32 | before the paragraph.
| | 00:33 | Now when I tab to the next field, you
can see that actually showing up here on
| | 00:37 | the stage, then we'll click OK.
| | 00:41 | Now let's come down, let's select
Learn more. Let's apply the Character Style
| | 00:46 | link. And for these links I don't want to
have an underline, so I am going to hit
| | 00:51 | Command+Shift+U or Ctrl+Shift+U in
Windows to remove the underline. Next I'll
| | 00:55 | come up and I'll commit the changes.
| | 00:57 | So now with the Character and Paragraph
Style in place, let's select Learn more
| | 01:02 | from the second Promo. Let's apply promo_link.
| | 01:06 | Next let's assign the Character Style
and then Command+Shift+U or Ctrl+Shift+U
| | 01:10 | on Windows to take off the underline.
Command+Return or Ctrl+Return to commit
| | 01:15 | the text changes, and then we'll
do the same thing on the third one.
| | 01:19 | Select the Learn more, assign promo
_link, assign the Character Style,
| | 01:24 | Command+Shift+U or Ctrl+Shift+U,
then Command+Return or Ctrl+Return to
| | 01:27 | commit the text changes.
| | 01:28 | Now let's come over to the Move tool.
| | 01:31 | With the Move tool selected, I'll hold
the Command or Ctrl key. I am going to
| | 01:34 | select the first arrow here, hold the Shift key;
| | 01:38 | select the second, then the third arrow.
| | 01:41 | With all three arrows selected, which
are Smart Objects, as you can see in the
| | 01:44 | Layers panel, I am going to hit the down
arrow and just move these over in the place.
| | 01:48 | Now the reason I wanted to do the
underline overwrite on the Promo links and
| | 01:52 | set them up as a separate paragraph
was so that we can come back to the
| | 01:55 | Character Styles, double-click this, and then I
could come back and change the linking color.
| | 01:59 | So if I decide later I want to change
the link color, maybe we're going to
| | 02:04 | make it orange just like the headings,
maybe a little bit lighter, I'll come in
| | 02:08 | and make this change. Click OK, you'll
notice that the type is changing inside
| | 02:11 | of the intro text and for each one of
individual Promo links. I can choose OK.
| | 02:18 | The arrows are also inside of Smart Objects,
so I'll double-click one of the Smart Objects.
| | 02:22 | Let me zoom up here. This will bring
up the Smart Object for that arrow.
| | 02:28 | Get the Eyedropper tool.
| | 02:29 | We'll come down and
select that later orange text.
| | 02:32 | Then holding Option+Shift+Delete or Alt+
Shift+Delete in Windows, I can fill the
| | 02:36 | arrow with the foreground color.
| | 02:38 | Come up to the File menu, come down
and choose Save, and then you'll see the
| | 02:42 | arrows are now orange in addition
to the Promo links now being orange.
| | 02:45 | And as you can see, Paragraph and
Character Styles give you a really quick
| | 02:49 | and efficient way to play with
different design options inside of your web
| | 02:52 | design compositions.
| | 02:53 | And now with our Paragraph and
Character Styles in place, next we'll talk about
| | 02:56 | anti-alias options to match the way
typography looks in different web browsers.
| | Collapse this transcript |
|
|
2. Simulating Anti-Aliasing for Various BrowsersVariations in web browser text rendering| 00:00 | Now if you've ever paid close
attention to the way fonts look inside of
| | 00:03 | different devices and platforms,
you'll notice that the edging on the fonts
| | 00:06 | or the anti-aliasing looks different in
all of these different devices and platforms.
| | 00:11 | This is because each browser and each
device has its own way of representing the
| | 00:15 | shape of a font family.
| | 00:17 | So what I've done here is taken the
final HTML from this project, which is part
| | 00:21 | of the Responsive Web Design course, and
screen captured all of these different
| | 00:24 | devices and platforms so that
we can compare the anti-aliasing.
| | 00:28 | On the right-hand side here, we can
see the five most dramatic differences
| | 00:31 | in the anti-aliasing.
| | 00:32 | So as I go through all of these
examples, you can see how different the
| | 00:35 | anti-aliasing looks across
all of these different browsers.
| | 00:38 | And when we compare all of these
together, you can see that every browser has a
| | 00:41 | slight variation from each other
on how they render these fonts.
| | 00:45 | Now what we're going to cover next
in Photoshop is how we can change the
| | 00:49 | anti-alias settings so you can more
closely represent the text in Photoshop to
| | 00:54 | match what your client is expecting
to see in their chosen web browser.
| | Collapse this transcript |
| Adjusting the anti-aliasing settings for a text block| 00:00 | Now in order to represent different
anti-alias settings inside of Photoshop, I
| | 00:03 | am going to zoom up here on the canvas.
I am going to zoom up on the Welcome
| | 00:08 | text here. Let's get our Text tool.
| | 00:10 | Get your Text tool inside
to activate the text editing.
| | 00:14 | You'll see up here in the Toolbar
we have an anti-alias setting here.
| | 00:17 | So there is five settings. We have
None, which will give you no anti-aliasing,
| | 00:22 | which is how fonts looked
very early on in the web.
| | 00:26 | Next we have Sharp, then Crisp,
then Strong, and then Smooth.
| | 00:34 | Now again, these make very subtle changes,
but as we looked at in the last video,
| | 00:38 | we can see very subtle differences
between all of the browsers and devices on
| | 00:42 | how they render fonts.
| | 00:44 | Now, for a lot of my compositions inside
of Photoshop, I use the Sharp setting.
| | 00:47 | This gives you cleaner anti-aliasing
edges and will actually work better in
| | 00:51 | smaller font sizes as well.
| | 00:52 | So now that we have a handle on
typography inside of Photoshop, next we'll talk
| | 00:56 | about where you might want to go from here.
| | Collapse this transcript |
|
|
