IntroductionWelcome| 00:00 | Hi Everyone! This is Jan Kabili.
| | 00:03 | I'm happy to welcome you to this
title, Photoshop CS3 for the Web
| | 00:07 | Essential Training.
| | 00:09 | It's really exciting to be back
here at lynda.com to do this title.
| | 00:13 | I have been writing and teaching about
Photoshop for the web since back in the
| | 00:17 | days of Photoshop 6,
| | 00:19 | I think it was. I still think it's
really important for anybody who is involved
| | 00:23 | in web design, be it on the design side
or the developer side or the production
| | 00:27 | side, to have a firm grasp of
how graphics are made for the web.
| | 00:33 | And so in this title, I haven't just
focused on features of Photoshop that are
| | 00:37 | related to web design. Instead, I have
tried to hone in on tasks that you will
| | 00:41 | be performing and techniques you'll need to
know as you create graphics for your websites.
| | 00:47 | I hope that you will get ideas for
how to incorporate graphics in your own
| | 00:50 | sites, and that you will learn
efficient production techniques that will save
| | 00:54 | you time and effort in your own work.
| | 00:56 | So let's get started
learning Photoshop CS3 for the web.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Throughout these movies, you will
hear me talk about the Exercise Files.
| | 00:03 | Let's take a minute to discuss what the
Exercise Files are and how you can access them.
| | 00:09 | The Exercise Files are files that I put
together that illustrate the principles
| | 00:14 | that I'll be teaching.
| | 00:15 | For example, here, you can see that we
have Exercise Files arranged by chapter
| | 00:22 | and if you look inside any one of the
chapter folders, you'll see all the files
| | 00:26 | that we use in the movies for that
chapter, and I'll be instructing you in the
| | 00:30 | movies which files to open
and where they're located.
| | 00:34 | If you're a premium member of the
lynda.com Online Training Library or if
| | 00:39 | you're watching these movies from a disc,
then you do have access to these Exercise Files.
| | 00:45 | If you are a monthly or annual
subscriber to lynda.com, unfortunately, you
| | 00:49 | don't have access to these particular
Exercise Files, but you're welcome to
| | 00:53 | use your own assets instead, or you're welcome
to just listen and follow along with me that way.
| | 00:59 | So let's get started.
| | Collapse this transcript |
|
|
1. Customizing the InterfaceOverview of the interface| 00:00 | In this first chapter, we're going to be
taking a look at Photoshop CS3's interface.
| | 00:06 | If you have the Exercise Files and
you're following along with me, open
| | 00:09 | page_comp.psd from the Chapter
01 folder in the Exercise Files.
| | 00:14 | Otherwise, you can open
any document for this movie.
| | 00:18 | I'm amazed that how good a job Adobe
has done of arranging so many features in
| | 00:22 | such a compact well-organized interface.
| | 00:25 | It's pretty easy to find a feature in
this interface even if you're not sure
| | 00:29 | exactly where a feature is, if you
understand the big picture, the way this
| | 00:34 | interface is designed.
| | 00:35 | In this movie, I'm going to give you
a brief tour of Photoshop's interface.
| | 00:39 | There are basically five
components to the interface.
| | 00:42 | At the top of the screen is the menu bar.
| | 00:45 | If I click on any of the
menus, I see lots of commands.
| | 00:49 | This is just like in any piece of software.
| | 00:53 | In the center of the screen,
we have the Document window.
| | 00:57 | The Document window is where our image lives.
| | 01:00 | There is useful information at the
top of the Document window, like the file
| | 01:03 | name, the zoom level, and information about
the color mode and bit depth of the image.
| | 01:10 | At the bottom of the Document
window, there is yet more information.
| | 01:14 | If I click the arrow on the right side
of the Information box, and go down to
| | 01:17 | Show, I see that I can bring up
information about Document Sizes, the Color
| | 01:22 | Profile attached to the document, the
Dimensions of the document, and more.
| | 01:27 | Over on the left side is the Toolbox.
| | 01:31 | If you're an experienced Photoshop
user, you'll notice right away that the
| | 01:34 | Toolbox looks different in Photoshop CS3
than it did in previous versions of the program.
| | 01:40 | What's different is that now, by
default, the Toolbox is a single column.
| | 01:44 | When I first started using this single
column Toolbox in CS3, I had trouble
| | 01:49 | putting my finger right on the tool I
wanted because I was used to tools being
| | 01:53 | in different places.
| | 01:54 | If you're like me, you may want to
switch back to the double column Toolbox
| | 01:57 | temporarily until you get
used to the new configuration.
| | 02:01 | To do that, all you have to do is go
to the double-pointed arrows at the top
| | 02:05 | of the Toolbox and click, and that toggles
you to the double column view of the Toolbox.
| | 02:10 | To go back to single column
view, you just click again.
| | 02:13 | It's not important that you remember
every single tool in the Toolbox, because
| | 02:17 | Photoshop comes with built-in tooltips.
| | 02:20 | So if you are not sure about a
particular tool, just move your mouse over the
| | 02:23 | tool and wait and you'll see a yellow
tooltip that tells you the name of the
| | 02:28 | tool as well as a
shortcut for accessing that tool.
| | 02:31 | So for example, if I wanted to access
the Lasso tool, I either could click on
| | 02:35 | it or I could just type L on my keyboard, as
I'm doing now, and that selects the Lasso tool.
| | 02:43 | Notice that some tools have a little
black triangle at the bottom right.
| | 02:48 | The black triangle indicates that there are
some hidden tools behind the one that you see.
| | 02:51 | For example, right now I'm looking at
the Slice Select tool. Because there is a
| | 02:57 | black triangle there, I know that if I
click on the Slice Select tool and hold,
| | 03:00 | I will see a flyout menu that will
describe the other tool available from this
| | 03:05 | tool spot and that's the Slice tool.
| | 03:08 | Another thing to notice about the
Toolbox is way down at the bottom.
| | 03:12 | If you've used Photoshop in the past,
you may be down here looking for the Jump
| | 03:16 | to ImageReady button.
| | 03:17 | The big news in Photoshop CS3 is that
there is no Jump to ImageReady button, and
| | 03:22 | the reason is RIP for ImageReady,
ImageReady no longer ships with Photoshop as a
| | 03:28 | part of this program, but don't worry
because you're able to still do pretty
| | 03:32 | much everything you could do in
ImageReady to create web graphics.
| | 03:36 | The only thing you can't do now is to
create programmed rollovers and image
| | 03:40 | maps and we're filling some of that
gap for you here at lynda.com by offering
| | 03:46 | you a specially commissioned script
that will allow you to export layer comps
| | 03:52 | as individual sliced web graphics, and we
will talk more about that in future movies.
| | 03:57 | Now, I would like to go up to another piece of
the interface and that's the Tool Options bar.
| | 04:03 | The Tool Options bar is context-sensitive.
| | 04:05 | That means that it displays all of the
options for whichever tool is already
| | 04:09 | selected in the Toolbox.
| | 04:11 | Right now, for example, we have the
Slice tool selected here in the Toolbox, and
| | 04:16 | so we see the options for the
Slice tool in the Tool Options bar.
| | 04:20 | If I select a different tool in the
Toolbox, say the Move tool, notice that the
| | 04:25 | options in the Options bar change.
| | 04:28 | Another thing to notice about the
Options bar is that when you go over on the
| | 04:31 | right, you no longer have a palette
well, which, if you've used Photoshop in the
| | 04:35 | past, you are used to
seeing over here in this area.
| | 04:38 | That's because in Photoshop CS3, there
is a whole new system for docking and
| | 04:43 | collapsing panels so that they remain
accessible without constantly taking
| | 04:47 | up screen real estate.
| | 04:48 | We will be looking at that new
panel system in the very next movie.
| | Collapse this transcript |
| Arranging panels| 00:00 | In this movie, we're going to continue
our tour of the Photoshop CS3 interface
| | 00:05 | by taking a closer look at the panels, which
are over here on the right-side of your screen.
| | 00:12 | If you're following along with me, you
can have any file open for this movie or
| | 00:16 | you can continue to have page_comp.psd
opened from the Chapter 01 folder in
| | 00:21 | your Exercise Files.
| | 00:23 | The panels are the interface element
that usually take up the most real estate
| | 00:27 | on your screen, so Adobe has gone to
some trouble to devise a new system for
| | 00:32 | storing the panels in a way that gives you
the most screen real estate in which to work.
| | 00:38 | You're looking at the default
configuration of the panels, but you don't have to
| | 00:42 | leave the panels this way.
| | 00:44 | You have lots of latitude to
customize the panel arrangement to fit
| | 00:47 | your personal workflow.
| | 00:49 | Notice that the panels are arranged in groups.
| | 00:52 | So for example, here we have the
Navigator panel, the Histogram panel, and Info
| | 00:56 | panel, each of which is represented by a tab.
| | 01:00 | If I click on one of those tabs, it brings
that panel to the forefront of its group.
| | 01:05 | Notice, too, that the panels
are arranged in these columns.
| | 01:10 | By default, we see two columns here.
| | 01:12 | The outer column shows the
panels as full open panels.
| | 01:17 | The inner column shows the
panel in a collapsed view.
| | 01:20 | The purpose of this collapsed view is, of
course, to give you more space in which to work.
| | 01:25 | Panels are represented by
icons in the collapsed view.
| | 01:28 | For example, this icon, here,
represents the History and Actions Panel group.
| | 01:35 | In order to see those Panel groups,
all I had to do was to click on the icon
| | 01:39 | that represents that group and the
group appears temporarily on the screen.
| | 01:43 | I'll click that icon again to close
that Panel group and I can continue down
| | 01:49 | this column clicking on the icons
to temporarily open and close the
| | 01:54 | associated Panel groups.
| | 01:56 | At first, you may not be sure what
each one of these icon stands for.
| | 02:00 | If that's the case, you can go to the
top of the collapsed panel column and
| | 02:05 | click on these three vertical bars and drag
to reveal the names of the panels in the columns.
| | 02:12 | Once you're comfortable with which icon
is which, you can click on those three
| | 02:17 | vertical bars again and drag to the
right and now you'll only see icons again.
| | 02:22 | Even though the panels are all docked
into columns, they remain customizable.
| | 02:27 | So, for example, we can change the amount
of space that's allocated to a Panel group.
| | 02:32 | I'm going to click on the Navigator
tab here and then I'm going to go to the
| | 02:35 | bottom of the Navigator Panel group.
My icon changes to double-pointed arrow,
| | 02:40 | and I can click-and-drag up to reduce
the amount of space allocated to the
| | 02:44 | navigator group and increase the amount of
space allocated to the Panel groups below.
| | 02:50 | I can also change the order
of Panel groups in a column.
| | 02:53 | So, if I'd like to have my Layers panel
group at the top of this column, I just
| | 02:58 | click in a gray area outside of the tabs in that
Panel group and drag to the top of the column.
| | 03:05 | And when I see a single blue bar at
the top of the column, I will let go and
| | 03:09 | that moves the whole
Layers Panel group to the top.
| | 03:13 | Let's say there is a Panel group
that you're not going to be using.
| | 03:16 | You can close that Panel group by
clicking the X on the top right of the group.
| | 03:24 | If you want to reopen the Panel group,
just go to the Window menu at the top of
| | 03:28 | the screen, and choose one
of the panels from that group.
| | 03:32 | So in this case, I will choose the
Histogram panel and all three of the
| | 03:37 | associated panels open up together.
| | 03:39 | You can take any panel out of the docked
column by clicking its tab, as I'm going
| | 03:45 | to do with the Layers panel here, and
dragging over to the left to make that
| | 03:49 | into a free-floating panel, like the
panels in previous versions of Photoshop.
| | 03:55 | You can also dock panels together.
| | 03:57 | So I'm going to go to this inner column
and open the Layer Comps panel, which is
| | 04:02 | related to the Layers panel, and then
I'm going to click on the tab of the Layer
| | 04:06 | comps panel and drag up to just
the bottom of the Layers panel.
| | 04:10 | And when I see a light blue line at the
bottom of the Layers panel, I will let
| | 04:14 | go and now these two panels are docked together.
| | 04:17 | That means that you can
move them around together.
| | 04:19 | So if I click at the top of that whole
column and move, you will that see both
| | 04:23 | columns go together anywhere on my screen.
| | 04:26 | Finally, I can take this whole new
column and dock it with the other columns.
| | 04:31 | So I'm going to click again in this
gray bar at the top of this column and drag
| | 04:35 | up and over to the left of the
existing docked columns and let go and that
| | 04:42 | creates a third docked column.
| | 04:44 | So, that's the new customizable
panel system in Photoshop CS3.
| | 04:49 | If you don't like the way you've
configured your panels, you can always get back
| | 04:52 | to the default configuration like this.
| | 04:55 | Just go up to the Window menu at the
top of the screen, and choose Workspace >
| | 05:00 | Reset palette Locations and
we are back where we started.
| | 05:05 | Panels aren't the only thing
that's customizable in Photoshop CS3.
| | 05:09 | You can also customize your keyboard shortcuts.
| | 05:13 | That's what we're going to learn
how to do in the very next movie.
| | Collapse this transcript |
| Customizing keyboard shortcuts| 00:00 | As you become more comfortable working
in Photoshop, you are going to want to
| | 00:03 | start using keyboard shortcuts
to make your Web work go faster.
| | 00:08 | In Photoshop CS3, you can create
your own custom keyboard shortcuts.
| | 00:13 | I still have page_comp.psd open on my screen.
| | 00:16 | You can use this file from the Chapter 01
Exercise Files folder or any image of this movie.
| | 00:22 | There are several kinds
of shortcuts in Photoshop.
| | 00:25 | Many of the tools in the Tools palette
have shortcuts associated with them as
| | 00:29 | we have already seen.
| | 00:30 | So for example, if I were to press L on
my keyboard, I'll select the Lasso tool.
| | 00:35 | If I move across the screen to the
panels and I click on the panel menu
| | 00:42 | icon on any panel group, that opens a menu
of panel commands associated with that panel.
| | 00:48 | And as you can see, some of
these commands have shortcuts.
| | 00:53 | So for example, here you can
create a new layer by using the shortcut
| | 00:57 | Shift+Command+N on a Mac
or Shift+Ctrl+N on a PC.
| | 01:02 | The Application menus at the top of
the screen also have shortcuts associated
| | 01:06 | with their commands.
| | 01:07 | So, if I go over here to the File
menu and I come down to Save for Web and
| | 01:13 | Devices, I can see that
there is a shortcut here.
| | 01:17 | But it's a really complicated one.
| | 01:19 | It's Option+Shift+Command+S on a
Mac and that's Alt+Shift+Ctrl+S on a PC.
| | 01:26 | I'd like to simply that shortcut,
because it's one that we use often when we are
| | 01:31 | working for the Web.
| | 01:33 | I can do that by creating my own keyboard
shortcut for this command, as we'll do in a minute.
| | 01:39 | First, I want to show you another
command that we often use for the Web.
| | 01:43 | If I go to the Layer Application menu
and I go down to a New Layer Based Slice I
| | 01:51 | see that there is no shortcut
associated with this command and we are often
| | 01:54 | making New Layer Based Slices as we
will learn to do later in this series.
| | 01:59 | So we are going to learn how to use
the keyboard shortcut feature to add a
| | 02:03 | shortcut, to a command like this
one, that has no shortcut already.
| | 02:09 | Let's go up to the Edit menu at the
top of the screen and move down to
| | 02:13 | Keyboard Shortcuts.
| | 02:15 | That opens the Keyboard
Shortcuts and Menus dialog box.
| | 02:19 | The first thing I am going to do here
is go up to the Set area and instead of
| | 02:23 | modifying the default set of keyboard
shortcuts, known as the Photoshop Defaults,
| | 02:28 | I am going to create a brand new set of
keyboard shortcuts, and I am doing that
| | 02:33 | just to protect my Photoshop Defaults.
| | 02:36 | So I'll click here on the New Set
button, and in the Save window that opens,
| | 02:42 | I'm going to give this set of keyboard
shortcuts a name, I'll call it my web.kys shortcuts.
| | 02:50 | KYS is just the file format
suffix for a keyboard shortcut set.
| | 02:57 | I'm going to save my new keyboard
shortcuts in its default location, right here
| | 03:02 | in the Keyboard Shortcuts folder.
| | 03:04 | That's important so that I can access my new
set from the Set menu at the top of the screen.
| | 03:10 | Let's save so you can see what I mean.
| | 03:12 | I am clicking the Save button and now
we can see that in the Set menu, we have
| | 03:17 | our new web set of keyboard shortcuts.
| | 03:21 | The next thing I want to do is go in
and alter that keyboard shortcut for the
| | 03:25 | Save for Web and Devices window.
| | 03:27 | I am going to go down to this menu that
says Shortcuts For and make sure it is
| | 03:31 | set to show me the shortcuts for
Application menus, rather than for Palette
| | 03:36 | menus or for Tools.
| | 03:39 | Then I'm going to go down into this
area and find the File menu and click it's
| | 03:45 | arrow, and then I'm going to scroll
down until I see Save for Web and Devices
| | 03:54 | command right here, and you can see
the awkward shortcut that, by default, is
| | 03:58 | associated with this command.
| | 04:00 | I am just going to click on that
shortcut to open an editing field and I'm going
| | 04:05 | to choose a different shortcut.
| | 04:07 | I am going to press the Command key and
the Comma key, that would be the Ctrl key
| | 04:11 | and the Comma key on a PC.
| | 04:15 | And that sets a new shortcut for Save
for Web and Devices that's a lot shorter
| | 04:19 | than the original one.
| | 04:20 | I am going up to the right here and
clicking Accept to set that as my new Save
| | 04:26 | for Web and Devices shortcut.
| | 04:28 | Now let's go to another Application
menu in this dialog box to give the Layer
| | 04:32 | Based Slicing command a shortcut.
| | 04:34 | I am going to scroll up and collapse my
File menu commands and then I will move
| | 04:41 | down to my Layer commands here and
toggle those open, and then I'll have to
| | 04:46 | scroll again until I find the
New Layer Based Slice command.
| | 04:53 | And as we saw in the Application menu,
there is currently no shortcut associated
| | 04:58 | with this command even though
it's one we often use in Web work.
| | 05:01 | So I am just going to click to the
right of this command to open the editing
| | 05:05 | field and I am going to choose a
shortcut on a keyboard, I'm going to press F5.
| | 05:10 | This brings up a message
telling me that F5 is already in use.
| | 05:14 | It's actually a shortcut for
opening the Brushes palette.
| | 05:18 | I don't use the Brushes
palette very often in my Web work.
| | 05:21 | I certainly use the New Layer Based
Slice command more often and so I'm willing
| | 05:25 | to give up the F5 command for the
Brushes panel and apply that shortcut to the
| | 05:29 | New Layer Based Slice command instead.
| | 05:32 | So, I am just going to go up
to the right and choose Accept.
| | 05:34 | Now I am going to press OK.
| | 05:38 | Back in my main editing workspace, I am
going to go to the File menu and down to
| | 05:43 | Save for Web and Devices.
| | 05:45 | And as you can see there, that command
now has the Command+Comma shortcut, or on
| | 05:49 | a PC, you'd see Ctrl+Comma here.
| | 05:52 | And if I go to my Layer Application
menu and I move down to New Layer Based
| | 05:57 | Slice, you can see that this
command has a shortcut too, F5.
| | 06:03 | If you're giving your commands and
your tools new shortcuts you are going to
| | 06:07 | need some record of the
shortcuts that you have applied.
| | 06:10 | You can do that by going to the Edit
menu at the top of the screen and back down
| | 06:14 | to Keyboard Shortcuts.
| | 06:16 | In the Keyboard Shortcuts and Menus
dialog box, you can move over to the right
| | 06:20 | and click on the Summarize button.
| | 06:22 | In the Save window that opens, I'm
going to save a copy of my New Keyboard
| | 06:27 | Shortcut Set to my
desktop and so I'll click Save.
| | 06:31 | This opens my default Web Browser,
Safari, with a list of all my new
| | 06:35 | keyboard shortcuts.
| | 06:37 | If I scroll down to the File area here,
I can see Save for Web and Devices,
| | 06:44 | Command+Comma, or Ctrl+Comma on a PC.
| | 06:49 | And if I scroll down to the Layers
area, I can see my New Layer Based Slice
| | 07:00 | command listed with its new F5 shortcut.
| | 07:03 | So, that's how you can keep a
record of all your personal shortcuts.
| | 07:09 | Stay tuned for the next movie, in
which we're going to learn how to set up a
| | 07:13 | custom workspace for your Web work,
including the keyboard shortcuts that
| | 07:17 | we've created here.
| | 07:18 | And then to save it all so that you
can come back to your personal Web
| | 07:23 | work space at any time.
| | Collapse this transcript |
| Saving custom workspaces| 00:00 | In the last two movies, you
learned how to customize panels and
| | 00:04 | keyboard shortcuts.
| | 00:06 | Once you've gone to all that trouble,
wouldn't it be nice to be able to save those
| | 00:09 | custom configurations so that you
could bring them back at any time.
| | 00:13 | It's easy to do in Photoshop CS3.
| | 00:16 | I'll show you how in this movie.
| | 00:18 | If you are working along with me, you
can leave page_comp.psd open from the
| | 00:23 | chapter01 Exercise Files folder, or
you can use any image for this movie.
| | 00:29 | The first thing I want to do is to set
up a configuration of panels that's one
| | 00:33 | that I might actually use when doing Web work.
| | 00:36 | To do that, I am going to go to the
tool Options Bar here at the top of the
| | 00:39 | screen and over to the right side of
the Options Bar, where there is a new
| | 00:43 | button in Photoshop CS3, the Workspace button.
| | 00:47 | From the Workspace menu, I am going to
choose one of the preset workspaces that
| | 00:51 | ships with Photoshop CS3 and
that's the Web Design Workspace.
| | 00:58 | Let's see what this does for us.
| | 01:00 | It sets up our panels in a way that I
think is reasonable for Web work, with the
| | 01:04 | navigator, colors, swatches, layers and
other related panels showing on screen.
| | 01:09 | In addition to arranging the panels,
this preset Workspace also does something
| | 01:14 | interesting to my menus
at the top of the screen.
| | 01:17 | If I choose any one of the menus, say
the Layer menu, you can see that some
| | 01:21 | items in the menu are now purple.
| | 01:24 | The idea here is to highlight commands
that are often used in a Web Design workflow.
| | 01:30 | To be honest, I'm not sure I totally agree
with the items that are labeled in purple here.
| | 01:35 | So, I'm not thrilled about keeping this
feature of the Workspace, and we'll see,
| | 01:39 | in just a minute, how we can
ignore the menu changes here.
| | 01:43 | So, the preset Web Design Workspace is
almost what I want, but I want to do a
| | 01:47 | little customization of my own.
| | 01:49 | One thing I want to do is to add
the Layer Comps panel to this panel
| | 01:53 | configuration, because I often use layer
Comps when I'm slicing an image in Photoshop CS3.
| | 01:59 | So I'm going to go to Window menu at
the top of the screen and I'm going to go
| | 02:03 | down and choose Layer Comps.
| | 02:06 | That opens the Layer Comps panel as a
flyout panel from an icon in an inside
| | 02:12 | column of docked panels.
| | 02:14 | I'll click that icon to close the Layer
Comps panel and now I have the panel
| | 02:19 | configuration that I want
for my Web Design workflow.
| | 02:22 | Let's check that our keyboard
shortcuts are also still set for Web Design.
| | 02:27 | I'm going to go to File and I'm
looking at Save for Web and Devices.
| | 02:32 | In the previous movie, I showed you how
to change the awkward shortcut that's
| | 02:36 | associated with this command by default
to an easier shortcut, Command+Comma on
| | 02:40 | the Mac, or Ctrl+Comma on the PC,
and that command is still there.
| | 02:44 | I'll check another shortcut that
I set up in the previous movie.
| | 02:50 | In the Layer menu, I'll go down and
check New Layer Based Slice and there is the
| | 02:55 | F5 shortcut that I added as
a custom keyboard shortcut.
| | 02:59 | So now that I've got everything set up
the way I wanted in terms of keyboard
| | 03:03 | shortcuts and panel
configurations for my Web Design workflow,
| | 03:07 | I'm going to save that as one bundle
by moving to the Workspace button in
| | 03:12 | the Tool Options Bar.
| | 03:14 | From the Workspace menu, I'm
going to choose Save Workspace.
| | 03:18 | I'll name this 'my web workflow' workspace.
| | 03:24 | I'm going to capture both my Palette
Locations and my new Keyboard Shortcuts,
| | 03:30 | but I'm really not interested in
capturing those purple menu labels, so I'm
| | 03:34 | going to uncheck menus,
and then I'll click Save.
| | 03:38 | Now I'm going to go back to the default
configuration by going to the Workspace
| | 03:42 | menu and choosing Default Workspace
and I'm doing this so I can show you how
| | 03:47 | easy it is to toggle back and forth
between the original Default Workspace and
| | 03:53 | the special customized 'my web
workflow workspace' that we just set up.
| | 03:58 | So here I'll choose Default Workspace.
Notice that all the panels are back to
| | 04:01 | their defaults, and under the File
menu Save for Web and Devices now has its
| | 04:06 | long awkward shortcut, and under the
Layer menu, New Layer Based Slice has no
| | 04:12 | shortcut at all, which is the default behavior.
| | 04:15 | Now if I want to go back to my
customized web workspace at any time, I just
| | 04:20 | go to the Workspace button at the top
of the screen in the Tool Options Bar and
| | 04:25 | I choose my web workflow.
| | 04:28 | And now I've got all my palettes the
way I want them, and I've got my keyboard
| | 04:32 | shortcuts for Save for Web and
Devices and for New Layer Based Slice.
| | 04:40 | That completes our look at
the Photoshop CS3 interface.
| | 04:44 | In the next chapter, we are going to
be tackling a new subject, Digital Asset
| | 04:49 | Management, using a program that
ships with Photoshop CS3, Bridge CS3.
| | 04:54 | I hope you'll join me
for that chapter of movies.
| | Collapse this transcript |
|
|
2. Managing Digital Assets with BridgeOverview of Bridge| 00:00 | When you're designing a website,
you'll have a lot of assets to organize.
| | 00:05 | You'll have source assets, like native
Photoshop documents or maybe some raw
| | 00:09 | digital photographs, which
are not optimized for the web.
| | 00:13 | And then you'll have
optimized versions of assets.
| | 00:17 | You may have some JPEGs, some GIFs,
some PNGs, some SWF files that you have
| | 00:22 | finished processing and
compressing for using your website.
| | 00:26 | One of your important jobs as a site
designer or producer is to manage all those
| | 00:30 | assets, and that's where
Adobe Bridge comes into play.
| | 00:35 | The focus of this chapter is managing
digital assets for the web using Adobe Bridge CS3.
| | 00:42 | In the first movie in this chapter,
we'll be looking at the structure of the
| | 00:45 | Adobe Bridge interface as we browse
through some website assets in Bridge.
| | 00:51 | In later movies, we'll discuss some
ways to organize and manage website assets
| | 00:55 | in Adobe Bridge CS3.
| | 00:58 | So, what is Bridge?
| | 01:00 | Bridge is an animal
called a Digital Asset Manager.
| | 01:05 | It's a type of program that's used to
browse, organize, and manage digital
| | 01:09 | assets for your websites.
| | 01:11 | If you own a copy of Photoshop CS3
or one of the Adobe Creative Suite 3
| | 01:16 | packages, you have a free
copy of bridge on your computer.
| | 01:20 | Although Bridge is not technically part
of Photoshop, it is designed to be used
| | 01:24 | with Photoshop as well as with other
Adobe Creative Suite programs, and that's
| | 01:29 | why we are talking about it
here in a Photoshop title.
| | 01:32 | We're talking about Bridge near the
beginning of this Photoshop title because
| | 01:35 | managing site assets is something you
need to think about and start doing right
| | 01:40 | from the beginning of your design process.
| | 01:43 | So let's get in and launch Bridge.
| | 01:45 | You can launch Bridge from any
Creative Suite app, including Photoshop.
| | 01:50 | There are several ways to
launch Bridge from Photoshop.
| | 01:53 | If you would like Bridge to always open
every time that you open Photoshop, then
| | 01:57 | you can go into your Photoshop Preferences.
| | 02:00 | On a Mac, Preferences are located
under the Photoshop menu, and on a PC,
| | 02:07 | Preferences are located in the Edit menu.
| | 02:09 | I am going to choose the General
category in Preferences, and here you can see
| | 02:14 | that there is a checkbox for
Automatically Launching Bridge, and that means that
| | 02:18 | Bridge will open whenever you open Photoshop,
| | 02:21 | but I'm not going to do that because
I'm going to show you next how to open
| | 02:24 | Bridge on a case-by-case basis.
| | 02:26 | So, I'll just cancel out of this dialog.
| | 02:29 | If you do want to open Bridge on a
case-by-case basis, you can just go to the
| | 02:33 | File menu in Photoshop and choose Browse,
or you can go to the Tool Options Bar
| | 02:41 | and click the little Bridge icon here.
| | 02:45 | If Bridge is not already open, that will
launch the program, and you can see the
| | 02:50 | main Bridge interface here.
| | 02:52 | We're going to explore that
interface in the next movie.
| | Collapse this transcript |
| The Bridge interface| 00:00 | Now that you know that Bridge can be
used as a Digital Asset Manager for website
| | 00:05 | assets, and you've learned how to launch
Bridge, let's take a look at the Bridge
| | 00:10 | Interface, which is basically the
collection of panels that you see here.
| | 00:14 | Let's say you are browsing to take
a look at some digital assets that
| | 00:18 | you're using in a website.
| | 00:20 | A good place to start in Bridge is
over in the Favorites panel on the left.
| | 00:25 | The Favorites panel is a collection of
frequently accessed locations on your hard drive.
| | 00:30 | In this case, I know that I'm looking for
some assets that are somewhere on my desktop.
| | 00:34 | So, I'll click on
Desktop in the Favorites panel.
| | 00:36 | Now if I want to drill down further,
I'll click on the Folders panel.
| | 00:42 | Here I can see a hierarchy of folders.
| | 00:44 | I'm going to click the arrow to the left
of the Exercise Files folder, located on
| | 00:48 | my Desktop, and I'll see a hierarchy of
subfolders in the Exercise Files folder.
| | 00:54 | I'm pretty sure the files I want are
in the chapter02 folder, so I'll move my
| | 00:57 | mouse there and click.
| | 01:00 | Now I can see, in the main Content panel
in the middle of the screen, thumbnails
| | 01:04 | of all of the assets that are in that
chapter02 subfolder, including some more
| | 01:10 | subfolders, formats and javaco_images.
| | 01:12 | I can get a better view of any one of
these images by clicking its thumbnail,
| | 01:17 | here in the Content panel.
| | 01:21 | Over on the right, I see a larger
higher-quality preview of the selected image,
| | 01:26 | and below, in the Metadata panel, I see
information about that selected image.
| | 01:32 | If the image is a photograph, like this
one, some of that information is arranged
| | 01:36 | in this LCD screen that
resembles the LCD on a digital camera.
| | 01:40 | So for example here, we can see the
shutter speed at which the photo was taken,
| | 01:45 | the f stop that was used when the photo
was taken, and even the ISO that is the
| | 01:50 | equivalent of film speed.
| | 01:53 | Moving down in the Metadata panel, we
see more information about the File
| | 01:57 | Properties, and here, we see some
information called IPTC Core, and if I twirl
| | 02:03 | down the arrow next to that entry, I see
some fields that I can actually fill in
| | 02:07 | here, appending some more metadata to this file.
| | 02:11 | So for example, if I wanted to list
the creator of this photograph, I could
| | 02:15 | click in this space to the right of
Creator and I could type the name of the author.
| | 02:22 | This is true of any of these fields
where you see a little pencil icon.
| | 02:26 | Behind the Metadata panel is the Keywords panel.
| | 02:30 | Here I can assign keywords to any
selected images, and then, later, I can search
| | 02:35 | by those keywords to help locate images
on particular subjects, and we'll look
| | 02:40 | more at keywording in a later movie.
| | 02:42 | And finally, over on the left, I have a
Filter panel, which we are also going to
| | 02:47 | investigate in a later movie.
| | 02:48 | That helps me to sort and find
files with particular characteristics.
| | 02:54 | So, that's an overview of the Bridge Interface.
| | 02:57 | In the next movie, we'll learn how to
customize the Bridge Interface to suit
| | 03:01 | your individual needs.
| | Collapse this transcript |
| Customizing Bridge| 00:01 | In this movie, we'll look at how to
customize the Bridge Interface to suit
| | 00:04 | your personal workflow.
| | 00:06 | We'll also learn how to save custom
workspace configurations so that you can
| | 00:10 | return to them in the future.
| | 00:12 | One thing that you can do is to change the
size of the thumbnails in the Content panel.
| | 00:18 | To zoom in and make the thumbnails
bigger, I am going to press a keyboard
| | 00:21 | shortcut, Command+Plus on
the Mac, or Ctrl+Plus on a PC.
| | 00:27 | That zooms in to make the thumbnails pretty big.
| | 00:30 | And then to go the other way and
zoom out, press Command+Minus on the Mac,
| | 00:34 | or Ctrl+Minus on a PC.
| | 00:38 | You could also use the slider at the
bottom of the Interface to do the same
| | 00:41 | thing, zooming in, zooming out.
| | 00:46 | You can change the spacing between any
of the panels in the Bridge Interface.
| | 00:51 | So for example, I might come over to the
right-hand side of the screen and hover
| | 00:55 | over the border between the Preview
panel and the Keywords panel and move down
| | 01:00 | if I wasn't interested in seeing my
keywords but I wanted to have a bigger
| | 01:03 | preview of this image.
| | 01:05 | And notice that the preview adjusts
itself to just fit in the Preview panel, no
| | 01:09 | matter what size I make that panel.
| | 01:12 | Now I'm going to hover over the
vertical border here between the Preview panel
| | 01:15 | and the Content panel and move over to
the left, and Bridge zooms into my image
| | 01:22 | to fill that new Preview panel space.
| | 01:26 | Bridge comes with some preset
configurations that look quite different than the
| | 01:31 | default that we've been playing with here.
| | 01:33 | If you move to the bottom of the screen,
you'll see three buttons, numbered 1, 2 and 3.
| | 01:38 | I'm going to click-and-hold on the
first button, then select Light Table from
| | 01:43 | the resulting menu and the interface
changes configuration to resemble a Light
| | 01:47 | Table. In other words, all of the
panels have moved away and all we see is the
| | 01:52 | Content panel with its
thumbnails filling the entire screen.
| | 01:56 | Let's take a look at another preset workspace.
| | 01:59 | Now I am going to click on button
number 2 at the bottom of the screen, and I
| | 02:04 | see a new configuration.
| | 02:06 | This is the horizontal filmstrip, in
which the Content panel is at the bottom
| | 02:11 | with its thumbnails and I can click on
those thumbnails to see larger versions
| | 02:15 | of the images in the Preview
panel, which is now up here.
| | 02:19 | Let's try one more.
| | 02:20 | I'm going to click on buttons number
three and this takes me, by default, to this
| | 02:24 | Metadata view, where I see the
Content panel with its thumbnails here with
| | 02:29 | information about each thumbnail to the right.
| | 02:32 | You don't have to accept the presets
that are associated by default with each
| | 02:36 | one of these buttons.
| | 02:38 | So let's say for example, I wasn't
interested in this Metadata view and I wanted
| | 02:42 | button number 3 to bring
up a different configuration.
| | 02:45 | Then I could go down to button number
3, press-and-hold and choose, instead
| | 02:50 | of this Metadata Focus View,
say the Vertical Filmstrip View.
| | 02:57 | Now I've got my Content panel here
on the right and I've got big
| | 03:01 | previews here in the middle.
| | 03:03 | I can scroll up to see more thumbnails here
and click through them to see large previews.
| | 03:09 | I really like this configuration.
| | 03:12 | In fact, I like it so much that I would
like to modify it a bit and save it as my
| | 03:17 | own custom configuration.
| | 03:19 | First thing I'd like to do is to
close all these panels on the left.
| | 03:23 | So, I am going to go and hover over the
bar between the column of panels on the
| | 03:27 | left and the Preview panel
and drag over to the left.
| | 03:31 | And then I'm going to go to the right
and hover over the bar between the Preview
| | 03:36 | and Content panels and drag to the left
until I see two columns of thumbnails.
| | 03:43 | That's the configuration that I want to save.
| | 03:45 | So, I'll go down to button number
3 yet again, press-and-hold and
| | 03:51 | choose Save Workspace.
| | 03:54 | I'll call this 'double vertical' and click Save.
| | 04:00 | Now this workspace is
available for me to access any time.
| | 04:04 | So let's say, for example, that I went
back to the first button and was in Light
| | 04:09 | Table View, I could always get back to
my custom double vertical configuration
| | 04:14 | by pressing button number 3.
| | 04:15 | I want to show you one more
thing about customizing Bridge.
| | 04:21 | You can minimize Bridge to its compact
configuration by going to this button at
| | 04:26 | the top-right and clicking.
| | 04:29 | Now Bridge is minimized to Compact mode.
| | 04:32 | This is useful because you might have
another program, like Dreamweaver, open
| | 04:35 | behind Bridge and you could just take
images from Bridge and drag them from the
| | 04:41 | Bridge Interface into the Dreamweaver
Interface, if that were open, and that
| | 04:45 | works with some other programs as well.
| | 04:47 | Now that you know how to customize
Bridge to your liking, let's move on to
| | 04:51 | the heart of the Digital Asset
Management matter, organizing your assets in
| | 04:56 | Adobe Bridge.
| | Collapse this transcript |
| Organizing assets| 00:00 | In this movie, we're going to get down
to the nitty-gritty of using Bridge as a
| | 00:04 | Digital Asset Manager for Web work.
| | 00:06 | We're going to be using Bridge to
organize some assets for a website.
| | 00:11 | If you've been working along with me,
then your copy of Bridge may look like
| | 00:14 | mine, because at the end of the last movie
we minimized Bridge to this Compact mode.
| | 00:20 | To bring it back to Full mode, I am
going to go to this icon at the top-right of
| | 00:24 | Bridge and click there, and then to
make sure I am in Default View, I am going
| | 00:30 | to go to Window>Workspace>
Reset to Default Workspace.
| | 00:36 | Our goal in this movie is to take all
of the assets that you see here in the
| | 00:40 | Content panel of Bridge and
organize them into two groups.
| | 00:45 | In one group, we'll put all of the files
that have already been optimized for the
| | 00:49 | web, and in the other, we'll
put all of the Source Files,
| | 00:52 | files that have not yet been processed
and optimized for the web, but that we
| | 00:56 | are considering using in a website.
| | 00:57 | We'll start by creating two folders
on our desktop to contain those two
| | 01:01 | categories of assets.
| | 01:04 | From inside Bridge, you can create new folders
| | 01:07 | that will actually be
created on your hard drive.
| | 01:10 | In order to access the desktop from
Bridge, I'm going to go to the Favorites
| | 01:13 | panel on the left and I'm going
to click on the Desktop Favorite.
| | 01:17 | Then I'm going to go into the Content
panel of Bridge and on a Mac, I am going
| | 01:22 | to hold the Ctrl key as I click, on a
PC you would right-click, and that brings
| | 01:28 | up this contextual menu from
which I'm going to choose New Folder.
| | 01:32 | I'll name the new folder Source Files, and
I'll click at the empty area of the Content panel.
| | 01:40 | I'm going to repeat that, Ctrl+Click on
a Mac or right-click on a PC, and make
| | 01:45 | another new folder and I'll
call this one Optimized Files.
| | 01:51 | Now I want to be sure that I have
favorite shortcuts to these two folders and
| | 01:56 | so I am just going to take both of
them by Command+Clicking the two folder
| | 02:01 | icons, on a PC that would be Ctrl+Clicking, and
dragging both icons into the Favorites panel.
| | 02:07 | Now it's important that you not land
inside of one of the existing folders
| | 02:11 | there. Instead, make sure that you see a
light-blue line, like my line here under
| | 02:16 | the word, Jan, and then let go, and
that creates shortcuts to both of those
| | 02:20 | folders, which live on the
desktop of your computer.
| | 02:24 | I am going to make one more shortcut, this
time to the chapter02 Exercise Files folder.
| | 02:30 | I'll double-click the Exercise Files
folder here in the Content panel, I'll
| | 02:34 | select the chapter02 folder and I'll
drag it into the Favorites panel, again
| | 02:39 | releasing my mouse when I
see the light-blue line.
| | 02:42 | Now, I'm going to select the chapter02
folder and, in the Content, panel notice
| | 02:47 | that we have thumbnails for each file
that's in the chapter02 folder and there
| | 02:52 | are even thumbnails for two subfolders
that are inside the chapter02 folder.
| | 02:57 | One of those subfolders is called Formats.
| | 03:00 | Let's take a peek inside of that
subfolder by double-clicking it.
| | 03:05 | I wanted you to see all of the odd file
formats that are in this folder, so that
| | 03:11 | you know that Adobe Bridge can display
not just GIFs and JPEGs and Photoshop
| | 03:16 | documents but files made in all kinds
of other applications, particularly Adobe
| | 03:21 | Creative Suite 3 applications.
| | 03:23 | So for example, here we have an AI file from
Illustrator, an EPS file from Illustrator.
| | 03:29 | This is an InDesign file. Here is a
TIF and even a Windows Bitmap file.
| | 03:35 | That's because Adobe Bridge is intended to be
a central hub for all kinds of digital assets.
| | 03:41 | Let's go back up to the chapter02
folder by clicking this Go Up icon at the top
| | 03:45 | of the screen, and now what I'd like to
do is to flatten these two subfolders so
| | 03:50 | that their contents appear in the
Content panel, right up at the same level as
| | 03:55 | all these other files.
| | 03:57 | To do that, I'm going to go over to the
Filter panel on the left and I'm going
| | 04:01 | to click this icon, one of my
favorite new features in Bridge CS3.
| | 04:06 | This is the Flatten Folder icon.
| | 04:08 | Keep your eye on the
Contents panel as I click this icon.
| | 04:12 | Notice that the subfolders have now
disappeared and their content, for example
| | 04:17 | the teapot bitmap file that we saw a
minute ago, now appears up at the same level
| | 04:23 | as the chapter02 content.
| | 04:26 | Now what I want to do is to filter out
all the files that are of file formats
| | 04:32 | that are not compatible with the web,
because those files are ones that have not
| | 04:36 | yet been processed for use in a website.
| | 04:39 | And I want to store those in the
Source Files folder that we made and saved
| | 04:43 | here as a favorite.
| | 04:45 | I don't have to filter those non-web-
friendly files out by hand. Instead, I'm
| | 04:50 | going to use a filter that's built into
the Filter panel over here on the left,
| | 04:55 | and that's the File Type Filter.
| | 04:58 | This filter lists all the different
file formats that are represented currently
| | 05:01 | in the Content panel along with a
number that represents how many of each kind
| | 05:07 | of file are there in the Content panel.
| | 05:10 | I'm going to put a checkmark to the left of
each file format here that is not web-friendly:
| | 05:15 | Bitmap, EPS, we'll skip GIF
because that is a web format,
| | 05:20 | Illustrator, InDesign, JPEG's
a web format, Photoshop and TIF.
| | 05:25 | And as I did that, the files of those
formats showed up in the Content panel, and
| | 05:31 | only those files are there now.
| | 05:33 | So now, I can select all these non-
web files, clicking at the top-left file,
| | 05:39 | holding the Shift key and clicking the
bottom-right file, and drag all those
| | 05:43 | non-web files, those files that haven't
yet been processed for the web, into my
| | 05:48 | Source Files Favorite in the Favorites panel.
| | 05:53 | Now that I've moved all the files
that are not web-friendly into the Source
| | 05:56 | Files folder, the only files that
still remain in the chapter02 folder are
| | 06:02 | those that we see here,
| | 06:03 | those that do have web-
friendly suffixes, JPEG or GIF.
| | 06:09 | However, I don't have any way of
knowing whether all of these JPEGs have really
| | 06:14 | been processed and compressed for the web.
| | 06:17 | One way to find out would
be to check their file sizes.
| | 06:20 | And to do that, I'm going to turn on a
Preference in Bridge Preferences, up here
| | 06:25 | at the top of the screen.
| | 06:26 | On a Windows machine, you would go to
the Edit menu. Here on a Mac, I'll choose
| | 06:30 | Bridge CS3 and then Preferences.
| | 06:34 | In the Preferences dialog box, with the
Thumbnails category selected, I'm going to
| | 06:39 | go down to the Details area and click
Show Size. Click OK, and now beneath each
| | 06:46 | thumbnail in the Contents panel, we
see the size of the corresponding file.
| | 06:50 | I am now going to go back over to the Filter
panel and I'm going to click Sort by Filename.
| | 06:58 | As you can see here, you can sort all
of the thumbnails that are in the Content
| | 07:02 | panel by lots of different parameters
and one of those parameters is File Size.
| | 07:09 | When I do that, these thumbnails all line
up nicely from the smallest to the largest.
| | 07:15 | I'm going to make the assumption
that any file here that's over say, 45
| | 07:19 | kilobytes probably hasn't been
consciously compressed for the web. Even though
| | 07:23 | some of these files are JPEGs, they
may have come from some other kind of
| | 07:28 | non-web source, like a digital camera
or a stock photo agency and still have to
| | 07:33 | be optimized for the web.
| | 07:34 | So, I'm going to select all of the
files in the second row and in the third
| | 07:39 | row by clicking the first of those and then
holding the Shift key and clicking the last.
| | 07:44 | And then I'm going to drag all of
those files, which I'm assuming are not
| | 07:48 | ready for the web, into the Source
Files folder, the shortcut to which is in
| | 07:53 | the Favorites panel.
| | 07:54 | What we are left with here are all files
that are web-ready and are small enough
| | 08:00 | to put on a website.
| | 08:02 | These are my optimized files, which I've
selected out of that large folder, full of images.
| | 08:08 | And so I'm going to select all of
these optimized files by clicking on the
| | 08:12 | first, holding the Shift key, clicking
on the last and they are all going to be
| | 08:16 | dragged into my Optimized Files folder.
| | 08:20 | So, that's how I would go about
arranging my digital assets using Adobe Bridge
| | 08:25 | CS3 as my Digital Asset Manager.
| | 08:29 | We can refine our selections a little
more by using some other new features in
| | 08:33 | Adobe Bridge, and that's what
we'll do in the very next movie.
| | Collapse this transcript |
| Comparing assets with the Loupe| 00:00 | In the last movie, we took a look at
how to organize some digital assets for a
| | 00:04 | website using Adobe Bridge CS3.
| | 00:07 | In this movie, we are going to refine
that organization using some terrific new
| | 00:12 | organizational tools that are in
Bridge CS3 for the first time, and those are
| | 00:17 | the Comparative Preview, the
Loupe tool, and the Stacking feature.
| | 00:21 | So let's get started by selecting our
Optimized Files folder that we created in
| | 00:25 | the last movie, in the Favorites
panel on the left-side of Bridge.
| | 00:30 | I have thumbnails for a JPEG version
and a GIF version of the same file and I'd
| | 00:35 | like to compare those.
| | 00:36 | So I'm going to click on the JPEG
version, then I'm holding the Shift key and
| | 00:40 | clicking on the GIF version.
| | 00:43 | If you wanted to select two files that
were not adjacent to one another, you
| | 00:46 | would hold down the Command key
on a Mac, or the Ctrl key on a PC.
| | 00:51 | We now see a preview of both
files over here in our Preview panel.
| | 00:54 | I'm going to expand the Preview panel
a bit, so we can just get a little bit
| | 00:59 | closer view of those files.
| | 01:01 | I really can't compare
these previews at this size.
| | 01:04 | So, I am going to use the new
Loupe tool to compare the two.
| | 01:08 | All I have to do is click on either one of
these two previews and the Loupe tool appears.
| | 01:14 | The loupe, by default, shows you a small
area of your image at 100%, and you can
| | 01:19 | take the loupe by its top-left corner
and drag it around the image, and wherever
| | 01:23 | that corner is, we see in our loupe, at 100%.
| | 01:28 | That lets us see in this JPEG, for
example, that there are some artifacts,
| | 01:31 | particularly around the text JAVACO tea.
| | 01:36 | Now I'd like to do the same thing in the GIF.
| | 01:37 | I'd like to match the location of the
two loupes that I am going to be using.
| | 01:42 | So, I'll start by dragging the first
loupe, by its left corner, up to the top-left
| | 01:49 | of the JPEG, as far as it can go.
| | 01:51 | And then, I'm going to click in the
GIF and that gives me a second loupe
| | 01:55 | over there, and I'm going to drag that
loupe by its corner to the top-left of the JPEG.
| | 02:00 | When you get there, you can't go any
further, so you know you are in the right place.
| | 02:04 | Then I'm going to hold down the Command
key on a Mac, or the Ctrl key on a PC and
| | 02:09 | I'm going to click the top-left
corner of either loupe and start dragging.
| | 02:13 | And now they move together, both showing
me a corresponding area of the two images.
| | 02:19 | So now, I really can get in and
compare at 100% view what the two look like.
| | 02:24 | And that shows me that the GIF
really did a better job of compressing
| | 02:27 | this particular image.
| | 02:28 | And over here, when I look at the file
sizes, I see that it's only 1 kilobyte
| | 02:32 | larger than the JPEG, so I probably
would choose to use the GIF in this case.
| | 02:37 | If I wanted to zoom in closer than 100%,
I would hold the Command key on a Mac,
| | 02:43 | or the Ctrl key on a PC and click the Plus key.
| | 02:49 | And that will take me in so I can get a
closer view, and then if I want to zoom
| | 02:53 | out I hold the Command or Ctrl key and
click the Minus key, and I can go back to 100%.
| | 03:00 | That's the smallest I can go.
| | 03:02 | When I'm ready to close a loupe, I
just click its top-left corner and I'll
| | 03:06 | close this one too.
| | 03:08 | So, that's how you use the Loupe tool.
| | 03:10 | Next, we are going to take a look at
how we can use the Stacking feature.
| | Collapse this transcript |
| Stacking assets| 00:00 | In the last movie, we looked at how to
refine your images using the Loupe tool
| | 00:05 | and the comparative preview in Bridge CS3.
| | 00:08 | Now that we've taken a look at the
two selected thumbnails and decided that
| | 00:11 | we like decaf.gif better, I'd like to stack them
together in one group, inside the Content panel.
| | 00:18 | This will organize my Content panel
and will also indicate to me which of the
| | 00:22 | two I like better, and tell
me that the two are similar.
| | 00:25 | This is particularly useful when you have lots
and lots of thumbnails inside the Content panel.
| | 00:30 | I am going to click off the two
thumbnails and I am going to take the GIF,
| | 00:34 | which is the version of the two images that I
prefer, and I'm going to drag it over to the left.
| | 00:41 | That will allow me to put the GIF on
the top of the stack I am about to make.
| | 00:46 | Now, I'm going to hold down my Shift
key, and click on the JPEG version.
| | 00:50 | With the two selected, I am going to
the Stacks menu at the top of the screen,
| | 00:53 | and I am going to choose Group as Stack.
| | 00:56 | You can see that the shortcut for that
is Command+G on a Mac, or Ctrl+G on a PC.
| | 01:01 | Now, the two images are grouped one on
top of each other in the Content panel
| | 01:06 | with the preferred image, the GIF, on top.
| | 01:09 | Let's make another stack.
| | 01:10 | I'm going to deselect this stack by
clicking in the blank area, and I am going
| | 01:14 | to click on this white cup, and this
brown cup image, and then I'll press
| | 01:20 | Command+G on a Mac, or Ctrl+G
on a PC to stack those.
| | 01:24 | Then I'll click off.
| | 01:27 | Now let's say that I want to see
what's inside of this new stack that I have
| | 01:31 | made of the two cups.
| | 01:32 | All I have to do is to click on the
number that indicates how many images are
| | 01:36 | in the stack and the stack opens up, and I
can see both thumbnails inside of that stack.
| | 01:42 | Now let's say I reevaluate and I decide
that I would like to have the brown cup
| | 01:45 | on the top of the stack,
that I like that one better.
| | 01:47 | I am going to click off the stack and
then I'm going to click on the brown
| | 01:52 | cup image, and then I am going to go up to
Stacks, and choose Promote to Top of Stack.
| | 01:57 | And that will move the brown cup over
and now if I go to Stacks, Close Stack,
| | 02:02 | we'll see the brown cup as our selected image.
| | 02:06 | Finally, if we decide that we want to
ungroup images from a stack, with the
| | 02:11 | stack selected, we just go up to the
Stacks menu, and we choose Ungroup from
| | 02:14 | Stack, and our stack goes away.
| | 02:17 | So, that's how you can use Stacks to
refine your organization of your digital
| | 02:21 | assets in Adobe Bridge CS 3.
| | Collapse this transcript |
| Rotating, rearranging, and renaming| 00:00 | In this movie, I'd like to show you a
couple more things that will help you to
| | 00:03 | organize your digital assets using Bridge CS3.
| | 00:06 | One of those is the ability to rotate
images that come in from a digital camera
| | 00:11 | on their sides, which sometimes happens.
| | 00:13 | Here for example, you can see our teapot.jpg
image, which I'm going to click to
| | 00:18 | select in the Content panel and then I
am going to hold the Shift key down and
| | 00:22 | select another image
that's on its side, candles.jpg.
| | 00:27 | With both of these images selected,
I'm simply going to go up to the Rotate
| | 00:31 | icons at the top of the Bridge interface,
and I'm going to click the Rotate 90
| | 00:36 | degree Clockwise icon to
turn them as they need to be.
| | 00:41 | Doing this is in Bridge
doesn't degrade the image in anyway.
| | 00:44 | It just adds a little bit of information
that other programs can read about the
| | 00:49 | proper orientation of your files.
| | 00:50 | I would also like to show you how you can rename
images that you bring in from a digital camera.
| | 00:56 | Now, I am going to go into my Optimized
Files folder that we created in an earlier
| | 01:00 | movie, and here we see that we have a
couple of images with these odd names.
| | 01:05 | This is similar to the kind of names
that your camera might give to images and
| | 01:09 | often those aren't very helpful
in your organizational scheme.
| | 01:13 | It's easy to rename multiple
images inside of Bridge CS3.
| | 01:17 | I am going to click on one of these cup
images and then I am going to hold the
| | 01:21 | Shift key, and click on the other.
| | 01:23 | Then I am going to go up to the Tools menu,
and I am going to choose Batch Rename.
| | 01:27 | That opens this dialog box,
where I have lots of options.
| | 01:31 | I could choose to move these images to
another folder or to copy them to another
| | 01:36 | folder, leaving the originals where they are.
| | 01:38 | I am actually going to
rename these in the same folder.
| | 01:41 | That's not always the best plan though,
because sometimes you don't want to
| | 01:45 | write over your original files.
| | 01:46 | But for purposes of this movie, that's
what we'll do, so we can see the results here.
| | 01:51 | Now, I'm going to go down and choose file names.
| | 01:54 | From the first field, I can
choose from any of these options.
| | 01:58 | I'll choose Text, and I'll give
these files a relevant name, teacup.
| | 02:03 | The second field allows me to add more
text if I want, I really see no need to
| | 02:08 | do that, or I could choose one of these
other options, like Date and Time for
| | 02:13 | example, and I know that some people
like to organize their digital images
| | 02:16 | with Date and Time.
| | 02:17 | In this instance, I want
to keep my filename short.
| | 02:20 | So, I'm going to actually delete this
entire field by clicking the Minus sign
| | 02:25 | over on the right of that field.
| | 02:28 | Now, we have one more field, and that
is, by default, set to Sequence Number.
| | 02:32 | We can choose how many digits we
want in our numbering sequence.
| | 02:38 | I'll change this to Three Digits.
| | 02:41 | We can also indicate which
number we want to start with.
| | 02:43 | So, I want to start with number 1.
| | 02:47 | Down at the bottom, we can see the
Current filename and then a sample of how the
| | 02:51 | new filenames will look.
| | 02:53 | Let's click Rename and now we
see that our images have been
| | 02:58 | automatically renamed.
| | 03:00 | This is a change that appears not just
in Bridge but also on your hard-drive.
| | 03:05 | The same is true if you create new
folders inside of Bridge, they also will be
| | 03:09 | created on your hard drive, and if you
move images from folder-to-folder, that
| | 03:11 | will take place on your hard drive as well.
| | 03:14 | So, you can see how helpful Adobe Bridge
CS3 is in organizing the digital assets
| | 03:21 | that you're using in your websites.
| | 03:23 | This ability to rename images, to
rotate images, and the other features that
| | 03:27 | we looked at in this chapter make Adobe
Bridge CS3 an application that you can
| | 03:32 | really use to good advantage when you
are trying to organize the assets for a
| | 03:36 | website.
| | Collapse this transcript |
|
|
3. Layer BasicsUnderstanding layers| 00:00 | If you had to pick one Photoshop
feature that you couldn't do without when
| | 00:04 | you're designing graphics for the Web,
odds are that feature would be layers.
| | 00:08 | As a Web designer, you are frequently
making layered compositions, like page
| | 00:13 | layouts and navigation bars,
and banner ads, and more.
| | 00:17 | So, it's important that you
understand how layers work.
| | 00:19 | That's what we are going to be
talking about in this chapter.
| | 00:23 | In this movie, we'll cover what
layers are, and the benefit of placing
| | 00:27 | individual pieces of artwork on separate layers.
| | 00:30 | If you're following along, open
tea_layers_01.psd from the Chapter 03 Exercise
| | 00:36 | files folder and make sure
your Layers panel is open.
| | 00:40 | An analogy that's often used to
describe layers is to say that layers are
| | 00:44 | like panes of glass.
| | 00:45 | Imagine that you had several panes of
transparent glass stacked one on top
| | 00:50 | of the other and that you painted a
different piece of artwork on each pane of glass.
| | 00:56 | If you left some areas of the top pane
of glass transparent, you would be able
| | 01:00 | to see down through those areas to
the artwork on the panes of glass below.
| | 01:04 | Layers work the same way.
| | 01:07 | Let's take a look at the layers in this
composition to bring that analogy to life.
| | 01:11 | You'll see in the Layers panel
that there are three layers here.
| | 01:16 | I'm going to turn the visibility of the
top layer off for just a minute, so that
| | 01:19 | we can see what's on that layer.
| | 01:22 | Keep your eye in the Document window
and you'll see that when I turn this Tea
| | 01:26 | layer off by clicking the Eye icon to
the left of the layer, the teapot and
| | 01:31 | the teacup disappear.
| | 01:33 | When I turn that layer back on, the teapot,
and the teacup come back into the composition.
| | 01:39 | Now, let's see what's on the
layer below, the Fan layer.
| | 01:42 | I'll turn its Eye icon off, and
you'll see just the fan disappear.
| | 01:49 | I'll turn that layer back on and
you'll see the fan appear again in the
| | 01:52 | composition, and notice that it
appears below the teapot, and the teacup,
| | 01:58 | because those objects are on
the top layer, above the fan.
| | 02:04 | Now, let's turn off the last layer, the
Background layer, to see what's on that
| | 02:07 | layer, and notice that everything else
disappears, because that layer contains
| | 02:12 | all of the other artwork in this composition.
| | 02:15 | And by the way, when we turn off that
Background layer, we can see these gray
| | 02:20 | and white pixels here in the
Document window, which always represent
| | 02:23 | transparency in a Photoshop file.
| | 02:25 | I am going to turn that Background
layer back on, and now let's talk about why
| | 02:31 | we've placed these separate
pieces of artwork on separate layers.
| | 02:34 | The reason to make liberal use of
layers in your designs for the Web is that
| | 02:38 | that gives you the flexibility to make
changes to the artwork on a single layer
| | 02:43 | without affecting the rest of the composition.
| | 02:46 | So for example, let's say we wanted to
take this fan and move it from the right
| | 02:50 | side of the composition to the left side.
| | 02:52 | All we would have to do is click
on the layer that contains the fan.
| | 02:59 | Once the Fan layer was selected, we'd
go to our Toolbox and select the Move
| | 03:04 | tool and then simply click and drag
in the composition to move the artwork
| | 03:09 | that's on the Fan layer.
| | 03:11 | What's important to notice is that none
of the other artwork is being affected
| | 03:15 | by this move, just the fan, because
it's the only thing on the fan layer.
| | 03:21 | That isn't all I could do to the fan.
| | 03:23 | Let's say I wanted to
change the color of the fan.
| | 03:26 | In that case, I'd go over to the Toolbox,
and I'd click on the Brush tool, which
| | 03:29 | is right here, and I'm going to hold my
mouse down on the Brush tool to select a
| | 03:34 | variation of the Brush tool,
| | 03:35 | this Color Replacement tool.
| | 03:38 | It doesn't matter, at this point, if you
really understand what that tool does or
| | 03:41 | which color you may have
selected to paint with here.
| | 03:44 | Just go ahead, and select that tool,
because I want you to see that no matter
| | 03:48 | what you do to the Fan layer, it
is only going to affect the fan.
| | 03:52 | So in this case, I am just going to
click-and-drag over the fan to change its
| | 03:56 | color, and the take-home point is that
only the color of the fan is changing,
| | 04:02 | not the color of the
artwork on the other layers.
| | 04:05 | So that's an overview of what layers
are, and what the primary benefit is of
| | 04:09 | making use of layers in your designs.
| | 04:12 | In the movies to come, we'll be
looking at some other things you can do
| | 04:15 | with layers.
| | Collapse this transcript |
| Creating layers| 00:00 | In this movie, we're going to learn a real
basic of using layers, that's how to create layers.
| | 00:07 | If you're working along with me, open
tea_layers_02.psd from the chapter03
| | 00:12 | Exercise Files folder.
| | 00:14 | There's more than one way to
create a layer in Photoshop.
| | 00:17 | I think the easiest way
to create a layer is this.
| | 00:20 | First, go to your Layers palette and
click on the layer above which you want to
| | 00:25 | bring in your new layer.
| | 00:27 | In this case, I want to draw something
on top of the teapot on a new layer, so
| | 00:31 | I'm going to select the tea layer here.
Then go to the bottom of the Layers
| | 00:35 | palette and click on the Create New
Layer button here, right down here, and that
| | 00:40 | makes a new layer above
the layer you have selected.
| | 00:43 | The new layer comes in
with a numerical layer name.
| | 00:47 | I'm a real stickler for giving layers
meaningful names because I know I'm going
| | 00:52 | to want to search for a layer later
and it'll be a lot easier if the layers
| | 00:55 | have meaningful names.
| | 00:57 | To rename a layer, double-
click directly on the layer name.
| | 01:01 | Don't make the mistake of clicking
over here, which does something else.
| | 01:05 | It opens a big dialog box called Layer Styles.
Instead, double-click directly on the layer name.
| | 01:11 | Type in the new layer name and I'm
going to call this one 'stems', and then click
| | 01:17 | off the editing field.
| | 01:18 | Let's just give some content to this
layer real quickly. With the stems layer
| | 01:23 | still highlighted, go over to the
Toolbox and select the Brush tool.
| | 01:28 | It doesn't matter which colors you have
selected, just go in and draw some lines
| | 01:32 | on top of the teapot that sort
of resembles stems of a plant.
| | 01:37 | Now let me show you
another way to make a new layer.
| | 01:40 | You may prefer this one.
| | 01:42 | I'd like to make a new layer above the
stems layer so I'll make sure the stems
| | 01:46 | is selected in the Layers panel.
| | 01:48 | Then I'm going to go up to the layer
menu at the top of the screen, and I'm going
| | 01:52 | to choose New>Layer.
| | 01:55 | That opens this New Layer dialog box
and here I can give my new layer a name
| | 02:00 | right at the same time that I'm creating it.
| | 02:03 | So, I'll type here 'berries' as my new layer name.
| | 02:06 | There are some other options here, but
to be honest, I usually don't use these
| | 02:10 | and I'll just click OK.
| | 02:12 | And now we have a new layer that
comes in with a meaningful name.
| | 02:15 | Let's add some content to this layer.
| | 02:17 | With that berries layer selected in
the Layers panel, I'm going to go into the
| | 02:22 | document and I'm going to switch colors
to my background color here by pressing
| | 02:27 | the X key on my keyboard.
| | 02:29 | If you prefer to just stay
with the same color, that's fine.
| | 02:32 | And then I'm going to paint some
berries by just clicking on my stems here, and
| | 02:37 | notice that I'm putting the berries
right on top of the stems and that works
| | 02:41 | because our berries layer is on top
of the stems layer, in the Layers panel.
| | 02:47 | Now let's learn one more way to create a
new layer and that is to bring an image
| | 02:51 | in from another file.
| | 02:53 | With this method, I want to select the
layer above which I want my new layer to
| | 02:57 | come in and to do that, I'm going to
expand my Layers panel so I can see all the
| | 03:03 | layers here by clicking the bottom-right
corner of the Layers panel and dragging down.
| | 03:09 | I'm going to select the Background
layer, so that my new layer comes in just
| | 03:12 | above the Background layer.
| | 03:14 | If you're working along with me, go to
your chapter03 Exercise Files folder
| | 03:19 | and open tea_light.psd.
| | 03:21 | Now there are two images open on your desktop.
| | 03:27 | If you can't see them both, just grab
them by their title bars and move them
| | 03:30 | around so that you can see both images.
| | 03:33 | With tea_light.psd active, look at the
Layers panel and you'll see that there's
| | 03:37 | just a single layer here
and it's been named 'lantern'.
| | 03:41 | It's a lantern on a transparent background.
| | 03:44 | Now go to the Toolbox
and click on the Move tool.
| | 03:49 | Go back to tea_light.psd and this is important.
| | 03:52 | I want you to hold down the Shift
key and then drag from anywhere inside
| | 03:56 | tea_light.psd into tea_layers_02.psd
and make sure you see this gray bounding
| | 04:03 | box and that it's all the way inside
tea_layers_02.psd and then release your
| | 04:08 | mouse, and then release the Shift key.
| | 04:12 | The reason that I had you hold down the
Shift key is so that the lantern would
| | 04:17 | come into our tea_layers image and land
in the exact same place that it had been
| | 04:23 | in the tea_light image,
up in the top-left corner.
| | 04:26 | If you hadn't held down the Shift key,
then tea_light.psd, or the lantern, would
| | 04:31 | have landed wherever you released your
mouse over here in tea_layers_02.psd.
| | 04:37 | Let's close tea_light.psd.
| | 04:39 | We don't need that one anymore, and
let's take a look at the Layers panel
| | 04:43 | for tea_layers_02.psd.
| | 04:45 | Sure enough, here is our lantern layer.
| | 04:48 | It comes in with the layer name from
the original file, which is a nice thing,
| | 04:52 | saves us a step and that new layer is
just above the Background layer that we
| | 04:56 | had selected before we made this move.
| | 04:59 | So, those are three ways to
create a new layer in Photoshop CS3.
| | 05:04 | In the next movie, we'll look at how to
change the stacking order of layers so
| | 05:08 | that we can get this lantern
out from behind this plant.
| | Collapse this transcript |
| Layer stacking order| 00:00 | In this movie, we're going to take a
look at how to change the Stacking Order of
| | 00:04 | layers in the Layers panel.
| | 00:06 | In the last movie, I showed you how to
create this lantern layer, here at the
| | 00:10 | bottom of the Layers panel, by dragging in
the image of the lantern from another file.
| | 00:16 | Taking a look at the image, I really
don't like the way the lantern looks
| | 00:19 | here behind the plant.
| | 00:20 | I'd like to see how it looks
in front of the plant instead.
| | 00:23 | That's easy to do. All we have to do
is go to the Layers panel and change the
| | 00:28 | Stacking Order of the layers.
| | 00:30 | I want to move the lantern
layer above the plant layer.
| | 00:35 | To do that I'm going to click on the
lantern layer and drag up in the Layers
| | 00:39 | panel, and when I get above the plant
layer I'll see the top border of the
| | 00:44 | plant later become dark.
| | 00:46 | As soon as I see that I can release my
mouse, and the lantern layer is now above
| | 00:53 | the plant layer in the Layers panel.
| | 00:55 | Now let's take a look at the image, and
sure enough, the lantern is in front of
| | 01:00 | the plant in the image.
| | 01:01 | So, that's how easy it is to change the
layer's Stacking Order in the Layers panel.
| | 01:06 | In the next movie, we'll look at
another layers basic, how to delete layers.
| | Collapse this transcript |
| Deleting layers| 00:00 | This movie covers something you'll do
all the time in Photoshop, deleting layers.
| | 00:06 | If you're working along with me, open
tea_layers_04.psd from the chapter03
| | 00:11 | Exercise Files folder.
| | 00:13 | There are a couple of
different ways to delete layers.
| | 00:15 | Let's say that we don't
like this lantern in the image.
| | 00:18 | The first thing we can do is to
temporarily make it invisible to see how the
| | 00:22 | image would look if we did delete this layer.
| | 00:25 | To make the lantern layer temporarily
invisible, I just click on the Eye icon to
| | 00:29 | the left of that layer and
it disappears from the image.
| | 00:33 | To bring it back in, I click again.
| | 00:36 | Now let's say we really do
want to delete this layer.
| | 00:40 | One way to do that is to select the
lantern layer and then to go down to the
| | 00:44 | bottom of the Layers palette and click
the small Trash Can that you see there.
| | 00:49 | Photoshop gives you another chance to
change your mind before it deletes the layer.
| | 00:53 | If you do want to delete the layer you
click Yes, if you don't you click No.
| | 00:57 | I'm actually going to click No this
time, because I want to show you another
| | 01:02 | way to delete a layer.
| | 01:04 | I often delete layers by just clicking
on a layer and dragging it down to the
| | 01:10 | bottom the Layers panel
on top of the Layer trash.
| | 01:14 | The danger of doing it this way is you
don't get that second chance warning,
| | 01:17 | but it is a lot faster.
| | 01:19 | So when I do release my mouse here,
the lantern layer disappears, and it's
| | 01:24 | gone. You cannot reopen this Trash Can
like you can the Windows Recycle Can
| | 01:29 | or the Macintosh Trash.
| | 01:31 | So at this point, if I needed to get
my lantern layer back, all I could do is
| | 01:35 | undo or go to the History palette.
| | 01:38 | In the last few movies, we've
been looking at the basics of working
| | 01:41 | with individual layers.
| | 01:42 | In the next movie, we're going to
learn how to work with multiple layers.
| | Collapse this transcript |
| Working with multiple layers| 00:00 | In the last movie, we talked about
ways to work with individual layers.
| | 00:04 | In this movie, we are going to look
at how to work with multiple elements
| | 00:07 | on multiple layers.
| | 00:09 | This comes in particularly handy when
you're building a layered web graphic,
| | 00:13 | like a Navigation Bar with multiple
buttons, or a page comp or a logo with
| | 00:17 | multiple elements in it.
| | 00:18 | We will talk about how to select and
work with multiple layers, to group layers,
| | 00:23 | to link layers, and more.
| | 00:24 | If you're working along with me,
open buttons.psd from the Chapter03
| | 00:29 | Exercise Files folder.
| | 00:31 | In the Layers panel, you see that
we have lots of layers in this file.
| | 00:35 | Let's turn these on and off
temporarily just to see what we have here.
| | 00:39 | If I turn off the PRODUCTS layer,
you'll see the text on that gray button
| | 00:43 | disappear and appear, and then we
have underneath that a gray button
| | 00:47 | associated with that text.
| | 00:48 | And as I go down here, you'll just see the
text and the button for each one of these.
| | 00:58 | And then we have three layers
associated with this logo up here.
| | 01:01 | We have the javaco tea layer, which is a
rasterized text layer, which means that
| | 01:06 | it started out as a regular editable
text layer, like these other layers with the
| | 01:10 | T on them, and was rasterized so that
it becomes just a pixel-based layer.
| | 01:15 | We did that because we used a special
font and we wanted it to look the same on
| | 01:18 | your system as it does on ours.
| | 01:21 | Here's the smoke curl layer, a graphic,
and here's the green rectangle layer.
| | 01:26 | So, those last three layers make up
this logo, and then, finally, we have a white
| | 01:30 | background with green
stripes at the top and bottom.
| | 01:33 | First, I want to show you how you can
select multiple layers and then work with
| | 01:38 | the multiple-y selected layers.
| | 01:41 | I am going to select the three
layers that make up this logo.
| | 01:44 | In the Layers panel, I am going to
click on the javaco tea layer, I am going to
| | 01:47 | hold down the Shift key and then I am
going to click all the way down here on
| | 01:51 | the green rectangle layer and that will
select those two layers and the layer in between.
| | 01:57 | With the three layers selected, I can
now affect the content of all three layers.
| | 02:01 | So for example, I can go to the
Toolbox and select my Move tool, and then
| | 02:06 | click-and-drag and the content of all
the layers goes with me and I'll place the
| | 02:10 | logo over here on the
left rather than the right.
| | 02:13 | I also can align the content
of the three selected layers.
| | 02:17 | With the Move tool selected, in the
tool Options Bar, I have lots of buttons
| | 02:23 | that will automatically allow me to align
and distribute the content of selected layers.
| | 02:28 | In this case, I'll click this button
right here, the Horizontal Alignment
| | 02:31 | button, and when I do, keep your eye
on the logo in the document window, and
| | 02:35 | you'll see that just clicking that
single button has completely changed the
| | 02:39 | composition of this logo.
| | 02:40 | Now I want to deselect those three
layers, and to do that, I am just going to
| | 02:44 | click in the blank area at
the bottom of the Layers panel.
| | 02:48 | I use the same multiple selection and
alignment technique to line up these four
| | 02:53 | gray buttons, each of which is on a
separate layer, and the same technique to
| | 02:58 | align each piece of text to its button.
| | 03:01 | I finished these three buttons.
| | 03:02 | Let me just show you how I did
that with the Products button.
| | 03:05 | I will go to the Layers panel, and
I will click on the PRODUCTS layer.
| | 03:09 | I will hold the Shift key and I will
click on the button products button, and
| | 03:13 | then with the Move tool selected in the
Toolbox, I will go up and click on the
| | 03:17 | Align Horizontal Centers button and the
PRODUCTS text move over to the center of its button.
| | 03:22 | I'm also going to click on the Align
Vertical Centers button here to move the
| | 03:27 | PRODUCTS text up to the middle of the
button, and then in the Layers panel, I
| | 03:31 | will click on the blank area to deselect.
| | 03:34 | As you can see, selecting
multiple layers, as we just did, is nothing
| | 03:38 | permanent, it's temporary.
| | 03:39 | You just put the layers together.
| | 03:41 | You do what you have to do to them and
then you deselect so they are no longer
| | 03:44 | associated with one another.
| | 03:46 | Sometimes, you want items to be more
permanently associated, but to remain on
| | 03:51 | separate layers so that each item can
be edited independently of the other.
| | 03:55 | A perfect example of that is
text and its associated button.
| | 04:00 | For example, I want to leave the
PRODUCTS text separate so that I could change
| | 04:05 | its font, its color, its size, or even
the words on this text layer, but I want
| | 04:11 | to make sure that text always
moves and stays aligned to its button.
| | 04:15 | So what I am going to do now is to
click on the button PRODUCTS layer, hold the
| | 04:20 | Shift key and click on the PRODUCTS
type again, and then I'm going to go up to
| | 04:25 | the Palette menu icon at the top
of the Layers palette, and click.
| | 04:30 | That's these three horizontal lines and
that brings up the Layers palette menu.
| | 04:34 | From here, I'm going to
choose New Group from Layers.
| | 04:40 | Photoshop asks what I want to call
this group, I will call it the product
| | 04:45 | button group, and say OK.
| | 04:48 | Notice that the layers are no
longer here in the Layers palette.
| | 04:51 | They have been tucked up into this
product button layer group and if I twirl the
| | 04:56 | button to the left of that
group, I can see my two layers.
| | 04:59 | When I select the product button layer
group and I click-and-drag, the content
| | 05:03 | of both the PRODUCTS text layer and
the button product layer go with me.
| | 05:07 | I am going to undo to put that back
where it was, and I will quickly group the
| | 05:13 | other buttons as well.
| | 05:14 | I will select the ABOUT US text and
Shift+Click on its associated button, make a
| | 05:20 | New Group from Layers, call it the 'about
button', select the CONTACT text and its
| | 05:28 | button, Make a New Group from those
layers and call it 'contact button', and
| | 05:41 | do the same for the Stores.
| | 05:51 | Grouping layers like this not only
allows me to work on the grouped layers
| | 05:56 | together, but also to neaten up my Layers panel.
| | 06:00 | So if I twirl the product button layer
group closed, you can see how much easier
| | 06:04 | it is to see what's in this layers
panel than it was a few minutes ago when I
| | 06:08 | had all the layers separate.
| | 06:10 | You can also nest layer
groups one inside the other.
| | 06:13 | So for example, with the stores button
layer group selected, I am going to hold
| | 06:17 | the Shift key and I am going to click
on the product button layers group and
| | 06:21 | then I'm going to go back
to the Layer palette menu.
| | 06:24 | And I'm going to choose New Group from
layers, and that's going to make a super
| | 06:28 | group, which I will call 'buttons', and say OK.
| | 06:33 | Now if I twirl down the arrow to the
left of the button super group, I can see
| | 06:37 | all the nested layer groups.
| | 06:39 | If I take my Move tool and I click-and-
drag, all of the buttons now go with me.
| | 06:43 | So, that's a very useful feature as well.
| | 06:46 | I also want to talk about linking layers.
| | 06:49 | Sometimes grouping layers isn't practical.
| | 06:52 | So for example, in this case, let's
say that I wanted to group the javaco tea
| | 06:57 | text here and the green rectangle, but
I didn't want to include the smoke curl
| | 07:02 | in the group, perhaps I want to keep the
possibility open of easily substituting
| | 07:05 | some other graphic here.
| | 07:07 | Well, if I look at the Layers panel,
you can see I can't group javaco tea with
| | 07:12 | green rectangle because they aren't next
to one another in the Layers panel, and
| | 07:16 | they can't be because we need to keep
the smoke curl in between for this visual
| | 07:20 | effect that we see here.
| | 07:22 | Although I can't group the javaco tea
layer and the green rectangle layer, I
| | 07:26 | can link them together, which puts
them together relatively permanently.
| | 07:31 | To do that, I select the javaco tea
layer, and then I'm going to hold down the
| | 07:35 | Command key on a Mac, or the Ctrl
key and a PC and click on the green
| | 07:39 | rectangle layer, and that allows me to multiple-y
select nonadjacent layers in the Layers panel.
| | 07:45 | Then I am going to go to down to the
bottom of the Layers panel, and click on
| | 07:49 | this Link icon and those two
layers are now linked together.
| | 07:53 | So for example, if I were to move with
the Move tool, only those layers would
| | 07:57 | move together, and not the graphic in between.
| | 08:02 | So, I am going to undo and click
at the bottom of the Layers panel to
| | 08:07 | deselect those two layers.
| | 08:09 | I'd like to show you one more feature
that really comes in handy when you're
| | 08:12 | trying to line up the elements on
multiple layers and that is Smart Guides.
| | 08:17 | The Smart Guide feature is off by default.
| | 08:19 | So in order to use it, we have to go up
to the View menu and go down to the Show
| | 08:23 | menu and choose Smart Guides.
| | 08:27 | Now with my Move tool selected, I am
going to click on my buttons super group
| | 08:32 | and then I'm going to come in and start
moving this group of buttons and text.
| | 08:37 | Now look at those pink lines
that are appearing on the screen.
| | 08:40 | These are the Smart Guides.
| | 08:42 | These Smart Guides are showing me the
edges and the center of the elements that
| | 08:46 | I would like to align in my image, and
as I move, different Smart Guides appear.
| | 08:51 | When I get all the way over under the
logo, I see a Smart Guide on the right,
| | 08:55 | one on the left, and one in the center
that tells me I am perfectly lined up
| | 08:58 | here and I can let go of my mouse, and
have a perfectly aligned logo and button bar.
| | 09:03 | So I hope you will try out some of
these techniques for working with multiple
| | 09:07 | layers in Photoshop CS3.
| | Collapse this transcript |
|
|
4. Color BasicsThe decline of web-safe color| 00:00 | In this chapter, we are going to take a look
at choosing and using color in Photoshop CS3.
| | 00:05 | The first thing I'd like to
talk about is Web-Safe Color.
| | 00:08 | I have some good news for you
designers who are designing flat graphics like
| | 00:12 | those you see here, and the good news is
you no longer have to limit yourself to
| | 00:16 | using a Web-Safe palette.
| | 00:18 | The concept of Web-Safe palettes came
up in the 1990's when most consumer level
| | 00:24 | computers had only 8-bit video cards
in them, and those video cards could
| | 00:28 | display only a very limited number
of colors, 256 colors to be exact.
| | 00:34 | At the same time, some designers were
fortunate to have more powerful computers,
| | 00:38 | computers with 24-bit video cards that
could display millions of colors. And so
| | 00:44 | there was this disconnect where
designers were designing images, like those you
| | 00:49 | see here on the left, that had
non-web-safe colors in them,
| | 00:53 | but audiences were viewing those
graphics on computers that could display only
| | 00:58 | 256 colors, and the results were
often like those you see over here on the
| | 01:03 | right, the colors and graphics would
shift and graphics would look as if they
| | 01:08 | have little dots in them.
| | 01:10 | Those little dots are called dithering
and they are the computer's attempt to
| | 01:14 | simulate colors that it
couldn't normally display.
| | 01:18 | Nowadays, even consumer level
computers are pretty powerful, most have 24-bit
| | 01:24 | graphics cards in them, and so you don't
get this sort of dithering and shifting
| | 01:28 | problem on graphics design
with non-web-safe colors.
| | 01:31 | But once-in-a-while, as a designer, you
may run into a boss or a client who asks
| | 01:36 | you to design with Web-Safe colors.
| | 01:38 | So, you should know that the Web-Safe
Color palette is a specific palette of
| | 01:43 | particular colors that will display
accurately on a computer with an 8-bit video card.
| | 01:48 | If you're in that boat where you
have to design with Web-Safe Color,
| | 01:51 | fortunately, Photoshop has features built in
that make it really easy to choose web-safe colors.
| | 01:58 | In the upcoming movies, I'll be
describing Photoshop's Color Picker and
| | 02:02 | Color Swatches, and I'll be sure to
mention how you can choose Web-Safe
| | 02:06 | colors from those tools.
| | Collapse this transcript |
| Using the Color Picker| 00:00 | Many of the tools and features in
Photoshop, ranging from the Paintbrush to the
| | 00:05 | Type tool to commands like
Fill and Stroke, use color.
| | 00:10 | So, it's important to know the various
ways that you can choose colors in Photoshop.
| | 00:14 | Let's start by talking about the
Eyedropper tool, which is one of the easiest
| | 00:17 | ways to choose color.
| | 00:18 | If you'd like to follow along
with me, you can open this image,
| | 00:22 | javaco_tea_coupon.psd, from the
chapter04 Exercise Files folder.
| | 00:27 | With the Eyedropper selected in the
Toolbox, I am just going to come in this
| | 00:30 | image and click on any of the colors,
and if you keep your eye on this color
| | 00:35 | box, right here, known as the
Foreground Color Box, you'll see it change color
| | 00:39 | as I sample colors from this open image.
| | 00:42 | So, I've clicked on the green and
the Foreground Color Box turns green.
| | 00:46 | We'll change it to red.
| | 00:47 | We'll try this light-gray.
| | 00:50 | So, that's a really quick and easy way
to select colors for use in Photoshop
| | 00:54 | from other open images.
| | 00:56 | What I find even more interesting is
that you can use the Eyedropper to select
| | 01:00 | colors from other locations on your screen.
| | 01:03 | So what I've done here is I have
opened a Web Browser and you can open your
| | 01:07 | Browser to any web page.
| | 01:09 | Select a web page that has a color
scheme that you like, and then you can use
| | 01:13 | those very same colors in
your own work, like this.
| | 01:17 | With the Eyedropper tool selected in
the Toolbox, move into any open image in
| | 01:21 | Photoshop, click and hold down the Eyedropper.
| | 01:24 | Now don't let go and move out of
that image anywhere else on your screen.
| | 01:29 | So for example, here I'm going over
this open webpage in my Safari Web Browser,
| | 01:34 | and look at that Foreground Color Box.
| | 01:36 | It's changing as I move my mouse,
picking up whatever color I move over.
| | 01:42 | So I might say, "Well, I like this very
same yellow that's used in the lynda.com
| | 01:46 | "website," so I am going to release my
mouse and I have now chosen that yellow
| | 01:51 | here in the Foreground Color Box, and
I could use that in my own design. I am
| | 01:55 | going to close this Web Browser and
show you another way to choose color.
| | 01:59 | The most popular way to choose a color
is to open the Color Picker by clicking
| | 02:03 | on the Foreground Color Box.
| | 02:06 | The Color Picker has lots of useful features.
| | 02:08 | Let me give you a quick tour.
| | 02:10 | The Color Picker thinks about
color is having three components:
| | 02:14 | Hue, Saturation, and Brightness.
| | 02:17 | Hue means the color, Saturation means
how pure or intense the color is, and
| | 02:22 | Brightness, of course, means the
brightness or the darkness of the color.
| | 02:25 | By default, the colors are
arranged in this dialog box by Hue.
| | 02:30 | This slider shows us a spectrum of hues.
| | 02:33 | So, if I wanted to choose a green, I would
start by moving this slider up to the green area.
| | 02:38 | Then I would come over to the large
square here, where I can see variations
| | 02:42 | on that green arranged by Saturation,
from right to left, and by Brightness,
| | 02:48 | from top to bottom.
| | 02:51 | I can click on a color there
and that's my selected color.
| | 02:55 | You can see that by looking at the
square in the middle, which shows the
| | 02:58 | currently selected color at the top and
the last selected color at the bottom.
| | 03:03 | I can rearrange my colors in this
dialog box by clicking on the S button.
| | 03:08 | Now, this slider is arranged by Saturation.
| | 03:11 | At the top, I have highly saturated greens
and at the bottom, less saturated greens.
| | 03:17 | I can move to an area of saturation
here and then select, in this case, a
| | 03:21 | desaturated color from the square on the left.
| | 03:24 | I can also arrange colors by Brightness.
| | 03:26 | I'll click the Brightness button here
and then I can move this slider up to
| | 03:31 | select a bright value of this purple, or
down, to select a dark value of this purple.
| | 03:38 | The RGB and the CMYK fields often come in handy.
| | 03:43 | If a client asks you to design with a
specific color, perhaps a corporate color,
| | 03:47 | he may give you particular RGB values,
in which case you can type those right
| | 03:51 | into these fields to pick that particular color.
| | 03:54 | So, I'll just pick some RGB values like
110 Red, 66 Green, and 49 Blue, and that
| | 04:04 | gives me this particular brown color.
| | 04:06 | Another thing you can do in the Color
Picker is to select Web-Safe colors.
| | 04:10 | To do that, you go down to the Only Web
Colors field here and put a checkmark in that box.
| | 04:16 | I'm going to go back and choose Hue, and
now I can see, over here, only Web-Safe colors.
| | 04:23 | Right now, we are looking at some Web-
Safe reds, and if I move this slider in
| | 04:27 | the middle up, we see only Web-Safe colors.
| | 04:30 | Here are some blues, and some Web-
Safe purples, and some Web-Safe reds, and
| | 04:37 | to select any of these, we can just click
on it over in this big square on the left.
| | 04:41 | So, those are the basics of using
the Color Picker to select color.
| | 04:44 | I am going to click OK here, and you'll
see that we now have that last selected
| | 04:50 | Magenta color in our Foreground Color Box.
| | 04:53 | Notice that that same Magenta
appears over here in the Color palette.
| | 04:58 | The Color palette offers
another way to select color.
| | 05:01 | It also shows us the Foreground Color
Box and the Background Color Box and it
| | 05:05 | offers these sliders:
| | 05:07 | a red slider, a green center, a blue
slider, that we can use to mix colors.
| | 05:11 | So, if you prefer to approach color more
like a painter, you can use these sliders.
| | 05:16 | So I will add more blue to this color,
I will add a little bit of green, and
| | 05:22 | perhaps I'll add some of the red here,
and so you can see that we've changed the
| | 05:25 | color here in the Foreground Color Box.
| | 05:27 | And in here, I can click anywhere to
get into a general area, say I want a
| | 05:32 | green, and then I can use the
sliders to modify that color.
| | 05:36 | I can limit myself to choosing Web-Safe
colors only here by going to the Palette
| | 05:41 | menu, clicking and choosing Web Color sliders.
| | 05:45 | And now each one of these sliders has
little ticks on it, and I cannot choose
| | 05:51 | anything between the ticks, and all of
these ticks help me to select a Web-Safe color.
| | 05:56 | So, those are some ways to
select color in Photoshop.
| | 05:59 | In the next movie, we're going to
take a look at using this feature,
| | 06:03 | the Swatches palette.
| | Collapse this transcript |
| Using swatches| 00:00 | In the last movie, we looked at using
the Eyedropper tool, the Color Picker and
| | 00:04 | the Color panel as methods of
selecting color in Photoshop.
| | 00:08 | There is one more panel that we can use to
select color and that's the Swatches panel.
| | 00:14 | You can bring that to the
foreground by clicking its tab.
| | 00:17 | The Swatches panel basically contains
collections of colors and I can select
| | 00:21 | any of those colors by just clicking on
it and notice that the foreground color
| | 00:26 | box at the bottom of the Toolbox is
changing as I select different colors here
| | 00:31 | in the Swatches panel.
| | 00:33 | Because I have the Type tool selected
here, also in the Options bar for the Type
| | 00:38 | tool when I click on the
Swatch here, I get a new color.
| | 00:41 | So, this is a quick way to try out
different colors when you're applying Type.
| | 00:46 | This is the default set of swatches,
but there are other Swatches that you can
| | 00:49 | load into this panel.
| | 00:52 | To access those, go to the Panel menu at
the top-right, click-and-hold, and move
| | 00:57 | down to the bottom, and choose
one of the other options here.
| | 01:00 | There are PANTONE Swatches, and down
here at the bottom, some Web Swatches that
| | 01:05 | contain only Web Safe Colors.
| | 01:07 | Let's look at one of those.
| | 01:08 | The Web Hues Swatch.
| | 01:11 | When I select that, I'm asked whether I
want to replace this current default set
| | 01:15 | of swatches, and I'm going to say OK.
| | 01:17 | If I clicked Append, I would simply
get the Web Hues Swatches in the panel at
| | 01:22 | the bottom of appended to this
existing collection of Swatches.
| | 01:26 | So, I'm going to click OK here, and I now have a
new arrangement of colors in my Swatches panel.
| | 01:32 | I can select from these Web Safe Colors.
| | 01:34 | One of the nice things about the
Swatches panel is that a colleague can save a
| | 01:40 | set of Swatches, send them to you, and
then you can load them, so you can share
| | 01:44 | the same colors if, for example,
you're working on a project together.
| | 01:48 | Here is how you load a set of Swatches.
| | 01:50 | I'm going to go to the Panel menu icon
here, click-and-hold, and I'm going to
| | 01:56 | go down and choose not Load Swatches, which
is what you might think but Replace Swatches.
| | 02:01 | If you choose Load Swatches, you end up
with your new set of swatches appended
| | 02:05 | to the bottom of the old one.
| | 02:07 | So, we'll Replace Swatches, and if you
have access to the Exercise Files, you
| | 02:11 | can do this along with me.
| | 02:12 | I'm going to navigate to my Desktop,
into my Exercise Files, into my Chapter 04
| | 02:18 | folder, and I'm going to select color.aco,
which is a Swatch created by Bruce
| | 02:25 | Heavin of Lynda.com.
| | 02:27 | I'm going to click Load, and you can
see if I expand the Swatches panel by
| | 02:32 | clicking on the bottom-right and
moving down, that we have a brand-new set of
| | 02:37 | Swatches, a pretty complex one that
shows us Web Safe Colors here that are very
| | 02:43 | saturated, other Web Safe Colors
that are of medium saturation, and some
| | 02:48 | desaturated Web Safe Colors as well,
and then these colors are arranged by Hue
| | 02:53 | as represented over here.
| | 02:54 | Now you may be wondering how it is
that Bruce put the Swatches panel together
| | 02:59 | and that's what we're going to learn
about in the very next movie on creating
| | 03:02 | a custom swatch.
| | Collapse this transcript |
| Creating custom swatches| 00:00 | In the last movie, we took a look at how
to select colors from the Swatches panel.
| | 00:04 | We also loaded a custom swatch
that we found in our Exercise Files
| | 00:08 | folder, Chapter 04.
| | 00:10 | In this movie, I'm going to show you how
you can create your own custom swatches.
| | 00:14 | It's a really great thing to do if
you're working with other people on a project
| | 00:17 | because you can create a custom swatch
perhaps based on some corporate colors
| | 00:22 | that your client may have, and then
share it with your colleagues, so that
| | 00:25 | you're all on the same page about color.
| | 00:27 | To prepare for this movie, I've opened
javaco_tea.psd from the Chapter 04 folder
| | 00:33 | in your Exercise Files.
| | 00:35 | You can do that if you're
following along with me.
| | 00:37 | I also moved the Swatches panel out from
the panel group that contain the Color
| | 00:42 | panel, because I want to see them both.
| | 00:45 | And I've reset the swatches to their
defaults by clicking the Panel menu icon,
| | 00:50 | and choosing Reset Swatches.
| | 00:52 | Now, I'm ready to create a custom Swatch here.
| | 00:56 | I'm going to go back to the Panel menu
by clicking the Panel menu icon at the
| | 01:00 | right of the Swatches panel, and
I'm going to choose Preset Manager.
| | 01:05 | Here, I want to make sure Preset Type
is set to Swatches, and then I'm going to
| | 01:10 | go to the Select menu at the
top of the screen, and press All.
| | 01:14 | That selects all of the Swatches here,
and then I'm going to click the Delete
| | 01:18 | button to delete them all.
| | 01:20 | I'll click done to close the Preset
Manager, and notice that the Swatches panel
| | 01:25 | now has nothing in it.
| | 01:27 | Now that we have an empty panel, we can
start to build a brand-new custom Swatch.
| | 01:32 | I'll go to the Toolbox, and make sure
that the Eyedropper tool is selected and
| | 01:37 | then I'm going to click on a
color in an open image like this one.
| | 01:40 | I'll click on the Blue and then I go
to the bottom of the Swatches panel, and
| | 01:44 | I'll click the Create New Swatch icon.
| | 01:46 | That gives me a Blue Swatch.
| | 01:50 | I can name that swatch by double-
clicking it, and in the Color Swatch Name
| | 01:55 | dialog I can give it a name.
| | 01:56 | How about aqua? And say OK.
| | 02:00 | I'll continue to populate the Swatches
panel the same way, eye-dropping on a color,
| | 02:06 | and clicking the Create New Swatch icon
at the bottom of the Swatches palette.
| | 02:10 | I'll double-click this
Swatch, and give it a name.
| | 02:14 | Sometimes, I like to give my
Swatches RGB value names rather than color
| | 02:18 | names because they're easier to find
later by RGB value, if the client tells
| | 02:23 | me a specific value.
| | 02:25 | To do that, I'm going to look in my
Color panel, and it's telling me that this
| | 02:29 | particular green has an
RGB value of 204, 204, 153.
| | 02:35 | So, I can just type that in my
Color Swatch Name dialog box.
| | 02:39 | I'll type 'r204 g204 b153' and say OK.
| | 02:52 | Let's get a few more colors
in our Custom Swatches panel.
| | 03:07 | Now that I'm done creating a custom
swatch, I want to save it so that I can load
| | 03:11 | it later, and share it
with colleagues if I want.
| | 03:14 | So, I'm going to go back to the Palette menu
here, and I'm going to choose Save Swatches.
| | 03:21 | It's important to save swatches in the
same place with all the other swatches in
| | 03:25 | Photoshop so that the custom
swatch later appears in the Panel menu.
| | 03:30 | Here in the Save dialog box, we
can see where that location is.
| | 03:35 | It's in Photoshop CS3, in the Presets
folder, in the Color Swatches folder, and
| | 03:41 | I'm going to save my new
Swatches with the extension ACO.
| | 03:45 | I call this my_javaco.aco and I'll click Save.
| | 03:52 | Now if I go and look in the
Panel menu, I don't see my_javaco.
| | 04:00 | I see an old javaco that I saved
previously, but not my_javaco, and the reason
| | 04:05 | is that in order to get this menu to
populate with my new swatch name, I have
| | 04:11 | to restart Photoshop. So let's do that.
| | 04:14 | I'm going to go to the Photoshop menu,
or on a PC to the File menu, and Quit
| | 04:18 | Photoshop, and then I'll restart
Photoshop by clicking its icon in the Dock or
| | 04:25 | in Windows Start menu.
| | 04:28 | Now, if I go to the Swatches panel
menu, sure enough, there is my_javaco.
| | 04:33 | If I were to reset my Swatches here to
the defaults and say OK, I can then, when
| | 04:39 | I'm ready, go in and bring out my
Custom Swatches by clicking the Panel menu
| | 04:44 | again and coming down to
my_javaco, and clicking OK.
| | 04:49 | So, that completes our discussion of
using the Swatches panel, and creating
| | 04:52 | your own custom swatch.
| | Collapse this transcript |
| Recoloring images| 00:00 | Now that we've learned about how
layers work and how to choose colors in
| | 00:04 | Photoshop CS3, let's put
some of those skills to work.
| | 00:08 | In this movie, I want to show you how you
can quickly and easily recolor layered artwork.
| | 00:13 | Let's say we decided we didn't like
the color of the smoke curl and we wanted
| | 00:17 | to change its color.
| | 00:19 | Typically, a user might try to select
the curl and then fill the selection,
| | 00:24 | but selecting a soft edge graphic like
this one would be quite difficult, and
| | 00:28 | it's likely you would never
really get a perfect selection.
| | 00:31 | So instead, we're going to use a
feature here at the top of the Layers palette
| | 00:35 | to Lock down the transparent pixels, so
that they are protected from color, and
| | 00:41 | then fill only the pixels that have color.
| | 00:43 | That includes those semi-transparent
pixels along the edge of the smoke curl.
| | 00:48 | Before we do that, let's take a
look at what's on the Smoke Curl layer.
| | 00:52 | I'm going to Option+Click on a Mac, or
Alt+Click on a PC on the Eye icon to
| | 00:57 | the left of the Smoke Curl layer, and that
turns off everything except the smoke curl.
| | 01:02 | So that you can see how really soft edge this
is, and how difficult it would be to select.
| | 01:08 | Now, I'm going to Option+Click again
on the Smoke Curl Eye icon to turn the
| | 01:11 | other layers back on.
| | 01:12 | I'm going to select the Smoke Curl
layer, and I'm going to go up to the Lock
| | 01:17 | icon, and lock pixels.
| | 01:20 | Now, I'm going to choose a
color with which to fill the smoke.
| | 01:24 | I'm going to click this purple in
the Swatches panel, and that sets my
| | 01:29 | foreground color to purple.
| | 01:31 | To fill with a color, I can go to the
Edit menu at the top of the screen, choose
| | 01:35 | Fill, and in the Fill dialog box, I
can choose to Use Foreground Color.
| | 01:43 | I'll say OK, and notice that only
the smoke curl has changed color.
| | 01:48 | The rest of the Smoke Curl
layer is protected from that fill.
| | 01:52 | Let's try this with another part of
this image, this Green layer here.
| | 01:57 | I'm going to unlock the pixel lock and
select the Green layer because I want you
| | 02:02 | to see what happens if I were to fill
this layer without that lock activated.
| | 02:05 | I'll choose a blue color from the Swatches
panel. That sets my foreground color to blue.
| | 02:12 | This time, instead of going to the
Edit Fill dialog box, I'm going to use a
| | 02:16 | shortcut for filling with the
foreground color and I suggest you to remember
| | 02:19 | this shortcut, because it's one you'll use a lot.
| | 02:23 | The shortcut is Option+Delete on
a Mac, or Alt+Backspace on a PC.
| | 02:29 | Because I did not use the Transparent
Pixel Lock before I filled this layer, the
| | 02:34 | entire layer is now filled with
blue, and that isn't what I wanted.
| | 02:38 | So, I'm going to undo by pressing
Command+Z on my keyboard or Ctrl+Z on a
| | 02:43 | PC, and try it again.
| | 02:47 | With the Green layer selected, I'm going
to go up to the Lock icon at the top of
| | 02:50 | the Layers palette, and
choose Lock Transparent Pixels.
| | 02:54 | And again, I'll press Option+Delete, or
Alt+Backspace on a PC, and that will fill
| | 03:00 | only those pixels on the Green
layer that already contained color.
| | 03:04 | You could continue to go through this
image, selecting layers, and filling them.
| | 03:09 | I can even fill this Type layer here.
| | 03:12 | We haven't talked about Type
layers yet, but they are different than
| | 03:15 | regular pixel based layers.
| | 03:16 | Type layers are made up of
vector-based editable type.
| | 03:20 | With a Type layer, you can't
select that Lock Pixel icon.
| | 03:25 | However, you don't have to worry
because on a Type layer, when you recolor in
| | 03:29 | this manner, you'll fill only the areas
of Type, and not the rest of the layer.
| | 03:34 | To see what I mean, select a
dark color, perhaps this dark gray,
| | 03:39 | that becomes your foreground color,
and then press Option+Delete, or
| | 03:44 | Alt+Backspace on a PC to fill the
Type with that foreground color.
| | 03:49 | So, that's how easy it is to
recolor layered elements in a file in
| | 03:52 | Photoshop CS3.
| | Collapse this transcript |
| Copying color as HTML| 00:00 | In this short movie, I want to show
you a special feature in Photoshop for
| | 00:04 | copying the hexadecimal code value of
any color in a graphic, so that you can
| | 00:09 | use in a website building program.
| | 00:11 | If you're following along, you can
open javaco_tea.psd from the Chapter_04
| | 00:16 | Exercise Files folder or you
can use any image of your choice.
| | 00:21 | One way to unify the design of a web
page is to take colors from the graphics on
| | 00:25 | the page and use them to color HTML
elements, like the page background, or HTML
| | 00:32 | text, or, perhaps, Links.
| | 00:35 | If you're a Web designer, you probably
know that the colors of HTML elements
| | 00:39 | like those are specified with a special
numbering system called Hexadecimal Code.
| | 00:45 | Photoshop has a feature that allows
you to copy the hexadecimal value of
| | 00:49 | any color in an image.
| | 00:51 | Let's see how that works.
| | 00:52 | I am simply going to go to the
eyedropper tool in the Toolbox here, select it,
| | 00:57 | and come into an open image, and I am
going to hold down the Control key on a
| | 01:01 | Mac, that's Right-click on a PC, as I
click on a color, in this case, blue.
| | 01:08 | And then I'm going to move down to Copy
Color as HTML and release my mouse and
| | 01:13 | then release my Control key.
| | 01:15 | Now I am going to open a Text Editor,
or you could do this in Dreamweaver, or
| | 01:18 | anywhere where you've build your sites.
| | 01:23 | This is just a blank page in TextEdit on a Mac.
| | 01:26 | I am going to go to the Edit menu and
choose Paste, or I could have just pressed
| | 01:31 | the shortcut Command+V on
a Mac or Ctrl+V on a PC.
| | 01:36 | And when I do, I get the hexadecimal
color for this blue pasted in this document.
| | 01:42 | And now I can use that value
in the page that I am building.
| | Collapse this transcript |
| Color management| 00:00 | If you've ever looked at the same
image on two computers and noticed that the
| | 00:03 | colors in that image look different
on the two computer screens, you've
| | 00:08 | experienced the color management
problem that all web designers face.
| | 00:12 | If you were designing for print, then you
could handle color management using ICC profiles.
| | 00:18 | Print designers attach to an image
an ICC profile that tells the output
| | 00:24 | device for which the image is destined,
the printer, about how colors were intended
| | 00:30 | to appear when the image
was designed on the computer.
| | 00:33 | And the idea is that the printer would
use this information to match the print
| | 00:37 | it was making to the designer's screen.
| | 00:40 | But when you're designing for the
Web, you can't rely on ICC profiles.
| | 00:44 | That's because almost all web
browsers today are not color managed.
| | 00:48 | They cannot read color profiles.
| | 00:50 | And even for those few Web
browsers that are color managed, there's a
| | 00:54 | disincentive to attach ICC profiles to
web images because it's likely that a
| | 00:59 | profile will make an image bigger
and therefore increase download time.
| | 01:05 | So, what's the best solution when you're
designing images for the Web in Photoshop?
| | 01:09 | What you can do is simulate, in Photoshop,
| | 01:13 | the way the colors will look in an
image when the image is viewed in a web
| | 01:17 | browser on a typical computer monitor, and a
typical computer monitor today is a PC monitor.
| | 01:24 | To do that, you want to use the sRGB
color space to display your images.
| | 01:31 | The sRGB color space is a relatively
narrow range of colors as compared to
| | 01:36 | broader color spaces like ProPhoto or Adobe RGB.
| | 01:40 | But sRGB is the one to use when you're
designing for the Web, because it most
| | 01:45 | closely resembles the color
characteristics of the average PC monitor.
| | 01:50 | So here's the workflow to follow in
Photoshop when you're trying to color manage
| | 01:54 | an image for the Web.
| | 01:55 | Before you open any images,
set up your color settings.
| | 01:59 | To do that, go to the Edit menu at the top
of the screen and down to Color Settings.
| | 02:06 | That opens the Color Settings dialog box.
| | 02:09 | Here you don't really have to make any
individual choices in these fields, all
| | 02:14 | you have to do is choose this umbrella
setting, North America General Purpose 2,
| | 02:19 | and that controls all the
important settings below.
| | 02:22 | North America General Purpose 2 is
the best choice in this dialog box if,
| | 02:27 | like most of us, you use Photoshop to design
some images for the Web and some for print.
| | 02:32 | What this umbrella preset does
is set up other settings below.
| | 02:38 | The most important of those settings is
this one, the RGB Working space, which
| | 02:43 | is automatically sRGB when you choose
North America General Purpose 2 setting.
| | 02:50 | With my mouse over sRGB, I can read in
the Description box at the bottom of this
| | 02:54 | dialog box, what sRGB is.
| | 02:58 | As we learned there, sRGB is a color
space that reflects the characteristics of
| | 03:02 | the average PC monitor, and
that's what we're designing for.
| | 03:06 | It's ideal for web work, but it's not
recommended for other kinds of work,
| | 03:09 | because it does have a limited
range of colors that it will display.
| | 03:13 | Now let's take a look at the
Color Management Policies here.
| | 03:16 | They tell us what will happen if we
were to open a file that contains an
| | 03:20 | embedded color profile other than sRGB.
| | 03:23 | So for example, we may have a digital
camera that embeds a color profile like
| | 03:27 | Adobe RGB, or ProPhoto RGB, or someone
else may have edited the photo and saved it
| | 03:34 | embedding a profile.
| | 03:35 | In that case, what will happen
automatically, with these settings, is that the
| | 03:40 | non-sRGB color profile will be preserved.
| | 03:44 | Moreover, Photoshop will not
say anything to us in that case.
| | 03:48 | It won't ask us when opening a
mismatched file like that or when pasting from a
| | 03:53 | mismatched file, like that, to another file.
| | 03:55 | So, that's how we set up our
color settings and then we click OK.
| | 04:00 | Now, if you're working along with me,
open a file called apple_teapot.psd, which
| | 04:06 | you'll find in the Chapter 04
Exercise Files folder.
| | 04:10 | At the bottom of the Document Window, you
see this document information area right here.
| | 04:16 | Click the arrow to the right of that
area and choose Show and then move over and
| | 04:21 | choose Document Profile.
| | 04:24 | That reveals the document profile that
has been embedded in this particular image.
| | 04:29 | As you can see, it bears a profile
that is different than an sRGB profile.
| | 04:35 | This image is tagged
with a ProPhoto RGB profile.
| | 04:38 | We know from our Color Settings that
what happens, in this case, is that
| | 04:42 | Photoshop honors this embedded profile.
| | 04:44 | It doesn't try to change it.
| | 04:46 | And it wouldn't say anything
to us when we open this image.
| | 04:49 | So now, I would go ahead and work on
my image, changing anything I wanted to
| | 04:53 | about it, preparing it for the Web and
we'll learn how to prepare a photo for
| | 04:57 | the Web in future movies.
| | 04:59 | But assume we've done all that and now
we're about to save this image for the
| | 05:03 | Web, what we have to do is to convert
it to a Web friendly format and compress
| | 05:09 | it, so that it's smaller for the Web.
| | 05:11 | We do all of that in the Save for Web
window and we're going to learn lots more
| | 05:15 | about using the Save for Web
window in a later chapter too.
| | 05:18 | But before we open the Save for Web window,
it's good practice to convert images like this,
| | 05:24 | ones that have embedded profiles other
than sRGB into the sRGB Color Space, and
| | 05:31 | here's how you do that.
| | 05:32 | You'll go up to the Edit menu
and go down to Convert to Profile.
| | 05:39 | That opens this Convert to Profile
dialog box, where you'll choose, in the
| | 05:44 | Destination Space Profile field, sRGB.
| | 05:48 | I am going to leave everything else at
its defaults and I'm going to click OK.
| | 05:54 | And that's all I have to do and then I
continue on with my Web workflow, opening
| | 05:58 | Save for Web and optimizing the image
as we'll learn to do in future movies
| | 06:03 | When we do take a look at the Save for
Web window in other movies, we'll see
| | 06:07 | that there's a new feature there
that's intended to automatically convert
| | 06:10 | images like this to sRGB.
| | 06:14 | So, if you're optimizing images as
JPEGs or GIFs, you probably can just rely on
| | 06:18 | that automatic sRGB conversion.
| | 06:21 | But the workflow that I have shown you here
really is the safest and broadest workflow.
| | 06:26 | It works in Photoshop CS2 as well as
Photoshop CS3 and it works with JPEGs, GIFs and PNGs.
| | 06:32 | That concludes our look at
color basics in Photoshop CS3.
| | 06:37 | In the next chapter, we'll be looking
at the details of putting together a
| | 06:41 | layered composition for the Web in Photoshop.
| | Collapse this transcript |
|
|
5. Type BasicsVector-based type| 00:00 | When you're working on a Web page in
an HTML editor, most of the text that
| | 00:04 | you'll add to the page will be HTML code-based,
| | 00:08 | but sometimes, you'll want to
add some graphic text to a page.
| | 00:12 | For example, you might have a couple of
lines of large text, as you do here, in a
| | 00:16 | headline on a page, or in a banner ad,
or you may want to use a font that you
| | 00:21 | are pretty sure your users won't have.
| | 00:23 | In all those cases, you'll want to
create graphic text in a program like
| | 00:27 | Photoshop, and that's what we're
going to look at in this chapter, how
| | 00:30 | Photoshop handles Type.
| | 00:32 | In this movie, we're going to learn
about vector-based type in Photoshop.
| | 00:37 | If you're following along with me,
open flavor_of_the_month.psd from your
| | 00:42 | Chapter 05 folder, in the Exercise Files.
| | 00:45 | Let's take a look at the Layers panel here.
| | 00:47 | You'll see that we have three layers,
the bottom layer is just a background.
| | 00:50 | It's the other two layers that
are important to this exercise.
| | 00:54 | The top layer, flavor of the
month, is this white line of Type.
| | 00:58 | Notice that there's a big T on this layer.
| | 01:00 | This identifies the flavor of the month
layer as a special Photoshop Type layer.
| | 01:06 | In Photoshop, the special
Type layers are vector-based.
| | 01:10 | That means they are just composed of
instructions to the computer, like put a
| | 01:13 | point here and put another point there
and create a curve between those two.
| | 01:18 | The next layer down, dragonwell, which
I'll turn on and off, so you can see what
| | 01:22 | it contains, is not a special Type layer.
| | 01:25 | It's just a layer of rasterized Type, which
means Type that has been changed into pixels.
| | 01:31 | So that is just like any
other picture on any other layer.
| | 01:34 | This layer, the Type layer, flavor of
the month, because it is vector-based,
| | 01:39 | can be resized or rotated or the
content of the layer can be changed.
| | 01:45 | It can be re-edited in any way
without degrading the quality of the text,
| | 01:50 | so no matter what you do to this
layer, the text will remain clean and
| | 01:54 | smooth at the edges.
| | 01:56 | Let's try to resize the text on
this layer and see how it looks.
| | 01:59 | First, we have to select all the Type
on the layer and one quick way to do that
| | 02:03 | is simply to double-click the T
on the flavor of the month layer.
| | 02:08 | And you can see that all
the text is highlighted here.
| | 02:11 | If you take a look at the Toolbox,
you'll see that the Horizontal Type tool is
| | 02:15 | automatically selected.
| | 02:16 | I am going to go up to the Options bar
for this Horizontal Type took, and I am
| | 02:21 | going to the Font Size menu right here,
I'll click and hold and then I'll move
| | 02:25 | down and choose, instead of the
current 18 pt Type, 36 pt Type.
| | 02:31 | You can see the Type get bigger there.
| | 02:33 | It also went right off the screen, so
I'm going to select the Move tool and I'm
| | 02:37 | going to click and when I click with
the Move tool, the highlight goes away and
| | 02:42 | I'm just going to move that
Type back onto the screen.
| | 02:45 | If you look closely at this Type,
you'll see that it still looks clean and
| | 02:48 | smooth at the edges.
| | 02:50 | Now, let's try to resize this Type layer,
the rasterized Type layer, that is not
| | 02:55 | vector-based and see what
happens to it by comparison.
| | 02:58 | First of all, if I go over to the
Layers panel and I try to select the
| | 03:02 | dragonwell text by double-clicking the
icon there, I won't be able to do so.
| | 03:06 | I'll show you what happens.
| | 03:08 | If you double-click on this icon, on
the dragonwell layer, you get a great big
| | 03:11 | dialog box that has nothing to do
with resizing text and we'll look at this
| | 03:15 | dialog box in another movie.
| | 03:17 | But I am going to cancel that and tell
you that the only way to resize this text
| | 03:21 | is to use the Transform commands.
| | 03:24 | So with the dragonwell layer selected
in the Layers panel, I'm going to go to
| | 03:28 | the Edit menu at the top of the
screen and I'll choose Free Transform.
| | 03:34 | That puts this bounding box around
the contents of the dragonwell layer.
| | 03:37 | I am going to hold down my Shift key
to constrain proportions and move my
| | 03:42 | mouse over one of that diagonal anchor points
here and drag to increase the size of that text.
| | 03:50 | As I do, you can see it's already
getting all fuzzy and blurry on the edges.
| | 03:54 | Text has gone off the edge of the page,
so I'm just going to click on it and
| | 03:57 | drag it back on the page.
| | 03:59 | And to accept this transformation, I
need to go up to the Tool Options bar again
| | 04:04 | and way over on the right, you'll see
a great big checkmark. I'll click that
| | 04:08 | and the transform is finished.
| | 04:10 | Now, if you look at the Dragonwell text,
you can see that it's quite fuzzy and
| | 04:14 | it just doesn't look good.
| | 04:15 | It's certainly not as crisp and clean at
the edges as the flavor of the month text.
| | 04:20 | So that illustrates the advantage of the
fact that Photoshop has vector-based type.
| | 04:25 | Use it as much as you can when you're
working with text in Photoshop, and try
| | 04:29 | not to rasterize your Type layers.
| | 04:31 | There are couple of
different kinds of Type in Photoshop.
| | 04:34 | There is Character type for creating
individual lines of text and there's
| | 04:38 | Paragraph Type for creating
larger paragraphs of text.
| | 04:41 | In the next movie, we're going to do
look at how to create Character Type.
| | Collapse this transcript |
| Creating character type| 00:00 | In the last movie, I mentioned that there are
two kinds of vector-based type in Photoshop.
| | 00:05 | There is character type, which is used
to create single lines of type, like this
| | 00:09 | flavor of the month type layer here,
and there is paragraph type, used to create
| | 00:14 | multiple lines of type.
| | 00:16 | In this movie, we'll look at
working with character type.
| | 00:20 | Let's start by deleting this existing layer
of character type, so that we can re-create it.
| | 00:24 | I'll drag that layer to the
Trashcan at the bottom of the Layers panel.
| | 00:28 | By the way, if you're
working along with me, you can open
| | 00:30 | flavor_of_the_month_02.psd.
| | 00:33 | Now let's re-create that line of type by
moving to the Toolbox and selecting the
| | 00:38 | Horizontal Type tool.
| | 00:39 | Then I'll go into the image and notice
that my cursor has changed to a type cursor.
| | 00:44 | I'll click in the image and
I'll type Flavor of the month.
| | 00:50 | I'm going to move that line of type
into position by grabbing the Move tool in
| | 00:53 | the Toolbox, and then I'll click-
and-drag and move that line of type.
| | 00:58 | Notice that pink Smart Guide on the
right that helps me line up this layer with
| | 01:03 | the layer called dragonwell.
| | 01:05 | If this Smart Guide doesn't show up
for you, then go up to the View menu and
| | 01:11 | choose Show and then choose Smart Guides.
| | 01:17 | Now let's look at some of the options
that we have to change the appearance of
| | 01:21 | character type in Photoshop.
| | 01:23 | I'm going to select the Type tool again, and
that changes the options in the Options bar.
| | 01:27 | In order to affect this line of type,
I need to highlight the line of type.
| | 01:31 | One way to do that is to click-
and-drag across the line of type.
| | 01:36 | If you don't want to see the highlight
the whole time, as I mentioned in the
| | 01:38 | last movie, you can press
Command+H on a Mac, or Ctrl+H on a PC.
| | 01:43 | The text is still selected, but we don't
have to look through that purple highlight.
| | 01:48 | Let's go up to the Font field in the Options bar,
click-and-hold and change to a different font.
| | 01:53 | What's nice about this list is that you
get a little sample of each font so you
| | 01:57 | can see what it looks like.
| | 01:59 | So, I'll choose Adobe Caslon Pro.
| | 02:01 | You can choose whichever font you like.
| | 02:03 | And now I'll move over to the
Style field and click there.
| | 02:06 | Here, I see all the styles
that come with Adobe Caslon Pro.
| | 02:11 | Now all fonts have the same styles available.
| | 02:14 | So, for example, if I were to change
back to the Arial font here in the Font
| | 02:18 | menu, take a look at the styles that
are now available, and you'll see that
| | 02:23 | they're slightly different than the
styles available with Adobe Caslon Pro.
| | 02:28 | We can also change the font size from this menu.
| | 02:32 | So I'll click and I'll choose
24 point instead of 18 point.
| | 02:36 | Now I have move the type over.
| | 02:38 | When I do that, by clicking on the Move
tool, I am actually deselecting the text.
| | 02:44 | I'll have to select it
again to make further changes.
| | 02:46 | So this time, let's select all the text
by double-clicking the T on the text layer.
| | 02:51 | It's just an alternative way to
highlight text on a layer, again, Command+H or
| | 02:56 | Ctrl+H to hide that highlight.
| | 03:00 | Now I want to talk about Anti-aliasing here.
| | 03:03 | Right now, it's set to Smooth, and
that makes my type look nice and smooth.
| | 03:06 | I'm going to zoom in with the Zoom
tool, selecting the Zoom tool in the
| | 03:10 | Toolbox and clicking-and-dragging
around some text here in the document
| | 03:15 | window, to show you that Anti-
aliasing gives us some semitransparent pixels
| | 03:20 | around the edge of the text.
| | 03:21 | That's what makes the text look smooth.
| | 03:24 | It's an optical illusion, really.
| | 03:26 | Let's go back to 100% view by
double-clicking the Zoom tool.
| | 03:29 | Now I am going to select the Type tool
again and change the Anti-aliasing to None.
| | 03:35 | Notice in the document window, when I let go
the mouse, how much different the text looks.
| | 03:41 | If I got my Zoom tool and zoomed in on
the text now, you would see that there
| | 03:45 | aren't any semitransparent pixels,
because now, the text is not anti-aliased.
| | 03:50 | This is actually called aliased text.
| | 03:53 | Double-clicking the Zoom tool again to
go back to 100% view, and selecting the
| | 03:57 | Horizontal Type tool again, I'm going
to go back in and change back to Smooth,
| | 04:01 | because it looks a lot better on this text.
| | 04:04 | If you're wondering when you might use
None, the answer is if you had some text
| | 04:09 | that was smaller than 14 point, in that
case, text sometimes looks better when
| | 04:13 | it is aliased rather than anti-aliased.
| | 04:15 | But when we text larger than
14 point, I like to use Smooth.
| | 04:20 | You can also change the color of an
entire line of type or just of one letter or
| | 04:26 | one word in a line of type.
| | 04:28 | To do that with the Type tool selected
in the Toolbox, I am going to come in
| | 04:31 | and click-and-drag over the word, 'Flavor',
and then I'm going to click the Color
| | 04:36 | field in the Options bar.
| | 04:39 | That opens the color picker, where I
could choose a color here, by moving the
| | 04:43 | slider, and just choosing a color
that I like, to recolor the word Flavor.
| | 04:48 | Let's get it a little bit greener,
perhaps, there we go. And I'll click OK.
| | 04:57 | I'm going to press Command+H on a Mac,
or Ctrl+H on a PC so we can hide the
| | 05:03 | highlight there and see
the color that we've chosen.
| | 05:06 | In addition to the options for
character type that you see in the Tool Options
| | 05:10 | bar now, there are more options that
we can see in the Character palette.
| | 05:14 | To open the Character palette, you
click this icon in the Tool Options bar.
| | 05:19 | There is the Character palette, and
some of the fields here are redundant of
| | 05:23 | what we saw with the Type tool options.
| | 05:26 | For example, we have a font size
here and we have a font style up here,
| | 05:32 | but there are some new options too.
| | 05:34 | So, for example, we have a tracking
option right here that we can use to
| | 05:38 | increase the space between
letters in a line of type.
| | 05:40 | So, I'm going to come in and
select this line of type again by
| | 05:44 | clicking-and-dragging over it, and then
pressing Command+H, or Ctrl+H on a PC to
| | 05:49 | hide that highlight.
| | 05:51 | Then if I come to the tracking field
and move my mouse over the tracking label
| | 05:55 | here, when my cursor changes to a
double-pointed arrow with a finger, I'm going
| | 06:00 | to click-and-drag to the right.
| | 06:03 | That increases the space between the letters.
| | 06:05 | And if I drag back to the left, I
decrease the space between letters.
| | 06:11 | Then we have some buttons
down here that are useful.
| | 06:13 | If you are using a font that doesn't have,
for example, an italic style, you can
| | 06:17 | click on this faux Italic button and
the text looks like it's in italic style.
| | 06:23 | I'll unclick that again and you can
check out these other buttons on your own,
| | 06:27 | buttons that give you all caps or
underlines or strikethroughs, et cetera.
| | 06:31 | So, those are all the options that you
have when you're working with character
| | 06:34 | type in Photoshop CS3.
| | 06:36 | In the next movie, we're going to
be taking a look at working with
| | 06:39 | paragraph type.
| | Collapse this transcript |
| Creating paragraph type| 00:00 | In the last movie, we talked
about using character type.
| | 00:04 | In this movie, let's take a look at
paragraph type, which is also editable
| | 00:08 | vector-based type in Photoshop.
| | 00:11 | If you're following along,
open javaco_about.psd.
| | 00:14 | You'll see that there are two type layers here.
| | 00:18 | This type layer, Javaco
Coffee & Tea, is character text.
| | 00:22 | It was created by typing the first
line, hitting Return and then typing
| | 00:26 | the second green line.
| | 00:28 | This bit of text is paragraph text.
| | 00:32 | It was created by just typing here, and
the text automatically wrapped from line
| | 00:36 | to line without having to hit Enter or Return.
| | 00:39 | Let's see how to make paragraph text,
but before we do, I want to mention that
| | 00:43 | when you're making large paragraphs of
text like this, you're probably going
| | 00:47 | to be creating HTML text in an HTML editor,
rather than graphical text in Photoshop.
| | 00:53 | However, it does make sense to use the
paragraph type feature in Photoshop to
| | 00:59 | add some placeholder text like that that we
see here to some early designs of a webpage.
| | 01:05 | So, let's recreate this
paragraph text in Photoshop.
| | 01:09 | I'm going to click on the lorem ipsum
layer in the Layers panel and drag it to
| | 01:13 | the Trash at the bottom of the Layers panel.
| | 01:16 | Now I'm going to go to the Toolbox
and make sure that I have the Horizontal
| | 01:20 | Type tool selected.
| | 01:22 | Then I'll go into the document and
instead of just clicking and typing, I'm
| | 01:25 | going to click-and-drag
and create a bounding box.
| | 01:30 | Now I could just come in here and type.
| | 01:35 | Notice that as I am typing,
the text is wrapping around.
| | 01:39 | I'm going to undo that, Command+Z on a
Mac or Ctrl+Z on a PC, because I want to
| | 01:43 | show you another way to get
text into this bounding box.
| | 01:46 | Go back to your Chapter 5 Files folder
and open a file called lorem_ipsum.txt,
| | 01:54 | or if you prefer, a Word
document lorem_ipsum.doc.
| | 01:57 | I have this file opened in TextEdit on
a Mac, any text editor will do though.
| | 02:04 | I'm going to just click-and-drag
across all the text, and then I'm going to
| | 02:08 | press Command+C on a Mac, or Ctrl+C
on a PC to copy the selected text.
| | 02:14 | Then I'll close this file and click
back on the Title bar of the Photoshop
| | 02:19 | document to return to Photoshop.
| | 02:22 | See that my cursor is still
clicking in the bounding box.
| | 02:26 | So, when I press Command+V on a Mac, or
Ctrl+V on a PC to paste in the copied
| | 02:32 | text, it goes right into the
paragraph text bounding box.
| | 02:37 | Take a look at the bottom-right of the
bounding box and you'll see that there is
| | 02:39 | a square with a checkerboard inside.
| | 02:42 | That means that you've put more
text in the box than can currently fit.
| | 02:46 | It tells you that you should
expand the box to see all of the text.
| | 02:50 | You can click on any of the anchor points
here and expand the box in any direction.
| | 02:54 | So, I could go widthwise, I could go
lengthwise, or I could go both ways.
| | 03:01 | As I change the dimensions
of this box, the text rewraps.
| | 03:08 | You can change anything about the
text in this box, just like you could
| | 03:12 | with character text.
| | 03:13 | So, for example, if I wanted to change
the color of a couple of words here, I
| | 03:18 | could click-and-drag over those words
and I could go up to the Type Options
| | 03:22 | bar, click in the Color field and select a
different color here, maybe a green, and say OK.
| | 03:30 | Then click off and I'll see that
those words have changed color.
| | 03:34 | I can affect this type with
other options in the Character and
| | 03:37 | Paragraph palettes.
| | 03:39 | To open those palettes, I'll click
this icon on the right side of the
| | 03:43 | Options bar, and here I see the same
options we looked at in the last movie
| | 03:47 | in the Character panel.
| | 03:49 | I can apply these options to
paragraph text as well as to character text.
| | 03:53 | So, for example, if I came into this
bounding box and clicked-and-dragged across
| | 03:57 | all the text to highlight all of it, I
could then go to the Character panel and
| | 04:02 | I could change the leading, or the space
between lines, in this field, by clicking
| | 04:07 | the arrow and choosing, instead
of 12 point, we'll try 18 point.
| | 04:11 | Notice that the text expands here, and
now I have that marker indicating that I
| | 04:16 | have too much text for this size bounding box.
| | 04:19 | So, I will click-and-drag the bounding box
to make it longer to include all the text.
| | 04:24 | And then I'll click off.
| | 04:26 | There are more options in the Paragraph panel.
| | 04:29 | I'll click on its tab and you can see
here that we can affect alignment,
| | 04:36 | as well as indenting, the space
between paragraphs, and hyphenation.
| | 04:41 | When we're all done creating our
paragraph text, we go up to the Tool Options
| | 04:46 | bar and click this big checkmark.
| | 04:49 | That commits all our changes.
| | 04:51 | That's how you create paragraph
text and work with it in Photoshop CS3.
| | Collapse this transcript |
|
|
6. Creating a Web Graphic from ScratchStoryboarding| 00:00 | Now that we have the basics of using
Photoshop under our belts, we're going to
| | 00:04 | start the process of creating
some graphic assets for a webpage.
| | 00:08 | I'll show you some neat tricks, like
how to combine images using layer masks
| | 00:12 | and blending modes.
| | 00:13 | But before you create any assets for a
webpage, it's wise to plan out your page.
| | 00:18 | We call it storyboarding.
| | 00:20 | I'd like to show you in this movie
how you can storyboard in Photoshop.
| | 00:23 | If you're working along with me, open
IE_PC_1024x768.psd, in the Chapter 6
| | 00:31 | Exercise Files folder.
| | 00:32 | This file is a screenshot of the
Internet Explorer browser opened on a PC, whose
| | 00:38 | screen resolution is set to 1024x768.
| | 00:42 | We made this screenshot to simulate
the size of a web browser that a typical
| | 00:46 | user might be using today.
| | 00:48 | Using this image as a background, we'll
be able to lay out some elements and get
| | 00:52 | them to approximately the right size,
so that we can estimate how big to make
| | 00:56 | them when we design the graphics.
| | 00:58 | I suggest you keep a copy of this file and
use it when you're designing your own pages.
| | 01:02 | To start the storyboarding process, I'm
going to go to the Toolbox and I'm going
| | 01:06 | to select this tool,
which is the Rectangle tool.
| | 01:10 | The Rectangle tool is a vector-based shape tool.
| | 01:13 | I'm going to make sure that I have a
dark color here in the foreground color
| | 01:16 | box, and then I'm going to come in
and start dragging out some boxes to
| | 01:20 | represent various items
that I might put on this page.
| | 01:22 | So, let's say I know that I'm going
to include a photograph on the page,
| | 01:26 | perhaps, I'll come in about
here and drag out of rectangle.
| | 01:30 | This doesn't have to be exact, because
I'm able to change it at will, as you'll
| | 01:33 | see in just a moment.
| | 01:35 | Notice that that rectangle has come in
to the Layers panel on its own layer.
| | 01:39 | That's a property of the Shape tools,
and that makes it really easy to
| | 01:42 | storyboard, because you can put
individual elements on separate layers, and
| | 01:45 | then move them around without affecting the
content of the other layers of your storyboard.
| | 01:50 | Now, let's say I want to add, perhaps, a
coupon for some free tea on this page.
| | 01:54 | I want it to be about here
and maybe about this size.
| | 01:57 | So I'll draw another rectangle
and that comes in on its own layer.
| | 02:01 | You can name these layers, so I
might call that first layer 'photo' by
| | 02:04 | double-clicking the Name field and
typing in 'photo', and then clicking off it.
| | 02:10 | I'll double-click this Name field
on the coupon layer and type 'coupon'.
| | 02:16 | Now I want to sketch in some navigation.
| | 02:18 | So I'll come up to this area and I'll drag
out something that looks like a button.
| | 02:23 | We'll want more than one button on this page,
| | 02:26 | so I'm just going to duplicate the
button that I've drawn by selecting the
| | 02:29 | Move tool, holding the Option key
on a Mac, or the Alt key on a PC, and
| | 02:34 | dragging on that button.
| | 02:35 | I have the Smart Guides that show up,
these pink lines, to help me line up one
| | 02:39 | button to the other.
| | 02:41 | We learned about Smart
Guides in an earlier chapter.
| | 02:45 | So I'll do that three more times and now
I have four blocks that represent buttons.
| | 02:49 | Another nice thing is that you
can change the shape of any of your
| | 02:52 | storyboard elements.
| | 02:54 | So, for example, let's say that I
think that maybe I'm going to want a
| | 02:57 | portrait-oriented photo rather
than a landscape-oriented photo.
| | 03:01 | I'll go to the Toolbox and I'll click
on the black arrow and hold and from the
| | 03:06 | flyout menu, I'm going to
choose the Direct Selection tool.
| | 03:10 | Then I'm going to come in and
click just on the edge of this block
| | 03:13 | that represents a photo.
| | 03:16 | I see white anchor points at the sides,
meaning that I've now made the shape of
| | 03:21 | this photo editable.
| | 03:22 | To change the shape, I'm going
to hold down the Shift key to
| | 03:25 | constrain proportions.
| | 03:26 | I'm going to click on his top edge and drag up.
| | 03:31 | I'll make this a portrait-oriented photo.
| | 03:34 | I can also click on the right edge,
holding the Shift key to constrain
| | 03:37 | proportions, and dragging to the left.
| | 03:41 | So that's basically how you can
quickly storyboard a site in Photoshop.
| | 03:45 | I can also block in some text here,
using a feature that we learned about in the
| | 03:49 | last chapter, paragraph type.
| | 03:51 | To do that, I'll go and get the
Horizontal Type tool in the Toolbox.
| | 03:55 | I'm going to come in and just drag
out a bounding box and I'll start
| | 04:00 | typing some dummy text.
| | 04:03 | The text wraps as I type, because
that's a feature of paragraph type.
| | 04:08 | I notice that I have this little square
at the bottom-right with a cross in it,
| | 04:11 | meaning there is more text
here than we can currently see.
| | 04:13 | So if I pull this down, I can see that
extra text, or I can pull it up, or I can
| | 04:18 | change the shape of the bounding box
this way. This is all very flexible and
| | 04:23 | helps me to block out elements on this page.
| | 04:26 | I'm going to go up to the Tool Options
bar for the Horizontal Type tool and just
| | 04:30 | accept the changes that I made to that type.
| | 04:32 | So that's how you can use
Photoshop's Shape tools and paragraph type to
| | 04:36 | storyboard a webpage.
| | 04:38 | In the next movie, we're going to
start creating some graphic assets.
| | 04:41 | I'm going to show you how to use
the File>New dialog box in Photoshop.
| | Collapse this transcript |
| Setting resolution, color mode, and bit depth| 00:00 | In this movie, we're going to begin building
a graphic asset to put on one of our webpages.
| | 00:05 | We'll be making a coupon for some free
tea that will appear on the homepage of
| | 00:09 | the Javaco site that we're making.
| | 00:10 | We'll start the process by going up
to the File menu at the top of the
| | 00:13 | screen and choosing New.
| | 00:15 | This is how you create a new
file from scratch in Photoshop.
| | 00:19 | I'm going to name the new file 'coupon',
and I don't have to add a suffix because
| | 00:24 | that will be added when we first
save the file in a particular format.
| | 00:28 | Now I'll go down to the Width and Height
fields and I want to make sure that the
| | 00:31 | units of measurement here are set to
pixels, because we're designing for a
| | 00:36 | screen, not for print.
| | 00:37 | If the unit of measurement in your
dialog box is set to inches, like this, be
| | 00:41 | sure to come over here
and choose pixels instead.
| | 00:44 | Now, I want to type in a
particular width and height.
| | 00:47 | Because I went through the process of
storyboarding, which I showed you in the
| | 00:50 | last movie, I know approximately
how big I want this coupon to be.
| | 00:54 | I'd like it to be about 250
pixels wide by 160 pixels tall.
| | 00:58 | But I'm actually going to make a file
that's a lot bigger than that, but is of
| | 01:02 | those same proportions.
| | 01:03 | That's because I always want to make
my files as big as I might use them for
| | 01:07 | any purpose, because you can always
make images smaller, but you don't want to
| | 01:11 | make them very much bigger, if you change your
mind about what you're going to use them for.
| | 01:14 | So, for example, here, maybe I want to
have some print coupons that look exactly
| | 01:19 | like the coupon we're making for the web.
| | 01:20 | So I'm going to make this file much
bigger than it needs to be for the web and
| | 01:24 | later I will resize it down for my website.
| | 01:27 | So, I'm going to use the
same proportions as 250x160.
| | 01:32 | I did a little math and I found out
that that comes to about 1000 pixels wide
| | 01:36 | by 630 pixels tall.
| | 01:41 | Now we come to the Resolution field.
| | 01:43 | If you remember anything
from this movie, it's this.
| | 01:46 | It makes absolutely no difference
what number is in this field when you're
| | 01:49 | designing an image for the web.
| | 01:51 | As long as you have set the units of
measurement to pixels and you've typed
| | 01:55 | in some numbers in the Width and
Height field, you have set the size of the
| | 01:58 | image you're creating.
| | 02:00 | It makes absolutely no difference what's
in the Resolution field because
| | 02:03 | resolution is only relevant when
you're creating an image in inches, in other
| | 02:08 | words, when you're creating an image for print.
| | 02:10 | Resolution, in this particular field, in
Photoshop's new dialog box, simply means
| | 02:15 | how many pixels in the file will
be assigned to every printed inch.
| | 02:18 | You may have heard that you need to set
resolution to 72, but in this particular
| | 02:23 | dialog box, it makes no difference.
| | 02:24 | To prove it, look at this.
| | 02:26 | If you come over to the Image Size
over here on the right, which now says,
| | 02:29 | 1.8 Megabytes, the Image Size is the amount
of space that a file will take up on a disk.
| | 02:35 | Image size is a function of the
Width and the Height in inches and the
| | 02:40 | resolution when you're designing in inches.
| | 02:41 | But when you're designing in pixels,
it really makes no difference what's in
| | 02:44 | the Resolution field.
| | 02:46 | You can see, for example, if I type 72
in here, the Image Size does not change.
| | 02:51 | It's always the same.
| | 02:52 | It's always a set number of pixels.
| | 02:55 | So I'll put this back to 300.
| | 02:56 | It doesn't matter what's in there.
| | 02:58 | Now let's go to the Color mode field.
| | 03:00 | Color mode is basically a color model.
| | 03:03 | When you're designing for the web, you
should always set Color mode to RGB Color.
| | 03:08 | Don't choose CMYK Color, because
web browsers can't view CMYK images.
| | 03:13 | Same goes for Grayscale
and all these other choices.
| | 03:16 | So we'll choose RGB Color, and by the
way, this is true even if you're creating
| | 03:20 | a file that's going to look black-and-white.
| | 03:22 | Now we'll move over to the Bit Depth field.
| | 03:25 | When you're designing for the web,
Bit Depth, which is the amount of color
| | 03:28 | information in each pixel, should
always be set to 8 bit, because only 8 bit
| | 03:33 | files can be displayed in a web browser today.
| | 03:36 | Now let's go down to the
Background Contents region.
| | 03:38 | We can set this to White, to Background
Color, which is whatever color happens
| | 03:42 | to be here in the background color
box in the Toolbox or Transparent.
| | 03:46 | I'll choose Transparent.
| | 03:47 | It doesn't really matter what you choose
because you can always change the color
| | 03:51 | of the background layer later.
| | 03:53 | And finally, I have the Advanced area opened up.
| | 03:55 | If your Advanced area looks like this,
then click the arrow to the left of it
| | 03:59 | and just check that
Color Profile is set to sRGB.
| | 04:02 | sRGB is the color space that
represents the way the typical PC monitor
| | 04:07 | displays color today, and as we
learned back in the Color chapter, in the
| | 04:11 | movie on color management, that's
the best color space to use when you're
| | 04:14 | designing for the web.
| | 04:16 | So now I'm going to click OK and the file
opens, ready to be worked on in Photoshop.
| | 04:21 | Let's go up to the File menu and save this file.
| | 04:23 | Notice that Save is grayed out,
because this file has never been saved.
| | 04:27 | So we'll choose Save As.
| | 04:30 | We want to save this file in the
chapter06 folder, so you want to navigate there.
| | 04:35 | I'm going to save it as
coupon in the Photoshop format.
| | 04:39 | I prefer to work in the Photoshop
format when I am building files because then
| | 04:43 | we have all our layers and all our proprietary
Photoshop features saved with the source file.
| | 04:48 | Later, at the end of the workflow,
we'll optimize a copy of the file in a
| | 04:52 | web-friendly format like JPEG or
GIF, as you'll learn in later movies.
| | 04:56 | I'm going to leave layers checked and
I'm going to leave Embed Color Profile
| | 05:00 | checked and I'll click Save.
| | 05:03 | In the next movie, we'll add
some images to our new file.
| | Collapse this transcript |
| Combining images of different sizes| 00:00 | In this movie, we're going to be
starting to build the coupon that we'll be
| | 00:04 | putting on the homepage of our website.
| | 00:07 | We're going to cover how to bring a
large image into a smaller image, something
| | 00:11 | that happens all the time.
| | 00:12 | I'm going to show you the most
efficient way of dealing with that situation.
| | 00:16 | If you worked through the last movie
with me, you can use the file that you
| | 00:19 | created there, coupon.psd, or you can
just open a fresh copy of coupon.psd from
| | 00:25 | the chapter06 Exercise Files folder.
| | 00:28 | The first thing I want to do is to
fill that background layer with black.
| | 00:32 | So I'm going to go over to my Toolbox
and I see I don't have black there as
| | 00:35 | my foreground color.
| | 00:36 | If you're in the same situation, just
press D, for default, on your keyboard and
| | 00:42 | that sets the foreground color to black.
| | 00:44 | In an earlier movie, we learned a
shortcut for filling with the foreground
| | 00:47 | color, that is to press Option+Delete
on a Mac, or Alt+Backspace on a PC.
| | 00:54 | So Option+Delete, Alt+Backspace
fills with the foreground color.
| | 01:00 | I'm going to give this layer a name.
| | 01:02 | I'll double-click the layer 1 generic name
and type in 'bg' for background and click off.
| | 01:08 | Now, let's go to the chapter06 folder and
open another image, one called fern.psd.
| | 01:16 | fern.psd looks like it's small enough
to go into coupon.psd on my screen at
| | 01:21 | least, but actually, that may not be true.
| | 01:23 | Don't make the mistake of comparing two
images that are open in Photoshop when
| | 01:27 | those images are set to different zoom views.
| | 01:30 | So for example, fern.psd is showing at 33%
of its actual size, but coupon.psd is
| | 01:37 | open at 66.7% of its actual size.
| | 01:40 | So we can't assume that fern.psd is
really smaller than coupon.psd, but I don't
| | 01:45 | suggest that you spend time trying
to resize files to match one another.
| | 01:50 | Just go ahead and drag one into the
other and then I'm going to show you the
| | 01:53 | most efficient way of changing the
size of the file that comes in, to make it
| | 01:57 | match the receiving image.
| | 01:59 | So to do that, go to the
Toolbox and select the Move tool.
| | 02:03 | Then click inside fern.psd and
then press down on the Shift key.
| | 02:09 | The Shift key constrains fern.psd,
so that it will land directly in the
| | 02:13 | middle of coupon.psd.
| | 02:15 | Now click-and-drag, and as soon as
you see that gray bounding box inside of
| | 02:19 | coupon.psd here, you can release your
mouse and then release the Shift key.
| | 02:25 | So as you can see, we can't see the
whole fern in coupon.psd because it turns
| | 02:29 | out that fern.psd really
was bigger than coupon.psd.
| | 02:34 | Let's actually close fern.psd
because we don't need it anymore.
| | 02:37 | But you can see that the whole -- there
is a larger part of the fern showing in
| | 02:41 | fern.psd than is showing in coupon.psd.
| | 02:47 | Before I do anything with this layer,
I'd like you to get in the habit of
| | 02:50 | naming your layers.
| | 02:51 | So let's go over to Layers palette and
let's double-click the default name, layer
| | 02:55 | 1, and let's call this 'fern'.
| | 02:59 | Now the task is to change
the size of the fern layer.
| | 03:03 | So with the fern layer selected in the
Layers panel, I'm going up to the Edit
| | 03:07 | menu and down to Free Transform, or you
can use the keyboard shortcut, Command+T
| | 03:14 | on a Mac, or Ctrl+T on a PC.
| | 03:17 | Normally, when you invoke the
Transform command as we just did, you see
| | 03:22 | little anchor points at the corners and you can
click-and-drag those to make an image smaller.
| | 03:26 | But we don't see these in this case,
because fern.psd is much bigger than the
| | 03:31 | boundary of the document window that
we're looking at. So what can we do?
| | 03:35 | Here is a great shortcut to remember.
| | 03:37 | On the Mac, press Command+0, on the
PC that's Ctrl+0. What happens is that
| | 03:45 | Photoshop makes the area
around the document visible,
| | 03:49 | that's this gray area here which is
called the canva,s and it makes it just the
| | 03:53 | right size so that we can see the
actual boundaries of fern.psd, indicated by
| | 03:58 | this line and these anchor points.
| | 04:00 | So now I can grab one of
those corner anchor points.
| | 04:03 | I'll get the one at the bottom-right
and I'll hold the Shift key to constrain
| | 04:07 | the proportions and drag.
| | 04:09 | That starts resizing the fern image,
making it smaller as I drag in.
| | 04:16 | Now I'm going to grab the upper-left
anchor point and drag diagonally in, and I
| | 04:24 | see I can come in a little
more on the bottom. There we go.
| | 04:28 | Now the height of fern.psd is the same
as the height of the receiving image, the
| | 04:32 | one with the black background.
| | 04:34 | Now I want to push fern.psd over
because I would like to have the fern starting
| | 04:39 | at the corner of the image.
| | 04:40 | So I just click inside and push to the left.
| | 04:45 | Now I'm going to click the big
checkmark in the Tool Options bar, which is what
| | 04:48 | you always need to do when
you do a Transform command.
| | 04:51 | It commits the transform.
| | 04:53 | Now I want to take care of this problem
that fern.psd is now not wide enough to
| | 04:58 | fill the entire receiving image,
| | 05:00 | so we see the black
background on the layer below.
| | 05:02 | So here is what I'm going to do.
| | 05:04 | I'm going to go to the Toolbox and I'm
going to select the Rectangular Marquee tool.
| | 05:10 | This is a Selection tool.
| | 05:11 | I'm going to use this tool to click-and-
drag out a rectangular selection just on
| | 05:16 | the edge of the fern image.
| | 05:19 | Then I'm going to transform just that
selected area, stretching that small area
| | 05:24 | out to the right to fill the rest of the image.
| | 05:26 | I'll go to Edit and down to Free
Transform again, or Command+T, or Ctrl+T and then
| | 05:34 | I'm going to click on the right-hand
anchor point here and just drag to the
| | 05:37 | right to stretch out that selected area
of fern.psd and I'll click the checkmark
| | 05:43 | to accept that transform.
| | 05:45 | Finally, to delete these marching
ants that indicate the boundary of the
| | 05:48 | selection, I'm going to the Select
menu and choose Deselect, or Command+D, or
| | 05:53 | Ctrl+D on your keyboard.
| | 05:56 | Now what I just did works great with
an image like this where you have a very
| | 06:00 | plain area that you're stretching.
| | 06:01 | It doesn't work as well when you have a
lot of detail in an area, because as you
| | 06:05 | can imagine, you would see
the stretched out detail here.
| | 06:07 | It's kind of interesting effect, but
it's not exactly what we're going for here.
| | 06:11 | But that's what you can use to resize
one image to fit another after you bring
| | 06:15 | the two images together.
| | 06:17 | We'll continue building this asset
and learning techniques for combining
| | 06:20 | images in the next movies.
| | Collapse this transcript |
| Combining images using Layer Masks| 00:00 | This is a movie you shouldn't skip.
| | 00:02 | I'm going to show you a technique
that's one of the most popular ones that I
| | 00:05 | teach, and that is how to combine two
images using a layer mask with a gradient.
| | 00:11 | To prepare for this movie, I closed all
the other panels except for the Layers
| | 00:14 | panel, so you really could get a good
view of the layers and I set the image in
| | 00:19 | its document window to 50% view and
resized the document window so that there
| | 00:24 | isn't any gray canvas showing around it.
| | 00:27 | Let's get started combining images
by opening a couple of images from our
| | 00:31 | chapter06 file folder.
| | 00:33 | I've opened coupon_02.psd, or if you
were following along with me you can just
| | 00:38 | use the image that you finished in the
last movie, and let's open one more image
| | 00:42 | from chapter06 and that's bamboo.psd.
| | 00:45 | We're going to move bamboo into coupon. Just
like in the last movie, we'll get the Move tool.
| | 00:52 | We'll click in the bamboo image, hold
the Shift key, drag the bamboo image
| | 00:57 | into the coupon image.
| | 00:59 | When you see that gray bounding box,
you can release your mouse and then
| | 01:02 | release the Shift key.
| | 01:04 | Now, we can click back on
the bamboo image and close it.
| | 01:07 | We're done with it.
| | 01:09 | Look in the Layers panel for the coupon
image and you can see that we now have
| | 01:13 | three layers: bamboo at the top,
then fern, then the background layer.
| | 01:18 | If bamboo is not at the top, just click
on that layer and drag it to the top of
| | 01:21 | the Layer stack and release when you
see a dark line at the top of the stack.
| | 01:26 | The problem with putting the bamboo
image above the fern image is that you can't
| | 01:30 | see the fern anymore in the document window.
| | 01:33 | Let me turn bamboo off for a second
to remind you that there is a fern down
| | 01:37 | there in the bottom-left
corner of the fern layer.
| | 01:39 | So what we're going to do is make part
of the bamboo layer transparent so that
| | 01:44 | we can see down to the fern, just in
the bottom-left corner on the layer below,
| | 01:48 | while retaining most of the
bamboo image in the document window.
| | 01:52 | Let's see how we can do that.
| | 01:53 | Now, some people might think, "Well,
you come in with the Eraser tool and you
| | 01:56 | start erasing part of the bamboo."
| | 01:58 | I think that's a bad idea, because
that is a destructive method of editing.
| | 02:02 | Once you've erased part of a layer, you
can't counter always being able to get it back.
| | 02:06 | So instead, I recommend that you
use a layer mask for this purpose.
| | 02:10 | To add a layer mask to the bamboo layer,
select the bamboo layer and then go to
| | 02:15 | this icon at the bottom of the Layers
panel, it looks like a square with a
| | 02:18 | circle in it, and click.
| | 02:20 | That adds a white layer
mask to the bamboo layer.
| | 02:23 | When the mask comes in white, it's
really not doing anything at all.
| | 02:27 | It's only when we add black or gray
paint to the layer mask that it will hide
| | 02:31 | parts of the bamboo image,
letting us see down to the fern below.
| | 02:36 | I could just get the Brush tool and
start painting with black on this layer
| | 02:39 | mask, but as you can imagine, that's
going to get me some pretty rough edges and
| | 02:43 | I won't get a lovely, soft, gradual
combination of the bamboo image with the fern.
| | 02:49 | So instead, I'm going to use a gradient.
| | 02:51 | I'm going to go to the Gradient
tool in the Toolbox and select it.
| | 02:58 | I'll look up at the
gradient in the Tool Options bar.
| | 03:00 | In my case, I have a
gradient from black to white.
| | 03:03 | Yours may not look this way.
| | 03:05 | So just to ensure that you have a black
to white gradient, click in the middle
| | 03:08 | of that Gradient bar.
| | 03:10 | That opens the Gradient Editor, and
the very first preset should give you a
| | 03:14 | black to white gradient.
| | 03:16 | So you can click that and say OK.
| | 03:18 | Now, we're going to go back to the
Tool Options bar and look at the various
| | 03:22 | styles of gradients.
| | 03:23 | By default, the Linear Gradient is selected.
| | 03:26 | In this case, I'm going to click on
the next icon to make a Radial Gradient.
| | 03:30 | Then I'm just going to double-check that I
have the layer mask selected on the bamboo layer.
| | 03:36 | If your bamboo layer looks like this
instead, with the highlight around the
| | 03:40 | image thumbnail, you're not going
to get the result that you want.
| | 03:43 | Instead, make sure that there's a highlight
around the layer mask on the bamboo layer.
| | 03:49 | Now, come into the image and click from
the bottom-left corner and drag toward
| | 03:54 | the center of the image.
| | 03:55 | Are you ready for the magic? There it is.
| | 03:58 | When you let go, you can start
to see the fern peeking through.
| | 04:02 | Here's what's happening.
| | 04:03 | Where the layer mask is black, the
bamboo layer is being hidden, where the layer
| | 04:08 | mask is gray, we're partially seeing
through the bamboo layer, and where the
| | 04:13 | layer mask on the bamboo layer is white,
over here, we can't see at all through
| | 04:17 | the bamboo layer to the layer below.
| | 04:19 | Now if you don't like the result that
you've gotten, I think I'd like to see a
| | 04:23 | little bit more of this fern, I can
just repeat and do that as many times as I
| | 04:26 | want, clicking at the bottom-
left and dragging toward the center.
| | 04:30 | The longer I make this line, the
larger the black part of the layer mask will
| | 04:34 | be, and we'll see more of the image below.
| | 04:37 | Now if you still want to see even
more of the fern, you can click the
| | 04:41 | Paintbrush, go to the Tool Options bar
and click in the Brush Picker, make sure
| | 04:47 | you have a very soft brush.
| | 04:49 | It should be over to the
left of the Hardness slider.
| | 04:51 | I'd like to choose a relatively large
brush, about 50 would do maybe here, and
| | 04:56 | then we'll click back in the Options
bar to close that picker and we'll come in
| | 05:00 | and we'll just paint over parts of this fern.
| | 05:02 | And what's happening is because we're
painting with black, we're getting to see
| | 05:06 | more and more of the fern.
| | 05:07 | Again, I'm painting with
black on the layer mask.
| | 05:10 | I'm not painting with
black directly on the image.
| | 05:12 | Wherever I paint with black, I hide
parts of the bamboo layer, so I can
| | 05:18 | see below to the fern.
| | 05:19 | I'm going to Option+Click on the layer mask,
| | 05:23 | that's Alt+Click on a PC, just to show
you what we have, because we can actually
| | 05:26 | see the layer mask here in the
document window when we do that.
| | 05:29 | And you can see the gradual mask and
then you can also see where I painted with
| | 05:33 | black to bring in the fern a little bit more.
| | 05:36 | I'll Option+Click again on
the layer mask to hide it.
| | 05:42 | That's basically how you use layer masks
and gradients to gradually combine two images.
| | 05:47 | We've combined the bamboo on the top
layer, and I'll turn off, with the fern
| | 05:52 | on the layer below. Pretty nice!
| | 05:56 | Please stay tuned for the next movies
in which we'll learn more techniques
| | 05:59 | for combining images.
| | Collapse this transcript |
| Combining images using Blend Modes and Opacity| 00:00 | In this movie, we are going to
look at two more popular techniques
| | 00:03 | for compositing images.
| | 00:05 | We'll look at Layer Blend
modes and Layer Opacity.
| | 00:08 | You can open a fresh copy of Coupon_03.psd
from the Chapter 06 files folder and also open
| | 00:14 | another file called waterfall.psd,
from that file folder.
| | 00:19 | If you have been following along, you
can use the Coupon image that you finished
| | 00:23 | with at the end of the last movie
about Layer Masks, if you prefer.
| | 00:27 | Let's take a look at how big these two
files are as compared one to the other.
| | 00:31 | One way to do that is to go to the
bottom of the Document Window, here at the
| | 00:35 | bottom of the waterfall.psd window, and
click the Arrow there and choose Show
| | 00:40 | and then Document Dimensions.
| | 00:42 | If you can see all the way at the
bottom of your screen, it tells us this file
| | 00:45 | is 1500 x 1125 pixels.
| | 00:48 | Let's do the same thing in the Coupon image.
| | 00:51 | I have clicked on the image to make active.
| | 00:54 | I am going to the arrow, at the bottom
of the document window, choosing Show and
| | 00:58 | choosing Document Dimensions.
| | 01:00 | You can see that the Coupon image
is smaller than the waterfall image.
| | 01:03 | It's only 1000 x 630 pixels.
| | 01:06 | So we are going to bring waterfall into
Coupon, we have a little room to play with here.
| | 01:11 | I really don't want to have the
trees up here, in my composite.
| | 01:15 | So what I'm going to do is make a
selection in waterfall.psd and bring in
| | 01:20 | just the selected portion of that file and
that's the new take home point from this movie.
| | 01:26 | To make a selection in waterfall.psd, I
am going to the Toolbox and I'm going to
| | 01:30 | select the Rectangular Marquee tool.
| | 01:34 | And then, I'm going to come into
waterfall.psd and I'm going to click from
| | 01:38 | the right-side over here, and go all the way
across and I am going to make a selection there.
| | 01:46 | I can move the selection around,
using the same tool, by just clicking and
| | 01:49 | dragging in the center of the selection.
| | 01:51 | So the area within these marching ants is what
we're going to be moving into the Coupon image.
| | 01:57 | To move this selection, we go to
the Toolbox and we get the Move tool.
| | 02:02 | With the Move tool, we can just come
in and click and drag from the waterfall
| | 02:06 | image into the Coupon image and when we see
this gray bounding box, release the mouse.
| | 02:12 | I'm not going to bother holding the
Shift key this time, although you could
| | 02:15 | do that if you wanted this election to land
directly in the middle of the Coupon image.
| | 02:20 | Now let's go and make the waterfall
image active and we can close that, we
| | 02:23 | don't need it any more.
| | 02:25 | Back in the Coupon image,
notice that there's now a new layer.
| | 02:29 | Let's give that a name by double-
clicking the default name and calling it
| | 02:32 | 'waterfall' and clicking Off.
| | 02:36 | The new layer, waterfall, is
completely obscuring the content below,
| | 02:40 | the bamboo and the fern that we, so
nicely, put together using a layer Mask.
| | 02:45 | So what can we do so that
we can see through waterfall?
| | 02:47 | I would like to use it more as a
texture than as the main part of the image.
| | 02:52 | So here's what we are going to do.
| | 02:53 | With waterfall selected, we are going to
go to the Blend mode menu at the top of
| | 02:57 | the Layers palette, and take a
look at what's available there.
| | 03:00 | These are all different algorithms
for combining the colors in the selected
| | 03:04 | layer, here the waterfall layer,
with the colors in the layers below.
| | 03:08 | There are lots to try out here, and
one way to think about them, rather than
| | 03:11 | try to memorize exactly what each one
does is to just think of them in groups.
| | 03:15 | So for example, this group beneath
this line here, all result in a darker
| | 03:20 | composite and this group
results in lighter composites.
| | 03:25 | And if you choose a Layer Blend mode
from this group, you end up with some parts
| | 03:29 | of your resulting image light and
some dark, and so on through this menu.
| | 03:34 | But to be honest, I hardly ever
come in here and try to make a rational
| | 03:37 | choice from the menu.
| | 03:38 | Instead, I do this. I close the menu.
| | 03:41 | I make sure my Move tool is
selected and here, with the waterfall layer
| | 03:46 | selected, I'm going to press on my
keyboard, over and over, Shift and the Plus sign.
| | 03:51 | Keep your eye on the Layer Blend menu
up here and you'll see that every time I
| | 03:55 | press that shortcut, the Layer Blend changes.
| | 03:59 | That's the dissolve mode and we really
don't see much difference here, in the
| | 04:03 | document with dissolve.
| | 04:04 | But if I choose darkened, I do see
quite a difference in the document as the
| | 04:08 | pixels in the waterfall layer are
combined with the pixels on the bamboo layer
| | 04:12 | and fern layer below. Multiply.
| | 04:16 | That's one we use a lot. Although, in this
case, the result is pretty dark, and so on.
| | 04:21 | You can see some of these
effects are pretty unusual.
| | 04:29 | And I just go through the whole menu
and when I finally see one that I like,
| | 04:32 | overlay isn't too bad, although it's
not really what I was looking for, soft
| | 04:36 | light, better, hard light,
that's pretty wacky and so on.
| | 04:43 | If you want to go back the other way in
the menu, you press Shift and the Minus key.
| | 04:47 | I am going to keep going until
I get back up to a darker color.
| | 04:52 | I want to talk about this one,
because it's one of two new layer blending
| | 04:55 | modes in Photoshop CS3.
| | 04:58 | There's darker color and there's lighter color.
| | 05:00 | Darker color compares each pixel in
the selected layer with the corresponding
| | 05:05 | pixel below it in the layers below,
and it gives you the darker of the two.
| | 05:10 | I think in this case, this is going to
do for us, but there's more that we need
| | 05:14 | to do to the waterfall layer to make
this blend mode really look the way that we
| | 05:18 | want it, and that is to vary the
opacity of the waterfall layer.
| | 05:22 | We are going to make the
waterfall layer more see through.
| | 05:25 | To do that, we are going to go up to
Opacity at the top of the Layers palette
| | 05:29 | and I am going to move my mouse over
the word Opacity, the cursor changes to a
| | 05:33 | double pointed arrow and I am just
going to click-and-drag to the left
| | 05:36 | lowering the Opacity.
| | 05:38 | And you can see the
results in the Document Window.
| | 05:41 | We are starting to get to the point
where the waterfall is just looking like a
| | 05:45 | texture, and I might
stop somewhere around there.
| | 05:50 | Now, I can come into the image and with
the Move tool, I am going to drag around
| | 05:54 | until I see just the part of the
image that I think looks best here,
| | 05:58 | I am thinking something like that is
pretty good, because you remember that the
| | 06:02 | waterfall image is larger than the
Bamboo image, so we have a little bit of room
| | 06:05 | to play here and to move waterfall
around until, we get the part that we like.
| | 06:10 | Before we're done with this movie, I just want
to tell you about another way to vary Opacity.
| | 06:14 | As long as you have the Move tool selected,
you can just type a number on your keyboard.
| | 06:17 | So for example, I'm going to type 15 and
look at the Opacity field in the Layers
| | 06:22 | Panel and you'll notice that it changed
to 15 and the image looks much lighter.
| | 06:26 | I'll put it back to 36 by
typing that on a keyboard.
| | 06:30 | So that's another way to blend images
when you're making composites in Photoshop.
| | 06:35 | In the next movies, we'll continue to
build this image, which we are preparing
| | 06:39 | to place on a web page.
| | Collapse this transcript |
| Adding and editing Smart Objects| 00:00 | In this movie, we are going to continue to
build our composite image for use on a web page.
| | 00:05 | And here, we are going to focus on an
exciting feature in Photoshop called Smart Objects.
| | 00:10 | You can use the Coupon image that you
finished at the end of the last movie
| | 00:13 | or you can open a fresh copy of that image,
coupon_04.psd, from the Chapter_06 folder.
| | 00:19 | While you're in the Chapter_06
folder, open also, logo.psd.
| | 00:25 | Let's take a look at the Logo image.
| | 00:26 | You can see that this image has two layers.
| | 00:28 | It has a layer of rasterized text,
this is not editable vector type, but its
| | 00:33 | rasterized text and the smoke curl
layer, which is also a pixel-based layer
| | 00:38 | with a gradient in it.
| | 00:39 | We are going to bring the Logo into our Coupon.
| | 00:43 | What's different this time is that
the logo has multiple layers in it.
| | 00:46 | It turns out it's very easy to bring
multiple layers from one file to another.
| | 00:51 | All you have to do is select those so
we are going to click on the Smoke Curl
| | 00:54 | layer, hold the Shift key and click on
the Text layer and then, we'll get our
| | 00:59 | Move tool from the Toolbox and click
and drag from the Logo image into the
| | 01:03 | Coupon image, and when we see that
gray bounding box, release the mouse.
| | 01:08 | I'm going to close the Logo image.
| | 01:09 | We no longer need that one.
| | 01:12 | As you can see, the logo is a
bit big to fit in this image.
| | 01:16 | We could just resize the
logo with the Transform command,
| | 01:19 | but the problem is that once you
transform a pixel-based image, like this one,
| | 01:24 | you really don't want to go back in
and transform it again, because each time
| | 01:27 | you do that you end up
degrading the quality of the image.
| | 01:30 | The solution is to use Smart
Objects and here's how those work.
| | 01:34 | I am going to convert the smoke
curl layer into a Smart Object
| | 01:38 | by clicking the smoke curl layer and then
going to the Layer menu at the top of
| | 01:42 | the screen and moving down to
Smart Objects>Convert to Smart Object.
| | 01:46 | On the smoke curl layer, you can see
this little icon, which indicates that this
| | 01:50 | is now a Smart Object.
| | 01:51 | I'm going to do the same thing to
Text layer, selecting it and going
| | 01:55 | Layer>Smart objects>Convert to Smart Object.
| | 01:59 | You can put more than one
layer into a single Smart Object,
| | 02:02 | but I want to treat these two
separately, because I'm going to do two
| | 02:05 | separate things to them.
| | 02:06 | First of all, I'm going to transform
both layers, making them both smaller.
| | 02:11 | Because these are Smart Objects, I
don't have to worry about degrading the
| | 02:14 | quality as I resize them.
| | 02:16 | And this is true whether you're working
with pixel-based objects, like the ones
| | 02:20 | you see here, or pixel-based
photographs, or even vector-based objects.
| | 02:25 | So I'm going to select both Smart
Object layers by Shift+Clicking them both and
| | 02:30 | then I'm going to press Command+T,
which is the free transform command.
| | 02:35 | As in previous movies, I can't see the
anchor points around the bounding box
| | 02:39 | here, so I'm going to hold down the
Command key and press 0, that's Ctrl+0 on a
| | 02:45 | PC and now I can reach those anchor
points and I can click on the top-right
| | 02:50 | anchor point, hold the Shift key to
constrain proportions and drag down to make
| | 02:55 | that JAVACO tea logo smaller.
| | 02:57 | And I'll do a little bit here
on the bottom-right as well.
| | 03:03 | And I think I like the way that that looks.
| | 03:06 | So I can click the checkmark.
| | 03:08 | Now, because these are Smart Objects, I
could come in here and change my mind.
| | 03:12 | So let's say I want to transform again,
maybe I am going to make the logo just
| | 03:16 | a little bit bigger.
| | 03:17 | So I can go in with Command+T, hold
the Shift key and change the size of
| | 03:23 | this down or up.
| | 03:25 | What you don't want to do is you
don't want to go more than 100%.
| | 03:28 | So if you look here, in the
Transform Options bar, keep your eye where it
| | 03:32 | says Width 100 and Height 100, and try
not to go like way up here, because in
| | 03:36 | that case, you are asking the computer
to fill in pixels that just were never
| | 03:40 | there in the first place.
| | 03:41 | But you can keep going up and down below 100%.
| | 03:45 | So I'll leave it right here.
| | 03:47 | Then I'm going to click the checkmark on
the Options bar to accept that transform.
| | 03:52 | You may notice that the type doesn't
look very good right now. That's simply a
| | 03:55 | function of the fact that I'm
zoomed into an odd percentage right now.
| | 03:59 | If I were to change this to 50%, by
selecting the Zoom tool, holding the Option
| | 04:03 | key and zooming back to 50%, the type
looks good. That has nothing to do with
| | 04:08 | the use of Smart Objects.
| | 04:11 | So the lesson is that you can
transform a Smart Object, up and down as many
| | 04:14 | times as you want, warping it,
resizing it, scaling it, distorting it,
| | 04:19 | but you don't want to go higher than 100%.
| | 04:21 | However, there are some
things you can't do a Smart Object.
| | 04:25 | In a previous movie, for example, we
learned how easy it is to recolor the
| | 04:29 | content of a layer, by selecting the
layer and using the Lock Transparency
| | 04:32 | feature and then fill in.
| | 04:34 | Well, you can see that we can't do that
on the text layer here, because the text
| | 04:38 | layer has been made into a Smart Object.
| | 04:40 | So if I were to select just the
text layer and try to click the Lock
| | 04:43 | Transparency feature up
here, it's not available.
| | 04:46 | And if I wanted to fill this text
layer with color, I can't do that either.
| | 04:51 | If I go to the Edit menu, the
Fill command is not available.
| | 04:54 | So here's what you do in order to
perform an action on a Smart Object that you
| | 04:59 | can't do right on the object itself.
| | 05:02 | You open the Smart Object.
| | 05:04 | Now, what does this mean?
| | 05:05 | When you make a layer into a Smart Object,
the original data that's on the layer
| | 05:09 | is embedded inside the file, so that
when you do the transforms as we just did,
| | 05:13 | you are not really working on the original data.
| | 05:15 | And that's why you're able to go back
in and do it over and over again, without
| | 05:19 | harming the original data.
| | 05:21 | When you want to paint or fill the
content of a layer, you have to go to the
| | 05:26 | original data and the way you get
there is by double-clicking the icon on
| | 05:30 | your Smart Object layer.
| | 05:32 | So I am going to do that now. Double-
clicking the Text Layer icon, I'll say
| | 05:35 | OK at this explanation and that opens
the original content of the text layer,
| | 05:41 | here, in a separate file.
| | 05:43 | Notice this is called text.psb, which
is different than the original file,
| | 05:47 | which is coupon.psd.
| | 05:50 | So let's make a change here in text.psb.
| | 05:54 | I am going to get my Rectangular
Marquee tool and I am going to click and drag
| | 05:57 | over the JAVACO here, because that's
the only word that I want to change, and
| | 06:03 | then, I'm going to click the Lock
transparency feature at the top of the Layers panel.
| | 06:09 | Now, I'm going to get a color to fill
these letters with. I happen to have one
| | 06:13 | available here as my background color.
| | 06:15 | I am going to click the double pointed arrow
and switch that pretty blue to the foreground.
| | 06:20 | You can open the Color Picker by
clicking the foreground color box and
| | 06:23 | just selecting a color.
| | 06:24 | And now I'm going to fill the
pixels in this selected area by pressing
| | 06:29 | Option+Delete on a Mac, that's
Alt+Backspace on a PC, and now, I can deselect by
| | 06:37 | Command+D on a Mac, or Ctrl+D on a PC.
| | 06:41 | Notice that although the color of the
word JAVACO is different in the original
| | 06:45 | data file, it's still is
black in the Coupon file.
| | 06:49 | To update the Smart Object in the
Coupon file, I have to save the original data
| | 06:54 | file with this change.
| | 06:55 | So I am just going to go to
the File menu and choose Save.
| | 06:58 | You should always choose Save here and
not Save As when you're working with a
| | 07:02 | Smart Object, because you need to
save directly back to the same location.
| | 07:06 | So we will choose Save and now we see
that the Smart Object in the Coupon file
| | 07:09 | has been updated and the word
JAVACO is blue there as well.
| | 07:13 | I'm going to close the original
data file text.psb and we are back to
| | 07:18 | our composite image.
| | 07:20 | So that's how you can make use of Smart
Objects to resize items that you bring
| | 07:25 | into a composite without
worrying about harming their data,
| | 07:28 | and then, if you need to go into a Smart Object
to change the original data, how you do that.
| | 07:33 | In the next movie, we are going to look
at Layer Styles as we continue to build
| | 07:38 | our composite image for use on a web page.
| | Collapse this transcript |
| Creating focus with Layer Styles| 00:00 | We are continuing to build this composite
image, a coupon, to place on our web page.
| | 00:04 | When you combine lots of layered
elements as we are doing here, you
| | 00:08 | sometimes lose focus.
| | 00:09 | Everything is flat and one way to
focus in on a particular element is to add
| | 00:14 | some dimensionality to it.
| | 00:15 | Photoshop's Layer Styles are
a great easy way to do that.
| | 00:19 | If you have been working along with me,
you can use the same file for this
| | 00:22 | exercise that you ended
with in the last exercise,
| | 00:25 | or if you prefer, you could open a
fresh coupon_05.psd from the Chapter_06
| | 00:30 | Exercise Files folder.
| | 00:32 | Let's add a Drop Shadow to that smoke curl,
to try to pop it off of the page a little bit.
| | 00:36 | I am going to select the smoke curl
layer in the Layers panel and then, I'm
| | 00:40 | going to the bottom of the
Layers panel, where I'll click fx.
| | 00:44 | Here's a list of the various
Layer Styles that come with Photoshop.
| | 00:47 | I am going to choose Drop Shadow
and that opens this big dialog box.
| | 00:52 | Over on the left, the checkmark next
to Drop Shadow means that that's the
| | 00:56 | Layer Style that has been applied to
the smoke curl and you can see it here
| | 00:59 | with its default settings.
| | 01:01 | If you would like to change those
settings, to make that shadow perhaps a little
| | 01:05 | more subtle, then make sure that you
have selected Drop Shadow so that it has a
| | 01:09 | blue highlight on it and that will
bring up options on the right side of the
| | 01:13 | dialog box that relate to Drop Shadow.
| | 01:15 | Drop Shadow is being used so much that
it's almost become a clich? and so, when
| | 01:19 | I apply a Drop Shadow, I try to make it
more subtle than the default settings.
| | 01:23 | I might come in and perhaps increase
the size a little bit to spread the shadow
| | 01:28 | out from the smoke curl and I'm
also going to lower its Opacity.
| | 01:33 | I am going to take it all
the way down to about 21.
| | 01:36 | So now it's not right in your face, but
it does move the smoke curl up off the
| | 01:40 | image a little bit and now
I am going to click OK.
| | 01:43 | When you look in the Layers panel,
you'll see Effects and Drop Shadow is
| | 01:47 | listed as an Effect.
| | 01:49 | If you wanted to change the Options
on the Drop Shadow, you can always
| | 01:53 | double-click Drop Shadow and the
Layer Style dialog box would open again.
| | 01:57 | By the way, if at anytime you don't see
Drop Shadow on this layer, it's probably
| | 02:01 | because you have clicked on the arrow
on the fx, right on the layer itself.
| | 02:05 | So if I click that, you can see that
the effects collapse into the layer and if
| | 02:09 | you click it again, you can access
the effects to reopen them if you want.
| | 02:13 | Let's add a layer of text
here, and try another effect.
| | 02:16 | I am going to click on the top layer
and then I am going to the Toolbox and
| | 02:19 | I'll select the Horizontal Type tool.
| | 02:22 | In the Options bar, I am going to choose
Verdana as the font, Regular as the style.
| | 02:28 | I am going to make this
type a little bit smaller.
| | 02:30 | Let's make it about 8 pt and I am
going to leave anti-aliasing at Sharp
| | 02:34 | because I have such a small point size.
That will make the text more readable.
| | 02:39 | I have a dark color here in the type
color field and with all that set up, I am
| | 02:44 | just going to click in my image and I
am going to type 'Present this coupon'
| | 02:52 | I'll hit Enter, 'for a free pot of
JAVACO tea,' and then, I'll click the
| | 03:02 | checkmark to accept that type.
| | 03:04 | I'll get my Move tool and I am
going to move that text where I want it,
| | 03:08 | maybe right down here.
| | 03:09 | Now, what I wanted to show you is that you can
copy a Layer Style from one layer to another.
| | 03:15 | That really comes in handy when
you're making things like a matching set of
| | 03:19 | navigation buttons on a web page and you
want each one to look exactly the same,
| | 03:23 | you can add a Layer Style to one
button and just copy it to all the others.
| | 03:27 | So here's how you would do that.
| | 03:29 | In this case, I would click on the
Drop Shadow effect on the smoke curl layer
| | 03:33 | and hold my Option key,
| | 03:36 | that's the Alt key on a PC, and
click and drag the effect up to the type
| | 03:40 | layer, release my mouse and there we
have a Drop Shadow, not only on the smoke curl,
| | 03:45 | but the same drop shadow with the same
options on the new text that I just typed.
| | 03:50 | If you look in the image, you can vaguely see it.
| | 03:52 | That text looks a little
darker than it did before.
| | 03:55 | To be honest, I don't really like the
way that this particular effect looks on
| | 03:58 | this text, because I'm losing the readability
of the words over here, on top of the plants.
| | 04:04 | So here's something else that
you can do with Layer Styles.
| | 04:07 | You can always change the Layer Styles.
| | 04:09 | So I'm going to open up the Layer
Style dialog box on his type layer by
| | 04:13 | double-clicking the words
'Drop Shadow' on the type layer.
| | 04:17 | That opens the Layer Style dialog
box and instead of this Drop Shadow,
| | 04:22 | I am going to see how maybe an Outer Glow looks.
| | 04:25 | So I'm going to uncheck Drop Shadow,
to take that effect off the type, and I'm
| | 04:30 | going to check Outer Glow.
| | 04:33 | And then, I'm going to highlight
Outer Glow, so that I see some options for
| | 04:37 | Outer Glow over here on the right.
| | 04:39 | Here I can do things like
change the color of the glow.
| | 04:42 | So I'll click in this color box and I am
going to make my glow white and I'll say OK.
| | 04:47 | I am going to spread out this glow by
clicking on the Spread slider and moving
| | 04:52 | it over and you can see that the white
glow is now much more prominent and then
| | 04:57 | I'll soften things up by
increasing the size of the glow.
| | 05:00 | I am going to take it way up, maybe about there.
| | 05:04 | And now, I would like to make it a
little more subtle by reducing the Opacity,
| | 05:08 | perhaps down to say there, 49.
| | 05:12 | So now, we have got this little bit of
a white glow, calling attention to the
| | 05:16 | text, but it's not overwhelming. And I'll say OK.
| | 05:21 | And then, I can take that Drop Shadow
that was on the type layer and I can just
| | 05:25 | delete it, because I really don't need that.
| | 05:27 | I'll click-and-drag the Drop Shadow to
the Trash at the bottom of the Layers panel.
| | 05:31 | So that's how you can work with layer
Styles in Photoshop to add dimensionality
| | 05:34 | to elements in a composite image and
to bring attention to certain elements.
| | 05:39 | In the next movie, we'll
wrap up our composite image.
| | Collapse this transcript |
| Saving source files| 00:00 | In this movie, we are going to talk
about preserving your source file.
| | 00:04 | When you're all done building a
graphic like this one or fixing a photograph,
| | 00:08 | you want to be sure to save
that original source file.
| | 00:11 | There are several reasons for this.
| | 00:13 | If you're required to come back and make
changes to the file in the future, it's
| | 00:16 | better to come back to the source file
because it contains all of the layers
| | 00:21 | and other proprietary features that
Photoshop offers, like layer masks, like
| | 00:26 | layer styles, like Smart Objects and more.
| | 00:29 | And we chose all of these
features to use because they are all
| | 00:33 | re-editable features.
| | 00:35 | Another reason that it's a good idea
to come back to your source file rather
| | 00:39 | than to the copy you will be saving for
the web as a JPEG or a GIF or a PNG is
| | 00:44 | that those formats all
have limitations for editing.
| | 00:47 | For example, you don't want to re-edit
a JPEG because every time you make a
| | 00:51 | change to a JPEG and then resave it,
the compression algorithm for JPEG
| | 00:56 | throws away information.
| | 00:57 | It's called a lossy file format,
because you lose information.
| | 01:01 | You don't want to go in and edit PNGs
and GIFs because those formats have only
| | 01:05 | a limited number of colors in them.
| | 01:08 | So that's why we want to be
sure to save our source files.
| | 01:11 | Now let's see how to save the source files.
| | 01:14 | Go to the File menu at the top
of the screen and choose Save As.
| | 01:19 | You could choose Save.
| | 01:21 | Save will be available if you've
made any changes to your file since the
| | 01:24 | last time you saved,
| | 01:26 | but be aware that if you do choose Save,
it will overwrite the last copy of the file.
| | 01:31 | So if you like to be safe and have one last
version around, then choose Save As instead.
| | 01:39 | In the Save As dialog box, navigate to the
location in which you save your source files.
| | 01:45 | Mine happens to be on my Desktop right
now where I already have a Source Files
| | 01:49 | folder from a previous movie.
| | 01:51 | I strongly recommend that you save
your source files separately from
| | 01:54 | your optimized files.
| | 01:56 | The source files are the original files.
| | 01:58 | The optimized files are copies that
you've saved in a web-friendly format.
| | 02:03 | If you'd like to learn more about this
subject, take a look at the Digital Asset
| | 02:07 | Management movies at the
beginning of this title.
| | 02:10 | If you don't have a Source Files folder
on your Desktop, go ahead and make one
| | 02:13 | by going to the New Folder icon,
| | 02:16 | that's up here at the top of the window,
and create a new folder called Source Files.
| | 02:22 | Open the Source Files folder and then
go down to the Save As or Save As Type
| | 02:26 | field and let's rename this
version of the file coupon_fin for final.
| | 02:32 | We will leave it with the PSD
suffix and we will accept the default
| | 02:37 | format, which is Photoshop.
| | 02:39 | The Photoshop format is the
PSD format, Photoshop Document.
| | 02:43 | I want to make sure there's a checkmark
next to layers in order to preserve all
| | 02:47 | the layers in the file.
| | 02:48 | If they were Alpha Channels,
I would also check that.
| | 02:51 | I'm also going to make sure to embed
the color profile even though later when I
| | 02:55 | save this as a JPEG, I am not going to
include an ICC Profile in the JPEG as we
| | 03:00 | will discuss in a later movie on saving for web.
| | 03:03 | But at this stage, I do want to say the
color profile, and then I will click Save.
| | 03:08 | Now that we've preserved our source
file, in the next movie, we are going to
| | 03:14 | talk about resizing a copy of
this source file for use on the web.
| | Collapse this transcript |
| Resizing images for the web| 00:01 | Once you've saved a copy of your full-
sized original source file, you will want
| | 00:05 | to make a copy at the size at which
you want to use it on your webpage.
| | 00:09 | I am going to go to the arrow at the
bottom of the Document Window and I am
| | 00:13 | going to choose Show>Document
Dimensions to see how big this image is.
| | 00:19 | It's too big for webpage,
1000 pixels wide by 630 high.
| | 00:23 | If you've been following along, you
will remember that we made it that big on
| | 00:26 | purpose, because we thought that
would give us more options, perhaps we are
| | 00:30 | going to want to print a version and
it would have to be bigger, as well as
| | 00:33 | put it on a webpage.
| | 00:35 | So in this movie, we are going to resize
a copy of the source image so that it's
| | 00:40 | the right size for our webpage.
| | 00:41 | To do that, I'm going to go up to the
Image menu at the top of the screen, and I
| | 00:45 | am going to choose Image Size.
| | 00:47 | In the Image Size dialog box, I'm going
to change the Width and Height here in
| | 00:52 | the Pixel Dimensions area.
| | 00:54 | This area, Document Size, is not relevant to us.
| | 00:57 | That's only relevant when
you're making an image for the web.
| | 01:00 | If these fields are not available in
your Image Size dialog box, it's because
| | 01:05 | you do not have Resample Image checked.
| | 01:08 | If I uncheck that, you will see
you can't make any changes up here.
| | 01:12 | So it's very important to have
Resample Image checked when you're trying to
| | 01:16 | change the size of a file for the web.
| | 01:18 | I am going to type in as the Width, 250
pixels and you will see that the Height
| | 01:24 | changes proportionally automatically and
that's because Constrain Proportions is
| | 01:28 | checked down at the bottom of the box.
| | 01:30 | So if that didn't happen for you, then
just make sure that Constrain Proportions
| | 01:34 | is checked before you
change the Width and Height.
| | 01:36 | There is one last thing to change here.
| | 01:39 | At the bottom of the dialog box is a
menu with a lot of strange words in
| | 01:44 | it, Bilinear, Bicubic.
| | 01:46 | These are just different formulas that
Photoshop uses to decide which pixels
| | 01:50 | it's going to keep and which it won't
keep when it is resizing your image down.
| | 01:55 | When we are resizing down, we
always want to choose Bicubic Sharper.
| | 02:00 | As it says here, this is
the best method for reduction.
| | 02:03 | If you look at the top of the dialog box,
you can see that Photoshop is planning
| | 02:07 | to throw away a lot of pixels.
| | 02:09 | The file was 1.8 megabytes on the disk
and after this file reduction it will be
| | 02:15 | only 115.4 kilobytes.
| | 02:17 | So I will click OK and the file looks smaller.
| | 02:22 | If you'd like to see it at 100%,
just double-click the Zoom tool.
| | 02:26 | At this point, I would resave this
image again and I would put it into the
| | 02:30 | Source Files folder, resaving it as a
PSD file with all of its layers and
| | 02:35 | proprietary features, and I might
call it something like coupon_fin_small.
| | 02:43 | In the next movie, we are going to take
the last step before we save the image
| | 02:47 | for the web and that is to sharpen.
| | Collapse this transcript |
| Sharpening images for the web| 00:00 | In this movie, we are
going to learn how to sharpen.
| | 00:03 | We are sharpening the resized, scaled-down
source file that we created in the last movie.
| | 00:08 | I like to keep my original source file
unsharpened and then I'll make resized
| | 00:12 | copies and only after resizing will I
sharpen, and that's because of the way
| | 00:16 | that the sharpening algorithm works.
| | 00:18 | Sharpening affects only one layer at a
time, so when you have a multilayered
| | 00:22 | file like this, you have to either
flatten all the layers down before
| | 00:25 | sharpening, which I don't like to do,
because I like to keep my layers, or create
| | 00:29 | a composite layer that contains the
content of all the other layers in the file,
| | 00:33 | and that's what I am going
to show you how to do now.
| | 00:35 | I've selected the top layer in the
Layers panel and then I'm going to layers
| | 00:39 | panel menu here at the top-right of the Layers
panel and I'm going to go down to Merge Visible.
| | 00:44 | I am going to hold down the Option
key on a Mac, or the Alt key on a PC as I
| | 00:49 | release my mouse, and that makes a
brand new layer at the top of the stack that
| | 00:53 | is a copy of the content of all of the
layers below that had the eye icon on, in
| | 00:58 | this case, all the layers.
| | 00:59 | I will name this layer 'composite'.
| | 01:03 | And if I were to turn all the other
layers off, you would see that we still have
| | 01:07 | our image here, because everything
got copied to the composite layer.
| | 01:12 | Now, with the composite layer selected,
I am going to add a sharpening filter.
| | 01:16 | Before I do, I have to tell you about
one of the greatest features in Photoshop
| | 01:20 | CS3 and that is Smart Filters.
| | 01:22 | Smart Filters allow you to apply a
filter, like a Sharpening filter, and then
| | 01:27 | later go back in and edit
that filter, changing it settings.
| | 01:31 | So before we apply our Sharpening filter, we
are going to ready this layer for Smart Filters.
| | 01:37 | The way you do that is with the
composite layer selected, go to the Filter menu
| | 01:41 | and choose Convert For Smart Filters.
| | 01:44 | Click OK at the message and you
will see an icon on the composite layer
| | 01:49 | indicating it has been made into a
Smart Object, the same kind of Smart Object
| | 01:53 | that we discussed in a previous movie
about adding and editing Smart Objects
| | 01:57 | to our web graphic.
| | 01:59 | Now, we can come in and
apply a Sharpening Filter.
| | 02:02 | So I am going to Filter and going
down to Sharpen and I could choose either
| | 02:06 | Smart Sharpen or Unsharp Mask.
| | 02:08 | The other three choices
here really are never used.
| | 02:11 | So I'm going to choose Smart Sharpen.
| | 02:13 | It's the newer of the two
choices, but either one will do.
| | 02:16 | They work basically the same way.
| | 02:18 | Here in the Smart Sharpen dialog box,
I have a preview of the image and I am
| | 02:22 | actually going to use that preview to
zoom in so you can get really close and
| | 02:25 | see what sharpening does.
| | 02:27 | So I am going to click the Plus
down here and that will zoom me in.
| | 02:30 | But it's important that I also have a
100% view of my image open on the screen,
| | 02:35 | because that's the view at which I
want to test how my viewers will see
| | 02:39 | things in a web browser.
| | 02:40 | They will also be looking at 100% view.
| | 02:43 | So over here in the Document
Window, I have that set to 100%.
| | 02:47 | In this dialog box, you can start
by clicking on the Advanced button.
| | 02:51 | It may seem odd, but what you want to
do here is just to turn off Fade Amount,
| | 02:55 | which is the default in the Highlight tab.
| | 02:58 | So with the Highlight tab selected, I
am grabbing the Fade Amount slider and
| | 03:02 | dragging it all the way to 0.
| | 03:03 | Then I'm going to do the same in the
Shadow tab, because I don't want the
| | 03:07 | amount of sharpening on Highlights or Shadows
to be faded until I decide I want to do that.
| | 03:12 | Then I am going to click on the Sharpen
tab and here, I am going to go down
| | 03:15 | and check More Accurate.
| | 03:17 | More Accurate makes sharpening more precise.
| | 03:20 | It also makes it take a little longer,
but not long enough that it bothers me,
| | 03:24 | so I'm going to check More Accurate.
| | 03:25 | I will leave Remove set to Gaussian
Blur, which is a general kind of blur that
| | 03:29 | will be the target of our sharpening.
| | 03:31 | Sometimes, if you're working on a
photograph, you may have Lens Blur.
| | 03:36 | Lens Blur comes from camera movement
during the taking of photographs or Motion
| | 03:40 | Blur, which comes from the subject
moving during the taking of photographs.
| | 03:44 | In this case, with our composite image,
Gaussian Blur is the best general choice.
| | 03:49 | Before we move the Amount and Radius
sliders, let me explain what Sharpening
| | 03:52 | does and then what the sliders do.
| | 03:54 | Sharpening is basically
an illusion in Photoshop.
| | 03:57 | It's created by the program looking for edges.
| | 04:00 | It considers anything to be an
edge that is an area of high contrast.
| | 04:04 | So for example, here where we have
the light smoke curl against the darker
| | 04:08 | letters of the word Javaco.
| | 04:10 | When Photoshop finds this sort of an
edge, it looks for the bright pixels along
| | 04:15 | one side of the edge and the dark pixels
along the other side of the edge and it
| | 04:19 | makes the bright pixels
brighter and the dark pixels darker.
| | 04:21 | That creates an increase in contrast
and that's what our eyes see as sharpness.
| | 04:26 | Now let's take a look at the sliders.
| | 04:28 | The Amount slider determines how
light or how dark those edge pixels will
| | 04:32 | become, and the Radius slider
determines how many pixels out from the edge will
| | 04:37 | be made brighter or darker
in the sharpening process.
| | 04:40 | These two sliders work together.
| | 04:42 | So for example, if you have a very
thin radius, then you're going to want to
| | 04:45 | have a larger amount to make the
little thin radius of sharpened pixels along
| | 04:51 | the edges brighter or darker.
| | 04:52 | Let's see how this works in this case.
| | 04:54 | I'm going to start out by dragging my
Amount slider all the way over to the right.
| | 04:58 | This is going to help us to see the
results of moving the Radius slider and then
| | 05:02 | we will put Amount back
to a more reasonable level.
| | 05:05 | You can see that when you move the
Radius slider to the right, you get a
| | 05:08 | really exaggerated effect.
| | 05:09 | As the area of bright pixels is made
wider and the area of dark pixels is
| | 05:13 | made wider at each edge, including along
these stems of the plants and along the smoke curl.
| | 05:18 | So I am going to take the Radius
slider and move it all the way to the left
| | 05:23 | and then rather than grab the slider
and move it, I'm going to move it using
| | 05:27 | my Up and Down Arrow keys on my keyboard,
because I just want to go in small increments.
| | 05:31 | So I will move with the Up Arrow to
point to 0.2 and then to 0.3 and I get to
| | 05:36 | 0.3, I can already see an exaggeration
of the edge pixels, 0.4 is even more.
| | 05:42 | Now remember, we are not only looking
at this zoomed in view, we are really
| | 05:45 | interested in this 100%
view up in the Document Window.
| | 05:49 | So let's see how it looks up here at 0.3,
there is still a little bit of a
| | 05:53 | sharpening halo here. I'll try 0.2.
| | 05:55 | I think I'll leave it at 0.3 for
purposes of this exercise, just so you can
| | 05:59 | really see the results.
| | 06:01 | In general, you do not have to
oversharpen when you are sharpening for the web.
| | 06:04 | You need to just get to the level
that looks right to you on your screen.
| | 06:07 | You may have heard that for print, you
sometimes oversharpen, because a printer
| | 06:11 | can add a little blur to the process.
| | 06:13 | So now we have our Radius set where we
want it, and now we will come in and move
| | 06:16 | the Amount slider down.
| | 06:18 | The Amount slider is affecting
the brightness of those edge pixels.
| | 06:22 | So I will bring it down
until it looks about right to me.
| | 06:28 | This is a pretty subjective process.
| | 06:29 | So I think that looks okay.
| | 06:31 | Now, if you want to see the Amount by
which you've sharpened, you can come into
| | 06:34 | this preview and press down.
| | 06:36 | That shows how the image looked
before sharpening and that shows how it
| | 06:40 | looks after sharpening.
| | 06:41 | If you'd like to see that difference
here in the Document Window, uncheck the
| | 06:45 | Preview box to see the image
without sharpening and with sharpening.
| | 06:50 | Again, keep your eye on the Document
Window, without sharpening, pretty blurry,
| | 06:54 | with sharpening, much sharper looking.
| | 06:57 | Before you leave this dialog box, I
want to do one more thing. Keep your eye
| | 07:00 | here, on the ferns, and I am going
to turn the Preview on and off again.
| | 07:05 | Do you see how the sharpening effect
is particularly strong on the ferns,
| | 07:10 | because they're against the white water
in the background, and the same is true
| | 07:14 | down in text down here, where
it says Present this coupon.
| | 07:18 | I don't need the sharpening
to be as strong in those areas.
| | 07:21 | So now, I'm going to go into the
Highlight tab by clicking it in the Smart
| | 07:25 | Sharpen dialog box and I'm going to
fade the amount of sharpening in the
| | 07:28 | highlights and that will
kind of even things out.
| | 07:31 | So again, keep your eye in
the Document Window out here.
| | 07:34 | The Fade Amount is now set to 0.
| | 07:36 | Look what happens when I set Fade to 50.
| | 07:38 | You see that we now have less
crispiness in the white areas.
| | 07:42 | Look what happens when I
set the Fade Amount to 44.
| | 07:44 | Can you see that we now have less
crispiness in the brightest areas of the image?
| | 07:49 | So now we will click OK and
we have a sharpened image.
| | 07:52 | Say some time had passed, or we
changed our mind, or the client didn't like
| | 07:56 | the amount of sharpening, we could
always come back in and resharpen by just
| | 08:00 | double-clicking the Smart Sharpen Smart
Filter, which we now see on the composite layer.
| | 08:05 | So let me just show you that if I
double-click that, the Smart Sharpen dialog
| | 08:09 | box opens again and we can change
something, perhaps we will increase the Fade
| | 08:13 | Amount, and then we will say OK.
| | 08:15 | Because this is a Smart Filter,
there is one more opportunity to make our
| | 08:18 | sharpening even better.
| | 08:20 | On the Smart Sharpen layer, we have
these double pointed arrows, on the right.
| | 08:23 | If I double-click those, I get the Smart
Sharpen Blending Options dialog box and
| | 08:28 | what I can do here is to change both
the Opacity of the sharpening effect and
| | 08:33 | the Blend mode of the effect.
| | 08:35 | I am most interested in the Blend mode
because sometimes when you sharpen an
| | 08:38 | image, you introduce a
little bit of a color change.
| | 08:41 | To avoid that, I'm going to choose, from
the Mode menu, Luminosity and this means
| | 08:46 | that only the luminosity values, the
brightness values will be affected by
| | 08:50 | sharpening, not the color values.
| | 08:52 | And I am going to click OK.
| | 08:54 | At this point, I would save this image
again, and we are now ready to take it into
| | 08:58 | Save For Web to optimize it for use on
our website, and that's what we will do
| | 09:02 | in the next chapter.
| | Collapse this transcript |
|
|
7. The Save for Web FunctionUnderstanding optimization and web formats| 00:00 | This chapter covers
optimizing images for the web.
| | 00:03 | Optimizing an image means number one,
converting a copy of the image to a
| | 00:07 | format that can be displayed in a web
browser and number two, compressing the
| | 00:11 | file so that it is as small as
possible so that it downloads as fast as
| | 00:15 | possible at the viewers end.
| | 00:17 | Your goal as a web designer is to make
images that are as small in file size as
| | 00:21 | possible, but that look as good as they can.
| | 00:24 | These two things, small file size on
the one hand, and good appearance, or good
| | 00:28 | image quality on the other, are opposites and
they're always in a tug-of-war with one another.
| | 00:33 | The more you have of one the less
you're going to have of the other.
| | 00:36 | This chapter will help you to
develop the best quality graphics with the
| | 00:39 | smallest file size possible.
| | 00:41 | We're going to be looking, in detail,
at how to optimize in two file formats.
| | 00:45 | The first of those is JPEG, which stands for
Joint Photographic Experts Group and that's a hint.
| | 00:51 | It's a hint that this is the best
file format for optimizing photographs.
| | 00:55 | It's also the best file format for
optimizing other kinds of images that,
| | 00:58 | like photographs, contain continuous tone,
in other words, gradual transitions of color.
| | 01:04 | There are some kind of graphics, like
glows and gradients and drop shadows, which
| | 01:09 | also fit this definition,
in addition to photographs.
| | 01:11 | We'll also be looking in detail at
how to optimize in the GIF format.
| | 01:15 | GIF stands for Graphic Interchange
Format and the word graphic there is your
| | 01:19 | hint about what kinds of images can
be optimized best in the GIF format.
| | 01:23 | GIF does best with simple graphic
images that have large solid areas of color,
| | 01:28 | like the one you see here.
| | 01:29 | Other examples are logos,
illustrations, cartoons, line art.
| | 01:34 | There are also images out there that
have both continuous tone and a flat
| | 01:38 | graphic content, such as
the image you see right here.
| | 01:41 | The smoke curl in the middle of this
image is a soft gradient and therefore
| | 01:44 | qualifies as continuous tone, while
the rest of the image is made up of
| | 01:48 | solid areas of color.
| | 01:49 | In this chapter, we'll learn techniques
for dealing with this situation too, and
| | 01:53 | we'll also talk just a little bit about
PNG, which is another web ready format
| | 01:57 | that is very similar to GIF.
| | 01:59 | In the next movie, we'll take a look
at the interface of the Save for Web
| | 02:02 | window, which is where you
optimize graphics in Photoshop.
| | Collapse this transcript |
| The Save for Web window| 00:00 | In this movie, we'll take a look at the
Save for Web window, which is where you
| | 00:04 | go to optimize images for the web in Photoshop.
| | 00:07 | When you're ready to optimize an image
for the web, please do not go to the Save
| | 00:11 | or Save As menu, where you may find web
ready file formats, but it's likely the
| | 00:15 | results of that effort will be larger
than if you use the Save for Web window
| | 00:19 | and you won't be able to take
advantage of the visual comparisons of optimize
| | 00:23 | previews that we have in
the Save for Web window.
| | 00:26 | So let's go and take a look at
that window to see what's there.
| | 00:29 | With an image open, this one from the Chapter
07 folder, go to File>Save for Web & Devices.
| | 00:36 | That opens the Save for Web window.
| | 00:38 | My Save for Web window opened to this 2-
Up view. If yours did not, click on the
| | 00:42 | 2-Up tab here at the top of the window.
| | 00:44 | What we see here is, over on the left,
the original PSD image and you can tell by
| | 00:49 | looking at the bottom and it
tells you this is the original.
| | 00:52 | It also tells you how big that
file is, 576K. That's 576 kilobytes.
| | 00:58 | Over on the right, we see a version of
this image as it would look optimized as
| | 01:03 | a JPEG in this window and its settings
are right over here, in the top-right.
| | 01:07 | As you work to optimize this image,
you'll change some of these settings and
| | 01:11 | you'll see the results of changing
those settings in the Preview Pane that has
| | 01:15 | the light blue line around it.
| | 01:17 | As you change those settings you'll also
see the file size of the JPEG preview change.
| | 01:22 | So as you work with the settings
you'll be constantly checking the file size
| | 01:25 | here and the appearance of the preview here.
| | 01:28 | At the top of the screen, click the 4-Up tab.
| | 01:31 | This is a view in which some people
prefer to work because it shows you not only
| | 01:34 | the original image on the top left,
but three previews and you can set up each
| | 01:38 | preview with different settings over here.
| | 01:41 | Also in this window on the top-left, we
have an abbreviated Toolbox, like a Hand
| | 01:46 | tool, which you can use to move around in
images that are too big to show in the Preview Panes.
| | 01:51 | There is a Zoom tool and a few other
tools that we will investigate as we
| | 01:55 | move through this title.
| | 01:57 | Down at the bottom of the Save for Web
window is the Preview in Browser button.
| | 02:01 | Clicking this button will open the
selected preview, the one with the light
| | 02:05 | blue line, in your default web browser
on your computer, so that you can see how
| | 02:09 | it will look there.
| | 02:10 | The first time you use the Save for
Web window you may see a Question mark in
| | 02:14 | this box as we see here.
| | 02:16 | If you press the Arrow and choose Edit
List, in the Browsers dialog box that
| | 02:20 | opens, press Find All and Photoshop will go
out and find the web browsers on your machine.
| | 02:26 | Then choose the browsers in which you
would like to preview your web graphics.
| | 02:30 | So we could select Safari. If we
wish, we could also select Opera.
| | 02:34 | I'll just do Safari for now and I'll
click Add and then I am going to go to
| | 02:38 | my Applications folder and I'm going to
find Safari and click Open and then click OK.
| | 02:46 | Now you can see that the Preview in Web
Browser icon has changed to a Safari icon.
| | 02:52 | Finally, down at the bottom-right,
we have the Device Central button.
| | 02:56 | This is new in Photoshop CS3.
| | 02:58 | It will take you to Adobe Device Central,
a new application for developing and
| | 03:02 | testing content for mobile
devices like cell phones.
| | 03:05 | So that's a brief tour of the
Save for Web & Devices window.
| | 03:09 | In the next movie, we'll work in
this window to optimize a JPEG.
| | Collapse this transcript |
| Optimizing JPEGs| 00:00 | This movie is all about optimizing JPEGs.
| | 00:03 | Your goal when you are optimizing a
JPEG is to make it as small as possible, but
| | 00:07 | still have it look good.
| | 00:08 | How do you make a small JPEG?
| | 00:10 | Here are some tips.
| | 00:11 | Start with an image that has
continuous tone. A photograph is a perfect
| | 00:15 | example, or a graphic that has
continuous tone effects, like glows, gradients or
| | 00:20 | drop shadows. Add a little bit of
blur, because the JPEG algorithm does a
| | 00:24 | better job of compressing blurry
images then it does sharp images. Increase
| | 00:29 | the amount of JPEG compression.
| | 00:30 | In Photoshop, we'll see that you do
that in the Save for Web window by
| | 00:34 | decreasing the Quality slider.
| | 00:36 | If you have to, go back to the Source
File and make it less saturated or less
| | 00:40 | contrasty and the resulting
optimize JPEG is likely to be smaller.
| | 00:44 | And finally, you can use an Alpha Channel to
selectively optimize different areas of a JPEG.
| | 00:49 | We'll learn about that in another
movie, but let's take a quick look at the
| | 00:52 | first bullet points here and
how they work on a real file.
| | 00:56 | I opened a photograph, candles.psd, in
Photoshop and then I chose File>Save for
| | 01:02 | Web & Devices to open the image in
the Save for Web & Devices window.
| | 01:06 | All three of my preview panes here in
the 4-Up tab happened to be set to GIF.
| | 01:11 | As you can see, none of
them look very good.
| | 01:13 | The candles show little
dots and here, wavy artifacts.
| | 01:18 | And the file sizes are all quite big,
89K, 70K, 71K, in each of the previews.
| | 01:24 | So because this is a photograph, I'm
pretty sure I can get it smaller and make it
| | 01:28 | look better as a JPEG than as a GIF.
| | 01:30 | So my first step is to go to the Format
menu, here on the right-side of the Save
| | 01:34 | for Web window, and choose JPEG.
| | 01:36 | Now this Preview Pane is set to JPEG,
the others are still set to GIF.
| | 01:39 | So I am going to go to the arrow on
the right-side of Save for Web window and
| | 01:43 | choose from that menu, Repopulate Views
and now we have three different kinds of
| | 01:48 | JPEGs in our Preview Panes, each
with a different quality setting.
| | 01:52 | Quality is the setting that will have
the largest effect on the file size and
| | 01:56 | appearance of your image as optimized.
| | 01:58 | Notice that, up here, we have a quality
of 60 and the file size of 33.37K, the
| | 02:04 | image looks pretty good.
| | 02:05 | If we go down to the next Preview Pane
where we have a quality of only 15, the
| | 02:10 | image is not looking good.
| | 02:11 | It's small, only 10K, but it's not
acceptable in terms of appearance.
| | 02:15 | In between, over here, we have a
quality of 30 and a pretty small file size of
| | 02:20 | 15K, but again, the image just
doesn't look good enough for my taste.
| | 02:24 | So I think I need to be
somewhere between 30 and 60.
| | 02:28 | So with this top right Preview Pane
selected, I am going to move over to the
| | 02:32 | controls on the right and go to the Quality
slider, click and I'm going to drag it down.
| | 02:36 | I'll put it at about 55.
| | 02:39 | I've managed to bring the file size
down to 30.64K, that's better, and I think
| | 02:44 | this image still looks good, so I'm
going to accept that level of quality.
| | 02:48 | If I want to bring the file size down a
little more, I can go to the Blur field,
| | 02:52 | click its slider and move it over slightly.
| | 02:55 | Keep your eye on the top-right Preview
Pane, because I don't want to go too far
| | 02:59 | with this or the image will look too blurry.
| | 03:00 | That looks about right to me, at about
0.23, and of course these numbers are
| | 03:04 | different for different images.
| | 03:06 | But in general, you want to
stay on the low-side of blur.
| | 03:09 | And now we are down to 28.65K over here.
| | 03:12 | I'd like to talk about this
setting, the ICC Profile, for a minute.
| | 03:15 | In an earlier movie on Color Management,
we talked about the fact that ICC
| | 03:19 | Profiles are pieces of information that
get attached to a file that describe the
| | 03:24 | color space in which the file was built.
| | 03:26 | This is useful for print, but when you're
saving for the web it isn't very useful
| | 03:30 | because most web browsers
cannot read these profiles.
| | 03:33 | In addition, I want to show you the
impact on file size of adding an ICC Profile.
| | 03:37 | Instead of the 28.65K that we
currently have with this compressed image, if I
| | 03:43 | check include ICC Profile, we go up to 34.8K
which is quite a bit for something
| | 03:48 | that web browsers really can't read.
| | 03:50 | So we are going to leave that unchecked.
| | 03:52 | Also on the subject of Color
Management, there is something new in Photoshop
| | 03:55 | CS3 Save for Web and that is that if
you go to the menu at the top-right, you
| | 04:00 | can see that there is a command
Convert to sRGB and that this command is
| | 04:04 | checked by default.
| | 04:05 | What this does is convert the
selected preview to the sRGB color space.
| | 04:10 | I suggest that you keep this command
enabled to deal with any images that you
| | 04:14 | haven't already converted to sRGB
before you came into the Save for Web window,
| | 04:18 | as we discussed in the
earlier movie on Color Management.
| | 04:21 | You do want to preview the images
you're making for the web in sRGB generally,
| | 04:25 | because sRGB reflects the
characteristics of a typical PC monitor and we're
| | 04:30 | assuming that most people
are surfing the web on a PC.
| | 04:33 | If we wanted to get our image even
smaller than 28.65K, we'd have to exit the
| | 04:38 | Save for Web window and see if we can change
something about the original file. Let's do that.
| | 04:43 | I'm going to click Done to save these
settings so that we can come back to them,
| | 04:46 | and back in Photoshop I'm going to add
a couple of adjustments to this image.
| | 04:50 | I am going to use Adjustment layers,
which are layers that float above the
| | 04:54 | content layer and apply adjustments
to it without harming the pixels of the
| | 04:58 | underlying content layer.
| | 04:59 | I am going to go down to this black-
and-white circle icon at the bottom of
| | 05:03 | the Layers palette, click and choose from
this list of Adjustment layers, Hue/Saturation.
| | 05:09 | In the Hue/Saturation dialog box, I am
going to reduce the Saturation of this
| | 05:13 | image, maybe I'll go about 20.
| | 05:16 | I think the image still looks pretty
good and say OK, and then I'm going to
| | 05:20 | add another adjustment layer from
the black-and-white icon, this time the
| | 05:24 | Brightness/Contrast Adjustment, and I will
decrease the Contrast here also to about 20.
| | 05:29 | By the way, Adobe has re-engineered
this Brightness/Contrast adjustment,
| | 05:34 | improving the way it works so that it
doesn't end up blowing out highlights or
| | 05:38 | blocking out shadows as it did in the past.
| | 05:40 | If you liked the past behavior better,
you can always click Use Legacy, but I
| | 05:44 | don't suggest you do that, I think the
improvements to Brightness/Contrast have
| | 05:48 | really made it useful.
| | 05:49 | So with Contrast lowered, I am going to
click OK and now our image still looks good.
| | 05:53 | Let's go back into Save for Web
and see if we see a difference.
| | 05:56 | I am going to File>Save for Web &
Devices and here we can see that our file size
| | 06:01 | has now been reduced to 27.1K.
| | 06:04 | So reducing the Contrast and Saturation
in the source image has indeed resulted
| | 06:08 | in a savings in file size in the optimized copy.
| | 06:11 | So now I am going to click Save and in
the Save Optimized As dialog box, I'll
| | 06:16 | choose a location in which to save my
image and notice that the suffix JPEG has
| | 06:21 | been automatically appended.
| | 06:22 | Again, we are not saving over our PSD
source file, we're just saving a copy that's
| | 06:27 | been optimized as a JPEG.
| | 06:29 | So I am going to click Save and when I
go out to my Desktop, I see my optimized
| | 06:33 | image there. I can open that and
let's compare that JPEG, which we just
| | 06:39 | optimized and got down to about 27K, to the
original PSD file, which is many times that size.
| | 06:46 | The JPEG does look a little bit blurry
around the candles but given the file
| | 06:50 | savings, I'd say that's acceptable.
| | 06:52 | Join me for the next movie in which
we're going to take a look at using an Alpha
| | 06:56 | Channel to selectively
optimize different parts of a JPEG.
| | Collapse this transcript |
| Selective JPEG optimization| 00:00 | In this movie, we're going to cover a special
technique called Selective JPEG Optimization.
| | 00:05 | We'll be optimizing different parts of
a JPEG with quality settings that differ
| | 00:09 | from other parts in an attempt to get
the image as small as we can make it.
| | 00:13 | This image coupon.psd from the
Chapter 07, Exercise Files folder is a good
| | 00:18 | candidate for this technique, because
it has some areas that are photographic
| | 00:22 | and others that are graphic.
| | 00:23 | I am going to start off by isolating
the graphic areas, the smoke curl and the
| | 00:27 | Javaco tea rasterized text layer.
| | 00:30 | To do that, I am going to hold the
Command key as I click on this icon on the
| | 00:35 | smoke curl layer, in the Layers panel.
| | 00:37 | That's Command key on a Mac, Ctrl key on a PC.
| | 00:40 | In the document window, you can see
that we've selected the smoke curl and to
| | 00:43 | add the text to that selection, I am
going to hold the Shift key and the
| | 00:47 | Command key, that's the Shift key and
the Ctrl key on a PC, as I click on the
| | 00:51 | thumbnail on the text layer.
| | 00:53 | Now I am going to move over to the
Channels palette by clicking the Channels tab
| | 00:57 | and go down and click the
Create New Channel button.
| | 00:59 | That creates a channel from the selection.
| | 01:02 | A channel is really just
another way of looking at a selection.
| | 01:05 | I am pressing Command+D on a Mac, or
Ctrl+D on a PC to delete that selection.
| | 01:11 | And now, let's go into the Save for
Web window. File>Save for Web & Devices.
| | 01:17 | The JPEG preview on the top left of
my screen is set to a quality of 30.
| | 01:22 | With the blur of 0.19
we've got a file size of 12.53.
| | 01:27 | That's acceptable, except that
the image just doesn't look good.
| | 01:30 | To get it to look good, I am
going to have to increase the quality.
| | 01:33 | So I come over to the Quality slider
and I'll start dragging to the right and I
| | 01:37 | still don't like it.
| | 01:38 | It looks like I am going to have to
go pretty far here, maybe as high as
| | 01:43 | about 70, and now the image looks better,
however it's bigger than I would like, 31.88K.
| | 01:51 | So let's see if we can optimize the
area that we've isolated in the Alpha
| | 01:55 | Channel separately from the background
of the image, because we don't care as
| | 01:59 | much how the background
looks, as we do the smoke curl.
| | 02:02 | I'm going to click this icon to the
right of the Quality field and that opens
| | 02:07 | the Modify Quality Setting dialog.
| | 02:10 | There, I'm going to
choose as the Channel, Alpha 1.
| | 02:14 | You'll notice that our preview has just degraded.
| | 02:16 | Let me explain what's happening.
| | 02:17 | Here in the Modify Quality Setting
dialog, you see a representation of the area
| | 02:22 | that's white in the Alpha Channel
and the area that's black in the Alpha
| | 02:25 | Channel, here it's blue.
| | 02:27 | The White slider in the Quality area
represents the white part of the Alpha
| | 02:31 | Channel, which is the graphic here.
| | 02:32 | We are going to leave that compressed to 70.
| | 02:34 | We're going to see if we can
increase the compression, lower the Quality
| | 02:38 | percentage for the rest of the
image and thereby save some file size.
| | 02:42 | Right now, the rest of the image
is being compressed all the way.
| | 02:45 | It set at 0% quality.
| | 02:47 | That's why it looks so bad.
| | 02:49 | So we're not going to be
able to get away with that.
| | 02:51 | Let's take that Black slider, which
represents the way everything except the
| | 02:54 | smoke curl and the Javaco tea text is
being compressed, and start with it all the
| | 02:59 | way over next to the White slider.
| | 03:01 | Now we are back where we started, 31.88K,
and everything is being compressed to 70%.
| | 03:06 | Now I'm going to start moving that
Black slider over and as I do, I see my file
| | 03:12 | size is getting smaller as we change
the quality of the background, perhaps
| | 03:17 | that's too much. I might
try about, say, 50% there.
| | 03:21 | Now our file size is down to 29.65K
as opposed to 31.88K when we didn't use
| | 03:28 | selective optimization.
| | 03:29 | So I am going to say OK and then I'll click
Save and I'll save coupon.jpg on my Desktop.
| | 03:35 | I'll open coupon.jpg and we can
compare it to our original PSD.
| | 03:44 | Again, Photoshop has done a pretty
good job of optimizing our JPEG for us.
| | 03:48 | Next up, we'll be taking a
look at how to optimize GIFs.
| | Collapse this transcript |
| Optimizing GIFs| 00:00 | In this movie, we are going to
talk about how to optimize GIFs.
| | 00:03 | Here are some principles you can apply
try to make a GIF as small as possible
| | 00:07 | but still look good.
| | 00:09 | First of all, start with an image that
has large areas of solid color, like an
| | 00:12 | illustration or a logo.
| | 00:14 | GIF does best with this sort of image.
If an image is a photograph, then it's
| | 00:17 | going to be better as a JPEG,
| | 00:19 | although once in a while, you may
have to optimize a photograph as a GIF,
| | 00:22 | for example, if you're making an
animated GIF with a photograph in it or if you
| | 00:26 | are trying to make a transparent
image for the web with a photograph in it.
| | 00:30 | Reduce the number of colors in the GIF.
| | 00:32 | This is the main thing you
can do to make the GIF smaller.
| | 00:34 | GIFs have a limited palette of colors
and you can control how many colors are
| | 00:38 | included in the palette.
| | 00:39 | Reduce the amount of dithering.
| | 00:40 | Dithering places small dots of color,
one next to the other, to simulate a color
| | 00:44 | that doesn't happen to be
in the selected palette.
| | 00:47 | Although dithering can make an image
look good, it often increases file size.
| | 00:50 | So if you reduce Dithering,
then you can your GIFs smaller.
| | 00:54 | Add lossy compression.
| | 00:55 | In Photoshop, you can add the same
sort of lossy compression to a GIF
| | 00:59 | that's applied to a JPEG.
| | 01:00 | You can also use an Alpha Channel for
selective optimization in GIFs and we will
| | 01:04 | look at that in a future movie.
| | 01:06 | Now, let's take a look at how the first
bullet point is applied to an image in
| | 01:10 | the Save for Web window.
| | 01:12 | This is dragonwell.psd from the
Chapter 07 Exercise Files folder.
| | 01:16 | You can open this image if you have those
files or open an illustration of your choice.
| | 01:21 | This is just the sort of file that
usually optimizes best as a GIF, because it
| | 01:25 | has large areas of solid color.
| | 01:28 | Let's take this into the Save for Web window.
| | 01:30 | I am choosing File>Save for Web & Devices.
| | 01:33 | This file is opened as JPEG previews,
because the last image I was working on
| | 01:37 | had been saved as JPEG.
| | 01:39 | You can see that at the higher
compression the file really doesn't look good.
| | 01:43 | Here it doesn't look bad at a
quality of 60 compression, but the file size
| | 01:48 | is pretty big, 11.26K.
| | 01:50 | Let's see if we can get that
smaller if we try saving this as a GIF.
| | 01:54 | First, I'm going to go to the 2-Up tab,
rather than the 4-Up, so I can see the whole image.
| | 01:58 | And then I'm going to go over to
the Format field and choose GIF.
| | 02:02 | Right away, the image looks better.
| | 02:05 | Its 11.82K now, and that's
with 256 colors in its palette.
| | 02:11 | A GIF can only have a limited
number of colors, a maximum of 256.
| | 02:15 | What happens is the original file,
which has many, many more colors than that,
| | 02:20 | particularly at anti-aliased edges, like
along the type here, is indexed down to
| | 02:25 | the number of colors that you
specify in the controls over here.
| | 02:29 | Right now, the number of colors is 256
and you can see which 256 colors here,
| | 02:34 | in the Color Table.
| | 02:35 | The first place I go to try to
minimize the size of a GIF is the Color field.
| | 02:40 | I click on the Colors menu and I'm
going to reduce the number of colors by half
| | 02:45 | to 128, 1k off the file size
and the image still looks good.
| | 02:51 | So I'm going to try again,
going down to 64 colors.
| | 02:54 | Another K has come off the file size and
the image still looks good. Let's try 32.
| | 02:59 | This is borderline.
| | 03:00 | It's starting to degrade in quality,
particularly around these letters here, but
| | 03:04 | the file savings is good.
| | 03:06 | We are down to 7.9K.
| | 03:08 | So I would approach an image like this
just going down the menu until I saw a
| | 03:14 | place where I just
couldn't go, like four colors.
| | 03:16 | The reason that we've lost all the
colors in the image is, as you can see in
| | 03:20 | the Color Table, we have
only three greens and a white.
| | 03:23 | So we have no blues and no grays.
| | 03:25 | I thought that the file didn't look too
bad at 32K. So I'm going to go back there.
| | 03:29 | The next thing that I would try to
get the file size down even further is
| | 03:33 | to work with Dither.
| | 03:34 | Dither means the placement of small dots
of colors from the current palette, the
| | 03:39 | colors you see here in the Color Table,
one next to the other, to try to simulate
| | 03:43 | a color that isn't here.
| | 03:44 | Dithering can make some images look
better, particularly if they have a lot of
| | 03:48 | gradual transition of color,
but it often increases file size.
| | 03:52 | So let's see what happens if we change
the amount of Dither from 100% down to 0.
| | 03:58 | Another thing you can try to reduce the
number of colors in a GIF is to change
| | 04:03 | the color reduction palette.
| | 04:04 | This is a formula that determines which
32 colors are going to be displayed here
| | 04:09 | in the Color Table right now.
| | 04:10 | The Selective palette, the Perceptual
palette and the Adaptive palette are all
| | 04:14 | pretty much the same in terms of results.
| | 04:17 | They all look at the original image and
select colors directly from that image,
| | 04:21 | but they do so each with a different formula.
| | 04:24 | So let's take a look at the
file size with each of these.
| | 04:27 | Selective gives us a GIF of 7.634K,
Perceptual gives us a GIF that's a little
| | 04:33 | bit smaller, 7.114K, and looks the same.
| | 04:36 | And then let's try Adaptive.
It still looks the same and its 7.553K.
| | 04:41 | So just going by the file size,
Perceptual is the best choice here.
| | 04:45 | Before we choose that, I want you to
see what happens if we pick Restrictive
| | 04:49 | Web. We lose most of the colors in the
file, because now our optimized GIF is
| | 04:55 | being represented only in
terms of Web Safe Colors.
| | 04:59 | So you usually want to avoid doing this.
| | 05:01 | Try not to take an image made with non-
web safe colors and index it down to Web
| | 05:06 | Safe colors, or you will get a result like this.
| | 05:09 | So I am going back to
Perceptual and now my file is 7.114K.
| | 05:14 | The last thing I can try here
is to add some lossy compression.
| | 05:17 | So I am going to click and drag, not too
far, because lossy compression actually
| | 05:22 | does throw away data.
| | 05:24 | We don't want to do too much of that.
| | 05:26 | I think around 12 will do
here, taking us down to 6.07K.
| | 05:31 | That's certainly
acceptable for this particular file.
| | 05:34 | So I'm going to click Save.
| | 05:35 | I will save the GIF, automatically named
with the GIF suffix on my Desktop, and I
| | 05:43 | will open the GIF and let's
compare it to the original PSD.
| | 05:47 | It looks quite good and it
certainly is much smaller.
| | 05:49 | One other thing that you can do when
you're optimizing a GIF is to lock down
| | 05:53 | certain colors to make sure
that those get saved in the GIF.
| | 05:56 | I am going to show you how
to do that in the next movie.
| | Collapse this transcript |
| Locking colors| 00:00 | Sometimes you will have an image like a
logo in which you have to keep certain
| | 00:04 | colors even though you're
going to optimize it as a GIF.
| | 00:07 | So perhaps there are some
corporate colors that you have to retain.
| | 00:10 | In this movie, we are going to look at
how you can lock down colors to make sure
| | 00:13 | that they go into your GIF.
| | 00:14 | We are going to take this file, chai.psd
from the Chapter 07 file folder, and
| | 00:19 | bring into Save for Web. File>Save for
Web & Devices. I have my GIF Preview
| | 00:25 | selected on the right, and I'm going to
go over to controls on the far right and
| | 00:29 | start reducing the number of
colors from the current maximum of 256.
| | 00:34 | Keeping my eye on the GIF on the right,
I see that at 128 colors, I still have a
| | 00:40 | decent looking image.
| | 00:41 | At 64 colors, the same is true and I
can get down pretty far and still retain
| | 00:48 | the integrity of the colors in this image,
| | 00:50 | but look what happens when I
go down as far as 8 colors.
| | 00:55 | I've lost the blue that was on the word 'chai'.
| | 00:58 | It's now turned green, and I also see
that there's been a color shift in the
| | 01:02 | green characters in the background.
| | 01:05 | And I believe that the green around
the border has also changed, and that's
| | 01:09 | because we only have eight colors,
and these are the eight colors that were
| | 01:13 | automatically selected.
| | 01:14 | They don't include all of the
important colors in the original file.
| | 01:17 | So here's what we can do in that situation.
| | 01:20 | Let's take the number of Colors back up to 32.
| | 01:23 | And now I see that I have
back all of my important colors,
| | 01:27 | for example, the blue in the chai.
| | 01:29 | Now, I'm going to go over to the small
toolbar on the left side of the Save for
| | 01:33 | Web & Devices window, and I am going to
click on this Eyedropper tool, and then
| | 01:37 | I'm going to come into the image, and I
am going to select right on top of the
| | 01:40 | blue in the word chai.
| | 01:42 | In the Color Table, you will see that
that blue chip now has a border around it,
| | 01:47 | indicating it is selected.
| | 01:48 | Now I am going to down to the bottom
of the Color Table and click on the Lock
| | 01:52 | icon, and now my blue chip has a little
tiny square in the bottom right corner,
| | 01:56 | indicating it is locked down.
| | 01:58 | With the Eyedropper tool, I'm going to click
on the other important colors in the image.
| | 02:02 | So I'll click on this green and I'll lock
it and this green and lock that one and I
| | 02:08 | will continue doing this
on the important colors,
| | 02:16 | maybe this gray here, the
white, and that should do it.
| | 02:24 | Now, I'm going to try
going back down to 8 colors.
| | 02:27 | So we will go up to the Colors field,
and we will choose 8, and this time, I have
| | 02:32 | the 8 colors that I select as being
important, including the blue of the chai,
| | 02:36 | and the greens in the background.
| | 02:38 | And you can see all of those eight
colors are still here in the Color Table.
| | 02:41 | Now granted, I normally would optimize
this image at a higher number of colors,
| | 02:46 | because the edges are kind of rough.
| | 02:47 | But I wanted you to see how we could
lock down colors and retain them even when we
| | 02:51 | went down as far as 8 colors.
| | 02:53 | In the next movie in this
chapter, we are going to look at
| | 02:55 | selectively optimizing GIFs.
| | Collapse this transcript |
| Selective GIF optimization| 00:00 | In an earlier movie, we talked about
selectively optimizing different parts of a JPEG.
| | 00:05 | You can do the same thing with a GIF.
| | 00:06 | For this exercise we are going to use
decaf.psd from the Chapter 07 file folder.
| | 00:11 | Notice that although this file has
lots of areas of plain color, which will
| | 00:15 | probably optimize well as GIF, there is
also a gradient here in the smoke curl.
| | 00:20 | And that may not optimize well as a GIF,
because a gradient is an element of
| | 00:24 | continuous tone, and we know that
the GIF algorithm doesn't do very well
| | 00:28 | with continuous tone.
| | 00:29 | Let's also notice, in the Layers
panel, that the smoke curl happens to be a
| | 00:33 | vector-based shape player and there
also is a type layer here, the word 'decaf',
| | 00:38 | which we see here in yellow.
| | 00:39 | Those two facts will help us to
selectively optimize this file.
| | 00:43 | Notice that I'm not creating an Alpha
Channel here first, and that's because we
| | 00:47 | already have a vector-based channel
and a type channel that the Save for Web
| | 00:51 | window will recognize
when we selectively optimize.
| | 00:54 | To see what I mean, let's go to File,
check Save for Web & Devices and in the
| | 00:59 | Save for Web window, with the GIF
preview selected, I am going to go to the
| | 01:03 | Colors field and start
reducing the number of colors.
| | 01:08 | As I do, the file size goes down, but the
quality of the image is starting to degrade.
| | 01:13 | At 64 colors, look at this gradient.
| | 01:16 | It really is showing banding between the colors.
| | 01:19 | Let's try 32 and now the banding is
really pronounced with big wide bands.
| | 01:24 | So obviously that is not acceptable.
| | 01:26 | We've lost those fine gradients between colors.
| | 01:29 | So we need to go back, probably, to 128 colors.
| | 01:33 | At 128 colors, the file size is 8.817.
| | 01:37 | Let's see if we can get that down further.
| | 01:39 | We can try to do that by selectively
optimizing certain parts of this image,
| | 01:43 | in particular this smoke curl with its
gradient, separately from the flat background.
| | 01:48 | There are three fields in which you
can do selective optimization of GIFs.
| | 01:52 | One of those is the
Color Reduction palette, here.
| | 01:55 | The other is Lossy Compression, here,
and the third is the Dither field, here.
| | 01:59 | Let's try the Color Reduction
palette and see what happens.
| | 02:02 | I am going to click on the icon to
the right of the Color Reduction palette,
| | 02:06 | which is currently set to Perceptual
for the entire image, the smoke curl
| | 02:10 | and the background.
| | 02:11 | That opens the Modify Color Reduction box.
| | 02:14 | I am going to enable All
Vector Shape layers here.
| | 02:17 | As I do that, keep your eye on a Color
Table, because what's going to happen is
| | 02:20 | this is going to weight the colors
that are chosen for Color Table toward the
| | 02:25 | colors in the smoke curl.
| | 02:26 | You will see less yellows
and more blues and greens.
| | 02:29 | So I will check that box.
| | 02:31 | Did you notice the Color Table change?
| | 02:33 | We've now lost most of the yellow colors
that were down here in the bottom rows.
| | 02:36 | There is only one yellow left.
| | 02:38 | Our smoke curl looks pretty good and
we have saved a kilobyte of file size.
| | 02:43 | However, now the yellow type decaf
looks bad, because we only have one color of
| | 02:48 | yellow and that means that we don't
have a nice gradual blending of color at
| | 02:51 | the edges of the text.
| | 02:53 | To fix that, I'm going to try enabling
the All Text layers command in the Modify
| | 02:58 | Color Reduction dialog box, and
that got us back some yellows.
| | 03:02 | Now the text looks better.
| | 03:04 | The smoke curl still looks
alright, and we are only at 7.847K.
| | 03:09 | So selective optimization really worked
well here in terms of the selection of
| | 03:14 | Color Reduction palette.
| | 03:15 | And I also want to mention that I
didn't have to go and make an Alpha Channel
| | 03:19 | first because Photoshop was able to see
my vector shape layer and the text layer
| | 03:25 | without having to create Alpha Channels.
| | 03:26 | So that's quite useful.
| | 03:28 | Let's say OK here, and I'm going to
click the icon to the right of the
| | 03:31 | Lossy Compression field.
| | 03:33 | That brings up the Modify Lossiness
setting, where we can selectively apply
| | 03:37 | lossiness to our vector shape layer,
the smoke curl, and the rest of the image.
| | 03:42 | Let's see what happens if we check
All Vector Shape layers. Not good.
| | 03:46 | However, we can fix that by taking the black
slider and dragging it all the way over to left.
| | 03:51 | Then we'll take that black slider and
come back to the right and we will take
| | 03:56 | our time and as we do, notice
that we are reducing the file size.
| | 04:02 | But I went too far and I
degraded the background of the image.
| | 04:05 | This black slider affects the Lossy
compression applied to the background of the image.
| | 04:10 | As you can see here in this diagram,
the black slider represents the Lossy
| | 04:15 | compression applied to the dark solid area,
| | 04:17 | the white slider, the Lossy
compression applied to the white area.
| | 04:21 | So her,e with the black slider set to
about 19, our image still looks good and we
| | 04:26 | have managed a file savings.
| | 04:28 | We could also try enabling All Text
layers, but that doesn't seem to make a
| | 04:32 | difference in this particular file.
| | 04:33 | So I am going to say OK, and there
is one more place where we can apply
| | 04:37 | selective compression, and that is Dither.
| | 04:39 | But in this particular file, Selective
Dither doesn't seem to make much difference.
| | 04:44 | So we won't bother changing that setting.
| | 04:46 | So this is a technique that you can
try when you have a file like this that
| | 04:49 | has both continuous tone as well as lots of
flat art and you are trying to optimize as GIF.
| | 04:55 | You could save this file, save it on
the Desktop, and open it to compare it
| | 05:02 | to the PSD and it looks pretty good, and we
have saved a great deal in terms of file size.
| | 05:06 | In the next movie, I am going to
talk briefly about the PNG format.
| | Collapse this transcript |
| Optimizing PNGs| 00:00 | There is another file format,
other than JPEG and GIF, that deserves
| | 00:03 | mentioning, and that's PNG.
| | 00:05 | Let's go into the Save for Web window
with this image, dragonwell.psd, so we can
| | 00:09 | take a look at how PNG works.
| | 00:11 | I'll go to File, I'll go to Save for Web & Devices.
| | 00:14 | In the Save for Web window, I
am going to use my 2-Up tab.
| | 00:18 | On the right, I will make sure that
I've set the image to the GIF format, and
| | 00:22 | I'm going to set Lossy to 0.
| | 00:24 | I will set the number of Colors to 64.
| | 00:28 | I will leave the Color Reduction
palette at Perceptual and I will leave Dither at 0%,
| | 00:35 | everything else is turned off.
| | 00:37 | Now, I am going to click on the left side
that currently shows the original image.
| | 00:41 | You can also make this
into an optimized preview.
| | 00:43 | To do so, I am going to go to the
Preset menu here, and I'm going to choose
| | 00:47 | PNG 8 128 Dithered.
| | 00:50 | These presets are just quick ways
to get to certain combinations of
| | 00:53 | optimization settings.
| | 00:55 | And once you get there, you
can adjust them to your liking.
| | 00:58 | So with PNG 8 selected here, I am
going to try to match the settings I
| | 01:01 | have chosen for the GIF.
| | 01:02 | So I will make the Color
Reduction palette Perceptual.
| | 01:05 | I will change the number of Colors here to 64.
| | 01:07 | I will put Dither down to 0%, turn
off Transparency, and now these settings
| | 01:14 | match those for the GIF.
| | 01:15 | The only real difference in the
settings between the PNG 8 format and the GIF
| | 01:20 | format are that PNG 8 doesn't offer a Lossy
setting, but we turned that off in GIF anyway.
| | 01:25 | Now let's compare the
appearance and size of these two images.
| | 01:29 | Appearance, they both look
fine, look about the same to me.
| | 01:32 | Let's look at the file sizes.
| | 01:34 | The GIF is 9.441K and the PNG
is smaller. It's only 7.548K.
| | 01:41 | So the lesson is when you're
optimizing an image that you would approach as a
| | 01:45 | GIF, I suggest you also try it out as a
PNG, because there are many times when
| | 01:49 | the PNG will be smaller.
| | 01:51 | Now that's if you choose
PNG 8 from the Format menu.
| | 01:54 | If you open the Format menu, you will
see that there are two flavors of PNG.
| | 01:57 | PNG 8, as we have seen, can be very
useful to create small files out of
| | 02:02 | illustrations, logos and
other kinds of flat art.
| | 02:06 | The attraction of PNG 24 for
web developers is that it offers
| | 02:09 | multi-level transparency.
| | 02:11 | So if you were working with an object
against a transparent background and you
| | 02:15 | have given object an anti-aliased soft
edge in Photoshop, the edge could retain
| | 02:20 | that smoothness when saved in PNG 24
format and put up on the web, and that's
| | 02:24 | not the case with GIF or PNG 8.
| | 02:26 | We will talk more about creating transparent
graphics that are GIFs in the next chapter.
| | 02:32 | But for now what you need to know is
that PNG 24 offers a new possibility of
| | 02:36 | creating transparent graphics with smooth edges.
| | 02:39 | However, there is always
another side to the coin.
| | 02:41 | And the other side to the PNG 24 coin
is that not all web browsers understand
| | 02:46 | and can display that kind
of multilevel transparency.
| | 02:49 | Although today the major web browsers
can do so, including Internet Explorer 7,
| | 02:54 | there is one big web browser that
doesn't display can transparency and that's
| | 02:58 | Internet Explorer 6 for Windows, which
is still used by a majority of people.
| | 03:03 | So if you need your transparent images
to be uniform across web browsers, then
| | 03:07 | PNG 24 may not be the best choice for you.
| | 03:10 | Another thing to keep in mind about PNG
24 is that out of Photoshop, PNG 24 is
| | 03:15 | often creating pretty large images.
| | 03:17 | So if you're thinking about using PNG 24,
use the Save for Web & Devices window
| | 03:21 | and preview the file size.
| | 03:23 | In the next chapter, we are going to
take a closer look at this issue of
| | 03:27 | transparency in images Save for the Web.
| | 03:30 | I hope you will join me.
| | Collapse this transcript |
|
|
8. Creating Web BackgroundsDesigning web backgrounds| 00:00 | In this chapter, we are going
to talk about background images.
| | 00:03 | A background image is a single image
that gets repeated over and over across the
| | 00:08 | background of an HTML page. Here's an example.
| | 00:11 | You can see the single leaf image
open in Photoshop where it was created.
| | 00:14 | We will call that a tile, and then in
the larger part of this illustration,
| | 00:19 | you can see that tile in a web browser
repeated over and over as the background image.
| | 00:24 | The advantage of using background
images is that your viewers only have to
| | 00:27 | download one image file and that
image will repeat itself over and over
| | 00:31 | automatically by virtue of the HTML code.
| | 00:35 | If you're going to use this technique,
there are some design considerations,
| | 00:39 | which you should take into
account when you're designing the tile.
| | 00:42 | First of all, the fact that the tile
repeats impacts how large you design it to be.
| | 00:47 | The smaller a tile is the
more times it will repeat.
| | 00:50 | So here for example, we see a
relatively large tile, and this is the pattern it
| | 00:53 | will make when it repeats.
| | 00:54 | Here is a medium-sized tile that
repeats more times across the page.
| | 01:00 | And finally, a small tile
that repeats many more times.
| | 01:04 | So plan ahead for how your repeating
effect will look by sizing your Photoshop
| | 01:08 | image to give you the effect that you want.
| | 01:10 | I also suggest that you think about
color choices as you design your tile.
| | 01:15 | One thing you don't want to do is to
choose colors that are too contrasty, one
| | 01:19 | with the other, like those that you
see here, because they will create a
| | 01:22 | repeating background that's very distracting.
| | 01:24 | And that takes the focus off the
elements on the foreground, which are what the
| | 01:28 | page is about, and it brings the
viewer's eye to the background.
| | 01:32 | Also, think about the lightness
and darkness of your background.
| | 01:36 | If you plan to put dark elements
on top of the background, then make
| | 01:40 | the background light.
| | 01:41 | Don't try to put light elements on top of a
light background because they'll disappear.
| | 01:46 | And the opposite is true as well.
| | 01:48 | If you plan to use light foreground
elements, then create a dark background.
| | 01:54 | Try to stay away from medium value
backgrounds, because both light, dark and
| | 01:58 | medium colors will all be hard to see
on top of a medium value background.
| | 02:03 | So those are some design
considerations to take into account when you're
| | 02:06 | creating your Photoshop file that's
going to act as a tile across an HTML page.
| | 02:11 | In the rest of this chapter, we will
focus on other techniques that will help
| | 02:15 | you to make some nice
looking web page backgrounds.
| | Collapse this transcript |
| Defining and previewing| 00:00 | In this movie, we're going to talk
about how to set up an image in Photoshop
| | 00:04 | to act as a background image and how to
preview that image from Photoshop in a
| | 00:08 | web browser to see how it will look when it's
tiling over and over as an HTML page background.
| | 00:14 | I'm using javaco_leaf.psd from
the chapter 8 Exercise Files folder.
| | 00:18 | With that file opened in Photoshop, I am
going to go to the File menu at the top
| | 00:22 | of the screen and I am going
down to Save for Web & Devices.
| | 00:26 | In the Save for Web window, I'll
select the preview that I want to use, and
| | 00:30 | let's just see how it looks before we
tell Photoshop that we want it to be a
| | 00:33 | repeating background tile.
| | 00:34 | I'm going to go to the bottom of the
Save for Web window and click on the
| | 00:38 | Preview in Browser icon.
| | 00:40 | Mine is set to Safari.
| | 00:41 | Yours may be slightly different.
| | 00:43 | If you don't have any browsers here, go
back and listen to the movie on the Save
| | 00:47 | for Web Interface where I explain
how to set up the Preview in Browser.
| | 00:51 | I am going to click that button and that
opens my Safari web browser and you can
| | 00:56 | see that this is now just a
single image on a webpage.
| | 00:59 | By the way, whenever you preview in
browser from Photoshop, you also get this
| | 01:03 | extra information about the image:
| | 01:05 | the Format, Dimensions, Size, and your
optimization settings here, as well as a
| | 01:11 | small bit of HTML code on the page.
| | 01:13 | I am going to close the web browser and
now I'm going to tell Photoshop that I
| | 01:19 | want that image not to show up one time
on a webpage, but to repeat itself over
| | 01:24 | and over across the webpage, no
matter how big the browser gets.
| | 01:28 | To do that, I'm going to go to this arrow
on the right side of the Save for Web window.
| | 01:32 | It's a little hard to find, so
don't forget that it's there.
| | 01:35 | I'll click the arrow and I'll choose Edit
Output Settings from the menu that pops up.
| | 01:41 | That opens this dialog box with all of the
various output settings that you can change.
| | 01:47 | I'm going to go to the second menu here,
and I'm going to choose Background.
| | 01:52 | In this box, we're going to tell
Photoshop to display this document not as an
| | 01:57 | image, a foreground image, but rather,
as a repeating background image, by
| | 02:01 | checking this box right here,
View Document As > Background.
| | 02:06 | Actually, there is a shortcut for
this, but I wanted to show you what
| | 02:08 | was happening here.
| | 02:09 | The other thing you can do, rather
than coming into this area, is to use that
| | 02:13 | first menu at the top, and just choose
Background Image and it will set the View
| | 02:17 | Document As to Background.
| | 02:19 | I'll click OK, and now let's preview
our file again by going to the Preview in
| | 02:24 | Browser icon at the bottom of the
Save for Web window and clicking there to
| | 02:28 | open the browser and show us this
very same image repeating itself over and
| | 02:32 | over as a background tile.
| | 02:34 | In the next movie, we'll learn how to
optimize and save out this image as a
| | 02:38 | repeating background.
| | Collapse this transcript |
| Optimizing and saving| 00:00 | After you've defined an image as a
background, as we did in the last movie, you
| | 00:04 | can optimize the image using the
principles you've learned in the preceding
| | 00:08 | chapter, and you can save the image
along with HTML that includes instructions
| | 00:13 | to repeat the file as a background.
| | 00:15 | Let's see how that's done.
| | 00:17 | With the javaco_leaf.psd still opened
from the last movie, I'm going to go to
| | 00:22 | File>Save for Web & Devices and in
the Save for Web & Devices window, I am
| | 00:28 | going to go over to the right-hand side and
optimize the preview in the top-right pane.
| | 00:32 | I'll leave it set to GIF and I'm
going to reduce the number of colors.
| | 00:35 | As I reduce the colors, keep your eye here
on the file size and you'll see it decrease.
| | 00:40 | There it goes. It's going down.
| | 00:46 | At 8 colors, it's only 1.453 kilobytes.
| | 00:54 | I don't like the way the file looks
at 4 colors, so I will go back up to 8.
| | 00:58 | I'll go to the Dither field, and I'll
reduce the amount of Dither to 0 and see
| | 01:02 | if that makes any difference to our file size.
| | 01:04 | I didn't really see a change there.
| | 01:06 | The image looks just as good.
| | 01:07 | So we will leave it at that, and we're
going to uncheck Transparency, because we
| | 01:11 | don't have any transparency in this image.
| | 01:13 | Now that we're done optimizing,
I'm going to click the Save button.
| | 01:16 | Before I do, just remember that you have
already gone to this arrow, chosen Edit
| | 01:21 | Output Settings and set this image
as a background. Now click Save.
| | 01:27 | I'm going to go to my Desktop
and I'm going to save there.
| | 01:31 | I'm going to make a new folder
there to catch the results of this save.
| | 01:34 | I'll call it 'javaco_bg' for
background and click Create.
| | 01:40 | It's important to go to the Format
menu at the bottom of the screen, and make
| | 01:43 | sure it's set to HTML and Images,
because we want Photoshop not only to save
| | 01:48 | out the optimized GIF file, the image
file, but, in addition, an HTML file that
| | 01:53 | contains the instructions that will make
that image repeat across a webpage background.
| | 01:58 | Now I'll click save, and I'm going to
go out to my desktop to see what we have.
| | 02:04 | There is my javaco_bg folder and if I
double-click and look inside, I see that
| | 02:09 | there's another folder called
images, which Photoshop made for me.
| | 02:12 | I will double-click that to open it,
and there is my optimized image file.
| | 02:16 | Let's open that in Photoshop.
| | 02:24 | This is the GIF that we just optimized from
Photoshop and over here is the original PSD.
| | 02:31 | They compare pretty well.
| | 02:32 | So now let's take a look at the
HTML file that Photoshop made for us.
| | 02:37 | I'm going back to my Finder and back one
level, to look at javaco_leaf.html that
| | 02:43 | was created by Photoshop.
| | 02:45 | I'll double-click that HTML file to
open it in my default web browser, and here
| | 02:49 | it is, showing the image
repeating over and over on the page.
| | 02:53 | You can take that HTML file, along with
the images folder containing the GIF, into
| | 02:58 | a website building program, like Adobe
Dreamweaver, and use it as the base for a
| | 03:03 | page that you continue to build there.
| | 03:05 | So that's the process for optimizing
and saving a repeating page background
| | 03:10 | from Photoshop CS3.
| | 03:12 | In the next movies, we're going to
learn some techniques for creating different
| | 03:15 | effective background designs.
| | Collapse this transcript |
| Symmetrical backgrounds| 00:00 | In the preceding movies in this chapter,
we learned how web backgrounds work, we
| | 00:04 | learned how to define and preview a
repeating web tile, and then we learned how
| | 00:08 | to optimize and save a repeating
web background from Photoshop CS3.
| | 00:13 | Now we're going to start using
those skills to build some effective
| | 00:16 | background designs.
| | 00:17 | In this movie, we'll start by
making a symmetrical background.
| | 00:22 | I have javaco_leaf_small opened from
the chapter 8 Exercise Files folder.
| | 00:27 | This is going to be the pattern
that we'll use on a repeating tile.
| | 00:30 | Let's make a new file that will be the tile.
| | 00:33 | We'll go to File and then New, and in the
New dialog box, we'll give our tile a name.
| | 00:39 | We'll call it 'leaf_bg' for background.
| | 00:43 | In the Width and Height fields, I'm
going to type 200, and I'll make sure that
| | 00:49 | the units of measurement are set to pixels.
| | 00:51 | It doesn't matter what's in the
Resolution field, because, as I've mentioned
| | 00:55 | before, our Width and Height are
set in absolute numbers of pixels.
| | 00:59 | So we can ignore the Resolution field,
the Color mode, we make sure is set to
| | 01:03 | RGB Color and the Bit Depth to 8 bit.
| | 01:06 | Then we go to the Background
Contents field and we'll choose White.
| | 01:09 | I'll click OK, and here's our new tile.
| | 01:14 | Let's add this small leaf to our tile.
| | 01:17 | We'll go to the small leaf image and
we'll click on its Title bar to make it
| | 01:20 | active, and then we'll go to the Select
menu at the top of the screen and choose All.
| | 01:26 | Then we'll go to the Edit menu and choose Copy.
| | 01:29 | With the leaf copied into the Clipboard,
we'll move to the leaf_bg image and
| | 01:34 | click its Title bar and then choose Edit>Paste.
| | 01:38 | The leaf appears right in the middle of
the new tile on its own layer, as we can
| | 01:41 | see in the Layers panel.
| | 01:43 | Let's name this layer by double-
clicking the default name and we'll call this
| | 01:46 | one 'four corners', and then click off the name.
| | 01:50 | Now we're going to apply a filter
to the selected four corners layer.
| | 01:54 | We'll go up to the Filter menu and
down to Other and over to Offset.
| | 02:00 | In the Offset filter dialog box, first, we
want to set the Undefined Areas to Wrap Around.
| | 02:06 | Then we're going to type in a
number for the Horizontal offset and for
| | 02:11 | the Vertical offset.
| | 02:12 | We'll type 100 for each.
| | 02:18 | Right away, you can see in the image
that we're starting to build this pattern.
| | 02:23 | I'll click OK and now I want to
add one more copy of this leaf.
| | 02:27 | The leaf is still copied into my Clipboard.
| | 02:29 | So all I have to do is come to the
leaf_bg image and choose Edit>Paste.
| | 02:35 | Again, I get the leaf in the center of the tile.
| | 02:39 | In the Layers panel, there is yet
another layer, and we'll give that one a name,
| | 02:42 | double-clicking it, and calling it
'center', and then clicking off the name.
| | 02:49 | Now let's open up the Save for
Web window and define this as a
| | 02:53 | repeating background.
| | 02:56 | File>Save for Web & Devices, with the
top-left preview selected, I'm going to go
| | 03:03 | to the right side of the Save for Web
window and click on the arrow there and go
| | 03:07 | down to Edit Output Settings.
| | 03:11 | In the Output Settings dialog box,
I'm going to the second menu and
| | 03:15 | choosing Background.
| | 03:17 | Here, I'm going to change View
Document As from Image to Background, telling
| | 03:22 | Photoshop that we want it to treat
this image as a repeating background tile,
| | 03:27 | and then I'll click OK.
| | 03:29 | Now, I'm going to preview the image by
going to the Preview in Browser icon at
| | 03:33 | the bottom of the Save for Web window
and here you can see our new symmetrical
| | 03:38 | repeating background pattern.
| | 03:40 | As we learned before, when you do
preview an image in Photoshop you get this
| | 03:43 | additional information up at the top.
| | 03:47 | This pattern will fill any web browser, no
matter how big or how small the browser maybe.
| | 03:54 | The beauty of this pattern is that the
user only has to download one small image
| | 03:59 | and they get an entire
browser full with pattern.
| | 04:01 | However, there are some things about
this particular pattern that I would change.
| | 04:05 | One of those things is that I think
there is too much contrast between the beige
| | 04:09 | of the leaf and the white of the
background, so that if we tried to put text or
| | 04:14 | foreground images on top of this,
the background would compete with those
| | 04:18 | foreground elements.
| | 04:19 | I also think that we might be able to
optimize this tile a little better to make
| | 04:23 | the edges of the leaf a little smoother.
| | 04:25 | We'll go in to the Save for Web
window and see if we can do that.
| | 04:28 | So let's close the browser.
| | 04:30 | We're back to the Save for Web window and
I am actually going to cancel this for now.
| | 04:34 | Unfortunately, we have to go out of Save
for Web to make changes directly to our
| | 04:37 | image and then we'll come back.
| | 04:39 | So, I'm going to click Cancel, and back
in the leaf_bg tile image, I'm going to
| | 04:44 | select the center layer and reduce its
opacity from the Opacity field at the top
| | 04:50 | of the Layers palette.
| | 04:51 | I'm just going to move my mouse over
the word Opacity and click-and-drag to the
| | 04:54 | left until Opacity is down to maybe 25%.
| | 04:58 | I like the way that looks in the image.
| | 05:00 | So I'm going to do the same thing to
the four corners layer by selecting it and
| | 05:05 | then moving the Opacity slider to left,
and I'll stop at about 25% there too.
| | 05:10 | You can see that we have now changed our image.
| | 05:13 | Now let's go back into Save for Web with
these changes made, File>Save for Web &
| | 05:19 | devices, and let's see if we can
optimize this image a little bit better to get
| | 05:24 | a smoother edge on the leaf pattern.
| | 05:27 | Notice that the file only is 1k right
now, which is really small, considering
| | 05:31 | that it's going to fill
the viewer's web browser.
| | 05:33 | So I'm going to go over to Colors and I
can spare a few more colors, I think, by
| | 05:38 | clicking the arrow here and going to 16.
| | 05:41 | Now, the leaf looks smoother
and our tile is only 1.376k.
| | 05:46 | So let's see how it looks now.
| | 05:47 | We're going to go to the Preview in
Browser icon again at the bottom of the Save
| | 05:51 | for Web window, click and
here is our modified pattern.
| | 05:55 | With the Contrast dialed back and the
edges of the pattern smoothed down, it's
| | 05:59 | now ready to receive foreground images.
| | 06:01 | So let's save our pattern from Photoshop.
| | 06:04 | We'll close the browser.
| | 06:06 | In the Save for Web & Devices window,
we'll click Save, and we'll navigate to
| | 06:10 | the Desktop where I'm going to make
a new folder and I'll call this one
| | 06:17 | 'leaf_background', click Create.
| | 06:22 | Make sure Format is set to both HTML
and Images, so that Photoshop not only
| | 06:26 | saves an optimized GIF for us, but
also an HTML file with the code that will
| | 06:31 | make that GIF tile repeat over
and over as a webpage background.
| | 06:36 | I'll click Save and I'm going to go
out to the Desktop and there I'll find my
| | 06:40 | leaf_background folder, inside of which
is leaf_bg.html, and an images folder
| | 06:45 | containing our leaf_bg optimized GIF.
| | 06:49 | Let's open that HTML, and
there is our webpage background.
| | 06:54 | So that's how to make a
symmetrical background in Photoshop CS3.
| | 06:58 | Next up, we'll talk about how to make a
seamless background from a photograph.
| | Collapse this transcript |
| Full-screen backgrounds| 00:00 | Now that you know how to make a
repeating pattern background, you may be
| | 00:03 | thinking that you'd like to create a
full screen background, but you have to
| | 00:07 | remember that when you code an image as
an HTML background it will always tile.
| | 00:12 | So in order to make a full screen
background that fills a user's entire web
| | 00:16 | browser without appearing to repeat,
you have to make an image that is bigger
| | 00:20 | than the user's screen.
| | 00:22 | The problem is that different users,
of course, have their monitors set to
| | 00:25 | different resolutions.
| | 00:26 | You might have some people with their
resolution set to 640x480, others at
| | 00:31 | 800x600, 1024x768, and
many, these days, even higher.
| | 00:36 | So your full screen page background just
isn't going to look the same to all your viewers.
| | 00:40 | For example, let's say you
design your background for a 1024x768
| | 00:45 | monitor resolution.
| | 00:47 | A viewer with that monitor resolution
will see the whole thing and it will look
| | 00:50 | like a full screen background.
| | 00:52 | But a viewer who has their monitor set
to a smaller resolution will see only
| | 00:56 | part of your full screen background design.
| | 00:59 | And even a viewer monitor resolution is
set to 1024x768, may have his browser
| | 01:05 | window shrunk down, so he
won't even see the whole thing.
| | 01:08 | Even worse, at the other end of the
spectrum is that if a viewer has a very, very
| | 01:12 | big monitor, say a 30-inch cinema
display with very high resolution and you've
| | 01:16 | designed for 1024x768 monitor resolution,
then, your allegedly full screen image
| | 01:23 | is going to appear to tile
on that viewer's monitor.
| | 01:26 | That can look really bad, because it
will give you results you didn't expect.
| | 01:29 | So what is the solution to handling
all of these different situations?
| | 01:33 | First, do some market research and
try to figure out the maximum monitor
| | 01:37 | resolution at which your particular
audience is likely to see your website, and
| | 01:42 | then design for that monitor resolution.
| | 01:44 | So if you think most of your viewers
have 1024x768, then make your full screen
| | 01:49 | background at least at that
size and maybe a little bigger.
| | 01:52 | Then check out how your background
is going to look on lower resolution
| | 01:56 | monitors, or to a viewer on a large monitor
who may have just shrunk his browser window.
| | 02:02 | And we've made a tool that you
can use to do some of that work.
| | 02:05 | If you go into the Chapter 8 folder,
open up browser_sizes.psd, get your
| | 02:14 | Move tool and click on the image leaves.psd,
which should also be opened from that folder.
| | 02:22 | Select the top layer of leaves.psd
and then click on browser_sizes.psd to
| | 02:28 | activate that image.
| | 02:29 | With the Move tool selected,
hold down the Shift key and click in
| | 02:33 | browser_sizes.psd and drag into leaves.psd.
| | 02:37 | When you see that light gray
border, you can release your mouse.
| | 02:40 | Holding the Shift key as you do that
causes the browser image to drop directly
| | 02:44 | in the center of the leaf's,
image making it all line up properly.
| | 02:48 | I'm now going to close browser_sizes.
psd, and look in my Layers panel for
| | 02:54 | leaves.psd, and you'll see there's a
new layer there, screen resolutions.
| | 02:58 | This contains a transparent layer
with the lines that you see here and
| | 03:03 | the indicated sizes.
| | 03:05 | If you add this layer to any image
that you make, it will show you how much
| | 03:09 | of that image can be seen by
someone whose monitor is set to 640x480,
| | 03:14 | 800x600, or 1024x768.
| | 03:18 | So in other words, a viewer whose
monitor is set to 640x480, will see just this
| | 03:24 | part of this particular background.
| | 03:26 | That may not be what you intended.
| | 03:29 | If we open it up a little more,
someone with an 800x600 monitor will see
| | 03:33 | this much of the background, and
someone with 1024x768 will see the whole
| | 03:38 | thing, in this case.
| | 03:40 | So you have to be happy with all of these
results or you need to redesign your background.
| | 03:45 | Let's go through the process of
optimizing this background and seeing how
| | 03:49 | it looks in a browser.
| | 03:50 | First, we're going to turn off the
screen resolutions layer by clicking the Eye
| | 03:54 | icon to the left of that layer.
| | 03:56 | Now, we'll go to File, and we'll
go down to Save for Web & Devices.
| | 04:02 | In the Save for Web window, I'm going
to change the Format from JPEG to GIF,
| | 04:07 | because this is flat art, and already
we can see the edge of the image looks
| | 04:10 | better in the preview.
| | 04:11 | We probably can reduce
the number of colors here.
| | 04:14 | I'm going to go to the Colors field
and I'll see how the colors look at 8.
| | 04:18 | The file is still a little big for my taste
at 7.479K, so let's make this even smaller.
| | 04:23 | We'll make it 4 colors.
| | 04:25 | It doesn't look too bad, and
our background is now 5.932k.
| | 04:31 | Now let's set this as the background
image by clicking the arrow on the right
| | 04:34 | side of the Save for Web window, going
down to Edit Output Settings. As we've
| | 04:38 | done in earlier movies,
| | 04:39 | we're going to click on the second
menu here, choose Background, and we're
| | 04:44 | going to view document as Background to
tell Photoshop that we want this to be
| | 04:48 | a background image. Then we'll say OK.
| | 04:51 | Then let's go ahead and save our
image by clicking the Save button.
| | 04:55 | I'm going to navigate to my Desktop.
| | 04:57 | There on the Desktop, I'm
going to save HTML and Images.
| | 05:01 | I'll make a new folder.
| | 05:03 | I'll call this 'full_background'
and I'll click Create, and Save.
| | 05:12 | Let's go out and see what's on our Desktop.
| | 05:14 | Here is our full_background folder and
if I open that up, I see my HTML saved
| | 05:20 | from Photoshop, and my images folder
with the full screen leaves.gif background.
| | 05:26 | Let's open that HTML.
| | 05:29 | Here it is in a browser.
| | 05:30 | Now I happen to have my browser running
on a monitor set to 1024x768, so I can
| | 05:37 | see this entire design.
| | 05:38 | But if I had my monitor set to a
smaller resolution or if I just shrunk my
| | 05:42 | monitor like this, this is all I
would see as the webpage background.
| | 05:46 | So you, the designer, have to be happy
with the way your background looks at
| | 05:50 | various sizes in order to be satisfied
with making a full screen background.
| | 05:56 | Please do feel free to make use of the
browser_size.psd that we've given you to
| | 06:00 | see how your backgrounds will look to
viewers with various monitor resolutions.
| | Collapse this transcript |
| Using directional tiles| 00:00 | In this movie, we're going to
take what we learned about creating
| | 00:03 | repeating backgrounds and use that
information to make something fun, a
| | 00:07 | striped background.
| | 00:08 | We started by just drawing this very
thin strip and adding to it some blocks of
| | 00:13 | color and a few of these little spikes
and a couple of little dots over here and
| | 00:17 | we are going to take this very small
file and allow it to repeat so that it
| | 00:21 | appears to be a full-striped background.
| | 00:24 | Let's go to the File menu and
choose Save for Web and Devices.
| | 00:29 | In the Save for Web and Devices window,
we'll go to the arrow on the right side
| | 00:33 | and choose Edit Output Settings, and
go to the second menu, choose Background
| | 00:38 | and will set this image to be
viewed not as a foreground image but as a
| | 00:41 | repeating background.
| | 00:42 | And then we will click OK.
| | 00:45 | Let's Preview this in a Web
Browser and see what it does.
| | 00:48 | There it is, vertical stripes, all
made from that one very thin strip and
| | 00:53 | repeated over-and-over to
give you the illusion of stripes.
| | 00:56 | Let's see if we can turn these
stripes on their side and make
| | 00:59 | horizontal stripes.
| | 01:00 | I am going to close the Web Browser
and click in Save for Web and Devices,
| | 01:05 | cancel there as well.
| | 01:08 | Back in Photoshop, I am going to go to
the Image menu and down to Rotate Canvas.
| | 01:12 | We'll rotate this 90 degrees clockwise.
| | 01:15 | Now that our file is rotated, we will go
back to Save for Web, again, we will click
| | 01:21 | on the arrow on the right side and we
will go down to Edit Output Settings, we
| | 01:25 | will click on the second menu as we
did before and again choose background.
| | 01:29 | Again, we have to set the document to be
viewed as a background and we'll say OK.
| | 01:35 | This time, instead of previewing,
let's just go ahead and save.
| | 01:38 | So I will click the Save button and I'm
going to navigate to my desktop where I
| | 01:42 | am going to make a new folder, which
I'll call stripes, and I'll say Create.
| | 01:47 | Here in the Format field I want to be
sure that I've chosen HTML and images so
| | 01:52 | that Photoshop not only saves out the
optimized GIF image but also an HTML file
| | 01:57 | with instructions for repeating the
GIF over and over as a background.
| | 02:00 | So we'll click Save there.
| | 02:03 | Now, let's go and see
what we have on our desktop.
| | 02:06 | Here is the stripes folder and if I
double-click it, inside I see an images
| | 02:10 | subfolder created by Photoshop with
stripes.gif, the optimized image file.
| | 02:17 | Let's open this HTML file and we
should see our new horizontal stripes.
| | 02:23 | Take this idea and play with it, and
see what kind of stripes you can create
| | 02:27 | using repeating backgrounds from
Photoshop CS 3's Save for Web window.
| | Collapse this transcript |
|
|
9. Creating NavigationHorizontal navigation bars| 00:00 | Among the most important web graphics
you can make are the navigation elements
| | 00:04 | of a page, like buttons and navigation
bars, because they determine whether a
| | 00:09 | visitor is going to be able to
make his way around your side.
| | 00:11 | In this chapter, we are going to
focus on how to create different kinds of
| | 00:15 | navigation elements.
| | 00:16 | We will focus on using the Shape and
the Type tools to create elements of
| | 00:20 | navigation like buttons and navigation bars.
| | 00:23 | In a later chapter on Rollovers, we
will talk about how to create graphics for
| | 00:26 | different states of navigation buttons,
and how to save those out as separate
| | 00:30 | images to be programmed in a
separate program like Dreamweaver.
| | 00:34 | Now that ImageReady no longer ships
with Photoshop, you do need to use a
| | 00:38 | separate program to program working
rollovers, but Photoshop remains a terrific
| | 00:44 | program in which to create the
artwork for your navigation elements.
| | 00:48 | So let's get started doing that.
| | 00:49 | We are going to start by going to the
Toolbox and selecting this tool, the
| | 00:55 | Rectangle tool, which is
one of a set of Shape tools.
| | 00:58 | We will go into the Document window and we
will click and drag out a horizontal bar.
| | 01:04 | When I release the mouse, the bar
fills automatically with color.
| | 01:08 | If you don't like the color that you
have, don't worry, because we will learn
| | 01:11 | how to change that in just a minute.
| | 01:12 | By the way, you can be working in a
blank document, if you wish, or if you have
| | 01:16 | access to the Exercise Files, open
horizontal_nav_bar.psd from the chapter09
| | 01:22 | Exercise Files folder.
| | 01:23 | Let's go over to the Layers panel
and see what we have created here.
| | 01:27 | We now have a special shape
layer in our Layers Stack.
| | 01:31 | Notice that the Shape
layer has two thumbnails on it.
| | 01:35 | These represent the two components
of this special kind of a shape layer.
| | 01:38 | The thumbnail on the right is a Vector Mask.
| | 01:41 | It contains a path that outlines the
shape and it's responsible for what the
| | 01:46 | actual shape looks like.
| | 01:48 | On the left is another thumbnail that
represents a Color Fill on this layer.
| | 01:52 | You might think of these two components
as an object in a coloring book with the
| | 01:57 | Vector Mask being like the thick
outline around an object and the Color Fill
| | 02:02 | being analogous to the color you use
to fill in the coloring book object.
| | 02:06 | Between the two components we have a
link which links them together if you
| | 02:10 | happen to move the object, there are a
few times when you may want to unlink
| | 02:14 | these two components.
| | 02:15 | For example, if you were making an
animation and instead of a solid color, you
| | 02:19 | had a pattern and you wanted to show
it moving around inside of Vector Mask.
| | 02:24 | In that case, you could click the
link and that would unlink these two
| | 02:27 | components, but I am going to click
there again to relink, and that's how we
| | 02:31 | usually use a Shape layer.
| | 02:32 | One of the nice things about Shape
layers is how easy it is to change the
| | 02:36 | color of a shape layer.
| | 02:38 | Let's change the color of this
Horizontal Navigation Bar by double-clicking the
| | 02:42 | icon on the left side of the Shape 1 layer.
| | 02:46 | That opens the Color Picker. Notice that
my Color Picker is set to Only Web Colors.
| | 02:51 | Even though I don't technically have to
limit myself to web colors, I like doing
| | 02:55 | this because it limits the number of
colors available, making it easier to choose
| | 02:59 | colors that go together.
| | 03:00 | So I am going to click on this light-gray
-blue and click OK, and notice that the
| | 03:05 | Navigation Bar has immediately changed color.
| | 03:08 | When you are working with a Shape layer,
you don't have to make a selection and
| | 03:11 | then fill a selection with color,
as you do on a pixel-based layer.
| | 03:14 | Now let's line up this
Navigation Bar with the logo layer.
| | 03:18 | Earlier, I turned on Smart
Guides from the View>Show menu.
| | 03:21 | So I am just going to get my Move tool,
and with the Shape 1 layer selected in
| | 03:27 | the Layers panel, I am going to click-and
-drag until I see that pink smart guide
| | 03:32 | telling me that I have lined up the
right edges of these two elements.
| | 03:36 | Now I am going to create some Text buttons.
| | 03:39 | Before you do this, if you are following
along, make sure that your Vector Mask
| | 03:43 | is not highlighted like
this on the Shape 1 layer.
| | 03:46 | If it is, click it to de-highlight it.
| | 03:49 | That will help to separate the type layers
you are about to add from the Shape layer.
| | 03:54 | Go to the Toolbox and
select the Horizontal Type tool.
| | 03:58 | I have already set up the options for
my Type tool here in the Options Bar.
| | 04:02 | I have Arial as the Font family,
Regular as the Font Style, I typed 15 points
| | 04:08 | into the Font Size Field and I
chose Smooth as the Anti-aliasing method.
| | 04:14 | And I chose for color of the type the
same blue that we have here in the JAVACO
| | 04:18 | tea logo, opening the Color Picker
from that color field and then using the
| | 04:22 | Eyedropper to select that same blue.
| | 04:25 | Now I am going to type my first button.
I am going to come in, and it doesn't
| | 04:28 | really matter where I am here, because
I am going to readjust the location of
| | 04:32 | all these buttons in a moment.
| | 04:34 | I am going to type the first button,
products, and then as with any Type layer,
| | 04:38 | I am going up to the Tool Options Bar and
clicking that checkmark to commit the Type edit.
| | 04:43 | Then I can come in and make another
button. We'll call this one 'about us',
| | 04:49 | and click the big checkmark, and then I'll
make another button. This will be 'our stores'.
| | 04:56 | Click the checkmark and make another
button 'contact us' and click the checkmark.
| | 05:04 | Now we will see how easy it is to
automatically align these buttons. With the
| | 05:07 | contact us layer selected in the
Layers panel, I am going to hold down the
| | 05:11 | Shift key and select the products layer as well
and that selects all four of the button layers.
| | 05:17 | Then I am going to make sure I have the
Move tool selected in the Toolbox and I
| | 05:22 | am going to go up to the Options Bar
and I am going to click this very first
| | 05:25 | icon there, which will align the
selected elements by their top edges.
| | 05:29 | Keep your eye on the document and you
will see that all four buttons are now
| | 05:33 | aligned by their tops.
| | 05:35 | Now I also want to change the spacing
between these buttons, so that there is
| | 05:39 | equal amount of space between each button.
| | 05:42 | I can do that automatically too.
| | 05:44 | With the four button layers selected
in the Layers panel, in the Move Tool
| | 05:48 | Options Bar I am going to click this
button, Distribute Horizontal Centers.
| | 05:52 | Keep your eye on the buttons and you'll
see them move so that we now have equal
| | 05:57 | space between each button.
| | 05:58 | Now let's add the Shape layer to our
mix of selected layers by holding the
| | 06:03 | Command key on a Mac, or the Ctrl key on a PC.
| | 06:06 | And one more time, I am going to up to
the Move Tool options and I am going to
| | 06:10 | click on Align Vertical Centers and
if you keep your eye on the buttons,
| | 06:15 | you'll see that they have now all moved to
the center of that Horizontal Navigation Bar.
| | 06:20 | The last alignment I am going to do manually.
| | 06:22 | I am going to move all four
buttons over to the right a bit.
| | 06:26 | First, I am going to the Layers panel and
I am going to hold the Command key on a
| | 06:29 | Mac, or the Ctrl key on a PC, click on
the Shape 1 layer to remove it from the
| | 06:34 | group of selected layers.
| | 06:36 | Then I am going to just use the Right
Arrow key on my keyboard with the Move
| | 06:40 | Tool selected, to nudge those four
buttons over until they look like they are in
| | 06:45 | the right place to me.
| | 06:46 | So that's how you align items automatically.
| | 06:48 | You don't have to spend a lot of time
lining things up or always using guides.
| | 06:52 | You may be wondering why we took the
trouble to put each button on a separate layer.
| | 06:56 | That's so that we will have the flexibility
to make changes to each button separately.
| | 07:00 | That will really come in handy if we
are going to make rollovers out of each one
| | 07:04 | of these buttons and we will have to
treat each button separately as we will
| | 07:07 | learn to do in the rollovers chapter.
| | 07:09 | You could leave your horizontal_nav_bar as
it is, or you could embellish it like this.
| | 07:13 | I am going to select the Type tool in
the Toolbox and I am going to come in and
| | 07:18 | click in between two of the buttons.
| | 07:20 | Then I am going to type a pipe.
| | 07:22 | To do that I am going to hold down the
Shift key and press the Backslash key on
| | 07:27 | the right side of my keyboard, and
then I'll go up to the Options Bar and I
| | 07:31 | will commit that edit.
| | 07:32 | You can see that pipe
here in the Navigation Bar.
| | 07:35 | I am going to do that twice more by
clicking between the next to Type buttons,
| | 07:39 | holding the Shift key, pressing the
Backslash key, and pressing the checkmark.
| | 07:46 | And I'll do it one more time, clicking
between the last two buttons, holding the
| | 07:49 | Shift key, backslash, click the checkmark.
| | 07:53 | I can change the color of all three of
those pieces of type by going into the
| | 07:58 | Layers panel, holding down my Shift key
and clicking on the bottom of the three
| | 08:04 | pipe type layers to select them all,
and then I can go up to the Type tool
| | 08:09 | Options Bar and click in the
Color field to open the Color Picker.
| | 08:14 | I will choose a light-blue and I'll say OK.
| | 08:16 | One of the nice things about Type
layers, as we just saw, is that you can change
| | 08:20 | the characteristics of
multiple type layers at one time.
| | 08:24 | Next, I am going to make sure that all
of these layers are properly aligned.
| | 08:28 | I am going to make my Layers panel a bit
bigger, so we can see all the layers here.
| | 08:31 | I am dragging on the bottom-right
corner of the Layers panel to do that, and
| | 08:36 | then I am going to hold my Shift key as
I click on the bottom-most type layer,
| | 08:39 | the Products layer, and I am going to
go and select the Move tool again, and
| | 08:43 | once more, I am going to align by top edges.
| | 08:46 | Then again, I am going to take the
Shape layer and add it to my collection of
| | 08:50 | selected layers by holding the Command
key on a Mac, or the Ctrl key on a PC, and
| | 08:56 | I am going to go back up to the Move
Tool Options Bar and click Align Vertical
| | 09:00 | Centers, and that gets
everything lined up just right.
| | 09:04 | So that's how easy it is to use the
automatic features in Photoshop CS3 to
| | 09:09 | create a Horizontal Navigation Bar.
| | 09:11 | In the next movie, we are going to see
how to create some elliptical buttons.
| | Collapse this transcript |
| Elliptical buttons| 00:02 | In this movie, we're going to talk
about how to make an Elliptical button, like
| | 00:06 | the one that you see
right here that says 'products'.
| | 00:09 | If you are working along with me,
open elliptical_button.psd. Let's take a
| | 00:13 | look at this button and see how it's
constructed and then we'll make one of
| | 00:16 | our own just like it.
| | 00:17 | Notice that there is a Shape
layer here in the Layers panel.
| | 00:20 | I'll turn that off and then on, so you
can see that it contains just the button.
| | 00:24 | On that Shape layer, we have some
effects. These are Layer Styles.
| | 00:29 | We having an Inner Shadow and if I turn
that off you can see that it gives that
| | 00:33 | dark look to the outside of the button
and then we have a Bevel and Emboss, which
| | 00:38 | brings the button up off the page.
| | 00:40 | Finally, we have a Type layer up here
that has the text for the button on it.
| | 00:45 | So let's delete the Shape layer with
its effects and the Text layer and we'll
| | 00:49 | create this button from scratch.
| | 00:53 | In the Toolbox I am going to press-and-
hold on the Rectangle tool and choose the
| | 00:57 | Ellipse tool from this family of Shape tools.
| | 01:00 | I'll go into the image and I
am going to drag out a button.
| | 01:04 | It comes in black because that's the color
selected here in the Ellipse Tool Options Bar.
| | 01:09 | I'd like to change that color, so
I'm going to go to the Layers panel
| | 01:12 | double-click on the left-
hand icon on the Shape 1 layer.
| | 01:17 | That opens the Color Picker, and then I
can just move my mouse over the logo in
| | 01:22 | the image to sample that green.
| | 01:24 | I'll click OK in the Color Picker, and we
have now changed the color of the button.
| | 01:28 | Now we'll add some Layer Styles to this
button to give it some dimensionality.
| | 01:31 | Before we do, let me tell you how to
make this blue outline around the button
| | 01:36 | invisible because it really can get
in your way and keep you from really
| | 01:39 | seeing how a shape looks.
| | 01:41 | I am going to press the Command key on a
Mac, or the Ctrl key on a PC plus H, and
| | 01:47 | that makes that Vector
outline around the button invisible.
| | 01:51 | Now with the Shape layer selected, I'm
going to go to the fx button, this is
| | 01:55 | the Layer Styles button at the bottom
of the Layers panel, and I'm going to
| | 01:59 | choose Bevel and Emboss.
| | 02:02 | As you can see, Bevel and Emboss is
checked, meaning it's been applied to this
| | 02:06 | layer and it's also highlighted so
that we have our options for the Bevel and
| | 02:10 | Emboss layer style over here in the right.
| | 02:12 | We have lots of options here.
| | 02:14 | You can experiment with some
of them when you have time.
| | 02:17 | I'm going to just come in and modify the
Soften slider here to give the Bevel on
| | 02:22 | that button a little more softness, so
it's not as harsh right at the edges,
| | 02:26 | makes the button look a little bit rounder.
| | 02:28 | Now I am going to add another layer style.
| | 02:30 | I can do that from right here in
the Open Layer Style dialog box.
| | 02:33 | I will go over to the left side and I'm
going to check Inner Shadow and then I'm
| | 02:37 | going to click on the words Inner Shadow
to change the options on the right-hand
| | 02:42 | side of the Layer Style dialog
box to those for the Inner Shadow.
| | 02:45 | Here we have different options. One of
the things that we can do is to change
| | 02:49 | the color of the Inner Shadow.
| | 02:50 | And I do want to do that because I
don't want the Inner Shadow to be black.
| | 02:54 | It should be more of a
green to match the button.
| | 02:57 | So I'll click in the Color field in the
Inner Shadow Options, and in the Color
| | 03:02 | Picker that opens, I am going to
choose a dark-green and I'll click OK.
| | 03:06 | I am also going to change the size of
that Inner Shadow, increasing it to make it
| | 03:11 | softer, maybe about there, 16, and
I'm also going to increase the Choke to
| | 03:18 | further soften it, make it about 5 and
I am going to lower the Opacity of that
| | 03:23 | Inner Shadow so that it's not quite as obvious.
| | 03:25 | I think it looks good right about there.
And that gives some dimensionality to
| | 03:31 | our otherwise flat button.
| | 03:32 | I am going to click OK and now we are
going to add some text to this button.
| | 03:37 | To do that, I am first going to make
sure that I don't have the Vector Mask
| | 03:41 | thumbnail on the Shape layer selected.
| | 03:43 | So I want to click there, so that that
border around the Vector Mask goes away,
| | 03:47 | and now I can add a Type
layer on top of the button.
| | 03:50 | I'll click the Horizontal Type tool and
I'm going to check my options up here.
| | 03:54 | We'll try them with Arial, Regular
15 point, Smooth Anti-aliasing, and
| | 04:00 | this dark-blue color.
| | 04:01 | I'll click in the button and I'll type
'products', and then I'll go to the Options
| | 04:08 | Bar and click the checkmark to commit that type.
| | 04:11 | With the products layer selected in
the Layers panel, I am going to get my
| | 04:15 | Move tool and just click-and-drag that text
into place into the center of the button.
| | 04:20 | So that's how you use the Shape
tools and the Type tool to create a
| | 04:24 | single Elliptical button.
| | 04:25 | In the next movie, I am going to show
you how to use Smart Objects to duplicate
| | 04:29 | and change multiple buttons like this one.
| | Collapse this transcript |
| Smart Object buttons| 00:00 | In Photoshop CS3, you can use Smart
Objects to make matching buttons and then be
| | 00:07 | able to go back in and change any one
of the buttons, and the changes you make
| | 00:11 | will ripple through and effect
all of your matching buttons.
| | 00:14 | Let's see how that's done.
| | 00:16 | We are going to start by double-
clicking the Shape 1 name on the Shape layer,
| | 00:20 | and naming this layer 'products'.
| | 00:21 | Then we are going to turn
this layer into a Smart Object.
| | 00:27 | I am going to the top of the Layers
panel, I am clicking the Layers panel
| | 00:31 | menu icon there and from the pop-up menu,
I'm going to choose Convert to Smart Object.
| | 00:37 | All of our layer effects seem to have
disappeared from this layer, but they are
| | 00:40 | still there and we will access
them in just a moment and change them.
| | 00:43 | But first, let's duplicate
this Smart Object button.
| | 00:47 | I am going to drag the products layer
to the bottom of the Layers panel to
| | 00:50 | the New layer icon. That makes a copy.
| | 00:53 | I am going to rename that copy
'about' and then click off the name.
| | 00:58 | Then I am going to get my Move tool,
and click-and-drag the new button from on
| | 01:03 | top of the old one over to the left,
and now let's make a copy of that about
| | 01:09 | button by dragging it to the New layer icon.
| | 01:11 | We will name this button 'stores', click
off it, and drag that over to the right
| | 01:18 | and I am using my Smart
Objects to align these buttons.
| | 01:21 | And now I will copy the stores
button the same way by dragging it to the
| | 01:24 | New layer icon, give that new button
a name, we will call this one 'contact',
| | 01:30 | and click off that name and with the Move
tool, move our new button over to the right.
| | 01:36 | We can space these buttons out so
there is equal space between all buttons by
| | 01:40 | selecting all four layers. I've
selected the contact layer, and now I am
| | 01:44 | Shift+Clicking on the products layer
to select the four Smart Object layers.
| | 01:49 | Then in the Move tool Options bar, I am
going to click the Distribute Horizontal
| | 01:53 | Centers button here.
| | 01:54 | So now we have four buttons.
| | 01:56 | Let's say that our client wants to
change the color and the shape of the buttons.
| | 02:02 | Because we used Smart Objects, we only
have to go in and change one button and
| | 02:06 | they all will change.
| | 02:07 | So here is how that works.
| | 02:08 | I am going to double-click on a
Thumbnail on one of these Smart Object layers.
| | 02:12 | It doesn't matter which
of the layers you click on.
| | 02:14 | I will click on the products layer here,
and at the message I will click OK, and
| | 02:22 | that opens products.psb.
| | 02:26 | This is where the original layer data
is located, and now when you look in the
| | 02:31 | Layers panel you can see that we do
have our Layer Styles still applied to this
| | 02:35 | button, and we also have
the icons for the Shape layer.
| | 02:38 | Let's change the color of our buttons.
| | 02:39 | I am going to double-click on the
left icon on the Shape layer to do that.
| | 02:44 | That opens the Color Picker, and I
can choose a different color here.
| | 02:47 | Maybe I will choose a
lavender, and I will click OK.
| | 02:55 | And let's say I also want to
change one of the Layer Styles.
| | 02:58 | For example, I really don't like the color of
this green inner shadow on the purple button.
| | 03:03 | So I am going to double-click the
Inner Shadow Layer Style to open the layer
| | 03:07 | Style dialog box and in the Inner
Shadow options here, I am going to click on
| | 03:12 | the color field to open the
Color Picker for our Layer Style.
| | 03:17 | And here, I am going to go into the
Lavender options, and I will choose Dark
| | 03:22 | Lavender as my shadow, and then I'll
click OK, and I will click OK in the layer
| | 03:26 | Style dialog box, and the color
isn't the only thing that we can change.
| | 03:29 | For example, we could also
change the shape of the button.
| | 03:34 | Because it's a vector-based shape,
we can simply go to the toolbox and
| | 03:39 | select the Direct Selection tool, and
then click on the edge of this shape
| | 03:44 | to select its path.
| | 03:45 | I can then move any of these Bezi?r
handles to change the shape of the button.
| | 03:50 | I can make it something like this.
| | 03:57 | Now, I'm going to close and save
products.psb and we'll see all of the buttons
| | 04:04 | automatically update with these changes.
| | 04:06 | I will click the Red button to close.
| | 04:09 | I will click Save, and there we go, we
have changed all our buttons at once.
| | 04:14 | All that's left to do is to
put Type on all of these buttons.
| | 04:17 | Unfortunately, we can't use Smart
Objects to do that, because each button needs
| | 04:22 | a different piece of text.
| | 04:23 | I am going to go to my products Type
layer, and I'm going to get my Move tool
| | 04:28 | and I am going to move
products a little bit on that button.
| | 04:31 | Now it's easier to see.
| | 04:32 | Then I am going to double-click on the
T icon on the products layer to select
| | 04:37 | the word 'products', and I'm going to
go up to the Type tool Options bar, and
| | 04:41 | change the color of that
type, so we can see it better.
| | 04:44 | We will make it white.
| | 04:46 | Now what we are going to do is to take
the products Type layer and duplicate it,
| | 04:51 | by dragging it to the bottom of the
Layers panel to the New layer icon, and with
| | 04:56 | that products Copy Type layer selected,
I am going to get my Move tool and move
| | 05:01 | the piece of text over onto the second
button, and I'll use Smart Guides to line
| | 05:05 | it up, and then I am going to double-
click the T icon on the products Copy layer to
| | 05:11 | select that piece of type, and I'll change it.
| | 05:14 | I will type 'about us', and I will
click the big checkmark in the Options bar
| | 05:20 | to commit that edit.
| | 05:21 | I am going to repeat this
for the last two buttons.
| | 05:24 | Dragging the about us layer to the New
layer icon at the bottom of the layers
| | 05:27 | panel, with the Move tool, moving that
piece of text over to the third button,
| | 05:33 | double-clicking the T icon on our new
type layer and changing the text to 'our
| | 05:40 | stores', clicking the checkmark, I see that
I have to move our stores over just a bit.
| | 05:46 | And then I will copy our stores by
dragging its layer to the New layer icon,
| | 05:52 | and I'll take my Move tool and I will move
that bit of text over onto the fourth button.
| | 05:56 | I will double-click the T icon on the
New Type layer, and I will type instead
| | 06:01 | contact us, and click the checkmark.
| | 06:06 | using a Smart Object allows you to
make a change to one button, and have it
| | 06:10 | affect all of your buttons, so that
you get a perfectly matching set and you
| | 06:14 | save yourself some time.
| | Collapse this transcript |
| Pill-shaped buttons| 00:00 | Now that you know about Shape layers,
let's use some more advanced features,
| | 00:04 | along with Shape layers, to make the
buttons that you see here, the Back and the
| | 00:09 | Next button with their unusual cutout areas.
| | 00:13 | I am going to get my Move tool and just
move those down, and let's see if we can
| | 00:17 | make a similar button above them.
| | 00:18 | We will start in the Toolbox,
selecting the Rounded Rectangle tool from
| | 00:24 | the Shape tool slot.
| | 00:25 | I am going to draw a button here,
using this Rounded Rectangle tool.
| | 00:31 | I am going to click on the Vector Mask
to make the blue path invisible for a
| | 00:37 | moment so that you can see that
this rounded rectangle is really more
| | 00:41 | rectangular than it is round.
| | 00:44 | We want it more of a pill-shaped.
| | 00:46 | So we are going to try again.
| | 00:48 | Let's delete this Shape layer by
dragging it to the Layer Trash and this time,
| | 00:53 | with the Rounded Rectangle tool
selected, I am going to go up to the Radius
| | 00:57 | field, in the Tool Options Bar, and I am
going to increase the rounded nature of
| | 01:01 | the corners of this shape.
| | 01:03 | I will drag to the right, and I
might go as high as 35 pixels.
| | 01:08 | Now, I am going to come back
and try drawing that button again.
| | 01:11 | I will click on the Vector Mask, so
you can see that we now have more of the
| | 01:18 | type of pill-shaped button that we were after.
| | 01:21 | I will click back on the Vector Mask to
turn the path back on, and now I want to
| | 01:25 | show you how you can use a rectangle
shape to cut out parts of this rounded
| | 01:30 | rectangle and to create another kind of shape.
| | 01:33 | To do that, we are going back to
the Toolbox, and I am going to select
| | 01:37 | the Rectangle tool.
| | 01:38 | Then I am going to go out to the
Options Bar, and I am going to click on this
| | 01:41 | third icon from the left,
the Subtract From icon.
| | 01:45 | I will come back to my button, and
I am going to draw a shape here, a
| | 01:50 | rectangle, that I am going to use as a sort of
a knife to cut away part of the original button.
| | 01:56 | Here you see the rectangular path I
just drew, and the path of the part of the
| | 02:01 | button that I am trying to cut away.
| | 02:03 | To cut that away, I am going to go back
to the Toolbox and I am going to select
| | 02:07 | the Path Selection tool.
| | 02:08 | That makes available this
Combine button in the Tool Options Bar.
| | 02:13 | When I click this Combine button,
half of our button is cut away.
| | 02:17 | Let's use the same principles to create
these cutout stripes in our brown button.
| | 02:22 | I will select the Rectangle
tool again in the Toolbox.
| | 02:26 | Then I am going to come over to my
button, and I am going to click-and-drag a
| | 02:30 | narrow rectangle here.
| | 02:31 | I will get my Path Selection tool and I
will click on that rectangle, and I am
| | 02:36 | going to use the Arrow keys on my keyboard to
move that shape over just a bit to right there.
| | 02:44 | Now I want to make another rectangle
shape that's just like this one, so I will
| | 02:48 | just copy the one I just made.
| | 02:50 | To do that, I am going to hold down
the Option key on a Mac, or the Alt key on
| | 02:54 | a PC, and with the Path Selection tool, I am
going to drag to the right, and that makes a copy.
| | 03:00 | I will put it right there and now
I want to have both of these narrow
| | 03:06 | rectangles selected.
| | 03:07 | So with the Path Selection tool I am
going to hold down the Shift key, click on
| | 03:12 | the other narrow rectangle.
| | 03:14 | Now that I have got them both
selected, I am going to go up to the Tool
| | 03:18 | Options Bar and click Combine, and that has
cut out parts of our original pill-shaped button.
| | 03:25 | So now we have the right half of this
button all completed, we could go through
| | 03:29 | the same process to create
the left half of the button,
| | 03:32 | but an easier way is to simply
duplicate what we already have.
| | 03:36 | So I am going to go to the Shape layer
and drag it down to the New layer icon at
| | 03:40 | the bottom of the Layers panel.
| | 03:41 | That makes a copy. I am then going to get my
Move tool, and drag the copy over to the left.
| | 03:46 | The Smart Guides are
helping me to align that copy.
| | 03:52 | Now with the Copy selected, I am going
to flip it horizontally by going to the
| | 03:56 | Edit menu, down to Transform
Path, and down to Flip Horizontal.
| | 04:01 | I will click on that Vector Mask so
you can see that we have recreated that
| | 04:06 | original button, and now all that's
left to do is to add some text labels.
| | 04:11 | For that, I will go get the
Horizontal Type tool in the Toolbox, and I am
| | 04:15 | going to use the Tool Options that you
see here, Arial, Regular, 14 pt, with
| | 04:20 | Strong anti-aliasing.
| | 04:21 | I am going to need a darker color for the type.
| | 04:25 | So I will click in the color box, and I am
going to select this dark brown, and say OK.
| | 04:30 | Now I will just click on the right
side of the button, and type 'Next'.
| | 04:34 | I will click the checkmark in the Tool
Options Bar to commit that type, and I
| | 04:39 | will go over to the left side of
the button, and I will click Back.
| | 04:43 | Again, I will click the checkmark in
the Tool Options Bar and last, I want to
| | 04:48 | lineup those two pieces of text by Shift
+Clicking the Back and Next type layers
| | 04:53 | in the Layers panel, and then
getting my Move tool, and using one of the
| | 04:58 | alignment options here.
| | 05:00 | I will try the Align by Bottom Edge option.
| | 05:02 | Finally, I might use the Arrow keys on my
keyboard to just move that text over a bit.
| | 05:07 | So that's how you can use some of the
more advanced functions that are available
| | 05:10 | with Shape layers to create an
unusual navigation button like this one.
| | Collapse this transcript |
| Tabbed navigation bars| 00:00 | In this movie, we are going to
take a look at how to create a tabbed
| | 00:03 | navigation bar like this one.
| | 00:05 | The trick here isn't so
much dragging out the shapes,
| | 00:07 | we have already learned how to do that
in previous movies, the real trick is
| | 00:11 | setting up the spacing and alignment correctly.
| | 00:13 | We will be using Photoshop's
Guides and Rulers to help with that.
| | 00:17 | Here is what the Guides will look like
when we are finished setting them up.
| | 00:21 | As you can see, it's a pretty complex
system of Guides, and it doesn't just happen.
| | 00:25 | The way to really do this is to sit
down before you turn on Photoshop with a
| | 00:29 | pencil and paper and figure out how much
space you have, how much space you want
| | 00:34 | your tabs to take up, and how
much space you want between them.
| | 00:38 | Let's get started setting
up some guides of our own.
| | 00:40 | If you're working along with me,
open tab_nav_bar.psd from the Chapter 09
| | 00:45 | Exercise Files folder.
| | 00:47 | In this image, we started setting up
some Guides for you, and we are going to
| | 00:50 | finish the process here together.
| | 00:52 | If you don't see the Guides on your
file that you see here, then go to the View
| | 00:57 | menu, and go down to Show, and over to Guides.
| | 01:01 | The shortcut for showing and
hiding Guides is Command+Semicolon, or
| | 01:05 | Ctrl+Semicolon on a PC.
| | 01:08 | These Guides are a little hard to
see because they are cyan against a
| | 01:12 | partially cyan background.
| | 01:14 | You can change the color of
Guides from the Photoshop Preferences.
| | 01:17 | On a Mac, Photoshop Preferences are
under the Photoshop menu, on a PC, they are
| | 01:21 | under the Edit menu.
| | 01:23 | Go there, down to Preferences, and then
down to Guides, Grids, Slices & Count,
| | 01:29 | and in the Guides section, change the
color from Cyan to another color, like
| | 01:33 | green, and click OK.
| | 01:36 | Now, it's a bit easier to see the Guides.
| | 01:38 | Before you start dragging out Guides,
you are going to want to have your
| | 01:41 | Rulers on in Photoshop.
| | 01:42 | To turn on Rulers, go to the
View menu, and go down to Rulers.
| | 01:47 | By default, Photoshop's
Rulers measure in inches.
| | 01:50 | When you are developing for the web,
you want your Rulers to be measuring
| | 01:54 | in pixels, not inches.
| | 01:55 | A quick way to change Photoshop's
Rulers to pixels is to, on the Mac, hold down
| | 02:00 | the Control key and clicking either one
of the Rulers, or on the PC, right-click
| | 02:05 | in either one of the rulers like this.
| | 02:07 | And then you can choose Pixels from the
pop-up menu and that changes both Rulers.
| | 02:12 | Alternatively, you can go
into Photoshop's Preferences.
| | 02:15 | So here on a Mac, I am going to
Photoshop Preferences, and Units & Rulers, and
| | 02:20 | you can see here where you can set the
default unit of measurement for rulers.
| | 02:26 | Now, let's get started setting up the
rest of the Guides for the tabs that we
| | 02:31 | will be creating in this file.
| | 02:34 | Let's start with the Horizontal Guides.
| | 02:36 | As you can see, we have one Guide already,
and if you move over to the left, you
| | 02:40 | can see that that Guide is set to 150 pixels.
| | 02:43 | Let's create another Guide by going
to the Ruler at the top of the screen,
| | 02:47 | clicking and dragging down, and dragging the
second Guide to the 140 mark on the left ruler.
| | 02:54 | We will drag out one more Guide from
the top ruler, and we will put this one at
| | 02:58 | 95 pixels, and let's do
fourth one at 105 pixels.
| | 03:03 | Now, we are going to add some
additional vertical Guides here.
| | 03:06 | These we will pull out from
the vertical ruler on the left.
| | 03:10 | So click there and then pull out a Guide,
and drag it to 550 pixels, measured on
| | 03:16 | the ruler at the top, up here.
| | 03:18 | We will do another Guide at 560 pixels,
another at 580 pixels, another at 590,
| | 03:30 | 670, 680 and our last vertical Guide at 715.
| | 03:46 | Now, let's draw a line that
will be underneath all of our tabs.
| | 03:49 | We will select a color for the line by
clicking with the Eyedropper tool in the
| | 03:54 | Smoke Curl, and opening the foreground
color box and choosing a color that's
| | 03:59 | just a little bit darker than
the Smoke Curl, and clicking OK.
| | 04:05 | Now, I am going to go to the
Shape tools, and choose the Line tool.
| | 04:10 | In the Options bar, I will make sure
that the Weight of the Line tool is set to
| | 04:13 | 10 pixels, which is just the
width between these two Guides.
| | 04:17 | I am going to come to the second Guide,
and click-and-drag all the way over to
| | 04:23 | the last Guide and I want to make sure
there are no bumps in this shape that I
| | 04:27 | am drawing, that it's all smooth, and
when I release my mouse, I have this line.
| | 04:33 | I am going to grab my Move tool from the
Toolbox, and then use the Arrow keys on
| | 04:38 | my keyboard to move the line down
inside of its Guides and when I see this pink
| | 04:42 | border around it, which is the
Smart Guides, I know that it's in place.
| | 04:46 | Now I want to add some tabs
on the same layer as the line.
| | 04:50 | So I am going to go to the Toolbox
again and select the Rounded Rectangle tool.
| | 04:55 | To ensure that these are on the same
layer as the line, I will go up to the
| | 04:59 | Options Bar, and I will
click on the Add To icon.
| | 05:02 | I'm also going to check that the Radius
is set to 15 pixels, which is just about
| | 05:07 | right for the amount of roundness
that I want on the corners of these tabs.
| | 05:11 | Now, I am going to come in and draw my
first tab, putting my cursor where you
| | 05:15 | see it here on the screen at
this intersection of Guides.
| | 05:19 | I'll click and I will drag until I reach
the Guides at the other side of the first tab.
| | 05:25 | And as you can see, my Smart Guides are
showing at the top and sides of this tab.
| | 05:31 | That means I'm exactly where I want
to be, and I will release the mouse.
| | 05:36 | Now it doesn't matter how long the
shape is beneath the line, because we are
| | 05:39 | going to cut that off.
| | 05:40 | Let's draw another tab starting at this
intersection, and dragging over to there.
| | 05:48 | I see my Smart Guides and I can
release my mouse, and I will do that at this
| | 05:52 | intersection, making yet another tab.
| | 05:55 | Again, it doesn't matter how long
it is and here is my fourth tab.
| | 06:00 | So as you can see, it was worth
setting up all those Guides to make it so
| | 06:06 | easy to draw the tabs.
| | 06:07 | Now, I want to cut off
the area here at the bottom.
| | 06:10 | To do that, I am going to go back to
the Options bar and I'm going to click the
| | 06:14 | Subtract From icon, and then I am
just going to come and drag a shape that
| | 06:21 | covers only the bottoms of the
tabs, and I will release by mouse.
| | 06:26 | Then I'm going to get the Black Arrow
tool, the Path Selection tool, which
| | 06:31 | offers me a Combine button in the Options bar.
| | 06:34 | I am going to click that Combine button,
and I have now cut off the bottom of the tabs.
| | 06:40 | If you want to see how this looks
without the Guides, at any time you can press
| | 06:44 | Command+Semicolon on a Mac,
or Ctrl+Semicolon on a PC.
| | 06:48 | So that's what we have so far.
| | 06:51 | Now we are going to make some inner tabs.
| | 06:53 | The first thing we are going to do
is to select a color by clicking the
| | 06:56 | foreground color box, and we will
take a very light blue for this, almost a
| | 07:03 | white, and we will say OK.
| | 07:05 | Now I am going to select my Rounded
Rectangle tool and I am going to make sure
| | 07:10 | that in the Options Bar, the New Shape
layer icon is selected because I would
| | 07:14 | like each one of these inner tabs
to be on a separate shape layer.
| | 07:19 | That's so that if I decide I want to
make rollovers out of these, I can treat
| | 07:22 | each one separately, perhaps
changing its color or changing some other
| | 07:27 | characteristic of it, without
affecting the other inner tabs.
| | 07:30 | So I will come in and I will I use the
Guides to drag an inner tab right here,
| | 07:37 | and when I see the Guides turned
pink, then I will release my mouse.
| | 07:41 | Those are the Smart Guides.
| | 07:42 | That gives me Shape 2, which is this inner tab.
| | 07:46 | Now I will make another inner tab on the
second button by clicking-and-dragging,
| | 07:51 | same on the third button,
and on the fourth button.
| | 08:00 | Now, I want to cut off the
bottom of each one of these tabs.
| | 08:03 | So I am going to go back to click on
the Shape 2 layer, which is the leftmost
| | 08:07 | inner tab, and it's very important, and
here is something that may trip you up,
| | 08:11 | to click on the Vector Mask.
| | 08:13 | If you don't click right on the Vector
Mask so that it has that border around
| | 08:17 | it, you won't be able to cut
off the bottom of the button.
| | 08:19 | Now, I am going to go over to the
Toolbox, and I'm going to choose the
| | 08:23 | Regular Rectangle tool.
| | 08:24 | I will go to the Options Bar, and I am
going to click the Subtract From icon
| | 08:29 | there and then I will come in and using
the Guides, I'm going to start with the
| | 08:34 | second horizontal Guide from the
bottom and click-and-drag to select or to
| | 08:39 | identify the bottom of this first inner tab.
| | 08:43 | Then I'm going to select the Path
Selection tool, the Black Arrow, and I
| | 08:47 | will click the Combine button in
the Options bar, and that cuts off the
| | 08:50 | bottom of that tab.
| | 08:51 | I am going to repeat this
on each of the other tabs.
| | 08:55 | I will go to Shape 3 and
click on the Vector Mask there.
| | 08:58 | I'll get the Rectangle tool and then
I'm going to click-and-drag using the
| | 09:03 | Guides to identify the bottom of that inner tab.
| | 09:06 | I will get the Black Path Selection
tool and click the Combine button.
| | 09:12 | On the next button, I will click on
the Vector Mask on Shape 4, I will get my
| | 09:16 | Rectangle tool, click-and-drag, get
the Black Arrow tool, and click Combine.
| | 09:24 | On the last button, I will click on the
Vector Mask of Shape 5, get my Rectangle
| | 09:28 | tool, click-and-drag, get the Path
Selection tool and click Combine.
| | 09:35 | Now, I'm going to press Command+
Semicolon, that's Ctrl+Semicolon on a PC, so we
| | 09:41 | can see what we have.
| | 09:43 | And I will click that Vector Mask on the last
Shape layer, so we can see without the paths.
| | 09:48 | Now, let's finish up this Tab Navigation
Bar by adding a drop shadow to the outer tabs.
| | 09:54 | I will select Shape 1, and then I will go to
the fx button at the bottom of the Layers panel.
| | 09:59 | I will choose Drop Shadow, and in the
Layer Styles dialog box, I am going to
| | 10:04 | make this shadow a lot more subtle
by reducing its Opacity to about 30,
| | 10:10 | reducing its Distance, so it's closer
in to the Navigation Bar, and then by
| | 10:15 | increasing its Size.
| | 10:23 | Then I'll click OK.
| | 10:26 | All that's left to do now is to add text.
| | 10:28 | So I will click on the very top layer so
my text comes in above all of the buttons.
| | 10:33 | I will get the Horizontal Type tool.
| | 10:35 | I am going to accept all of the
settings in the Horizontal Type Tool's Options
| | 10:39 | Bar except for the Color.
| | 10:41 | I will click on the Color field, and I
am going to choose a much darker color
| | 10:45 | for the text and click OK.
| | 10:47 | Then I'm going to click on the
very first button, and type 'products'.
| | 10:51 | I am going to click the checkmark in
the Options Bar to accept that type edit,
| | 10:57 | and then I am going to duplicate the
products layer by dragging it to the New
| | 11:02 | layer icon at the bottom of the Layers panel.
| | 11:04 | I will select the Move tool, and I will
move to the right, and this is just the
| | 11:09 | same thing that we've done in
other movies in this chapter.
| | 11:12 | Now, I have text on the second button.
| | 11:14 | I will go to the Layers panel, and
double-click the T icon on the products Copy
| | 11:19 | layer, and instead of products,
I am going to type 'about us'.
| | 11:22 | Then I will click the
checkmark in the Options Bar.
| | 11:27 | I will duplicate the about us layer by
dragging it to the New layer icon to the
| | 11:30 | bottom of the Layers palette.
| | 11:32 | With the Move tool, I will drag that
new text over to the third button, I'll
| | 11:36 | double-click the T icon on the about
us copy layer and I'll type 'our stores'.
| | 11:41 | Then I will click the checkmark in
the Options Bar, and I may have to move
| | 11:47 | our stores over to the left a little
bit because that bit of text has more
| | 11:51 | letters than about us.
| | 11:53 | Then I'm going to duplicate the our
stores type layer by dragging it to the New
| | 11:57 | layer icon at the bottom of the Layers
panel, and with the Move tool, I will
| | 12:01 | drag that last bit of text
over to the fourth button.
| | 12:05 | I'll double-click the T icon on the
our stores copy layer, and I will type
| | 12:09 | 'contact us', and then I will click
the checkmark in the Options Bar.
| | 12:14 | So that's how you can use Shape
layers and Guides, and Rulers to create a
| | 12:20 | perfectly aligned Tab
Navigation Bar like this one.
| | 12:24 | It will take you a little bit of time
to do your calculations with pen and
| | 12:27 | paper, and maybe a calculator to
figure out how many pixels you are going to
| | 12:31 | allocate to each tab, and how many
pixels you want in between each tab.
| | 12:35 | But once you have done that and dragged
out your Guides, it's a simple matter to
| | 12:39 | create your Tab Navigation Bar,
as we've done here.
| | Collapse this transcript |
| Creating gel buttons| 00:00 | One of the most popular
buttons on the web is the Gel Button.
| | 00:04 | You can make a Gel Button in Photoshop
CS3 using a rounded rectangle shape layer
| | 00:10 | along with a collection of Layer Styles.
| | 00:13 | Let's select the Rounded Rectangle tool
in the Toolbox and with the Radius set
| | 00:17 | to 35 pixels to round the edges of this
shape, I'm going to come in and draw out
| | 00:23 | a pill-shaped button.
| | 00:25 | I want to bring the button up off the
page using a combination of highlights and
| | 00:30 | shadows and glows and bevels.
| | 00:33 | So we'll go to the Layers panel and
we'll click on the vector masks so that
| | 00:36 | we're not looking at the path around
the button and then we'll go down to
| | 00:40 | fx icon at the bottom of the Layers
panel and we'll choose Color Overlay as
| | 00:45 | our first layer style.
| | 00:46 | We don't want this button to be red,
so I'll click in the color box here and
| | 00:50 | I'll choose a green.
| | 00:52 | I'm going to choose something
light and then I'll click OK.
| | 00:58 | Now I'm going to add a Satin layer
style on top of the Color Overlay.
| | 01:02 | So I'll check Satin and I really
don't like the default settings.
| | 01:07 | In order to bring up those settings,
I'm going to click on the word 'Satin' and
| | 01:12 | that brings up the Satin settings
over here in the Layer Style dialog box.
| | 01:15 | First, I'm going to go to the Blend mode
field and I'm going to change the color
| | 01:19 | to the right of that field.
| | 01:21 | I'll go down to the green area and
I'm going to choose something a little
| | 01:26 | brighter than the green of the
button and then I'll click OK.
| | 01:33 | I'm going to change the Blend mode or
the way that this screen interacts with
| | 01:36 | the colors below from Multiply to
Overlay and then I'm going to change the Angle
| | 01:42 | of this effect so that it goes straight across.
| | 01:45 | I'll make this 90 degrees.
| | 01:46 | I'm going to increase the Distance of the
effect and I'll increase its Size as well.
| | 01:54 | The Contour field affects
the shape of any layer style.
| | 01:58 | I'll click the arrow there and I
usually just cycle through these, choosing
| | 02:02 | the one that I like.
| | 02:03 | I happen to know that I want this ring
effect here so I'll choose that and I'll
| | 02:07 | click off of this menu to close it and
then I'm going to check Anti-aliased to
| | 02:12 | blend the edges of this effect with the button.
| | 02:15 | So far, we have a very subtle effect.
| | 02:17 | Let's add some more layer
styles to see if we can get some more
| | 02:20 | dimensionality to this button.
| | 02:22 | I'll add a Bevel and Emboss layer style
and that has an effect right away, but
| | 02:26 | it's not exactly the one I want though.
| | 02:28 | So I'm going to go in and
modify its options as well.
| | 02:32 | I'll click on Bevel and Emboss and
then I'm going to check Contour so that I
| | 02:37 | can get some of this shading in my button and
then I'll go over to the options on the right side.
| | 02:43 | Here, I'm going to increase the Size
of this Bevel a little bit and I'm also
| | 02:48 | going to soften it a bit.
| | 02:50 | I'll leave the Style and Technique and
Depth and Direction at their defaults.
| | 02:54 | Down in the Shading area, I want to
make sure the Angle of this effect is set
| | 02:58 | to 90 degrees as well.
| | 02:59 | I also want its Altitude to be
fairly high. It's set up at 70.
| | 03:03 | If yours is lower, you can
increase it to around 70.
| | 03:07 | I'm going to check Anti-aliased so
that the Contour blends in more with the
| | 03:11 | button. And this is important.
In the Highlight mode field,
| | 03:14 | I'm going to take the Opacity and I'm
going to raise it all the way up to 100%,
| | 03:20 | and then I'm going to take the Opacity
of the Shadow mode and move that down to
| | 03:24 | 0%, and now you can start to see that
shiny effect on the button that's going to
| | 03:30 | make it look like a Gel Button.
| | 03:32 | The next thing we're going
to do is to add an Inner Glow.
| | 03:35 | So I'm going to check Inner Glow and
I'm going to select Inner Glow to change
| | 03:39 | its options over here on the right.
| | 03:41 | I'm going to click on the Color,
because I don't want a yellow Inner Glow and
| | 03:45 | I'm going to select a green, a darker
green than we see here and I'll click OK.
| | 03:52 | I'm going to change the Blend mode of
the Inner Glow effect from Screen, which
| | 03:57 | lightens it, to Multiply, which darkens it.
| | 04:01 | I'll go down to this middle section and
I'll increase the Choke of this effect.
| | 04:05 | I'm going to bring it up much higher
than it was by default to move that green
| | 04:12 | in and then I'm also going to
increase the Size of the effect a bit.
| | 04:17 | Now I'm going to add an Inner Shadow by
checking that layer style and right away
| | 04:22 | you see a difference here.
| | 04:23 | The Inner Shadow has an
effect on the top of the button.
| | 04:26 | I'll turn that off so you can
see and then turn it back on.
| | 04:30 | I'm going to select Inner Shadow and I'm going
to change its Color from black to a dark green.
| | 04:39 | I'll click OK and I'm going to come in
and I'm going to increase the Choke of
| | 04:43 | this effect and as I do you
can see a changing in the button.
| | 04:51 | I'll also try increasing the Size and
now our button is starting to really get
| | 04:55 | that nice gel look to it.
| | 04:58 | It's caused by the
Highlights and Shadows and the Bevel.
| | 05:01 | There's one more thing
that we can do to this button.
| | 05:04 | We can add an Outer Glow to it.
| | 05:06 | So I'm going to check Outer Glow and
I'm going to select Outer Glow and maybe
| | 05:12 | I'll increase the Size of the glow a
bit and I'll lower its Opacity, so it's
| | 05:17 | not quite so bright.
| | 05:23 | I could also come in and change the
color of the glow from yellow, by clicking in
| | 05:27 | the color field, to a greener color
and then I'll click OK and I'll click OK
| | 05:35 | again and there we have our gel button.
| | 05:38 | As I mentioned, you can change any of
the effects that you see on your Shape
| | 05:42 | layer by simply double-clicking one of the
effects and making a change in its dialog box.
| | 05:48 | I'll click OK again.
| | 05:54 | So that's how you can use what you've
learned about Shape layers and Layer
| | 05:58 | Styles to make a pretty complex
really great-looking gel button in
| | 06:03 | Photoshop CS3.
| | Collapse this transcript |
| Navigation bars with icons| 00:00 | Another useful kind of navigation is
iconic navigation, which contains small
| | 00:05 | graphics that represent the content of a button.
| | 00:08 | This kind of navigation is
particularly helpful if you have an international
| | 00:12 | audience, because then you don't have to
use text, but you do have to be careful
| | 00:16 | to use simple icons and ones that are
visually readable and that are meaningful
| | 00:21 | to a broad audience.
| | 00:22 | Let's see if we can find those sorts
of icons to put on this navigation bar.
| | 00:27 | We'll start by going to the Toolbox
and clicking in the Shape tool slot and
| | 00:32 | selecting the Custom Shape tool.
| | 00:34 | Then we'll go to the Options bar and
we'll click in the Shape field and we'll
| | 00:39 | see what kind of shapes we have to choose from.
| | 00:41 | I don't see any here that really suit my
categories, which are CONTACT and STORES
| | 00:48 | and ABOUT and PRODUCTS,
| | 00:51 | so I'm going to click the arrow on
the right side of this menu and go down
| | 00:55 | in the pop-up menu and choose All, so
that I can see all of the shapes that
| | 01:00 | come with Photoshop.
| | 01:02 | I'll click OK at this warning and that
replaces that small set of shapes with
| | 01:08 | this very long set of shapes and I can
see them all by clicking on the bottom
| | 01:12 | right corner of my Shapes menu and pulling down.
| | 01:15 | So you see we have animals, we have
plants, we have puzzle pieces, and here I
| | 01:23 | see something that I think will work
for the CONTACT icon, this black envelope.
| | 01:28 | So I'm going to click on the black
envelope and then click back on the Options
| | 01:32 | bar to close the Shape menu.
| | 01:34 | Then I'll come into my document and I'm
going to draw a black envelope and I'll
| | 01:39 | use a the Smart Guides so that I
don't go wider than the word CONTACT.
| | 01:42 | Then I'm going to get my Move tool
and I'm going to move that where want
| | 01:47 | it, above the word.
| | 01:48 | Now I'm going to look for
another icon for the STORES button.
| | 01:51 | So I'm going to go back to the Custom
Shape tool and I'm going to click in the
| | 01:55 | Shape field and I'll scroll down
further and see what's here. Ah!
| | 01:59 | Here's a shopping cart, perfect for STORES.
| | 02:02 | So I'll click back in the Options bar
and I want to make sure that Create a New
| | 02:08 | Shape layer is selected here.
| | 02:09 | I'm going to click off it and then back on.
| | 02:13 | Then I'm going to come in and this time
I'm going to hold the Shift key, and I'm
| | 02:17 | going to click-and-drag, and I'm
holding the Shift key so that I retain the
| | 02:21 | proportions of this original shopping
cart, because I don't want to distort it.
| | 02:25 | Then it's important that I release my
mouse before releasing the Shift key or I
| | 02:29 | will distort the shape.
| | 02:31 | Let me click on the vector mask there
so that you can see that shopping cart.
| | 02:34 | Then I'll get my Move tool and
I'm going to move that into place.
| | 02:39 | Now for ABOUT US and PRODUCTS I didn't
see anything in that menu of Shapes that
| | 02:43 | come with Photoshop that would do. That's okay.
| | 02:47 | We can create our own custom shape very
easily and I'd like to show you how now.
| | 02:51 | Let's open a new file from which we're
going to create an icon for the ABOUT US button.
| | 02:55 | Open teacup.psd from the
Chapter 09 Exercise Files folder.
| | 03:00 | There you'll see a single layer file
with this teacup on a green background.
| | 03:05 | Our first task is to select the teacup
and to do that I'm going to show you a
| | 03:09 | wonderful new selection tool.
| | 03:11 | It's going to save you lots of time.
| | 03:14 | It's here in the Toolbox and it's
called the Quick Selection tool.
| | 03:18 | What you do with this tool is you just
come in and you click-and-drag over a
| | 03:23 | color and as you go, it starts
selecting all of the colors over which you're
| | 03:28 | dragging and those within the same
range and I can let go of my mouse and the
| | 03:33 | next time I click, it
automatically adds to the selection.
| | 03:36 | I don't have to tell it to add to the
selection and let's just say I went too
| | 03:41 | far and I selected some of the green there.
| | 03:43 | In order to delete that area from the
selection, I would just hold down the
| | 03:47 | Option key on a Mac, or the Alt key on a PC and
click on that green area and it would go away.
| | 03:54 | Now sometimes you've to change your
brush size a little and go back and forth a
| | 03:58 | bit, but it really is a useful tool.
| | 04:01 | It makes selections so much easier than
they are with any other tool and at least
| | 04:06 | selections that are against a high
contrast background, like this one.
| | 04:09 | Now that we have this teacup selected,
we're going to make it into a vector-based path.
| | 04:15 | To do that I'm going to open the Paths
palette by going to Window and then down to Paths.
| | 04:22 | Here's my Paths palette.
| | 04:23 | Let me close the Layers palette for
a minute and in the Paths palette, I'm
| | 04:27 | going to go to the bottom and I'm
going to click Make Path From Selection,
| | 04:32 | this icon right here.
| | 04:34 | That makes a work path.
| | 04:36 | Then I'm going to double-click the work
path and I'm going to save that work path.
| | 04:40 | I could just use its default name and say OK.
| | 04:43 | With teacup.psd still selected, I'm
going to go to the Edit menu and I am going
| | 04:48 | down to Define Custom Shape.
| | 04:50 | I'll call this my 'teacup' and I'll click OK.
| | 04:55 | Now if I select the Custom Shape tool
in the Toolbox and I go to the Shapes and
| | 05:00 | I scroll all the way to the bottom,
there, I find my brand-new custom shape
| | 05:04 | created from the selection in this photograph.
| | 05:08 | So we can use this custom shape in our
navigation bar by selecting it and then
| | 05:13 | clicking back in the Options bar,
coming into icon_buttons.psd again, and I'm
| | 05:19 | going to hold the Shift key this time
to constrain proportions as I drag out
| | 05:25 | the icon of a teacup.
| | 05:26 | I'll get my Move tool and I'll move
this one into place too, aligning it with
| | 05:31 | the other buttons and with ABOUT US.
| | 05:36 | Let me go to the Layers palette now,
which I'll open, and I'll click on that
| | 05:40 | vector mask to show you how that icon looks.
| | 05:43 | Now it doesn't have to be perfect, because
it's quite small, so I think that will do nicely.
| | 05:47 | Now let's make one more icon
for the PRODUCTS button there.
| | 05:50 | I'm actually going to go and close
teacup.psd without saving and I'm going to
| | 05:56 | open another file, teapot.psd.
| | 06:00 | Here we have a file with two layers,
the teapot is already on its own layer.
| | 06:05 | So here's shortcut for selecting an
item that is on its own layer against a
| | 06:10 | transparent background, like this one is.
| | 06:12 | First, let me show you that that's the
case by turning the Background off and
| | 06:16 | indeed, you see the teapot
is on this transparent layer.
| | 06:19 | It does have this funny shadow stuck on
it, but we'll deal with that in a moment.
| | 06:24 | So the shortcut to select the content
on a transparent layer is to hold the
| | 06:28 | Command key on a Mac, or the Control key
on a PC and click directly on the layer
| | 06:33 | thumbnail, not on the blue bar, but on
the layer thumbnail, and that selects the
| | 06:38 | entire content of that layer.
| | 06:40 | Now I want to get rid of
this shadow at the bottom.
| | 06:42 | So all I'm going to do is to get that
Quick Selection tool, move over the shadow
| | 06:48 | and hold the Option key and then click-and-drag.
| | 06:52 | If you go too far, as I did, you can
just come right back in and click with the
| | 06:57 | Plus sign and then you can Option+Click again
and you just keep working it until you
| | 07:02 | get rid of the shadow.
| | 07:04 | That didn't take long and it wasn't very hard.
| | 07:06 | So now that we've that teapot
selected, we'll go to our Paths palette and
| | 07:10 | we'll click at the Make Path From
Selection icon at the bottom of the Paths palette.
| | 07:15 | That makes a work path, which
we'll double-click and we'll say OK.
| | 07:19 | Now that we have a path around this
teapot, we can go to Edit>Define Custom
| | 07:25 | Shape and we'll call this
one 'teapot. Click OK.
| | 07:31 | I'll close the teapot image,
| | 07:33 | don't have to save it, and
go back into my icon_buttons.
| | 07:37 | Let me close my layers so it's not on
the way and now I'm going to get my Custom
| | 07:43 | Shape tool, go to the Shape picker,
open it and at the bottom I will find my
| | 07:48 | brand-new teapot icon that I just made.
| | 07:52 | Now I'm going to click back on the
Options bar to close the Shape picker.
| | 07:57 | I'm going to come into the
icon_buttons.psd document, hold the Shift key to
| | 08:01 | constrain proportions and drag out a
teapot and then I'll get my Move tool and I'll
| | 08:10 | move that into place.
| | 08:11 | Now because these are shapes, any of
them can be made smaller or bigger by
| | 08:16 | selecting it with the Direct
Selection tool and manipulating it further,
| | 08:21 | but I like the way these look right now.
| | 08:23 | I'm going to open the Layers palette and
click off that layer and then close the
| | 08:27 | Layers palette so you can see
my page with all of its buttons.
| | 08:31 | Now that you know how to create
custom shapes, go out and create some
| | 08:34 | custom shapes of your own.
| | 08:36 | You can do it from any item that you
can select and then make into a path and
| | 08:41 | into a custom shape.
| | Collapse this transcript |
|
|
10. Optimizing Transparent GraphicsUnderstanding web graphic transparency| 00:00 | In this chapter, we're going to learn how to
optimize transparent graphics for the web.
| | 00:05 | There are several challenges when
you're optimizing transparent web graphics.
| | 00:08 | One has to do with the file format.
| | 00:10 | Not all web-friendly
formats support transparency.
| | 00:14 | So for example, if you're
optimizing in the JPEG format, you can't have
| | 00:18 | transparent pixels in your JPEG.
| | 00:19 | They just won't display on the web.
| | 00:21 | So later in this chapter, we'll learn a
way to simulate the look of transparency
| | 00:25 | when we're optimizing a JPEG.
| | 00:27 | The most popular file format for a
transparent web graphics is GIF and that's
| | 00:31 | what we'll be using here in this chapter.
| | 00:33 | Alternatively, you could optimize a
transparent web graphic as a PNG 8, which as
| | 00:37 | we learned in the chapter on
optimization, is very similar to GIF.
| | 00:41 | Another alternative is to optimize as
PNG 24, but unfortunately, not all popular
| | 00:46 | web browsers support transparency in a
PNG 24 image, so we won't be talking much
| | 00:51 | about that in this chapter.
| | 00:52 | The advantage of using transparent web
graphics is that they avoid the otherwise
| | 00:56 | rectangular nature that's inherent in
any graphic and that'll offer visual
| | 01:01 | variety to your webpages.
| | 01:02 | Once you've optimized an image in a
format that honors transparency, you can
| | 01:06 | place that image against a solid color
background or, in some cases, successfully
| | 01:11 | against a patterned background like
the one you see here without the image
| | 01:14 | appearing to be rectangular.
| | 01:16 | Another challenge of optimizing a
transparent web graphic is to keep its
| | 01:20 | edges looking smooth.
| | 01:22 | When you're working on a graphic that's
transparent in Photoshop its edges often
| | 01:26 | do look smooth. That can be because it
has a soft shadow behind it or a glow
| | 01:30 | around it or more commonly, because
the edges of a graphic are Anti-aliased.
| | 01:34 | Anti-aliasing means the use of pixels of
differing levels of transparency, as you see here.
| | 01:41 | Putting at the edge of a graphic some
pixels that are completely opaque and then
| | 01:45 | others that fade out to different
levels of opacity make the edges appear to be
| | 01:49 | smooth and round even though
they're made up of square pixels.
| | 01:52 | Unfortunately, even though a
transparent graphic may look like this when you're
| | 01:56 | working on it in Photoshop, when you
save it as a GIF, or as a PNG8, you'll lose
| | 02:01 | those multiple levels of transparency.
| | 02:04 | That's because the GIF and PNG8
formats support only one-bit masking and
| | 02:08 | that means that every pixel is
either completely opaque or completely
| | 02:12 | transparent, nothing in between.
| | 02:14 | This can make a transparent graphic
that's optimized as a GIF or as a PNG8 have
| | 02:18 | a jagged edge like this when placed on
a page background and this isn't usually
| | 02:23 | the look that you want.
| | 02:24 | So what can you do about it?
| | 02:25 | Fortunately, Photoshop offers a solution.
| | 02:27 | In the movies in this chapter, we'll
learn how to use the Matte feature in
| | 02:31 | Photoshop Save for Web Window to add a
solid color along the edge of a GIF or a
| | 02:36 | PNG8 that'll blend in with the color
of the page background against which we
| | 02:40 | plan to put our optimized graphic and
the result will be something like this, a
| | 02:45 | graphic saved as a GI,F or as a PNG8
that appears to have a smooth edge in a web
| | 02:50 | browser and we'll even see in these
movies that you can get the same kind of
| | 02:53 | smooth look when you're starting with
a transparent graphic that has a soft
| | 02:57 | shadowed edge or a soft glow.
| | Collapse this transcript |
| Optimizing transparent graphics| 00:00 | In this movie, we're going to learn how
to optimize a transparent image as a GIF.
| | 00:04 | The same principles I'll show you here
would also apply if we optimized as a PNG 8.
| | 00:09 | If you're working along with me, open chai.psd
from the chapter10 Exercise Files folder.
| | 00:14 | This is a graphic with a smooth
edge against a transparent background.
| | 00:18 | The edge is smooth because the
graphic has been anti-aliased,
| | 00:21 | in other words, it has pixels of
different levels of transparency at its edge,
| | 00:25 | which gives the illusion
of it being smooth or round.
| | 00:28 | To start optimizing this image, we
will go to the File menu and we'll choose
| | 00:32 | Save For Web & Devices.
| | 00:35 | In the Save For Web & Devices window,
I'm going to click the 2-Up tab, so I see
| | 00:39 | two views of the image.
| | 00:40 | The one on the left is the
original Photoshop document, the PSD.
| | 00:44 | The one on the right is a preview of how
the image will look when optimized as a GIF.
| | 00:48 | The first thing you'll notice is that
the GIF preview has a white background.
| | 00:52 | There is a simple reason for this.
| | 00:53 | If you move over to the controls on the
right, you'll see a Transparency field.
| | 00:57 | When you're optimizing an image that
you want to retain its transparency, you
| | 01:01 | must always check this box.
| | 01:03 | So I'm going to check Transparency, and
now we can see our preview against the
| | 01:07 | gray and white checkerboard that
represents Transparency in Photoshop.
| | 01:10 | The next thing you may notice is that
the GIF preview has jaggedy edges but the
| | 01:15 | Photoshop document has smooth edges.
| | 01:17 | Let's zoom in to see that a little better.
| | 01:19 | I'm going to go to the abbreviated
Toolbox in the Save For Web & Devices window
| | 01:23 | and click on the Zoom tool and then I'll
click on the Photoshop side and zoom in
| | 01:27 | and here you can see the multiple
levels of transparent pixels at the edge of
| | 01:33 | this graphic in the original PSD file.
| | 01:35 | Here we have fully opaque pixels
and outside the graphic, we have fully
| | 01:39 | transparent pixels represented by the
checkerboard, and in between we have
| | 01:43 | pixels of varying levels of opacity,
fading out to our transparency.
| | 01:47 | That's the anti-aliased edge,
which gives the illusion of smoothness.
| | 01:51 | Now, let's look at the GIF side.
| | 01:52 | I'll click there and we can see that
we have jaggedy edges on all parts of
| | 01:57 | this graphic, because each pixel in the GIF is
either fully opaque or, out here, fully transparent.
| | 02:03 | There are no levels of transparency in between.
| | 02:06 | The GIF file format just doesn't
support multi-level transparency.
| | 02:09 | Let's set up a solid color background
for this GIF so that we can preview how
| | 02:14 | the GIF will look in a web
browser with this kind of an edge.
| | 02:17 | The first thing I'm going to do is
move over to the abbreviated Toolbox again
| | 02:21 | and click on this square of color,
which happens to be set to be black.
| | 02:25 | That opens the Color Picker.
| | 02:26 | Here in the Color Picker, I'm going
to choose a light yellowish green as
| | 02:30 | my Eyedropper Color.
| | 02:31 | From the Hue slider, I'll click on
the light yellow green area and then I'm
| | 02:35 | going to pick a color in the Color
field on the left and it really doesn't
| | 02:39 | matter exactly which color you choose, so
long as it's a light one, and I'll click OK.
| | 02:44 | Now, I'm going to set up a web page
against which to preview this GIF.
| | 02:49 | I'm going to go to the arrow at the
top right of the Save For Web & Devices
| | 02:52 | window, click and choose Edit Output Settings.
| | 02:55 | In the Output Settings dialog box,
I'll click on the second menu from the top
| | 02:59 | and I'm going to choose Background.
| | 03:00 | Here, I want to make sure that I have
View Document as Image selected so that
| | 03:05 | Photoshop knows that we want this
graphic to be a foreground image rather than a
| | 03:09 | repeating background tile.
| | 03:11 | Next, I'm going to choose a
color for our web page background.
| | 03:13 | I'll go to the Color field
and click on the arrow there.
| | 03:16 | Instead of None, I'm going to choose
Eyedropper Color and that's going to give
| | 03:20 | me a webpage against which to preview
this graphic that is the same color as
| | 03:25 | this Eyedropper Color that I chose earlier.
| | 03:27 | So I'll select Eyedropper
Color and then I'll click OK.
| | 03:32 | Now, let's preview the image against
that color by moving to the Preview in
| | 03:36 | Browser icon at the bottom of the Save
For Web & Devices window and clicking,
| | 03:40 | and that opens the image
in our default Web browser.
| | 03:43 | Now you can see the jaggedy edge of the
graphic against our light green background.
| | 03:48 | And if I zoom in, you can
see it even more closely.
| | 03:51 | That's not the look that
I want with this graphic.
| | 03:53 | I want it to look smooth.
| | 03:54 | So let's go back into Photoshop Save
For Web window and I'll show you how you
| | 03:57 | can create the illusion of
smoothness in a transparent GIF.
| | 04:03 | I've closed my web browser and I'm going to
click back on the Save For Web & Devices window.
| | 04:08 | Now, I'm going to move to the Matte field.
| | 04:10 | The Matte is the secret
sauce that will make this work.
| | 04:13 | Because the Matte is set to None, we
see jaggedy edges in the GIF preview.
| | 04:17 | I'm going to click the arrow on the
Matte field and I just want to show you what
| | 04:20 | happens if I choose a very
obvious color here, like black.
| | 04:24 | Notice that now in the GIF preview, the
edges of the graphic have turned black.
| | 04:28 | If we're going to put this optimized
GIF against a black web page, it would
| | 04:32 | now blend in perfectly.
| | 04:33 | But in this case, we're going to put the
graphic against a light green background.
| | 04:37 | So here is how we can choose a Matte color
that will blend perfectly with our light green.
| | 04:42 | I'll click the arrow on the Matte
filed again, and I'm going to choose
| | 04:45 | the Eyedropper Color.
| | 04:46 | The Eyedropper Color is way over here,
this light green, the very same light
| | 04:50 | green that we used as the web page background.
| | 04:53 | So with the Eyedropper Color selected,
in the Matte field, the edges of our
| | 04:57 | graphic now turn light green and when I
go to the Preview in Browser button at
| | 05:01 | the bottom of the Save For Web &
Devices window and click there, I can preview
| | 05:06 | the graphic against a light green
background, now with the illusion that the
| | 05:11 | graphic has a smooth edge.
| | 05:12 | What we've done is camouflaged the
jaggedly edge of the GIF with the same green
| | 05:17 | color in the Matte field as we
used for our page background.
| | 05:20 | I'm going to minimize the web browser
again and let's click again on our Save
| | 05:25 | For Web & Devices window.
| | 05:26 | At this point, what I would normally do
is continue to tweak my GIF settings, my
| | 05:31 | Color Reduction palette, the number of
Colors, the amount of Lossy compression
| | 05:35 | to try to get the file size down
and keep the image looking good.
| | 05:38 | Then I would Save the optimized GIF.
| | 05:40 | I'll show you how to do all that shortly.
| | 05:42 | But for now if you're following along,
just click Cancel because I want to show
| | 05:45 | you something else before we save.
| | 05:47 | And that is how to prepare a
transparent GIF to be set against a patterned
| | 05:51 | web page background.
| | Collapse this transcript |
| Optimizing transparent graphics on a patterned background| 00:00 | In the last movie, we took a look at
how to optimize a transparent graphic so
| | 00:04 | that it would blend nicely on a
solid color webpage background.
| | 00:08 | In this movie, let's see what
happens if instead of a solid color page
| | 00:12 | background, we want to use
a patterned page background.
| | 00:15 | I have opened chai.psd again from the
chapter10 Exercise Files folder, along with
| | 00:20 | another image from that folder, cup_tile.gif.
| | 00:23 | Cup_tile.gif is a GIF image that we're
going to use as a repeating background tile.
| | 00:29 | We learned about repeating
background tiles back in the chapter
| | 00:31 | called Backgrounds.
| | 00:32 | The first thing I'm going to do is to
sample the primary color from cup_tile.gif.
| | 00:37 | To do that, I'm going to select the
Eyedropper tool in the Toolbox and then I'm
| | 00:41 | going to click on this darker green.
| | 00:43 | That puts the green in the Foreground Color
Box in the Toolbox, so we want to remember that.
| | 00:48 | Now, we can close cup_tile.gif. That's all
we needed it for was to sample its color.
| | 00:53 | Back in chai.psd, I'm going to
optimize this file for the web.
| | 00:57 | So I'm going to File and Save For
Web & Devices and as in the last movie,
| | 01:01 | the first thing I'm noticing about the that
the GIF preview is it has a white background.
| | 01:05 | We know that that's because transparency
needs to be checkedmarked on the right.
| | 01:09 | So we'll click in the Transparency box
and now we can see the transparent pixels
| | 01:13 | around our chai illustration.
| | 01:15 | If you look closely, you will also
notice that the chai illustration has jagged
| | 01:19 | edges here in the preview.
| | 01:21 | That's because are Matte color is set
to None, as we learned in the last movie.
| | 01:25 | What I'd like to do now is to set
up that cup_tile image as a repeating
| | 01:29 | background so I can preview this
illustration on top of that background.
| | 01:33 | So I'm going to go to the arrow in the
top right of the Save For Web & Devices
| | 01:37 | window, click and choose Edit Output Settings.
| | 01:40 | In the Output Settings dialog box, I'm going
to go to the second menu and choose Background.
| | 01:45 | As in the last movie, I'm going to
set this Image to be a foreground image
| | 01:49 | rather than a repeating background.
| | 01:51 | And rather than going to the Color
field and choosing a solid color page
| | 01:54 | background, I'm going to go
to this Background Image area.
| | 01:58 | I'm going to go and choose the
image that I would like to have as my
| | 02:01 | repeating background.
| | 02:02 | If you have anything in this area, just
select and delete it and click Choose.
| | 02:07 | In the Choose Background Image dialog
box, I'm going to navigate to my Desktop,
| | 02:13 | where I have my Exercise Files folder.
| | 02:18 | In there, I have my chapter10_transparency
folder and I'm going to select
| | 02:22 | cup_tile.gif, the image that
we sampled just a moment ago.
| | 02:26 | I'll click Open and now I'll click OK
and that closes the Output Settings dialog
| | 02:30 | box and brings me back
to Save For Web & Devices.
| | 02:33 | Now, let's preview this image
against our repeating background.
| | 02:37 | I'll click the Preview in Browser
icon at the bottom of the Save For Web &
| | 02:41 | Devices window and that
opens my default web browser.
| | 02:44 | Here you can see that image
repeating over and over as the background.
| | 02:48 | And if you look closely at the
transparent GIF that is sitting on top of that
| | 02:52 | background, you can see that
it does have a very jagged edge.
| | 02:55 | Let me zoom in to show you that closer up.
| | 02:58 | There is the jagged edge and I really
would like this edge to look smooth and to
| | 03:02 | appear to blend into that repeating background.
| | 03:04 | To do that, we'll go back to
the Save For Web & Devices window.
| | 03:11 | Here in Save For Web & Devices, I'm
going to rely on the Matte field again to
| | 03:15 | blend my transparent GIF in
with this repeating background.
| | 03:18 | I'll click on the arrow to the right of
the Matte field and this time, I'm going
| | 03:22 | to choose, not the Eyedropper Color as
I did in the preceding movie to match a
| | 03:26 | solid color background, rather, I'm
going to choose Foreground Color.
| | 03:30 | Foreground Color refers to the
Toolbox outside of the Save For Web &
| | 03:34 | Devices window where we had sampled
from our cup_tile.gif that beige color
| | 03:39 | as our foreground color.
| | 03:40 | So I'll select foreground color and if
you have a good eye, you can see along
| | 03:44 | the edge of the cup and the rest of
this design, there is now that beige color
| | 03:49 | that we sampled from cup_tile.gif.
| | 03:51 | Let's zoom in to see that a little better.
| | 03:55 | There it is, just along the edge.
| | 03:56 | Now, let's preview our transparent
GIF against that repeating background.
| | 04:00 | I'll click the Preview in Browser icon again at
the bottom of the Save For Web & Devices window.
| | 04:05 | That opens the default browser and
now when we look at our transparent GIF
| | 04:09 | against this repeating background,
the edge looks nice and smooth.
| | 04:13 | The secret here is that we're using a
background that has one primary color,
| | 04:17 | this greenish color and just thin lines
of another not very contrasting color.
| | 04:22 | I'm going to zoom in and you can see
here that right along that edge, there is a
| | 04:28 | little gap wherever we see one of
those thin yellow pieces of the pattern,
| | 04:32 | because along the edge is the darker green.
| | 04:34 | But it doesn't really matter when we
get back to 100% percent because our eyes
| | 04:38 | don't make that finer distinction.
| | 04:40 | So here at 100%, everything looks fine
and the secret is that we're using very
| | 04:44 | thin patterned tile.
| | 04:45 | Now what happens if we were to use a
different kind of a pattern behind this image?
| | 04:49 | Let's take a look at that.
| | 04:51 | I'm going to close the browser and I'm
going to close the Save For Web & Devices
| | 04:56 | window by clicking Cancel.
| | 04:58 | Now let's open another image from
our chapter10 Exercise Files folder.
| | 05:03 | That image is thick_tile.gif.
| | 05:05 | It's not large areas of pattern, as you can see.
| | 05:09 | And what we're going to do here is to
select what appears to be the primary
| | 05:12 | color, this darker green.
| | 05:14 | So I get my Eyedropper tool and I'll
click on the darker green and then I can
| | 05:18 | close thick_tile.gif.
| | 05:20 | Now, in chai.psd, I'm going to again
go to File>Save For Web & Devices, I'm
| | 05:26 | going to click Transparency.
| | 05:28 | I'm going to click the button on the
top right of Save For Web & Devices and
| | 05:32 | choose Edit Output Settings,
just as I did a few minutes ago.
| | 05:36 | And then I'm going to the second menu
from the top and choosing Background.
| | 05:39 | I'll leave the Document as Image and
in the Background Image Path field, I'm
| | 05:43 | going to click the Choose button and
I'm going to navigate to my Desktop, my
| | 05:50 | Exercise Files, my chapter10_
transparency, but this time, I'm going to select
| | 05:57 | the thick_tile.gif as the repeating
background and I'll click Open and then I'll click OK.
| | 06:03 | Now, I'm going to go to the Matte field
and as I did a few moments ago with the
| | 06:07 | thin_tile, I'm going to choose the
Foreground Color, which is that green that we
| | 06:11 | just sampled from our thick_tile.
| | 06:13 | You can see that green now fills in
the edges of this graphic and let's go
| | 06:17 | preview it in a web browser.
| | 06:19 | But if you look closely, you can see
that wherever there is a light green in
| | 06:22 | this thick background, we do see a
halo of darker green around the image.
| | 06:27 | There you can see it a little better.
| | 06:29 | So the upshot is that if you plan
to use a transparent image against a
| | 06:34 | background pattern, it's best to
design a thin background rather than a
| | 06:38 | background with areas of thick color
and that's particularly true if the
| | 06:42 | various colors in the background are
of high contrast, one with the other.
| | 06:45 | In the next movie, let's see how we
can optimize a transparent GIF that has a
| | 06:50 | soft edge that's a shadow or a glow.
| | Collapse this transcript |
| Optimizing transparent graphics with shadows and glows| 00:00 | Now that we know how to optimize a
transparent image that has a soft edge
| | 00:04 | caused by anti-aliasing,
| | 00:06 | let's look at a transparent image with
another kind of soft edge, one caused by
| | 00:10 | a layer style like a soft
Drop Shadow or a soft Outer Glow.
| | 00:14 | If you're working along with me, you
can open chai_02.psd and then go to the
| | 00:19 | Layers panel and click the
arrow to the right of FX.
| | 00:22 | There you see a list of the Layer
Effects that have been applied to this image.
| | 00:26 | We have a Drop Shadow, which I'll turn
on and off so you can see that, and I'm
| | 00:29 | going to leave that off.
| | 00:31 | We also have an Outer Glow here.
| | 00:32 | Let me turn the visibility of
that on and off, so you can see it.
| | 00:35 | And we're just going to talk about
optimizing with this Outer Glow to start with.
| | 00:39 | To optimize this transparent GIF, we'll go to
File and we go down to Save For Web & Devices.
| | 00:46 | And in the Save For Web & Devices window,
we'll make sure we have our 2-Up tab selected.
| | 00:50 | Building on the skills we've already
learned, we know that we need to check
| | 00:54 | transparency in order to see
transparent pixels behind this GIF preview that we
| | 00:59 | have here on the right.
| | 01:00 | So I'll check Transparency and now we
have the gray and white checkerboard,
| | 01:03 | representing the transparent pixels in the file.
| | 01:06 | Notice that in the PSD,
this glow looks very soft,
| | 01:10 | but in the GIF variation it doesn't look soft.
| | 01:13 | It looks very hard edged.
| | 01:14 | I'd like to see how this looks against
a repeating background, that same thin
| | 01:18 | background tile that we've
used previously in this chapter.
| | 01:21 | So I'm going to first set up that as
the background tile by going to the
| | 01:25 | arrow on the right side of be Save For Web &
Devices window and choosing Edit Output Settings.
| | 01:31 | In the Output Settings window, as
we've already learned, we'll go to the second menu
| | 01:35 | and choose Background.
| | 01:36 | We'll View the Document as Image.
| | 01:38 | We'll move to the Path field and we'll
click the Choose button and we're going
| | 01:42 | to go to our Exercise Files
folder on the Desktop, into the
| | 01:48 | chapter10_transparency folder and
we're going to select cup_tile.gif as our
| | 01:53 | repeating background tile and click Open.
| | 01:55 | And then we'll click OK and now we're
ready to preview against that repeating
| | 01:59 | background by clicking the Preview in
Browser button at the bottom of the Save
| | 02:03 | For Web & Devices window.
| | 02:04 | Well, that doesn't exactly
look like what I had in mind.
| | 02:07 | That Outer Glow is way too sharp.
| | 02:09 | It needs to be much, much softer on
its edges to look realistic against this
| | 02:13 | light green repeating tile background.
| | 02:15 | So let's go back and fix that.
| | 02:17 | I'm going to close the web browser and back
in Save for Web & Devices, I'm going to Cancel.
| | 02:22 | The reason is that I need to open my
repeating background tile and sample its
| | 02:26 | color so that we can use that color
to camouflage the edge of this glow.
| | 02:30 | So if you're following along, go back
to your chapter10 Exercise Files folder
| | 02:34 | and open cup_tile.gif.
| | 02:36 | With cup_tile.gif on the screen, I'm
going to go to the Toolbox, select the
| | 02:41 | Eyedropper and I'm going to click in
the primary color here, this darker green,
| | 02:45 | and that puts the green in the
Foreground Color Box in the Toolbox.
| | 02:48 | I can now close cup_tile.gif and I'm
going back to File>Save For Web & Devices
| | 02:54 | in the chai.psd image.
| | 02:56 | Now, once again, I'm going to check
Transparency and then I'm going to move to
| | 03:00 | the Matte field where I'm going to
choose Foreground Color, which is that light
| | 03:04 | green that's in our
Foreground Color Box in the Toolbox.
| | 03:07 | You can now really see in the preview
how that light green color is being used
| | 03:11 | on the soft pixels at the edge of our glow.
| | 03:14 | Now, let's preview against the
very same repeating tile background.
| | 03:18 | I'm going to go to the arrow again on
the side of Save For Web & Devices, down
| | 03:22 | to Output Settings, you know the drill,
up to the second menu, choose Background.
| | 03:27 | And in the Background Image Path,
I'll click Choose and I'll navigate to my
| | 03:31 | chapter10_transparency folder and I'll
choose cup_tile.gif and click Open, and
| | 03:36 | click OK to close my Output Settings.
| | 03:38 | And just as we did before, I'll click
the Preview in Browser button at the
| | 03:42 | bottom of the Save For Web & Devices window.
| | 03:44 | And there we have our nice soft-looking
glow on this transparent illustration
| | 03:49 | against our repeating background.
| | 03:51 | So it's pretty amazing that you can
get that rough glow that we saw a few
| | 03:54 | minutes ago to look this good,
this easily in Photoshop CS3.
| | 03:58 | Let's quickly go back into
the same thing with the Shadow.
| | 04:01 | I'm going to minimize the Web browser.
| | 04:03 | I'm going to cancel out of Save For
Web & Devices and back in chai_02.psd,
| | 04:08 | I'm going to make the Outer Glow
invisible and I'm going to turn on the Drop
| | 04:12 | Shadow layer effect instead by
clicking just to the left of Drop Shadow.
| | 04:16 | I already have the primary color of my
cup_tile here in my Foreground color box
| | 04:20 | so I'm fine with that.
| | 04:21 | And all I have to do is go to File and
go to Save For Web & Devices. I'm going
| | 04:26 | to click Transparency and instead of
Matte being set to None, which gives us
| | 04:31 | this really hard-edged-looking
shadow in the preview, I'm going to set my
| | 04:35 | Matte to the Foreground Color, which is the
light green that we sampled from the cup_tile.gif.
| | 04:41 | You can see it filling in the
soft edge around the shadow here.
| | 04:44 | And now, let's set up our page
background, once again, by clicking the arrow on
| | 04:48 | the right side of the Save For Web & Devices
dialog box and choosing Edit Output Settings.
| | 04:54 | In Output Settings, we go to
Background, we choose the Path to our
| | 05:00 | chapter10_transparency folder to
cup_tile.gif and click Open and then click OK.
| | 05:06 | Now, we'll preview our illustration with
its Drop Shadow by clicking the Preview
| | 05:10 | in Browser button at the bottom of
the Save For Web & Devices window.
| | 05:13 | As you can see, our illustration with
its Drop Shadow looks just fine against
| | 05:18 | this patterned background.
| | 05:19 | So you can use the Matte field to
camouflage even a thick soft edge, like the kind
| | 05:24 | that you get with the Drop
Shadow here or with an Outer Glow.
| | 05:27 | But do be aware that when you are
optimizing a transparent graphic that has
| | 05:32 | a layer effect like this, it's even more
vulnerable to use against a thick background.
| | 05:36 | It's really not going to look very
good because the Drop Shadow moves so far
| | 05:41 | away from the edge of the illustration that it
will interrupt the pattern on the background.
| | 05:45 | Now that you know all about preparing
a transparent graphic in Photoshop CS3,
| | 05:50 | let's talk about how to save out
that graphic in the next movie.
| | Collapse this transcript |
| Saving transparent graphics| 00:00 | This movie follows straight on the
heels of the preceding movie in which we
| | 00:04 | learned how to optimize a transparent
GIF whose soft edges were caused by layer
| | 00:08 | effects, like Glows and Drop Shadows.
| | 00:10 | When you are done optimizing a
transparent GIF like that one, or a transparent
| | 00:14 | GIF of any sort, you're going to
want to save the results and that's the
| | 00:18 | subject of this movie.
| | 00:19 | If you're working along with me, then
please do work through the preceding
| | 00:22 | movie and at this point, just click
the Save button in the Save For Web &
| | 00:25 | Devices dialog box.
| | 00:27 | That opens the Save Optimized As window.
| | 00:29 | Here, I'm going to decide where I
want to save my transparent GIF.
| | 00:33 | I'm going to choose to save on the
Desktop and there I'm going to make a new
| | 00:36 | folder by clicking the New Folder
button, and I'll call that one transparent.
| | 00:41 | I'll click Create and I'll select that folder.
| | 00:47 | Now, I'm going to go down to the Format menu.
| | 00:49 | Here I have a choice to make and
you'll have the same choice whenever you are
| | 00:52 | creating a transparent GIF.
| | 00:53 | You could choose images only.
| | 00:55 | In that case, Photoshop will save out
only the transparent GIF with transparent
| | 00:59 | pixels all ready to be placed on top
of any web background in a site building
| | 01:03 | program like Dreamweaver and
that may be sufficient for you.
| | 01:06 | Today, I would like to choose HTML & Images
because I want to show you what that does.
| | 01:11 | It's going to cause Photoshop to save
not only our transparent GIF but also
| | 01:15 | an HTML file with HTML instructions
to place that GIF on top of a repeating
| | 01:20 | background pattern.
| | 01:22 | I also want to show you
something here in the Settings area.
| | 01:25 | I'm going to click on the Settings menu,
and I'm going to go down and choose Other.
| | 01:29 | In the Output Settings dialog box, I
want to make sure this second menu is set
| | 01:33 | to Saving Files so that you can see this
instruction, Copy Background Image When
| | 01:38 | Saving, which is checked by default.
| | 01:41 | This causes Photoshop to save a copy
of the background tile as well as our
| | 01:46 | transparent foreground image.
| | 01:48 | So we'll click OK and then we'll click Save.
| | 01:51 | Now, I'm going to go out to my
Desktop to see what I have saved.
| | 01:54 | Here is my transparent folder, which
I'm going to open and inside of that I see
| | 01:59 | an HTML file along with an Images folder.
| | 02:01 | Let's open the Images folder
and here we have two images.
| | 02:05 | We'll open those to see how they look.
| | 02:06 | First, we have our transparent GIF and
there it is with the green matte color
| | 02:13 | filled in around the drop shadow.
| | 02:16 | Let's zoom in for just a minute so you can
see what's happened with this green color.
| | 02:19 | As you can see, there is a jagged edge
on the outside of the green pixels, but
| | 02:24 | that doesn't matter because those blend
directly into the same color of the web
| | 02:28 | page background making the
drop shadow itself look soft.
| | 02:32 | Now, let's see our cup_tile.gif and
as promised, this is just a copy of that
| | 02:37 | repeating background tile and then
I'm going to look at my HTML file.
| | 02:42 | I'll open that in a web browser and
here you can see a repeating background and
| | 02:47 | our transparent GIF with its soft drop
shadow edge nicely blended against the
| | 02:52 | light green pattern.
| | Collapse this transcript |
| Starting with a non-transparent image| 00:00 | In the preceding movies, we've been
looking at how to optimize an image that
| | 00:04 | already has transparency in it,
| | 00:06 | an image that perhaps was created with
a transparent background or one that has
| | 00:10 | areas that were selected
and then masked or deleted.
| | 00:13 | But there will be times when you have
an image like this one, flavors.psd, from
| | 00:17 | the chapter10 Exercise Files folder that
doesn't have any transparent areas yet,
| | 00:22 | but that you would like to put on top
of a web page background and have some
| | 00:25 | areas appear transparent.
| | 00:27 | Here is a quick way to make that happen.
| | 00:29 | I'm going to go to the File menu,
and down to Save For Web & Devices.
| | 00:33 | Here, I'm going to select the Eyedropper
tool from the Toolbox on the left side
| | 00:36 | of the Save For Web & Devices window.
| | 00:38 | And with that eyedropper, I'm going to
click on one of the light green pixels,
| | 00:43 | because what I would like to do is to
knock out all of the light green pixels
| | 00:46 | around the edge so that my graphic
appears to have rounded corners and so
| | 00:50 | that these is some transparency
between the white border on the right and the
| | 00:54 | larger part of the image.
| | 00:55 | When I clicked on this light green pixel,
in the GIF Color Table on the right,
| | 00:59 | that color is highlighted.
| | 01:01 | With that color chip highlighted, I'll
go down to the Transparent icon at the
| | 01:05 | bottom of the Color Table and keep
your eye on the image, when I click there,
| | 01:09 | every instance of the highlighted
light green color has been remapped to
| | 01:13 | become transparent.
| | 01:15 | Now, we have a transparent graphic and
all we have to do is apply the principles
| | 01:18 | we have already learned to set it
up against our web page background.
| | 01:22 | I'd like to have this
graphic on a solid red background.
| | 01:26 | So with the Eyedropper tool, I'm going
to click on dark red, here in the image, to
| | 01:30 | set that as the eyedropper color.
| | 01:32 | Then I'm going over to the right to
the arrow, clicking there and bringing up
| | 01:36 | the Edit Output Settings command.
| | 01:38 | I'll choose that and in the Output
Settings dialog box, I'll go to the second
| | 01:42 | menu and choose Background.
| | 01:44 | Here, I'm going to the Color field and
I'm going to click the arrow, and I'm
| | 01:48 | going to choose as the
background color, the Eyedropper color,
| | 01:51 | in other words, the red that's over here.
| | 01:53 | Now that we have set up our page
background color, we can click OK and I do
| | 01:58 | want to go to the Matte field and
choose that very same Eyedropper Color as my
| | 02:02 | Matte color so that I don't get a halo
of another color around the transparent
| | 02:06 | areas of the graphic.
| | 02:07 | Now, let's preview this in a web browser.
| | 02:09 | I'll click the Preview in Browser icon
and there we can see our graphic against
| | 02:14 | the red background, with the
transparency around the edges that make it appear
| | 02:17 | rounded and a bit of transparency
between this white border and the image.
| | 02:22 | Now, this isn't a perfect job. Here in
the text you can see a little bit of red
| | 02:26 | and around the corners the graphic is a
little rough, and that's because those
| | 02:29 | areas were very anti-aliased and had
lots of different colors in them, and we
| | 02:34 | only replaced the single green
with our transparent pixels.
| | 02:38 | So we do have a little bit of a rough
area, but it's not bad, given the amount of
| | 02:41 | time and effort that it took.
| | 02:42 | So now I'll close the browser and going
back into Save For Web & Devices, I'll
| | 02:47 | simply click Save and on my Desktop, I'm
going to make another folder, just as we
| | 02:52 | did in the last movie, and save into that folder.
| | 02:56 | And I'll save both HTML and Images so
that I get my background with its red
| | 03:00 | color and then I'll click Save.
| | 03:02 | When I go out to the Desktop, there I
see my flavor folder and if I open that, I
| | 03:08 | see an images subfolder created by
Photoshop and in there is flavors.gif.
| | 03:14 | And if I open that file to see what
it looks like, here it is with its
| | 03:18 | transparent pixels that were remapped to
transparency from within the Save for Web window.
| | 03:23 | So I'll close that and I'll open the
HTML file that was created so that we can
| | 03:28 | see that graphic on the red web page background.
| | 03:31 | So that's how you can optimize an
image that has no transparency as
| | 03:35 | a transparent GIF.
| | Collapse this transcript |
| Simulating transparency with JPEGs| 00:00 | Until now, we've been talking about
optimizing images that are illustrations and
| | 00:05 | that, therefore, optimize well in
the GIF format or the PNG 8 format.
| | 00:08 | But what happens when we have an image
that is a photograph, like this one, and
| | 00:12 | it has some transparent areas in it,
like these rounded corners here and in
| | 00:17 | which we want to retain those transparent
areas when we put the photograph on a web page.
| | 00:22 | Here is our conundrum.
| | 00:23 | We know that photographs optimize best
in the JPEG format and don't look very
| | 00:27 | good when optimized as GIFs.
| | 00:29 | We also know that the JPEG
format does not support transparency.
| | 00:33 | So let's take a look at the problem and
see if we can come up with a solution.
| | 00:37 | I'm going to go to the File menu
and down to Save For Web & Devices.
| | 00:41 | In the 2-Up view of Save For Web &
Devices, on the left, I see my PSD and this
| | 00:46 | shows me transparency around
the corners of the photograph.
| | 00:49 | On the right, we see a preview of how
the file would optimize in the JPEG format,
| | 00:54 | because we've chosen JPEG
from here in the Format menu.
| | 00:57 | The take home point here is that when
the format is set to JPEG, you do not
| | 01:01 | have transparent pixels.
| | 01:03 | By default, any transparent
pixels will fill in with white.
| | 01:06 | So what can we do to make this
photograph appear to have rounded edges when set
| | 01:11 | against a web page background?
| | 01:12 | We're going to stimulate the look of
transparency by matching these corners to
| | 01:16 | the color our page background.
| | 01:18 | We'll start by going to the Eyedropper
in the Save For Web & Devices window,
| | 01:22 | selecting that and with the eyedropper,
I'm going to click on a green color, one
| | 01:26 | of these lighter greens in the image and
that set the eyedropper color to green.
| | 01:31 | Now, I'm going to go to the arrow on
the right Save for Web window and click
| | 01:35 | there and choose Edit Output Settings.
| | 01:37 | As we've learned to do, we'll go to the
second menu and from there, we'll choose Background.
| | 01:41 | Here, if there is anything in the path
area, select that and delete it, because
| | 01:45 | we want to use a solid color
background in this example.
| | 01:48 | In the Color field, I'm going to click
and I'm going to choose Eyedropper Color
| | 01:52 | as my page background, and that's the
very same green that we've set there in
| | 01:56 | Eyedropper slot, in the Save For Web window.
| | 01:58 | I'm going to click OK.
| | 02:00 | Now, let's preview what we have, by
clicking the Preview in Browser icon at the
| | 02:04 | bottom of Save For Web & Devices.
| | 02:06 | Well, this isn't exactly right because
now I've got a green background, I've got
| | 02:10 | my photograph, but wherever there were
transparent pixels in the original file I
| | 02:14 | still have white, which is the default.
| | 02:16 | Let's go back and fix that by setting
our Matte color to the very same green
| | 02:20 | as our webpage background and then those
corners will just blend in with the background.
| | 02:24 | It won't be real transparency, but our
photograph will look like it has rounded corners.
| | 02:29 | Here's how that works.
| | 02:31 | I'm going to close the Web browser and
in Save For Web & Devices, I'm going to
| | 02:34 | go to the Matte field.
| | 02:36 | I'll click the arrow on the Matte
field and I'm going to choose Eyedropper
| | 02:39 | color, which again is our green
that's over here in the Eyedropper field.
| | 02:44 | And you can see that those
corners have filled in with green.
| | 02:46 | And now if I preview, the photograph
really does look like it has rounded corners.
| | 02:52 | So that is how you can simulate the
look of transparent pixels when you're
| | 02:56 | optimizing in the JPEG format
that doesn't support transparency.
| | 03:00 | This works great against a solid color
background, but it isn't likely to work
| | 03:03 | as well against a patterned background.
| | 03:06 | Let's take a look at that.
| | 03:07 | I'm going to close the Browser window
and I'm also going to cancel out of Save
| | 03:12 | For Web & Devices so that I can come
back to the main screen in Photoshop and
| | 03:16 | open a background tile.
| | 03:19 | I've opened cup_tile.gif from the
chapter10 Exercise Files folder and I'm going
| | 03:24 | to get my Eyedropper tool in the
Toolbox and click in the primary color here,
| | 03:28 | this medium green and
then I'll close cup_tile.gif.
| | 03:32 | Now, that medium green is here in our
Toolbox in the Foreground color box,
| | 03:36 | I'll go to File and Save For Web &
Devices again and this time, I'm going to
| | 03:41 | set that cup_tile.gif as our
repeating background, by clicking the arrow on
| | 03:45 | the right side of the Save for Web &
Devices window, choosing Edit Output
| | 03:48 | Settings, from the second menu,
choosing Background and in the Path field,
| | 03:53 | clicking the Choose button and
navigating to chapter10 transparency and
| | 03:58 | choosing cup_tile.gif and then
clicking Open. And I'll click OK.
| | 04:03 | Now, what I want to do is to choose, in
the Matte field, the medium green that we
| | 04:07 | sampled from cup_tile.gif.
| | 04:10 | To do that, I'll click on the right side
of the Matte field on the arrow and I'm
| | 04:13 | going to choose Foreground Color,
which is that medium green that's in our
| | 04:16 | Foreground Color box in the Toolbox.
| | 04:19 | And sure enough, the pixels at the
corners fill in with that light green.
| | 04:24 | Now let's preview and see how this
looks against that repeating tile.
| | 04:28 | It's not too bad, but it really
isn't perfect because wherever we have
| | 04:32 | those transparent pixels filled in
with solid color, we don't see our
| | 04:36 | patterned background.
| | 04:37 | You may be able to get away with this
when you have a thin background like this
| | 04:40 | one, but it won't look even this good if
you have a thicker pattern design in
| | 04:44 | your background of your webpage.
| | 04:46 | Let's go back into Save For Web
quickly and just finish this up by clicking
| | 04:50 | the Save button, going to the Desktop,
clicking New folder, I'll call this
| | 04:55 | JPEG, and clicking Create,
| | 04:57 | then in the Format field choosing
HTML & Images, and clicking Save.
| | 05:03 | Now, I'll look on my Desktop
and there is my JPEG folder.
| | 05:07 | Inside, we have teapot.html, which
takes its name from the image with which we
| | 05:12 | started, and in the images folder we
have our teapot.jpg and we have a copy of
| | 05:18 | our background tile.
| | 05:19 | Let's open that teapot.jpg to see it and
there it is, with its light green edges.
| | 05:26 | Let's go back and open our HTML file
and we see how this looks against our
| | 05:30 | repeating background tile.
| | 05:32 | So that is how you can simulate
transparency when you have to save an image
| | 05:36 | in the JPEG format.
| | Collapse this transcript |
|
|
11. Creating AnimationsCreating animations from layer visibility| 00:01 | Animation is becoming more
and more popular on the web.
| | 00:04 | One simple way for you to get involved
and add animation to your website is to
| | 00:09 | create a GIF animation in Photoshop
CS3 and that's what we're going to be
| | 00:13 | covering in this chapter.
| | 00:15 | In the first few movies, we'll be
looking at how to build the artwork for
| | 00:19 | animated GIFs and then in a later movie, we'll
learn how to optimize and save an animated GIF.
| | 00:25 | Some things to think about upfront when
you're creating animated an GIF are that
| | 00:29 | you don't want to have too many frames
in your animated GIF, because it can get
| | 00:33 | quite large, quite quickly.
| | 00:35 | So animated GIF is most appropriate for
short animations, like banner ads or small logos.
| | 00:40 | Also, animated GIF is, of course, a GIF format.
| | 00:45 | You can animate a JPEG and so if you
have photographs that you're going to
| | 00:49 | include in your animated GIF,
you're going to have to be satisfied with
| | 00:52 | optimizing them in the GIF format, even
if the quality of the photograph isn't as
| | 00:56 | perfect as you might like.
That's the trade off.
| | 01:00 | The advantage of using animated GIFs
as opposed to other kind of animations
| | 01:04 | that you would create elsewhere in other
programs is that animated GIFs can play anywhere.
| | 01:09 | They don't require any special plug-
ins or special code and all popular web
| | 01:14 | browsers will play an animated GIF.
| | 01:16 | So let's get started creating an
animated GIF in this movie using a style of
| | 01:21 | animation called frame-by-frame animation.
| | 01:24 | What we're going to be doing is
creating frames manually in Photoshop CS3's
| | 01:29 | Animation panel and then on each frame,
will be turning on and off the visibility
| | 01:35 | of individual layers to
change the content of each frame.
| | 01:39 | This is reminiscent of the kind of
old-fashioned cell animation that
| | 01:43 | cartoonists used do.
| | 01:45 | So let's see how we create a frame-by-frame
animation in Photoshop using layer visibility.
| | 01:52 | I've opened the Animation panel from
the Window menu at the top of the screen.
| | 01:56 | When that panel opens it always shows
the first frame of the animation and that
| | 02:01 | frame reflects the arrangement
of the layers in the Layers panel.
| | 02:05 | So let's take a look over there.
| | 02:06 | We can see that we only have
two layers that are visible.
| | 02:10 | We have this cup layer, which I
will turn on and off so you can see its
| | 02:13 | content, and then we have our background
layer and that's what we're going to use
| | 02:18 | for our first frame.
| | 02:20 | Just to show you what else we have here,
we have a fan layer with this fan on it,
| | 02:25 | I'm going to turn that off for the first
frame, and then we have three smoke layers.
| | 02:30 | We have 1 smoke curl, 2 smoke curls, and 3.
| | 02:35 | I'm going to turn all three of those
off for this first frame of our animation.
| | 02:38 | Now, I'm going to go to the Animation
panel and create another frame by clicking
| | 02:45 | this icon right here at the
bottom of the Animation panel.
| | 02:49 | This is to Create New Frame icon.
| | 02:52 | When I click that, I get frame 2,
which is now an exact copy of frame 1.
| | 02:58 | Let's change the content of frame 2.
| | 03:00 | With frame 2 highlighted in the
Animation panel, I'm going to go over to the
| | 03:04 | Layers panel and I'm going to make
another layer visible, the smoke 1 layer, by
| | 03:09 | clicking in its Visibility field to add
an eye icon there and you can see in the
| | 03:14 | image, we now have that
first smoke curl showing.
| | 03:18 | So let's do the same thing on another frame.
| | 03:21 | I'll go to the bottom of the
Animation panel and I'm going to click the New
| | 03:24 | Frame button. That creates frame 3,
which is currently just a copy of frame 2.
| | 03:30 | With frame 3 highlighted in the
Animation panel, I'll go over to the Layers panel
| | 03:35 | and I'm going to make another layer
visible, the smoke 2 layer, which gives us a
| | 03:40 | second smoke curl in our image.
| | 03:43 | I'll do this all one more time by
going over to the Animation panel, clicking
| | 03:47 | the New Frame button, making sure the
new frame, frame 4, is highlighted in the
| | 03:53 | Animation panel and moving to the
Layers panel and turning on yet another smoke
| | 03:57 | layer, the smoke 3 layer.
| | 04:02 | There is one more thing I'd like to do to
set up the appearance of this animated GIF.
| | 04:06 | I'd like to turn on that fan and
have it on on all frames of animation.
| | 04:13 | With any one of the frames selected,
in this case frame 4, I'm going to go to
| | 04:17 | the Layers panel and I'm going to
click on the visibility of the fan layer.
| | 04:22 | Now if I were to click on the other
frames, you would see that although the fan
| | 04:25 | is showing on frame 4, it's
not showing on the other frames.
| | 04:29 | So I'm going to go back to frame 4 and
then I'm going to Layers panel and I'm
| | 04:33 | going to click directly on the fan layer,
not just in its Visibility field, and
| | 04:38 | then I'm going to the top of the
Layers panel and I'm going to click on the
| | 04:41 | unified layer visibility icon there and
I'll click Match in this prompt and now
| | 04:48 | if I click back on the other frames, you see
that we have our fan showing on all frames.
| | 04:54 | So what I'd like to do now is
to is to preview the animation.
| | 04:56 | I'm going to go back and click on
the first frame and then I'm going to
| | 04:59 | click the Play button at the bottom
of the animation panel and that's kind
| | 05:03 | of scary-looking animation,
| | 05:04 | so I'm going to click the stop button.
| | 05:06 | Let's see what we can do to fix that problem.
| | 05:09 | The problem is that there is
no time in between the frames.
| | 05:12 | So I'm going to select all the frames
by clicking on the first, holding the
| | 05:16 | Shift key and clicking on the last
frame and then I'm going to go to the Time
| | 05:20 | Delay menu, beneath any one of the
frames, click and choose a time delay.
| | 05:26 | I'm going to choose just 0.2 seconds here.
| | 05:31 | Now I'll click back on the first frame
and I'll click the play button again to
| | 05:34 | preview what we've changed.
| | 05:37 | As you can see, there is now more time
between the appearance of each smoke curl.
| | 05:42 | I'm going to click the Stop button
again, because I see something else I
| | 05:45 | would like to change.
| | 05:46 | I'd like to have some delay at the end
of each loop of the animation before it
| | 05:51 | starts playing again.
| | 05:53 | So we'll stop it and we'll click on
frame 4 and I'll go to the Time Delay
| | 05:58 | menu underneath frame 4 and I'm going to
choose a little bit more time here, say 2 seconds.
| | 06:04 | Now I'll go back and preview again
by clicking on the first frame and
| | 06:08 | clicking the play button and as you
can see, there is a bit of hesitation
| | 06:12 | between each loop of the movie.
| | 06:19 | Now I will tell you that the timing that
we see here is not necessarily the same
| | 06:23 | timing that each of our viewers is
going to see in their web browser.
| | 06:27 | Because the speed of any animated
GIF has a lot to do with the individual
| | 06:31 | processing speed of each viewer's computer.
| | 06:34 | So all we can do here is to get a sense of
the relative time at which each frame appears.
| | 06:41 | Let's say we're satisfied with
that. What else can we do here?
| | 06:44 | Well, one thing that I'd to change is
the fact that the animation keeps looping
| | 06:48 | over and over and over and never stops.
| | 06:52 | I'm going to stop the animation just a
moment by clicking the Stop button and
| | 06:56 | show you how we can control that from
the Loop menu here on the left side of
| | 07:01 | the Animation panel.
| | 07:02 | If I click on that menu, I can choose to
have the animation play Forever, as it's
| | 07:07 | doing now, or just Once.
| | 07:09 | I don't really like to choose Once,
because if a viewer is on a slow connection
| | 07:13 | like a dial-up, the animation might
play all the way through before it even
| | 07:16 | downloads to his computer.
| | 07:19 | So what I'm going to do is choose Other
and in this menu, I'm going to have the
| | 07:24 | animation play just three times by
typing 3 and clicking OK and now I'll click
| | 07:31 | back on the first frame and play it one
more time and we will see the animation
| | 07:36 | play and hesitate, play a second time and
hesitate and a third time and now it's finished.
| | 07:41 | So now I'm happy with the animation.
| | 07:45 | Normally, at this point I would open
the Save For Web & Devices window and
| | 07:48 | optimize and save my animated GIF from there.
| | 07:51 | But before I show you how to save and
optimize, which I'll do in another movie
| | 07:55 | in this chapter, I'd like to show you a
couple of more ways to build an animated GIF.
| | 08:00 | Here we've learnt how to use a
frame-by-frame technique turning layer
| | 08:04 | visibility on and off.
| | 08:06 | In the next movie, we're going to talk
about how we can have the computer do some
| | 08:09 | of the work for us by tweening
an animation using layer opacity.
| | Collapse this transcript |
| Tweening with opacity| 00:01 | In the last movie, we learned how to
create a GIF animation by manually
| | 00:05 | creating frames in the Animation panel
and turning layer visibility on and off
| | 00:09 | on different frames.
| | 00:11 | You don't always have to do
all of that work yourself.
| | 00:14 | You can have the computer do some of
the work for you, which is, after all, what
| | 00:17 | computers are good for, by using the
Tweening feature in the Animation panel.
| | 00:23 | Tweening stands for in between,
because you're going to create a couple of
| | 00:27 | frames yourself and then let
Photoshop create the frames in between.
| | 00:31 | I have opened the Animation panel from
the Window menu and as we know, it always
| | 00:35 | shows you the first frame of
an animation when it opens.
| | 00:38 | I am going to create a second frame now
by clicking the Create New Frame button
| | 00:43 | at the bottom of the Animation panel.
| | 00:45 | Frame 2 is now a copy of Frame 1 and
I'd like to make an important change
| | 00:49 | between Frame 1 and Frame 2.
| | 00:51 | I would like to have the
text, white tea, fade in.
| | 00:56 | So, I want white tea to be completely
opaque on Frame 2, but I want it to be
| | 01:02 | completely transparent on Frame 1.
| | 01:04 | So, I am going to go back and
select Frame 1 of my animation.
| | 01:08 | Then I'm going to go over to the
Layers panel and going to make sure that the
| | 01:12 | white tea layer is selected.
| | 01:15 | And then, very important, I'm
an uncheck Propagate Frame 1.
| | 01:20 | Why am I doing this?
| | 01:21 | Because I am about to make a change to
Frame 1 and I don't want that change to
| | 01:25 | be repeated on to Frame 2.
| | 01:27 | That's what Propagate Frame 1 means.
| | 01:29 | So, I am going to uncheck Propagate Frame 1.
| | 01:33 | Then I will go up to the Opacity field
and I am going to click-and-drag to left
| | 01:37 | when I see my double-pointed arrow there,
to bring the Opacity of the white tea
| | 01:41 | text down to 0% on the
first frame of the animation.
| | 01:45 | Now, if I click on the second frame, I
see that white tea is still at 100% there.
| | 01:52 | With the second frame selected, I am
going to tween, by clicking this button,
| | 01:57 | the Tween button at the
bottom of the Animation panel.
| | 02:00 | That opens the Tween dialog box.
| | 02:03 | Let's look at this first menu.
| | 02:06 | I'm going to tell Photoshop that I
would like it to Tween from the currently
| | 02:09 | selected Frame 2 to the
previous frame, which is Frame 1.
| | 02:15 | Then I'm going to say how many frames
I would like Photoshop to add in between
| | 02:18 | those two frames and I
just will arbitrarily try 15.
| | 02:23 | You don't want to add too many frames
when you're making an animated GIF because
| | 02:26 | each frame will increase
the size of the final product.
| | 02:31 | I'm going to leave
everything else here at its default.
| | 02:35 | Even if are not going to use all
layers, in this particular case, I just leave
| | 02:39 | it checked. It can't hurt and it
avoids making any mistakes, and the same is
| | 02:43 | true of the Parameters.
| | 02:44 | I generally leave them all checked, even
if I'm not sure that I'm actually going
| | 02:48 | to vary all of the parameters, because
it just avoids leaving anything out.
| | 02:53 | By the way, the parameters area is
telling us that when we make an animated
| | 02:56 | tweened GIF, we can change either the
Position of our artwork, the Opacity of
| | 03:02 | the artwork or the Layer Effects on the artwork.
| | 03:05 | So now I am going to click OK and keep
your eye on the Animation panel, where
| | 03:10 | you'll see that we now have many
more frames than we did a second ago.
| | 03:14 | I am going to click-and-drag on the
bottom-right of the panel to expand the
| | 03:17 | panel all the way to the edge of my screen.
| | 03:20 | And you can see that we now have 17
frames, the two that I created, plus the 15
| | 03:25 | that we told Photoshop to make for us.
| | 03:28 | Let's go all the way back to the
beginning by scrolling over to the left
| | 03:32 | and clicking on that first frame and
then we'll click the Play button to
| | 03:36 | preview what we've made. Let me stop this.
| | 03:40 | You can see that the animation is
moving from completely transparent to
| | 03:44 | completely opaque and then looping back around.
| | 03:47 | Well, clearly, we need a little bit
of delay between all of these frames,
| | 03:51 | so we are going to select all the frames.
| | 03:53 | I could do that, as I showed you in the
last movie, by Shift+Clicking the first
| | 03:57 | and last frames, or I can go to the
Animation panel menu here in the right side
| | 04:02 | of the panel and choose
from there Select All Frames.
| | 04:06 | This is the easier way when you
have lots of frames, as we do here.
| | 04:10 | With all the frames selected, I can go
to any one of them and click down there
| | 04:13 | and I can choose some time
delay, let's say 0.2 seconds.
| | 04:19 | Now, I will go back to my first frame
and I will click on the Play button and
| | 04:23 | we will see that the text slowly fades in
and then it loops and starts doing that again.
| | 04:28 | So, I am going to stop the preview and
what I would like to have happen here is
| | 04:34 | not for the text to continually fade in.
| | 04:36 | I would like the text to fade
in and then slowly fade out.
| | 04:40 | How can we do that?
| | 04:42 | What we're going to do is select
all of the frames, copy them and then
| | 04:47 | we'll reverse them.
| | 04:50 | We already know how to select all the
frames. I am going to go to the panel menu
| | 04:53 | on the right side of the Animation
panel and choose Select All Frames.
| | 04:59 | From that same menu, I am now going to
choose Copy Frames and then I'm going to
| | 05:06 | go back a third time and choose paste frames.
| | 05:11 | Photoshop asks where I want to paste
the new frames and I would like to paste
| | 05:16 | these after the selected
17 frames. I will say OK.
| | 05:23 | And now I am going to scroll over and
I can see that now my animation doesn't
| | 05:28 | stop at Frame 17. I have
many more frames after that.
| | 05:31 | Those are the new frames
that we just copied and pasted.
| | 05:35 | Let's preview to see what we have now.
| | 05:37 | To go back to Frame 1, I am going to use
the controls this time at the bottom of
| | 05:41 | the Animation panel, to go all the way
back to the first frame and then I will
| | 05:45 | click the Play button.
| | 05:46 | And as you can see, we have our text
fading in but then, it starts again, fading in.
| | 05:52 | So, I will stop this and what I'm going
to do now is go back in and select the
| | 05:59 | brand-new frames that I just
added, those begin at frame 18.
| | 06:02 | So, I click on Frame 18 and I'm going
to scroll way to the end and I'm going to
| | 06:08 | hold the Shift key and click
on the last frame, Frame 34.
| | 06:12 | Now, with just those ending frames
selected, I am going to go back to the
| | 06:16 | Animation panel menu and I'm
going to choose Reverse Frames.
| | 06:22 | Only those last frames will be reversed.
| | 06:24 | And now, we'll start all the way from
the beginning by clicking the double
| | 06:27 | pointed arrow and we will preview by
clicking our play button and we should have
| | 06:32 | the animation that we want where the
text fades in and then slowly fades out.
| | 06:41 | So, let's stop the animation there and
that's how you create Tweened animation,
| | 06:47 | using the Opacity property of a layer.
| | 06:50 | You can Tween other characteristics of a
layer, as we will see in the next movie,
| | 06:54 | where we learn how to Tween with
Layer Position and Layer Styles.
| | Collapse this transcript |
| Tweening with position and Layer Styles| 00:00 | Now that you understand the
principle of tweening and you know how to
| | 00:03 | tween layer visibility, let me
show you how you can tween a couple of
| | 00:07 | other layer characteristics.
| | 00:09 | Using the file white_tea_02.psd from
the Chapter 11 Exercise Files folder, I am
| | 00:15 | going to show you how to tween
Layer Position and Layer Style.
| | 00:20 | Here you can see that we have two layers
in our file, the white tea text and the
| | 00:25 | background teapot layer.
| | 00:27 | I'm going to move the white tea
layer in the first frame of this
| | 00:30 | animation, which as we know is
created automatically for us when we open
| | 00:34 | the Animation panel.
| | 00:35 | So with the white tea layer selected,
I'm going to go to the Toolbox and
| | 00:39 | select the Move Tool.
| | 00:40 | I am going to hold down the Shift key
as I click-and-drag and holding the Shift
| | 00:44 | key constraints me from
moving from side to side.
| | 00:47 | I am going to take the white tea text
and move it just to the top of the image
| | 00:51 | until I see that pink Smart Guide
telling me I am there and then I will release
| | 00:55 | the mouse and the Shift key.
| | 00:56 | Now I am going to make a second frame
in the animation by going to the Create
| | 01:01 | New Frame button at the bottom of the
Animation panel, clicking and making Frame
| | 01:05 | 2, which is now a copy of Frame 1.
| | 01:09 | With Frame 2 selected, I am again going
to hold the Shift key and with the Move
| | 01:14 | Tool, click-and-drag the
text to the bottom of the image.
| | 01:17 | When I get down there, I will stop when
I see the pink Smart Guide and release
| | 01:22 | the mouse and the Shift key.
| | 01:25 | As you can see, when the text gets
over the teapot in its journey from top to
| | 01:28 | bottom, if I were to tween now between
Frame 1 and Frame 2, the text would move
| | 01:34 | nicely from top to bottom.
| | 01:35 | But as it went by the white teapot,
it would be hard to see the text.
| | 01:39 | So, I would like to have the text
get dark as it moves toward the bottom.
| | 01:44 | To do that, we are going to tween another
layer characteristic, which is Layer Style.
| | 01:49 | With Frame 2 selected, I'm going to go
back to the Layers panel and with the
| | 01:54 | white tea layer selected, I'm going
to add a Gradient Overlay Layer Style.
| | 01:58 | I will go to the fx button at the
bottom of the Layers panel, click and I will
| | 02:03 | choose Gradient Overlay.
| | 02:05 | Because I happen to have black and
white selected as my Foreground and
| | 02:09 | Background colors here in the Toolbox,
my default Gradient is black to white.
| | 02:14 | If you have other colors selected there,
you will get a different default Gradient.
| | 02:18 | But we can change that by clicking the
Gradient bar in the Layer Style dialog box.
| | 02:25 | That opens the Gradient Editor and here
I can change the color from black to a
| | 02:34 | dark purple by double-clicking this
color-stop to open the Color Picker.
| | 02:40 | In the Color Picker, I will movie the Hue
slider up to the purple area, because I
| | 02:43 | would like a nice dark purple.
| | 02:45 | And I'm going to click on a dark
purple like that one and say OK.
| | 02:50 | Now, I am going back to the Gradient
Editor where I'm going to double-click on
| | 02:54 | this white color-stop.
| | 02:56 | That opens the Color Picker again, and
again, I'm going to go back to the purple
| | 03:00 | area by moving the Hue slider and I'd
like to get just a nice light purple,
| | 03:06 | something like this, maybe even a
little bit lighter. There we go!
| | 03:13 | And I will click OK.
| | 03:16 | Now that I have changed the colors in
this Gradient, I can just click OK and
| | 03:20 | click OK again in the Layer Style dialog box.
| | 03:25 | Here you can see in the Layers panel
that I now have a Gradient Overlay on the
| | 03:29 | white tea layer on the
second frame of the animation.
| | 03:33 | If I click back to the first frame of
the animation, we can confirm that we
| | 03:36 | don't have our Gradient layer style there
and the text goes right back up to the top.
| | 03:43 | Now, what we would like to do is to have a
smooth transition between Frame 1 and Frame 2.
| | 03:47 | So, we are going to use Tweening.
| | 03:51 | With Frame 2 highlighted in the
Animation panel, I am going to click the Tween
| | 03:55 | button at the bottom of the
Animation panel to open the Tween dialog box.
| | 04:00 | Here I do want to Tween with the
previous frame, Frame 1, and for frames to add,
| | 04:07 | I am going to add even more frames
than we see here, I will try 25 frames.
| | 04:12 | The reason is that I know that the text
has to move quite a long way and I would
| | 04:16 | like that movement to be smooth.
| | 04:18 | The more frames that you add to an
animation, the smoother it will appear to run.
| | 04:22 | Of course, the trade-off is
that the animation will be larger.
| | 04:26 | But we will work with that for now.
| | 04:29 | I'm going to leave All Layers selected,
as well as all three of the Parameters,
| | 04:33 | even if I'm not using them all,
just to be safe and I will click OK.
| | 04:38 | Photoshop has now made 25 new
frames in between the two that I made.
| | 04:43 | Let's preview how this
animation looks with its new frames.
| | 04:46 | I'm going to click the double-pointed
arrow on the left-side of the Animation
| | 04:50 | panel, to go back to the
first frame and then Play.
| | 04:54 | And the text moves nicely from top
to bottom, but it is going too fast,
| | 04:59 | so I am going to stop this animation
and select all the frames by moving to
| | 05:03 | the Animation panel menu icon, here on the right,
| | 05:07 | clicking and choosing Select All Frames.
| | 05:09 | Then I will go to the bottom of any
of the selected frames and I will click
| | 05:14 | the Time Delay menu and I am going to
choose just 0.1 seconds in between each
| | 05:19 | frame here and we will go back to the
beginning by clicking the double-pointed
| | 05:22 | arrow and then Play.
| | 05:26 | And as you can see, the text moves
down and as it moves down, it changes from
| | 05:31 | white to that nice Gradient
Overlay of light purple to dark purple.
| | Collapse this transcript |
| Optimizing animated GIFs| 00:00 | Now that you know how to build an
animated GIF using the frame by frame
| | 00:04 | technique or by tweening, it's time for
the last step in any animation and that
| | 00:09 | is to optimize it and save it.
| | 00:12 | I am working here with white_tea_03.psd,
which is a fresh copy of the file that
| | 00:18 | we used in the last movie about
tweening with Layer Position and Layer Style.
| | 00:23 | So, if you have been working along with
me and you still have that image open
| | 00:25 | on your Desktop, you can use
that one with all of its frames.
| | 00:29 | To optimize the image, we are going to go to
our old friend, the Save for Web & Devices window.
| | 00:33 | I will move to File and I
will choose Save for Web & Devices.
| | 00:38 | I've chosen the 2-Up tab here,
so I can see much of my image.
| | 00:42 | And now, I'll start to optimize the
preview of the animated GIF on the
| | 00:45 | right side. On the left side, we have
the image as it looks as a PSD file.
| | 00:50 | Optimizing an animated GIF is just
like optimizing a static GIF, all the
| | 00:54 | controls here on the right are the same.
| | 00:56 | The only difference is that an animated
GIF is likely to be much bigger than a
| | 01:00 | static GIF because it does
have multiple frames in it.
| | 01:03 | So, for example, before I've played
with any of the optimization controls, I
| | 01:08 | have a GIF of a 147.6K
here, which is pretty big.
| | 01:12 | So, I am going to go over to the
controls and see what I can do there.
| | 01:15 | First of all, it's important to
have the Format control set to GIF.
| | 01:20 | You cannot have an animated
JPEG or these other formats.
| | 01:24 | Unfortunately, we also
cannot save out as a SWF file.
| | 01:29 | That's because of the demise of ImageReady.
| | 01:31 | In Creative Suite 2, we were able to
export animations in the SWF format, but we
| | 01:36 | can no longer in CS3.
| | 01:38 | If you do want to make a SWF
animation, then you'll have to create it and
| | 01:42 | save it from other Adobe CS three programs,
like Flash or Illustrator or After Effects.
| | 01:49 | Let's see what we can do here with
the GIF settings to lower the File Size.
| | 01:53 | I am going to Colors field and let's see
if we can get this image down to 32 colors.
| | 01:59 | Well, it really isn't looking
very good here around the teapot.
| | 02:01 | So, I am not going to accept that.
| | 02:03 | In fact, I don't even like the way it
looks at 64 colors, which is where I started.
| | 02:07 | I am going to take it all the way up to 128.
| | 02:10 | And now those soft areas look a lot better.
| | 02:14 | But our File Size is even bigger.
| | 02:16 | So, let's see if we can add a
little bit of Lossy Compression.
| | 02:19 | I will click there and I'm just
going to increase the Lossy slider a bit.
| | 02:23 | Let's see if I can go a little bit higher.
| | 02:28 | It's not looking great, but I think I
can live with this and now I've gotten the
| | 02:31 | File Size down to 107.7K.
| | 02:35 | We don't have any Dither set, so
there's nothing really to do there to reduce
| | 02:38 | the file size and we could just see if
we can use a different palette, checking
| | 02:43 | Perceptual, which brings us down a
little bit further, Adaptive, which also
| | 02:51 | gives us a File Size at least a K
smaller than the selective reduction palette.
| | 02:56 | So, I will keep it at Adaptive.
| | 02:58 | Now, one thing to keep in mind,
when you are optimizing an animated GIF is
| | 03:02 | that every single frame of the
Animation is going to optimize with these
| | 03:06 | very same settings.
| | 03:07 | So, it's important to run through the
frames of animation, making sure that they
| | 03:11 | all look good with the
settings that you have chosen.
| | 03:14 | You can do that from the bottom of the
Color Table here, where we have these arrows.
| | 03:19 | This central arrow will just play the
animation, like that, and the next arrow
| | 03:26 | over lets you step
through the frames of the animation.
| | 03:29 | So, we can do that, and as we go down,
I see that we are noticing a little bit of
| | 03:33 | banding in the Gradient Overlay on the text,
| | 03:37 | but I think we are going to live with
that, because we don't want to get the
| | 03:40 | file size much bigger and this text
will be moving, so it's unlikely that the
| | 03:45 | viewer will really notice that banding.
| | 03:47 | So I will go through all the frames,
and if I think it looks okay on every
| | 03:51 | frame, then I'll leave it as it is.
| | 03:53 | So, what else could we do to
reduce the file size of this GIF?
| | 03:55 | Well, there really are only two other
choices and they are both pretty extreme.
| | 03:59 | One thing we could do is to
cancel out of Save for Web & Devices,
| | 04:03 | go back to our Animation palette
and delete some of the frames there.
| | 04:07 | But I hesitate to do that, in this case,
because this text is moving down from
| | 04:11 | top to bottom of the image and
I'd like that movement to be smooth.
| | 04:15 | The more frames that you have in an
animated GIF, the smoother it looks.
| | 04:18 | So, I don't want to reduce the number of frames.
| | 04:21 | The only other thing that we could do is to
reduce the actual dimensions of the image.
| | 04:26 | There are many times when you can't
do that because you're designing for
| | 04:29 | specific size, but sometimes you can.
| | 04:31 | So, let's just do it to see
how it will reduce the file size.
| | 04:35 | Notice that, right now, we're at 106.7K.
| | 04:38 | If I go to the Image Size tab here,
behind the Color Table, I can choose to
| | 04:43 | reduce the Width and Height to some
other number of pixels, or I can reduce the
| | 04:49 | Size by a percentage.
| | 04:50 | So, let's just see what happens if we
set this to, say, 60% of its current size.
| | 04:55 | And we want to make sure that when we
are reducing file size, we choose the
| | 04:59 | appropriate algorithm that Photoshop
will use to throw away information.
| | 05:05 | The best choice when you are reducing the
size of any file is to choose Bicubic Sharper.
| | 05:10 | That will do the best job of keeping the
image sharp as it is reduced in dimension.
| | 05:19 | Now, I am going to click Apply and as I do,
keep your eye here on the file size of this GIF.
| | 05:23 | We have taken it down to a respectable
59.47K and we did have to sacrifice quite
| | 05:31 | a bit of Width and Height though to do that.
| | 05:33 | So, now I am all done optimizing and I
am going to click the Save button at the
| | 05:36 | top of the Save for Web & Devices window.
| | 05:40 | That opens the Save Optimized As window.
| | 05:43 | Here, I'm going to navigate to my Desktop
and then I am going down to the Format menu.
| | 05:49 | This time, instead of saving both HTML
and Images, I'm going to save Images Only.
| | 05:55 | The reason for that is that you do not
need an HTML file in order to play a GIF.
| | 06:00 | A web browser will
just play a GIF without the HTML.
| | 06:03 | So, we will choose Images Only
and then I am going to click Save.
| | 06:10 | Now let's look on the Desktop
and there is our animated GIF.
| | 06:14 | It looks just like a static GIF file.
| | 06:16 | I am going to open that in a Web Browser.
| | 06:19 | On a Windows machine, go to File>
Open and navigate to this file.
| | 06:23 | On a Mac, I can just take the file and
I can drag it on top of my default Web
| | 06:28 | Browser and the animation starts to play.
| | 06:32 | As I mentioned, the Web Browser does not
need any HTML to play this animated GIF.
| | 06:37 | It just sees it and knows what to do with it.
| | 06:40 | So that's how you optimize and
save an animated GIF in Photoshop CS3.
| | Collapse this transcript |
| Optimizing transparent animated GIFs| 00:01 | In this chapter, we learned all about
creating animated GIFs and in the preceding
| | 00:05 | chapter, we learned about
making transparent GIFs.
| | 00:08 | Let's pull all of those skills
together and talk about how to optimize a
| | 00:12 | transparent animated GIF, in other
words, an animation that contains
| | 00:17 | transparent pixels.
| | 00:18 | I have already created
such an animation for you.
| | 00:21 | Let me show you what it looks like.
| | 00:23 | It's chai.psd from the
Chapter_11 Exercise Files folder.
| | 00:28 | I am going to click the Play button at
the bottom of Animation palette and keep
| | 00:31 | your eye on the document window to see
this design fade in and then another part
| | 00:35 | of the image fade in and then
those smoke curls just pop in with a slight
| | 00:40 | delay on each one of their frames.
| | 00:42 | So, we use the same principles here
that we learned in earlier movies on
| | 00:46 | creating animated GIFs to make this animation.
| | 00:49 | Now how would we optimize an animation
like this so that the transparent pixels
| | 00:54 | in this Photoshop file stay transparent,
so that we could place this animation
| | 00:59 | on a webpage and be able to see
through the object to the background below?
| | 01:05 | For that, we are going to go to File,
and down to Save for Web & Devices.
| | 01:11 | Here in this Save for Web & Devices
Window, I've chosen the 2-Up tab.
| | 01:16 | On the left side, we see the image as
a Photoshop document and on the right
| | 01:20 | side, we see how it would
look optimized as an animated GIF.
| | 01:24 | The first thing you'll notice about the
preview on the right is that it does not
| | 01:28 | contain the gray and white
checkerboard that indicates transparency.
| | 01:32 | If we look at the controls on the
right side of the Save for Web &
| | 01:35 | Devices window, we see why.
| | 01:37 | It's because the
transparency checkbox isn't checked.
| | 01:41 | So, let's do that and right away, you see
those transparent pixels in the GIF preview.
| | 01:47 | I want to see how this transparent
animated GIF will look on a solid color
| | 01:52 | background of a webpage.
| | 01:54 | So, I am going to set that up by going
over to the Toolbox on the left-side of
| | 01:58 | the Save for Web & Devices window and
clicking in the square of color there to
| | 02:03 | set a new Eyedropper color.
| | 02:06 | That opens the Color Picker and there,
I am going to choose a beige color.
| | 02:11 | I happen to know the RGB values for the color
I want, so I am just going to type those in.
| | 02:15 | There are 195 red, 195 green and 145 blue.
| | 02:23 | I will click OK, and that gives us a
beige color as our Eyedropper color.
| | 02:28 | Now, I'm going to set up the webpage
background to be that same beige color by
| | 02:35 | going to the arrow on the right side
of the Save for Web & Devices window and
| | 02:39 | choosing Edit Output Settings.
| | 02:42 | Here in the Output Settings dialog box,
I will click on the second menu from the
| | 02:46 | top and choose Background.
| | 02:49 | As we learned in the chapter on
Transparent GIFs, here we want to make sure that
| | 02:53 | our animated illustration is
considered a foreground image.
| | 02:57 | So, we will select Image.
| | 02:59 | We are going to skip the Background
Image area because we're not going to have
| | 03:04 | a repeating graphic background here. Instead,
we're going to have a solid color page background.
| | 03:09 | So, to the right of the Color field, I
will click the arrow and from the pop up
| | 03:14 | menu, I am going to choose the
Eyedropper color as my page background.
| | 03:18 | That samples the color
here from the eyedropper slot.
| | 03:22 | And then I will click OK.
| | 03:25 | Let's preview this animated GIF
against that beige background
| | 03:29 | by going to the Preview and Browser
button at the bottom of the Save for Web &
| | 03:32 | Devices window and clicking and here
comes our animation fading in and playing.
| | 03:41 | As you can see, the edges of
the animation look quite jagged.
| | 03:45 | If you've watched the movies on
Transparent GIFs, you know how to fix that.
| | 03:50 | Let's go back into Save for Web & Devices
and we are going to move to the Matte field.
| | 03:57 | If I click the arrow on the Matte field
and I choose the Eyedropper color, the
| | 04:01 | pixels at the edge of the transparent
animated GIF fill with that same beige
| | 04:06 | that I had placed in the Eyedropper color box.
| | 04:10 | If I take the Zoom tool and zoom in, you
will be able to see that better, right here.
| | 04:16 | Now, let's preview our animated GIF
against the beige background, by clicking
| | 04:21 | the Preview and Browser button at
the bottom of Save for Web & Devices.
| | 04:26 | As the animation plays in my web
browser, the edges look nice and smooth,
| | 04:32 | because we have used that matte
color to camouflage the jaggedy edge.
| | 04:36 | I am going to close the web browser and
finish up with my optimization settings.
| | 04:46 | Let's go back to 100% view by double-
clicking the Zoom tool in the Save for Web
| | 04:50 | & Devices window, and then, over on the
right, let's see if we can reduce the
| | 04:55 | number of colors in this animated GIF.
| | 04:57 | So, instead of 128 colors, let's try 64.
| | 05:01 | The problem here is that when we
choose 64, the smoke curls get jaggedy edges.
| | 05:08 | Let's just take a look at the
other frames and see how they look.
| | 05:11 | So, I am going to go down below the
Color Table and click the arrow with
| | 05:14 | the line to the left of it, and that will let
me step through each frame of this animation.
| | 05:28 | So, even though we have smoothed out
the outside edges, I can see that with 64
| | 05:32 | colors, this is not going to work for
me on these internal elements, like the
| | 05:36 | text and the smoke curl.
| | 05:38 | So, what we will do is go back to 128
colors and at this point, we will either
| | 05:44 | have to live with this size or reduce
the entire dimensions of the animated GIF.
| | 05:49 | For now, we will leave it,
and we will click Save.
| | 05:51 | I am going to save on my Desktop and
this time, I am going to set format, not to
| | 05:59 | Images Only, but to HTML and Images,
because I want to save that HTML background with
| | 06:05 | our beige color in it, along
with our transparent animated GIF.
| | 06:09 | I will click New Folder and I will call this
folder 'transan', click Create and click Save.
| | 06:25 | Now, I am going to go out to my Desktop,
look inside my transan folder, there is
| | 06:30 | my HTML file, and inside the
images folder, I have my animated GIF.
| | 06:35 | If I go back and I open that HTML file,
we will see our animated GIF playing in
| | 06:40 | a web browser with nice, smooth
edges, perfectly optimized for the web.
| | Collapse this transcript |
| Animated slideshows| 00:01 | In this movie, I would like to show you
how to make a slideshow of photos as an
| | 00:05 | animated GIF in
Photoshop CS3's Animation panel.
| | 00:11 | I'm starting with two images open from
the Chapter_11 Exercise Files folder.
| | 00:15 | hands.psd is a photograph that I
want to add to my slideshow, and
| | 00:20 | slideshow.psd is the beginning of the
image that we're going to make into an
| | 00:25 | animated slideshow.
| | 00:27 | Basically, what I've done is taken
four different photographs and pulled them
| | 00:31 | all into one Photoshop document.
| | 00:36 | Let me show you what's here. If I turn
the Eye icons off, one by one you can see
| | 00:41 | the various photos in slideshow.psd.
| | 00:45 | To show you how I got all of these
photos into slideshow.psd, I will bring in
| | 00:50 | hands.psd as the last photo in the slideshow.
| | 00:54 | First, with slideshow.psd activated, I
am going to make sure I'm on the top
| | 01:00 | layer in the Layers panel.
| | 01:01 | Then I am going to click on hands.psd
and make sure I have the hands
| | 01:06 | layer selected there.
| | 01:07 | Then I will get my Move tool, and I'm
going to click-and-drag from hands.psd
| | 01:14 | into slideshow.psd and I'm going to
hold down the Shift key as I do that to
| | 01:19 | center hands.psd in slideshow.psd.
| | 01:23 | Now, I am going to close hands.psd.
| | 01:29 | Here in slideshow.psd, I see that my
hands image is too big, so here is a trick
| | 01:35 | for resizing that hands image.
| | 01:39 | On a Mac, I am going to hold down Command+T
for a Free Transform, on a PC that's
| | 01:44 | Ctrl+T. And then on a Mac, I will hold
down, Command+0, on a PC Ctrl+0 and that
| | 01:53 | expands the canvas, so that I can reach
the resizing handles on the hands layer.
| | 01:58 | I am going to click on the Animation panel by
its Title bar and drag it down out of the way.
| | 02:05 | And then I'm going to click on one of
these corner anchor points, I am going to
| | 02:09 | hold down the Shift key, so that I
don't distort the image, and I'm going to
| | 02:14 | drag in from the canvas to
the edge of the photographs.
| | 02:21 | Again, holding the Shift key, I will
do the same thing from the bottom left.
| | 02:27 | And I'll get my photograph so it's just
almost all showing there in the slideshow.
| | 02:32 | And then I will click the big
checkmark in the Transform Options bar to
| | 02:37 | commit that transform.
| | 02:38 | Now, I am going to double-click
my Zoom tool to go back to 100% view.
| | 02:43 | As you can now see in the Layers panel,
we have the hands on a separate layer,
| | 02:48 | above all of the other photographs.
| | 02:54 | So, now I am going to turn
all those layers back on.
| | 02:58 | The next task is to get each one of
these layers into the Animation panel, which
| | 03:03 | I will bring up for you, with each
layer as a separate frame in the animation.
| | 03:10 | I could use the technique that I showed
you in the frame by frame animation movie
| | 03:14 | earlier in this chapter, of
creating a new frame and then turning the
| | 03:20 | Visibility of different layers on and
off on each frame, but that takes quite a
| | 03:24 | bit of time in this case.
| | 03:25 | But there is a faster way to do
this and that is to go to the Animation
| | 03:30 | panel menu, on the right side of the
Animation panel and from there, choose
| | 03:35 | Make Frames From Layers.
| | 03:38 | Photoshop comes to the Layers panel and
automatically takes a layer and makes a frame out of it.
| | 03:44 | And it did this for each one
of the layers in this file.
| | 03:48 | So, now if we were to click through the
frames, keeping our eye in the document
| | 03:52 | window, we will see that we have
individual photographs, one on each frame.
| | 03:57 | Now, I can see that there is no
delay between these photographs.
| | 04:00 | So, if I were to click on the first
of the photographs and then click the
| | 04:03 | Play button in the Animation panel,
obviously the animations is going to play too fast.
| | 04:08 | So, let me click Stop, and what I am
going to do here instead is select all of
| | 04:13 | these frames by clicking the last
frame and then holding the Shift key and
| | 04:16 | clicking the first frame, and as we've
done in other movies, clicking the Time
| | 04:20 | Delay menu and this time,
I am going to choose 0.5.
| | 04:24 | And that will set a delay of half a second
for each of the photographs in the slideshow.
| | 04:27 | Now, I am going to go back to the first
frame and I am going to click the Play
| | 04:31 | button and you can watch our slideshow play.
| | 04:35 | That's fine, except for, I
would like to have instead of these sharp
| | 04:39 | transitions between slides, a
cross dissolve between each slide.
| | 04:43 | So, I am going to click the Stop button and
I'm going to use Tweening to make that happen.
| | 04:49 | First, I am going to click on Frame 1,
hold the Shift key and click on Frame 2.
| | 04:53 | Then I am going to go and click the
Tween button at the bottom of the Animation
| | 04:57 | panel to open the Tween dialog box.
| | 05:00 | I am going to Tween with Selection, in other
words, the two frames that I have selected.
| | 05:06 | As the number of Frames to Add, I will try 5.
| | 05:08 | I will make sure All Layers is
selected and importantly, I will make sure that
| | 05:14 | Opacity is checked as the Parameter to Tween,
| | 05:17 | but I like to leave all three
checked, as I've said in other movies.
| | 05:20 | And then I will click OK.
| | 05:22 | And as you can see, Photoshop has made
five additional frames here, here, here,
| | 05:28 | and here, and here between the two
frames that were already in the slideshow,
| | 05:33 | which are now Frame 7 and Frame 1.
| | 05:35 | Now, let's do the same thing between
the photo of the canisters on Frame 7 and
| | 05:41 | the photo of the cups on Frame 8.
| | 05:43 | I will Shift+Click to select those two
frames and then I'll click the Tween button.
| | 05:50 | All of my settings are sticking from the last
time that I used Tween, so I can just click OK.
| | 05:56 | And Photoshop makes five more
frames in between those two photos.
| | 06:00 | And now we will move over to the right
and I will select the spilled tea image
| | 06:03 | on Frame 13, hold the Shift key and
select the cup's image on Frame 14, click
| | 06:09 | the Tween button, accept
these settings there and say OK.
| | 06:13 | And I'll scroll over to get our last
two photos, which are the cup's image on
| | 06:18 | Frame 19 and holding the Shift
key, the hands image on Frame 20.
| | 06:24 | And again, I will Tween and say OK.
| | 06:28 | Now, I will click the double-arrow to
go back to the beginning, and I am going
| | 06:32 | to play the animation.
| | 06:33 | And you can see that it now does have a cross
dissolve between each one of the photographs.
| | 06:41 | When you play the animation here in
Photoshop, as it becomes more transparent,
| | 06:46 | you can see the gray checkerboard
| | 06:48 | that represents transparency behind the photos.
| | 06:51 | However, this isn't going to be a
problem when we optimize the image as a
| | 06:54 | GIF, because, as we've learned, we
can't have this kind of semi-transparency
| | 06:59 | in an animated GIF.
| | 07:01 | Every pixel in a GIF is either on and off.
| | 07:03 | So, we won't see the checkerboard.
| | 07:04 | I am going to stop this Preview, and
let's go into the Save for Web window
| | 07:10 | and optimize this file.
| | 07:11 | I will go to File and I will go to Save for
Web & Devices, and here is my GIF on the right.
| | 07:18 | It's quite big and so, I am going to
change Diffusion Dither to No Dither.
| | 07:25 | I might also try to lower the number of
colors in this file and then, I'm going
| | 07:31 | to play the animation right here, in
the Save for Web & Devices window, so that
| | 07:35 | I can see how it looks on every frame.
| | 07:37 | And as you can see, we don't have that
problem of seeing through to the
| | 07:41 | gray and white checkerboard.
| | 07:46 | Now, when you try this technique, make
sure that you're using small photographs
| | 07:49 | because your files can get quite big
if you have multiple frames in this sort
| | 07:54 | of animated GIF slideshow.
| | 07:55 | I am going to click the Stop button
and I'm ready to save this animated GIF
| | 08:02 | slideshow by moving to the top of the Save
for Web & Devices window and clicking Save.
| | 08:07 | Out on my Desktop, I'm going to set
format to just Images Only because all we
| | 08:15 | need here is the GIF, and
then I will simply click Save.
| | 08:19 | I am going to go out to my Desktop,
there is my slideshow.gif and I am going to
| | 08:25 | open that in a web browser.
| | 08:27 | I am going to drag that to my default
web browser, or on Windows, choose File>Open
| | 08:31 | in your web browser and navigate to your GIF.
| | 08:34 | And as you can see, it
plays in my default web browser.
| | 08:38 | So, that's how you make an
Animated GIF Slideshow in Photoshop CS3.
| | Collapse this transcript |
|
|
12. SlicingUnderstanding slicing| 00:00 | In this chapter, we are
going to be looking at Slicing.
| | 00:04 | Before we start making our own slices,
I wanted to explain to you what slicing
| | 00:08 | is and why you would want to slice an image.
| | 00:12 | Slicing divides a composition into
multiple areas and each area is saved out of
| | 00:17 | Photoshop as a separate image, a
GIF, a JPEG or a PNG, for example.
| | 00:24 | Why would you want to separate a
composition into multiple areas like that?
| | 00:28 | Let's use this image, javaco_stores.psd
from the Chapter_12 Exercise Files folder
| | 00:34 | to talk about the
reasons to slice a composition.
| | 00:37 | One important reason is if you have
different parts of a composition, like this
| | 00:40 | one, that are likely to optimize
best in different file formats.
| | 00:44 | So, for example, here, on the top-right
of this composition we have a photograph,
| | 00:48 | and we know that photographs
usually optimize best in the JPEG format.
| | 00:53 | Then over here on the left, we have
this JAVACO tea logo, with areas of
| | 00:58 | solid color, and we know that images like this
generally optimize best in the GIF format.
| | 01:04 | So, we would want slice this part of
our composition separately from this part
| | 01:08 | of our composition, so that we could
optimize those two parts separately with
| | 01:12 | the best settings for those individual pieces.
| | 01:16 | There are also some other areas here
that will probably optimize best as GIFs
| | 01:20 | but that will take a different number of colors.
| | 01:23 | So, for example, down here, we have this map.
| | 01:26 | This map is likely to require more
colors than just the JAVACO tea layer which
| | 01:30 | is all flat art, because in the map, we
also have some Photographic Style icons.
| | 01:36 | And the text is likely to optimize as
GIF, but probably with some other number
| | 01:40 | of colors than the logo or than the map.
| | 01:43 | So, we will isolate each
one of those pieces too.
| | 01:46 | So, the need to optimize separate
areas of a composition differently is
| | 01:51 | one reason to slice.
| | 01:54 | Another reason to slice is if you want
to add links to part of a composition.
| | 01:58 | In this case, we have these four flat
art buttons over here, and each of these
| | 02:03 | is going to take a link to a separate webpage.
| | 02:06 | In order to link each of these buttons
separately, we need to get each one out
| | 02:10 | of this composition as a separate image.
| | 02:13 | We can then bring each of the
images into a site building program like
| | 02:16 | Dreamweaver and add our links there.
| | 02:19 | You can actually add links right from
Photoshop, but we usually do it from a
| | 02:23 | program like Dreamweaver.
| | 02:25 | In any event, the necessity of
creating links from each of these buttons
| | 02:29 | requires us to slice each button
separately from the rest of the page and we
| | 02:34 | will probably save each one of these
buttons as a GIF, because each is flat art.
| | 02:38 | There is one more reason that you
sometimes need to slice and that is if you're
| | 02:43 | adding an animation to
part of a larger composition.
| | 02:46 | So, let's say we wanted this cup to
animate by fading in, we would have to
| | 02:50 | create a slice around the cup, so that
we could animate that without affecting
| | 02:54 | the rest of the composition.
| | 02:56 | So, that's why to slice.
| | 02:58 | Now, let's take a quick
look at what slices look like.
| | 03:01 | I'm going to go to the View menu
and then down to Show and then over to
| | 03:05 | Slices, because I have already sliced
up this image and I'd like you to see
| | 03:09 | what those slices look like.
| | 03:11 | What's going happen when we save out
this image? Each one of these sliced
| | 03:15 | areas, the areas surrounded by these boxes,
is going to be saved as a separate GIF or JPEG.
| | 03:22 | In addition, we are going to ask
Photoshop to save an HTML file for us, and
| | 03:27 | in that HTML file there will be a
HTML table that will take all of the
| | 03:33 | separate sliced images and reassemble them into
this composition when viewed in a web browser.
| | 03:38 | So, that's an overview of what slicing is,
why you would want to do it and how it works.
| | 03:45 | There are three different kinds of
slices that can be made in Photoshop CS3.
| | 03:50 | Those are called User Slices,
Auto-Slices and Layer-Based Slices.
| | 03:55 | In the next movie, we are going to
start by taking a look at how to create
| | 03:58 | User Slices.
| | Collapse this transcript |
| Creating user slices| 00:01 | Now that we know what slicing is
and when to slice, let's get started
| | 00:05 | making some slices.
| | 00:07 | In this movie, we're going to work
with javaco_stores_02.psd, which is an
| | 00:12 | unsliced composition.
| | 00:14 | We're going to be creating some user
slices and letting Photoshop also create
| | 00:19 | another kind of slice for
us, known as Auto-Slices.
| | 00:23 | Before we get started slicing, I want to
make sure that the Snap To feature is on.
| | 00:28 | Then my slices will more easily snap
to the edges of individual elements, like
| | 00:34 | the artwork on layers, or
like the edges of other slices.
| | 00:38 | To turn Snap To on, I'm going to the
View menu, and I'm going to go down, and
| | 00:43 | when I see that there is no checkmark
next to Snap, I'm going choose Snap To,
| | 00:48 | and go all the way down to All.
| | 00:51 | Now we're ready to make our first user slice.
| | 00:55 | I'm going to go to the Toolbox and I'm
going to select the tool called the Slice Tool.
| | 00:59 | Then I am going to go into my image, and
I'm just going to click-and-drag around
| | 01:04 | the Javaco tea logo.
| | 01:05 | And the slice I'm making automatically
snaps to the edges of the Javaco logo,
| | 01:11 | because I did turn Snap To on.
| | 01:14 | As you draw this slice, you
may see some magenta lines.
| | 01:17 | Those are Smart Guides.
| | 01:19 | I turned mine off to make it easier for
you to see my slices, but you can also
| | 01:22 | use your Smart Guides to help you
line up this slice that you're creating.
| | 01:27 | When I release my mouse, I can see
that I have more than one slice here.
| | 01:32 | The slice that I just drew
has a blue number on it.
| | 01:36 | That blue number indicates
that this is a user slice.
| | 01:39 | User slice just means a slice that
I, the user, drew using the Slice Tool.
| | 01:45 | Notice that there are some other
slices here that have gray numbers:
| | 01:48 | slice 01, slice 03, and slice 04.
| | 01:51 | These are called Auto-Slices.
| | 01:54 | Photoshop automatically made these
slices for us, as we made our user slice.
| | 02:00 | Every time that I draw a new user slice
, Photoshop will come in behind me and
| | 02:04 | redraw these Auto-Slices.
| | 02:07 | Why do we need these Auto-Slices?
| | 02:10 | That's because every pixel in this
file always has to be accounted for by one
| | 02:14 | slice or another, because under the
scenes, Photoshop is getting ready to
| | 02:19 | generate an HTML file that
will contain an HTML table.
| | 02:24 | The HTML table will have
rectangular table cells.
| | 02:28 | Each of the images that we are
generating from the slices here can then be
| | 02:32 | reassembled into this composition by
placing them inside of one or another of
| | 02:37 | the rectangular table cells.
| | 02:39 | So basically, Photoshop is mocking
up that rectangular table here in the
| | 02:44 | arrangement of slices that it's
continually redrawing, as we make our user slices.
| | 02:50 | To see what I mean, let's actually take a
look at that by drawing another user slice.
| | 02:54 | This time let's come in and, with the
Slice tool, let's draw a slice around the
| | 02:58 | About Us button, letting the
slice snap to the edges there.
| | 03:03 | As you can see, we now have another
blue user slice, and then we have another
| | 03:07 | auto slice beneath it, slice 06.
| | 03:09 | There is also some functional
difference between user slices and Auto-Slices.
| | 03:14 | For one thing, you can adjust the
edges of a user slice, like this one, by
| | 03:20 | clicking-and-dragging the borders of the slice.
| | 03:22 | I'll put that back where it was.
| | 03:24 | But you can't adjust the borders of in
auto slice, like this gray slice, number 04.
| | 03:30 | If you do want to adjust the borders of an
auto slice, you can promote it to a user slice.
| | 03:35 | So let's do that.
| | 03:37 | First, I'm going to go back to the
Toolbox, and from behind the Slice Tool, I'm
| | 03:41 | going to select another tool
called the Slice Select Tool.
| | 03:46 | With the Slice Select Tool, I'm going
to click on this gray auto slice number
| | 03:50 | 04, the slice around the Products button.
| | 03:53 | What I want to do is to drag the borders of
this slice closer into the Products button.
| | 03:57 | But I can't do it right now
because this is just an auto slice.
| | 04:02 | So with slice number 04 selected, I'm
going to go up to the Options bar for the
| | 04:06 | Slice Select Tool, and click
the Promote button right here.
| | 04:09 | That's changed our number 04 slice
from an auto slice into a user slice.
| | 04:15 | You can tell because the slice number
has now changed to blue, and because the
| | 04:20 | border around the slice
now has these nodes on it.
| | 04:23 | I can click on any one of those nodes
and drag that border in, so that it's
| | 04:28 | closer to the Products button.
| | 04:30 | Let's go in and slice the rest of our buttons.
| | 04:33 | I'm going to go back to the Toolbox and
I'm going to select the Slice tool again.
| | 04:37 | Then I'm going to come down and draw a
rectangular slice around Our Stores, and
| | 04:43 | another around Contact Us.
| | 04:45 | Now, let's talk about how we can modify slices.
| | 04:48 | On a Mac, I'm going to hold down the
Control key, as I click in this large, gray
| | 04:53 | auto slice over here on
the right, slice number 03.
| | 04:56 | On a PC, you would right-click in this slice.
| | 04:59 | That brings up this contextual menu
and it gives us the option to divide this
| | 05:03 | large slice into
multiple slices. Let's do that.
| | 05:07 | Sometimes this is more
efficient than drawing slices by hand.
| | 05:12 | Here I can choose how many slices
I would like to divide this into.
| | 05:16 | I can choose to divide it only
horizontally, only vertically.
| | 05:19 | And in each direction, I can type
in the number of slices that I want.
| | 05:24 | Because I used this dialog box before,
it's already set up for two slices
| | 05:29 | horizontally evenly spaced,
and two vertically evenly spaced.
| | 05:33 | If you're following along, you can type
that into your dialog box and I can see
| | 05:37 | a preview of those slices here.
| | 05:40 | If I like them, I'll click OK.
| | 05:43 | I could then move my mouse over the
borders of those slices and reposition
| | 05:47 | them if I needed to.
| | 05:49 | Let's say I have multiple slices and I would
like to combine them all into one large slice.
| | 05:54 | First, I would make sure that all of
the slices were selected by holding down
| | 05:58 | the Shift key and clicking in each
slice with the Slice Select Tool.
| | 06:02 | In this case, I already
have all four slices selected.
| | 06:05 | So now I can come into any one of these
slices and on a Mac hold the Control key
| | 06:09 | and click, on a PC, right-click
to bring up this contextual menu.
| | 06:14 | I see that one of the
choices here is Combine Slices.
| | 06:17 | So I'll choose that one, and all
four of those slices have now been
| | 06:21 | combined into one large user slice, which has
a blue number telling us it is a user slice.
| | 06:28 | Another thing you can do from a contextual
menu inside a slice is to delete a slice.
| | 06:33 | So let's try that.
| | 06:35 | Again, I'm going to Control+Click on a
Mac, or right-click on a PC inside this
| | 06:39 | slice, and I see that one of my
choices is to delete the slice.
| | 06:43 | So I'll select that and it
does indeed delete the user slice.
| | 06:47 | But notice that we still
have this gray auto slice here.
| | 06:52 | So that's how you create and modify user
slices, and their cousins, Auto-Slices.
| | 06:58 | Next up, we're going to be taking a
look at how to make another kind of slice,
| | 07:01 | a layer-based slice.
| | Collapse this transcript |
| Creating layer-based slices| 00:00 | In this movie, we are going to talk
about another kind of slicing in Photoshop
| | 00:04 | CS3, Layer Based Slicing.
| | 00:06 | If you are working along with me and
you still have your file open from the end
| | 00:10 | of the last movie in which we
learned about user and auto slices, you can
| | 00:14 | continue to use that file.
| | 00:16 | Otherwise, if you have access to the
Exercise Files, you can open a fresh copy of
| | 00:20 | that file, javaco_stores_03.psd from
the chapter12, Exercise Files folder.
| | 00:27 | As you can see, in this file we've
already created our five user slices over here.
| | 00:32 | Now let's go to the Layers panel and
expand the our stores layer group by
| | 00:36 | clicking the arrow to the
left of that layer group.
| | 00:38 | Out stores layer group contains these
four slices: the map, a type layer, a
| | 00:45 | rasterized text layer and a cup.
| | 00:47 | We are going to create a separate layer-
based slice around the content of each
| | 00:53 | one of these layers.
| | 00:54 | Let's start by making one layer-based slice.
| | 00:57 | We will select the cup layer and because
we've had the foresight to put just the
| | 01:01 | cup on a separate layer, as you can
see, if I turn the layer on and off,
| | 01:06 | we can use the automatic layer-
based slicing feature in Photoshop.
| | 01:10 | All we have to do is come up to the Layer
menu, and go down to New Layer Based Slice.
| | 01:17 | Photoshop draws a slice around
just the contents of the cup layer.
| | 01:21 | The icon indicates that this is a
special kind of slice, a Layer Based Slice.
| | 01:26 | You'll notice that its icon is
slightly different from the icon on the user
| | 01:29 | slices that we drew with the Slice Tool.
| | 01:32 | What's the advantage of
using a Layer Based Slice?
| | 01:35 | The advantage of Layer Based Slicing
is that these slices will move with the
| | 01:39 | underlying layer content.
| | 01:41 | What do I mean by that?
| | 01:43 | Well, first let's see what happens when
we try to move the content that's inside
| | 01:47 | of a user slice, the kind of slice
that we draw with the Slice Tool.
| | 01:52 | I'm going to go over to the Toolbox,
and make sure that I have the Move tool
| | 01:55 | selected, and then I'm going to go
into the Layers panel, and I am going to
| | 01:59 | select the javaco logo layer.
| | 02:03 | That's the layer that contains just
this JAVACO logo that I am turning on
| | 02:06 | and off for you to see.
| | 02:09 | With the Move tool, I am going to go
click-and-drag that logo over to the right.
| | 02:14 | Now I'm not dragging the slice, I am
dragging the underlying layer content, and
| | 02:18 | slices are very different than layers.
Please don't mix those two concepts up.
| | 02:22 | Notice that when I move the javaco tea
layer content, the slice that was around
| | 02:27 | that content, slice number 02, doesn't move.
| | 02:30 | It just stays where it was.
| | 02:32 | That means that if we did have to
come in and edit our composition and move
| | 02:36 | different content to different places
in the composition we would have to redo
| | 02:41 | all of our user slices, because they
would not move with the layer content.
| | 02:45 | I am going to Undo to put that
layer content back where it was.
| | 02:50 | And now let's see what happens if
we resize the content of this slice.
| | 02:55 | So with the cup layer still selected, I'm
going to go up to Edit and down to Free Transform.
| | 03:01 | And then I'm going to put my
mouse over one of these corner nodes.
| | 03:05 | I am going to hold the Shift key to
constrain proportion, and I'm going to drag
| | 03:09 | in to make the cup image smaller.
| | 03:12 | Then I'm going to click the checkmark in
the Options Bar to accept that transform.
| | 03:16 | And as I do that, keep your eye
on Layer Based Slice number 05.
| | 03:21 | The slice automatically shrank down to
surround the resized content of the layer.
| | 03:26 | So not only does a Layer Based Slice
follow layer content when you move content,
| | 03:30 | it also follows layer content
when you resize that content.
| | 03:35 | Let's undo that change by
going to Edit>Step Backwards.
| | 03:40 | And I'd like to show you one more thing.
| | 03:42 | Let's say that I add a layer effect
to this cup layer that's bigger than
| | 03:47 | the existing slice.
| | 03:49 | The slice will expand to
fit that large layer effect.
| | 03:53 | So to try that out, with the cup layer
selected in the Layers panel, I am going
| | 03:57 | to go down to the fx button at the
bottom of the Layers panel, and I'm going
| | 04:01 | to choose Drop Shadow.
| | 04:05 | And then I'm going to expand the Size
of the Drop Shadow in the Layer Style
| | 04:09 | dialog box by pulling to the right.
| | 04:11 | We'll make a pretty big
shadow just to make the point.
| | 04:14 | And then I am going to go click OK.
| | 04:16 | And did you see that the number 05
layer-Based Slice expanded, got bigger, to
| | 04:21 | accommodate that large Drop Shadow?
| | 04:25 | Let's undo that as well, Edit>Step Backward.
| | 04:28 | So as you can see, Layer Based slicing
does have some advantages over user slicing.
| | 04:34 | Another nice thing about Layer Based
slicing is that you can create more than
| | 04:37 | one layer-based slice at once.
| | 04:39 | To see that, let's go over to the Layers
panel, and I am going to click there on
| | 04:43 | the map layer, hold the Shift key, and
click on the easy to find hard to forget
| | 04:47 | layer, selecting the layer in between.
| | 04:50 | With those three layers selected, I'm
going to go up to the Layer menu and choose
| | 04:54 | New Layer Based Slices.
| | 04:57 | And that automatically makes three
layer-based slices, one around, the easy
| | 05:01 | to find hard to forget rasterized text,
another around this type, and a third around the map.
| | 05:10 | So you may be wondering, "If layer-based
slices are so great, why don't we always
| | 05:14 | use them and just forget about user slices?"
| | 05:16 | Well, one reason is that we may not
have separate pieces of content on separate
| | 05:21 | layers, and in those cases all
we can do is user-based slicing.
| | 05:25 | In addition, there are some things you
can do to user slices that you can't do
| | 05:29 | to layer-based slices.
| | 05:30 | One of those things is that you can
adjust the borders of a user slice but you
| | 05:35 | can't adjust the borders of a layer-based slice.
| | 05:39 | Let's take a look at layer-based slices
number 11, 17, and 23 that we just made.
| | 05:45 | Notice that their right edges are not
aligned, and that causes there to be some
| | 05:49 | additional auto slices over here.
| | 05:51 | Often, there is an advantage to
not having too many extra slices.
| | 05:56 | So I would like to align the right
edges of each one of these slices.
| | 06:01 | If I have the Slice Select tool and I
click in any of these layer-based slices,
| | 06:05 | I just can't grab the
slices, and change their edges.
| | 06:08 | You can't do it with a layer-based slice.
| | 06:10 | So I am going to select all three of
these slices by holding down the Shift key,
| | 06:16 | and clicking inside of those three
slices with the Slice Select Tool.
| | 06:20 | Then I am going to go up to the Tool Options
for the Slice Select tool and click Promote.
| | 06:26 | That changes my layer-
based slices into user slices.
| | 06:29 | And you can see that immediately
we have some editing nodes there.
| | 06:33 | And I can now come into the edge of
slice number 17 and pull it over to the
| | 06:37 | right and line it up with slice 24.
| | 06:39 | And I have eliminated one
of those extra auto slices.
| | 06:43 | I can do the same now with slice 11,
moving over its border and lining it up
| | 06:48 | with those other two user slices, and
now we only have one auto slice over here,
| | 06:53 | instead of the several
that we had a few minutes ago.
| | 06:56 | So that's a look at layer-based slicing.
| | 06:59 | In the next movie, we are going
to be talking about Slice Options
| | 07:02 | including Naming Slices.
| | Collapse this transcript |
| Adding slice options| 00:01 | Now that you know how to create layer-
based slices and user slices, let's talk
| | 00:05 | about how to name our slices,
and add some other options to them.
| | 00:10 | It's important that you give your slices
meaningful names because the slices are
| | 00:14 | going to be generating GIFs and JPEGs
that you'll be wanting to identify later
| | 00:19 | as you build your pages out
in a program like Dreamweaver.
| | 00:23 | So let's see how we can give the JAVACO
tea logo slice here a meaningful name.
| | 00:28 | I am going to get my Slice Select tool
in the Toolbox, and then I am going to
| | 00:33 | go to click on the JAVACO slice and go up
to the Options Bar for the Slice Select Tool.
| | 00:38 | I am going to go click on this icon on
the right side of the Options Bar to open
| | 00:42 | the Slice Options dialog box.
| | 00:45 | Here in the Name field, you can
see the default name of this slice.
| | 00:49 | It's not very meaningful, and
it's quite long, javaco_stores_04_02.
| | 00:55 | That name comes from the name of the
source file, javaco_stores_04.psd, with the
| | 01:01 | slice number 02 tacked on the end.
| | 01:04 | So I am going to change that, by
selecting it, pressing the Delete or Backspace
| | 01:09 | key on my keyboard, and typing something
short, sweet, and meaningful, like logo,
| | 01:15 | and then clicking OK.
| | 01:17 | Now when we generate a GIF from
this slice, that GIF would bear the
| | 01:21 | meaningful name logo.gif.
| | 01:25 | Let's go ahead and click on the
PRODUCTS slice, and with that slice selected, I
| | 01:29 | am going to go up to the Options Bar
again, and click on that logo to open the
| | 01:33 | Slice Options dialog box.
| | 01:35 | I am going to select the default name,
and press the Delete or Backspace key,
| | 01:40 | and this time, I'm going to type 'products_button'.
| | 01:45 | Why did I use an underscore?
| | 01:47 | Because when we are creating a slice
name that can generate a file name, we
| | 01:52 | don't want to have spaces in our names.
| | 01:54 | That's because some web servers have
trouble with file names that have spaces in them.
| | 01:59 | For a similar reason, I try not to
use unusual characters, or uppercase
| | 02:03 | when naming my slices.
| | 02:05 | So I'll click OK here.
| | 02:07 | And let's do the same thing with the
ABOUT US button, selecting it with the Slice
| | 02:11 | Select Tool, going to the Options Bar,
clicking the button to open Slice Options
| | 02:16 | and typing in a meaningful name, 'about_button'.
| | 02:23 | Before we leave the Slice Options
dialog box, let me just talk briefly
| | 02:26 | about these other fields.
| | 02:27 | In the URL field, you could
type a link to another webpage.
| | 02:32 | Usually I don't do this in Photoshop,
with a button like this that's going to
| | 02:36 | link to an internal page in my site,
because I don't yet know the file structure
| | 02:40 | of my site, and where the individual
pages will be in that file structure.
| | 02:44 | But just to show you how it works,
I am going to type an external URL
| | 02:48 | http://www.lynda.com, which is a link
to the homepage of the lynda.com website.
| | 02:57 | In the Target field, I can type _blank
as an HTML instruction to open the URL to
| | 03:05 | which we've linked in a
separate Web Browser window.
| | 03:08 | And Message Text I usually don't
bother with, but I always try to put Alt Tag
| | 03:13 | behind any important image.
| | 03:15 | Alt Tag is used by reading machines
that make the web more accessible to those
| | 03:22 | who are visually-impaired
and can't see my images.
| | 03:25 | So in the Alt Tag field for this selected
button, I'm going to type about us link.
| | 03:33 | So that a reading machine will know
and report that this is indeed a link.
| | 03:38 | And then I'm going to click OK.
| | 03:41 | I would continue normally going through
the important slices here, all the user
| | 03:44 | slices, and giving them names
and adding Alt Text behind them.
| | 03:49 | But for now, I'd like to
show you what we've created.
| | 03:51 | So I'm going to go to File>Save for Web and Devices.
| | 03:55 | And from that window, I am going to go
click the Preview in Browser button down here.
| | 03:59 | Don't worry about the fact that some of our
images don't look right in the GIF preview.
| | 04:03 | We'll come back in another movie and
talk about optimizing sliced images.
| | 04:07 | I'll just click this button to view our
page in a Web Browser, and what I'd like
| | 04:13 | you to see is that when I move my mouse
over this ABOUT US button, which I just
| | 04:18 | programmed to be a link in
Photoshop, the cursor changes to a hand.
| | 04:23 | And that hand is a sign
that this is indeed a link.
| | 04:26 | If I click there, it opens in a separate
Browser window, the lynda.com homepage.
| | 04:33 | Let's close that page, and I am going
to do this to simulate the situation of a
| | 04:38 | reading machine that can't see the images.
| | 04:40 | So I'm going to go up to my Safari
Preferences, and I'm just going to uncheck in
| | 04:45 | the Appearance section, Display
images when the page opens, and close that.
| | 04:50 | And then I'm going to reset this Browser page.
| | 04:53 | Now you can see how our sliced page
would look in a Web Browser if the
| | 04:57 | images were turned off.
| | 04:58 | And you can see where the ABOUT US
button was the Alt Text about us link that
| | 05:03 | can be read by a reading machine.
| | 05:05 | I am going to go close the Browser
window here, go back to Save for Web and
| | 05:10 | Devices and Cancel out of there.
| | 05:13 | And now we are back in our sliced
image, where we would continue to select the
| | 05:17 | user slices and give them names.
| | 05:20 | When all that's done it will be time
to optimize and save the multiple slices
| | 05:25 | that we've created in this composition,
and that's what we are going to talk
| | 05:28 | about in the next movie.
| | Collapse this transcript |
| Optimizing and saving slices| 00:01 | The last step in preparing a
composition that has multiple slices in it, like
| | 00:05 | this one, is to optimize and save those slices.
| | 00:09 | If you have access to the
Exercise Files, open javaco_stores_05.psd.
| | 00:15 | This version of our composition has
user slices that have all been named, so
| | 00:20 | it's ready to optimize.
| | 00:22 | To optimize the slices, we'll go to File
and we will go to Save for Web & Devices.
| | 00:27 | Here, I am going to click on the
Optimized tab, so that I can see my
| | 00:30 | entire composition.
| | 00:33 | As you can see, there's quite a bit of
work to do here, but I am going to try to
| | 00:36 | show you some ways to go about it
that will make it go as fast as possible,
| | 00:39 | because our task is to optimize each slice.
| | 00:44 | First, I am going to go over to the
Toolbox in the Save for Web & Devices window
| | 00:48 | and get my Slice Select tool from there
and then I am going to start with this
| | 00:52 | slice in the top right, which I know is
the cup photo, and so this is probably
| | 00:56 | the only slice that we are
going to want to optimize as a JPEG.
| | 00:59 | So I will select that slice and then
I'm going to go over to the controls on
| | 01:03 | the right and I'm going to change
Format from GIF to JPEG, and already that
| | 01:08 | slice looks a lot better.
| | 01:11 | Down on the bottom left, I can see the
current file size, using the settings for
| | 01:15 | JPEG that we have here on the right.
| | 01:17 | I would like to get that file size
down, so I am going to try Medium.
| | 01:22 | And I'm not sure I like that quality.
| | 01:24 | I would like a little more quality.
| | 01:25 | So I am going to go to the Quality
field and increase the quality from the
| | 01:29 | Preset of 30 up to about 50 and that
brings my file size down, as you can see here.
| | 01:37 | Now I am going to go to the next most
complicated slice, which is this map, and
| | 01:41 | I am going to click on it.
| | 01:43 | This slice will optimize as a GIF,
because it's primarily made of flat art.
| | 01:47 | So I will go to my controls over here
and I see that there are only two colors
| | 01:53 | set for this slice, and that's why we
don't see much of the content of the slice.
| | 01:57 | So I am going to change that to 64 colors and
let's see how our slice looks. Not too bad.
| | 02:04 | Let me see if it's much better at 128
colors and that does make this white
| | 02:09 | teacup photo look a lot better.
| | 02:11 | Our slice is only 10K, so
I am going to accept that.
| | 02:15 | I also know that the layer on which
the map is located has transparent
| | 02:19 | pixels around the map.
| | 02:20 | So I'm going to want to check
Transparency for this slice and I'm also going to
| | 02:25 | check that my Matte color is set to White,
because I'm going to be placing these
| | 02:29 | foreground images on a white background.
| | 02:33 | I can also check the Color Reduction palette.
| | 02:36 | With Selective we have 10.05K, with
Perceptual, the file size is a little
| | 02:41 | higher, and with Adaptive it's 10.2K.
| | 02:45 | I think that the map looks best at Selective,
| | 02:48 | so I am going to go back to that.
| | 02:51 | That's how I would proceed around this image.
| | 02:54 | So I might click here on slice 2,
which contains our Javaco tea logo.
| | 02:58 | This is going to be a GIF
because it's flat art.
| | 03:00 | I am going to go the Colors field and I
am going to start increasing the number
| | 03:04 | of colors until I get the
look that I want in this logo.
| | 03:07 | It looks like I will need at
least 16, with a file size of 1.722K.
| | 03:14 | 32 looks even better and takes me to
only 2.081K, so I'm going to select that.
| | 03:20 | So I am going to stop at 32 colors.
| | 03:22 | Now I'm going to optimize
these four button slices.
| | 03:28 | Fortunately, I don't have
to do each one separately.
| | 03:31 | I'm going to Shift+Click on the four
slices to select all four and then I'm
| | 03:37 | going to go over to my GIF Settings,
because this is flat art, and I am going to
| | 03:40 | increase the number of Colors until
those buttons look the way I want them to
| | 03:45 | look, and I am checking the file size as I go.
| | 03:47 | I think 16 is going to be the minimum and
we do have a pretty low file size for those,
| | 03:54 | so I will settle at 16.
| | 03:56 | I will go to this text layer and I
will select it and I am going to go
| | 03:59 | through the same process of
increasing the number of colors until that text
| | 04:03 | looks nice and smooth.
| | 04:04 | Again, I think it's going to be 16
and probably the same for the other
| | 04:09 | text layer as well. Let's see.
| | 04:11 | No, I think we can
actually get away with 8 there.
| | 04:14 | So now I have optimized all of my user slices.
| | 04:18 | There is one more thing to do and that
is to select the auto slices, like this
| | 04:24 | green slice up here.
| | 04:25 | If you notice, all of the auto slices
have this symbol here, which means that they
| | 04:30 | are all linked together
for purposes of optimization.
| | 04:33 | So I only have to click on one of the
user slices and choose the number of
| | 04:37 | colors that I want there.
| | 04:38 | I think 4 colors is going to be enough.
| | 04:41 | I will leave the other
settings at their defaults for now.
| | 04:45 | So now if I click on another on auto
slice, like slice number 1, as you can see,
| | 04:49 | it's already been optimized with
the same settings as slice number 3.
| | 04:54 | So we only have to do one of the auto slices.
| | 04:58 | Now we are all done optimizing
and we can save our multiple slices.
| | 05:02 | To do that, I am going to click the Save
button at the top of the Save for Web &
| | 05:06 | Devices window and I'm
going to go out to my Desktop.
| | 05:10 | There I'm going to make a New Folder
and I will call this my javaco folder and
| | 05:16 | I will click Create.
| | 05:17 | I am going to go to the Format field and
change that from Images Only to HTML and Images.
| | 05:25 | That's because along with all of the
images that are going to be generated from
| | 05:29 | the sliced composition, I would like
to save an HTML file that will contain a
| | 05:34 | table that will reassemble all of
these separate images in a web browser.
| | 05:38 | So I will choose HTML and Images and I will
check that Slices is set to Save All Slices.
| | 05:46 | So now I will click Save and in just a
moment, Photoshop has generated JPEGs and
| | 05:53 | GIFs and written an HTML file for me.
| | 05:56 | Let's go out to the Desktop and
see what Photoshop has generated.
| | 06:01 | Here is the javaco folder.
| | 06:03 | I am going to open that folder and
there I see the HTML file and I see
| | 06:07 | this images folder. Let's open that.
| | 06:11 | I'm going to choose to view that as a
list and I will make it bigger so that
| | 06:15 | we can see that Photoshop has
generated a user slice for each one of the
| | 06:20 | buttons, the about_button, the contact
_button, here is the products_button,
| | 06:23 | and the stores_button.
| | 06:25 | It's generated a JPEG for the cup photo
and then all of the other images that we
| | 06:31 | named, the easy_headline,
the logo, the map, et cetera.
| | 06:36 | These images with the long file
names are the auto slices, the ones I
| | 06:40 | didn't bother to name.
| | 06:41 | So if, for example, I were to open this
cup image by double-clicking it, here
| | 06:46 | it is in Photoshop and as you can see,
it's a separate file that is only the
| | 06:50 | cup, saved out from the layer-based
slice that we had created around the cup
| | 06:54 | image in our composition.
| | 06:57 | And if we open another one of these,
say the about_button, we will find a
| | 07:01 | small GIF that is just the about_button,
around which we had drawn a user slice
| | 07:05 | in our composition.
| | 07:07 | Now, let's go back and take a look at
the HTML file that Photoshop generated.
| | 07:11 | I am going to click the Back button
and there is my javaco_stores_05.html.
| | 07:16 | I will double-click that HTML file and
it opens in my web browser and you can
| | 07:20 | see all of the optimized images
reassembled by the HTML table that Photoshop
| | 07:25 | generated behind the scenes.
| | 07:28 | So that's how you optimize and save
a composition with multiple slices.
| | Collapse this transcript |
|
|
13. Rollover GraphicsCreating rollover graphics with layer comps| 00:00 | This chapter is all about
creating the graphics for rollovers.
| | 00:04 | I am sure you have seen rollovers on
the web and you know that they can come in
| | 00:08 | handy for many purposes.
| | 00:10 | Rollovers can help your viewers
understand where they are in your website.
| | 00:14 | Rollovers can help viewers find a
link and rollovers can offer additional
| | 00:18 | information, either in the form
of text or in the form of graphics.
| | 00:23 | In the next few movies, we are going to
step through the process of creating the
| | 00:26 | graphic content for
rollover states in Photoshop.
| | 00:31 | The process that we will be using will
involve Layer Comps and it will involve a
| | 00:35 | special script that lynda.com has
created along with script expert Trevor Morris
| | 00:41 | and that we are making
available to you for free.
| | 00:44 | This script will help you to export the
sliced content of multiple Layer Comps all at once.
| | 00:50 | Before we get started building a
navigation bar with rollovers, let's see
| | 00:54 | where we are going.
| | 00:56 | Here on web browser, you can see some
simple buttons in their normal state and if
| | 01:01 | I move my mouse over these buttons,
they change to the over state.
| | 01:04 | There actually are two
different graphics here for each button.
| | 01:08 | There is a normal state
graphic and an over state graphic.
| | 01:11 | These graphics are swapped out
by JavaScript behind the scenes.
| | 01:15 | In Photoshop, you can create the
graphics for rollovers like these and that's
| | 01:19 | what we are going to do in the next
few movies, but you can't create the
| | 01:22 | JavaScript that makes them roll over.
| | 01:25 | In ImageReady CS2, you used to be able
to do that, but unfortunately, Creative
| | 01:30 | Suite 3 does not include ImageReady.
| | 01:32 | So if you do want to make your graphics
for rollovers like these in Photoshop,
| | 01:37 | then you will have to bring those
graphics out of Photoshop and into another
| | 01:41 | program, like Adobe Dreamweaver
CS3, to program the rollovers.
| | 01:46 | So let's get started making our
rollover graphics in Photoshop CS3.
| | 01:50 | I am going to close the Safari web
browser and then I'm going to go into
| | 01:55 | navbar.psd, which I have opened from
the Chapter 13 Exercise Files folder.
| | 02:01 | If you're not using the Exercise Files,
you can create a file just like this
| | 02:05 | by setting up a solid color
background and then drawing four simple shapes,
| | 02:09 | each on a separate layer, for the
four buttons and then creating four text
| | 02:13 | layers on top of each button.
| | 02:15 | The first step in creating this
navigation bar is to slice the four buttons.
| | 02:19 | We are going to use layer-based slicing for that.
| | 02:22 | So we are going to Layers panel and
select the products layer in the buttons group.
| | 02:27 | Then, holding the Shift key, select the
contact layer and that selects all four
| | 02:32 | of the button layers.
| | 02:34 | Then go up to the Layer menu at
the top of the screen and down to New
| | 02:38 | layer-based Slices.
| | 02:39 | That creates a layer-based slice
around each one of the buttons surrounded by
| | 02:43 | these gray auto slices.
| | 02:45 | If you need to review layer-based
slicing, you can revisit the movie on that
| | 02:49 | subject in the Slicing chapter.
| | 02:51 | The next step is to set up the
appearance of each of our buttons on the normal
| | 02:55 | state of the rollovers.
| | 02:57 | We are going to do that using the Styles panel.
| | 02:59 | Let's make sure that our panels are all
arranged the same way before we choose a style
| | 03:04 | by going up to the Window menu and
choosing Workspace>Default Workspace.
| | 03:09 | Then go to the outer column and let's
close this first panel group, the one that
| | 03:14 | says Navigator, Histogram and Info by
clicking the red X on that panel group and
| | 03:19 | finally, in the Color, Swatches, and
Styles panel Group, click the Styles tab to
| | 03:24 | bring the Styles panel to the forefront.
| | 03:26 | The Styles panel displays a set of
default styles. Rather than the default styles
| | 03:32 | that we now see in the Styles panel,
| | 03:34 | let's load some special web
styles that shipped with Photoshop CS3.
| | 03:38 | To do that, go to the panel menu icon
on the right side of the Styles panel,
| | 03:42 | click and from the pop-up menu, choose
Web Styles from the bottom of the menu.
| | 03:49 | At the message, click OK to replace
the default styles with the Web Styles.
| | 03:54 | Now let's apply one of these Web styles.
| | 03:56 | Double check, in your Layers panel, that
you have the products, about, stores, and
| | 04:00 | contact button layers all selected
and then go to the Styles panel and just
| | 04:05 | click on this Blue Gel style.
| | 04:08 | And that styles all four of our
buttons in the Document Window.
| | 04:11 | In the Layers panel, you can see the
effects that make up the style on each one
| | 04:15 | of the button layers.
| | 04:17 | The next step is to take a snapshot of
the appearance of the buttons right now
| | 04:22 | and to save this as our
normal state of the buttons.
| | 04:24 | To do that, we will be using Layer Comps.
| | 04:26 | I am going to open the Layer Comps panel
by clicking its icon right here in this
| | 04:31 | inner column of panels.
| | 04:33 | If you haven't set up your panels like
these, then just go to the Window menu
| | 04:36 | and choose Layer Comps to open his panel.
| | 04:39 | Layer Comps take snapshots of the
state of layers at any one point in time.
| | 04:44 | So we are going to take a snapshot
of the way our layers look right now.
| | 04:47 | To do that, I will go to the bottom of
the Layer Comps panel and I am going to
| | 04:50 | click the Create New Layer Comp icon here.
| | 04:53 | That opens the New Layer Comp dialog box
and I am going to name this Layer Comp 'normal'.
| | 04:58 | Here we see a list of the various
parameters that Layer Comps can memorize.
| | 05:03 | They can keep track of layer Visibility,
of the Position of artwork on layers,
| | 05:07 | and of the Layer Styles,
blend modes and opacity of layers.
| | 05:12 | I usually check all three of these
parameters, just to be safe, and say OK.
| | 05:18 | Now we have our first Layer Comp, our
first snapshot of the way that our layers
| | 05:22 | look on the normal state.
| | 05:23 | Now let's change the appearance of
these buttons for the over state.
| | 05:27 | I am going to go my Layers panel and
I'm going to scroll down to make sure
| | 05:31 | that all four of the button layers are
selected: products, about, stores, and contact.
| | 05:37 | Then I am going to go up to the Styles panel
and I will click once on the Green Gel style.
| | 05:41 | Now that our buttons are green, let's
memorize this appearance as another Layer Comp.
| | 05:46 | We will go to Layer Comps panel and
click the Create New Layer Comp icon again
| | 05:51 | and we will name this Layer Comp 'over'.
| | 05:53 | We will make sure all three parameters
are checked, although we are really just
| | 05:57 | using Appearance at this
point, and we will click OK.
| | 06:00 | Now we can see our two states by clicking the
arrows at the bottom of the Layer Comps panel.
| | 06:06 | I will click the right-hand arrow to
go back to the normal state and the
| | 06:09 | left-hand arrow to go back to the over state.
| | 06:12 | Another way to cycle through states in
the Layer Comps panel is just to click in
| | 06:15 | the field to the left of any state.
| | 06:17 | So if I clicked to the left of
normal, it shows me the blue buttons.
| | 06:21 | If I clicked to the left of
over, I see the green buttons.
| | 06:23 | I just want to show you quickly that
you can change your mind on either one of
| | 06:28 | these states and change the
appearance of the buttons and then update an
| | 06:31 | existing Layer Comp.
| | 06:32 | Here is how you do that.
| | 06:34 | Let's update the over state.
| | 06:35 | So first, we will make sure that we have
the over state selected by clicking in
| | 06:39 | the field to the left of the over state.
Then I'm going to check in my Layers
| | 06:42 | panel that I still have all four
button layers selected, as I do, and then I'm
| | 06:47 | going to go up to the Styles panel and
this time I'm going to choose the Blue
| | 06:51 | Gel with Drop Shadow style for my over state.
| | 06:54 | Notice, by the way, that the slices
around each button have expanded to
| | 06:58 | accommodate the drop shadow around
these buttons with this new style.
| | 07:02 | That's one of the advantages of using
layer-based slicing rather than slicing
| | 07:06 | with the Slice tool, as we
learned in the chapter on Slicing.
| | 07:09 | Now that we have changed the appearance
of the buttons on the over state, let's
| | 07:13 | update the over state in the layer
Comps panel by moving down to the Update
| | 07:17 | Layer Comp icon at the bottom of the
Layer Comps panel and clicking there.
| | 07:21 | Now if I were to cycle through my Layer
Comps by clicking the right-hand arrow
| | 07:25 | to go to the normal state and then the
left-hand arrow to go to the over state,
| | 07:29 | you can see that the over state has
indeed been updated and our over Layer Comp
| | 07:33 | now shows the buttons with
the Blue Gel with Shadow style.
| | 07:38 | So that's how you can create the
appearance of various states of a rollover
| | 07:42 | using Layer Comps and Styles in Photoshop CS3.
| | 07:46 | The next step is to name and optimize
each one of our button slices and that's
| | 07:50 | what we are going to
learn to do in the next movie.
| | Collapse this transcript |
| Optimizing layer comp rollovers| 00:01 | Let's continue to build this
navigation bar of rollover buttons.
| | 00:05 | In the last movie, we used Layer Comps
to memorize two different states of each
| | 00:10 | one of these buttons:
| | 00:11 | a normal state and an over state,
each with separate kinds of graphics.
| | 00:16 | If you were following along, you can
continue to use the file that you ended
| | 00:19 | with in the last movie, or if you'd like
to use a fresh file, go to navbar_02.psd
| | 00:25 | in the Chapter 13 Exercise Files folder.
| | 00:28 | Let's start by naming the slices here.
| | 00:31 | This is important, because each one of
these slices is going to generate the
| | 00:34 | graphics files for the two rollover
states and the file names for those graphics
| | 00:39 | are going to be taken from the slice name.
| | 00:41 | So we are going to start by going to
the Toolbox and selecting the Slice
| | 00:45 | Select Tool, then I am going to click
on one of the auto slices to deselect
| | 00:50 | all of the slices around the buttons,
and then I'll click on the first button
| | 00:54 | slice, the one around the products
button, and go up to the Tool Options Bar
| | 00:58 | for the Slice Select tool and I am
going to click the icon on the right that
| | 01:02 | opens Slice Options.
| | 01:04 | We learned about Slice Options in a
movie in the Slicing chapter, so I'm not
| | 01:07 | going to go through all the fields here.
| | 01:09 | I'm just going to type a name
for this slice in the Name field.
| | 01:12 | I will call this products_button and click OK.
| | 01:17 | I will repeat that on the about us
button by selecting its slice and then going
| | 01:22 | to the Options Bar and in Slice Options,
I will call this about_button slice and
| | 01:28 | I will select the store slice, go to
the Options Bar, click the icon and type a
| | 01:33 | name for this slice, stores_button.
| | 01:38 | Click OK and I will select the slice
around the contact button, go up to the
| | 01:42 | Options Bar, click the icon, and in Slice
Options, I will type contact_button and click OK.
| | 01:50 | The next thing I want to do is
to optimize all these buttons.
| | 01:53 | As we learned in the chapter on Optimization,
we do that in the Save for Web & Devices window.
| | 01:58 | The settings that we choose to
optimize the button slices here are going
| | 02:02 | to apply to both the over state of these
buttons and the normal state of the buttons.
| | 02:07 | So we want to be sure that our
optimization settings look good for both
| | 02:11 | versions of each button.
| | 02:14 | Let's start by optimizing the
normal state of the buttons.
| | 02:17 | I am going to go to the Layer Comps
panel and I am going to click in the field
| | 02:20 | to the left of the normal state and
then I'm going to go to File and down to
| | 02:24 | Save for Web & Devices to open the Save
for Web & Devices window where we will
| | 02:29 | optimize all our slices.
| | 02:30 | I have clicked on the Optimized tab
here and I've resized my window just a bit
| | 02:35 | so that I can see the
entire horizontal navigation bar.
| | 02:38 | I want to optimize all four button
slices together to save a little time and
| | 02:42 | since those buttons are all the same,
it's fine to optimize them all as one.
| | 02:46 | So I'm going to go to be Slice
Select tool at the top of Save for Web &
| | 02:49 | Devices, select that and then hold the Shift
key as I click on each one of the button slices.
| | 02:56 | When I go over to the controls on the
left, I see that my number of colors
| | 02:59 | is only eight and that accounts for the
dithering that we see inside of these buttons.
| | 03:04 | So I am going to increase the number of
colors by clicking to the right of the
| | 03:07 | Colors field and trying 16
colors, which looks better.
| | 03:11 | 32 colors there is still a
little bit of spotting here.
| | 03:15 | So I will try 64 colors, and I
think that looks fine for these buttons.
| | 03:20 | Now the file size of all four
button slices is only 7.354K.
| | 03:26 | Let's see if we can get
that down a little further.
| | 03:28 | I see that we have Diffusion Dither at 100%.
| | 03:31 | Let's see what happens if we take away
the dither and choose No Dither instead.
| | 03:35 | Now we do have a lower file size and I
think the buttons look fine like that.
| | 03:39 | So I am going to accept all the
rest of the Optimization Settings.
| | 03:43 | At this point, when you're normally
optimizing an image, you would click Save,
| | 03:46 | but I don't want to do that here,
because if I do save at this point, then
| | 03:50 | Photoshop will generate images for the
buttons in their normal state, but it
| | 03:54 | won't generate any images for
buttons in their over state.
| | 03:57 | So instead of clicking Save on the
top right, I am going to click Done to
| | 04:01 | save the settings that we have chosen here and
go back into Photoshop in the main interface.
| | 04:06 | Here, I want to change my buttons to
their over state by moving to the Layer
| | 04:10 | Comps palette and clicking in the
empty field to the left of the over state.
| | 04:14 | Now I am going to go back into be
Save for Web & Devices window to check if
| | 04:20 | the Optimization settings that I just set
look good on the over state of these buttons.
| | 04:25 | So I will choose File>Save for Web &
Devices and I'm going to get my Slice
| | 04:29 | Select tool and as before, I'm going
to hold down the Shift key and click on
| | 04:34 | every one of the button slices.
| | 04:35 | I am actually going to toggle the
slices off for just a moment, because I want
| | 04:39 | to get a really good view of
the edges of these buttons.
| | 04:42 | So I am going to go to the left side of
Save for Web & Devices and click on the
| | 04:45 | Show/Hide Slice Toggle there.
| | 04:48 | Now I can see that in the over state,
the buttons really don't look as clean and
| | 04:52 | crisp as I would like them to be.
| | 04:54 | So I'm going to go over to the Colors
field on the right and I am going to
| | 04:57 | increase the number of colors.
| | 04:59 | Even though 64 was okay for the normal
state of the buttons, it's not enough
| | 05:02 | colors for the over state.
| | 05:04 | So we will try 128 colors, and right
away, our buttons look better over here on
| | 05:09 | the right and the file size for all
four of these button slices is only 20.94K
| | 05:15 | in the over state of the
buttons. That's acceptable.
| | 05:18 | Now I might try to go in and see what
happens if I change the Dither field
| | 05:22 | from No Dither to Diffusion Dither,
hoping to get a little bit better
| | 05:27 | appearance on the shadows here.
| | 05:29 | That has increased the file size about
2K and I really don't see any benefit, so
| | 05:34 | I'm going to put Dither back to No
Dither and we will accept these optimization
| | 05:38 | settings for the over state of our buttons.
| | 05:40 | I am going to click back on the Show/
Hide Slice Toggle on the left and I am just
| | 05:44 | going to check the
Optimization Settings for the auto slices.
| | 05:48 | If I click on one of those auto slices,
I can see that the auto slices come up
| | 05:52 | to only 172 bytes, which is very small and
these settings of two colors seem to be appropriate.
| | 05:59 | You may remember from the movies in the
Optimization chapter that optimizing one
| | 06:03 | auto slice optimizes all auto
slices in an image like this.
| | 06:07 | So we are fine with these
auto slice optimization settings.
| | 06:11 | Now again, I don't want a click Save,
because if I do, Photoshop will just save
| | 06:15 | out the button slices in their over
states and I won't have any images of the
| | 06:20 | buttons in their normal states.
| | 06:21 | So again, I'm going to click
Done to save these settings.
| | 06:24 | I've come back to the Photoshop
interface, because I want to export the button
| | 06:29 | slices not only in their over states,
but also in their normal states and there
| | 06:33 | really is no way to do that in Photoshop CS3.
| | 06:36 | For that reason, lynda.com is providing
a special Layer Comps to Slices script
| | 06:42 | that we can use to export the graphics
for multiple states of slices, as long as
| | 06:47 | we have memorialized those states as
Layer Comps, and we will learn how to do
| | 06:51 | that in the very next movie.
| | Collapse this transcript |
| Installing the lynda.com rollover script| 00:01 | At this point in our development of
this multiple rollover state navigation
| | 00:05 | bar, I would like to save out all the
buttons, both in their normal states and
| | 00:10 | in their over states.
| | 00:12 | Unfortunately, there is no way to do that
from the functions available in Photoshop CS3.
| | 00:17 | You used to be able to do that in
ImageReady CS2 and in fact, you even could add
| | 00:22 | JavaScript that would make the rollovers
work right inside of ImageReady, but in
| | 00:26 | CS3 there is no ImageReady and so we
have to find a work around for saving out
| | 00:32 | multiple graphics for multiple rollover states.
| | 00:35 | lynda.com has gotten together with
scripting expert Trevor Morris to come up
| | 00:40 | with a script that will
help you to do just that.
| | 00:42 | In this movie, I'd like to show you how
to install that script and in the next
| | 00:46 | movie, we'll use it to export
multiple states of our rollover graphics.
| | 00:52 | You can access your personal copy of the
Layer Comps to slices script that we've
| | 00:57 | made for you from the Photoshop CS3 for
the Web Essential Training page, in the
| | 01:03 | lynda.com Online Training Library
website, or if you're watching this movie from
| | 01:08 | a disk, you can access
the script from your disk.
| | 01:11 | I'm working on a Mac.
| | 01:13 | Let me show you where to install the
script on a Mac and then we'll move over to
| | 01:16 | PC and see where to install it there.
| | 01:18 | I'm going to open my Finder on a Mac and
in the Finder, I'm going to navigate
| | 01:24 | to the Applications folder and from
there, to Adobe Photoshop CS3 and from there,
| | 01:31 | to the Presets folder and
then into the Scripts folder.
| | 01:35 | Here, we see a copy of all the
scripts that come with Photoshop CS3.
| | 01:39 | I'm going to move that window over
and then click on my Layer Comps to
| | 01:43 | Slices.jsx script and just drag it into
the Scripts folder and that's all there
| | 01:50 | is to installing the script.
| | 01:52 | Now let's see how to install on a PC.
| | 01:55 | Here we're looking at a shot of Windows Vista.
| | 01:58 | On a Windows machine, you're going to
go to the C drive and then Program Files
| | 02:02 | and then you're going to follow the
path that you see here in the screenshot of
| | 02:06 | Windows Vista, go to the Adobe
Directory and then the Adobe Photoshop CS3 Sub
| | 02:11 | Directory, the Presets subdirectory
and the Script subdirectory and drag your
| | 02:16 | Layer Comps to Slices script
into that script's subdirectory.
| | 02:22 | Whether you're on a PC or a Mac, after
you've installed the script as I just
| | 02:26 | explained, you'll have to restart Photoshop.
| | 02:34 | When Photoshop restarts, go to the
File menu and go down to Scripts and there
| | 02:39 | you'll see your new
Layer Comps to Slices script.
| | 02:43 | In the next movie, I'll show you just
how to apply this script to the Navigation
| | 02:46 | Bar that we've been building.
| | Collapse this transcript |
| Exporting layer comp rollovers| 00:01 | Let's recap what we've
done so far in this chapter.
| | 00:04 | We've created this Navigation Bar
with multiple buttons, each of which has
| | 00:08 | two Rollover states:
| | 00:10 | the normal state, that we've
memorialized here in our Layer Comp, and this over
| | 00:15 | state, that we also saved as a Layer Comp.
| | 00:18 | We sliced our buttons and
optimized and named the slices.
| | 00:22 | Then we've installed a special script
that's going to allow us to save out
| | 00:26 | the content of each one of these slices with
graphics representing all of the Rollover states.
| | 00:32 | So let's go ahead and do that right now.
| | 00:34 | I'm going to go to the File menu and
I'm going down to Scripts. If you
| | 00:39 | followed my installation instructions
in the preceding movie, you should see
| | 00:43 | here a Layer Comps to Slices script.
| | 00:45 | If you haven't watched that movie, you won't
see an entry here for Later Comps to Slices.
| | 00:50 | So please do go back and
listen to the preceding movie.
| | 00:53 | I'm going to select Layer Comps to
Slices and in the Choose a Folder window, I'm
| | 00:58 | going to navigate to my Desktop and I'm
going to click on the New Folder button
| | 01:02 | to make a folder in which to save all
of the images that we're going to be
| | 01:05 | generating from these slices.
| | 01:07 | I'll name this folder
'navbar' and I'll click Create.
| | 01:11 | Now I'm just going to click Choose to
run the script and then I'll go out to my
| | 01:16 | desktop and let's see what
this script has made for us.
| | 01:19 | Here is our navbar folder and inside
the navbar folder is an images folder that
| | 01:25 | the script made for us.
| | 01:26 | Inside the Images folder, we
have this long list of GIFs.
| | 01:32 | Notice that some of these have names,
for example, here is the about_button GIF
| | 01:37 | and the about_button_over GIF.
| | 01:38 | These two GIFS were generated by
the same slice and we also have a
| | 01:44 | contact_button and a contact_button_over GIF
and these were generated from the same slice.
| | 01:49 | Down here, our products_button and its Over
GIF and our stores_button and its Over GIF.
| | 01:56 | All the rest of these
slices are from the Auto slices.
| | 01:59 | Notice that every auto slice has both a
normal and an over state, but of course,
| | 02:04 | there weren't any changes to the auto
slices on the over states, so those are
| | 02:08 | kind of extraneous files.
| | 02:10 | In most cases, when you run this script,
you're simply going to want to hold on
| | 02:14 | to the slices to which you gave names,
the important slices, in this case, the
| | 02:18 | slices around the buttons.
| | 02:20 | So often, you'll just select all of the
other slices like these and I'm going to
| | 02:26 | drag these to the Trash, I just don't
need them anymore and then I would bring
| | 02:30 | in the remaining slices into a site
building program like Dreamweaver and
| | 02:34 | program them to be Rollovers.
| | 02:36 | Let's just take a quick
look at a couple of these GIFs.
| | 02:39 | I'm going to open the about_
button.gif, which is here, and the
| | 02:45 | about_button_over.gif here, and
let's open the stores_button and
| | 02:52 | the stores_button_over.
| | 02:55 | So as you can see, we have both states
of these buttons, saved as individual
| | 02:59 | image files, waiting to be brought
into Dreamweaver to be programmed as
| | 03:03 | Rollovers and that's how you use the
new Layer Comps to Slices script provided
| | 03:08 | for you by lynda.com.
| | 03:10 | We hope you'll use in your own work.
| | Collapse this transcript |
| Creating rollover graphics from layer visibility| 00:01 | In the preceding movies, we walked
through all the steps of making graphics for
| | 00:06 | multiple rollover states in Photoshop CS3.
| | 00:09 | We talked about layer-based slicing and
optimizing slices and using Layer Comps
| | 00:15 | and exporting Layer Comps with
our special lynda.com script.
| | 00:19 | But what we didn't concentrate very much on
was creating the actual artwork for the graphics.
| | 00:25 | We relied on pretty simple preset
styles that ship with Photoshop CS3.
| | 00:30 | So now I would like to talk a little
more about some ideas for creating artwork
| | 00:34 | for your rollover graphics.
| | 00:36 | One way to do that is to make your own
styles and that's what we're going to be
| | 00:39 | doing in this movie.
| | 00:41 | Before we move into Photoshop CS3 to do
that, I want to show you where we're going.
| | 00:45 | We're going to be working on
the buttons for this page comp.
| | 00:49 | I'm now showing you the page
comp all finished in a web browser.
| | 00:52 | We already made all the graphics for
the rollover buttons in Photoshop and
| | 00:56 | then we took them out of Photoshop and brought
them into Dreamweaver and made them roll over.
| | 01:01 | So let's take a look, for
example, at the Products bottom.
| | 01:03 | Right now, you're looking at its normal state.
| | 01:06 | It's a medium gray with a dark stroke around it.
| | 01:09 | When I move my mouse over the
Products button, it changes.
| | 01:13 | Now we're looking at a graphic that is
the same light gray, but this graphic has
| | 01:17 | an inner shadow on it.
| | 01:18 | That makes it look pushed in.
| | 01:20 | Then when I click on that button,
again, it looks different, and now we're
| | 01:24 | looking at the selected state of this button.
| | 01:27 | The selected state is based on a
graphic that also has an inner shadow, but it
| | 01:31 | has another effect on it.
| | 01:33 | It has a color overlay
effect that changes its color.
| | 01:36 | If you're not familiar with the term
Selected State, that just means the state
| | 01:40 | of a rollover button that remains on
display unless and until the viewer
| | 01:44 | clicks on another button.
| | 01:46 | So, for example, here the Products
button is in its selected state, because I
| | 01:50 | clicked on it, and then if I click on
the About Us button, now, About Us is in
| | 01:55 | its selected state, even when I move my
mouse away, unless and until I click on
| | 01:59 | another button like Our Stores.
| | 02:01 | The selected state is very useful in helping
viewers to understand what page they're on.
| | 02:07 | So now let's exit from our web browser
and go into Photoshop and work on the
| | 02:11 | graphics for this composition.
| | 02:14 | I've opened javaco_stores.psd from
the chapter 13 Exercise Files folder.
| | 02:19 | If you move over to the Layers panel,
you see that there is a layer group
| | 02:23 | here called buttons.
| | 02:25 | In that layer group are the four
buttons that we see here on screen.
| | 02:29 | This is the products button and the
about button and the stores button and
| | 02:32 | the contact us button.
| | 02:35 | I'm going to select the products
button layer and I'm going to ready the
| | 02:38 | products button layer for its normal state.
| | 02:40 | I'm going to go to the bottom of the
Layers panel and click the fx button there.
| | 02:45 | I'm going to choose Stroke, which is
one of the layer effects that you can
| | 02:49 | apply in Photoshop.
| | 02:51 | Obviously, this is not the stroke that we want.
| | 02:54 | So in the Layer Style dialog box, I'm
first going to change the color of this
| | 02:58 | stroke, by clicking in the Color
field and I'm going to choose a dark gray.
| | 03:02 | I'll say OK, and then I'm going to
change the size of this stroke from 3 pixels
| | 03:09 | down to maybe 1 pixel.
| | 03:12 | I'm also going to position this stroke
rather than outside, inside of the button.
| | 03:18 | And that's fine.
| | 03:19 | That's how I want the button
to look on the normal state.
| | 03:22 | Now, I'm going to click the New
Style button on the right side of the
| | 03:25 | Layer Style dialog box.
| | 03:28 | That asked me what I want to call
this new style, I'm going to call
| | 03:31 | this normal_stroke.
| | 03:35 | I want to make sure that Include
Layer Effects is checked. I'll say OK.
| | 03:40 | Now, I'll click OK to close
the Layer Style dialog box.
| | 03:43 | A few things have happened.
| | 03:45 | First of all, you can see that the
Products button now has an fx icon,
| | 03:50 | meaning that it has a layer style, and under
the Products button we see the Stroke effect.
| | 03:55 | The other thing that's
happened is in the Styles panel.
| | 03:58 | If I go to the Styles panel and I move
this scroll button down, so I get to the
| | 04:02 | very bottom of the preset
styles that are showing there,
| | 04:05 | I'm going to mouse my mouse over this
very last style and I see that this is my
| | 04:10 | new normal stroke style that I just
saved from the Layer Style dialog box.
| | 04:14 | Well, that's good, because now I can
easily apply that style to the normal state
| | 04:18 | of the other three buttons.
| | 04:20 | To do that in the Layers panel, I'm
going to click on the about button layer and
| | 04:24 | then I'm going to hold down the Shift
key and click on the contact button layer,
| | 04:27 | and that selects all the layers in between.
| | 04:29 | Now I'm just going to go up to my
Styles panel and click once on my brand-new
| | 04:33 | normal stroke style and that's
applied to all three buttons.
| | 04:37 | Now I'm going to open my Layer Comps palette.
| | 04:40 | As we learned to do in previous
exercises, we're going to create a new Layer
| | 04:43 | Comp to memorize the normal
state of these four buttons.
| | 04:47 | So I'll go to the bottom of Layer
Comps and click the Create New Layer Comp
| | 04:51 | icon, I'll make sure all of my
parameters are checked and I'll call this new
| | 04:55 | Layer Comp 'normal' and say OK.
| | 04:59 | Now, I want to set up the
graphics for an over state.
| | 05:01 | I'm going to do this on the
Product button again to start.
| | 05:04 | So I'm going to select the products
button layer in the Layers panel and I'm
| | 05:07 | going to double-click that layer
to open the Layer Style dialog box.
| | 05:11 | Now I'm going to undo Stroke and
instead, I'm going to click Inner Shadow.
| | 05:17 | That's going to change the
appearance of the Products button.
| | 05:20 | We can preview the results of what
we're doing in the Layer Style dialog box,
| | 05:23 | because we have this
Preview button checked over here.
| | 05:27 | I'm going to click on that Inner Shadow
layer style, so that I see its options
| | 05:30 | on the right-side of the Layer Style dialog box.
| | 05:32 | I'll customize it just a bit.
| | 05:34 | I'm just going to lower its Opacity so it's
little more subtle, maybe down to about 61 there.
| | 05:39 | There are many other options I could
play with here, but just to make the point
| | 05:43 | that you can change some of the
options, we'll leave it at this.
| | 05:46 | I'm now going to create another new
style by clicking the New Style button in
| | 05:50 | the Layer Style dialog box.
| | 05:51 | I'll call this one over_inner,
inner stands for inner shadow.
| | 05:56 | Then make sure Include layer
Effects is checked and click OK.
| | 06:00 | I'll click OK to close
the Layer Style dialog box.
| | 06:03 | And now, when we go up to Styles panel,
we see that there's yet another new
| | 06:06 | style, this is my new over_inner style.
| | 06:10 | So now I'm going to go to the Layers
panel and I'm going to select the other
| | 06:13 | three buttons, just as I did a few
minutes ago to style them with the normal
| | 06:17 | style, select the about button and
I'll hold my Shift key and I'll select
| | 06:23 | the contact button.
| | 06:24 | Now, I'm just going to click
once on my over_inner style.
| | 06:28 | That adds this new layer
style to all of the buttons.
| | 06:31 | And now, I'll go to the Layer Comps
palette and click the Create New Layer Comp
| | 06:35 | icon, make a new Layer Comp, we'll
call this one over and we'll click OK.
| | 06:40 | Let's make one more.
| | 06:41 | We'll do all this one more time to
make the graphics for the selected state.
| | 06:45 | I'll go a little faster this
time, now that you know the drill.
| | 06:49 | I'm going to select the products
button layer, double-click it to open the
| | 06:52 | Layer Style dialog box.
| | 06:54 | This time, I'm going to leave an Inner
Shadow on the button and I'm going to
| | 06:57 | add a color overlay.
| | 06:59 | So I'm going to click on the Color
Overlay layer style and then I'm going to
| | 07:03 | double-click in the Layer
Style options, the Color field.
| | 07:06 | Here, I am going to choose a medium green color.
| | 07:09 | I actually, know the RGB values of that
color, so I'll type them in here, 164,
| | 07:13 | 181, 135, and you can choose any
color you like. I'll click OK.
| | 07:22 | I'll make another new style by clicking
the New Style button in the Layer Style
| | 07:25 | dialog box and I'm going to
call this one selected_inner_color.
| | 07:33 | Now you don't have to be as
precise with your names as I am.
| | 07:35 | You can name it whatever you
like that's meaningful to you.
| | 07:38 | I'm going to include layer effects and click OK.
| | 07:41 | I'll click OK to close
the Layer Style dialog box.
| | 07:45 | I'm going to select my about button
layer in the Layers panel, Shift+Click on my
| | 07:49 | contact button layer and with the three
other layers selected there, I'll go up
| | 07:53 | to my Styles panel and I'll click on my
new selected_inner_color style, and that
| | 07:59 | styles all the four buttons the same way.
| | 08:02 | Then I'll go to the Layer Comps panel
and I'll make my final Layer Comp, by
| | 08:06 | clicking the Create New Layer Comp
button at the bottom of that panel and we'll
| | 08:10 | call this one selected and we'll click OK.
| | 08:14 | Now we can cycle through our Layer Comps.
| | 08:17 | There are the graphics for the normal
state, there are the graphics for the over
| | 08:20 | state and there are the
graphics for the selected state.
| | 08:23 | At this point, I would follow the
routine that we went through in the earlier
| | 08:26 | movies in this chapter.
| | 08:27 | I would slice all the buttons as well
as the other important graphics on this
| | 08:31 | page, like the map and the cup and the logo,
| | 08:34 | I would optimize all the slices and I
would run the special lynda.com layer
| | 08:38 | Comps to Slices script, to
export all of the graphics.
| | 08:43 | Then I would take three different
graphics for each one of these buttons and
| | 08:46 | bring them into Dreamweaver and
program them as rollovers with a normal state
| | 08:50 | an over state and a selected state.
| | 08:53 | So that's how you can create
customized styles for your own rollover graphics
| | 08:57 | in Photoshop CS3.
| | Collapse this transcript |
| Creating graphics for remote rollovers| 00:00 | Let's look at another way to create the
artwork for rollover states in Photoshop.
| | 00:05 | Here, I have a horizontal
Navigation Bar with four buttons.
| | 00:09 | Look at the Layers panel and
you'll see that each of the buttons is
| | 00:12 | represented by a Layer Group.
| | 00:14 | I'll turn the Eye icons off and on,
next to each Layer Group, so you could
| | 00:17 | see what's in them.
| | 00:18 | There's the contact button, the stores button,
the about button and the products button.
| | 00:23 | Now I am going to expand the Contact
Layer Group, so you can see that in that
| | 00:27 | Layer Group, we have four different layers.
| | 00:30 | And only two of those
layers are currently visible:
| | 00:32 | the Envelope layer and the Base layer.
| | 00:36 | The same is true of our other three buttons.
| | 00:38 | If we look inside the Stores layer panel, we
only have the Tin layer and the Base layer.
| | 00:43 | And in the About Layer Group, we have
only to Teapot layer and the Base layer
| | 00:47 | and in the Products Layer Group,
only the Cup layer and the Base layer.
| | 00:51 | So you are starting to see the pattern here.
| | 00:53 | Each one of these buttons has a Base
layer and then it has one other layer
| | 00:56 | visible, that has a white icon on it.
| | 00:59 | So that will be the
normal look to all our buttons.
| | 01:03 | We need Photoshop to remember that and
so we are going to create a Layer Comp
| | 01:07 | that will remember which layers are on
and which layers are off, at the moment.
| | 01:11 | To do that, I'll open my Layer Comps
pane. Mine is represented by this icon in
| | 01:16 | the inner column of panels.
| | 01:18 | If you don't have an icon like this, just
go to the Window menu and choose Layer Comps.
| | 01:24 | In the Layer Comps panel, I am going to
create a new Layer Comp, by clicking the
| | 01:28 | New Layer Comp button at
the bottom of the panel.
| | 01:30 | And I'll call this new Layer Comp normal.
| | 01:33 | We are really only manipulating the
visibility of layers here, but I'll keep all
| | 01:37 | of these parameters checked
just for safety and I'll click OK.
| | 01:40 | Now, we are going to create a different
graphic look for the over states of all
| | 01:46 | the buttons in this Navigation Bar.
| | 01:48 | And we are going to do that by
turning on one extra layer in each one of
| | 01:52 | these Layer Groups.
| | 01:54 | So in the Layers panel, I'm going to
click in the Visibility field to the left
| | 01:57 | of the grey layer, inside of the
Products Layer Group, and you can see that
| | 02:02 | that put this grey
background behind the products icon.
| | 02:06 | I'll do the same thing in the about Layer Group.
| | 02:09 | I'll just Turn on the grey layer there
as well, and I'll scroll down and do the
| | 02:13 | same thing in the Stores Layer Group,
turning on it's grey layer and in the
| | 02:17 | Contact Group, turning on it's great layer.
| | 02:20 | So this is how each one of these buttons
will look in its individual over state.
| | 02:25 | Now I'll go to the Layer Comps panel
and I'll click the Create New Layer Comp
| | 02:28 | icon and I'll name this Layer Comp
'over' and make sure the parameters are all
| | 02:33 | checked and click OK.
| | 02:35 | Now, we could cycle between these
Layer Groups by clicking the arrow at the
| | 02:38 | bottom of the Layer Comps panel, and
you can see how the look of the icons
| | 02:42 | changes from the over state to the
normal state and let's do this one more time.
| | 02:47 | Now let's create the look of a selected state.
| | 02:50 | The selected state is the state of
a graphic, like a button, that will be
| | 02:54 | displayed in a web browser unless and
until the viewer clicks on another item
| | 02:59 | like another button.
| | 03:00 | So let's scroll up to the top of the
Layers panel and set up the selected state
| | 03:04 | for the products button.
| | 03:06 | For the selected state of the
products button, I am going to make two
| | 03:09 | more layers visible:
| | 03:10 | the tea layer, which fills in the tea
and the cup and the smoke curl. Then, I'll
| | 03:15 | go to the About Layer Group and I'll
make two more layers visible here: the
| | 03:20 | circle in the middle of
the teapot and a smoke curl.
| | 03:23 | Then I'll move down to the Stores
Layer Group and I'll make two more layers
| | 03:27 | visible here: the label and a smoke curl.
| | 03:30 | You are starting to see the pattern and
finally, in the contact button, we'll make
| | 03:35 | two more layers visible here,
the flap and the smoke curl.
| | 03:38 | So now, you can see how anyone of
these buttons would look if it were in its
| | 03:43 | selected state and we'll remember all
of these as a Layer Comp, by clicking the
| | 03:48 | Create New Layer Comp button again, at
the bottom of the Layer Comps panel and
| | 03:52 | we'll call this Layer Comp
'selected', and we'll say OK.
| | 03:56 | And now, we have a different look for each
one of our states, for each of these buttons.
| | 04:01 | So here is the selected state, here is
the normal state, here is the over state.
| | 04:05 | Of course, when these buttons are
programmed to rollover in a program like
| | 04:09 | Dreamweaver, you are not going to see all
of them set to their over state at once.
| | 04:13 | They'll all be set to their normal state
and then, just the one over which the
| | 04:17 | viewer moves his mouse in a web
browser will turn to the over state.
| | 04:21 | And then, when the viewer clicks on
one of these buttons, it will turn to the
| | 04:25 | selected state, but not all of the
buttons will change to selected state, as
| | 04:28 | they appear here, in the Layer Comps palette.
| | 04:30 | At this point, we would follow the
routine that we learned in the earlier movies.
| | 04:34 | We would slice these buttons, we would
name and optimize them, we would apply
| | 04:38 | our special lynda.com Export Script to
export out the individual graphics for
| | 04:45 | each rollover state and each button.
| | 04:47 | So that's how you can use layer
visibility to create the artwork for rollover
| | 04:51 | graphics in Photoshop CS3.
| | Collapse this transcript |
|
|
14. AutomationCreating a web photo gallery| 00:01 | In this chapter, we are going to take a
look at some features in Photoshop CS3
| | 00:05 | that help you do web
related tasks automatically.
| | 00:08 | These are features that will save
you time and effort and the tedium of
| | 00:12 | doing repetitive tasks.
| | 00:14 | One of my favorite features in this
category is the Web Photo Gallery.
| | 00:18 | The Web Photo Gallery will create a
website for you from any images that you give it.
| | 00:23 | Your images can start off as PSDs or
JPEGs or TIFFs, or any format that can be
| | 00:28 | recompressed into a JPEG.
| | 00:30 | The Web Photo Gallery will take those
images, it will make several copies of
| | 00:34 | each image, a thumbnail size copy
and one or more larger copies as well.
| | 00:40 | It will compress each image in JPEG
format, it will arrange the images
| | 00:45 | in attractive designs on web pages and it
will write the code for an entire website.
| | 00:51 | It will save everything into a folder for you,
all ready for you to upload to a web server.
| | 00:56 | That's the one thing it won't do for you.
| | 00:58 | It will even open your default web browser
to preview your Web Photo Gallery for you.
| | 01:04 | Let's take a look at how we can work
with Web Photo Gallery in Photoshop CS3.
| | 01:08 | I am going to go to the File menu and
I am going down to Automate and over
| | 01:13 | to Web Photo Gallery.
| | 01:16 | I've already filled out some of the
fields in this Web Photo Gallery for you.
| | 01:19 | The fields are sticky and so if
you've used Web Photo Gallery before, you'll
| | 01:23 | have different
information in some of these fields.
| | 01:26 | Let's take a look at this first menu.
| | 01:28 | This is the Styles menu, which list
the styles of Web Photo Gallery templates
| | 01:33 | that are available to you.
| | 01:35 | As you select a choice here,
it appears over on the right.
| | 01:38 | So you can go through and choose
the one that looks good to you.
| | 01:42 | We have some HTML-based templates.
| | 01:44 | We have a couple of Flash templates that
offer interactivity and animation and even music.
| | 01:50 | We have a Slideshow template, and we
have some templates that allow you to
| | 01:55 | converse with your audience,
some Feedback templates.
| | 01:57 | I am going to choose this
Horizontal Neutral template for now.
| | 02:02 | The first field here is the Email field.
| | 02:04 | You can type in your email address, if
you'd like to have that appear on the
| | 02:08 | initial page of the website.
| | 02:10 | But you don't have to type
anything in here, if you don't want to.
| | 02:13 | I'll go ahead and leave my email
address here, so that we can see what it looks
| | 02:16 | like on the Web Photo Gallery.
| | 02:19 | The Source Images area is where you
identify a folder of images that you're
| | 02:24 | going to use in your Web Photo Gallery.
| | 02:26 | I am going to click Choose here, and I
am going to navigate to my Desktop/my
| | 02:32 | Exercise Files/my chapter14_
automation folder and my tea photos folder.
| | 02:41 | Notice that this folder has a number
of photographs in it. Some of them are
| | 02:45 | TIFFs, some are PSDs.
| | 02:47 | I'll choose this tea photos folder as
my source images and then I am going to
| | 02:52 | choose a Destination folder.
| | 02:54 | I'll click the Destination button
and again, I'm going to go to my
| | 02:58 | Desktop/Exercise Files/my chapter14_
automation folder and I'm going to choose
| | 03:04 | the gallery folder, which is just an
empty folder that I included in the
| | 03:08 | Exercise Files for you, in which
to save your Web Photo Gallery.
| | 03:12 | We'll click Choose and let me show you
quickly what other options there are.
| | 03:16 | Depending on which template you've
chosen, you'll have different choices in
| | 03:21 | the Options area here.
| | 03:22 | If I click the General menu, I can
choose to see options that relate to the
| | 03:27 | web page banner, such as the site name, and
the name of the photographer and the date.
| | 03:33 | I usually don't put anything in the Date field,
because I like my websites to remain timely.
| | 03:38 | So I'll take the date away
by selecting it and deleting.
| | 03:41 | I've typed a site name that will
appear at the top of the first page of the
| | 03:46 | site, and I've typed the name of the
photographer who contributed the images
| | 03:50 | that we're using on our Web Photo Gallery.
| | 03:52 | I can then go back to the Options
menu and choose the Large Images area.
| | 03:57 | Here I can resize the
larger images for this website.
| | 04:02 | I can choose from some presets, like
Small, Medium or Large, or I can just type
| | 04:06 | some number of pixels in here.
| | 04:08 | I can also set the JPEG Quality, which
determines the way that the images are
| | 04:13 | going to be compressed
for this Web Photo Gallery.
| | 04:15 | I might change this to 10 to
make sure that my photos look good.
| | 04:21 | I can set a border size for my
photos or I can just set this to 0.
| | 04:25 | I can choose to have the file name of
each photo printed under the photo, and if
| | 04:30 | I have specified the title of a photo
in the metadata, for each photo, I can
| | 04:36 | also choose to display that and
different Web Photo Gallery styles allow you to
| | 04:41 | display different kinds of
information underneath each photo, like its
| | 04:44 | copyright, its description, its credits,
all of which you can enter ahead of
| | 04:48 | time into Photoshop's File Info field.
| | 04:51 | I am going to go back to the Options menu
and let's look at the Thumbnail options.
| | 04:56 | Here again, we can set the
size, we can set a border.
| | 04:59 | I'll just leave these at their defaults.
| | 05:01 | In the Custom Colors area, we can
change the color of the website background.
| | 05:07 | We can change colors of text and links as well,
| | 05:09 | although I normally leave these
colors at their defaults, because Adobe has
| | 05:13 | chosen some pretty nice designs as they are.
| | 05:16 | I am going to go back to Options and down
to the last category, which is Security.
| | 05:21 | Here, we have some interesting choices.
| | 05:23 | In the Content field, we can choose to add in
either Copyright information or Custom Text.
| | 05:29 | I am going to choose Custom Text so
that you can see what happens if I type
| | 05:33 | 'proof' in the Custom Text field.
| | 05:35 | Then I am going to choose
a Font Size for that text.
| | 05:38 | We'll make this something like 30 points.
| | 05:41 | I can choose the color, either
Black, White or a Custom color.
| | 05:45 | So for example, I can choose a Grey here.
| | 05:47 | I can dictate how opaque this text
should be and I can choose a position for it:
| | 05:54 | Top Right, Bottom Right.
| | 05:56 | I'll leave it down at the Bottom Right.
| | 05:58 | I can even choose to rotate at 45 Degrees.
| | 06:00 | So for example, if I wanted to make
sure that these images all were marked
| | 06:04 | proof, I would choose 45 Degrees and
Centered and the word, proof, would appear
| | 06:10 | right in the middle of those images.
| | 06:12 | But for now, let's put our security
text down at the bottom-right and we are
| | 06:17 | done going through the fields and
menus for this particular style.
| | 06:21 | And as I mentioned, you have different choices
depending on which style you have settled on.
| | 06:25 | I am going to click OK, and we are
going to see, in just a second, Photoshop
| | 06:31 | resizing and compressing all of the
images in the source folder and opening our
| | 06:35 | default web browser, so that we can
preview our new Web Photo Gallery.
| | 06:40 | Here, at the top, you can see the
information that we entered into the banner section.
| | 06:45 | The site name, the
photographer's name and the email address.
| | 06:49 | If you click this email address, your
default mail program will open with an
| | 06:53 | email message already addressed back
to you, the Web Photo Gallery creator.
| | 07:00 | Here we have thumbnails of the various
images that were in our source folder and
| | 07:04 | as I clicked through these, each one
appears in larger format up here in the
| | 07:09 | middle of this web page.
| | 07:11 | Another way to navigate through
these images is to click the arrows on
| | 07:15 | either side of the image.
| | 07:18 | As you can see, we can display
vertical images as well as horizontal and if
| | 07:24 | you look down at the bottom-right,
you'll see the word 'proof', which I typed
| | 07:27 | in as my security text.
| | 07:28 | You remember I asked for it to be at
the bottom-right and to be in a light gray
| | 07:33 | color and to be 50% opaque.
| | 07:35 | You'll also see down here that
Photoshop has included the file name of the
| | 07:39 | images, which is another choice that we
made as we set up our Web Photo Gallery.
| | 07:44 | Also notice that Photoshop has made
these navigation elements, these arrows, and
| | 07:49 | the banner and this logo and the other
elements that you see on this web page.
| | 07:53 | So that's an introduction to
using the Web Photo Gallery.
| | 07:56 | I'm sure you'll explore it more on
your own and try out the various templates
| | 07:59 | and the options that they offer.
| | 08:01 | In the next movie, we are going to
take a look at making collaborative Web
| | 08:04 | Photo Galleries.
| | Collapse this transcript |
| Creating a collaborative gallery| 00:01 | Now that you know how the Web Photo
Gallery feature works, let's take a look at
| | 00:05 | a specific kind of Web Photo Gallery
feature, one that allows you to collect
| | 00:09 | feedback from your audience.
| | 00:11 | I am going to go to the File menu at
the top of the screen and down to the
| | 00:14 | Automate menu, and down to Web Photo Gallery.
| | 00:18 | In the Web Photo Gallery dialog box, I
am going to click the Styles button and I
| | 00:22 | am going to choose one of the
templates that has the word 'feedback' in it.
| | 00:26 | There are several here.
| | 00:27 | Here is the Horizontal - Feedback,
the Centered Frame 2 - Feedback.
| | 00:32 | Let's try that one.
| | 00:32 | I am going to leave my email
address here in the Email field.
| | 00:36 | This will allow a viewer on the web to
contact me by email directly through the
| | 00:41 | website to offer feedback
on the images on this site.
| | 00:45 | In the Source Images area, I am going to
click Choose and I am going to navigate
| | 00:49 | to my Exercise Files, to the chapter14_
automation folder and again, to tea photos
| | 00:55 | folder, and I will click Choose.
| | 00:56 | I will click the Destination button
and again, I will go to Exercise Files,
| | 01:02 | chapter14_automation and this time, I'm
going to choose collaborative, which is
| | 01:07 | an empty folder that I have placed here,
so that you'd have a destination for
| | 01:11 | your Web Photo Gallery.
| | 01:12 | We will click Choose.
| | 01:15 | In the Options section, I could come in
and adjust the Banner, the Large Images,
| | 01:19 | the Thumbnails, the Custom
Colors and the Security areas.
| | 01:23 | But I'm going to leave all of those
choices as is using the same settings that I
| | 01:27 | used in the last movie, and
I am just going to click OK.
| | 01:31 | It takes Photoshop just a couple of
minutes to create this collaborative Web
| | 01:35 | Photo Gallery, which opens
in the default web browser.
| | 01:38 | Let's take a look at what we have here.
| | 01:40 | Here we have all the banner
information that we had in the last movie.
| | 01:44 | The title of the site, the name of
the photographer, the date, and my email
| | 01:47 | address, I am the creator of this site.
| | 01:49 | And then over on the left we have
thumbnail images, and if we click those, on
| | 01:53 | the right, we see larger
versions of each thumbnail.
| | 01:57 | Each thumbnail even has the security
text that we added in the last movie.
| | 02:02 | Now here is what's interesting about the
collaborative style Web Photo Galleries.
| | 02:07 | Here at the bottom, we have two tabs,
we have Image Info and we have Feedback.
| | 02:12 | Let's take a look at Image Info.
| | 02:13 | Your web viewer can click on Image
Info in her web browser and that opens a
| | 02:19 | small card with
information about the selected image.
| | 02:22 | In this case, we just have the file name,
| | 02:24 | but if you'd entered the Title, the
Description, the Credits and the Copyright
| | 02:29 | into the File Info dialog box in
Photoshop, that would all appear here.
| | 02:34 | The web viewer can also click on the
Feedback tab and that offers this area, where
| | 02:40 | she can check that she approves the
selected image or she can check other.
| | 02:44 | In both cases, she can write a comment here.
| | 02:47 | So let's say that she clicks Other
and then writes here "Do you know the
| | 02:54 | "origin of this teapot?
| | 02:59 | I would like to purchase it from you."
| | 03:05 | This feedback can be saved or removed,
or your web viewer can click this button
| | 03:10 | to send you an email message about this image.
| | 03:13 | Let's chose Email Feedback and see what happens.
| | 03:16 | Your viewer can type her name,
we'll type 'Andrea' and click OK.
| | 03:22 | That opens her default mail program,
with an email message addressed to me, the
| | 03:26 | creator of the Web Photo Gallery site.
| | 03:29 | The Subject is already filled in, and
we also have the information here that
| | 03:33 | comes from the Feedback form in the website.
| | 03:36 | So as you can see, we have the name of
the file, the viewer checked Other and
| | 03:44 | so it says here in the message Other and
then we have a copy of the viewer's comments.
| | 03:50 | So this is a great way for people who
come to your website and look at your
| | 03:53 | images to communicate with you about the images.
| | 03:56 | You could use this feature to sell
images, you could use it to answer questions
| | 04:00 | about your images, or you
can collaborate with others.
| | 04:02 | Let me close this mail message and go
back and close both of the tabs on the site.
| | 04:09 | So this is the collaborative Web Photo Gallery.
| | 04:11 | There are several different styles
of these collaborative galleries.
| | 04:14 | So that's how you can create a Web
Photo Gallery with a minimum of effort, that
| | 04:18 | allows you to communicate and
collaborate with your audience.
| | 04:22 | In the next movie, we are going to take
a look at a Flash Web Photo Gallery to
| | 04:26 | which you can add music.
| | Collapse this transcript |
| Creating a Flash-based web photo gallery| 00:01 | Photoshop CS3 includes some very
interesting web photo galleries in the Flash format.
| | 00:06 | They allow the users to interact with
your Web Photo Gallery and they let you
| | 00:10 | add music to your gallery.
| | 00:12 | Let's take a look at one of those.
| | 00:13 | Before we go into the Flash Web Photo
Gallery feature, let's take an audio file
| | 00:18 | and put it in a place, inside of the
Photoshop application folder, where the Web
| | 00:23 | Photo Gallery will recognize it.
| | 00:26 | If you're working along with me, you
can open your Exercise Files folder and
| | 00:32 | navigate to the chapter14_automation folder.
| | 00:35 | There you will find a file called useraudio.mp3.
| | 00:40 | On the Mac, I'm going to open another
Finder window, and on a PC, you can go
| | 00:45 | into C:/Program Files/Adobe/Adobe Photoshop CS3.
| | 00:50 | Once you are in the Adobe Photoshop
CS3 folder, on both platforms, you can
| | 00:55 | navigate to Presets and then down to
Web Photo Gallery, and here you see a
| | 01:01 | folder for each one of the styles that
come with the Web Photo Gallery feature.
| | 01:05 | I am going to select Flash-Gallery
1 and then I am going to copy the
| | 01:10 | useraudio.mp3 file from the Exercise
Files folder into this Flash Gallery 1 folder.
| | 01:16 | I will hold down the Option key on a Mac as a
drag, and the Alt key on a PC as I drag to do that.
| | 01:23 | By the way, any music file that you
want a Flash Web Photo Gallery to recognize
| | 01:27 | has to be named this way, useraudio.mp3.
| | 01:31 | We will close our Finder
windows and let's open Photoshop.
| | 01:39 | In Photoshop, we will go to File, down
to Automate and down to Web Photo Gallery.
| | 01:45 | In the Web Photo Gallery dialog box, I'm
going to go to the Styles menu and I am
| | 01:49 | going to choose Flash-Gallery 1.
| | 01:52 | You can see a little thumbnail of what
that looks like over on the right, and
| | 01:56 | information about including music
there, and also a small warning that Flash
| | 02:01 | content requires the
Macromedia Flash plug-in to view.
| | 02:05 | That's really not a problem because most
web browsers do include the Flash plug-in,
| | 02:10 | so we won't worry about that.
| | 02:11 | We are going to come down to our Use
Folder and we are going to click Choose and
| | 02:15 | once again, I'm going to my Exercise
Files folder/chapter14_automation and I am
| | 02:20 | going to select my tea
photos folder, and click Choose.
| | 02:25 | As a Destination, I am going to
navigate to the Exercise Files, again, to
| | 02:29 | chapter_14 automation and I'm
going to choose the Flash folder.
| | 02:33 | This is another empty folder that
I have put here for you to use as a
| | 02:36 | destination for the files created by your
Web Photo Gallery and I will click Choose.
| | 02:42 | From the Options menu, we can see that
we have the same kinds of options that
| | 02:46 | we've had for other styles,
| | 02:47 | so I am just going to leave
everything at its default.
| | 02:50 | Because the options are all sticky,
these defaults are the same as the settings
| | 02:54 | that I chose in the last movie.
| | 02:56 | I am going to click OK and Photoshop
very quickly resizes the images for use in
| | 03:02 | this Web Photo Gallery, and
it opens my default browser -
| | 03:06 | (Guitar playing)
| | 03:28 | I just click the icon on the bottom
right to turn the sound off and, as you can
| | 03:33 | see, I also have a slideshow running,
which I started running by clicking this
| | 03:37 | icon on the bottom right.
| | 03:41 | Notice that as the Web Photo Gallery
displays vertical and then horizontal
| | 03:45 | images, it resizes itself to fit those
images, and it's just running through
| | 03:51 | my images one by one.
| | 03:53 | I can click the Stop button right here
and that stops the slideshow and then I
| | 03:58 | can come in and manually move from
thumbnail to thumbnail underneath the larger image.
| | 04:05 | Notice as I move my mouse over one of
these thumbnails, the thumbnail enlarges
| | 04:09 | and I see the name of the image to the right.
| | 04:17 | If I want to remove all the thumbnails,
I can just come down to my icons on the
| | 04:20 | bottom right again and
click this icon right here.
| | 04:25 | The thumbnails go away and we have a
nice view of our larger image and if I roll
| | 04:29 | over that image, information
about the image pops up below.
| | 04:32 | Another icon down on the bottom right
is a question mark, and that also invokes
| | 04:36 | this information about the image.
| | 04:38 | And finally, if I want to remove all
the icons on the bottom right, I can click
| | 04:42 | this X and they go away.
| | 04:44 | To bring them back, I will click the X again.
| | 04:47 | So that's the kind of interactive Flash
Web Photo Gallery that you can create in
| | 04:52 | Photoshop CS3, complete with music.
| | Collapse this transcript |
| Using the Image Processor| 00:01 | One of the most useful automation
features in Photoshop CS3 is the Image Processor.
| | 00:05 | Let's open it and then I will tell you what
it can do for you and show you how to use it.
| | 00:10 | I am going to go to the File menu and down
to Scripts and there is the Image Processor.
| | 00:15 | Now, don't be fooled, the Image
Processor, although it's an automation feature,
| | 00:19 | is not located under the Automate menu.
| | 00:22 | So we will choose the Image Processor
from the Scripts menu and that opens the
| | 00:26 | Image Processor dialog box.
| | 00:28 | The Image Processor will really save
you time and effort when you're processing
| | 00:32 | multiple images for a website.
| | 00:34 | So let's say, for example, you have a
number of digital photographs and you would
| | 00:39 | like to resize them to thumbnail size
to use on a web page, and you want those
| | 00:44 | thumbnails to be JPEGs, but you would
also like to have a copy in the PSD format.
| | 00:48 | Let's say you want to add copyright
information to all the photos, and run a
| | 00:52 | custom action to be something like
sharpen them or change them to black and
| | 00:56 | white or sepia tone them.
| | 00:58 | You can do all of that from
right here in the Image Processor.
| | 01:01 | Let's walk through the steps
of using the Image Processor.
| | 01:04 | The steps are clearly marked to make it easy.
| | 01:06 | Here is step number one, where we are
going to select which images we are going
| | 01:09 | to run through the Image Processor.
| | 01:11 | I have put some images in a folder for
you so we can just click Select folder.
| | 01:15 | If you wanted to work on images that
were not already in a single folder, then
| | 01:19 | what I'd suggest you do is to go to
Bridge CS3, Command+Click or Ctrl+Click on
| | 01:24 | individual images to select them and
then go up to the Tools menu, in Bridge CS3,
| | 01:28 | from which you can also
invoke the Image Processor.
| | 01:31 | But we will just click Select Folder,
and we are going to go to our Desktop and
| | 01:35 | our Exercise Files and we are going
down to the automation folder and I'm going
| | 01:40 | to select the outdoor photos folder,
which contains a number of PSD files.
| | 01:44 | We will click Choose.
| | 01:46 | This command, Open first image to
apply settings, isn't relevant to us.
| | 01:50 | That applies when you're working on images
that you have corrected in Adobe Camera Raw.
| | 01:55 | So let's go to step two.
| | 01:56 | Now, we are going to select a
destination for the images after they come out of
| | 02:00 | the Image Processor.
| | 02:01 | We could save them all into the same
location as our source files, or we can
| | 02:05 | click Select Folder, click to Select
Folder button and go back to our Exercise
| | 02:10 | Files, down to chapter14_automation and
let's select this processed folder, which
| | 02:16 | is just an empty folder that I
created for you as the destination for your
| | 02:19 | processed files, we will click Choose.
| | 02:22 | Here comes the interesting part.
| | 02:24 | In step three, we get to choose a File
Type. Because we are creating images for a
| | 02:28 | website, of course we want to save JPEGs.
| | 02:30 | So I will click there and in the JPEG area,
I can choose what size to make these images.
| | 02:37 | Now this is not going to resize each
image in my source files folder to the
| | 02:42 | exact same size, and we don't want to
do that because some of the images are
| | 02:45 | horizontal and some are vertical.
| | 02:47 | Instead, what we are going to do here is
to specify an imaginary box into which
| | 02:52 | all the images will be resized to fit.
| | 02:54 | So in the Width field, for example, I am
going to type 150 pixels and that means
| | 02:59 | that none of the images will be
larger than 150 pixels in width, and I will
| | 03:04 | type 225 in the Height field. That means
none of the images would be taller than 225 pixels.
| | 03:11 | We can also come over and set the
Quality of the resulting images.
| | 03:14 | I generally set this to 8,
which is a good compromise.
| | 03:17 | This can go to a maximum of 12.
| | 03:19 | And if you complete the process and
you don't like the compression quality of
| | 03:24 | the resulting images, you can always
come back and change the Quality and go
| | 03:27 | through the whole process again.
| | 03:29 | Finally, I'm going to choose Convert
Profile to sRGB so that the color of our
| | 03:34 | images is as we expect it to be
when viewed on a typical web browser.
| | 03:38 | If you would like to learn more about this
subject, you can go back and review the
| | 03:42 | movie on Color Management in the Color chapter.
| | 03:44 | So I'm going to select
Convert Profile to sRGB here.
| | 03:48 | If I want, I can also save a copy of
this file as a Photoshop document or as a
| | 03:53 | TIFF, resizing those as
appropriate for my needs.
| | 03:57 | But here, I just want the JPEG.
| | 03:58 | So I will uncheck Save as TIFF.
| | 04:01 | At the bottom, in step four, we can go
to the Copyright Info field where we can
| | 04:05 | specify copyright information that will
be added as metadata to each one of the
| | 04:11 | resulting processed photos.
| | 04:13 | I am going to click in that field and
first I am going to enter a copyright symbol.
| | 04:17 | The way you do that on the Mac is you
press Option+G. If you're on a PC, go to
| | 04:22 | your numeric keypad on the
keyboard and type in Alt+0169.
| | 04:28 | Now I am going to type my copyright
information, I will type the name of the
| | 04:31 | photographer and the date.
| | 04:33 | I'm not going to check Include ICC Profile,
which has to do with color management.
| | 04:38 | As we learned in previous movies, most web
browsers can't make use of ICC profiles.
| | 04:42 | Notice there is also a Run Action field here.
| | 04:45 | In the next movie, we are going to be
creating an action to sharpen photos, and
| | 04:49 | then we're going to run that
action from here in the Image Processor.
| | 04:54 | But for now let's leave that field blank,
and let's click the Run button to set
| | 04:58 | the Image Processor to work.
| | 05:01 | In just a few minutes, it will have
resized, optimized as JPEG and added copyright
| | 05:06 | information to every one
of these photographs for us.
| | 05:09 | Let's go and see the results.
| | 05:12 | On my Desktop, I am going into my
Exercise Files and into my automation folder
| | 05:16 | and into my processed folder where I
see a new sub-folder called JPEG that the
| | 05:21 | Image Processor made for us.
| | 05:23 | I'll expand that folder and here you
can see we now have a JPEG copy of each
| | 05:28 | one of original images.
| | 05:29 | If I open one of those, you can
see that it is indeed smaller.
| | 05:33 | If I look in the Information area down
here I will click the arrow and I will
| | 05:37 | choose Show and I'm going to
choose Document Dimensions.
| | 05:41 | To contribute that this image really has
been resized and it will fit within our
| | 05:45 | imaginary box that's a 150
pixels wide and 225 pixels tall.
| | 05:50 | Also if you look in the title bar of the
image, you can see the copyright symbol.
| | 05:54 | This copyright symbol is coming from
the metadata that we added using the
| | 05:58 | Image Processor and if you'd like
to see the text that goes with this
| | 06:02 | copyright, you can go to the File menu
and down to File Info and here in the
| | 06:08 | File Info dialog box, you will see in
the Copyright Notice field the text that
| | 06:12 | we entered into the Image Processor.
| | 06:14 | So I am just going to cancel out of
here, and we will close this image.
| | 06:19 | So as you can see, the Image Processor
can save you lots of time and effort.
| | 06:23 | In the next movie, we are going to
create an action and use the Image Processor
| | 06:26 | to run that action at the end of all
of the other steps to sharpen the images
| | 06:31 | that it's working on.
| | Collapse this transcript |
| Automating actions with the Image Processor| 00:01 | In the last movie, we were walking
through the steps of using the Image
| | 00:04 | Processor to process
multiple images all at once.
| | 00:08 | In this movie, we're going to turn our
attention to the last step in the Image
| | 00:11 | Processor, Run Action.
| | 00:13 | In Photoshop CS3, whatever you specify
here as an action will be run after all of
| | 00:19 | the other steps have taken place,
including the resizing of your images.
| | 00:23 | That means that we have a perfect setup
here for sharpening our images, because
| | 00:27 | generally, you want to sharpen
photographs and pretty much any digital image at
| | 00:31 | the end of your workflow and certainly
after you have resized the image, as we
| | 00:36 | have here for use on our website.
| | 00:38 | So what we're going to do in this movie
is create an action that records the
| | 00:43 | steps of sharpening one photograph,
and then we will use the Image Processor to
| | 00:48 | apply that sharpening
action to multiple photographs.
| | 00:51 | So let's cancel out of the Image
Processor for now and I'm working here on an
| | 00:55 | image called outdoor_cup.psd.
| | 00:58 | If you've access to the Exercise Files,
you'll find this image in your Chapter 14 folder.
| | 01:04 | Notice that the size of this image is
150x225 pixels and that's just about the
| | 01:10 | size of the images that will be coming
out of the first three steps of our Image
| | 01:15 | Processor just before we run
the sharpening action on them.
| | 01:18 | If these pixel dimensions are not
visible to you, stretch the document window
| | 01:22 | out to provide enough room
to display this information.
| | 01:26 | You may also need to go into Photoshop
Preferences>Units & Rulers and set Rulers
| | 01:31 | to display Pixels rather than Inches.
| | 01:34 | We want to match up the sizes of those
files, because the ideal controls for
| | 01:39 | sharpening depends in large
part on the size of an image.
| | 01:42 | We'll begin making our sharpening
action by opening the Actions panel.
| | 01:46 | If you've set your panels to the
default workspace, you'll find the Actions
| | 01:50 | panel here under this icon in
the Collapsed column of panels.
| | 01:53 | I'll click that icon to see
the pop-out Actions panel.
| | 01:57 | We're looking at the default
actions that come with Photoshop.
| | 02:01 | I'm going to create |
|
|
