1. Understanding the InterfaceInterface Overview| 00:01 | In this movie we're going to take a look at the main elements
that make up the interface in Photoshop CS2 and ImageReady CS2.
| | 00:07 | The first element is the Toolbox, which is, by default,
docked in the top left hand corner of the screen.
| | 00:14 | I can click and drag, and reposition it anywhere I like on screen.
| | 00:17 | Now the Toolbox has a number of different options.
| | 00:21 | At the top you can see there's the link "Go to www.adobe.com", and if I click
that, that will take me to the Adobe Photoshop CS2 website on Adobe.com.
| | 00:32 | Next, we have the tools, and we're going
to talk about those in just a second.
| | 00:36 | You can see they basically take up about three quarters of the Toolbox.
| | 00:40 | Then we have our foreground and background color swatches,
we're going to talk about those in detail in the Color chapter.
| | 00:46 | We have our Edit in Screen Mode and Edit in Quick Mask Mode, so if you have
a channel or a mask in your file you'll be able to see that really quickly
| | 00:54 | by using the Quick Mask Mode.
| | 00:57 | And we have the Standard Screen Mode, Full Screen Mode,
and Full Screen Mode without the menu bar options.
| | 01:06 | These are different ways, as you can see, to
view your document inside the document window.
| | 01:10 | I'm going to return that to Standard Screen Mode.
| | 01:14 | And last we have this really handy option called Edit in
ImageReady, and you're going to find yourself using this a lot
| | 01:19 | when you're designing web graphics, because you'll often design something
in Photoshop CS2 and then want to go to ImageReady CS2 to use some
| | 01:27 | of the features that are there, such as creating a
rollover or creating an image map, exporting to Flash.
| | 01:33 | Whatever the case may be, it's very tedious to have to save
your changes, exit Photoshop, open ImageReady, open the file.
| | 01:41 | All you have to do is click this Edit in Image Ready button.
| | 01:44 | You can see I have this Java Co. Tea file open.
| | 01:47 | Click it...
| | 01:48 | There it is. It's already open in ImageReady CS2.
| | 01:51 | If I want to go back to Photoshop CS2, you can see that at the
bottom of the ImageReady Toolbox I have the Edit in Photoshop option.
| | 01:59 | I can click that, and voila, I'm back in Photoshop CS2.
| | 02:03 | So, as I said, you're going to use that a lot when you're
designing web graphics because you'll often want to go back
| | 02:07 | and forth between the two programs.
| | 02:10 | Now let's talk a little bit about the tools and the Toolbox.
| | 02:13 | They are organized into different sections, and the first
section is basically the Selection Tool, the Move Tool,
| | 02:19 | the Crop Tool and the Slice Tool.
| | 02:21 | The second section are the photo retouching tools, so things like the Spot
Healing Brush, the Clone Tool, the Eraser Tool, and that kind of thing.
| | 02:30 | We're not going to spend a lot of time in this movie
focusing on the photo retouching tools because this is strictly
| | 02:36 | about designing web graphics, but if you are interested in
learning more about photo retouching there are a number of titles
| | 02:42 | in the Online Training Library that you can refer to on those topics.
| | 02:47 | Next we have the vector-based tools: the Type Tool, the
Shape Tool, the Path Tools, and the Past Selection Tools.
| | 02:56 | Last we have what I refer to as the navigation tools -- things like
the Zoom Tool, the Hand Tool, the Eyedropper Tool, the Notes Tool --
| | 03:02 | and those are basically there to help you navigate inside the document.
| | 03:05 | So zooming in and out, panning around your file with the Hand Tool.
| | 03:09 | Now you've probably noticed that some of these tools have this
little black arrows or triangles in the bottom right hand corner,
| | 03:16 | and what those indicate is that there are tools underneath in a flyout.
| | 03:20 | So to access those tools I'm just going to click and hold, and without
releasing my mouse, I'm going to position my cursor over the tool I want
| | 03:28 | to select and when I release my mouse, you can see
it automatically chooses the appropriate tool.
| | 03:34 | Take a look at that again. We'll go down to the Shape Tools flyout...
| | 03:37 | I'm going to choose the Rounded Rectangle.
| | 03:40 | When I release my mouse you can see it automatically changes.
| | 03:44 | Now, as I've been working with the tools in the toolbox you may
have noticed that at the top the options bar has been changing,
| | 03:51 | and that's the next element of the interface we're going to talk about.
| | 03:54 | Just like the Toolbox, I can click and drag and
reposition the Options Bar anywhere I like onscreen.
| | 03:59 | I prefer to leave it at the top, docked right below the menu bar.
| | 04:03 | The purpose of the Options Bar is to give you access
to controls depending on which tool you have selected.
| | 04:10 | As I said, it's contact sensitive.
| | 04:12 | So, if I have the Type Tool selected, you can see I
have a number of options on how to format my type.
| | 04:18 | If I have the Slice Tool selected, you can see
it gives me options on how to slice my image.
| | 04:23 | Likewise, the Crop Tool, and the Selection Tools, and the Move Tool.
| | 04:27 | I have a number of different controls.
| | 04:30 | And the Options Bar is great because it saves you from having to dig around
in palettes and dialog boxes to have access to the controls that you need
| | 04:37 | when you're working with specific tools.
| | 04:40 | Now, the Options Bar also contains this button called Go To Bridge,
and if I click that button, that's going to launch a new program
| | 04:49 | in Adobe Photoshop CS2 called Adobe Bridge.
| | 04:53 | And, if you've used past versions of Photoshop
before, you'll remember the File Browser.
| | 04:58 | Well, Adobe Bridge is basically the File Browser on steroids.
| | 05:01 | Adobe has made it into its own application and added
a significant amount of new functionality to it.
| | 05:07 | We're not going to talk in detail about Adobe Bridge in
this particular movie, but if you'd like to learn more
| | 05:12 | about Adobe Bridge there is an entire chapter
dedicated to it later on in this training.
| | 05:16 | So I'm just going to go to the Bridge menu and choose Quit Bridge.
| | 05:19 | If you're on a PC, you're going to want to choose File + Quit Bridge.
| | 05:24 | And, the last thing on the Options Bar, you can see I have
these three tabs, and if I click them, I see palettes.
| | 05:32 | This little area up here is called the Palette Well, and basically
it's a container where you can put some of your palettes,
| | 05:39 | and we're going to talk about that a little bit more in the
next movie when we talk about how to customize our interface.
| | 05:45 | But for right now, just remember that this is the Palette Well,
and it's a location where you can actually store your palettes.
| | 05:51 | So that leads us into the last element of the
interface, which is the palettes themselves.
| | 05:55 | And you can see that in addition to the palettes in the Palette
Well, we also have a number of palettes that are open on screen.
| | 06:02 | And, they're all defined by tabs, and they are
grouped together in different configurations.
| | 06:08 | You can see at the top we have the Navigator, the
Info, and the Histogram palette all grouped together.
| | 06:13 | We also have the Color Swatches and Styles palette grouped
together, the History and the Actions palettes, and the Layers,
| | 06:20 | Channels and Paths palettes.
| | 06:21 | And you can see that what I've been doing is just simply
clicking the tab, and that brings that particular palette forward
| | 06:27 | so that you can see the controls.
| | 06:29 | You can see if I click the Channels palette, I
see all of the options for the Channels palette.
| | 06:33 | I click the Layers tab, you can see I
see the options for the Layers palette.
| | 06:37 | Now there are some ways that you can customize your palette
configuration, and we're going to talk about that in the next movie.
| | 06:43 | But for now, it's just important to remember the main elements of
the interface that we talked about: the Toolbox, the Options Bar,
| | 06:48 | the palettes, and the Palette Well.
| | 06:52 | So now that we've taken a look at the interface elements in
Photoshop CS2, let's take a look at the elements in ImageReady CS2.
| | 06:58 | I'm going to click the Edit in Image Ready
button, and here we are in ImageReady CS2.
| | 07:04 | You can see that the basic configuration of the interface is the same.
| | 07:08 | Just like Photoshop, we have a Toolbox,
an Options Bar, and a series of palettes.
| | 07:13 | There's a couple things that I want to point out about the difference.
| | 07:16 | First, you'll see that the Toolbox has less tools in it,
and you can see that it's also organized a little bit differently,
| | 07:23 | so that's something to keep in mind.
| | 07:25 | The next thing is that the palettes look
a little bit different in some cases.
| | 07:29 | I'm going to take a look at this Slice palette for example.
| | 07:32 | You can see that there's these little arrows, and, basically,
if I click the arrow I can expand the contents of the palettes.
| | 07:41 | That's something that Photoshop CS2 doesn't have.
| | 07:44 | Just as in Photoshop, I can click the tabs and access the palettes,
but you can see that some of them have these little arrows
| | 07:49 | that allows you to expand them.
| | 07:50 | So that's one important difference in the interfaces that you're going
to want to remember as you're working between the two applications.
| | 07:57 | You also might just noticed that I clicked and dragged to reposition this palette
on screen, and that's one of the ways that you can customize the interface
| | 08:04 | in both Photoshop CS2 and ImageReady CS2, and that's exactly what
we're going to talk about in the next movie: customizing the interface.
| | Collapse this transcript |
| Customizing Palette Locations| 00:00 | >>Next we're going to take a look at how you can customize the
interface to suit your own workflow and the best way to do that is
| | 00:09 | by customizing the configuration of the palettes.
| | 00:11 | As you can see, the Toolbox and the Options Bar
really don't take up a lot of screen real estate.
| | 00:16 | Most of the real estate is taken up by the palettes, and often you're
going to find that you don't need access to every single palette.
| | 00:23 | Some of them you won't use at all, but others you'll use quite frequently.
| | 00:26 | So you will want to customize this based on your own unique workflow.
| | 00:29 | That's something that you'll learn over time using Photoshop CS2.
| | 00:33 | For the purpose of this movie, we're just going to move some
palettes around so I can show you how that actually works.
| | 00:38 | I'm first going to show you how you can undock palettes from palette groups.
| | 00:43 | You can see here at the top we have three
palettes that are grouped into one palette group.
| | 00:49 | We have the Navigator, the Info and the Historogram palette,
and I want to separate the Info palette from the palette group.
| | 00:55 | So I'm going to click the tab, and I'm going to click and drag, and when
I release my mouse you can see that the Info palette is now on its own,
| | 01:03 | and the Navigator and Histogram palettes now
don't have that Info palette inside their group.
| | 01:10 | I don't want to see my Navigator and Histogram anymore,
so I'm going to close this palette group
| | 01:16 | by clicking the little red button in the top left hand corner.
| | 01:19 | If you're using Windows, you're going to have a little X in the
top right hand corner and you're going to click that
| | 01:25 | to close the palette group.
| | 01:26 | There we go.
| | 01:26 | Now what I want to do is I want to keep my Swatches palette
but I don't want it to be inside this palette group.
| | 01:34 | So we know that I can click and drag to bring it out on its own.
| | 01:37 | But I'd like to group these two palettes together, so I can do two things.
| | 01:43 | I can group it into a palette group, just like
what they are here, or I can group them vertically.
| | 01:47 | And to do that I'm going to grab the tab, and as I position it
over the bottom you can see that there's this little rectangle,
| | 01:56 | this black outline around the bottom of the Info palette.
| | 02:00 | And when I release my mouse, you can see that the
Swatches palette is now docked vertically to the Info tab.
| | 02:07 | And if I move the Info tab you can see that the Info
tab and the Swatches palette move at the same time.
| | 02:13 | So that's one way that you can group palettes.
| | 02:14 | I'm going to go ahead and close the Color palettes.
| | 02:19 | Now what I want to do is I want to group
my History palette with my Info palette.
| | 02:23 | I don't want to group it vertically;
I want to group it into a palette group.
| | 02:26 | So I'm going to click and drag the History palette, and
I'm going to position it right on top of the Info palette.
| | 02:32 | And you can see that there is now a black outline around the
perimeter of the Info palette, and when I release my mouse,
| | 02:38 | the History palette is now docked with the Info palette in a group.
| | 02:44 | Let's take a look at some more examples.
| | 02:46 | Let's close the Actions palette.
| | 02:48 | I'm going to take my Layers palette and I'm going
to dock it vertically to the Swatches palette.
| | 02:53 | So again, we want to make sure that we see the line at the
bottom, which I can see right here, release my mouse, and there it is.
| | 03:00 | And we know that I can click and drag and
reposition that entire palette group on screen.
| | 03:06 | Now let's remember that we have our palettes up here in our Palette Well.
| | 03:10 | What if I want to have access to some of those?
| | 03:12 | Not a problem.
| | 03:13 | I'm just going to click and drag my Layer Comps palette, out of the palette
well, and I'm going to dock it with the Layers palette into a group.
| | 03:22 | And again, I'm going to position it on top of the palette so
we see the black outline around the perimeter of the palette.
| | 03:28 | Voila, there it is.
| | 03:31 | Now I'm going to close the Channels and Paths palette, and I'm
going to click and drag to reposition my palettes onscreen.
| | 03:40 | Now, a couple of things.
| | 03:42 | What if we want to put something into the Palette Well?
| | 03:46 | We've seen how we can take palettes out of the Palette well,
but what if we want to dock palettes into the Palette Well?
| | 03:52 | Well, that I can do - let's put our swatches palette up there.
| | 03:54 | I'm going to click and drag the tab, I'm going to drag it up, and when
you see the black outline around the perimeter or the palette well,
| | 04:02 | I release my mouse. There's our Swatches
palette inside the Palette Well.
| | 04:09 | Now I'm going to click and drag it out, and reposition it where it was.
| | 04:13 | So again, I want to see that little black outline, and there it
is. It's now docked vertically with our Info and Layers palettes.
| | 04:20 | I have turned a number of palettes off.
| | 04:23 | What if we want to turn them back on?
| | 04:25 | Well if we go up to our Window menu, you can see that there's
these checkmarks beside the palettes that are turned on.
| | 04:31 | And, if I want to turn on one of the palettes that I've
turned off, such as the Color palette, I can simply click it,
| | 04:39 | and now there is my Color palette.
| | 04:41 | Now, the Styles came with it. Why is that?
| | 04:44 | That's because the Color and Styles palette are grouped together, and
if you have palettes that are grouped together, if you turn them off
| | 04:51 | and turn them back on they're going to stay with that
grouping. That's an important thing to remember.
| | 04:56 | So I'm just going to go ahead and close that again.
| | 05:00 | So as you can see you have a lot of flexibility to be able to move your
palettes around on screen, and customize them in different configurations.
| | 05:08 | Let's go ahead and look at Imageready CS now.
| | 05:09 | So I'm going to click the Edit in Imageready
CS button. It basically works the same way.
| | 05:15 | I'm just going to click and drag my palettes
to group them in a similar configuration.
| | 05:21 | And you can see the same principles apply.
| | 05:25 | If I want to dock them vertically, I want to see the line at the
bottom of the palette. If I want to group them into a group,
| | 05:33 | I want to see the outline around the perimeter.
| | 05:36 | So basically things work the same way.
| | 05:38 | Let's just move our History palette as well. There we go.
| | 05:42 | Now if I want to put palettes into the Palette Well, such as my Optimize
palette, again I'm going to click and drag until I see the outline
| | 05:48 | around the perimeter, and now my Optimize
palette is inside the Palette Well.
| | 05:52 | I can also close all of my palettes using the same technique as
in Photoshop CS2, clicking the red button in the top left corner,
| | 06:01 | or clicking the arrow on the top right corner in Windows.
| | 06:04 | I can click and drag and move my palettes around.
| | 06:09 | Now, what happens if you want to get back to the default location?
| | 06:14 | No problem you can just go up to the Window menu, choose
Workspace, and Default Palette Locations in Image Ready.
| | 06:22 | Window... let's go over that again.
| | 06:24 | Window, Workspace, Default Palette Locations.
| | 06:27 | Let's take a look at that in Photoshop because it's a little bit different.
| | 06:30 | You're going to choose the Edit in Photoshop button and jump back --
you can see it's remembered our palette locations that we customized -
| | 06:36 | I'm going to choose Window, Workspace, Default Workspace.
| | 06:39 | So you can see it's basically the same concept. It's just the wording
is a little bit different, so don't get tripped up on that when you go
| | 06:44 | between the two programs.
| | 06:46 | So there you go, that's how you can customize
your palettes in Photoshop and Imageready.
| | 06:52 | Now, you may want to save your palettes so that you
can access the same configuration again and again.
| | 06:58 | We're going to learn about that in the next movie.
| | Collapse this transcript |
| Saving Custom Palette Locations| 00:01 | >>In the last movie you learned how to customize your palette
configuration. One thing that you can do to take that a step further is
| | 00:09 | to save custom workspaces and to save your custom configurations.
| | 00:13 | You'll find that really helpful because, as you learn to use
Photoshop more and more, you'll learn different ways of doing things
| | 00:20 | and different work flows.
| | 00:21 | For example, if you're doing photo retouching, you may want to have a
whole different set of palettes open than if you're designing web graphics.
| | 00:30 | So to be able to figure out how you work, have the palettes
available, and then save them different workflows is really beneficial.
| | 00:38 | We're going to take a look at how to do that in this movie.
| | 00:40 | So, let's start off with one configuration, and the
examples I'm going to show are just things that work for me.
| | 00:47 | You're going to develop your own habits and own
preferences for which palettes to have open.
| | 00:52 | The purpose is just to show you how this works.
| | 00:55 | So I like to have my iInfo palette open, I like to have access to my
Color palette, so I'm going to dock that vertically below my Info palette.
| | 01:03 | And I definitely like to have my Layers palette. I'm going to
dock that below my Color palette. I'm going to dock it vertically.
| | 01:10 | And I'm going to group my Layer Comps palette with my Layer palette.
| | 01:14 | I'm also going to dock my History palette with my Info palette.
| | 01:18 | I also like to work with Styles, so I'm
going to dock that with my color palette.
| | 01:24 | Then I'm going to turn everything else off.
| | 01:27 | I'm going to click and drag to reposition this right up there.
| | 01:33 | So I'm going to call this my web workflow.
| | 01:35 | So what I'm going to do is I'm going to save this, and to do that I'm going
to go to the Window menu, I'm going to choose Workspace, Save Workspace.
| | 01:42 | I'm going to call this Web_Workflow.
| | 01:47 | Now you see you have two other options here other than Palette Locations.
| | 01:51 | You have Keyboard Shortcuts and Menus.
| | 01:53 | For the purpose of this movie we're just going to concern
ourselves with Palette Locations, but I'm going to show you how
| | 01:58 | to create an entire workspace complete with palettes,
keyboards, and menus towards the end of this chapter.
| | 02:05 | So I'm going to click Save.
| | 02:06 | There we go.
| | 02:08 | Now let's reset our workspace to the default.
| | 02:10 | I'm going to choose Window, Workspace, Default Workspace.
| | 02:14 | Now I'm back to my default.
| | 02:16 | Now I want to go back and get that web_workflow.
| | 02:19 | I'm going to choose Window, Workspace, and way down here at the
bottom you can see my web_workflow, the one that I've just created.
| | 02:28 | I'm going to click web_workflow.
| | 02:31 | There you go.
| | 02:32 | It remembered all of my palette locations.
| | 02:35 | Now, as you work you may decide that you don't
like that anymore, you may want to delete it.
| | 02:40 | Not a problem.
| | 02:41 | I'm going to choose Window, Workspace, Delete Workspace, and it's going to
give you a list of either the current one - which you can see is selected -
| | 02:49 | or all, and I only have this one, so obviously
it makes sense to choose that one.
| | 02:53 | I'm going to choose Delete.
| | 02:55 | Do I really want to delete it?
| | 02:57 | Absolutely.
| | 02:58 | Now if I go to my Window menu, Workspace, you can see it's no longer there.
| | 03:03 | So being able to save it, as you can see, gives you a lot
of flexibility to be able to create workspaces, save them,
| | 03:10 | and have access to them on a regular basis.
| | 03:13 | Let's jump over to Imageready CS2.
| | 03:14 | And we're going to do the same kind of thing.
| | 03:18 | Let's grab our Info palette.
| | 03:20 | I like to have access to my Optimize palette so
I'll dock that vertically under my Info palette.
| | 03:26 | I also like to have access to Colors, which I'm going to
group with Info and Styles, which I'm also going to group.
| | 03:33 | And my Layer palette, and my Layer Comps palette.
| | 03:40 | Also, a very important one is Web Content.
| | 03:44 | And Color Table.
| | 03:46 | So let's group those all in here.
| | 03:47 | And I'm just going to turn off the rest, except for my Slice palette here,
and I'm going to group my Web Content palette underneath that palette.
| | 03:59 | So there we go, now I have everything I need.
| | 04:01 | I'm going to click and drag and move that stuff around.
| | 04:04 | Now I'm just going to go to the Window menu, choose Workspace,
Save Workspace, and I'm going to call this web_workflow.
| | 04:17 | Click OK, or press Return or Enter.
| | 04:20 | Go to Window, Workspace, Default Palette Locations...
| | 04:26 | takes me back to my default.
| | 04:28 | Window, Workspace, Web Workflow...
| | 04:32 | there we go.
| | 04:33 | It remembered my palette locations.
| | 04:35 | Just like with Photoshop, if I want to delete it, I can choose
Window, Workspace, Delete Workspace, choose the one I want to delete.
| | 04:41 | You can see this dialog box is a little bit different, but it's fairly
self-explanatory. You're just going to choose the one you want to delete.
| | 04:48 | Click OK. Window, Workspace...
| | 04:51 | now it's gone.
| | 04:52 | So you can see that the ability to customize and save these in different
configurations is really helpful, especially if you end up with two
| | 05:00 | or three different workflows that you like.
| | 05:01 | You can save multiple workflows, choose between them, and
have access to the palettes that you need on a regular basis.
| | Collapse this transcript |
| Customizing Keyboard Shortcuts| 00:01 | >>Many commands in Photoshop CS2 have a
keyboard shortcut associated with them.
| | 00:05 | So, for example, if I go to the File menu and look at New, you can see
on the right hand there's the (Command+N) for Mac or [Ctrl+N] for Windows.
| | 00:13 | That's a keyboard shortcut.
| | 00:14 | So if I press (Command+N) on Mac or [Ctrl+N] on
Windows, you can see that it opens the New dialog box.
| | 00:20 | And that's an example of a keyboard shortcut.
| | 00:24 | Let me go ahead and click Cancel.
| | 00:25 | Now, there's a number of different keyboard shortcuts
assigned to different menu commands.
| | 00:32 | Let' see menu commands in some of the palette menus
such as the layers palette here.
| | 00:33 | You can see there's one assigned to creating a new layer.
| | 00:36 | And there's also some assigned to some of the different tools.
| | 00:39 | You can see that the Magic Wand Tool, for example. If I
hover my mouse over it to see the tool tip, you can see
| | 00:45 | that the letter W is associated with it.
| | 00:49 | As you get more comfortable working in Photoshop CS2, you're going to
find that there's some functions or some dialog boxes that you access more
| | 00:56 | than others, and you may decide that you want to change your keyboard
shortcuts to be a little bit more convenient to your workflow.
| | 01:03 | Fortunately Photoshop CS2 has a feature that allows you to do that.
| | 01:07 | I'm going to go up to the Edit menu and
I'm going to choose Keyboard Shortcuts.
| | 01:11 | And that's going to open up the Keyboard Shortcuts and Menus dialog box.
| | 01:15 | You can also customize the controls in your menus, but
we're going to talk about that in a separate movie.
| | 01:20 | Right now we're just going to focus on keyboard shortcuts.
| | 01:22 | You can see right now this is set to the Photoshop defaults set.
| | 01:27 | Now, before I start making any changes, I'm going to create a new set.
| | 01:31 | The reason I like to do that is that I don't like to overwrite my defaults.
| | 01:36 | It's very important to keep the defaults because you
never know when you're going to want to get back to them.
| | 01:40 | So I'm going to click the Create New Keyboard Shortcuts
Set button, which is going to open up this Save dialog box,
| | 01:46 | and I'm going to type web_workflow.kys.
| | 01:51 | The .kys extension is what will tell Photoshop
CS2 that this is a keyboard shortcut file.
| | 01:57 | I'd recommend that you leave the extension in
place regardless of whether you're using Mac
| | 02:01 | or PC because it will help Photoshop CS2 know what file it is. It
will also help you if you ever want to take your files and switch them
| | 02:09 | to a different platform.
| | 02:10 | For example, if you want to go from Mac to Windows or
Windows to Mac, it will help you to have that extension.
| | 02:14 | Now let's take a second and look at where this file is being saved.
| | 02:18 | By default, if I scroll back, you can see it's saving it in my
Applications folder, Photoshop CS2 Presets, Keyboard Shortcuts.
| | 02:27 | And again, I would suggest that you keep it here. It
will be much easier for you to access the file if you save it here
| | 02:35 | because this is the first place Photoshop
CS2 is going to look for a .kys file.
| | 02:40 | If it is here it will automatically
appear up in that set pop-up menu.
| | 02:44 | So I'm going to click Save and now I can go
ahead and start customizing my keyboard shortcuts.
| | 02:50 | You can see that there are keyboard shortcuts
for Application Menus, Palette Menus, and Tools.
| | 02:54 | So I'm going to leave Application Menus checked. I'm going to
click this little arrow beside the File menu to expand the contents
| | 03:00 | and I'm going to scroll down until I get to Save for Web.
| | 03:03 | Accessing the Save for Web dialog box is something that I do
all the time when I'm designing web graphics in Photoshop CS2.
| | 03:10 | Now you can see it already has a keyboard shortcut, but you
can also see that it's a very complicated keyboard shortcut.
| | 03:16 | I just find that that combination of
keystrokes is really tedious for me to use.
| | 03:21 | I want to change it to something easier.
| | 03:23 | So I'm going to click Save for Web, to
select it, and I'm going to press F5.
| | 03:28 | And you can see I get this little error message: "F5 is already
in use and will be removed from Window Brushes if accepted."
| | 03:36 | What Window Brushes basically shows is the Brushes palette,
and the thing about keyboard shortcuts in Photoshop is
| | 03:44 | that pretty much every available shortcut is
already used somewhere in the application.
| | 03:49 | So, coming up with something new will be very hard.
| | 03:51 | So what you're going to have to do is make some comprimises.
| | 03:54 | What keyboard shortcuts can you live without
and what keyboard shortcuts are really critical?
| | 03:58 | In my case, having access to the Save for Web dialog box is a lot more
convenient for me than having access to Window Brushes by pressing F5,
| | 04:06 | so I really don't mind getting rid of that keyboard
shortcut and using it for Save for Web.
| | 04:15 | So I can do a couple of things.
| | 04:17 | I can choose Accept, which is going to accept that
change, or I can choose Accept and Go to Conflict.
| | 04:22 | If I thought, "Ooh, you know, I really want to have a shortcut for Window
Brushes, but something else", I would choose Accept and Go to Conflict.
| | 04:29 | I don't really care that I don't have a keyboard shortcut
for Window Brushes, so I'm just going to click Accept,
| | 04:34 | and it's going to accept my change.
| | 04:36 | Now it's set up for F5.
| | 04:37 | I could Undo it, I could also choose to Use the Default.
| | 04:42 | I'm pretty happy with this as it is. I'm
going to do is I'm going to click the Save button.
| | 04:46 | It's going to save the changes to the current shortcuts...
| | 04:50 | there we go.
| | 04:51 | Now I'm going to click OK, and I'm going to take a look at my File menu,
and you can see Save for Web now has that little F5 right beside it,
| | 05:02 | which indicates that's a keyboard shortcut.
| | 05:04 | If I press F5, you can see it automatically
opens up the Save for Web dialog box.
| | 05:09 | I'm going to click Cancel.
| | 05:10 | So that's how easy it is for you to create
custom keyboard shortcuts in Photoshop CS2.
| | 05:16 | One thing I'll point out is that this feature is only
available in Photoshop CS2, it's not available in Imageready CS2.
| | 05:23 | Now, you may decide to customize a whole bunch of keyboard
shortcuts, and you may decide that you want to have a printed list
| | 05:32 | of all those keyboard shortcuts.
| | 05:34 | That's really easy to do.
| | 05:35 | Go to Edit, Keyboard Shortcuts.
| | 05:37 | You can see we have our web_workflow selected.
| | 05:41 | I'm going to click this button called Summarize.
| | 05:44 | What it's, as you can see, generating an HTML file.
| | 05:48 | I'm going to just save this on my desktop so I can access it really easily,
and I'm going to click Save, and you can see it automatically opens it
| | 05:57 | up in your default web browser, in my case Safari.
| | 06:00 | Now you can see a huge list of all
the keyboard shortcuts in the application.
| | 06:05 | And look at this.
| | 06:07 | There is our F5 that we assigned to Save for Web.
| | 06:10 | If we go down to say, Window Brushes...
| | 06:15 | scroll all the way down here...
| | 06:17 | Window Brushes. You can see that it doesn't have anything beside
it, and that's because we chose to override that keyboard shortcut,
| | 06:24 | which was originally F5, and use it for Save for Web.
| | 06:27 | If you want to print this, just simply
go to the File menu and choose Print.
| | 06:33 | You can print out a complete list of all the
keyboard shortcuts that you've customized in Photoshop CS2.
| | 06:40 | Now, we just chose to customize one simple application menu, but you
can also choose to customize keyboard shortcuts for palette menus,
| | 06:48 | and also for some of the tools.
| | 06:51 | So, depending on what your workflow is, you may decide to make changes
to those keyboard shortcuts as well, but the same principle applies.
| | 06:57 | You simply choose the tool or the command that you want to customize,
press the keyboard shortcut, decide if you want to accept the conflict,
| | 07:06 | and then go ahead and save the changes to the keyboard shortcut set.
| | 07:11 | But let's just go ahead and click Cancel and return to Photoshop CS2.
| | Collapse this transcript |
| Customizing Menus| 00:01 | >>In the last movie we took a look at how to
customize keyboard shortcuts in Photoshop CS2.
| | 00:05 | Something else you can do to even further
customize your interface is to customize the menus.
| | 00:12 | Now, you might be wondering, why would I customize my menus?
| | 00:15 | Well let's take a look at a couple of examples.
| | 00:17 | If I go to my View menu, and go to the Show menu or Show
flyout, you can see that there's a number of options here.
| | 00:24 | Two that I use all the time when I'm designing web graphics are Smart
Guides and Slices, but I don't always like to have them turned on.
| | 00:31 | So, looking in this menu, it's sometimes hard to
see what they are if I'm working really quickly.
| | 00:35 | So I might want to highlight those in different
colors to show me quickly which ones I want access to.
| | 00:42 | So, that's one thing that we can do. We can highlight our menu commands.
| | 00:45 | Second thing- let's take a look at this Filter menu: it is long.
| | 00:49 | There is a lot of stuff in here, and, quite
frankly, I don't use very many of the filters.
| | 00:54 | There's only a few that I use on a regular basis.
| | 00:57 | So, what I can do is just turn off some of the menu items so
that I don't have to see them, and that makes it easier for me
| | 01:04 | to quickly access the filters that I want to access on a regular basis.
| | 01:09 | So, we can highlight menu commands, we can turn them off.
| | 01:12 | Let's take a look how.
| | 01:12 | I'm going to go to the Edit menu, and I'm going to choose Menus.
| | 01:16 | That opens up the Keyboard Shortcuts and Menus dialog box,
and, because we chose Menus, the Menus tab is brought forward.
| | 01:23 | Just like when we customized keyboard shortcuts, the very first thing
I'm going to do is I'm going to click the Create New Set button,
| | 01:29 | and the purpose for that is that we don't want to overwrite our
Photoshop defaults, we want to create a new set of customized menus.
| | 01:37 | So I'm going to name this web_workflow.
| | 01:40 | The .mnu extension is what tells Photoshop what kind of file this is.
| | 01:46 | The .mnu extension tells it that this is customized menu commands.
| | 01:52 | Now, let's take a look at where this is going to get saved.
| | 01:55 | If I go down here and scroll back, you can see I'm in
my Photoshop CS2 Presets Menu Customization folder.
| | 02:02 | I would recommend that you save all of the .mnu files in this folder.
| | 02:07 | The reason for that is that by saving in this folder, Photoshop will
automatically look in that folder to populate this set pop-up menu.
| | 02:15 | So it'll make it a lot easier for you to be able to
load the menu file if you save it in that folder.
| | 02:22 | So I'm going to click Save.
| | 02:25 | Now we have web_workflow.
| | 02:27 | Let's look at what type of menus we can customize.
| | 02:29 | We can customize application menus and palette menus.
| | 02:32 | Let's start with application menus.
| | 02:35 | So what are the things that we're going to do?
| | 02:36 | We're going to highlight and we're also going to
turn off the visibility of some of the menu items.
| | 02:40 | So let's look at the highlighting first.
| | 02:42 | Let's go to the View menu, click to expand
it, and scroll down until we get to Show.
| | 02:50 | The two things that I use a lot are Smart Guides and Slices.
| | 02:54 | I'm going to click Smart Guides to select it, and you can
see that we have a Visibility field and a Color field.
| | 02:59 | We're just going to concern ourselves with the Color field for right now.
| | 03:02 | I'm going to click the None option. You can see that it brings
up this pop-up menu, and I can now customize that menu command
| | 03:09 | to be highlighted in a specific color.
| | 03:11 | I'm going to choose Orange.
| | 03:13 | Now I'm going to click Slices.
| | 03:15 | I'm going to do the same thing here: I'm going to click the None
to bring up the pop-up menu and I'm going to choose Blue.
| | 03:21 | So now you can see I have orange for my smart guides...
| | 03:24 | blue for my slices.
| | 03:27 | Wonderful.
| | 03:29 | Now let's scroll up, click the arrow beside the View menu to close
it, and click the arrow beside the Filter menu to open it up.
| | 03:39 | What I want to do here is, instead of changing the
color, I want to actually turn off some of the commands,
| | 03:46 | because I just find this list to be too long.
| | 03:48 | So I'm going to turn off Extract.
| | 03:51 | And what you can see here is that in this Visibility column I'm
just clicking. When we see the eye it means it's turned on,
| | 03:57 | and when we click the eye and see it's turned
off, it means the Visibility is turned off.
| | 04:01 | That's a common visual metaphor that you're going to see used
throughout Photoshop. The eye icon means that visibility is turned
| | 04:08 | on and when it's off it means it's turned off.
| | 04:11 | So I'm going to turn off Extract and Liquify.
| | 04:16 | Here we have the Artistic Filter menu. I don't use any of the commands
in the Artistic Filter menu very often, so I'm going to turn them all off.
| | 04:24 | Scroll down a bit more...
| | 04:26 | now we have Blur.
| | 04:26 | Now here it's a bit trickier because I do use some of the Blur
commands, but only a few, so I'm going to turn off the ones I don't use.
| | 04:33 | As I mentioned before, I'm clicking the visibility
icon, the eye, to turn off the ones I don't use.
| | 04:39 | There we go.
| | 04:43 | Now, just like with the Artistic effects, I very rarely
use the Brushstrokes, so I'm going to turn those off.
| | 04:50 | And the Distort.
| | 04:51 | Now I do occasionally use some of these Noise effects, so
I'm just going to turn off the Median and the Despeckle.
| | 05:00 | Those are the ones I don't use very often.
| | 05:02 | I'm going to turn off all the Pixelate effects, the Render effects.
| | 05:09 | I do use some of the Sharpen ones, so I'll
turn off Sharpen, Sharpen Edges, and Sharpen More.
| | 05:16 | And leave the Smart Sharpen and Unsharp Mask turned on.
| | 05:19 | I'm going to turn off all the Sketch effects,
and all of the Stylize effects.
| | 05:25 | Now sometimes I'm saying Effects and sometimes I'm saying Filters.
| | 05:28 | The two terms can be used interchangibly.
| | 05:30 | Turn off Texture, turn off Video.
| | 05:34 | Now we get down to Custom. I do use some of these, specifically
the Offset filter, so I'm going to turn everything else off except
| | 05:40 | for the Offset filter.
| | 05:42 | I'm going to turn off all the Digimark ones as well.
| | 05:45 | So there we go.
| | 05:47 | Now we have made some changes to our menus.
| | 05:49 | I'm going to click the arrow here beside Filter to close it.
| | 05:53 | Now you can see that up here we have web_workflow (modified), so in
order to accept all my changes I'm going to click the Save button,
| | 05:59 | that gets rid of that word (modified), so now
I know that all my changes have been saved.
| | 06:04 | I'm going to click OK.
| | 06:07 | Now let's take a look at our menus.
| | 06:08 | Let's go to the View menu...
| | 06:10 | Show... and you can see that Smart Guides and Slices are
now highlighted using that orange and blue colors I specified.
| | 06:17 | I really like this because now I can see
those very clearly when I'm choosing them.
| | 06:22 | Because I'm a very visual person, I see the color before I see
the word, so this really helps me identify those two commands.
| | 06:29 | Now let's go to Filter.
| | 06:30 | Look at how much shorter this is.
| | 06:32 | We don't have that really long menu anymore. We just have the
menu items that we kept in the Customized Menus dialog box.
| | 06:41 | So that's a way that you can reduce
the number of items in your menus.
| | 06:46 | Because Photoshop is a very rich program, you'll find
that there's a lot of stuff you really don't use that often,
| | 06:52 | and you'll find the ability to turn off menu commands is really useful.
| | Collapse this transcript |
| Saving Custom Workspaces| 00:00 | >>In this chapter we've been looking at the interface and
ways that you can customize the interface in Photoshop CS2.
| | 00:07 | Specifically, we've looked at how to customize
palettes, keyboard shortcuts, and menus.
| | 00:12 | One of the new features in Photoshop CS2 is the ability to customize
and save entire workspaces, which includes all three of those items,
| | 00:21 | palettes, keyboard shortcuts and menu items. And
we're going to take a look at how to do that.
| | 00:26 | You can see that I've already customized my palettes; they no longer
look they way that they did when Photoshop was first launched.
| | 00:33 | I have my Info and History palette grouped together,
my Color and Styles palette grouped together,
| | 00:38 | my Layers and Layer Comps palettes grouped together, and all of those
palettes are then docked vertically into a group, which allows me to click
| | 00:46 | and drag and reposition the entire group at once.
| | 00:50 | So I've customized my palettes.
| | 00:52 | If we go up to the Edit menu, and choose Keyboard
Shortcuts, it's automatically set to Photoshop defaults.
| | 00:58 | However, I also have a web_workflow Keyboard Shortcut set and I'm
going to choose that. I select it, and click the Menus tab,
| | 01:07 | and I'm going to choose web_workflow.
| | 01:10 | If you're not sure how to create custom menus and keyboard shortcuts,
make sure you take a look at the earlier movies in this chapter
| | 01:15 | if you skipped over them.
| | 01:17 | Now I'm going to click OK, and all my custom keyboard
shortcuts, my custom menus, and my custom palettes will be selected.
| | 01:26 | So now I want to be able to save everything
into an entire custom workspace.
| | 01:30 | I'm going to choose Window, Workspace, Save Workspace,
and I'm going to call this web_workflow_workspace.
| | 01:40 | And I'm going to turn on not only the Palette Locations
option, but also the Keyboard Shortcuts and Menus.
| | 01:47 | So what this will mean is that when I'm using my default
workspace, I'll be using my default keyboard shortcuts.
| | 01:54 | When I'm using my web workflow workspace, I'll be using my web
workflow keyboard shortcuts, menus, and palette locations.
| | 02:01 | So I'm going to click Save.
| | 02:04 | And nothing really happens on screen, but, if I go up to my Window
menu and choose Workspace, you can see web_workspace is checked.
| | 02:11 | I'm going to choose Default Workspace, and
you can see my palettes return to default.
| | 02:16 | If I choose Edit, Keyboard Shortcuts, it returns to Photoshop defaults.
| | 02:20 | If I click Menus, it's Photoshop defaults again.
| | 02:23 | That's because that's how things are set up in the default
workspace - it uses the Photoshop defaults for keyboard shortcuts
| | 02:30 | and menus, and this palette configuration.
| | 02:33 | Now let's go to the Window menu, choose Workspace, and then web_workflow_workspace.
| | 02:39 | The selected workspace will modify menu and keyboard shortcuts.
| | 02:43 | Do I want to apply it?
| | 02:44 | Yes, I do. There's my palettes.
| | 02:47 | We can see that the change to our palettes has worked.
| | 02:49 | Now let's look at the other two options.
| | 02:52 | We're going to go to Keyboard Shortcuts, there's our web_
workflow; click Menus, there's our web_workflow again.
| | 02:58 | So as you can see, the ability to save all of
these options into one workspace is really helpful.
| | 03:04 | As I've mentioned before in this chapter, you're often going to find
specific configurations of keyboards, menus and palettes that work for you,
| | 03:13 | depending on what type of work you're doing and what your own
preferences are, and the ability to save this all together
| | 03:20 | into a single workspace is really quite useful.
| | Collapse this transcript |
|
|
2. Organizing AssetsUsing the Welcome Screen| 00:01 | >>When you first open Photoshop CS2, you'll be
presented with a Welcome screen, which you can see here.
| | 00:06 | The purpose of the Welcome screen is to provide information about the
new features of Photoshop CS2 and to give you access to some tutorials.
| | 00:13 | To access any of the information from the Welcome screen,
just simply position your cursor over any of the blue text.
| | 00:20 | As you can see, when I do that, my cursor changes from
the Arrow to the Hand, which indicates that it's a link.
| | 00:27 | You simply click the link and it will
automatically open the associated file.
| | 00:33 | Some of the files are in PDF format, so you'll need to make
sure that you have a program on your computer that opens a PDF.
| | 00:38 | You can use Adobe Reader or Adobe Acrobat Professional, or if
you have a Mac, you can also use Preview, which you can see here.
| | 00:46 | However, I'm going to close this file and return to Photoshop CS2.
| | 00:49 | Now I want to point out that some of these options, such as the
Advanced Techniques require the use of an internet connection,
| | 00:58 | so before you access these, make
sure that you are connected to the internet.
| | 01:02 | There may be a time when you don't want the Welcome screen to
appear every single time you open Photoshop CS2, and that's fine,
| | 01:09 | you can simply uncheck the Show This Dialogue At Startup option
then click Close. The next time you open Photoshop CS2,
| | 01:18 | you won't see that Welcome screen.
| | 01:20 | Now, if you turn that option off, but want to get back to the Welcome screen
at some point, you can simply go to the Help menu, choose Welcome Screen,
| | 01:27 | and either look at it once, as I did just here, or you
can also turn on the Show This Dialogue At Startup option.
| | 01:34 | I'm going to go ahead and click Close, and in the next
movie we'll take a look at some of the other elements that make
| | 01:40 | up the interface in Photoshop CS2.
| | Collapse this transcript |
| Understanding the Bridge Interface| 00:00 | >>Now that we've taken a look at how the interface in
Bridge works, let's take a look at some different techniques
| | 00:07 | for how we can organize our images in Bridge.
| | 00:10 | The first thing that I want to point out is that any time you click an
image, you can automatically see a preview of what that image looks like,
| | 00:17 | right over here in the Preview Pane.
| | 00:21 | This folder here predominantly contains Photoshop files.
| | 00:24 | The nice thing about Bridge over the File Browser is that you can actually
view different file formats other than just the Photoshop formats,
| | 00:32 | specifically other Adobe Creative Suite programs.
| | 00:35 | Let's double-click this Formats folder, and
we're going to start with the Illustrator folder.
| | 00:39 | You can see that we automatically get
a preview of what those files look like.
| | 00:44 | I happen to have Adobe Illustrator installed on this
computer, but if you didn't, you would still see these previews.
| | 00:50 | That's because Adobe Bridge is smart enough to be able
to preview the contents of the Adobe Illustrator file,
| | 00:56 | it is an Adobe Creative Suite program.
| | 00:59 | We're going to click the Back button, and now
let's take a look at the InDesign folder.
| | 01:02 | Here, you can see I have an InDesign file. You can see the preview
right here in the Thumbnail View and over here in the Preview pane.
| | 01:09 | So, let's click Back.
| | 01:11 | And now, let's click Other.
| | 01:12 | This is just sort of a smattering of different graphic formats.
| | 01:16 | You can see we've got JPEG, we have GIF,
EPS, TIF, and a Windows (BMP) bitmap file.
| | 01:22 | Again, with these, you can see a preview. Adobe
Bridge is able to view what those files look like.
| | 01:27 | Let's go back one more time and now, I want to go into this Acrobat folder.
| | 01:31 | And let's click on teacup.pdf.
| | 01:33 | Just like everything else, you can see a preview of the file.
| | 01:36 | Now, I want to click on this javaco_multi file,
and I want you to see the difference down here.
| | 01:41 | It gives me the preview of the image and it gives me the
file name, but you can see I also have some other information.
| | 01:47 | This indicates it's a multi-page document,
and you can see, I'm on page 1 of 5.
| | 01:53 | I can use these little navigation buttons
to click and view each page of that file.
| | 02:01 | That doesn't just apply to a PDF, it applies to any
Creative Suite program that has a multi-page document.
| | 02:07 | And that is really cool. I can also just type the number in here and press
Enter or Return, and you can see it automatically updates the preview.
| | 02:16 | Sometimes you'll find that, you know that
you have something and you kind of know what file it's in,
| | 02:21 | but you know that there's multiple pages, and you want
to sort of figure out where it is, this is really cool,
| | 02:27 | because you can browse through previews of every
single page of a multi-page document.
| | 02:30 | I love this feature. I think it's a fabulous addition to this program.
| | 02:34 | So, now that we've had a chance to look at the format, let's click
our O2 Bridge folder to get back in, looking at our Bridge folder,
| | 02:40 | and take a look at how we can organize our images.
| | 02:43 | By default, all of your images are going to be organized alphabetically.
| | 02:47 | Now, sometimes you're going to want your
images to appear in a slightly different order.
| | 02:51 | So, for example, we might want to have all the images
that have the Javaco "smoke swirl" kept together.
| | 02:56 | Well, I can do that really easily just by clicking and dragging, and you
can see that blue line, that's going to indicate where the file's going
| | 03:03 | to go when I release my mouse.
| | 03:04 | So let's try it again, let's move this decaf file over, and you
can see that if I released it here, it would go between the candles
| | 03:10 | and the canditures file, if I release it here, it's
going to go between the chai and the candles file.
| | 03:16 | Basically, we can grab these images, and click, drag,
and position them exactly where we want on the screen,
| | 03:27 | so that we keep images that look similar together.
| | 03:30 | I find that this is really quite helpful to be able
to do this is, to just keep moving my files around,
| | 03:36 | and it allows me to organize them and just kind of see
where I'm at, by being able to group them together in this manner.
| | 03:45 | There we go. We've got them more or less grouped in an intelligent
structure here, where we have all of our Javaco images at the top,
| | 03:54 | we have these images that look very similar, and then we have
our chai images, and images that make up elements of our website,
| | 04:01 | and then some photographic content down here.
| | 04:03 | It's really easy to be able to rearrange these in a different
order, rather than just have them organized alphabetically.
| | 04:11 | Now, something else that we can do is we can move them into different
folders, and in fact, we can create folders from right within Bridge.
| | 04:19 | I'm going to click in the gray area here, just to de-select
any images, and I'm going to click the Create A New Folder button.
| | 04:25 | That's automatically going to create a new
folder at the end of the contents in this folder,
| | 04:30 | and we're going to call this one javaco2 and press Return.
| | 04:35 | Now what I can do is I can actually
click and drag content into my folders.
| | 04:41 | So what I'm going to do is I'm going to grab this chai.psd file,
and I'm going to click and drag it down to that javaco2 folder
| | 04:47 | that I just created. You can see it disappeared, but
if I double-click my javaco2 folder, there it is.
| | 04:53 | Now let's click the Adobe Bridge folder, and I'm
going to click decaf.psd, hold down my Shift key,
| | 05:00 | and select javaco_tea to multiple select my images,
and I'm going to drag them into that javaco2 folder.
| | 05:06 | Now, if I double-click it, you can see
that I have all of my images in here.
| | 05:12 | Let's go back to the 02_ Bridge folder.
| | 05:15 | Now I can also rename and delete folders from here, so let's double-click
our javaco folder. You can see that it has a handful of images in it.
| | 05:23 | We're going to click the Up button, and with that folder selected,
I'm going to hit the Delete Item, and it's going to ask me if I'm sure
| | 05:30 | that I want to move them. I'm going to click Yes.
| | 05:33 | There we go, that folder is gone.
| | 05:35 | Now what I want to do is show you how to rename folders.
| | 05:38 | This is a little bit different than what you might think.
All you have to do is click it once and you'll get a bounding box.
| | 05:46 | At first, I found this a bit confusing because in Photoshop
we double-click to rename our layers and in Windows we often right-click
| | 05:52 | and choose Rename. It's actually just oversimplified in Bridge;
you just click it once and it'll automatically give you the file name.
| | 05:59 | So let's just call this javaco_images and hit Return.
| | 06:06 | That's how we can rename and delete files.
| | 06:08 | Now, if we double-click and go in here, you can see that all of
the files that we created in here are a result of moving them
| | 06:16 | from that 02_ Bridge folder.
| | 06:18 | Now, if instead of moving them from the Bridge folder into the javaco
folder, what we wanted to do is just copy them, we can do that as well.
| | 06:25 | So let's start with our chai image.
| | 06:27 | What I'm going to do is I'm going to hold down the Option or Alt
key, and I'm going to click and drag onto that Bridge folder.
| | 06:34 | Now, again, I mentioned this in the last movie,
we want to be careful where we position this.
| | 06:39 | If I position it above or below, it's going to add it to the Favorites.
| | 06:43 | I want to position it so that it's highlighting the
Bridge folder, and that's going to allow me to copy it.
| | 06:50 | Now, you don't see any changes here to the folder that we're in,
the javaco_images folder, but if we click the O2_ Bridge folder,
| | 06:56 | there you can see that chai.psd file. We copied it into there.
| | 07:00 | Let's double-click javaco_images, choose decaf.psd, hold down the
Shift key, and select javaco.psd to multiple-select images in between.
| | 07:10 | We're going to hold down the Alt or Option key, we're going to click
and drag- and this is kind of cool, I love this little preview-
| | 07:16 | it kind of shows you that all of the images are stacked on
top of each other, which is a nice visual cue to show you
| | 07:22 | that you're copying more than one file.
| | 07:24 | Again, we want to make sure that we're not going above or below, that
we're clicking on top of the folder so it's going to go in the folder,
| | 07:30 | and if we release our mouse, we still have the contents in the
javaco_images folder, and if we click O2_ Bridge, there you can see,
| | 07:37 | we've copied all of those images back in.
| | 07:39 | And if we like, we can just continue to click
and drag, and move these around.
| | 07:44 | So that's a little bit about some of the techniques you
can use to organize your images from within Adobe Bridge.
| | 07:52 | One last thing I want to show you before we wrap up,
is that you can also rotate images right in Adobe Bridge.
| | 07:58 | Often, you'll find that when you take pictures with a digital camera, or
if you scan files, you're going to come in with the incorrect rotation.
| | 08:05 | So let's click this leaves.psd file. You can see that we have
these options up at the top, Rotate 90 Degrees Counter-Clockwise,
| | 08:12 | Rotate 90 Degrees Clockwise.
| | 08:14 | I can use that option to rotate
the image until I get the correct orientation.
| | 08:21 | If I go to my Edit menu, you can see that here I also have the 90 Degrees
Clockwise, 90 Degrees Counter-Clockwise, and I also have Rotate 180,
| | 08:29 | which is basically going to flip it upside-down.
| | 08:31 | These options are really helpful because,
especially when you grab images from your digital camera,
| | 08:36 | the last thing you want to do is open all the ones that are rotated
incorrectly in Photoshop, rotate them, save them, come back in,
| | 08:42 | and continue organizing them.
| | 08:44 | Being able to do that right here is a really helpful
addition and a really useful feature in Bridge.
| | 08:50 | And that's a little bit on how to organize your files.
| | 08:53 | In the next movie, we're going to take a look at how you can use
the Rating and Labeling features to sort and organize your images.
| | Collapse this transcript |
| Organizing Assets| 00:01 | >>Another interesting way that you can organize your images in Adobe Bridge
is by using a 5-star Rating system or a Color-Coating Label system.
| | 00:10 | I really like both of these features. I think they both offer some
really unique benefits and we're going to take a look at how to work
| | 00:15 | with them here in this particular movie.
| | 00:18 | So let's start with the Rating system.
| | 00:20 | What I'm going to do is I'm just going to click this javaco.psd file.
| | 00:24 | If you go to the Label menu, and you can see that
the first half is basically for the Rating features,
| | 00:31 | and the second half is for the Label features.
| | 00:33 | So what we want to concern ourselves is
with right now is with the top half.
| | 00:36 | You can see that I can choose a 1-star,
2-star, 3-star, 4-star, or 5-star rating.
| | 00:42 | I'm going to add a 1-star rating to this javaco image, and you can
see that I get this error message that says, "Labels And Ratings are stored
| | 00:48 | in XMP metadata-" metadata referring to the content down here-
| | 00:52 | "If a file does not have a method to store
it, they will be stored in the cache only."
| | 00:55 | OK, that's fine.
| | 00:57 | So let's just turn on Don't show again, so
we don't need to see that on a regular basis.
| | 01:00 | So now you can see that underneath our Javaco Tea thumbnail,
we get this funky little star to say that it's a 1-star image.
| | 01:09 | Now let's go to the top. We're going to click canisters.psd. I'm going
to hold down the Shift key, and choose teapot_bw.psd.
| | 01:16 | I'm going to go to my Label menu, and I'm
going to add a 3-star rating to those.
| | 01:20 | You can see that now they have 3 stars below them.
| | 01:23 | Now I'm just going to grab a handful of other images, I'm going to grab
these 4 photographs, hold down the Shift key to multiple-select them.
| | 01:31 | I'm going to give them a 5-star rating,
and you can see that now they have 5 stars.
| | 01:36 | I'm going to click, hold down my Command or Control
key, and let's just click some of these other ones in here...
| | 01:51 | and I'm going to add a 4-star rating to those.
| | 01:57 | Excellent.
| | 01:58 | For the remaining ones, I'm just going to hold down my Command
key and add 3-stars, or sorry, a 2-star rating to those.
| | 02:06 | There we go, now we have a Star or Rating system on all of our images.
| | 02:11 | And what's nice is I can filter based on this.
| | 02:14 | So what I can do is I can say, Show All 5-Star Images.
| | 02:19 | Great, now I'm only seeing the images with 5 stars.
| | 02:22 | Or, I can choose Show 3-Star
Or More Images, or 2-Star Or More Images.
| | 02:30 | I can also Show All or I could
show only the items that are unrated.
| | 02:37 | Now, all of the items here I happen to have are rated.
| | 02:41 | Actually, I don't! There's two down here,
so let's take a look at how that works.
| | 02:43 | Show Unrated Items Only, so there's our two images.
| | 02:46 | Let's go back and click Show All.
| | 02:49 | So what's nice about this is that it basically allows
you to view the best images, the mediocre images,
| | 02:56 | and the worst images based on their rating system.
| | 02:59 | Now I'm going to click the first image here, hold down my Shift
key, and click the last image to multiple-select them all.
| | 03:05 | I'm going to go to my Label and I'm going to choose Decrease Rating.
| | 03:11 | So what you can see happen is all of the images
now have one less rating than they did before.
| | 03:17 | So if it was a 2, it's now a 1. If it was a 4, now it's a 3.
| | 03:21 | So that's kind of cool. I can also go Label, Increase Rating and
that's going to automatically increase the rating on everything.
| | 03:28 | And I can choose Label, No Rating, that's going to
take the rating completely off all of the images.
| | 03:34 | I'm just going to click to de-select everything.
| | 03:37 | So that's how we can use that 5-star rating.
| | 03:40 | That's kind of a cool way to organize our images.
| | 03:44 | Next, we're going to take a look at how we can color-code our images.
| | 03:48 | We can do that using the labels.
| | 03:51 | Let's just grab the chai image here that, sorry, the
flavors.psd file here, and I'm going to choose Label, Red.
| | 03:59 | You can see that now I have this little pill-shape
underneath the thumbnail that's showing it in red.
| | 04:06 | I'm going to grab the other, the herbal_chai
image, and I'm going to choose Label, Red.
| | 04:11 | Now, they both have a red label.
| | 04:13 | I'm going to hold down the Shift key and multiple-select these
5 images at the top, and I'm going to choose Label, Green.
| | 04:20 | Now, let's grab these 4 images in the middle here... Label, Yellow.
| | 04:26 | You can see I've got them all labeled differently, and this can be
helpful if you have a series of images in a folder and you want
| | 04:34 | to color-code all the teapots in yellow, and all the cups in
blue, or all the leaves in green. You can do that quite easily.
| | 04:42 | I just randomly chose images here to show you basically how it worked, but
the point is is that you can color-code them based on certain criteria,
| | 04:49 | whatever that happens to be.
| | 04:51 | Then what we can do is go to our Filtered menu and
choose Show Red Label Images, Show Green Label Images.
| | 05:00 | Now, you might be wondering, why am I still seeing Red Label images?
| | 05:03 | This, actually, is something that you might find a little bit confusing,
because when we looked at how the Rated items worked, if we chose 5-Stars,
| | 05:12 | all the 5-Stars would show, if we chose 3 Or More
Stars, we knew what exactly what was going to happen.
| | 05:17 | When I first did this and chose Show Red Label and then Show Green Label,
I automatically expected that it wouldn't show the Red ones anymore,
| | 05:25 | it would cancel them out.
| | 05:26 | But what happens is you see these little check marks beside
the entry here in the menu, and until you actually turn it off,
| | 05:35 | by clicking the menu again, it's going to leave them all sorted in there.
| | 05:38 | So, the only way to see just the green ones now is to turn off Show Red.
| | 05:43 | Likewise, if I now choose Show Yellow, I'm going to see both
the Green and the Yellow, and if I want to see just the Yellow,
| | 05:48 | I have to turn off the Green.
| | 05:50 | Maybe that seems obvious, but when I first started
using this, it took me awhile to figure out what was happening.
| | 05:56 | Use the check marks as your visual cue to see which ones are turned on.
| | 06:01 | Now, just like with the unrated items, we can choose to show only
the ones that have labels, and we can choose to show only the ones
| | 06:08 | that don't have labels.
| | 06:10 | Or we can choose to see absolutely everything in the folder.
| | 06:13 | It's a really useful way, as you can see, to color-code your images.
| | 06:17 | What I sometimes do when I'm working is I'll color-code
if I'm working on a couple of projects at the same time.
| | 06:24 | I'll color-code all of the images for one website in green, or all
the images for another website in yellow, and that kind of thing.
| | 06:31 | This has a lot of flexibility to be able to help you keep
your images organized and easily identify what goes with what.
| | 06:37 | Another use would be all the images that go on the Homepage can be
green, all the images that go on the Storage page could be yellow,
| | 06:43 | all the images that go on the Contact Us
page could be red, that kind of thing.
| | 06:47 | There's lots of different ways that you can use
these tools to help you keep your images organized.
| | 06:52 | Now let's just select the entire contents of the folder by clicking the
first image, holding down the Shift key, clicking the last image,
| | 07:00 | and choosing Label, No Label- taking the label off completely.
| | 07:05 | We'll click outside the area to de-select, and there we go.
| | 07:09 | The next movie, we're going to take a look at how to use key
words and how to search on key words to search for images
| | 07:16 | on your computer using Adobe Bridge.
| | Collapse this transcript |
| Rating and Labeling Images| 00:01 | >>Next, we're going to take a look at different ways that we
can search for files and how we can apply keywords to files.
| | 00:07 | First, let's take a look at how the
search functionality works in Adobe Bridge.
| | 00:11 | I'm going to go up to the Edit menu and I'm going to choose Find.
| | 00:14 | We access this Find dialog box that allows me to look
in a folder that I specify, so I'm just going to leave that as 02_ Bridge.
| | 00:22 | I can choose to Include All Subfolders, what that means is
that not only is it going to look in this Bridge folder,
| | 00:27 | it's also going to look in this Formats folder, and in the javaco_images
folder, and any subsequent folders that are inside those folders.
| | 00:35 | So we're going to include all the subfolders, and I can choose my criteria.
| | 00:39 | So, do I want to search by filename, file size, the created or
modified date, the type of document, the label, the rating, etcetera.
| | 00:48 | You can see there's also a keyword entry, we're
going to come back to that a little later on.
| | 00:52 | For now, let's start with Filename, and let's type chai.
| | 00:56 | I'm going to turn off Include All Subfolders, click Find,
you can see there it finds the two files in the Bridge folder
| | 01:06 | that contain the word chai in the title.
| | 01:08 | Here we have chai.psd and we have
the herbal_chai_tiled_background.psd file.
| | 01:13 | Let's go Edit, Find again. This time we're going to turn on Include
All Subfolders, and click Find, leaving the criteria the same.
| | 01:22 | Now, you can see it's finding a bunch of
files with the word chai in the title.
| | 01:25 | We have the chai.ai file, which we remember from earlier in this movie
training, is inside our Adobe Illustrator folder, in the Formats folder.
| | 01:33 | We have the GIF file, which is in the File Formats folder, and we
have our two chai.psd files, one that's in the Bridge folder,
| | 01:39 | one that's in the javaco_images folder, then we have
the herbal_chai image that's in our Bridge folder.
| | 01:44 | Let's go back and click Bridge.
| | 01:47 | We can also search on more than one criteria, so let's choose
Edit Find, and say we want to include all images in the Bridge folder.
| | 01:57 | We'll turn off Include Subfolders, that contain the word chai, and
that contain the word tea, and let's click Find and see what happens.
| | 02:08 | Now you can see that it's brought up every image
that contains the word chai or the word tea.
| | 02:13 | So, there's a number of images that got added here because a number of
these images in that folder used the word tea as part of the titles.
| | 02:21 | Teapot, teacup, teapot, teapot, etc.
| | 02:24 | There's a number of files that use that word.
| | 02:26 | Let's go back to Bridge, to our Bridge folder.
| | 02:30 | So now that we know how to search for images, we're going to
figure out how we can assign keywords to images and use keywords
| | 02:37 | as the criteria to search.
| | 02:38 | If we take a look at the images in the Bridge folder, you can see that
there's sort of some common themes. There's some images of teacups,
| | 02:46 | some with teapots, some that have both teapots and teacups, some
that have the word chai, others that have the Javaco smoke swirl...
| | 02:53 | So there's any number of themes that we can
draw on and use those to create our keywords.
| | 02:58 | Take a look in the Keywords Panel, you can see that Bridge
automatically ships with three keywords sets: Events, People, and Places.
| | 03:06 | Each of those contain a handful of keywords.
| | 03:09 | So, the first thing that we need to do is we need to create a Keyword
Set, which is basically a folder to contain all of our keywords.
| | 03:15 | So I'm going to click the New Keyword Set button, and
I'm going to call it Javaco, and press Return or Enter.
| | 03:24 | Next, I'm going to click the Javaco Keyword Set to select it, and I'm
going to click the New Keyword button, and I'm going to type teapot.
| | 03:33 | I'm going to press Return or Enter.
| | 03:36 | I'm going to select Javaco again, and click
New Keyword, and I'm going to type Teacup.
| | 03:46 | Now, I'm going to click the New Keyword button again, you notice
that that time, I didn't select the Javaco Keyword Set first,
| | 03:54 | you can see what happens is that it automatically
created a new keyword set called Other Keywords.
| | 03:58 | So, I'm going to add a Keyword here, I'm going to call it Chai,
press Return or Enter, and what I can do now is just click
| | 04:05 | and drag it into the Javaco Keyword Set, so when I see that outline
around the perimeter of the Javaco Keyword Set, I can release my mouse
| | 04:14 | and I'll put that Chai Keyword in there.
| | 04:16 | Now, I can click the Other Keywords keyword set,
hit the Trash icon, click OK, and get rid of it.
| | 04:23 | We've got a couple of keywords set up, now we
want to actually apply these to our images.
| | 04:27 | So let's start up here with the Cups dot
PSD file, and I'm going to turn on Teacup.
| | 04:34 | Now, I'm going to select the other images in here that have the word
Teacup, or that have a Teacup, because going through and doing this one
| | 04:41 | at a time is going to take a long time.
| | 04:43 | So, let's hold down the Command or Control key, and we're
just going to select the images that contain a teacup.
| | 04:50 | So, there we go...
| | 04:51 | I'm going to click Teacup, and I get this warning message saying
that I have multiple selected files, and if I apply my Edit,
| | 04:58 | it's going to affect all the files I have
selected, which is exactly what I want.
| | 05:02 | So, I'm going to click Yes.
| | 05:04 | Now, if I go through here, you can see
that all of them have that Teacup keyword.
| | 05:12 | Next, what we're going to do is we're going
to assign Teapot to some of the images.
| | 05:16 | So I'm going to click Teapot Black And White, hold down the
Command key, and just click the other images that have a teapot.
| | 05:24 | I'm going to turn on the Teapot Keyword Set, again I'm getting
that Multiple Files warning message, I'm going to click Yes,
| | 05:33 | and there we have our Teapot Keywords Set.
| | 05:36 | Next, we're going to go through and assign our Chai.
| | 05:38 | So I clicked Off to deselect, and I'm going to Multiple Select
the ones that use the word Chai, which is just these three.
| | 05:46 | So I'm holding down my Shift key, I'm going to turn on the Chai
keyword, click Yes to acknowledge the warning, and click Off.
| | 05:54 | Now, what we're going to do is we're going
to use those keywords to search for images.
| | 05:59 | So let's go up to the Edit menu, and choose Find.
| | 06:04 | And now, instead of using File Name, we're going to use Keyword.
| | 06:09 | I'm just going to get rid of this one for a second by clicking
the minus, let's look for all the ones that contain the word Chai,
| | 06:15 | and I'm going to click Find.
| | 06:17 | I have Include All Subfolders turned off, because we really
just applied them to the images in this Bridge folder,
| | 06:23 | so there's no need to turn Include All Subfolders
off, because it's not going to find any images anyway.
| | 06:27 | So I'm just going to click Find, there you can see, it
found the three files that I assigned to the word Chai.
| | 06:34 | Let's go back to the Bridge folder...
| | 06:36 | And I'm going to choose Edit, Find, now I'm going to click the Add button,
and I'm going to add keywords Contains Teacup, and I'm going to click Find.
| | 06:53 | Now, it's looking for images that have both Teacup and
Chai, so there you can see the results of my search.
| | 07:00 | Let's go back to the Bridge folder.
| | 07:02 | So you can see that you can assign your keywords, and then you
can search on those keywords, either by searching for one keyword,
| | 07:08 | or for multiple keywords.
| | 07:10 | And especially when, as I've said before in this chapter, when you start
to amass large amounts of assets, you need to have some sort of way
| | 07:19 | to keep them organized, whether it be a Rating system,
whether it be a Label system, whether it be a Keyword system.
| | 07:24 | Otherwise, you're going to spend a heck of a lot of time
searching through folders, trying to find where your stuff is.
| | 07:30 | So, Adobe Bridge, as you can see, gives you a number of very
flexible tools to help you keep all of your assets organized.
| | Collapse this transcript |
| Keywording and Searching Images| 00:02 | >>In this movie, we're going to take a look at a really
interesting feature in Adobe Bridge, it's called Adobe Stock Photos.
| | 00:08 | The intention of this feature is to give you an interface right
within Adobe Bridge to be able to search for royalty-free images.
| | 00:17 | When you're designing web graphics, you're often going to
need a photograph on a website to convey a certain message,
| | 00:23 | or to show a certain type of thing, and you may not have the technology
or the equipment to be able to go and do your own photo shoot.
| | 00:31 | So, being able to search for a photograph to show a particular
idea, or feeling, or particular subject, can be really beneficial.
| | 00:39 | Now, the nice thing about Adobe Stock Photos is that you can download
a Comp, basically a low-resolution image that has a watermark on it,
| | 00:48 | for free, and you can use those as placeholder images.
| | 00:51 | That's something else you'll probably find yourself doing a lot when
you're designing websites. You'll know that you want to put a photograph
| | 00:57 | in a certain spot, but maybe you need to get it from a client, or
if you want to work with the client to find a specific file.
| | 01:04 | Well, you can actually download a comp for free, from Adobe
Stock Photos, and we'll take a look at how to do that.
| | 01:09 | You can also buy different versions of the file, different
resolution files, depending on what you plan to use the file for.
| | 01:15 | So, let's just take a look here at this Adobe
Stock Photos, and see what it's all about.
| | 01:21 | You can see right here that I've chosen Adobe Stock Photos in my
Favorites panel, and that opens up this Adobe Stock Photos page.
| | 01:29 | You do need to have an active internet connection
in order to be able to participate in this particular feature
| | 01:37 | of the program. Let's just click the providers here.
| | 01:41 | We can see that there's a number of providers that are giving images
to this particular service, some of the main royalty-free services,
| | 01:49 | such as Photodisk, Comstock, and Imageshop Amana Digital Vision.
| | 01:53 | These are all big companies that are
offering images, so this is actually a pretty good service.
| | 02:00 | Let's take a look at how it all works.
| | 02:02 | First thing we can do is choose to browse.
| | 02:05 | Maybe you're thinking, well, what kind of image do I want?
| | 02:10 | Oh, maybe I want animals, or, oh, architecture could be fun,
let's see, look through the categories and see what we've got.
| | 02:16 | Let's scroll down until we get to Food and Dining here, and we're going
to click on Coffee, and what's happening is it's going to a few seconds.
| | 02:26 | This depends on how fast your internet connection is. It's
going to take longer if you have a slower internet connection.
| | 02:32 | It is searching all of the images in those different
libraries that I just mentioned, Comstock, Photodisk, etc.,
| | 02:40 | and it's going to find images that reflect the idea of coffee.
| | 02:45 | So, I can scroll through here and take
a look and see if anything I see is going to work.
| | 02:51 | Let's just keep going here and see what we can look for.
| | 02:58 | Now, sometimes you'll find that, especially when you browse, you're
going to get a bunch of results that you're maybe
| | 03:04 | or maybe not going to be happy with.
| | 03:05 | I actually like this one right here. I'm going to click
it to select it, and you can see I have a few options.
| | 03:12 | I can get a price and figure out the keywords, I
can download a comp, or I can add it to my cart.
| | 03:19 | Let's start with Get Price And Keywords.
| | 03:22 | What this is going to do is let me see how much the image is going to cost.
| | 03:26 | So first of all, I need to select a country.
| | 03:28 | This is really cool, because it's not just a service that's
available in the United States, it's actually worldwide.
| | 03:32 | So let's choose United States, click Continue, and now you can see
it's giving me a really nice visual of the image, a nice close-up,
| | 03:43 | and you can see that it's giving me the price
list for what this particular image goes for.
| | 03:49 | So you can see I can get a comp image for comping for free, I can get
a 950 by 920 for $149, and then I can get much larger images.
| | 03:59 | Now, if you're doing web work, obviously, you probably want to go with
one of the smaller ones, if you're doing high-resolution print work,
| | 04:04 | you're going to go with some of the larger
ones, which are more expensive.
| | 04:07 | So what we can do is we can just download this image, so I'm going to
click the Download Comp button right here, and it says it's been downloaded
| | 04:14 | to the Folder, and I'm going to click OK.
| | 04:16 | Great. Now, one of the things it does here that I kind of like is
that it pops up all the keywords that are associated with this image.
| | 04:23 | So, when we were looking through and using Coffee as the word we
wanted to browse for, we got a whole lot of different things, right,
| | 04:32 | so they weren't necessarily all things that were appropriate for my search.
| | 04:37 | The nice thing about this is that if I wanted specifically an image of
somebody pouring coffee, what I can do is turn on this Pouring option
| | 04:45 | and choose Search Again.
| | 04:47 | What that's going to do is it's going to do
another search, just for, you know, pouring stuff.
| | 04:52 | In this case, it's not going to be coffee, it's just pouring in general.
| | 04:55 | Now, I have a whole bunch of images of, you know, pouring liquid,
which, you know, may or may not meet what I'm looking for.
| | 05:02 | Now, in addition to browsing, you can also just do a search directly.
| | 05:07 | You can see that there's a Search Field up here.
| | 05:09 | So let's type Tea, and we're going to click
the Binoculars icon, which is the Search icon.
| | 05:13 | Click and see what we come up with for Tea.
| | 05:18 | Again, depending on how fast your internet connection is, it's going to
take a little bit of time for all of these thumbnails to populate in here.
| | 05:24 | And you can see that I can pretty much scroll through
here and see what I can find that matches my criteria.
| | 05:31 | There is, you can see, 50 of 571, and there's a More Results button here.
| | 05:35 | So, it basically displays 50 per page, and if I click
the Next button, it's going to show me more results.
| | 05:43 | So what this has done is basically added more results, so they're
all still in here, it's just adding them to this particular folder.
| | 05:51 | So now, what I can also do in addition to just selecting
one image, is I can actually select multiple images.
| | 05:57 | So let's take a look at how that works.
| | 05:59 | I like this image here, so I'm going to select it, I'm going to hold
down the Command or Control key, I'm going to select this one up here,
| | 06:07 | and let's just scroll through here and
see if there's anything else that I like.
| | 06:11 | This one's a good one...
| | 06:17 | And so is this one.
| | 06:18 | So, we have a handful of images, let's
just grab this one here to the midteam.
| | 06:23 | Now instead of getting Price and Keywords, what I
want to do now is I just want to download Comps,
| | 06:28 | I just want to use these as placeholders in my design.
| | 06:31 | So what I can do is click Download Comp, so instead of, remember,
the last time we downloaded comp we went to Get Price And Keywords,
| | 06:38 | then we downloaded a comp.
| | 06:39 | What I can do is just download a comp
directly right here, so I can click OK.
| | 06:44 | So that's how we can browse and search for images.
| | 06:46 | So what happens now that we've downloaded these comps?
| | 06:49 | Where are they, how can I access them?
| | 06:51 | Well, let's click our Downloaded Comps folder here, which is
underneath Adobe Stock Photos, and you can see that the images
| | 06:59 | that we chose are right here, and as I click them, I can see a preview.
| | 07:04 | Voila. Now these two that are right here are the ones that
ship by default in this folder with Adobe Photoshop CS 2,
| | 07:11 | so those ones will be there automatically for you.
| | 07:14 | The other ones are the ones that we downloaded in this exercise.
| | 07:18 | If you were to purchase images, it
would automatically put them in this folder.
| | 07:22 | Now, we haven't purchased any images, which is why it's empty.
| | 07:25 | We also have this option called Previous Searches. This is kind of
nice because you may search for an image, choose something,
| | 07:33 | go work on something, and then think, oh, I sort of
remember seeing something, or what I was looking for before.
| | 07:39 | What I can do is just double-click, so let's double-click
this Tea folder, and it's automatically going to go back
| | 07:44 | to how it was the last time that I searched.
| | 07:47 | Remember that I hit More Results twice, which was
displaying 150 images, and you can see that they're all right here.
| | 07:56 | This is a really cool feature in Adobe Bridge.
| | 07:59 | I really like it, because if I need something really quick and really
fast, I can just go ahead and grab some photos and use them for a layout.
| | 08:06 | Now again, the Download Comp feature is really there only so that you can
use it for mocking up a composition, it's not there so that you can use it
| | 08:14 | in your finished file.
| | 08:15 | So, keep that in mind- there are some legal restrictions on how the Adobe
Stock Photos work, so I do encourage you to take a look at how that works,
| | 08:23 | but there's really no better visual interface around to be able to
look through multiple stock photo agencies than there is this one.
| | 08:31 | This is a really cool feature in Adobe Bridge.
| | Collapse this transcript |
|
|
3. Working with ColorThe Decline of Web Safe Color| 00:02 | >>When the Web first gained popularity back in the mid-1990s, most
consumer users didn't have computers that were technically as capable
| | 00:09 | as what they are today.
| | 00:11 | Specifically, most people had 8-bit video cards, and the limitation with
8-bit video cards was that they were only able to display 256 colors.
| | 00:20 | Now, computers have come a long way and pretty
much everybody has a computer that displays millions of colors.
| | 00:28 | But back in the nineties, when the Web first gained popularity, most people
had only 8-bit computers and therefore could only display 256 colors.
| | 00:38 | Now, alongside that, most designers at
that time had more expensive video cards.
| | 00:44 | They had 24-bit video cards but what would happen is that they
would design something on their machine that would look great,
| | 00:51 | but when it was viewed on a computer with an
8-bit video card, it wouldn't look so great.
| | 00:55 | Here's an example right here.
| | 00:57 | The two graphics on the left show you what a graphic would
look like if it was viewed on a machine with 24-bit color.
| | 01:03 | The examples on the right show the same image if they're viewed
on a machine with an 8-bit video card with the capability
| | 01:11 | of only displaying 256 colors.
| | 01:14 | You can see the result is not pretty.
| | 01:16 | You have all of these dots that make up the image.
What's happening here is called dithering, and basically,
| | 01:23 | the computer is trying to guess at what colors to put in place,
because it can't simulate the colors of the original image.
| | 01:31 | So as a result, the web-safe color palette was born. The
web-safe color palette is basically a palette of 216 colors
| | 01:38 | that web designers could safely use and know that
regardless of what machine it was viewed on,
| | 01:44 | the 216 colors would always accurately be viewed.
| | 01:49 | But this was not really a great solution. 256 colors
may sound like a lot, but it's really quite limiting because most
| | 01:56 | of the colors were fairly saturated.
| | 01:59 | So the good news is that for the most part, you no longer have
to worry about using a web-safe color palette because
| | 02:06 | computers have come a long way, and really, there's very
few people who have a machine with only an 8-bit video card.
| | 02:13 | But it's still important to understand what will happen if your website
is viewed on a machine with an 8-bit video card because there are some
| | 02:20 | out there. Some people that have older machines; schools,
government agencies, things like that that don't have the high-
| | 02:29 | powered machines that we have today.
| | 02:30 | You may still from time to time run into this problem, and you may
have a client that sometimes forces you to use a web-safe palette.
| | 02:37 | So, two things to take from this movie-
| | 02:40 | number one, what will happen if you don't use the web-safe
palette and your graphics are viewed with an 8-bit video card,
| | 02:47 | is that you'll end up with a result similar to the one on the right.
| | 02:49 | And two, how to design with a web-safe palette.
| | 02:52 | We're going to answer that second part in the upcoming movies
because fortunately, both Photoshop CS 2 and Image Ready CS 2 allow you
| | 02:59 | to use a number of tools that help you
choose web-safe colors when you need them.
| | Collapse this transcript |
| Choosing Color | 00:01 | >>In this movie, we're going to take a look
at how to choose color in Photoshop CS2.
| | 00:05 | There's a few ways that you can choose color. The most important
thing that you'll learn about is the Color Picker dialog box,
| | 00:14 | because you're going to find that cropping up in a
number of locations when you're using Photoshop CS2.
| | 00:19 | To access a Color Picker dialog box, you're going to click the Foreground
Color Swatch, and you can see that it opens up the Color Picker dialog box,
| | 00:29 | and there's a number of elements here.
| | 00:31 | The first is the Value Saturation square, and basically, depending on
where I position my cursor, will give me a different value for each hue,
| | 00:41 | which is selected here in this Hue bar.
| | 00:43 | So, if I position my cursor up here towards the
top right, I'm going to get a very saturated value.
| | 00:48 | If I position my cursor down here towards the bottom,
I'm going to get something that's a really dark shade.
| | 00:54 | If I position my cursor up towards the
top left, I'm going to get a light tint.
| | 00:59 | So, that's how the Value Saturation square works.
| | 01:03 | Now, if I want to choose something other than red, I can use
this Hue bar, and I can just basically drag this little slider,
| | 01:10 | and you can see that the hue automatically changes.
| | 01:15 | Now, how the colors are displayed here in the Value
Saturation square depend on what you have chosen here.
| | 01:22 | Right now, it's being displayed by Hue.
| | 01:24 | I can also view by Saturation.
| | 01:27 | You can see that right now, it's quite low, there's
hardly any saturation, and as I move higher up the slider,
| | 01:34 | I get much more saturated colors.
| | 01:36 | I can also choose by Brightness.
| | 01:39 | Right now, it's set to be quite light. I
can go to sort of a grayish color palette,
| | 01:46 | and then all the way down to something that's very dark and very black.
| | 01:50 | So depending on how you, sort of, visually
associate colors, will depend on how you view them.
| | 01:56 | I personally prefer to use it as Hue, so I can see the Value
Saturation square like this, but you may have a different preference.
| | 02:02 | Now, you can also specify a specific color value, and you'll
find this really beneficial if you're working with a client
| | 02:09 | that gives you a limited color palette.
| | 02:11 | Let's take a look, for example, at this Javaco Tea logo.
| | 02:15 | In a case like this, a client may want you to be limited to these
beiges and dark greens because those are their corporate colors.
| | 02:23 | So, it's important in those cases to know what an RGB value is.
| | 02:27 | They may give you one.
| | 02:28 | So it's important to know how to specify and use a specific RGB value.
| | 02:34 | So, for example, I'm just going to type in something,
205, 110, 175, and you can see I can automatically type that in,
| | 02:45 | and it will take me to that color.
| | 02:48 | That's great. That's how it works for choosing
both RGB values, Lab Colors, or CMYK values.
| | 02:54 | What happens if you're limited to a Web-Safe Color Palette?
| | 02:58 | Well, there's two ways that you can choose color that way.
| | 03:01 | The first and most obvious is by turning on this Only Web Colors checkbox.
| | 03:06 | Well, let's take a look at what happens to the Value Saturation square.
| | 03:09 | What was once a really nice gradation of colors and gave us
infinite choices is now this sort of blocky color palette
| | 03:18 | that gives us very, very few choices.
| | 03:21 | Well, again, as we learned in the last movie, that's because
the Web-Safe Color Palette is restricted to only 216 colors,
| | 03:29 | so as you're positioning your slider here through this Hue
bar, you're really limiting yourself to those 216 colors,
| | 03:36 | which is the reason you see these big blocks of colors,
rather than that really nice gradation of colors we saw.
| | 03:43 | So, using the Only Web Colors will ensure that you're using
a web-safe color, because it only displays 216 colors.
| | 03:51 | If I turn off Only Web Colors, there's another way I can choose a color.
| | 03:55 | You can see right now, I'm on a Web-Safe Color
because there's nothing showing right here.
| | 04:00 | Let's move my cursor a little bit.
| | 04:02 | Now you can see I have this little square.
| | 04:04 | Now if I position my cursor so I can see the Tool Tip, I get this Warning.
| | 04:08 | Warning: Not A Web-Safe Color.
| | 04:10 | OK, so I know that I've chosen a color that's
not web-safe, but I really like this color.
| | 04:15 | What do I do?
| | 04:16 | Well, if I click this little square, you can see it
automatically takes me to the closest web-safe color.
| | 04:22 | Now, sometimes you'll be happy with the results, and sometimes you won't.
| | 04:25 | Sometimes you'll see a really big jump,
and sometimes you'll see a very minor jump.
| | 04:28 | It really depends on how close you are to a web-safe Color.
| | 04:31 | You can see in that, in this case, I went to more of a purple,
rather than a pink, which may or may not be appropriate depending
| | 04:39 | on what I'm designing.
| | 04:41 | But the good thing is that there are a number of ways to choose
web-safe colors, as you saw with the Web Only Colors checkbox,
| | 04:47 | and also with the alert warning.
| | 04:49 | So, I'm going to click OK to choose this color, and you can see
| | 04:54 | that what happens is the foreground color
swatch automatically updates with that color.
| | 04:59 | Well, take a look at the Color Palette.
| | 05:00 | It also updated with that color.
| | 05:02 | And that's because the foreground color swatch is
linked to a number of things inside Photoshop CS2,
| | 05:09 | including the Set Foreground Color on the Color Palette.
| | 05:14 | If I choose the Type tool, it's linked there, and
it's also linked to the Color For The Shape tools.
| | 05:20 | Now, if I click any of these swatches, they're
going to open the Color Picker dialog box.
| | 05:26 | So you can see that really gaining a complete understanding of how
the Color Picker dialog box works is critical to understanding how
| | 05:33 | to choose color in Photoshop CS, because it's
really the cornerstone for how to choose color.
| | 05:39 | Now, the Color Palette, which we'll talk about next, is basically the same
as the Color Picker dialog box, it's just a slightly different interface.
| | 05:47 | You can see that we have the nice gradation
of colors here with the RGB sliders.
| | 05:51 | I could type an RGB value right here if I chose to,
I have my Value Saturation down here in the bottom,
| | 06:00 | that's sort of like a Value Saturation Hue Bar combined into one element,
and you can see that depending on where I position my cursor is depending
| | 06:08 | on whether I'm getting a tint, a saturated color, or a dark shade.
| | 06:13 | Now, this right now is set to RGB Colors.
| | 06:17 | I could also, as you can see if I expand the Color Palette Menu,
choose Grayscale Sliders, HSB, CMYK, Lab Sliders, or Web-Color Sliders.
| | 06:26 | This Web-Color Sliders is probably what you're going to want to use if you
want to choose web-color, choose something from the Web-Safe Color palette.
| | 06:33 | So let's choose that.
| | 06:35 | You can see that we still have RGB Sliders, but the thing is,
we have these little tick-marks, and if I move the slider here,
| | 06:44 | you can see that I can't choose anything in-between.
I have to choose a color at those little tick-marks.
| | 06:49 | And again, that's because Photoshop is
limiting you to the 216 web-safe colors.
| | 06:56 | Even though I'm moving through here, you can see, if
I stop, it's not on a tick-mark, but we have, remember,
| | 07:04 | our friend the Warning Not Web-safe Color message, and we
can see that we've chosen something in between.
| | 07:09 | A, I can visually see because it's not on a
specific tick- mark, and B, I have this cube.
| | 07:15 | So, just like with the Color Picker dialog box, if I click the cube, you
can see it's automatically going to go to the closest Web-Safe Color.
| | 07:23 | So, let's go back to the RGB sliders. You can see that you
get a warning, this is the Out Of Gamut For Printing warning,
| | 07:31 | so this is a printing warning that's not really going
to apply to you if you're using Web-Safe Colors.
| | 07:36 | If you want to choose Web-Safe Colors and get the warning, you have
to go and choose Web Colors Sliders, and choose your color that way,
| | 07:44 | so you'll get this little warning for Web-Safe Colors.
| | 07:48 | So, that's an overview of how to choose color both using
the Color Picker dialog box, and the Color Palette.
| | 07:54 | In the next movie, we're going to take a
look at how to choose color with swatches.
| | Collapse this transcript |
| Using Swatches| 00:01 | >>In the last movie we took a look at how you can choose
color using the Color Picker dialog box and the Color Palette.
| | 00:07 | In this movie we're going to take a look at how
you can choose color using the Swatches Pallette.
| | 00:11 | So the first thing I need to do is actually make my
Swatches Pallette active so I can see the contents.
| | 00:17 | So I can do that by clicking the tab.
| | 00:19 | I'm also going to remove it from this group so I'm going to
click and drag the tab and just ungroup it so it's on its own.
| | 00:26 | These are basically the default color swatches that ship with Photoshop
CS 2 and all I need to do is position my cursor over the color,
| | 00:35 | you can see it switches to the Eyedropper Tool, and I'm
basically updating my colors in the Toolbox as I do that.
| | 00:45 | Now because I happen to have a Shaped Tool selected that has a color
swatch in the Options bar, you can see it's updating there as well.
| | 00:53 | So now what happens if we want to choose web-safe color this way?
| | 00:57 | Well, Photoshop CS2 ships with a number of default swatch sets, and if
I click the Swatches Pallette menu, you can see if I scroll all the way
| | 01:07 | down to the bottom I have Webhues, Websafe Colors, and Web
Spectrum, and those are all based on the 216 websafe colors.
| | 01:15 | So let's start with Websafe Colors.
| | 01:17 | This dialog box is an important thing to understand.
| | 01:21 | It's asking if I want to replace the current color
swatches with the swatches from Websafe Colors.aco.
| | 01:27 | I'm going to click OK.
| | 01:29 | If I click Append it would add the Websafe Colors to the
colors that are already here, which I don't want to do.
| | 01:35 | I want to completely replace them.
| | 01:37 | So I'm going to click OK.
| | 01:38 | Now let's just expand our Swatches Palette here.
| | 01:43 | There we go.
| | 01:44 | So now you can see that I have all of the 216 colors displayed.
| | 01:49 | Now this to me is not an effective visual way to represent these colors.
| | 01:53 | I find it really tedious to try to choose color this way.
| | 01:58 | There's some better organized web palettes, specifically the Web Hues.
| | 02:02 | So let's choose Web Hues, again I'm going to click OK to replace.
| | 02:06 | You can see that that's organized a little bit
better because it's organized better by hue.
| | 02:10 | Let's also choose Web Spectrum.
| | 02:14 | I'm going to click OK to replace it and
let's just Expand this a little bit more.
| | 02:18 | Now what's happening here is that you can see there's more than
216 colors, but it's just duplicating some of the colors. The colors
| | 02:26 | up here are all pretty much exactly the same color, it's
just duplicating it over and over to build this little cube,
| | 02:33 | to make it a little easier for you to choose color.
| | 02:36 | This is a much more visual way for me to choose it because I
can sort of see how the colors blend and how they go together.
| | 02:43 | Now you can also load swatches from other users, so somebody creates a
swatch and they give it to you, you can load it right into Photoshop.
| | 02:50 | So let's take a look at how to do that.
| | 02:51 | Let's go to the Swatches Pallette menu and choose Load Swatches.
| | 02:56 | And I'm going to go into our 03_Color folder, which is in our
Exercise Files folder, and I'm going to choose color.aco.
| | 03:03 | So if you're able to access the Exercise Files,
you'll be able to access this file as well.
| | 03:07 | I'm going to click Load.
| | 03:10 | Let's see what happened here.
| | 03:11 | Here's the color swatch that I just loaded.
| | 03:13 | This is a color palette that was designed by Bruce Haven,
and we'll talk about that a little bit more in detail,
| | 03:19 | but this is also a web-safe color palette
that's organized a little bit differently.
| | 03:24 | What it did was it added it to the color swatches that
were already here which I didn't really want it to do.
| | 03:30 | I wanted to replace it.
| | 03:32 | So let's see how we can fix that.
| | 03:34 | I'm going to choose Reset Swatches and click OK and now let's go
and choose the Replace Swatches item. Not Load Swatches, Replace.
| | 03:45 | OK, now click that same color.aco file and click Load.
| | 03:49 | Now you can see I only have that color swatch.
| | 03:53 | That's something that might trip you up because you have to remember
that Load Swatches will just add to whatever you have there.
| | 03:59 | Replace Swatches will replace it.
| | 04:01 | So don't be confused by the differences between those two options.
| | 04:06 | So getting back to the actual color swatches here that Bruce designed.
| | 04:10 | This is basically the same 216 colors repeated over and over
again throughout the palette, but what's nice about this is
| | 04:17 | that it's all organized nicely by saturation and by hue.
| | 04:21 | So you can see we start with blue and then to green and yellow to
red to pink to blue, and then down towards the bottom we go back
| | 04:28 | into those same sort of colors.
| | 04:29 | Now at the bottom we have the really,
the nice tints, the low saturated colors.
| | 04:34 | I really like this color palette if I have to choose
web-safe color because it's organized in a way that I can
| | 04:40 | see how colors go together and relationships between color.
That's important when you're doing any type of web design.
| | 04:47 | So if you are limited to a web-safe color palette feel free to use this one.
| | 04:51 | It comes with the Exercise Files and you
can go ahead and use it at your leisure.
| | 04:55 | So now you may be wondering, how did Bruce
create this set of color swatches?
| | 04:59 | Well, we're going to look at how to create
custom swatches in the next movie.
| | Collapse this transcript |
| Creating Custom Swatches| 00:01 | >>In the last movie we took a look at how to choose color from the
Swatches palette and how to load swatches into the Swatches palette.
| | 00:08 | In this movie we're going to take those ideas one step further and
we're going to take a look at how to create custom swatch sets.
| | 00:14 | Now often times I'll be given a series of colors that I
have to be limited to by a client and rather than
| | 00:22 | constantly referring to the RGB values and typing them
into either the Color palette or Color Picker dialog box,
| | 00:29 | what I'll do is just create a swatch set of
those colors that I need to restrict myself to.
| | 00:34 | You'll find that really helpful.
| | 00:35 | It will really save you some time.
| | 00:37 | So now let's take a look at how to create a custom swatch.
| | 00:40 | I'm going to go up to the Swatches palette menu and I'm going to choose
Preset Manager and if you don't already have Swatches chosen here
| | 00:47 | in the Type popup menu just go ahead and choose it.
| | 00:50 | Now the easiest and most efficient way to create swatch sets in Photoshop
CS2 is to take an existing swatch set, select all the swatches,
| | 00:59 | delete them and start with an empty fresh set,
and that's exactly what we're going to do here.
| | 01:03 | So I'm going to press (Command + A) or [Control + A] on Windows and you can
see that that automatically selects all the swatches in the swatch set.
| | 01:12 | I'm going to click the Delete button so that I have a fresh,
empty set of swatches and then I'm going to click Done.
| | 01:17 | And you can see my Swatch palette updated automatically.
| | 01:21 | I now have an empty set.
| | 01:23 | So what I'm going to do is just make sure that my eyedropper
tool is selected over here in the Toolbox and I'm just going
| | 01:28 | to click anywhere inside the image to sample color.
| | 01:31 | You can see I started here with the beige from the Javaco tea smoke curl.
| | 01:35 | The next thing I'm going to do is just click the Create New Swatch From
Foreground Color button down here on the bottom of the Swatches palette
| | 01:43 | and you can see it automatically adds it right up there.
| | 01:46 | So what I'm going to do is just continue to go through and sample
color from my image and click the New Swatch button and each time I do
| | 01:55 | that you can see that it's automatically adding
a new color up here into my Swatches palette.
| | 02:06 | [Mouse clicking.]
| | 02:06 | Now another way you can do this is by going up to
the Swatches palette menu and choosing New Swatch.
| | 02:14 | Now you might be thinking, what's this
Color Swatch Name dialog box all about?
| | 02:19 | I've never had this before?
| | 02:20 | But what I can do here is I can actually type a name for my color.
| | 02:24 | I'm going to type "Blue Green" and I'm going to click OK.
| | 02:27 | When I position my cursor over that color, that I just created you
can see that I get a Tool Tip that gives me the name I just gave it.
| | 02:36 | The other colors that we created, let's see what happened with those.
| | 02:40 | Swatch 7, Swatch 6, Swatch 5.
| | 02:44 | They didn't pick out names.
| | 02:46 | This is an important thing to remember.
| | 02:47 | When you create swatches using the Create New Swatch From Foreground
Color, it doesn't automatically give you the option to name your swatch.
| | 02:54 | If you go up to the New Swatch option from the
Swatches palette menu then you'll have that option.
| | 03:00 | Now if you want to name one of the swatches in here or rename one of
the swatches all you have to do is position your cursor over the swatch,
| | 03:07 | double-click, it will open up the Color Swatch Name dialog
box which you just saw, and you can rename the swatch.
| | 03:13 | So I'm going to call this "Dark Blue" and click OK.
| | 03:17 | And now when I position my cursor over
you can see that I see that Dark Blue.
| | 03:21 | Now one little trick that I like to do is sometimes I find that
a client will give me a series of colors that look very similar.
| | 03:27 | You can see here these four colors of blue have kind of a similar color
to them and I want you to remember that any time you click a color
| | 03:35 | on the Swatches palette menu it will automatically update
the Color palette over here with the correct RGB value.
| | 03:41 | Sometimes what I like to do is when I name my swatches I like to
name it with the RGB value so let's take a look at how to do that.
| | 03:48 | I'm going to double click to open up the Color Swatch Name dialog
box and I'm going to type R 51, G 102, B 102 and I'm going to click OK.
| | 04:02 | Now, when I position my cursor over
that, you can see I have that RGB value.
| | 04:06 | I named it based on that.
| | 04:07 | So that's a trick that I like to use if I have to create a special
swatch set and I have a few colors that look similar enough
| | 04:13 | that I just can't remember exactly which one is which.
| | 04:16 | Sometimes you'll find that your colors look really close.
| | 04:18 | So that's a fun little trick to work with when you're naming your swatches.
| | 04:22 | So now that we've actually created our swatch set we
actually have to go through the process of saving it.
| | 04:27 | So what I'm going to do is I'm going to go back to my Swatches palette
menu and I'm going to choose Save Swatches and it's automatically going
| | 04:35 | to take me into my Color Swatches folder which you can see is in
my Presets folder, which is in the Photoshop CS2 Install folder.
| | 04:42 | And just like we've talked about with other concepts in this movie
training, it's important to save it into the appropriate folder,
| | 04:49 | in this case the Color Swatches folder.
| | 04:51 | The reason for that is that if you want it to populate up here
in the Swatches palette menu, it will only look inside this folder
| | 04:58 | to determine how to populate that list.
| | 05:01 | So if you want to populate it inside that
popup menu you need to save it here.
| | 05:06 | Now that said, sometimes I find that if I'm doing a lot of work for
a lot of different clients I don't want all of them populated inside
| | 05:13 | that Swatches palette menu so what I sometimes do is we'll
save them inside the folder where I've saved the image.
| | 05:18 | So I might have, you know, a folder for my client called Javaco and my
files in there and I might just go ahead and save my swatches in there.
| | 05:26 | The only thing to remember is that they
won't be in that Swatches palette menu.
| | 05:29 | I'll have to actually go through and load
them, similar to what we did in the last movie.
| | 05:33 | So let's make sure we have our Color Swatches folder selected
here and I'm going to call this "Javaco tea" and we want to leave
| | 05:43 | that .ACO extension just like I've mentioned before.
| | 05:46 | It's important to leave the extensions that Photoshop gives
it because that will tell Photoshop what kind of file this is
| | 05:53 | and allow you to recognize it.
| | 05:54 | So now I'm going to go up to my Swatches palette menu and you can
see that our Javaco tea swatch set that we just created isn't there.
| | 06:03 | Well, the reason for that is, in order to see the swatches in the
Swatches palette menu, you need to actually restart Photoshop CS2.
| | 06:10 | So let's do that now.
| | 06:12 | I'm going to choose Photoshop, Quit Photoshop, or if you're on Windows you
can choose File, Quit, and let's relaunch Photoshop CS2. I'm going to go
| | 06:22 | up to the Swatches palette menu and now
you can see our Javaco tea swatch set.
| | 06:27 | So let's take a look at how loading it works.
| | 06:30 | Let's just go to Reset Swatches.
| | 06:32 | It's going to ask me if I want to replace.
| | 06:34 | I'm going to say Yes.
| | 06:35 | There's our default.
| | 06:37 | Now let's go up to our Swatches palette menu and choose Javaco tea.
| | 06:40 | Do I want to replace the current swatches?
| | 06:43 | Yes, I do. There's the custom swatch set that we created in this movie.
| | 06:48 | So as you can see there's a lot of benefits to being able to do
that and create your own custom swatch sets in Photoshop CS2.
| | Collapse this transcript |
| Recoloring Images| 00:00 | >>So now that we've spent some time learning how to choose color
in Photoshop CS2, we're going to take a look at some techniques
| | 00:07 | for re-coloring some files.
| | 00:10 | Here we have an example of a file that has been colored different shades
of green, and we want to make this different shade shades of reds,
| | 00:19 | different shades of beige.
| | 00:21 | What we often see students doing is grabbing the magic wand tool, and
trying to choose all of one color, and then filling those selected pixels.
| | 00:30 | Unfortunately that will never yield positive results because you'll never,
ever be able to get every instance of a specific color. For the areas
| | 00:39 | that fade (similar to this smoke curl here), you'll never
get that nice transition if you're using the magic wand tool.
| | 00:48 | So because this file is built with a series of layers
| | 00:51 | (and you're going to learn a lot more about layers later
on in this movie training), we can easily re-color this.
| | 00:57 | Let's start with our background layer.
| | 01:00 | I'm just going to choose a light beige,
and I'm going to refine this a little bit.
| | 01:05 | I want to take some red out of that.
| | 01:06 | So I'm just going to move my little slider
over, to make it a bit of a more true beige.
| | 01:11 | I am going to press (Option + Delete) or [Alt + Backspace] on Windows.
| | 01:17 | You can see it automatically fills the entire layer with color.
| | 01:20 | That's a really good shortcut to learn because it is tedious to
go to the Edit menu and choose Fill or to use the Fill tool.
| | 01:28 | That's a really nice shortcut.
| | 01:30 | Now let's go to our green layer.
| | 01:32 | I'm going to choose a dark red, and now what I'm going to do
is press (Option + Delete) or [Alt + Backspace] on Windows,
| | 01:42 | and this filled the entire layer with color.
| | 01:45 | But we didn't really want it to fill the whole layer with color.
| | 01:47 | We want to keep the areas that were originally transparent.
| | 01:51 | So we need to specify that first.
| | 01:54 | So let's press (Command + Z) or [Control + Z] to undo that.
| | 01:56 | I am going to turn on this Lock Transparent Pixels option.
| | 02:01 | Now let's try the same thing.
| | 02:03 | (Option + Delete) or [Alt + Backspace].
| | 02:05 | Now you can see what it does it that it only
fills the areas where there were colored pixels.
| | 02:10 | The areas that were transparent remain transparent.
| | 02:14 | That's an option that you want to use when you're
re-coloring your files if there are areas of transparency.
| | 02:20 | Let's go to our Javaco layer, and turn
on the Lock Transparent Pixels icon.
| | 02:24 | (Option + Delete) or [Alt + Backspace].
| | 02:28 | Same thing with the T layer.
| | 02:29 | Turn on the Transparent Pixels option.
| | 02:31 | I am going to switch to a slightly lighter color.
| | 02:34 | (Option + Delete) or [Alt + Backspace].
| | 02:37 | There we go.
| | 02:37 | Here we have our smoke curl.
| | 02:39 | This one is a bit tricky because you can see the Opacity is at
49 percent, and it has that really nice feathered edge to it.
| | 02:46 | Let's turn on Lock Transparent Pixels
option and let's choose sort of a darker red.
| | 02:54 | I'm just going to sample a color from in here.
| | 02:56 | From in the image.
| | 02:57 | Sort of a dark, rich red.
| | 03:00 | I am going to press (Option + Delete) or [Alt + Backspace].
| | 03:03 | You can see that it maintained the 49 percent Opacity
setting, and it kept those really nice feathered edges.
| | 03:09 | So regardless of whether pixels are full transparent, fully opaque,
| | 03:14 | or somewhere in between the Locked Transparent
Pixels icon is going to respect that.
| | 03:19 | That's really critical because most of your
edges will have some sort of gradation to them.
| | 03:24 | They will very rarely be a solid color to another solid color.
| | 03:28 | Let's go to the next layer, which is a type layering.
| | 03:31 | We know this is a type layer because it has a 'T' icon.
| | 03:34 | This is a vector-based type layer, and we're going
to learn more about that in the type chapter.
| | 03:40 | Now, you can see here that 'Locked Transparent Pixels' is a grayed out.
| | 03:44 | What are we going to do?
| | 03:45 | We want to re-color the type, but we don't want to fill the whole layer.
| | 03:49 | Well let's see what happens.
| | 03:51 | Let's choose a beige, and again I'm just going to take some
of the red out of this and pull it towards the left here,
| | 03:59 | and I'm going press (Option + Delete) or [Alt + Backspace].
| | 04:03 | And you can see that it only fills the type.
| | 04:07 | That's just because it is a property of type layers
that it will only fill the areas where there is type.
| | 04:14 | That's just a property of those layers. Now I'm going to go to my frame
layer and this time I'm going to choose something pretty different.
| | 04:22 | I'm actually going to choose that same beige, and pull a
little more red out of that, and darken it up a little bit.
| | 04:29 | I'm going to turn on the Lock Transparent Pixels option and
I'm going to press (Option + Delete) or [Alt + Backspace].
| | 04:39 | You can see that it respected those transparent areas.
| | 04:43 | Just like with our smoke curl layer, because some of the
pixels are fully transparent, some of them are fully opaque,
| | 04:49 | and then you have some levels in-between.
| | 04:51 | And you can see it really respected that.
| | 04:54 | I'm going to skip over out teapot photo
and go to our freedom of choice layer.
| | 04:57 | Turn on the 'Lock Transparent Pixels' option.
| | 05:01 | I'm going to choose black, and I am going to
press (Option + Delete) or [Alt + Backspace].
| | 05:09 | Now that wasn't a particularly great color choice for that because,
as you can see, that is a little bit difficult to see here.
| | 05:15 | Let's try something else.
| | 05:16 | Let's try ...
| | 05:17 | go to that beige, (Option + Delete) or [Alt + Backspace].
| | 05:23 | Now again, I probably wouldn't leave it like this.
| | 05:25 | I would probably choose a slightly different color
for either the type or for our teapot photo frame.
| | 05:30 | But that gives you the general idea of how the Locked Transparent
Pixels feature works when you are trying to re-color a layered file,
| | 05:40 | and it's a really useful feature.
| | 05:42 | The keyboard shortcut I showed you - (Option + Delete) or
[Alt + Backspace] on Windows is a really quick way
| | 05:47 | to fill the entire contents of a layer quickly.
| | Collapse this transcript |
| Copying Color as HTML| 00:00 | >>If you're used to programming your own HTML code to create web pages, you
may want to take a color you've used in a web graphic and use that color
| | 00:10 | as a background or a link or a text color for
your web pages when you're using an HTML editor.
| | 00:18 | And if you're used to that workload you know that you have to use
a hexadecimal value in the HTML code in order to specify a color.
| | 00:27 | Fortunately, Photoshop CS2 let's you copy the hexadecimal value to your
clipboard so that you can paste that into HTML code or an HTML editor.
| | 00:39 | And it's really easy to do that.
| | 00:42 | All you have to do is make sure that you
have your Eyedropper Tool selected.
| | 00:46 | You're going to click the color to select it.
| | 00:51 | I'm going to Control and click my mouse on Mac or right
click on Windows and choose Copy Color HTML.
| | 00:56 | Then I'm going to go down to whatever program I want to paste this into.
| | 01:02 | I'm just going to use Text Edit and I'm going to choose Edit, Paste.
| | 01:07 | And you can see that it gives me the hexadecimal value Color equals
number sign 336666, and that is the hexadecimal value for that color.
| | 01:16 | Let's try another one.
| | 01:18 | Let's choose a red.
| | 01:19 | So I'm going to click it to select it.
| | 01:21 | I'm going to Control + click on a Mac or right click, Copy Color as HTML.
Then I'm going to go over to my Text Edit, press Enter a couple
| | 01:29 | of times to get to a new line and choose Edit, Paste.
| | 01:32 | There you go, now I have the other hexadecimal value.
| | 01:36 | So if you're used to that workflow where you need a hexadecimal
value specified in HTML code that's a really helpful feature.
| | 01:43 | If you have no idea what I'm talking about and have
never used HTML code and never plan to, that's fine too.
| | 01:49 | But if you need it, this is how you can find a
hexadecimal value from a color in Photoshop CS2.
| | Collapse this transcript |
|
|
4. Working with LayersUnderstanding the Benefits of Layers| 00:01 | >>In this chapter of movies we're going to talk
about how to work with layers in Photoshop CS2.
| | 00:05 | If you've never worked with layers you may be wondering what the
benefit is of working with them and wondering why you need to go
| | 00:12 | through the complexity of trying to figure them
out when you could just work on a flat image.
| | 00:16 | Well, layers give you a lot of flexibility.
| | 00:19 | Let's think about if you were creating a painting and you create
a beautiful sky and a beautiful ocean and you decide to go ahead
| | 00:26 | and add some trees or some foliage into your
image. Then, for whatever reason, you paint a tree
| | 00:31 | and it's the ugliest thing you've ever seen and you hate it.
| | 00:34 | Well, what are you going to have to do?
| | 00:36 | You're going to ultimately have to scrap a lot of what
you did to that beautiful ocean and that beautiful sky,
| | 00:41 | because unless you can paint over that area where
you painted a tree, it's going to look pretty bad.
| | 00:47 | Let's think of it on the computer with layers.
| | 00:50 | What you can do is create one layer for your sky, one
layer for your ocean, and one layer for your trees.
| | 00:55 | If you don't like it, you can just delete the layer with the trees on it.
| | 00:59 | Let's take a look at that in a more practical example.
| | 01:01 | Here you can see I have an image of a teapot
open up here, and let's suppose we want to paint some stripes on this.
| | 01:09 | So I'm going to grab my Paintbrush tool,
and I'm going to paint some stripes.
| | 01:14 | [Mouse clicking.] What happens if I decide that I don't like it?
| | 01:24 | Well, I could try to erase it by grabbing
the Eraser tool, but let's see what happens.
| | 01:29 | That just erases it to white.
| | 01:31 | It doesn't actually erase what I just created.
| | 01:35 | Now fortunately, because we are on a computer, we have the benefit of Undo.
| | 01:38 | So I can press (Command + Z) or [Control + Z] to undo that, and I can
also go through my History Palette and get rid of those brush strokes.
| | 01:48 | But if I create those brush strokes- let's see that again- if I
create those brush strokes, I'm going to switch back to my Brush Tool,
| | 01:55 | and let's suppose I save my file, close it, and come back
into it, I wouldn't have access to my History Palette.
| | 02:05 | So what am I going to do in that case?
| | 02:08 | Then I'm kind of out of luck.
| | 02:10 | Let's take a look at this example again and what
would happen if we painted our stripes on layers.
| | 02:16 | So I'm just going to go into my History Palette
and click Open so we're back to the original stage.
| | 02:21 | I'm going to go to my Layers Palette
and I'm going to click Create New Layer.
| | 02:25 | And with my Paintbrush Tool still selected, now I'm going
to go ahead and start painting some brushstrokes on here
| | 02:31 | to make it look like there's stripes on my teapot.
| | 02:35 | [Mouse clicking.]
| | 02:37 | So now what happens if I decide I don't like them?
| | 02:41 | Well, I have a couple of options.
| | 02:43 | Number one, I can turn off the visibility.
| | 02:45 | I can still leave them in the actual file, but the visibility is turned off.
| | 02:50 | Or I can turn the visibility back on, and I can
just throw this layer straight into the trash,
| | 02:54 | by clicking and dragging it down onto that Trash icon.
| | 02:57 | So layers really allow you to really experiment,
and as a designer, you'll find that very beneficial.
| | 03:05 | Your often going to go through multiple compositions and multiple
ideas, and being able to turn layers on and off, change visibility,
| | 03:13 | change blending mode and opacity, which we're going to take a look at
later on in this training, you'll really find that you have the freedom
| | 03:19 | and the flexibility to experiment and to
come up with the very best design possible.
| | Collapse this transcript |
| Creating and Renaming Layers| 00:01 | >>In this movie we are going to take a look
at how to create, rename and delete layers.
| | 00:04 | We touched upon this in the last movie
where we created a layer and added some stripes,
| | 00:10 | but let's really take a look at the process of creating layers.
| | 00:13 | There are a couple of ways that I can create layers in the Layers Palette.
| | 00:17 | You can see right here I have layer 6 selected.
| | 00:20 | I am going to click the Create New Layer button down here at the
bottom, and you can see that that creates a new layer called layer 7.
| | 00:27 | Let's take a look at that again, but this time I am going to click my
layer 4, and I am going to click Create New Layer. You can see
| | 00:35 | that that automatically adds a layer above that.
| | 00:38 | Now what happens is it creates them numerically, so you
can see that this is the eighth layer in the layer stack.
| | 00:45 | But because I had layer 4 selected, it created it above that layer.
| | 00:49 | That is important to remember, because you can move them around,
and adjust the stacking order. For example, I can just click
| | 00:56 | and drag this layer 8 right up here to the top, it's sometimes easier if
you know exactly where you want the layer to go, to just click the layer
| | 01:04 | and create the new layer.
| | 01:06 | Now in addition to being able to use the Create New Layer button here
in the Layers Palette,, I can also go up to the Layers Palette menu
| | 01:13 | and choose New Layer.
| | 01:15 | Notice here that there is a keyboard shortcut associated
with that function, so you can use that as well.
| | 01:20 | I can go ahead and click New Layer.
| | 01:23 | Now this time when I create the new layer, you can see that it opens
up the New Layer dialog box and here I have the chance to add a name,
| | 01:31 | and I have a few more complex options.
| | 01:34 | So let's just go ahead and type a name.
| | 01:36 | I am going to call this 'Stripes', and I'm going to click
OK, and let's just choose a color just see what happens here.
| | 01:44 | I am going to choose yellow.
| | 01:45 | Now I am going to go ahead and click OK.
| | 01:48 | Now let's see what the difference is here.
| | 01:50 | We had our layer 6 selected, so it
automatically created that new layer above it.
| | 01:55 | You can see that instead of being named layer 9, which would
have been the next sequential layer, it is name 'Stripes'.
| | 02:02 | That is because I deliberately chose to give it a name.
| | 02:05 | You can also see that it is color coded in
yellow, and that's because, if you remember,
| | 02:10 | when we went up to the New Layer dialog box it asked me to choose a color.
| | 02:13 | You'll find that color-coding your layers can sometimes be a helpful
organization technique if you decide that you want to highlight something
| | 02:21 | that is easy to see, or if you want to associate a few layers
together with a certain color, you can highlight them in yellow.
| | 02:27 | I am going to go ahead and click and drag this up to the
top of my layer stacks, so that its up there at the top.
| | 02:34 | Let's just take a look at how to delete our layers.
| | 02:36 | There are a couple of ways.
| | 02:38 | I can simply click the layer and hit the Trash icon down at the bottom.
| | 02:41 | It's going to ask if I really want to delete it.
| | 02:43 | I am going to click 'Yes'.
| | 02:45 | Or I can go down and click and drag my layer onto the Trash icon.
| | 02:51 | Or, if I like, I can also go to the Layers Palette menu and
you can see that there is an option called Delete Layer.
| | 02:56 | I'm not going to choose that because I don't
have a layer that I want to delete at this point.
| | 03:01 | So let's take a look at how you would add some content to your layers.
| | 03:06 | I click my Stripes layer, I go to my Brush Tool
and I'm just going to go to add some stripes here.
| | 03:12 | This is similar to what we did in the last movie.
| | 03:14 | You can use any color you want.
| | 03:17 | I just happened to have this olive green chosen as my foreground color.
| | 03:22 | As I mentioned before, the real benefit of working with layers is that
I can turn the visibility on and off if I decide that I don't like it.
| | 03:37 | I can also click and drag it down to the Trash, because the benefit
as we know, is that none of the changes affect the layers below.
| | 03:45 | You can see my composition now looks identical to what
it did before I actually started creating those stripes.
| | 03:52 | Now when you are working with layers you're often going to find that it is
quite complicated to work with a number of layers with these layer names,
| | 04:00 | especially if you are adding a number of layers in the process and you
end up, as we saw earlier, having layer 1, layer 8, layer 3, layer 5 ...
| | 04:07 | it gets really confusing.
| | 04:09 | So what I always recommend is that you take some time and name your layers
appropriately so that you know exactly what the contents of your layer are.
| | 04:17 | You can see that we do have these thumbnail icons, and in the case of
the background or the leaves here, you can really see what is on them.
| | 04:26 | But in this layer here - what is that?
| | 04:29 | We don't really know unless we turn on and off the visibility.
| | 04:32 | That can be really frustrating if you are working with a complex file.
| | 04:35 | So you want to make sure you can easily see A) from the
thumbnail, and B) from the layer name, what the contents are.
| | 04:43 | So let's take a look at how we can rename our layers.
| | 04:45 | I am going to double-click the layer 1 name,
and you can see that I now have a bounding box.
| | 04:51 | I am going to type 'Pattern' and hit Return, or Enter
on Windows, and it automatically renamed my layer.
| | 04:57 | I want to point out that it is important that you
double-click the layer name like I have right here.
| | 05:02 | I'm going to type 'Lantern'.
| | 05:03 | Even though this layer isn't visible, I'm going to type 'Lantern'.
| | 05:07 | Let's see what happened had I clicked the thumbnail icon.
| | 05:10 | You can see that that opened the Layer Style dialog box.
| | 05:14 | This is a really interesting feature that we're going to talk about
later on in this training, but unfortunately it doesn't help you at all
| | 05:20 | when you're trying to rename your layers.
| | 05:22 | So it's important that you remember that click on the layer name,
| | 05:24 | not on the thumbnail.
| | 05:26 | So let's just go ahead and rename our layers here by double-clicking
the layer name, typing the name, and pressing Enter or Return.
| | 05:41 | And there we go.
| | 05:43 | So as you can see, renaming your layers now gives you much more
flexibility over being able to see what is in the contents of each layer,
| | 05:52 | and I definitely recommend that you spend some time doing
that when you're working with complex and layered files.
| | 05:58 | So that's how to create, rename and delete layers..
| | 06:01 | In the next few movies we're going to take a look at things like
resizing, blending mode, opacity, and all that other kind of fun stuff.
| | Collapse this transcript |
| Reordering, Flipping, and Moving Layers| 00:01 | >>Now that we've taken a look at how to create, rename and delete layers,
let's take some time and really look at the benefits of working with layers
| | 00:09 | in an actual composition. Let's also take a look at how turning on
and off layer visibility, reordering the layers in the Layers Palette,
| | 00:17 | and flipping and moving layers, can really make
some interesting changes to your compositions.
| | 00:21 | Again, I really want to drive home this point that by
separating the elements of your composition onto individual layers,
| | 00:27 | it gives you maximum freedom to experiment and
come up with a composition that you truly like.
| | 00:34 | So first let's talk a little bit about layer visibility.
| | 00:37 | As you can see here on the Layers Palette
I have a Lantern layer that's turned off.
| | 00:41 | If I click you can see I get the eye
icon that indicates that it's turned on.
| | 00:45 | So you can see that that automatically makes a change to my composition.
| | 00:49 | Let's see what happens if we turn off the visibility of the Leaves layer.
| | 00:52 | That again makes a change to the composition.
| | 00:54 | Let's turn that back on, and we'll turn off the Fan.
| | 00:57 | Again, as I'm turning on and off the visibility,
I'm ultimately changing my composition.
| | 01:01 | Some elements are present and some elements are absent.
| | 01:04 | I'm going to return the fan to being turned on.
| | 01:07 | Now I can also affect the composition by adjusting the stacking order
in the Layers Palette. What I mean by the stacking order is the order
| | 01:15 | that the layers appear.
| | 01:16 | You can see that we have the background, the pattern,
the lantern, the leaves, the fan, the teapot, the teacup.
| | 01:20 | If we adjust the stacking order, it's going to adjust the composition.
| | 01:24 | Let's take a look at how that works.
| | 01:26 | I'm going to click and drag the teapot layer above the teacup.
| | 01:29 | And you can see what happens is that visually
the teapot is now on top of the teacup.
| | 01:34 | I like to think of layers as overhead transparencies.
| | 01:37 | You basically have one overhead transparency that's
clear for each of your layers, and as you flip them,
| | 01:44 | you're able to see through them differently,
and that's exactly what we've done here.
| | 01:48 | Because the teapot is on top, we can't see through to that teacup.
| | 01:52 | If we adjust the stacking order back and drag the teapot down below,
I'm just simply clicking and dragging and repositioning the layer
| | 02:00 | in the layer stack, you can see that now, because the
teacup is on top, it appears in front of that teacup.
| | 02:07 | So the stacking order really affects how our composition looks.
| | 02:10 | So let's take at another look at an example of that.
| | 02:12 | Let's adjust the Lantern layer and put it above the Leaves layer.
| | 02:16 | Again you can see that we can hardly see the
leaves because the lantern is stuck in front of it.
| | 02:20 | If we put it below the leaves layer, as it was earlier,
you can see that we can now see the lantern through that.
| | 02:26 | Another way you can adjust your compositions is
just by simply moving the layers around on screen.
| | 02:32 | And to do that I'm going to go up to my Toolbox and grab the Move Tool.
| | 02:36 | Now this is important.
| | 02:38 | You may automatically just go to the lantern and
try to click and drag and right now it works,
| | 02:43 | and that's because I have the Lantern layer selected in the Toolbox.
| | 02:47 | What I find a lot of beginner users do is that they try to, you know,
click the object that they want to move and they get a little confused
| | 02:54 | because it only grabs the one that's selected in the Layers Palette.
| | 02:58 | There is an option here on the Options bar called Auto Select Layer.
| | 03:02 | What happens with that option is now as I click and drag here, you can
see that it's automatically picking up the layer my cursor is over
| | 03:13 | and allowing me to move those individual layers.
| | 03:16 | I'm just going to go back in my History Palette a few
steps to get back to where my composition was originally.
| | 03:25 | There we go.
| | 03:26 | Now our elements are pretty much back in the way they were except
for our Lantern layer which is the one we're going to focus on here.
| | 03:32 | So with it selected, I'm going to turn off the Auto Select Layer
and I'm just going to continue to click and drag and move it around.
| | 03:39 | Now there's two problems here when I move
my lantern over to the right side.
| | 03:43 | I want to kind of see how it's going to look on that side, because I found
that when it was behind my Leaves layer it just didn't really
| | 03:49 | add a lot to the image.
| | 03:50 | So what happens if I move it over here to the right.
| | 03:52 | Well, I have two problems.
| | 03:53 | Number one, I can't see it because the fan is in the way, and number
two, I have this really ugly area on the top of the corner.
| | 04:01 | So let's address the fan issue first.
| | 04:03 | We know we can fix that by adjusting the stacking order.
| | 04:06 | So we'll drag that up there and now we can see the lantern in front.
| | 04:10 | Now I'm not particularly crazy about that so I'm just going to
turn off the fan because I don't really think it needs to be there.
| | 04:17 | Now the other issue that we need to address
is this really ugly area on the top.
| | 04:21 | Wwhat I can do because this is on a layer, I'm going to leave
Lantern selected, I'm going to go to the Edit menu and I'm going
| | 04:27 | to choose Transform, Flip Horizontal.
| | 04:33 | And you can see what that does is it just automatically
flips it so what was on the right is now on the left,
| | 04:38 | what was on the left is now on the right.
| | 04:39 | So that ugly edge is now up here at the top and
we're not really able to see it too much anymore.
| | 04:45 | With that layer still selected and the Move Tool still selected in
the Toolbox, I can just click and drag and position it wherever I like
| | 04:52 | so I don't see that ugly edge.
| | 04:54 | If we expand our document window here and just
move the layers palette to the right a little bit,
| | 04:59 | you know you can see that what's happening is
basically that the content of the layer is still there,
| | 05:04 | it's just that it's pushing it off the document
window and outside of the viewable area.
| | 05:09 | So both of those features, A) the ability to flip it and B) the ability to
hide some of it outside of the viewable document area are other great ways
| | 05:17 | that you can experiment with your compositions.
| | 05:21 | One more thing I want to point out before we wrap up with this
exercise is, since we've talked about the stacking order and the layers,
| | 05:27 | I just want to show you what happens when I try
to move this background layer. There's a couple
| | 05:31 | of things I want you to notice about it.
| | 05:32 | Number one, the text is in italics and we have this Lock icon.
| | 05:36 | If I click and drag you can see that I get this
circle with a line through it because I can't click and drag it.
| | 05:43 | That's because this is actually a background, not a layer.
| | 05:47 | What we need to do if we want to be able to move a background
layer in the stacking order of the Layers Palette is we need
| | 05:53 | to convert it to a regular layer.
| | 05:56 | And to do that, I'm just going to double click it, it's going to ask
me to give it a layer name and I'm going to type Background,
| | 06:04 | and I'm going to click OK. You can see that we
lose that Lock icon and we also lose the italicized text.
| | 06:11 | What this indicates to me that this is now a regular layer.
| | 06:15 | It's no longer a background layer.
| | 06:17 | Just like with the other layers, I can now reposition
this in the stacking order to change my composition.
| | 06:24 | Just like the other layers, I've now converted this to a
regular layer and I can click and drag to reposition it on screen.
| | 06:31 | So that's a few little techniques you can use to experiment with your
compositions and really play around. I think this is really starting
| | 06:37 | to drive home how beneficial it is to work
with layers and how much freedom it gives you.
| | 06:43 | In the next movie we're going to take this a little bit
further and talk about how we can adjust our blending mode,
| | 06:48 | opacity and fill to make some changes to our composition.
| | Collapse this transcript |
| Adjusting Blending Mode, Fill, and Opacity| 00:01 | >>Next we're going to take a look at how you can adjust your Blending
Mode, Opacity, and Fill to create interesting effects when you work
| | 00:08 | with layers in Photoshop CS2.
| | 00:10 | Here you can see I have two files open.
| | 00:13 | I have this javaco.psd file which has our Javaco Tea logo and I also
have our teapot, teacup composition open that we've been working
| | 00:21 | with in the last exercise.
| | 00:23 | Now what I want to do is I want to take the contents of
this javaco.psd file and I want to put it into my teapot,
| | 00:31 | teacup composition so I can make it look like this logo
is on top of the teacup as if it's been printed on there.
| | 00:37 | The first thing I need to do is I need to get
the logo from this Javaco file into my teapot file.
| | 00:44 | Fortunately Photoshop allows a really easy way for you to do that.
| | 00:47 | Because my javaco.psd file is the active image here,
(you can see that in my Layers Palette I have
| | 00:55 | that particular logo saved as a transparent layer,) what I'm going to
do is I'm going to click and drag that layer onto the teapot, teacup image,
| | 01:07 | just about where I want it, and there we go.
| | 01:12 | Now I can't see it.
| | 01:13 | Let's talk about why.
| | 01:15 | Because the layer I had selected in the teapot, teacup layer happened
to be this pattern layer, it put the new layer that I had just brought
| | 01:23 | in from the other image, on top.
| | 01:25 | What I need to do is I need to adjust
the stacking order so I can see it.
| | 01:29 | So I'm just going to click and drag and move
it to the very top on top of the teacup layer.
| | 01:34 | And there we have it.
| | 01:36 | So I'm going to grab my Move Tool from the Toolbox and with the Javaco
layer selected I'm going to click and drag and reposition this somewhere,
| | 01:43 | just around the middle of this teapot.
| | 01:47 | Now it just kind of looks like I have this
flat image, or this flat logo, stuck on top of this teapot
| | 01:55 | and it doesn't really look like it's been printed on.
| | 01:57 | We really want it to capture the three dimensional nature of the teapot
and the natural highlights and shadings which are brought
| | 02:05 | in based on the different light sources in this image.
| | 02:08 | So what I can do is adjust the Blending Mode.
| | 02:12 | The Blending Mode popup menu up here gives
you a number of ways to adjust the Blending Mode.
| | 02:17 | Let's take a look at some of these.
| | 02:18 | I can adjust the Color Burn, I can set it to Linear Burn, I can lighten
it, which basically takes it to nothing in this particular example.
| | 02:28 | I can do something like a Color Dodge.
| | 02:30 | If you're wondering what the Blending Mode does, it basically
looks at the layer you have selected and it blends it based on the light,
| | 02:40 | the colors, the shadows and the highlights of the layer below it.
| | 02:44 | It' s basically giving information on how to blend two layers together.
| | 02:49 | As you saw when I had it on Normal, it's just putting it on top.
| | 02:52 | You don't see anything from the layer below coming through.
| | 02:56 | In order to make this look like it's been printed on the
teacup I want to change the Blending Mode from Normal-
| | 03:01 | I'm going to choose Color Burn.
| | 03:03 | Although this isn't looking perfect yet, you
can sort of start to see where I'm going with this.
| | 03:08 | You can see that it's naturally starting to pick up
the highlights and the shadows of the teapot below.
| | 03:13 | So if I grab my Move tool and just move this around, you
can see that as I'm moving it, it's changing the layer.
| | 03:21 | As I move over here into more of the shadows you can see that the
logo is darker and as I move over here into the highlights you can see
| | 03:30 | that I can no longer see it because the light source
is shining on it so hard that you can't see it.
| | 03:35 | So it's really simulating what it would be like
if that logo was actually on top of the teapot.
| | 03:40 | So I'm going to position it right over here back in the middle
and I still find that this looks a little bit too harsh.
| | 03:46 | But there's a couple of things that I can do to really make this look a
little bit more natural, and that's by adjusting the Opacity and the Fill.
| | 03:53 | So let's start by adjusting the Opacity.
| | 03:55 | Opacity is basically how opaque or how transparent a layer is.
| | 04:00 | If I take it all the way down here to 16, you can barely
see it at all and that's because you're able to see through it quite a bit
| | 04:07 | in order to see that teapot.
| | 04:09 | If I take it all the way up you can say I have full Opacity. You're
not really able to see through it into the layer below.
| | 04:15 | I'm going to just take this down into maybe about ninety percent.
I just don't want it to appear as harsh as it was appearing previously.
| | 04:22 | I'm going to take the Fill down to about 85 percent. You can
see that what that does is it pulls some of the color out
| | 04:30 | and makes the logo look like it's really starting to fade into that teapot.
| | 04:35 | So you can see what we've done here to our teapot is we've taken
that original, flat, Javaco logo, we've put it on our teapot,
| | 04:42 | we've adjusted our Blending Mode to make it look like it's
actually sitting on top of that teapot as if it's painted on
| | 04:49 | (and to do that we've adjusted our Blending Mode to Color Burn so that it
picks up the natural highlights and shadows of the teapot layer below,)
| | 04:56 | and we've also adjusted our Fill and Opacity
so it doesn't look quite as harsh.
| | 04:59 | It looks a little bit more natural as it sits on top of that teapot.
| | 05:02 | There's a number of different ways that you can
experiment with this and I encourage you to really do that.
| | 05:06 | The only way to really learn about what all the Blending Modes do is to sit
down and play with different layers with different types of Blending Modes.
| | 05:13 | Feel free to experiment with how Blending Modes work
because as you can see with this particular exercise,
| | 05:19 | you can achieve a lot of really interesting results.
| | Collapse this transcript |
| Moving and Aligning Layers| 00:01 | >>Next we're going to talk about ways that
you can align your layers in Photoshop CS2.
| | 00:05 | Especially when you're designing web graphics, where you
want everything to have perfect alignment and perfect spacing,
| | 00:12 | it's really important to understand how to use some of the
tools in Photoshop CS to help you achieve the best alignment.
| | 00:19 | We're going to take a look at some of those here.
| | 00:20 | You can see I have my Move Tool selected in my Toolbox and here
we have a file that's made up of a number of different layers.
| | 00:28 | We're going to start with the top bar layer right here.
| | 00:31 | I'm going to click that to select it.
| | 00:34 | With my Move Tool selected, I'm going to click and drag. What I
want to do is I want to position this so that it's at the top.
| | 00:42 | You can see it's kind of hard for me to know when
it's at the top, when I'm getting a little too high.
| | 00:48 | Now I can expand my document window and that will make it a bit
easier, but I want to show a really useful new feature in Photoshop CS2
| | 00:57 | which is called Smart Guides, and this is really
going to help you with a lot of your alignment tasks.
| | 01:02 | So I'm going to choose View, Show, Smart Guides, and now when I
click and drag, you can see as soon as I have that, aligned on the top
| | 01:12 | and on the sides, I see these pink lines around the outside.
| | 01:16 | Now that may be a little tough for you to see on your screen, but if you're
following along with the Exercise Files you'll see exactly what I mean.
| | 01:22 | Let's take a look at that again.
| | 01:23 | If I click down here, you can see actually the Smart Guide right there.
It's on the left hand side. I've got a line with a green rectangle
| | 01:30 | for the Javaco Tea logo.
| | 01:32 | So I want to have it aligned vertically. You can see the smartguides
on the right and left hand sides and then as I move to the top,
| | 01:39 | as I hit so that I'm aligned right at the top edge,
you can see that I can now see the Smart Guides.
| | 01:44 | Let's try that for the bottom bar.
| | 01:46 | I'm going to click and drag, and now I've got it aligned to
the side, and now I've got it aligned down to the bottom.
| | 01:54 | So that's pretty cool.
| | 01:55 | You can see that the Smart Guides really help you
to make sure that you have that aligned nicely.
| | 02:00 | Also, you can see that I have my Javaco Tea
and the smoke curl and this green rectangle.
| | 02:09 | They're all kind of nicely placed on top of each other.
| | 02:11 | I don't want to have to move them all separately, but what
I can do, and this is another new feature of Photoshop CS2,
| | 02:16 | is I can click the green rectangle layer, hold down my Shift key,
click the Javaco Tea layer, and I can click and drag
| | 02:25 | and move all of them around at the same time.
| | 02:28 | That's quite a nice feature to be able to do that.
| | 02:30 | Let's just go ahead and move this up
here, and we'll just position it right there.
| | 02:37 | You can see, again, the Smart Guide appears right at
the top so I know I'm aligned perfectly up at the top.
| | 02:44 | Now we're going to move on to this button. Wwhat I
want to ultimately do is create four buttons on my webpage
| | 02:50 | and I want to align them underneath my Javaco Tea logo.
| | 02:54 | The first thing I need to do is create three more buttons, and to
do that I'm going to go up to the Layers Palette menu and
| | 03:00 | choose Duplicate Layer. I'm going to call this Button
2, and I'm then just going to do the same thing, Duplicate Layer,
| | 03:10 | and I'm going to call this Button Three.
| | 03:15 | Let's try one more time, Duplicate Layer,
and we'll call this Button Four and click OK.
| | 03:22 | Now you're probably looking at the screen saying, OK,
I know that there's four buttons but I can't see them.
| | 03:29 | That's because when we duplicate our layers it maintains all of the
original properties of the original layer including its position on screen.
| | 03:37 | So I do actually have four buttons, it's just that
they're stacked on top of each other right now.
| | 03:41 | Wwe need to fix that.
| | 03:43 | So what I'm going to do is I'm just going to click and
drag to reposition one of my buttons nice and low down here
| | 03:50 | and again, with my Move Tool selected, I'm going to choose Button Three
and I'm going to click and drag. As I'm moving these around,
| | 03:58 | you can see these Smart Guides and it's giving me lots of different
options on where to align it. And because I have everything separated
| | 04:07 | into layers, it's picking up the edge of
those layers and allowing me to align the button.
| | 04:12 | Ultimately, I want to align the button
so that it's centered and aligned vertically
| | 04:21 | to the Button Four layer... which I've just done.
| | 04:26 | So now let's go down to Button Two and select that.
| | 04:28 | I still have my Move Tool selected.
| | 04:30 | Let's get the alignment correct here, and there you go... You can see the
Smart Guides, it's aligned properly, and we'll start with our Button layer.
| | 04:43 | Click that on the Layers Palette to select it. With our Move Tool
selected we'll just use the Smart Guides to make sure it's properly aligned.
| | 04:52 | Now these are aligned nicely, but they're not distributed very well.
| | 04:56 | And by distributed I mean the spacing
between each of these is inconsistent.
| | 05:01 | Especially when you're designing web graphics, you
want to make sure that everything is nice and pristine.
| | 05:06 | You want it to have really nice visual appeal.
| | 05:08 | Make sure everything is perfectly aligned
and distributed and the spacing is completely accurate
| | 05:13 | and even between objects is really important.
| | 05:17 | So I have my Button layer selected in my Layers Palette.
| | 05:19 | I'm going to hold down the Shift key and I'm going to
choose Button Four so I select all of the layers in between.
| | 05:24 | I'm going to go up here to my Options bar and there's an option
here called Distribute Vertical Centers. I'll click that
| | 05:33 | and you can see- wait, let's undo that by pressing (Command + Z) or [Control
+ Z]. If I click that button, now I want you to really watch the change,
| | 05:40 | you can see that it really spaces them out evenly.
| | 05:44 | What it does is look at where the top edge and
bottom edge are placed and distribute them based on that.
| | 05:51 | Now you can see I have these perfectly aligned and distributed buttons.
| | 05:55 | With my Move Tool selected and the four button layers selected
on the Layers Palette, I can just click and drag and move them
| | 06:02 | and you can see again, I have access to the Smart Guides. I'm going to
position the button layers right here below the JavaCo Tea layer, release my mouse,
| | 06:11 | and now I have my buttons nicely aligned underneath our logo.
| | 06:17 | I also have some text that I want to add to the buttons.
| | 06:19 | You can see that right now that the layers are turned off.
| | 06:21 | I'm going to go ahead and click
to turn on the visibility of each.
| | 06:25 | I'm going to start with the word Products, and with that layer selected
in the Layers Palette and the Move Tool selected in the Toolbox,
| | 06:32 | I'm just going to click and drag. You can see the
Smart Guides, and I basically want to center it.
| | 06:39 | I'm going to center it based on that
Javaco Tea logo in the center of these buttons.
| | 06:44 | You can see that it's all going to be
vertically aligned if I position it right there.
| | 06:49 | So that all looks good.
| | 06:51 | Now what I want to do is grab the About Us layer
from the Layers Palette and do the same thing.
| | 06:56 | Sometimes you'll find it a little tricky to get it to the
exact space, but just be patient and move your mouse slowly
| | 07:05 | and you'll eventually get it.
| | 07:06 | So that looks good.
| | 07:08 | Now we're going to go to the Contact Us layer
| | 07:13 | [Mouse click.]
| | 07:13 | There we go.
| | 07:16 | And last, the Our Stores layer,
| | 07:21 | and, excellent.
| | 07:23 | There we go.
| | 07:24 | So as you can see those Smart Guides really help out in terms of
making sure that everything is properly aligned and distributed.
| | 07:32 | Now this feature was available in the last version of ImageReady which
was ImageReady CS, but this is something that they have incorporated
| | 07:38 | into Photoshop CS2, and I think you can really
see the benefit of using the Smart Guides.
| | 07:43 | Now also keep in mind that there are some alignment
options up here on the Options bar but I personally find
| | 07:49 | that using the Smart Guides is a lot easier
than trying to use those options on the Options bar.
| | Collapse this transcript |
| Linking Layers| 00:01 | >>In the last movie we talked about how
to align our layers by using Smart Guides.
| | 00:07 | After you get your buttons, as in this particular example we did in the
previous movie, was align our buttons, and get them nicely lined up.
| | 00:16 | One way that you can move them as a group, is by holding down the
Shift key, and selecting the whole group, and clicking and dragging,
| | 00:24 | and they'll all move together at the same time.
| | 00:28 | That's fine if you only want to move them once or twice, and it's not
something you are going to be doing often. Lets take a look at this example
| | 00:35 | of the JavaCo Tea logo.
| | 00:37 | You can see that in our Layers Palette
we have three layers that make that up.
| | 00:41 | We have the green rectangle, we have the
smoke curl, and then we have the text.
| | 00:45 | Because we have this nicely positioned, we pretty
much want to keep it together all the time.
| | 00:49 | We don't want to just move the green rectangle,
or the smoke curl or the JavaCo Tea.
| | 00:54 | While each time we move it, we can multiple select
layers by holding down the Shift key and selecting them,
| | 01:01 | a really useful technique is to link the layers.
| | 01:05 | You can see I have all three selected, and I am
going to click this link icon down at the bottom.
| | 01:11 | Now you can see I have this little lock icon, which is the link icon.
| | 01:14 | If I click off and click on any one of these layers,
you can see that they are all linked together.
| | 01:20 | By just clicking one of them, such as the JavaCo Tea layer
with my Move Tool selected, you can see that I can click and drag
| | 01:26 | and because they are linked together, I can move all three layers at
the same time. I find that this is really helpful because it allows me
| | 01:35 | to keep them all on separate layers, but it saves
me from multiple selecting on a regular basis.
| | 01:40 | Now as I was moving that, you might have noticed
that I don't have Smart Guides on the edges.
| | 01:44 | That is because the layer I have selected is JavaCo Tea.
| | 01:47 | You can see that the Smart Guides are coming up beside the word
JavaCo. If I wanted to align this whole thing as one linked layer,
| | 01:56 | it would be better for me to choose the green rectangle
layer, because then the edges of the Smart Guides are going
| | 02:02 | to give me something a little bit more intelligent to work with.
| | 02:04 | So keep that in mind when you are working with linked
layers, that even though they are linked all together,
| | 02:10 | the layer that you have currently have selected is the properties
of the layer it is going to use for something like Smart Guides.
| | Collapse this transcript |
| Using Layer Groups| 00:01 | >>Next we're going to talk about working with layer groups.
| | 00:04 | Layer groups offer a couple of benefits.
| | 00:06 | The first one is that when you look at the contents of our Layers
Palette you can see that we just have a ridiculous number of layers here
| | 00:14 | and to have that many layers all at the same level to
try and have to manage is really quite complicated.
| | 00:19 | Layer groups act sort of like a folder system on your computer that allows
you to put layers inside of groups and organize them a little bit better.
| | 00:27 | So that's one benefit to layer groups.
| | 00:29 | The second benefit is that you can make some
changes to the entire layer group at once.
| | 00:35 | For example, you could move the contents of an entire layer group, you
could change the Blending Mode for the entire contents of the layer group,
| | 00:41 | you could adjust the Opacity, things like that.
| | 00:44 | So there are some benefits to putting your layers in layer groups.
| | 00:46 | So we're going to start with the obvious one which is the
organizational aspect because as you can see this big list
| | 00:52 | of layers is a little bit tedious to work with.
| | 00:55 | So there's a number of ways to create layer
groups so let's take a look at those now.
| | 00:59 | With the white background layer selected here, I'm going to hold
down my Shift key and click the Javaco Tea layer and that's going
| | 01:05 | to select all of those layers.
| | 01:07 | What I'm going to do next is I'm going to click the Create a Layer Group
button down here at the bottom of the layers palette and you can see
| | 01:15 | that that just popped a new layer group above our Javaco Tea layer.
| | 01:19 | What I want to do though is make sure that the layers actually go
inside, so I'm going to multiple select the layers again by clicking,
| | 01:26 | holding down my Shift key, clicking the other layer, the white background
layer, and I'm going to click and drag to put them inside this layer group.
| | 01:34 | Now I'm going to know when I should release my mouse because when I
see this black outline around the perimeter of this one layer group,
| | 01:41 | that's when I know visually that it's the right time to release my mouse.
| | 01:46 | I'm going to do that and now you can see as I expand and
contract the layer group, or open and close the layer group,
| | 01:54 | that there are my layers inside.
| | 01:56 | And just like a layer I can double-click and I can rename this.
| | 02:00 | So I'm going to call this Background Elements, because really what
I have here are the elements that make up the background of my page.
| | 02:07 | I have my Javaco Tea logo, my smoke curl, my rectangle,
the top bar, the bottom bar and the white background.
| | 02:16 | Let's just close that up and take a look
at how else we can create layer groups.
| | 02:22 | Now you can see that next we have all of the layers that make
up the buttons, both the grey rectangle and also the text.
| | 02:29 | So we're going to put those into a layer group.
| | 02:31 | So I'm going to click the Products button to select it.
| | 02:33 | I'm going to hold down the Shift key, and
I'm going to click the Contact Us button.
| | 02:38 | This time inside of clicking the New Layer Group button, I'm going
to click (Command + G) or [Control + G] on Windows and you can see
| | 02:45 | that what happened is I now have a layer group.
| | 02:47 | Where did the layers go?
| | 02:48 | Well look, they're already inside that Group One layer group.
| | 02:52 | And that's because the (Command + G) keyboard shortcut tells
Photoshop CS to put the selected layer groups into a layer group,
| | 03:01 | not just to create the layer group as the command down here does.
| | 03:04 | So let's double-click this and call it Buttons and close it up.
| | 03:11 | So next we have the layers that make up our
banner, so we can put those into a layer group.
| | 03:18 | I'm just going to go ahead and multiple select those by holding
down the Shift key and now I'm going to go to my Layers Palette menu
| | 03:25 | and this time I'm going to choose New Group, and this automatically
opens up the New Group dialog box, and this allows me to add a name,
| | 03:32 | so I'm going to call this Banner, and I'm going
to click OK, and there's my Banner layer group.
| | 03:38 | Now just like the first way that we created a layer group, this
didn't actually incorporate those layers into the layer group.
| | 03:44 | We need to multiple select them again by holding down
the Shift key and clicking and dragging them inside.
| | 03:49 | And remember when you see that blackout line around the perimeter
of the layer group that's when you can release your mouse.
| | 03:55 | So close that up.
| | 03:58 | Now we also have up at the top here the layers
that make up the Essence of Tea tagline.
| | 04:03 | So let's multiple select those by holding down our Shift key and this
time I'm going to choose the option below the one we chose last time
| | 04:11 | which is called New Group From Layers.
| | 04:14 | When I choose that I get this New Group from Layers
dialog box and I'm going to call it Tagline and click OK,
| | 04:21 | and that time you can see that it put the layers inside the layer group.
| | 04:26 | So there's a few different ways to create layer groups, and depending on
whether you want the selected layers to go in the layer group or create one
| | 04:34 | so you can put layers into the layer group is going to dictate which
command or which function you use to actually create the layer group.
| | 04:41 | So let's multiple select the other four layers that we have here.
| | 04:45 | I'm going to press (Command + G) or [Control + G] and group them,
and I'm going to double-click and I'm going to call this Content.
| | 04:55 | So there we go.
| | 04:56 | So you can see right away the obvious
organizational benefit to this.
| | 05:01 | That nightmarish number of layers we had in the Layers Palette
is now neatly contained here, because really I don't need access
| | 05:08 | to every single layer all the time and this just makes
it much cleaner for me to be able to work in this file.
| | 05:14 | So let's look at the second benefit which is the ability to move and
change opacity and blending mode to all of the layers inside a layer group.
| | 05:23 | Let's just open up our Banner layer group and I'm going to leave
the layer group selected, and with my Move Tool selected up here
| | 05:30 | in the Toolbox I'm going to click and drag and you can see that I'm moving
all of the layers that are inside that Banner layer group at the same time.
| | 05:38 | So that's kind of nice because instead of multiple selecting or instead
of linking, having them inside this layer group just makes it really easy
| | 05:45 | to be able to move everything around at once.
| | 05:47 | I can also adjust the Opacity and the Blending
Mode for the contents of the entire layer group.
| | 05:53 | I'm not going to show the Blending Mode because we're on a flat
white background and you're not going to really see an impact.
| | 05:58 | But just remember that that's there and you can adjust the
Blending Mode for all of the layers inside the layer group.
| | 06:03 | We can however adjust the Opacity so let's drop that down to maybe
39 percent and you can see that it all drops all at the same time
| | 06:12 | and that's because we have the layer group targeted.
| | 06:15 | So let's just return that back to 100 percent.
| | 06:18 | Now I want to show one other thing which somewhat has to do
with the organizational benefit of working with layer groups,
| | 06:25 | and that is that you can nest layer groups.
| | 06:28 | So you can have layer groups inside of layer groups.
| | 06:30 | So let's take a look at that.
| | 06:32 | Let's take our Content layer group, and think, you know, we
could probably put the Banner and the Tagline in there as well.
| | 06:38 | So let's just grab the Banner layer and click
and drag that into the Content layer group.
| | 06:43 | Again, when you see that black line around the perimeter of
the Content layer group, you know you can release your mouse.
| | 06:49 | Now if I open the Content layer group you can see I have those
four layers that I had originally, but I also have the Banner layer
| | 06:56 | which contains the layers inside that layer group.
| | 06:58 | I can nest these, having one layer group inside the other
is called nesting, and I can nest up to five levels deep.
| | 07:07 | Now if I have this Content layer group selected and I grab my Move
Tool from the Toolbox, you can see that I can move all of these at once.
| | 07:15 | I can also adjust the Blending Mode, and I can also
adjust the Opacity on all of those all at the same time.
| | 07:24 | So there's a number of benefits to working with layer groups and as
you can see here, being able to nest them is another benefit as well.
| | Collapse this transcript |
| Using Layer Comps| 00:00 | >>Next we are going to talk about how to use layer comps in Photoshop CS2.
| | 00:06 | As we have learned throughout this chapter, the main benefit of
working with layers is that it gives you flexibility to expand it.
| | 00:15 | Layer comps takes that one step further.
| | 00:17 | Often when you are experimenting you know you get one
configuration of layers you like but you want to keep experimenting.
| | 00:22 | Layer comps let you save the visibility position and layer
styles that are attached to individual layers into a layer comp
| | 00:30 | so that you can then feel free to continue to experiment but still
get back to the way that your file is set up when you liked it.
| | 00:37 | So, it sounds a little bit convoluted but it is actually quite simple and
we are going to take a look at how it works here in this particular file.
| | 00:44 | The first thing that I am going to do is - you can see that our Layer
Comp tab is up here in our Palette Well and I am just going to click
| | 00:50 | and drag it out beside our document window and I am also going to grab
our Layers palette and do the same so that I can see them pretty easily.
| | 00:59 | I want to create a layer comp from this.
| | 01:02 | I am going to click the New Layer Comp button here - and it asks me to
type in a name - I am going to call this leaves, teapot, teacup, fan.
| | 01:13 | And I am going to turn on all three options. I always leave these on no
matter what because that allows me to experiment with visibility position
| | 01:22 | and appearance. I know that it will remember the original
visibility position and appearance of when I created the layer comp.
| | 01:29 | Uf I update the visibility position or appearance it will not affect
this layer comp, it will only affect any new ones that I create.
| | 01:35 | So I am going to click OK and there we have our comp.
| | 01:39 | So let us experiment with this - let us turn on our Lantern layer and
let us click the New Layer Comp button, and I am going to call this one -
| | 01:48 | leaves, lantern, teapot, teacup, fan, and I am going to click
OK and. Let's just experiment with this just a little bit
| | 01:59 | and let's move the lantern over to the right.
| | 02:02 | With the New tool selected and the lantern layer targeted, let us move
that over - and I am also going to turn off the visibility of our fan layer
| | 02:12 | so you can actually see that lantern. Let's
create a new layer comp based on that.
| | 02:16 | We are going to call that leaves, lantern, teapot, teacup.
| | 02:23 | I am going to click OK.
| | 02:25 | So now I have three layer comps. Let's
see what happens if I click on each of them.
| | 02:29 | Here is our leaves, lantern, teacup.
| | 02:31 | Here is our leaves, lantern, teapot, teacup, fan, where, if you remember,
the lantern was on the left and the other one was on the right.
| | 02:41 | You can see it has recognized the position
of those layers and there we have our original.
| | 02:47 | Let us take a look at some more examples.
| | 02:50 | Let us turn off the visibility of our Pattern layer and create
a new layer comp and I am going to call that leaves, lantern,
| | 03:00 | teapot, teacup - no pattern.
| | 03:09 | Click OK. So we know that we have no pattern in that
particular comp but let us check out the other ones.
| | 03:15 | You can see that it did not affect the other ones,
it only affected the one where I turned it off.
| | 03:21 | So let us go ahead and leave that turned off and go to our
fan layer now. This time I want to add a layer style to it.
| | 03:29 | Now we have not talked about layer styles in this movie
training, we are going to go into that more in depth later on
| | 03:33 | but for right now just follow along.
| | 03:35 | I am going to choose Color Overlay from the popup menu, I am going
to click the Color Swatch menu, I am just going to position my cursor
| | 03:43 | over the green leaf to choose a green color - click OK
and I am going to drop the opacity down to about - oh,
| | 03:49 | let us say 35 to 34 percent, there we go.
| | 03:55 | So now our Fan layer has an overlay, so let's
turn on the visibility and see what it looks like.
| | 04:01 | Turn off the visibility of our Lantern layer
and I am going to create a new layer comp.
| | 04:06 | We are going to call this leaves, teapot, teacup, fan - no pattern.
| | 04:16 | And click OK.
| | 04:17 | So we have our layer style attached to this one with the fan.
| | 04:21 | What happens if we look at one of the other ones with the fan?
| | 04:23 | Well, the layer style is not attached to that. It's because
when we created it that layer style was not turned on.
| | 04:30 | So you can see that by clicking through here. I can take a look at all
the different configurations that I have created for this teapot comp.
| | 04:38 | What I like about layer comps is that it allows me to experiment
and if I get something that I really like I can save it up here
| | 04:46 | in my Layers Comps palette and I can take a look and see - you know -
get back to it and remember exactly what that composition looks like.
| | 04:55 | In the next movie we are going to take this idea a
step further and look at how we can apply these ideas
| | 04:59 | to having an entire web site contained in a single file.
| | Collapse this transcript |
| Using Layer Comps for Web Pages| 00:01 | >>In the last movie we took a look at the benefits of the using
layer comps to mock up different configurations of layer visibility,
| | 00:08 | layer position and layer styles, so that we could take a look
at and experiment with different configurations of our layers
| | 00:15 | and be able to go back and forth and compare different compositions.
| | 00:19 | I find that technique particularly helpful and I find layer comps
particularly helpful when I am designing entire interfaces in Photoshop CS2
| | 00:26 | and Image CS2 for web pages. What I often do is create a layer comp
for each page that goes into my website because typically I set it up so
| | 00:36 | that I am just turning on and off the visibility
of different layers to get to each page.
| | 00:40 | So by creating a layer comp for each page I can just
basically click back and forth and find each one.
| | 00:45 | So let us take a look at how I would do that.
| | 00:48 | You can see that I have just basically the background elements that make
up my Javaco website, so I am first going to save a comp just for that
| | 00:56 | so that I can always remember sort of what my basic shell looks like.
| | 01:00 | I am going to click the New Layer Comp button and I am
going to put Elements and press OK (or click Enter or Return).
| | 01:10 | So there we go, we have our Elements layer. Now let us start
with the individual pages. I am going to turn on the visibility
| | 01:15 | of the Home layer group and I have this all organized based on
page and certainly you can have this set out however you like.
| | 01:22 | I am going to turn on the visibility of the home page and
that is basically what my home page is going to look like,
| | 01:26 | so I am going to click the New Layer Comp
button and I am going to type Home and click OK.
| | 01:32 | I am going turn off the visibility of the Home layer group, turn on the
visibility of the Products layer group and click the Layer Comps button.
| | 01:38 | I am going to call this Products and then click OK.
| | 01:41 | I am going to repeat the same process for the About Us layer,
| | 01:51 | [Typing.]
| | 01:51 | the Our Stores layer,
| | 01:56 | [Typing.]
| | 01:56 | and the Contact Us layer.
| | 02:00 | Now, I am deliberately keeping these as single word entries and
you are going to understand why I do that a little bit later one.
| | 02:08 | Now, I like to keep these all in layer comps so that I
can basically go back and look at what my pages look like.
| | 02:15 | Now you might be thinking all right - that is great but what if I make a
change - how do I look at all the changes to my site?
| | 02:22 | Well, the nice thing is is that I can create a couple of versions.
| | 02:25 | I can create a couple of versions of my layer
comps and then delete the ones that I do not like.
| | 02:29 | So let us take a look at that.
| | 02:30 | I am going to open up my ContactUs layer group and go to this
picture. I am just going to add an overlay to it because I find
| | 02:37 | that it looks a little bit harsh the way it is.
| | 02:39 | So I am going to choose Color Overlay from the popup menu here,
obviously we do not want red, so I am going to click the color swatch
| | 02:46 | which opens the Color Picker dialog box - I am
going to sample the light green from the top bar.
| | 02:50 | I am going to click OK.
| | 02:51 | Now we do not want to have the full capacity so
lets take that down to 18 percent and click OK.
| | 02:58 | Now I am going to click the Create New Layer Comp
button and I am going to call this - ContactOverlay.
| | 03:07 | And there we go.
| | 03:10 | And now you can see that I can experiment
and look at the two different ones.
| | 03:14 | I am just going to delete that overlay one.
| | 03:17 | Something else I can do is actually update my layer comps.
| | 03:21 | So lets say I am going to add that layer style and I do decide that I
really like it. Instead of creating a separate layer comp for it,
| | 03:27 | what I can do is just recreate our color overlay here - we are
going to use this light green, drop down our Opacity and click OK.
| | 03:37 | I want to keep it and I want it be part of this. Well, I do not have
to create a new layer comp, all I have to do is click the Update button
| | 03:45 | and now when I switch between, you can see
that it has now got that change that I made.
| | 03:50 | I find that this is really useful when I am designing entire websites.
| | 03:54 | If I have to show this to a client really all I have to do -
you know - is go through here and show them each of the pages
| | 04:03 | and I find that that is actually quite helpful to do that.
| | 04:07 | Another thing that I find helpful about this is that I can actually
export the contents of my layer comps into individual files.
| | 04:14 | So let us take a look at how that works.
| | 04:15 | I am going to choose File, Scripts, Layer Comps to Files, and this opens
up my Layer Comps to File dialog box. I am going to click Browse
| | 04:26 | and make sure that this gets saved onto my Desktop
and then I am going to click Choose.
| | 04:31 | Now it asked me if I want a prefix which would
basically be what I want each file to start with.
| | 04:37 | So instead of calling it javaco_site - it is picking that up from the file
name - I am just going to put javaco_ and then it is going to add
| | 04:45 | that to each of these layer comps.
| | 04:47 | Now if I wanted to only export specific layer comps I could select
just the ones that I wanted to export in the Layer Comps palette
| | 04:54 | but because I did not do that it is just export all of them.
| | 04:57 | I have some choices about the file format
I used to export these layers comps.
| | 05:01 | If I am circulating these to a client I typically save
them as a JPEG because it is easy for them to view.
| | 05:07 | And then I just click Run and you can see Photoshop
is working away here and creating those files.
| | 05:14 | So Layer Comps to Files is successful - excellent - I am going to click OK.
| | 05:19 | Now if we go to our desktop, you can see I have all of these images,
and it has basically added the prefix as well as these numbers
| | 05:28 | to tell me the order, so here we have our Elements, here
we have our Home page, here we have our Products page.
| | 05:39 | So now all of them are in individual files and these are really
easy for me to attach to an email and send off to a client.
| | 05:46 | So you can see that this technique of using layer comps and
exporting those layer comps to individual files can be really useful
| | 05:53 | when your designing entire web interfaces in Photoshop CS2.
| | Collapse this transcript |
| Using Adjustment Layers| 00:00 | >>As we have learned in this chapter one of the benefits of
learning with layers is that by adding elements on layers above
| | 00:07 | or below the existing layers, you do not actually affect the
pixels of any of the current layers that you are working with.
| | 00:14 | That leads into this idea of non-destructive editing, and when you are
working it is always important to separate everything you are doing
| | 00:21 | onto individual layers. That comes down to how you
build your compositions, how you build your websites,
| | 00:27 | right down to doing things like color correction.
| | 00:30 | Photoshop CS2 has a feature called Adjustment Layers and this has been
around for a few versions but I want to point out here the benefit
| | 00:38 | of using it to make adjustments to your files that are non-destructive.
| | 00:43 | So what do I mean by non-destructive?
| | 00:45 | I mean not affecting any existing pixels that are already part of the
image because you never know when you are going to want to come back
| | 00:52 | and actually have access to that original composition.
| | 00:55 | Just let us take a look at what adjustment layers are
all about and what the heck I am talking about here.
| | 00:59 | Let us go to the Adjustment Layer popup
menu and let us start with Hue Saturation.
| | 01:07 | This dialog box, the Hue Saturation dialog box, -if we just click
Cancel- looks identical to going to Image Adjustments, Hue Saturation.
| | 01:17 | You can see the two dialog boxes are exactly the same.
| | 01:20 | So why would I use one versus the other?
| | 01:22 | Well, let us take a look. If I go Image Adjustments Hue
Saturation, pull all the saturation out of the image and click OK,
| | 01:30 | you can see that it has completely altered
the pixels in this particular layer.
| | 01:35 | Let us press (Command + Z) or [Control + Z] to undo that and do the same
thing with the adjustment layer. Let's choose Hue Saturation,
| | 01:43 | and pull all the saturation out of it except for maybe
just a tiny little bit and I am going to click OK.
| | 01:50 | Now you can see what has happened is it has put the hue saturation
correction on a separate layer - this is called an adjustment layer -
| | 01:56 | you can see that we have got two components that make up that adjustment
layer - the Layer Mask thumbnail and the actual Layer thumbnail
| | 02:04 | and there is a link in between.
| | 02:06 | And the nice thing about adjusting the hue saturation
this way is that I can turn off the visibility of that
| | 02:12 | and still get back to my original layer.
| | 02:14 | This is what I mean by non-destructive editing .
| | 02:16 | No pixels have been harmed in this process
because our Candles layer still looks identical.
| | 02:22 | When we did this through the Image menu we actually harmed
pixels and we actually changed them from being colored
| | 02:28 | to basically being completely desaturated
with the hue saturation correction.
| | 02:33 | So I encourage you to do as much of your correction this way so that
you are not actually harming any of your original pixels in your image
| | 02:41 | because you never know when you want to get back and make some changes.
| | 02:45 | Now you can also stack these on top of each
other - these particular adjustment layers.
| | 02:50 | So let us go next and take a look at Brightness / Contrast
because you can see that this is a little bit washed out.
| | 02:56 | So let us just increase the contrast a little bit.
| | 02:59 | I want to blacken up my blacks and make my whites a little bit harsher
- let us just brighten it up a tiny bit because it is a bit flat.
| | 03:08 | There we go and I am going to click OK.
| | 03:10 | Now I can see that I have two adjustment layers here and again no
pixels have been harmed, I just basically added an adjustment layer.
| | 03:17 | I can turn off the brightness contrast so that we can
compare what that correction did or I can even experiment
| | 03:23 | and see how that affected the original image without the hue
saturation - or I can turn off both and get back to my original image.
| | 03:31 | Let us take a look at one more - this one is Color Balance.
| | 03:35 | Again this is exactly the same as what you would get as if you
were going to the Image Adjustment Color Balance dialog box.
| | 03:42 | It is the same functionality.
| | 03:44 | Now let us take a look at what we can do here - you can see
that I can adjust and create some really, nice affects here -
| | 03:51 | kind of a nice sepia toned image but I
have not actually affected that original.
| | 03:57 | Again, it is getting back to that idea of non-destructive editing.
| | 03:59 | I am going to click OK.
| | 04:01 | So now we have done some really cool correction on that
file but we have not actually touched the original.
| | 04:06 | It still remains in its layer on it own.
| | 04:08 | We can turn on and off of all these different
layers and compare exactly how it looks without it.
| | 04:15 | So as you can see Adjustment layers really let you make some corrections to
your files without destructing the original image and without harming any
| | 04:23 | of the original pixels.
| | Collapse this transcript |
| Using Fill Layers| 00:01 | >>In the last movie we took at look at how to use adjustment layers
which we decided was a non-destructive way of editing the original image.
| | 00:09 | Another non-destructive technique for editing the
contents of the layer file is to use fill layers.
| | 00:15 | Let us take a look at how those work.
| | 00:17 | I have my Cuff layer selected here in the Layers palette and I am
going to go down to my Fill Layer and Adjustment Layer popup menu
| | 00:24 | and choose Solid Color.
| | 00:25 | I am just going to choose a nice bright green and then click OK.
| | 00:31 | Now, we cannot see our teacup because it is underneath our
fill colors, so let us just click and drag and reposition those.
| | 00:37 | So here you can see we have our solid fill color layer here.
| | 00:41 | So you might be thinking OK well, so what? I could just
create a regular layer and fill it and that would be fine.
| | 00:47 | That is true but this makes it a little bit easier
because you have access to change the color so quickly.
| | 00:53 | All I have to do is double click the thumbnail, choose a slightly
different color and click OK and it automatically updates it.
| | 01:01 | That is basically because you have these
two components that make up a fill layer.
| | 01:05 | The other thing that I can do to the fill
layers is add a gradient to the background.
| | 01:09 | So let's choose Gradient and you can see right now it is
set to a nice yellow green that fades to transparent.
| | 01:17 | The transparent is seeing through to this
green color that we created in the last step.
| | 01:22 | We can change the type of gradient so that it is different shapes.
| | 01:27 | I kind of like this reflective one and I can also change
the color, so let's click this and instead of this going
| | 01:34 | to transparent, let's maybe go to this nice copper color here.
| | 01:38 | I am going to click OK. Then let's adjust the angle - which is kind of nice.
| | 01:52 | And we can also adjust the scale - we can make it a
little bit igger or we could make it a little bit smaller.
| | 01:58 | Right here where it is a bit smaller, now I can go ahead and click OK.
| | 02:03 | And just like with the adjustment layer I can turn
the visibility of these on and off at any time
| | 02:08 | so that I can see exactly what my original image looked like.
| | 02:12 | So this looks a lot easier than trying to select
the contents and then fill what is behind it.
| | 02:17 | If you have a transparent layer and you want to put it onto a colored
background or a patterned background you can just do that really quickly
| | 02:23 | by adding a fill layer.
| | Collapse this transcript |
| Using Layer Styles| 00:01 | >>Next we are going to take a look at how
to create layer styles in Photoshop CS2.
| | 00:06 | Layer styles have a number of different purposes but what I typically
do with layer styles is use them to add drop shadows to objects
| | 00:15 | and layers that I have in my file.
| | 00:17 | Another purpose for them is to create three-dimensional buttons and we
are going to take a look at how to do that in chapter eight when we talk
| | 00:23 | about creating navigation.
| | 00:24 | So let us take at the end result of what we want to create here.
| | 00:28 | I am going to turn on the final layer group, and you can see that
actually what we have behind each of these photograph is this white tile,
| | 00:36 | so it makes it look like the image is on top
of a piece of paper with a white background.
| | 00:43 | What allows us to see that white background
is the drop shadow that is around the edge.
| | 00:48 | Photoshop CS2 gives us a lot really great features in the Layer
Style dialogue box to be able to create these types of drop shadows.
| | 00:55 | Let us take a look at how we would go about creating this.
| | 00:58 | I am going to start with the teapot tile.
| | 01:00 | Although you can not see it right now because it is white on white,
once we add that drop shadow you will be able to see it quite nicely.
| | 01:06 | I am going to go down here to the Layer Effects or Layer
Styles popup menu and I am going to choose Drop Shadow.
| | 01:13 | Already you can start to see that white tile.
| | 01:16 | I am going to go and decrease my Opacity down to about forty percent.
| | 01:21 | The opacity really has to do with how dark and how light the shadow is.
| | 01:26 | If I wanted I could also switch the color of our shadows.
| | 01:29 | Let us take a look at red.
| | 01:31 | You know that looks kind of cool for this particular purpose it does
not look but sometimes you will find that you want to create something
| | 01:36 | that has a slightly colored shadow.
| | 01:38 | For this though, I am going to go over to my orange.
| | 01:43 | I am going to choose a nice dark brown because I find
that I do not like my shadows to be too, too black.
| | 01:48 | I am going to choose a dark brown and then click OK.
| | 01:51 | Now what we are going to do is start to adjust some of these settings.
| | 01:56 | I am going to increase my distance and you can see what that does
is that has to do how far the shadow is from the original object.
| | 02:05 | I actually want it to be quite close.
| | 02:07 | I am going to set my distance to one.
| | 02:10 | What that does it almost gives it an even
border around the perimeter of that tile.
| | 02:15 | Now the spread, you can see slightly increases how far the shadow goes.
| | 02:22 | I am just going to set that down to zero.
| | 02:24 | The size is how big it is - how big the shadow is.
| | 02:27 | I am going to leave that set around ten.
| | 02:30 | Now we also have a number of different contours and you can sort of
experiment with these and see all the different results that you get.
| | 02:37 | Most of the time when I am adding the drop shadow I find that I use one
of the ones that are fairly simple, either this one here which is sort
| | 02:45 | of a flat line, sometimes I use this one that has a nice slight curve
and other times I use the other one that has a slightly different curve.
| | 02:52 | So depending on what look you are going for you can choose a
number of different textures and contours for your shadows.
| | 02:59 | I am just going to return to the Default.
| | 03:03 | I can also add some noise which is going to make it really pixilated.
| | 03:06 | I do not particularly like that effect so
I am going to leave it set down to zero.
| | 03:11 | So there we have our drop shadow.
| | 03:12 | I am just going to actually increase the opacity a tiny bit more, now that
I have played around with it I think I want it to be a slight bit darker
| | 03:18 | so let us increase that up to maybe forty-eight.
| | 03:21 | What I am going to do is click OK, and now if
we look here in our Layers palette you can see
| | 03:27 | that we have this entry called Effects and then Drop Shadow.
| | 03:32 | What I can do it toggle the visibility and you can
see that I am turning on and off the Drop Shadow.
| | 03:37 | If I had more than one layer effect, I could toggle
the effects and turn all of them off at the same time.
| | 03:42 | This is nice because Layer Effects will let you add more than one.
| | 03:47 | Let us take a look at that.
| | 03:48 | I am just going to go ahead and choose Color, Overlay because
this is an easy one to show and instead of having this
| | 03:56 | as red let us choose a dark burgundy color, well
actually, maybe a lighter color so that you can see it.
| | 04:01 | You can see what is happening is it is just
adding a color over top of that white tile layer.
| | 04:07 | It is adding an overlay over top.
| | 04:09 | So if I click OK and click OK again you can see that now I have
two layer effects here and I can turn on and off the visibility
| | 04:19 | of one or all of them.
| | 04:22 | I can also delete this, so let us just delete this color
overlay by clicking and dragging down to the Trash.
| | 04:30 | So now what I want to do is I want to take this Drop Shadow
that I created and I want to apply it to the other two tiles.
| | 04:36 | If I wanted I could go into my Drop Shadow dialog box by
double clicking it and I could try to memorize all of these settings
| | 04:44 | and match it, but there is a much easier way to do
that. There is actually two easy ways to do that.
| | 04:48 | So let us take a look at those.
| | 04:49 | The first one is to just copy and paste the drop shadow
from the teapot tile down to one of the other tiles.
| | 04:57 | Let us start with the cups tile.
| | 04:58 | What I am going to do it I am going to click my drop shadow
and hold down the Alt or Option key and I am going to click
| | 05:04 | and drag onto the cups tile layer and you will know that it is
correct when you can see the blackout line around the perimeter
| | 05:10 | of the cups tile layer.
| | 05:12 | As I release my mouse you can see that it has copied the layer
effect from the teapot tile layer down to the cups tile layer.
| | 05:19 | So that is one way that you can do it.
| | 05:22 | Now what happens if you have another file that has these in it?
| | 05:26 | What you can do is you can actually save a style in the Styles palette.
| | 05:30 | Let us go to our Styles palette here, scroll down to the bottom
and I am going to click my drop shadow and I am just going
| | 05:38 | to click this Create New Style button. It is going to pick up what
is currently applied to this cups tile layer in the way of a style.
| | 05:48 | I am going to call this tile shadow and I am going to click
OK and there you can see it right here in our Styles palette.
| | 05:57 | So now if I go down to our hands tile layer and I click
it you can see that it automatically applies that.
| | 06:05 | So that is a really nice to way to share the settings
that you specified for your effects or your layer styles.
| | 06:11 | Layer effects and layer styles are terms that
are used interchangeably in Photoshop CS2.
| | 06:15 | Now this is a very simple drop shadow that I added but as you can
image it and as you start to build more and more complex shadows
| | 06:22 | and as you use three-dimensional effects that
we are going to show in the navigation chapter.
| | 06:27 | The ability to save all that as a custom style can really save you
time from trying to go back and rematch all your styles later on.
| | 06:35 | As you can see in this example, the layer styles offer a very nice way
to add drop shadows to any image or any buttons for your web graphics.
| | Collapse this transcript |
| Using Clipping Masks| 00:00 | >>Next I am going to show you a simple technique
for working with clipping groups in Photoshop CS2.
| | 00:06 | Here you can see that I have Javaco Tea file open and what I
have basically done if we take a look at the Layers palette,
| | 00:12 | I have taken my vector based text and I
have used the tea leaves layer to fill it.
| | 00:19 | Instead of having a flat colored text I have this textured text
that is made out of this tea leaves photograph and that is done
| | 00:25 | by creating a clipping group in Photoshop CS2.
| | 00:27 | Let us take a look at how that works.
| | 00:29 | I am going to close Javaco Tea file and what I need to do is just reposition
my tea leaves layer above my Javaco Tea layer because I want the tea leaves
| | 00:38 | to appear inside the text.
| | 00:41 | What I am going to do, with that layer selected, is hold down the Alt
key or the Option key and you can see that as I position my cursor
| | 00:47 | over the dividing line it changes to these little circles.
| | 00:50 | With the cursor there, if I click you can see that it basically puts
the contents of the tea leaves layer inside the Vector based type.
| | 00:58 | So that is kind of cool. It is a really interesting technique.
| | 01:01 | Now I do not really like the way that I see these tea leaves because
there is a lot of yellow and it looks a bit weird so what I can do is
| | 01:09 | with that layer selected I can actually click and drag and reposition
the tea leaves inside the text until I get something that I like.
| | 01:18 | So you can see that if I drag down a little bit here I am
starting to see some more of the reds and some of the browns
| | 01:23 | that makes it a little bit more effective.
| | 01:25 | So you can see that this is a really cool effect and you can accomplish a
lot of really interesting things by using clipping groups in Photoshop CS2.
| | Collapse this transcript |
| Merging and Flattening Layers| 00:01 | >>Throughout this chapter we have talked about the benefits of
working with layers and that it gives you a lot of flexibility
| | 00:06 | as you are designing in Photoshop CS2.
| | 00:08 | Now with all that said there will be times when you want to take a file
that has a number of layers in it and either merge some layers together
| | 00:14 | or flatten the layers into a single layer.
| | 00:16 | It is important to understand how to do that.
| | 00:19 | So let us take a look at some techniques here.
| | 00:22 | Here we have a few layers in our file and if I go up to my
Layers palette menu you can see that I have a few options.
| | 00:28 | Merge Down, Merge Visible and Flatten Image.
| | 00:31 | Let us start with Flatten Image.
| | 00:33 | If I choose that - you can see that it is going to give me
this error message which says Discard Hidden Layers. That is
| | 00:39 | because I have a layer here with the visibility turned off.
| | 00:42 | Our Lantern layer does not have its visibility layer turned on.
| | 00:44 | So it is asking "what do I want to do with that layer?"
| | 00:48 | Do I want to get rid of it?
| | 00:50 | And if I do, that is fine and I am going to click OK, so yes, I want
to get rid of that layer and I am going click OK and there we go -
| | 00:56 | everything has been compressed into one single layer and it
automatically goes down to the bottom into my background layer.
| | 01:02 | Let us undo that by pressing (Command + Z) or [Control + Z] on Windows.
| | 01:06 | Take a look at some of the other options.
| | 01:09 | The next option is called Merge Visible,
so let us choose that and see what happens.
| | 01:14 | Now you can see we still have our Lantern layer but it
was kept from being flattened or merged into my background
| | 01:22 | because its visibility was not turned on.
| | 01:25 | So it recognized that it was an invisible layer and kept it as an
individual layer, everything else was merged down into my background layer.
| | 01:33 | Let us press (Command + Z) or [Control + Z] to undo that.
| | 01:38 | The next option is called Merge Down, so we have our pattern layer selected
here in the Layers palette and if I go here to my Layers palette menu
| | 01:47 | and choose Merge Down. You can see what happens is that it merges
that pattern down into the background layer. If I turn on
| | 01:54 | and off the visibility of my background layer you can see that both the
background and the pattern are reflected there in that particular layer.
| | 02:01 | Let us undo that by pressing (Command + Z) or [Control + Z]. Next I am going
do is I am going to select my Teacup layer and hold down the Shift key
| | 02:10 | and click the Teapot layer to select both of them.
| | 02:14 | Now let us go and see what is happening up here.
| | 02:16 | Instead of having a Merge Down option, I now have a Merge Layers option and
that is because Photoshop CS2 automatically recognizes that I have more
| | 02:26 | than one layer selected in the Layers Palette. It is context
sensitive and picks up exactly what you have selected here.
| | 02:33 | Now if I choose Merge Layers you can see that it is merging those two
into a single layer. You can see by the thumbnail that I have the teapot
| | 02:40 | and the teacup, right there, so if I can turn on and off the visibility
you can see that both of those layers have now been merged into one.
| | 02:45 | Let us undo that by pressing (Command + Z) or [Control + Z].
Now I merged two layers that were side by side.
| | 02:52 | I do not have to- I can merge two layers that are not side-by-side.
| | 02:55 | So let us say for example I want to merge my teacup and my leaf.
| | 02:59 | This time I am going to hold down the Command key or the Control key
on Windows, go to the Layers palette menu and choose Merge Layers.
| | 03:06 | Now you can see that I have both of those merged into my Teacup layer.
| | 03:10 | I am going to undo that by pressing (Command + Z) or [Control + Z]. The last
thing I want to show is the ability to merge the contents of a group.
| | 03:18 | So let us take these four layers, I am going start with my Teacup Layer,
hold down the Shift key and click Leaves and (Command + G) or [Control + G]
| | 03:26 | to put those into a group.
| | 03:28 | Now with the group selected you can see if I go up to the Layers
palette menu I have the option Merge Group. That is because it knows
| | 03:35 | that right now I have a group selected in the Layers palette.
| | 03:38 | So if I choose Merge Group, you can see what that does is it
merges all of the contents of that group into a single layer.
| | 03:46 | Let us undo that by pressing (Command + Z) or [Control + Z] and what I am going to
do is click this layer group and click the Trash icon and now it is going
| | 03:56 | to ask if I want to delete the group or the group and the contents.
| | 03:59 | Let us just delete the group and we will keep all those layers.
| | 04:02 | So as you can see there is a number of ways you
can merge and flatten your layers in Photoshop CS2.
| | 04:07 | Now just keep in mind that when you do merge and flatten your layers you
do lose some of the flexibility and chances are at some point you may want
| | 04:16 | to get back to either parts or all of the contents of individual
layers, so keep that as you are merging things together
| | 04:23 | or as you are flattening your images.
| | 04:24 | Specifically when you flatten your files, I always suggest that you save a
layered copy and a flattened copy and that way if you ever need to get back
| | 04:32 | to the layer file you always have it as backup.
| | Collapse this transcript |
|
|
5. Creating TypeUnderstanding Vector-Based Type| 00:01 | >>In the next chapter of movies we are going to
take a look at how type works in Photoshop CS2.
| | 00:05 | In Photoshop CS2 type is vector-based and that is an important
thing to understand because vector-based type is what allows you
| | 00:14 | to have the flexibility to resize it, change the font, rotate
it, put it on a path, do all sorts of funky stuff with it
| | 00:20 | and still maintain its nice, crisp edges.
| | 00:24 | Over here in the Layers palette you can see
that I have two layers that contain text.
| | 00:28 | The first layer or, Flavor of the Month, has this T
icon which indicates that it is vector-based type.
| | 00:33 | The next layer is called Dragonwell and that layer is just
a regular pixel based layer similar to our Banner layer.
| | 00:39 | Basically what Photoshop sees this as is just a series
of dots and it is understanding the color and placement.
| | 00:44 | With Flavor of the Month it is based on mathematical instructions,
so Font equals 18 or Font equals White or Font equals Ariel,
| | 00:52 | that information is all communicated mathematically, and as a
result it can be resized, rescaled and changed, rotated, whatever,
| | 01:00 | without losing the crisp quality.
| | 01:03 | Let us take a look at what I mean by that.
| | 01:05 | I am going to double-click the T icon to highlight the type and you can
see that the Type Tool is automatically selected. I have a number
| | 01:13 | of controls on the Type Options bar.
| | 01:16 | I am going to increase my Font size to thirty six points.
| | 01:19 | I am going to switch to my Move Tool and you can see that by doing that I
have not lost any quality, in fact, I have the exact same nice crisp edges
| | 01:27 | that I had originally.
| | 01:30 | Now let us take look at how I would resize
the type on this Dragonwell layer.
| | 01:34 | Well, first of all, if I double-click it I am not going to
choose the type until I get the Layers Style dialog box.
| | 01:41 | That is because it is a regular pixel based layer.
| | 01:44 | Unfortunately I cannot do what I did with
the last type layer and that is resize it.
| | 01:49 | What I have to do is put it into Free Transform
Mode and let us see what the results of that is.
| | 01:53 | I am going to choose Edit, Free Transform - you
can see that I get this bounding box around it.
| | 01:59 | I am going to hold down the Shift key
and click and drag to resize this type.
| | 02:03 | I am holding down the Shift key so that
I can maintain the original aspect ratio.
| | 02:07 | When I am finished I am going to press Return or Enter and with
the Move Tool selected move this over so you can take a look at
| | 02:14 | and compare these two.
| | 02:16 | So let us see, the vector-based type you can see even though
I have resized it, looks really nice, crisp and smooth
| | 02:22 | and it has not affected the readability at all.
| | 02:24 | You can see with this Dragonwell layer that it is now really fuzzy and
the edges are really ugly and it is just not looking attractive at all.
| | 02:33 | So that is the difference is that what is happening with the Dragonwell
layer is that the computer is trying to figure out what to do
| | 02:40 | with the pixels to make it larger.
| | 02:41 | It is trying to make some guesses about the
current patterns in the pixels to make it larger.
| | 02:46 | With the Flavor of the Month, as I have said before, it is all
based on mathematical instructions, so it just knows, OK, well,
| | 02:53 | I am going to resize it to eighteen points, oh, I am going to resize
it to thirty six points and it maintains those nice, crisp edges.
| | 02:58 | So it is important to understand that is how type works in Photoshop CS2
and also to remember that once you rasterize your type and take it out
| | 03:07 | and change the vector-based qualities you are going to have a really
hard time resizing it as we did here in this Dragonwell layer.
| | 03:13 | So I am just going to choose File, Revert, to revert
back to how this file was originally when I opened it up.
| | 03:20 | Now I want to address another important thing in Photoshop
CS2 and that is the fact that there are two kinds of type.
| | 03:26 | There is character type and paragraph type, and both
have their uses when you are designing with them.
| | 03:32 | Character type is used on this Flavor of the Month layer and basically
it is designed for two or three words, this one has four but,
| | 03:40 | fairly short phrases that exist on a single line.
| | 03:44 | We go over to our Javaco Contact layer here, we have some paragraph type
and that is actually the Javaco Coffee and Tea Corporate Headquarters.
| | 03:52 | If I double-click you can see that I get this bounding box
and the bounding box shows that it contains paragraph type.
| | 03:59 | Paragraph type is ideal for when you are
creating more than one line of type.
| | 04:03 | So that is just a little bit about the two kinds of type.
| | 04:06 | In the next two exercises we are going to learn how both character
type and paragraph type work, but before we get started it is important
| | 04:12 | to understand that a type is vector-based in Photoshop CS2
and that you can use either character or paragraph type,
| | 04:20 | depending on what you are designing.
| | Collapse this transcript |
| Creating Character Type| 00:00 | >>First we are going to take a look at how to create character
type in Photoshop CS2 and as we talked about in the last movie,
| | 00:07 | character type is basically designed for creating one or two words
of type, similar to what you see here with Flavor of the Month.
| | 00:17 | So let us recreate this, I am just going to grab my Type layer
and toss it into the Trash so that we can start from scratch.
| | 00:23 | I am going to make sure that I have my Horizontal Type Tool selected in
the Toolbox and you can see up at the top here I have my Type Options bar,
| | 00:31 | and I also have turned on my Character and Paragraph palette.
| | 00:36 | If I turn that off I can easily turn it on by clicking the
Toggle Character and Paragraph palette button on my Options bar
| | 00:44 | and the Character palette offers some extra
controls that do not exist on the Type Options bar.
| | 00:49 | You can see my cursor has changed. This is basically the "type" cursor.
| | 00:54 | I am basically just going to click and I am going to type "Flavor of
the Month". I am going to highlight the type and you can see
| | 01:08 | that I have a number of fonts that I can choose from.
| | 01:10 | Now if you have used Photoshop in the past, you will notice
that this Font popup menu is a little bit different.
| | 01:16 | The nice thing here in Photoshop CS2 is that you can actually see a sample
of what the font looks like. This feature did not exist in previous versions
| | 01:24 | and this is really a wonderful edition in Photoshop CS2.
| | 01:28 | So you can choose whatever font you like.
| | 01:30 | I am just going to grab Courier because I want to stick to a font that
I know you will have on your computer. So we have "Flavor of the Month".
| | 01:37 | The next thing we have is our Font Style popup menu.
| | 01:39 | You can see that for Courier, we have regular and bold.
| | 01:43 | If I go back up to Arial, for example, you can see that I have
different font styles. I have regular, italic, bold and bold italic.
| | 01:52 | Every font you will notice will have a slightly different
selection of what appears here in the Font Style popup menu.
| | 01:57 | The next thing we have is our size of fonts, typically measured
in point sizes. Here we have it set to eighteen and I am going
| | 02:06 | to increase that to twenty-four.
| | 02:08 | The next thing that we have here is our Anti-aliasing pop-up menu.
| | 02:13 | Right now it is set to Smooth. I want to
really explain what anti-aliasing is all about.
| | 02:18 | I am going to click the Move Tool in the Toolbox. You can see
that unhighlights the text and I am going to move it over here.
| | 02:25 | There we go.
| | 02:25 | So we can really take a look at this.
| | 02:27 | I am going to zoom in, so that we can look at the edges of this type.
| | 02:32 | Grab, spacebar here, so we can take a look.
| | 02:36 | What happens here is that the type has some pixels around the edge of it
and what they do is they blend the white type into the green background,
| | 02:47 | so you can see that there are some pixels around the type that are sort of
a combination, like a lighter green, a combination of the green and white.
| | 02:55 | That allows it to blend in and it is
what gives us these nice, smooth edges.
| | 02:59 | Double-click the Zoom Tool to zoom back out.
| | 03:02 | I am going to double-click the Type layer and instead
of having Smooth chosen, I am going to go to None.
| | 03:09 | I am going to click the Move Tool and now
let us take a look at what we have got here.
| | 03:14 | Now we have this really rough, jagged type.
| | 03:18 | If we take our Zoom Tool again and zoom in really close, grab
the Hand Tool and move this around by pressing the spacebar,
| | 03:27 | now you can see that it is a very harsh distinction between the type,
the white type, and the green background. The anti-aliasing is really
| | 03:36 | that blending effect that blends the harsh white into the green background
and that applies to whatever color you use, either in the foreground
| | 03:44 | or the background, so let us just double-click this and
return our original zoom level of one hundred percent.
| | 03:50 | Double-click the "Flavor of the Month" text and lets return this to Smooth.
| | 03:55 | So you may be looking at this and thinking well, when would I ever
not use Smooth - why would I ever want my edges to look like that?
| | 04:01 | Well, when you are designing small type faces for the Web, you
will find that if you are using something less than fourteen points
| | 04:06 | that you will want to use something that has no anti-aliasing or has
crisp edges. That will become a little more apparent when we take a look
| | 04:14 | at the next exercise where we are working with paragraph type, but
as a general rule if your type is larger than fourteen points,
| | 04:20 | use Smooth and if it is less than fourteen
points, use either no anti-aliasing (None) or Crisp.
| | 04:26 | So here we have our Flavor of the Month again, now I also want
to change our color because maybe I do not want to use white,
| | 04:32 | maybe I would like it to be a slightly darker color. All I need to
do to change the type is that since I already have my type highlighted here,
| | 04:38 | I can click the color swatch and you can see that this opens
up the Color Picker dialog box, which we know quite well.
| | 04:45 | I am just going sample color from the teacup here into sort of a nice
beige, maybe a little bit of a lighter beige - ah maybe not that light -
| | 04:54 | that's good- and I am going to click OK. Now I am going to
just select my Move Tool and reposition the type onscreen.
| | 05:05 | Now there are some other controls over here in the Character
palette, some of them are duplicated from what you have seen before.
| | 05:11 | So let us just double-click our "Flavor of the Month" type layer
and again we are clicking again the T icon to highlight the text.
| | 05:19 | Let's just reduce our font size down to fourteen
points, actually, let us reduce it to eighteen -
| | 05:27 | that was a little bit too small.
| | 05:28 | Now let us talk about some of these other controls.
| | 05:32 | Here we have the "leading". Now leading is something that is not
going to be too, too clear because we only have one line of type.
| | 05:39 | Leading basically has to do with the spacing between the lines of type,
so we are not going to adjust that here, but we are going to take a look
| | 05:48 | at how to adjust the tracking.
| | 05:50 | Tracking - let us go from ten to seventy-five - you can see
basically adjusts the space in between the two letters -
| | 05:57 | I will take that up to one hundred - you can see that it
is increasing the distance between the individual letters.
| | 06:04 | Next we have vertically scale. So here is
where I can make it a little bit higher or lower.
| | 06:09 | Now you will notice that when I position my cursor over the icon, I get
this little cursor with arrows, and what I can do is just click
| | 06:16 | and drag, and it sort of acts like a slider - this is a
really cool shortcut in Photoshop that you may not know about.
| | 06:24 | So that is how you can vertically scale it, and again by
doing all of this, it still remains as vector-based type.
| | 06:32 | I can go back and edit this and do anything I
want to with it and it still remains vector-based.
| | 06:37 | Next we have horizontally scale, so now what I can do is
increase the width, and this is a little bit different than tracking.
| | 06:47 | Down at the bottom here we have a number of options things like,
Faux Italic and All Caps, etc. and what this is really helpful for is that,
| | 06:55 | you remember when we changed to Courier, we did not have any italic fonts.
| | 07:00 | What these options do is allow you to simulate the look of italic or
simulate the look of bold for fonts that do not have those styles,
| | 07:07 | so these can be really quite helpful for you.
| | 07:09 | Basically you are just clicking the button to turn them on or off.
| | 07:13 | This is something that is kind of fun, if you decide that you are going
to create something that is in lower case and you want to change it
| | 07:18 | to upper case and you do not want to have to go through
and re-type it again you can just click All Caps
| | 07:23 | and it will automatically change it to all caps.
| | 07:25 | There is some other options here such as: Small Caps,
Subscript, Superscript Subscript, Underline and Strikethrough.
| | 07:34 | You can play with those and take a look at how they work.
| | 07:36 | Now again we have this Color Swatch here and that lets us
change our color just as it did in our Type Options bar.
| | 07:43 | I can simply click it, it brings up our good friend the
Color Picker dialog box, I can choose white and click OK.
| | 07:51 | So there we go, now we have taken a look at all
the options that are available for character type.
| | 07:56 | Now once you create your type you actually have to commit your changes and
I have done that throughout this movie, probably without your knowledge,
| | 08:03 | by switching tools in the Toolbox.
| | 08:05 | I can also do that by clicking the Commit Any Current Edit
button right here on the Options bar - and there we go.
| | 08:11 | Now I am just going to grab my Move Tool and I am going to click
and drag to reposition it and you can see that I get my Smart Guides.
| | 08:18 | If you followed the exercises in the layers chapter you will remember this
Smart Guides is very helpful for helping us make sure our text is aligned.
| | 08:24 | So that is how you can work with character type in Photoshop CS2.
| | 08:27 | In the next movie we will take a look at how to work with paragraph type.
| | Collapse this transcript |
| Creating Paragraph Type| 00:01 | >>Next we are going to talk about paragraph type in Photoshop CS2.
| | 00:04 | Here I have some paragraph type, Javaco Coffee and Tea Corporate
Headquarters information, and if I double-click the Type layer
| | 00:12 | in the Layers palette to highlight it, you can see that unlike
character type I have this bounding box around my type.
| | 00:17 | The benefit of working with paragraph type is that if you have text
that spans a number of different line and you need to resize it
| | 00:25 | and reposition it, Photoshop CS2 will automatically take care of bumping
the text down onto a different line and that kind of thing,
| | 00:33 | so let us take a look.
| | 00:34 | If I use these resize handles to just click and drag you can see that
automatically, as I make this smaller, it is readjusting the characters
| | 00:42 | so that it fits inside the new bounding box.
| | 00:47 | Now if I make it too small, and you can see that some of the text you
cannot see right now, this little node has a plus sign in it
| | 00:55 | and that indicates to you that there is text that cannot be seen.
So if I click and drag this out so that we see all the text you can see
| | 01:02 | that little plus sign goes away. That is a nice little visual cue to
show you when you have text that is hidden outside of the bounding box.
| | 01:09 | So now I can also rotate this, if I position my cursor outside the
bounding box, I can then click and drag to rotate the type and just like
| | 01:17 | with character type I have to commit my changes and I
can do that by either switching tools in the Toolbox
| | 01:22 | or by clicking the Checkmark box right here.
| | 01:26 | Again this remains as vector-based type, no matter
what I do to it, it remains as vector-based type.
| | 01:32 | So let us just toss this into the trash, our type layer, and
take a look at how to create paragraph type from scratch.
| | 01:38 | So I am going to grab my horizontal type tool in the Toolbox and this time
instead of just plopping my cursor down and typing I am going to click
| | 01:47 | and drag to drag out this little bounding box, can you see
that I have my SmartGuides turned on and that is showing me
| | 01:53 | that the bounding box is vertically aligned with the...
| | 01:55 | stay in touch and horizontally aligned with the inside of the layer.
| | 01:59 | That is kind of a nice feature because it helps you, as you
are creating the bounding box to make sure that it is aligned
| | 02:04 | with other elements on your page.
| | 02:06 | So now we have our bounding box and I can just
position my cursor inside and start typing.
| | 02:18 | [typing] and you can see there that as soon as I got to the end of line
| | 02:21 | or the end of the bounding box it automatically
popped the word Headquarters onto a separate line.
| | 02:25 | I just press Enter or Return to switch to a
different line just as I did there, and again there.
| | 02:33 | [typing] And there we go, now we have our type, and as I mentioned I have
to actually commit my changes, but before I do that let us take a look
| | 03:12 | at how we can format this type.
| | 03:14 | I am going to click and drag to highlight the contents of the paragraph
type and I am going to go up to my Font pop-up menu and you can see
| | 03:23 | that I can choose a font, just like I did with character type.
| | 03:26 | I am going to go all the way down here to the bottom
and I am going to choose Verdonna and there we go.
| | 03:32 | I can still apply different types of styles
such as regular, italic or bold italic.
| | 03:37 | I am actually going to leave this set on regular
for right now and I can also adjust my font size.
| | 03:43 | So let us take that up to eleven points.
| | 03:45 | I can also adjust the aliasing.
| | 03:48 | As we discussed with character type, when you are working with
fonts that are larger than fourteen points you want to choose smooth
| | 03:54 | so that you anti-alias your type.
| | 03:57 | If you are working with fonts that are smaller than fourteen points,
such as we are in this case, we are working with an eleven point font,
| | 04:02 | we want to choose None or Sharp, because
it makes it easier for users to read.
| | 04:07 | Now the next thing we have is we have our Alignment controls - left align,
centre align, right align, I am just going to return that to left align.
| | 04:15 | Now I am going to click the Character tab and you might be
wondering well, why would I use this if I am using Paragraph type?
| | 04:21 | Well there are some of these controls that do apply to Paragraph
type, such as, our font size, I can return that back down to ten.
| | 04:29 | Here we have the Leading, let us take a look
at how that is going to affect paragraph type.
| | 04:33 | You can see that this adjust the spacing in between all the
lines of type - let us increase that a little bit - there we go.
| | 04:41 | I can also adjust the tracking, which we know adjusts the
space between the letters, I can adjust the vertical scale
| | 04:49 | and I can adjust the horizontal scale.
| | 04:52 | Now I typically find that for Paragraph type that
I rarely adjust the horizontal and vertical scale,
| | 05:06 | I just find that it makes it a little bit too hard to read.
| | 05:10 | I can also change the color and I can do that either one
the Options bar or right here in the Character Palette.
| | 05:16 | So if I click to open the Color Picker Dialog box I can change my color.
| | 05:23 | I am just going to choose a medium green.
| | 05:26 | Now I can also choose to bold, italicize, turn my type into all caps,
small caps and that kind of thing using these controls down here.
| | 05:34 | So some of these controls, even thought they are marked
in the Character palette also affect Paragraph type.
| | 05:41 | So let us move over to our Paragraph tab.
| | 05:43 | Again we have the Alignment controls repeated here and we can also
adjust how much things like the left, right and first line are indented,
| | 05:56 | so let us take a look at that.
| | 05:57 | If I increase this you can see that it
is going to indent just ever so slightly.
| | 06:02 | I have to really increase to be able to see it.
| | 06:06 | So you can see that it has just indented the whole things over
by five points and I am just going to return that back to zero
| | 06:14 | so that it is nicely aligned where it was.
| | 06:17 | You can see that we also have controls for space before and space
after the paragraph and I am just going to leave this set to zero.
| | 06:25 | But right now what I can do again, because this is Paragraph
type is that I can expand and contract the size of this window
| | 06:33 | so that we can readjust how the paragraph type is spaced out here.
| | 06:39 | If I want the word Headquarters to appear on the same line
I can just simply increase the size of this bounding box
| | 06:46 | and it will automatically update it.
| | 06:48 | Now I can also choose to set specific setting to just some sections of
the text so for example: I might want to just bold the Javaco Coffee
| | 06:57 | and Tea so I can highlight that and choose Bold
from the Font style pop-up menu to bold just that.
| | 07:04 | You can also go in and maybe change the color on part of the
text, so let us Click the Color Swatch and let us turn this
| | 07:11 | into a softer grey and click OK.
| | 07:15 | So you can see that I can make some adjustments to some or all of the
type depending on how I want to do this and how I want to format my type
| | 07:22 | but you can see that Paragraph type ultimately gives you the most
control and flexibility when you are working with multiple lines of type,
| | 07:29 | you do not have sort of futz around and try to reposition your type
if you have to change the size of the space you have to work with.
| | 07:35 | So now that I am done creating my Paragraph type I am going
to commit my changes by Clicking the Check Mark box up here
| | 07:40 | on the top of the Options bar.
| | 07:41 | You can see that that automatically updates the name of
my Type layer to reflect the contents of that type layer.
| | 07:47 | So that is how you can work with Paragraph type in Photoshop CS2.
| | Collapse this transcript |
| Checking Spelling| 00:01 | >>When you are working with type in Photoshop CS2, something
that is really important to do is check your spelling,
| | 00:06 | and Photoshop gives you an excellent tool to be able to do that.
| | 00:10 | You can see that I have one type layer in my
Coupon image here and if I go to the Edit menu
| | 00:15 | and choose Check Spelling, it will automatically
start spell checking the contents of my Type layer.
| | 00:22 | I have this Check All Layers turned on and what that will do
is check the contents of all the Type layers in your image.
| | 00:30 | If you do not want it to check all the layers, you want to restrict it to
just one layer, then you can simply select that layer in the Layers palette
| | 00:37 | and turn off the Check All Layers option.
| | 00:39 | You can see that it has automatically identified the
fact that I had spelled the word complimentary wrong
| | 00:45 | and it gives me a few different options on how I would like to change that.
| | 00:50 | I am going to choose the second entry
right here and I am going to Click Change.
| | 00:54 | Next it is going to identify the word Javaco and we know
that even though Javaco is not something that is part
| | 01:00 | of the English dictionary, but it is the word that we want
to use because it is the brand for our tea company.
| | 01:05 | So I can choose to do a couple of things.
| | 01:07 | I can choose to Ignore and that will ignore just one instance of it.
| | 01:10 | I can Ignore All which will mean that as it continues to check my document
it will not identify any more instances of Javaco, or what I can do,
| | 01:19 | and what I would probably do if I was working in this case is Click
Add, and what that will do is add it to the English dictionary
| | 01:25 | and then any time I use that word Javaco again as
I am checking spelling it will not identify it.
| | 01:31 | So now you can see that I have - my spelling is complete
and I can just click OK and if I look over here you can see
| | 01:37 | that it has changed the word complimentary
and left the word Javaco the same.
| | 01:41 | So you can see that that can be really helpful when you are
working with documents that contain large amounts of type.
| | Collapse this transcript |
| Finding and Replacing| 00:01 | >>In the last movie we took a look at how to check spelling
and something else you can do that is equally as useful
| | 00:06 | as the Check Spelling feature is Find and Replace Type. Both of
these features are similar to what you would see in a word processor
| | 00:12 | and it is really helpful that they are part of Photoshop CS2 for those
occasions when you are working with documents with large amounts of type.
| | 00:18 | You can see here that I have a few instances of Javaco in my Type layers.
| | 00:23 | I want to change all of those instances to the word "dragonwell".
| | 00:27 | Of course I could go through and look for each instance on
my own but what would be easier is to go up to my Edit menu
| | 00:32 | and Choose Find and Replace Type.
| | 00:35 | In the Find What field, I am going to type Javaco and
in the Change To field, I am going to type Dragonwell.
| | 00:44 | I am just going to move this up a little
bit so you can see what is happening.
| | 00:48 | So what is going to happen here is I can now Click Find Next and it is
going to find the next instance of the word Javaco and I can either choose
| | 00:56 | to Change, Change All or Change and Find.
| | 00:59 | I like to use the Change and Find option because that
takes me to the very next instance automatically.
| | 01:04 | You can see that if I Click just Change instead now I would have
to go and Click Find Next, so I like that Change and Find option
| | 01:12 | because it helps me sort of move quickly through my document.
| | 01:15 | So I am going to Click Change and Find and it says no
more found and it gives me how many replacements I need.
| | 01:20 | So I can Click OK and it has automatically changed the word Javaco
into the word Dragonwell quite easily and I did not have to manually go
| | 01:29 | through and type the text at all.
| | Collapse this transcript |
| Warping Type| 00:01 | >>In the next two movies we are going to take a look
at some of the fun things that we can do with type.
| | 00:05 | In this movie we will be focusing on warping type and in
the next movie we will focus on putting type on a path.
| | 00:10 | The benefit of warping type is that you can still maintain its vector-based
properties while putting it on sort of a curve or some sort of shape
| | 00:18 | such as what I have done here.
| | 00:19 | You can see that when the type is warped my Type layer
icon updates in the Layer palette and you can see
| | 00:25 | that I have this funky little warped type icon.
| | 00:28 | So let us take a look at how to create warp type in Photoshop CS2.
| | 00:32 | I am just going to toss this layer into the trash.
| | 00:34 | I am going to grab my type tool and position my cursor inside my document
and type "Try Javaco Tea today". I am going to grab my Move Tool
| | 00:45 | and I am just going to reposition it over
here so I can see a little bit better.
| | 00:50 | Grab my Type Tool, double-click to highlight the contents of
my layer and I am just going to make this a nice dark blue.
| | 00:58 | There we go.
| | 00:59 | Now what I want to do is warp my type, and you can see that I have
this option up here in the Options bar called Create Warp Type.
| | 01:06 | If I click that I open up the Warp Text dialog box and you can
see that I have a number of different styles to choose from.
| | 01:12 | I can make an arc.
| | 01:14 | I can make an upper arc.
| | 01:16 | I can bulge it.
| | 01:18 | I can wave it.
| | 01:20 | I can make a fish.
| | 01:24 | I can twist it.
| | 01:27 | And I can squeeze it.
| | 01:28 | There is lots of options here, so let us go back to
the bulge and just show how some of these options work.
| | 01:35 | You can see that I can have a horizontal or a vertical bulge.
| | 01:39 | I actually prefer to have it on horizontal for this one.
| | 01:42 | I can adjust how the bend looks.
| | 01:44 | So you can see when it was higher, it really has a very wide bend
to it and I can, you know, switch that so that it inverts it, or,
| | 01:54 | so that it is a little bit narrower.
| | 01:56 | I can also adjust how much it distorts horizontally.
| | 02:00 | In this case I like to have the middle and likewise with the vertical,
you know, you can really make it look like it is in perspective.
| | 02:10 | There we go.
| | 02:11 | So that is how we can go about actually warping the types.
| | 02:14 | So let us Click OK.
| | 02:15 | Now the benefit of this is that even though I have applied
this kind of wacky effect to it, it is still vector-based,
| | 02:20 | so I can go up and change my font size, I can change that to
thirty and it maintains that warp setting that I specified.
| | 02:27 | I can change my anti-aliasing, switch that back to smooth, and I
can also change my color - let us choose a lighter blue for that.
| | 02:35 | So there is a lot that I can do with it.
| | 02:37 | I can also, if I made an error in my typing, instead of "Try Javaco
Tea" I want to say "Try Javaco Coffee", it is still going to understand
| | 02:45 | and remember the settings I specified in Warp and allow me to make changes.
| | 02:50 | I could even change this color to a darker blue if I wanted.
| | 02:55 | So there is lot of things that you can do.
| | 02:57 | Now when you are designing web graphics I would caution
you against doing too, too much of this kind of thing
| | 03:03 | because it does really impact the readability of the type on your website.
| | 03:07 | So this can be something that is kind of fun but use it sparingly because
you will find that it will really make it difficult for your customer
| | 03:14 | to see what is on your site if you are
using a lot of warped type like this.
| | 03:18 | So the last thing we need to do is we need to actually commit out changes
and we know how to do that by clicking the Commit Current Edit button.
| | 03:24 | You can see our Type layer icon updated to show that it is warped type.
| | 03:27 | Next we will take a look at another fun
technique, which is putting type on a path.
| | Collapse this transcript |
| Creating Type on a Path| 00:01 | >>Next we're going to talk about putting type on a path.
| | 00:04 | You can see here that I have type on this nice, sort of arced path.
| | 00:07 | This is an open path.
| | 00:08 | We'll also take a look later on at how to put it on a closed path.
| | 00:12 | So the advantage of doing this over warping type is that you have
a little more control about the actual path that the type sits on,
| | 00:20 | rather than some of the pre-sets when you're warping it.
| | 00:22 | So let's take a look at how you would create this.
| | 00:24 | I'm just going to toss the "essence of tea" layer into the Trash here
and I'm going to over to my Toolbox and choose the Freeform Pen Tool.
| | 00:31 | I'm just going to draw a little arc.
| | 00:37 | Now I'm going to switch over to my Horizontal Type Tool.
| | 00:41 | I want you to watch what happens as I position my cursor inside
the document window, versus when I position it near the path.
| | 00:49 | You can see that it changes.
| | 00:51 | If I start typing here, I'm just going to create regular character type.
| | 00:55 | If I start creating type up here while my cursor changes to
this cursor, now I'm going to be creating type on a path.
| | 01:03 | So I'm going to click, and I'm just going
to start typing "the essence of tea".
| | 01:10 | And you can see that I have this little cross here, and
that's familiar to when we were working with paragraph type.
| | 01:15 | That indicates that there's more type but we just can't see it.
| | 01:18 | So I'm going to grab the Past Selection Tool, which is the black arrow.
| | 01:22 | Now you can see that my cursor changes again, and I'm going
to move this so that I can now see all of my Type layer.
| | 01:30 | That basically just increases how much span I have to see my type in, and
I can basically position it forward and back if I want to move my type
| | 01:39 | up higher on this sort of little hill that we've created, or if I want
to move it down here into more of the valley area, I can do that as well,
| | 01:49 | and also flip it around, like I just did right there.
| | 01:53 | I'm just going to undo that by pressing (Command + Z) or [Control + Z]. Now
this is vector-based type, just like any other type that we've created,
| | 02:01 | and if I grab my Horizontal Type Tool, and I double click the T icon
to highlight my type, I can make any type of adjustment I want here.
| | 02:10 | I could change my font.
| | 02:12 | Let's return that back to Arial.
| | 02:15 | I could change my font style; I could change that to an italic.
| | 02:19 | I can change my size.
| | 02:20 | Let's increase that to thirty.
| | 02:22 | I can change the...
| | 02:24 | I can change the alignment; I can change
any of these options including the color.
| | 02:29 | Now if I go to my Character Type pallette, by clicking the toggle button
here, I can also adjust any of these settings that we discussed earlier.
| | 02:37 | Let's take a look at adjusting the tracking.
| | 02:39 | There we go.
| | 02:40 | I can also bold this, or italic it, or put all caps, or small caps.
| | 02:46 | There's a number of different options I have here, again, because this
is vector-based type, so any of the options we've looked at before apply
| | 02:52 | to this type, even though it's on a path.
| | 02:55 | So let's close that up.
| | 02:57 | Now the last thing I need to do to be able to accept my
changes here is just click the Commit Current Edit button,
| | 03:03 | and that's going to commit my changes, and at any time, because
it's vector-based, I can go in and make some changes and edit this.
| | 03:11 | So that's how we can create type on an open path.
| | 03:13 | Let's take a look at how we can create type on a closed path.
| | 03:16 | I'm going to go ahead and choose File, New, and I'm just going to create
any sized document here and position my document window down a little bit.
| | 03:26 | I'm going to go into my Shape Tool flyout and choose the Ellipse Tool.
| | 03:31 | And I want to make sure that it's set to Paths,
not to Shape Layers; I want it set to Paths.
| | 03:36 | Any time you do this, including if you use any of the pen tools
as we did earlier, you want to make sure this is set to Paths.
| | 03:43 | So what I'm going to do is I'm just going to click
and drag and I'm going to create a nice, big circle.
| | 03:48 | There we go.
| | 03:49 | Now I'm going to switch back to my Type Tool,
and again, I have these different cursors.
| | 03:55 | I have the regular character type cursor,
and then I have the type on a path.
| | 04:01 | So I'm going to click, and I'm just going to start typing.
| | 04:16 | [ typing sounds ]
| | 04:17 | And there we go.
| | 04:18 | Again, because this is vector-based type, I
can just highlight the type, and make some changes.
| | 04:25 | I'll double-click my Type layer to highlight the contents of my type.
| | 04:28 | I can change my font.
| | 04:30 | I can change the font style, although this particular
font doesn't have any styles associated with it.
| | 04:36 | I can change my font size.
| | 04:38 | Now you can see that that's a little bit too
big; I can't see all the type that I created.
| | 04:43 | It's the same thing here, we can see that little X.
So I'll just reduce that back down to twenty four.
| | 04:49 | I can change my size
| | 04:51 | or the color. If we go into our Character pallette, I
can also make some adjustments to things like the tracking,
| | 04:56 | and that's what I'm going to do here to sort of close
this up and make it look like it's evenly spaced out here.
| | 05:02 | There we go.
| | 05:03 | And again I can make any of the changes here to editing
my type, just like I do with character and paragraph type.
| | 05:11 | So I'll close this up, and I'm going to
click the checkmark to commit my changes.
| | 05:16 | So that's how you can create type on a closed path.
| | 05:19 | So again, what I said at the end of the warping type movie is
that you want to be careful with how you use this on the web,
| | 05:26 | because your number one primary concern is readability.
| | 05:29 | Especially on the web, because your viewers are not going to spend
a lot of time reading, so make sure if you're using warp type
| | 05:35 | or type on a path you're using it sparingly, and in a situation
where it's not compromising the readability of your website.
| | Collapse this transcript |
| Rasterizing Type| 00:01 | >>In this chapter we've focused on vector-based type, and there
will be times that you're going to need rasterize the type,
| | 00:07 | meaning you're going to want to covert the layer from
being vector-based type into a regular pixel-based layer.
| | 00:12 | Remember here we have our Flavor of the Month
file and our Dragonwell layer has been rasterized.
| | 00:17 | Let's take a look at the process for how we would go about doing that.
| | 00:21 | Now the first thing I'm going to do is caution you.
| | 00:23 | As soon as you rasterize your type, you're never going
to be able to get back to its vector-based properties,
| | 00:28 | so for whatever circumstances you have to rasterize it.
| | 00:31 | Something that I often caution users and advise them to do, is make
a duplicate of their vector-based type, so to do that I'm going to up
| | 00:38 | to my Layers Palette menu, choose Duplicate Layer. We'll just
call that "Copy" and click OK, and then turn off the visibility of it.
| | 00:47 | So you do have a vector-based type layer there, with the type that you've
been using, but it's just turned off, and this is something that I like
| | 00:54 | to do if I'm going to rasterize my type, and I think I may
have to get back to those vector-based properties at some time,
| | 00:59 | so I'm going to select my type player that I want to rasterize.
| | 01:03 | I'm going to go up to the Layer menu and
I'm going to choose Rasterize Type.
| | 01:07 | You can see that it basically looks exactly the same, only now we can
see it's a pixel-based layer, instead of a vector-based type layer,
| | 01:15 | so that's the process for rasterizing type, and again, just think
about making a duplicate of the vector-based type before you do that,
| | 01:21 | in the event that you ever need to get back to the vector-based properties.
| | Collapse this transcript |
|
|
6. Optimizing ImagesUnderstanding Web File Formats| 00:01 | >>In this chapter of movies we're going to take some time
and talk about how to optimize your images for the web,
| | 00:07 | and optimizing images is really a critical skill when you're designed
web graphics, because it's up to you to create images that look as best
| | 00:15 | as they possibly can, but have the smallest file size.
| | 00:18 | We've all been frustrated by slow loading graphics, and there's
a number of things that are out of your control when it comes
| | 00:23 | to how quickly your websites load.
| | 00:26 | But the one thing you can control is how
small your graphics are on your website.
| | 00:31 | So take some time and really focus on the exercises in
this chapter, because they will help you develop skills
| | 00:36 | for creating the smallest graphics with the best quality.
| | 00:40 | There's two main formats that we're going to focus on in this chapter.
| | 00:43 | The first is JPEG.
| | 00:45 | JPEG stands for Joint Photographic Experts Group, and it's best
for continuous tone images such as photographs, glows, gradients,
| | 00:53 | drop shadows, and so on.
| | 00:54 | The image here is an example.
| | 00:56 | It's a photograph.
| | 00:57 | JPEG is best used on images that have
transitions of color that fade from one to the next.
| | 01:03 | Photographs, continuous tone images, fit that criteria.
| | 01:07 | The next file format is the GIF file format,
which stands for Graphic Interchange Format.
| | 01:13 | It's best for simple graphic images with large, solid areas of
color, such as logos, illustrations, cartoons, line art, and so on.
| | 01:20 | The one you see here is an example.
| | 01:24 | The GIF file format basically looks for patterns in colors, so
single runs or single rows of color, and that's how it optimizes,
| | 01:31 | based on that criteria.
| | 01:34 | Now there are going to be times when you have an image that
has both flat graphical content and continuous tone content.
| | 01:40 | This is actually an example here.
| | 01:42 | You can see that most of the image is made up of flat graphical content,
but we do have the smoke curl that has this soft gradient on it.
| | 01:50 | And there are ways that you can get around
that in both Photoshop CS2 and Image Ready CS2.
| | 01:54 | So take some time and take a look at the movies in this chapter so that you
can develop some techniques for how to optimize your images for the web.
| | Collapse this transcript |
| Optimizing JPEGs| 00:00 | >>Now that we've taken a look at the different file formats to use when
you're optimizing for the web, let's move right into optimizing JPEGs.
| | 00:09 | So let's talk first about how we can actually
create small JPEGs for the web.
| | 00:14 | The first thing which we touched on in the last movie is that we need
to make sure that we're working with an image that has a tonal range,
| | 00:20 | so a photograph, a continuous tone graphic, or
something that contains glows and drop shadows.
| | 00:26 | The next thing we can do to make a small JPEG is increase the
blur, and that's because a JPEG algorithm doesn't like harsh edges.
| | 00:37 | It's easier for it to make a file smaller if it doesn't
see harsh edges or harsh contrast between areas.
| | 00:44 | So by adding blur, we can sometimes smooth out
some of those areas and make a smaller file.
| | 00:49 | We can increase our JPEG compression.
| | 00:52 | We can also decrease saturation, and decrease contrast,
and this gets back to the idea of the harsh edges.
| | 00:57 | The last thing we can do is use an alpha channel.
| | 01:00 | We're not going to look at that in this particular
movie; we will take a look at that in the next movie.
| | 01:04 | So let's get over to Photoshop CS2 and take a
look at some of this stuff in a practical example.
| | 01:10 | Here we are in Photoshop CS2, and we want to optimize this image as a JPEG.
| | 01:15 | We know that this is an acceptable image to use because it's a photograph.
| | 01:19 | So let's go up to our File menu and choose Save
For Web, to open up the Save For Web dialog box.
| | 01:26 | Right now this is on two up, and I'm going to switch to four
up, and you can see that I have my original here on the top left
| | 01:33 | and then I have these three options that
Photoshop CS2 has generated for me.
| | 01:38 | The problem is that it's using the GIF file format, and we know that
that's not going to be effective for us because this is a photograph,
| | 01:46 | and it will optimize better as a JPEG.
| | 01:48 | But take a look at the values that we have
here, and the actual size of the image.
| | 01:52 | What I'm going to do is I'm going to choose
JPEG from the Format popup menu.
| | 01:57 | Then I'm going to go to this little menu over
here and I'm going to choose re-populate views.
| | 02:01 | And what that's going to do is it's going
to re-populate it based on JPEG compression.
| | 02:06 | You can see that what we had was a GIF,
which was about 70K, is now down to 33K.
| | 02:13 | So this particular image here is being optimized
as a JPEG with the quality set to sixty.
| | 02:19 | Down here we have the quality set to thirty, and
on the far right here we have it set to fifteen.
| | 02:25 | And if we look you can see obviously with the quality
set to fifteen, we're not happy with the result.
| | 02:29 | You can see we have a number of really ugly artifacts around here.
| | 02:33 | Even with it set to thirty you can see that there's a lot of artifacts.
| | 02:37 | So what we're probably looking at is somewhere between the thirty and
sixty range in terms of quality to be able to optimize this effectively.
| | 02:47 | So I'm going to just make sure that the sixty
is selected, and I'm going to go back to two up.
| | 02:52 | And now let's start playing around and seeing if we can
make this a little bit smaller but still keep the quality.
| | 02:58 | So let's try taking this down to forty.
| | 03:03 | And what I don't like about this setting is that I see artifacts
right here, and right here around the flicker of the candle.
| | 03:09 | And there's some places that you'll find that
you can have an acceptable amount of artifacts.
| | 03:14 | Here it doesn't bother me too much but it does bother me up here
because this is the one of the main focal points of the image;
| | 03:19 | your eye's automatically going to go to that flame.
| | 03:22 | So we don't want to have artifacts in that area.
| | 03:24 | Let's try increasing it to about fifty.
| | 03:27 | There it's starting to look a little bit better but I'm
still a little bit unhappy with this area right here.
| | 03:32 | So I can increase that a little bit more, say to fifty five.
| | 03:35 | And you can see that we have our image down to about 30K.
| | 03:39 | So that's our quality.
| | 03:41 | Now the next thing that we can do is we can add a blur to this, and that
can held decrease the file size, and smooth out some of the artifacts.
| | 03:50 | So let's just increase that.
| | 03:52 | See that doesn't really do a whole lot, so let's
just go ahead and increase that a little bit more.
| | 03:56 | Now you can see that I have lost some of the sharpness in
between these, but I've also lost a lot of that artifacting,
| | 04:03 | and I've gotten another 2K off the size of my image.
| | 04:06 | Now you might think, "Well, 2K's not a really big deal, why
would you even bother?" Every little bit helps on the web.
| | 04:12 | We've all been frustrated by slow loading graphics, and
it's your responsibility as a web designer to make sure
| | 04:18 | that your graphics are as small as possible.
| | 04:20 | Think about those poor people that are stuck on modems.
| | 04:22 | You'd be surprised how many people are still stuck with dial-up
access, because rural areas don't have high speed internet.
| | 04:29 | So remember that when you're optimizing your graphics.
| | 04:31 | So you can see here by adding a little bit of blur I did
compromise some of the sharpness in some of these areas,
| | 04:38 | but I still think that that's acceptable enough to be able to
use this as an acceptable image, an acceptably optimized image.
| | 04:46 | So that's one thing that we can do in terms of our settings.
| | 04:49 | Now we've talked a little bit about contrast and saturation.
| | 04:52 | Let's take a look at how that will affect our overall file size.
| | 04:56 | So, I'm actually going to click Done, instead
of Cancel, so that it remembers those settings.
| | 05:00 | What I'm going to do is I'm going to go up to my Image Adjustments,
choose Adjustments, Hue Saturation, and let's just pull a little bit
| | 05:08 | of saturation out of this image.
| | 05:10 | I'm not going to take out tons, just enough to sort of, you
know, fade it out a tiny, tiny bit, and I'm going to click OK.
| | 05:16 | Now I'm going to go up to my Image Adjustments,
and I'm going to choose Brightness Contrast.
| | 05:21 | I'm just going to decrease the Contrast every so slightly, not
enough to really affect the composition radically, but just a little bit.
| | 05:31 | Click OK. Now I'm going to choose File, Save For Web, and you can
see that just by doing that, even with these identical settings,
| | 05:39 | I've taken my file size down another 2K.
| | 05:42 | So these are all things that you can play
with when you're optimizing your JPEGs.
| | 05:46 | I'm going to tell you right now, there's no exact science to doing this.
| | 05:49 | This is something that you're going to have to experiment with.
| | 05:51 | You'll find that every image that you work with is different,
because every image has a slightly different focal point,
| | 05:56 | a slightly different amount of variation
in color and tone, and tonal range.
| | 06:01 | So, this is something that you really need to experiment with.
| | 06:04 | Those are the basic things that you
can try when you're optimizing your JPEGs.
| | 06:09 | First start with the quality, try adding a blur, if you're still not happy,
go back and adjust the saturation and the contrast of the image to see
| | 06:17 | if you can get a result that you're happy with.
| | 06:19 | So now that I'm finished, I'm going to
just go ahead and I'm going to click Save.
| | 06:23 | And that's going to open up the Save As Optimized dialog box.
| | 06:27 | I'm just going to go to my desktop, and I'm going to
call this "candles.jpg" and I'm going to click Save.
| | 06:36 | Now if I go to my Desktop, you can see that we have this candles.jpg file.
| | 06:42 | I'll double-click to open it up, and now we
can compare it, open it up in Photoshop CS2.
| | 06:46 | Now we can compare it to the original and you can see
that this actually did a really good job of optimizing it.
| | 06:52 | There is a tiny, tiny bit of artifacting up here, but overall
we've done a really good job and this is really, you know,
| | 06:59 | helped us create an effective JPEG that we can use on the web.
| | 07:04 | Next up we'll take a look at how to use an
alpha channel to do some selective optimization.
| | Collapse this transcript |
| Selective JPEG Optimization with Alpha Channels| 00:01 | >>Next we're going to take a look at a technique called
"Selective JPEG Optimization", with alpha channels.
| | 00:06 | What this basically allows me to do is specify different
optimization settings in different areas of the image.
| | 00:12 | If we look at this example, the teapot is obviously
the most important area or focal point in this image.
| | 00:18 | The background is less important, so we can probably have a slightly higher
compression setting in the background than what we do for the foreground.
| | 00:25 | So the way I have this image set up is I have the background on one layer
and the teapot on a separate layer, and I did that just to make it easy
| | 00:34 | to select the contents of this layer.
| | 00:36 | What I can do is just hold down my Command key or my Control key.
| | 00:39 | You can see my cursor changes, and I can click to make
a complete selection of the contents of that layer.
| | 00:45 | Now if you don't have your image set up this way, that's fine, you
can just go ahead and use any of the selection tools in Photoshop CS2
| | 00:51 | to create a selection.
| | 00:53 | The next thing I'm going to do is create an actual alpha
channel, and an alpha channel is simply a saved selection.
| | 00:59 | So I'm just going to go to my Select menu and choose Save Selection.
| | 01:02 | I'm going to put it in my teapot image; I'm going to make it
a new channel, and I'm going to call it "teapot" and click OK.
| | 01:10 | Now if we jump over to our Channels palette you can see
our teapot right down there in the Channels palette.
| | 01:16 | So, back at the Layers palette, let's go up to the Save For Web dialog box,
File, Save For Web, and you can see that it's remembering our settings
| | 01:26 | from the last time we used this which was in our last exercise.
| | 01:29 | Right now our file size is at 18.2K.
| | 01:33 | If I look at this, I'm not really thrilled with the artifacting I'm seeing
on the sides here, so what I want to do is I want to increase my quality,
| | 01:41 | and increase that to sixty-five.
| | 01:45 | Let's see how that looks.
| | 01:48 | That's starting to look a little bit better.
| | 01:49 | I still see some artifacts I'm not happy with,
so I'm going to increase that to about seventy.
| | 01:56 | There we go.
| | 01:56 | Now you can see that that's radically increased our file size.
| | 01:59 | It's up to 25K.
| | 02:02 | So what can we do to make this a bit smaller.
| | 02:04 | Well the background probably doesn't need a quality setting at seventy.
| | 02:08 | So let's click this "Use as a Channel to
Modify Quality" setting and see what happens.
| | 02:12 | I'm going to choose "teapot" from the Channel popup
menu, that's recognizing our teapot that we saw,
| | 02:18 | and let's just adjust these quality settings.
| | 02:22 | We have our maximum set to seventy, and now we want to set our minimum.
| | 02:26 | Right now it's set to zero which you can see obviously
has, you know, way too many artifacts, but let's try,
| | 02:31 | if we just set this to maybe around forty-five.
| | 02:36 | That's looking much better.
| | 02:38 | There's still some artifacts down here that we can get rid
of so I'll increase that maybe to forty-eight or fifty.
| | 02:45 | And that looks good.
| | 02:48 | Now I may not need this set all the way to seventy, so let's try to
just switch this back to sixty-five and see how that looks again.
| | 02:55 | I think I can live with that.
| | 02:56 | Now you can see that with forty-six percent set as our
minimum, and sixty-five percent set as our maximum,
| | 03:01 | I've been able to get this file back down to 21K.
| | 03:05 | So let's click OK.
| | 03:06 | That's a huge file savings over the twenty-five
that we had originally when we bumped this up.
| | 03:11 | So as you can see, by changing your settings so that you have one
setting for the black areas of your alpha channel and one setting
| | 03:17 | for the white areas of your alpha channel
will help you achieve some file savings.
| | 03:22 | Now I can also increase my blur slightly and that will probably decrease
my file size a bit, and it also helps smooth out some of those artifacts.
| | 03:31 | We also know that if we adjust our contrast and adjust our saturation,
that we can probably get this file size down a little bit again as well.
| | 03:38 | But you can see that that technique is quite helpful if you need to really
try to reduce some of your file size when you're optimizing with a JPEG.
| | 03:47 | The last thing that we need to do to actually save this JPEG is
click the Save button, and I'm just going to save this on my desktop
| | 03:55 | and call it teapot.jpg.
| | 03:57 | I'm going to click Save.
| | 03:59 | Go to our desktop; you can see there's our teapot
file; I'm going to double click to open it.
| | 04:04 | It'll open in Photoshop CS2, and we can
do a little comparison of those images.
| | 04:09 | You can see that we've done a pretty good job of optimizing it.
| | 04:11 | We don't have too many compression artifacts, and although it is a tiny
bit blurrier than the original, it's not so blurry that it's detracting
| | 04:20 | from the quality of the image.
| | Collapse this transcript |
| Optimizing GIFs| 00:01 | >>Nest we're going to take a look at how
we can optimize GIFs in Photoshop CS2.
| | 00:05 | So let's talk first about what we can do to make a small GIF.
| | 00:09 | The first thing we need to do is make sure that the
image we're starting with has large areas of solid color.
| | 00:15 | As we know from the first movie in this chapter, the GIF file format
looks for large areas of solid color and optimizes images that are based
| | 00:23 | on that sort of pattern the best.
| | 00:25 | So if you're using a photograph, this is not the format to use.
| | 00:29 | The second thing we can do is reduce the number of colors in the image.
| | 00:34 | We'll take a look at that in this movie.
| | 00:36 | We can also reduce the amount of dithering.
| | 00:38 | Dithering basically adds a series of dots around
the image to simulate the look of different colors.
| | 00:45 | That can increase your file size, although it can help
achieve good results, it can also increase your file size.
| | 00:50 | The next thing we can do is add lossy compression.
| | 00:54 | By nature GIF is a lossless file format, which means that
as it compresses it doesn't discard any visual information.
| | 01:02 | Image Ready and Photoshop CS2 both provide a lossy
slider which allows you to add lossy compression
| | 01:07 | and that basically discards some visual information
from the image as you add lossy compression.
| | 01:14 | Sometimes that can yield negative results, but sometimes it can
yield positive results and help you decrease your file size.
| | 01:21 | The last thing we can do is add an alpha channel.
| | 01:24 | We're not going to focus on that in this particular
movie; we'll get to that later on in this chapter.
| | 01:29 | So here we are in Photoshop CS2 and you can see that we're starting
out with this file that's basically a file that has a large area
| | 01:36 | of flat graphical content, and we know that
that's going to optimize best as a GIF.
| | 01:40 | Let's go up to our File menu and choose Save For Web, and right
now it's set to JPEG because that's the last format that we used.
| | 01:49 | I'm going to click the 4-Up tab, and I'm going to change
our file format to GIF and I'm going to repopulate our views
| | 01:59 | so that we can take a look at the results.
| | 02:02 | Now the file says right now is at 10K, but you can see that the difference
between having it as a GIF and JPEG, the quality is much, much better.
| | 02:11 | The JPEG format doesn't respond well to harsh changes in
color, so it doesn't do a great job on an example like this.
| | 02:18 | GIF will really yield the best results here.
| | 02:21 | So now that we can see sort of some of our results,
let's go back to the 2- Up tab and just focus
| | 02:27 | on making this particular example a little bit better.
| | 02:30 | The first thing you look at is that we have the color table right
here, and the GIF file format lets you specify a number of colors
| | 02:39 | to include in your image.
| | 02:40 | You can see that we can choose 256, 128, 64, 32, 16, 8, 4 and 2, and
they're basically all derivatives of the number 8, or the number 16.
| | 02:52 | So the first thing we can do to decrease our file size is reduce the number
of colors in our image, and there's really no exact science to doing that,
| | 03:00 | it's an experimental process whereby you need to just go through
and reduce your number of colors until you get to a point
| | 03:07 | that you're not happy with the results.
| | 03:09 | So you can see that going to 128 colors
really didn't make a huge impact there.
| | 03:13 | Let's take it down to 64 colors.
| | 03:16 | You can see that each time I drop this, I'm basically dropping 1K off
my file size, but I'm really not changing the quality of my image.
| | 03:24 | Let's try going down to 32.
| | 03:25 | Now I'm starting to see a little bit of a change in my
image, specifically around the anti-aliasing on the text.
| | 03:34 | Let's take this down to 16.
| | 03:36 | That I'm finding to be a little bit too harsh; I find that the edges are
a little bit ugly, but let's just keep taking it down to see the results.
| | 03:43 | You can see each time I do this the number of the colors here
on the color table changes, and if I take this down to 4,
| | 03:50 | this is where I start to really lose a lot of the quality of my image.
| | 03:55 | So I think it looked best when I had this set to 64, which was around 9K.
| | 03:59 | Let's just compare the file size between 64 and 32.
| | 04:04 | I've lost 2K, which is quite a significant savings.
| | 04:08 | How does this look?
| | 04:09 | Well, you know, it looks pretty good.
| | 04:10 | I think I can live with this.
| | 04:12 | Now, the question is, can I decrease the file size further.
| | 04:17 | First, I'm going to turn off this Transparency checkbox.
| | 04:19 | We don't need that turned on, because this
image doesn't contain any transparent areas.
| | 04:23 | The next thing that I'm going to do is you can see that we have our
dithering; you can see that we have the Dither setting set to Diffusion,
| | 04:30 | and I'm going to just set this down to zero and see what happens.
| | 04:36 | You can see that it doesn't change the image at all, but
what it does is help decrease our file size, it's now 7.6K.
| | 04:44 | It's shaved a tiny, tiny bit off of our file size.
| | 04:47 | Dither can sometimes help make an image look better, especially
if you have an area that has a little bit of transition in color.
| | 04:53 | This particular image doesn't, so I don't find that it really
adds a whole lot here, but it did add to our file size.
| | 04:59 | The next thing that we're going to look at is our Color Reduction palette.
| | 05:04 | There's four Color Reduction palettes:
Perceptual, Selective, Adaptive, and Restrictive.
| | 05:09 | Let's take a look at Restrictive, or Web, first.
| | 05:12 | This is automatically going to force it to a web safe color palette.
| | 05:16 | And you can see that it really doesn't do a very good job.
| | 05:19 | I would recommend that you not use this particular option.
| | 05:23 | I don't find it terribly effective.
| | 05:25 | What you have to do is basically choose
between Perceptual, Selective, and Adaptive.
| | 05:33 | And what you want to do is look at the result and look at your file size.
| | 05:37 | With Adaptive we have 7.5K, with Selective we
have 7.6K, and with Perceptual we have 7.1K.
| | 05:46 | So what we want to decide is does Perceptual, at 7.1K,
look a lot better, or a lot worse, than Selective at 7.6K.
| | 05:56 | I hardly see any difference at all, so we can just set that to Perceptual.
| | 06:00 | Again, this is something that you'll need to experiment with.
| | 06:02 | Every single image will look better with a different color reduction
palette, and you just need to experiment until you get something
| | 06:09 | that you're happy with.
| | 06:10 | So now we've basically set up all of our GIF optimization options;
there's really nothing else we can do to make this file any smaller.
| | 06:19 | So what we're going to do is save this.
| | 06:22 | I'm going to click on Save.
| | 06:23 | It's going to take me to my desktop, and
I'm just going to save .gif and click Save.
| | 06:29 | And if we go to our desktop, there's our file,
and I double click it, and we can compare the two.
| | 06:36 | You can see that this had done a really
good job of optimizing this file.
| | 06:41 | We've got it down to about 7K, which is a really nice small size.
| | 06:45 | So those are some techniques you can use when you're optimizing GIFs.
| | 06:49 | We can also use alpha channels to do selective optimization,
and we're going to take a look at that in the next movie.
| | Collapse this transcript |
| Locking Colors with GIF Optimization| 00:01 | >>When you're optimizing GIFs and specifically when you're reducing the
number of colors in your image, sometimes you'll lose a particular color
| | 00:09 | that you want to keep.
| | 00:11 | Ssomething you can do [to prevent this] is lock your colors.
| | 00:14 | So let's take a look at that.
| | 00:16 | If we take this down to 128, 64, 32, 16 you can see that we're
keeping most of the integrity of the colors in this image.
| | 00:29 | If we take that down to 8, you can see that we lose some
of the main colors of the chai and the word Javaco,
| | 00:38 | and those are colors that we would actually want to keep if we were
to reduce it to a color setting or a number of colors this low.
| | 00:45 | So what we can do is we can lock the colors in our image.
| | 00:49 | I'm going to take this back to actually not as high as 256.
| | 00:53 | Let's take this back to 32, and what I'm going to do is
grab the Eyedropper Tool here in the Save For Web window.
| | 01:00 | I'm going to click inside the color that I want to keep, which is
the color for the word chai, and you can see it selects it over here
| | 01:08 | in the color table, and I'm just going to click the Lock icon, and you can
see that Tool Tips says "Lock Selected Colors to Prohibit Being Dropped".
| | 01:15 | And that basically means it's going to make sure it keeps
that color when we reduce the number of colors in the image.
| | 01:21 | I'm actually going to do that for a few of
these colors that are really important to me.
| | 01:25 | Here we go.
| | 01:25 | Now let's see what happens when we drop our colors to eight.
| | 01:37 | Now you can see it keeps those colors.
| | 01:40 | It did actually lose some of these ones up here, so let's go back up to 32,
and lock that color as well, so we use our Eyedropper Tool and click Lock,
| | 01:49 | and now let's go down to eight.
| | 01:52 | Now you can see that it has maintained that dark blue and the dark
green that we locked, whereas originally when we optimized this,
| | 01:59 | it was dropping those colors.
| | 02:01 | Now obviously I wouldn't optimize this image at 8 colors
because it looks, the edges look really quite unattractive here.
| | 02:08 | But I just wanted to use this example to illustrate the point of when
you're reducing your number of colors, if you're seeing colors get dropped
| | 02:15 | that you want to keep, use this lock feature down here.
| | 02:20 | Start by clicking the Eyedropper Tool, choosing the
color that you want to keep, and clicking the Lock icon,
| | 02:25 | and that will make sure that when you reduce your number of
colors, it keeps those and doesn't drop them as it drops colors.
| | Collapse this transcript |
| Selective GIF Optimization with Alpha Channels| 00:01 | >>We're going to take a look at another technique for GIF
optimization and that's selective optimization with alpha channels.
| | 00:07 | We took a look at a similar technique when we
were working with JPEGs earlier in this chapter.
| | 00:11 | This is a bit of a tricky example because while it predominantly contains
flat graphical content, we also have this gradient on our smoke curl
| | 00:19 | that fades from blue to green, and that's
going to be a tricky thing to optimize.
| | 00:24 | Let's choose File, Save For Web, and I have my settings as a
GIF, an Adaptive Color Reduction palette, and my colors at 256.
| | 00:34 | First thing that we want to do is just slowly reduce our colors to
see what type of quality compromises we're going to have to make
| | 00:40 | by reducing our number of colors.
| | 00:42 | So at 128 we're really not seeing too much change.
| | 00:46 | At 64, we're starting to see some really
nasty quality issues here in the swirl.
| | 00:53 | And if we take it down to 32, you can see that not only
are we getting some even worse artifacts in our swirl,
| | 01:00 | our text is starting to look a little bit jagged as well.
| | 01:03 | So I think the best setting is probably to leave this as 64.
| | 01:08 | Now we still want to be able to clean this up a little bit.
| | 01:11 | So what I'm going to do is I'm going to click
"Use Alpha Channel to Influence Color Reduction".
| | 01:16 | I'm going to click that button to open up this dialog box.
| | 01:20 | And I'm going to turn on all vector shape layers.
| | 01:23 | It's going to recognize that our smoke curl is a vector-based shape layer.
| | 01:27 | That's why we didn't have to create an alpha channel.
| | 01:30 | And what you can see is when I turn that on, is it automatically
weights the color reduction more in favor of the colors
| | 01:40 | in that particular smoke swirl.
| | 01:41 | Let's take a look at it again and keep your eyes on the color table.
| | 01:44 | This is with it turned off.
| | 01:47 | You can see that there's a lot of light greens and yellows.
| | 01:50 | If I turn it on, so it's weighting it more in favor of the colors in that
alpha channel, you can see that we're getting that nice array of blues
| | 01:59 | to greens and that's what's helping to make
this swirl look nice and clean and crisp.
| | 02:04 | Now unfortunately, in doing that we've
really compromised the quality of our text.
| | 02:08 | You can see we really only have one shade of yellow.
| | 02:11 | So what we can do, because this is a vector-based type layer, is I'm going
to turn on all vector-based type layers, and that's going to change our,
| | 02:17 | how the weighting in the color table is again.
| | 02:20 | Let's take a look.
| | 02:21 | Keep your eyes on the color table.
| | 02:23 | With it off, you see we really only have one shade
of yellow, which makes our text look pretty ugly.
| | 02:28 | And with it turned on, we have a few more shades of yellow,
and we haven't compromised the quality of what's in here.
| | 02:35 | So now I want to just re-iterate that the reason that we didn't have to
create an alpha channel is because we have a vector-based type layer
| | 02:42 | or a vector-based type layer in our original image and we could
automatically use those here with the Color Reduction palette.
| | 02:49 | So let's click OK.
| | 02:52 | Now we have something that looks much nicer that what it did before
because we don't have sort of that ugly gradation between the colors,
| | 03:01 | we have a nice even one now.
| | 03:03 | There's still a little bit more we can do, though, to work with this.
| | 03:07 | The first thing we can do is the lossy compression.
| | 03:10 | What I'm going to do is turn on again the all
vector-based type layers, all text layers.
| | 03:16 | You can see that what happens is that it's preserving the quality
of the type and the swirl, but it's compromising everything else.
| | 03:26 | So what we want to do is just bring this black
slider down, probably to about 20, 25 I guess.
| | 03:32 | We'll try that first.
| | 03:34 | You can see that that's going to really
make the rest of our image look better,
| | 03:39 | because what lossy compression does is it reduces the visual
information in the file, and when it was set up here you can see
| | 03:47 | that that really negatively impacted the rest of the image.
| | 03:50 | If I pull this down to about 25, then it's starting to look a lot better.
| | 03:56 | So I like that setting right where it is.
| | 03:57 | You can feel free to experiment with that on your own if you like.
| | 04:00 | And I'm going to click OK.
| | 04:02 | And now there's one more thing that I can do.
| | 04:05 | We can also use an alpha channel to modify dithering.
| | 04:08 | Now, in this case, dithering's really not going to gain a whole lot for me
with my text and my vector-based properties, so I'm just going to leave it
| | 04:15 | as it is, but I do want to point out that it is
there, and you may find it useful in some examples.
| | 04:20 | What I'm going to do is I'm actually going to pull
my dithering down to zero and see what happens.
| | 04:25 | First of all, you can see that my file size dropped to 5.9K.
| | 04:29 | Unfortunately I am starting to see a little bit of ugly gradation in
here so I'm going to just return that maybe back to about 25 percent,
| | 04:38 | and see if that fixes it.
| | 04:39 | And that's starting to look a little bit better.
| | 04:42 | Let's just split the difference and maybe try 50 or 60 percent.
| | 04:48 | And that's looking much better.
| | 04:49 | So you can see that by using those alpha channel techniques,
we've really been able to optimize this file effectively.
| | 04:56 | Now if you want to actually the save the file,
you can just go ahead and click the Save button.
| | 05:00 | We'll put that on our desktop, click Save, and if we go to our desktop,
there's our Decaf file, our Decaf GIF, and we can compare the two files.
| | 05:10 | You can see that we've done a pretty nice job of optimizing
this file using selective optimization with alpha channels.
| | Collapse this transcript |
| Previewing Images in a Web Browser| 00:01 | >>Here we are in the Save For Web window in Photoshop CS2, and I want
to point out how you can preview your optimized images in a web browser.
| | 00:10 | Sometimes when you're working on optimized images, you're going to
want to see the results of the optimization settings in a web browser.
| | 00:17 | I often find that viewing the optimized image in a web browser
helps me see it in a more appropriate context and certainly the one
| | 00:23 | that my viewers are going to see the image in.
| | 00:26 | So it's really easy to preview this.
| | 00:28 | Down here at the bottom of the Save For Web window we have
this button: Preview in Default Browser. If I click that,
| | 00:35 | it's going to open up the optimized image in my default web browser.
| | 00:39 | In my case that happens to be Safari.
| | 00:41 | On your computer you may have different one set up.
| | 00:43 | When I preview it, you can see that I
have this information down at the bottom.
| | 00:49 | The first set of information is just information
about the optimization settings.
| | 00:54 | We have JPEG.
| | 00:55 | We have the dimensions of the image.
| | 00:57 | We have the size of the file.
| | 00:58 | We have the quality settings all documented here.
| | 01:01 | Next what we have is a sample of the HTML code required to make
this image work inside of our web browser so we can see both
| | 01:09 | of those pieces of information.
| | 01:11 | The fact that this appears here is helpful because when you start to work
with more complex graphics you can actually cut and paste information
| | 01:17 | from here into your HTML editor if you need to.
| | 01:21 | So let's go ahead and close that and I want to show a few other things.
| | 01:25 | When you're previewing, you want to think about all
the web browsers that your viewers are going to use,
| | 01:32 | so just previewing it in a default may not be everything you need to do.
| | 01:36 | If I click this little button, you can see I have
an Other option and I have an Edit List option.
| | 01:42 | Let's choose Edit List.
| | 01:44 | And what I can do is add Browsers in here.
| | 01:47 | So I'm going to click the Add button, and I'm going to go to my
Applications folder, and I'm going to add Internet Explorer, click Open,
| | 01:56 | and I'm also going to add Safari.
| | 02:01 | There we go.
| | 02:02 | Now I have to make a decision about what I want my default to be.
| | 02:06 | I want my default to be Safari, so I'm going to
choose it, and I'm going to choose Set As Default.
| | 02:11 | You can see now in brackets we have that it's default.
| | 02:13 | Now I'm going to click OK, and you can see that instead of
having that little world icon, I now have the Safari icon,
| | 02:19 | and that means that I'm previewing it in Safari as my default.
| | 02:23 | I'm going to click that, and it opens it up in Safari.
| | 02:26 | Now if I want to take a look at this in Internet Explorer, if I click
this pop up menu now, you can see that it's a little bit different.
| | 02:32 | It's got Safari, which has the check, showing me that it's the default, but
if I want to view it in Internet Explorer, I can just go ahead and do that,
| | 02:40 | buy choosing Internet Explorer.
| | 02:42 | Now I can see what this is going to look
like in Microsoft Internet Explorer.
| | 02:47 | This is helpful because you'll often find things look a
little bit different, depending on which web browser you're using,
| | 02:53 | and it's important to make sure that you view your images, especially
when you start to work on complex things like rollovers and image maps.
| | 02:59 | You want to view those in as many browser scenarios as you possibly can.
| | Collapse this transcript |
| Optimizing JPEGs in ImageReady CS2| 00:01 | >>So far in this chapter we have focused exclusively
on how to optimize images in Photoshop CS2.
| | 00:06 | In this movie and in the next movie I want to
focus on how to optimize images in ImageReady CS2.
| | 00:13 | Before we go into ImageReady, I just want to go
into the Save For Web dialog box in Photoshop CS.
| | 00:17 | So I'm going to choose File, Save For Web.
| | 00:20 | And I want to show you that up at the top here it says Powered By
Image Ready, and that's because all of these controls are based
| | 00:28 | on what you're going to see in ImageReady CS2.
| | 00:31 | So automatically you should know that there's not really
going to be any surprises when we go to ImageReady CS2.
| | 00:36 | It's really just the interface that's
the difference between the two programs.
| | 00:41 | So let's cancel out of this, and since I already have my file open
I'm just going to click the Jump to ImageReady button to open this
| | 00:48 | up in ImageReady CS2.
| | 00:49 | The first thing that's different is that
we have these tabs up here at the top.
| | 00:54 | We have Original, Optimized, 2- Up, and 4- Up, and these work
exactly the same way as they did in the Save For Web window,
| | 01:01 | it's just that they happen to be properties of the document window.
| | 01:04 | If I click Optimized, I can see how the image looks when it's optimized.
| | 01:08 | If I choose 2-Up, my document window changes
so I can see my original and my optimized image.
| | 01:15 | Now I have a few palates that I need to have
access to when I'm working to optimize my images.
| | 01:22 | I don't need my slice paletteand right now it's
just in the way, so I'm going to turn that off.
| | 01:25 | The two things that we need access to are our Optimized palette,
which are up here, and our Color Table palette, which is down here.
| | 01:35 | And for this exercise, we're not going to use our Color Table
palette because we're going to focus on optimizing the JPEG,
| | 01:42 | but it is important to understand where it is.
| | 01:44 | So here we have our Optimized palette, and you can see
if I click these, I get access to some more controls.
| | 01:50 | Right now this is set to GIF, which we know is not an effective
format for this particular image, so let's choose JPEG.
| | 01:58 | Now you can see I have different controls, or
different panels, in my Optimize palette menu.
| | 02:04 | But these should all look the same.
| | 02:06 | We have our Quality, we have our Amount, we have Blur, we have
Transparency, which existed in the Save For Web dialog box.
| | 02:15 | We haven't focused on this yet.
| | 02:16 | There's actually an entire movie dedicated to
working with transparent graphics on the web.
| | 02:20 | But for right now, just note that it's there.
| | 02:22 | We have all of these other options which also
existed as part of the Save For Web dialog box.
| | 02:28 | So we remember that when we optimize this in Photoshop, we
left the amount somewhere around the 55 to 60 mark, and again,
| | 02:36 | this functions as a slider just like it did in Photoshop CS2.
| | 02:39 | We can also adjust our blur.
| | 02:42 | Remember that we adjusted that to about
23 or 24 to make our image a little bit smaller.
| | 02:50 | And there we go.
| | 02:52 | Now we've optimized our file.
| | 02:54 | Now if I want to make any changes to this file, it's important
to go back to the original tab, otherwise every time you make
| | 03:00 | and editing change it's going to try and update the preview, and it
just takes forever, so you want to make sure when you're editing,
| | 03:05 | you go back to Original.
| | 03:07 | Remember that we went into our Adjustment menu, Image Adjustment,
Hue Saturation, we pulled out some of our saturation too,
| | 03:14 | when we worked with this, which I'm going to do here.
| | 03:17 | That's probably too much.
| | 03:18 | We're just going to take it down to maybe 17, and click OK.
| | 03:22 | I can also adjust my contrast from ImageReady.
| | 03:26 | Image, Adjustments, Brightness/Contrast.
| | 03:29 | Now let's just pull the contrast down a little bit.
| | 03:32 | There we go.
| | 03:33 | Now if we go into our 2- Up tab, you can see that we've been able
to reduce our file size, and we still have a nicely optimized image.
| | 03:41 | So, many of the features that we worked
with in Photoshop CS2 also exist here.
| | 03:46 | Now we don't have an alpha channel in this file, but I do want to
point out that the "Use Channel to Modify Quality" setting is the same.
| | 03:54 | We have the Modify Quality setting dialog box, which
we learned about earlier in this movie training.
| | 03:59 | So all the options are here.
| | 04:01 | The main difference comes when we want to save our file.
| | 04:05 | We go up to the File menu.
| | 04:06 | You see that we have: Save, Save As, Save Optimized, and Save Optimized As.
| | 04:10 | If I choose Save As, all I can do is basically save this as a .psd file.
| | 04:16 | Let's click cancel.
| | 04:18 | If I want to save the optimized file, I need to go File, Save Optimized
As, and this is going to allow me to save it in whichever file format
| | 04:27 | that I had specified here in the Optimized palette.
| | 04:29 | In this case it's saved as a JPEG.
| | 04:32 | Let's save this to our desktop, and I'm going to click Save.
| | 04:35 | I'm just going to return this to the Original tab and
go to my desktop. There we have our candles.jpg file,
| | 04:45 | which I just opened up in ImageReady
CS2 so that we can compare our two files.
| | 04:50 | So that's the process for optimizing and saving JPEGs in ImageReady CS2.
| | 04:54 | Next up we'll take a look at the process for
optimizing and saving GIFs in ImageReady CS2.
| | Collapse this transcript |
| Optimizing GIFs in ImageReady CS2| 00:00 | >>Next we're going to take a look at GIF optimization in ImageReady CS2,
and basically all the controls that you saw in Photoshop CS2 exist here
| | 00:09 | in ImageReady CS2, just in slightly different places.
| | 00:12 | You can see here I have my Optimized palette
open and I have all the panels expanded.
| | 00:17 | I also have my color table palette here.
| | 00:19 | And that's basically allowing me to take a
look at all the colors that are in my image.
| | 00:24 | So I'm going to click the Optimized tab and
we're going to start with this chai.psd file.
| | 00:29 | And just like in Photoshop, we're just slowly going to decrease
the number of colors until we get something that we're happy with.
| | 00:37 | Now obviously going down to 8 is too little, but I want to point out that
the locking feature works exactly the same as it did in Photoshop CS2.
| | 00:46 | Let's go back to 16.
| | 00:48 | What we're going to do is grab the Eyedropper tool from the toolbox.
| | 00:53 | We're going to sample color from the "H" so we get that nice blue color.
| | 00:57 | You can see it's automatically selected here in our Color Table palette.
| | 01:00 | And there's a Lock icon down here at the bottom of the color
table palette, so I'm going to click that, so that it locks it.
| | 01:05 | Now when I go to 8, you can see that it maintains that particular color.
| | 01:09 | Let's set this back to 64.
| | 01:13 | Just like in Photoshop CS2, I have a number of
different color reduction palettes to choose from,
| | 01:18 | and basically I can just choose whichever
one is going to yield the best file size.
| | 01:25 | In this case, I think Adaptive works the best.
| | 01:27 | Here you can see the readout of our file size.
| | 01:31 | I can also adjust how much Diffusion I want.
| | 01:34 | Right now it's set to zero.
| | 01:36 | I could set it to 100 but you could see it negatively
affects our file size, so we'll leave that as it is.
| | 01:42 | And basically all the other options function exactly the same way.
| | 01:45 | Let's take a look at our decaf image, the one that had this alpha channel.
| | 01:50 | Well, even though Image Ready CS2 doesn't support the use of
alpha channels for editing, it does support it for optimizing.
| | 01:57 | Let's take a look at that.
| | 01:59 | Let's reduce our colors back to 64, which is what we used in Photoshop CS2.
| | 02:03 | You can see we have the Alpha Channel button
right here beside the Color Reduction palette.
| | 02:08 | I'm going to turn on all vector-based shape layers,
and you can see that re-weights our color table.
| | 02:15 | I'll also turn on the all text layers to re-weight the color table again.
| | 02:19 | Now we're going to click OK.
| | 02:21 | Now you can see that I have re-weighted the color table so that it's
more in favor of the content in our swirl and in our text layers.
| | 02:28 | You can see I also have the option to modify the dither setting with an
alpha channel, and I also have the option to modify the lossy setting
| | 02:37 | with an alpha channel so let's do that.
| | 02:40 | So let's select our vector-based shape layer, and our type shaped
layers, and we'll decrease the maximum down to 25 just as we did
| | 02:46 | in Photoshop CS2 and click OK.
| | 02:50 | There we go.
| | 02:51 | We can also decrease our diffusion, I believe in
Photoshop CS2 we set this in and around the 50 mark.
| | 02:57 | That looks good here as well, and gives us a nice small file size.
| | 03:01 | So as you can see the process for optimizing is exactly the
same, although the controls are in a slightly different place;
| | 03:07 | they're in the Optimized palette and the Color Table palette.
| | 03:09 | They work identically in ImageReady CS2 as they did in Photoshop CS2.
| | 03:13 | Let's take a look at how to actually save this optimized file.
| | 03:19 | We know from the last movie that if we choose File, Save
As, it's only going to allow us to save it as a PSD.
| | 03:25 | Let's cancel out of that and choose File, Save Optimized As.
| | 03:29 | Now you can see it's picking up the GIF extension because it
knows, based on the format selected here in the Format popup menu,
| | 03:35 | that this is being optimized as a GIF.
| | 03:37 | I'm just going to put this on my desktop, and click Save.
| | 03:41 | Now this is recognizing that we already have a file saved
there, and that's one that I saved in Photoshop CS2.
| | 03:47 | So it's asking me if I want to replace
it, and yes I do, so let's click Replace.
| | 03:53 | Now let's go ahead and open our decaf.gif file, and we'll just put these
two files side by side, and you can see that here we have the original,
| | 04:02 | and here we have the optimized GIF.
| | 04:04 | So you can see that the process works very similar
in ImageReady CS2 as it did in Photoshop CS2.
| | Collapse this transcript |
|
|
7. Creating Web BackgroundsUnderstanding Web Backgrounds| 00:01 | >>In this chapter of movies we're going to take a look at the process
for creating background images in Photoshop CS2 and ImageReady CS2.
| | 00:09 | Now, first of all, let's talk about a few design
considerations when you're creating backgrounds.
| | 00:13 | You want to be careful that you try not
to use colors that have a lot of contrast.
| | 00:18 | Even the one that I have shown right here there's quite a
bit of contrast between that leaf and the white background.
| | 00:25 | If I were going to use this on the Web, I would probably de-saturate
those leaves a little bit further, a nicer smooth transition.
| | 00:32 | But I left it this way for a reason, and that is because I want to talk
about what you should do with your type over top of background images.
| | 00:39 | In this case you can see that the easiest type to read is the dark type,
so if you're creating a light background that's made up of light colors
| | 00:46 | or tints, you want to stick to dark type.
| | 00:49 | If you're using a dark background, you obviously want to stick to
light type because obviously in this case, that's the easiest to read.
| | 00:58 | Now, background images are basically one image that
gets repeated across the background multiple times.
| | 01:06 | Here's an example.
| | 01:07 | Here we have this very small tile that we created in ImageReady CS2.
| | 01:11 | When we view that in a web browser as a background image, what you can
see is it repeats that tile over and over inside of our web browser.
| | 01:20 | Now because it's a tile and it repeats, you need to take a
couple of things into consideration during your design process.
| | 01:26 | First of all you need to think about the size, because
obviously the size is going to impact how many times it repeats.
| | 01:33 | Here we have a small tile, and you can see it's repeating many times.
| | 01:36 | Here we have a medium tile, and you can see it's repeating less.
| | 01:40 | Here we have a large tile and you can see that it's repeating even less.
| | 01:44 | The critical thing when you're designing background images is
you want to make sure that your background is a background.
| | 01:49 | It's not there to be the main focal point of your website.
| | 01:53 | This is really not an example of an effective background.
| | 01:56 | I've created it really to show you how the whole tiling process works.
| | 02:00 | But there's two main problems with these
three backgrounds that I've created.
| | 02:04 | First of all, they're way too distracting. The reason
for that is that there is too much contrast in colors,
| | 02:11 | in that it's going to be very difficult for me to find a color of type to
go over top of this, if we go back to this image, even though the light,
| | 02:18 | as much as you can read it, you're totally distracted
by whatever else is happening on the screen.
| | 02:23 | So, the color choices are one issue.
| | 02:25 | We want to make sure that there are a little bit of a closer match,
so that they're colors that blend together a little bit better.
| | 02:32 | The second thing is, that it's just such a distracting pattern
that no matter what I put over top of this, it's going to be very,
| | 02:39 | very difficult for me to draw attention to anything else in the image.
| | 02:44 | This is kind of the equivalent of seventies wall paper.
You know, it's had it's time, it's time to move on.
| | 02:49 | So in this chapter we're going to focus on some techniques
that you can use to create some nice looking backgrounds.
| | 02:56 | Now, in these movies I want to point out that sometimes I've had to use
colors that are more saturated than what I would use in the real world,
| | 03:02 | and that's just so that you, the viewer, can see what I'm doing on screen.
| | 03:05 | But if you're going to learn anything from this movie, make
sure that you use colors that don't have high contrast,
| | 03:11 | and make sure that you create a pattern that is not going to
distract your viewers from the main focal point of the image.
| | 03:19 | So those are the two things that you need to
remember when you're creating backgrounds.
| | 03:22 | So let's move on and take a look at some different techniques and
different features that you can use to create web backgrounds.
| | Collapse this transcript |
| Defining and Previewing Web Backgrounds| 00:01 | >>Now that we have an idea of what web backgrounds are all about,
let's take a look at how to define images as web backgrounds.
| | 00:09 | So here I have a file open, and I'm just going to click the Preview
in Default Browser button over here on my Toolbox in ImageReady CS2.
| | 00:17 | And you can see that what happens is it basically
just shows the one copy of this image in here.
| | 00:24 | It's not repeating, it's not tiling, and
it's not showing me that it's a background.
| | 00:27 | It's just a single image on top of a essentially white background here.
| | 00:31 | So what we need to do is we need to give ImageReady CS2 some information
and say, hey, this isn't just an image, I want it to be a background image.
| | 00:39 | Make it repeat; make it tile.
| | 00:41 | So that's what we need to do.
| | 00:43 | To do that we need to go to the File menu
and choose Output Settings, Background.
| | 00:49 | And that's going to open up the Background
dialogue, or the Output Settings dialog box.
| | 00:53 | What I can do is instead of setting this as an image, I'm
going to set this as Background, and I'm going to click OK.
| | 01:00 | Now when I click the Preview in Default Browser Button you can see that
it tiles infinitely based on that image I have open in Photoshop CS2.
| | 01:09 | So that's the process for setting that up as a background.
| | 01:12 | Now there's also an easier way rather
than just going to File, Output Settings.
| | 01:16 | There's a little menu over here that lets you choose background
image, and it just basically lets you specify it that way,
| | 01:23 | and I find that that's an easier way to do
that. I can just click and go "Yup,
| | 01:28 | make that a background image", then preview it, and it's all set up.
| | 01:32 | So that's the process of defining it and previewing it.
| | 01:35 | In the next movie we'll take a look at how
to optimize and save background images.
| | Collapse this transcript |
| Optimizing and Saving Web Backgrounds| 00:00 | >>After you've gone through and defined your image as a background image,
and we know that we can check that easily by clicking this popup menu
| | 00:08 | and making sure it says "Background Image"
here, it's very easy to optimize and save it.
| | 00:13 | So the first thing we need to do is click the Optimize tab, go over to our
Optimize palette, we know that probably the best choice for this is going
| | 00:19 | to be a GIF, and we can obviously reduce this to less that 256 colors.
| | 00:25 | I'm going to try 16; you can see that that gives us a pretty good quality.
| | 00:29 | Let's try it down to 8, and it still looks pretty much fine.
| | 00:32 | And let's just try this, actually, on
4 and see what happens when we go down.
| | 00:36 | We actually haven't really lost too much quality by
going all the way down to 4 colors, so that's fine.
| | 00:40 | Now I'm just going to experiment with the different Color
Reduction palettes and see what yields the best result.
| | 00:46 | I think Selective gave us the smallest file size.
| | 00:49 | I have my dither set to 100 percent.
| | 00:51 | I'm going to take that down to zero.
| | 00:53 | You can see that that really didn't affect our file size too
much, but we really don't need any dither in this particular example.
| | 01:02 | So what I have right now is a file that is 1k, and what that file is
going to do is basically tile the entire background of our website.
| | 01:11 | And you can see that for very small file savings,
we're going to end up with maximum results.
| | 01:16 | So now we want to actually save this file.
| | 01:19 | Again we want to make sure that this is specified as a Background Image.
| | 01:22 | I'm going to go to my File menu, I'm going to choose Save Optimized As.
| | 01:26 | I'm going to go to my desktop and create a new folder
and I'm going to call this "leaf".
| | 01:35 | You can see that it's now saving javacoleaf.html and you might be thinking
"Well, why is this saving HTML file, because I know that it's supposed
| | 01:42 | to save it based on the format here".
| | 01:44 | What's required when we actually save this is we need the image
that's going to tile, and we need the HTML code to actually make this
| | 01:52 | into a repeating tile.
| | 01:54 | So what we need to do, is down here in the Format popup
menu, we need to save both the images and the HTML.
| | 01:59 | Now I'm going to go ahead and click Save.
| | 02:02 | And if we go to our desktop you can see we have this leaf folder.
| | 02:07 | If I open it up I have the javacoleaf.html
file and we have this images folder.
| | 02:11 | If we go in here we see our javacoleaf image, and
if I double-click, it opens up in ImageReady,
| | 02:16 | and there's our little leaf that we optimized as the single image.
| | 02:20 | Now what we want is for it to actually tile
across the page and become a background image.
| | 02:24 | Let's take a look at our HTML file.
| | 02:27 | There it is.
| | 02:28 | What's happening is that we've created code that says "Please use this
image as a background tile and repeat it as big as the web browser happens
| | 02:36 | to be", and that's exactly what it's doing.
| | 02:38 | The code in the HTML file is automatically looking to the image
in that images folder and using it to tile across this webpage.
| | 02:46 | So that's the process for saving and optimizing
background images in ImageReady CS2.
| | Collapse this transcript |
| Creating Symmetrical Web Backgrounds| 00:00 | >>Next we're going to take a look at another
technique for creating web backgrounds,
| | 00:03 | and that's using photographs to create a seamless tiled background.
| | 00:06 | Here you can see I have this tealeaves.PSD image open and I'm
going to click my Optimize tab and go over to my Optimize palette
| | 00:15 | and set the quality up to High.
| | 00:17 | I'm going to go over here to my popup menu and choose
Background Image, so I can specify this as a background.
| | 00:25 | Let's see what happens if we preview this in a web browser.
| | 00:28 | It looks pretty ugly!
| | 00:30 | It's got these little tiles all lined up side by side.
| | 00:33 | When we worked with the GIF files previously, the flat graphic file, that
was fine, but for something like this, the result is really unattractive.
| | 00:41 | So let's take a look at how we can fix that.
| | 00:44 | I'm going to go to Filter, Other, Tilemaker, and what I'm going to do is
set this on Blend Edges, leave the width at the default of 10 percent...
| | 00:53 | you can experiment with going higher but you may not like the results...
| | 00:56 | and we're going to choose Resize Tile to
Fill Image, and I'm going to click OK.
| | 01:00 | You can see that it kind of zoomed in and the edges are a little
bit blurry and you might be thinking, "Well, what's that going to do,
| | 01:07 | and how's that going to change things?"
| | 01:08 | Well, let's take a look.
| | 01:10 | Now you can see that, yes, there is a tile that's
repeating, but all of the edges blend in together.
| | 01:15 | What Tilemaker has done is looked at the edges and figured
out ways for them to seamlessly blend from one to the next.
| | 01:22 | So this is a really cool filter that you can
use with photographs to create seamless tiles.
| | 01:28 | Now, earlier in this training we talked about some really good
design decisions when we're working with background images.
| | 01:34 | If you were to use this as your background, I would say that that is a
bad background design decision, because there's nothing you can put on top
| | 01:41 | of this that you're going to be able to see.
| | 01:42 | You won't be able to see your type, and you won't be able to see any other
images, because the background is going to be screaming at the viewer
| | 01:49 | and saying, you know, look at me, look at me!
| | 01:52 | So there are a couple techniques I'm going
to show you for how you can fix this.
| | 01:55 | Let's click back on our Original tab and go back
to up to Image, Adjustments, Hue/Saturation.
| | 02:03 | I can de-saturate this and adjust the lightness a little bit higher so
that we don't have so much saturation and so much contrast in our image.
| | 02:17 | Click OK and take a look at what that looks like.
| | 02:21 | There you can see that we have a slightly better result.
| | 02:23 | Still a bit busy, but that's going to give you something that's
much easier to work with than what we started with originally.
| | 02:28 | I'm just going to choose Edit, Undo Adjustments,
so we can look at another technique.
| | 02:34 | In my Layer palette I'm going to click the New
Layer button, and it creates a layer on top.
| | 02:38 | I'm going to position that below.
| | 02:40 | I'm going to grab my Eyedropper Tool and I'm
going to sample some colors out of this image.
| | 02:46 | With my layer targeted, I'm going to press (Alt + Backspace),
or [Option + Backspace] on Windows, to fill that layer.
| | 02:53 | I'm going to click the top layer, the tea leaves layer, and
I'm going to reduce the opacity down to, say, 50 percent...
| | 02:58 | maybe a little bit lower, let's try that, around 31 percent.
| | 03:04 | And there you can see that I'm starting to
get into a more evenly colored background.
| | 03:09 | Let's take that down even a little bit lower, maybe down to 25 percent.
| | 03:12 | Now let's take a look at that in our browser.
| | 03:14 | Make sure we click the Optimize tab first to see how it's
looking, it looks good, and let's take a look at that.
| | 03:20 | So that's giving you something that's more of a solid
color, that just has a little bit of texture to it.
| | 03:25 | I still personally find this a little bit too busy, but those are
a couple of techniques that you can work with if you really want
| | 03:30 | to use something photographic as your background.
| | 03:33 | Now if I want to save this all I have to do is go to my File menu, choose
Save Optimized As, go to my desktop, create a new folder called "leaves",
| | 03:45 | Save my tealeaves.HTML file, making sure I
have HTML and Images selected here, and click Save.
| | 03:52 | Go to our desktop, there's our leaves folder.
| | 03:55 | If we open up the images, there's our tealeaves.JPG
file that we optimized, and there it is on our web background.
| | 04:02 | So you can see that the Tilemaker is a useful feature if you want
to take a photograph and use it as a seamless background tile.
| | Collapse this transcript |
| Creating Seamless Web Backgrounds from Photographs| 00:01 | >>Now that we have an idea of how background images work, how to
define them, how to preview them, and how to save and optimize them,
| | 00:08 | let's take a look at some different techniques that you can
use to create some effective backgrounds in ImageReady CS2.
| | 00:13 | Here we have a little leaf image, and what we're going to
do is use this to create a symmetrical background image.
| | 00:19 | I'm going to go to the File menu and choose New, and I'm going to
create a new file that is 200 by 200 pixels. I'm going to click OK,
| | 00:28 | and I want to make sure that the contents are white.
| | 00:31 | So here we have our image.
| | 00:34 | The next thing I'm going to do is I'm going to select the contents of
our javaco_leaf_small, and I can do this by grabbing my Marquee Tool and clicking
| | 00:41 | and dragging, or by going to my Select menu and choosing Select All.
| | 00:45 | The next thing I'm going to do is choose Edit, Copy.
| | 00:49 | I'm going to click on the untitled image that I've just created.
| | 00:53 | I'm going to choose Edit, Paste, and you
can see that that centers it in the middle.
| | 00:59 | Then next thing I'm going to do is go up
to my Filter menu and choose Other, Offset.
| | 01:04 | I want to make sure that I have a hundred
specified here in horizontal and vertical.
| | 01:09 | What that does is that basically you can see it almost looks
like it's quartered that little image and put the quarters up there
| | 01:15 | into the four corners of this image, and that's the effect that I want.
| | 01:18 | So make sure that this is set to Wrap Around,
and you type a hundred and a hundred in here.
| | 01:23 | In my case, I had this set up this way
from the last time I used ImageReady CS2.
| | 01:27 | The settings are sticky so I didn't have to type them in,
but you will have to type them when you do this on your own.
| | 01:31 | So I'm going to click OK.
| | 01:34 | So now we have those quartered in the corners.
| | 01:36 | I'm going to choose Edit, Paste.
| | 01:38 | I'm going to paste another one right in here.
| | 01:41 | Now I want to define this as a background image, and we know
we can do that by going up here and choosing Background Image.
| | 01:48 | Now what I can do is preview this in our browser
and take a look at what kind of effect this creates.
| | 01:54 | There we go.
| | 01:55 | Now, I'm not really crazy about the optimization settings I have.
| | 01:58 | I'm going to fix that in just a second, but you
can see that this creates a really nice effect.
| | 02:03 | It creates a really nice, symmetrical background.
| | 02:07 | A couple of things I'm going to do here, as we talked about earlier, you
want to make sure that you don't have any harsh variations in your color,
| | 02:14 | because what's going to happen is it's going to
be very difficult to put text on top of this.
| | 02:18 | So what I'm just going to do is I'm going to drop my opacity
down to about twenty five percent for both of these layers.
| | 02:25 | You can see one layer has the four corners;
one layer has the little leaf in the middle.
| | 02:33 | So I'm just going to drop that down to about twenty five percent,
then click my Optimize tab, and I'm just going to increase the color,
| | 02:40 | the number of colors, up to eight, and sort of smooth out those edges.
| | 02:44 | And now let's click our Preview in Safari button.
| | 02:47 | That creates something that's a little bit more workable.
| | 02:50 | This way you can use this, because we've dropped the opacity to put
type overtop of it, and you should be able to see it quite well.
| | 02:56 | You can see here that this is the piece of HTML code right here
that's going to tell our browser to use the untitled GIF file,
| | 03:07 | and if we save that as we did in the last
movie, we can accomplish the same thing.
| | 03:13 | So let's choose File, Save, Optimized As, and go to our desktop.
We create a new folder and I'm going to call it "Leaf, small",
| | 03:22 | and I'm going to click Create, and then I'm
just going to rename this to "leaf_small".
| | 03:30 | Now the reason I have to type in a name here is because
right now I actually haven't saved my original PSD file,
| | 03:35 | so it's reading as "Untitled 1", which we don't want.
| | 03:39 | We want to make sure that we save our HTML
and images, and we're going to click Save.
| | 03:44 | Now if we go to our desktop, here's our leaf_small
file; here's our HTML file; here's our optimized GIF.
| | 03:50 | Let's double-click this. And there is our web background.
| | 03:54 | So you can see that the offset filter in ImageReady CS2 creates
a really nice way to create a perfectly symmetrical background.
| | 04:02 | Next let's take a look at how we can create
some seamless backgrounds from photographs.
| | Collapse this transcript |
| Creating Full-Screen Backgrounds| 00:01 | >>So far we've talked about creating web
backgrounds by creating tiled images.
| | 00:05 | We've worked basically with small tiles.
| | 00:08 | So you might be thinking, well maybe I can create just 1
big full screen background, and then I don't have to worry
| | 00:14 | about images repeating over and over again.
| | 00:17 | Well, that's partially true.
| | 00:18 | But you have to remember that every person is going to
have a slightly different resolution on their computer.
| | 00:23 | Some people may use 1024 by 768, some people may use 800 by 600,
others may use something higher, something different, whatever.
| | 00:32 | So, your screen resolution is going to dictate how many times something
tiles because it's going to make, ultimately, your screen size larger,
| | 00:40 | or your viewable area larger.
| | 00:42 | So, when you're designing a full screen
background it certainly something that's possible.
| | 00:46 | But what you want to keep in mind is that you should always design
for the largest possible viewable area and then take a look at how
| | 00:53 | at how it will look at the smaller sizes.
| | 00:55 | So here I have a file open called leaves.PSD.
| | 00:57 | And I'm going to choose File, Open, and in my Backgrounds
folder I'm going to open this folder called Browser Sizes.
| | 01:05 | What this is is just something we've put together here at
Lynda.com to help us see how our website is going to look
| | 01:11 | at different screen resolutions.
| | 01:14 | In my Layers palette I have Screen Resolution, and
I'm going to click and drag that onto my Leaves file,
| | 01:19 | and then just go back to the Browser Sizes folder and close that up.
| | 01:24 | Now you can see that screen resolution went in right here above
my background, so I'm going to click and drag that up to the top
| | 01:30 | to make it the top layer, so I can see through it.
| | 01:34 | I'm going to click up here to the Align Layer
Top Edges, and then click the Align Layer Horizontal,
| | 01:41 | and that's going to position it perfectly in the center.
| | 01:44 | So now I can take a look at this and see, OK, at 1024 by 768,
this is what my users are going to see as their background.
| | 01:52 | At 800 by 600 this is what my users are going to see as their background.
| | 01:55 | At 640 by 480 this is what my users are going to see as their background.
| | 02:00 | And ultimately you have to be happy with that.
| | 02:02 | You have to visualize exactly how your web background is
going to change based on different sizes in a web browser.
| | 02:10 | Let's take a look at this when we actually save it.
| | 02:13 | Let's turn off the visibility of screen resolutions.
| | 02:16 | I'm going to make this into a background image.
| | 02:20 | And in our Optimize palette let's choose GIF, set the colors down to 2...
| | 02:24 | actually maybe we'll set them to 4 so we don't have a jagged edge here...
| | 02:28 | and choose File, Save Optimized As, go to our desktop,
create a new folder called "leaves", and make sure we have HTML
| | 02:41 | and images selected, and click Save.
| | 02:44 | Now go into the leaves folder and open up here.
| | 02:46 | Here you can see that I actually can't see most of
this unless I scroll all the way over to truly expand.
| | 02:55 | Now, I'm running 1024 by 768 as my screen resolution.
| | 02:58 | So now I can see that entire background.
| | 03:00 | But imagine that a lot of people don't open up their browsers that big.
| | 03:03 | They may only open it up to this size, or to this size, so you
ultimately have to be happy with how your composition is going to look
| | 03:11 | at different browser sizes.
| | 03:12 | The other thing to consider is if the screen resolution is set
to something larger than 1024 by 768, this image will still tile,
| | 03:20 | because the maximum size of this image is 1024 by 768.
| | 03:24 | So that's something to keep in mind as you're designing.
| | 03:27 | You may want to design something that's larger than 1024 by 768.
| | 03:31 | So let's close out of this and return back to ImageReady CS2.
| | 03:35 | So as you can see, you can create full screen background images but what
you want to do is be very careful and consider how it's going to look
| | 03:42 | at different screen resolutions.
| | 03:44 | I encourage you to use this screen tesolutions file we've
created for you, and overlay it over top of your background
| | 03:50 | so that you can really see what your users are
going to see when view it at different resolutions.
| | Collapse this transcript |
| Using Directional Tiles| 00:00 | >>Next we're going to take a look at a really fun effect and that's
the ability to create a striped background with a very small tile.
| | 00:07 | You can see here that I have this file that's very small, it's
very narrow, and it's got a series of little stripes on it,
| | 00:14 | and what will be really cool is when we look at this tiled
in a web browsers, so lets first get our optimization set up.
| | 00:20 | I'm going to choose Optimized, and let's set this down
to say eight colors, which is still looking pretty good,
| | 00:26 | and you can see we have a really small file.
| | 00:28 | It's only 708 bytes, and now let's specify it as a
background image and let's click Preview In Safari,
| | 00:37 | or Preview in Default Browser, and see the results.
| | 00:40 | You can see that we have this really, funky striped background and
it's basically taking that really tiny tile and just tiling it over
| | 00:46 | and over again to create this seamless, striped background.
| | 00:49 | If I want to have horizontal stripes, I can just build
my file so that's vertical instead of horizontal.
| | 00:54 | I'm going to go to the Image menu and
choose Rotate Canvas 90 degrees clockwise.
| | 00:59 | Now we have this horizontal.
| | 01:01 | Now let's take a look at the result.
| | 01:04 | Click the Preview in Default Browser button, and you can see
that we have this really cool horizontal striped background,
| | 01:10 | so that's a really easy way that you can create a
very fun effect, so let's go ahead and save this.
| | 01:15 | I'm going to choose File, Save Optimized As, and I'm going to go
to my desktop and I'm going to create a new folder called "Stripes",
| | 01:22 | and I'm going to click Create, and making sure I have HTML and images
selected here in the Format popup menu, I'm going to click Save,
| | 01:32 | and now let's go to our desktop and take a look at what we created.
| | 01:35 | We'll open up our stripes.HTML file, and you can see we have this
really awesome stripped background, so as I've re-iterated in other movies,
| | 01:44 | it's important to think about your color choices.
| | 01:46 | The ones that I've selected here are probably too intense,
and too bright to do something really effective with,
| | 01:51 | but by experimenting with different color and by experimenting with
different textures, you can probably create something really effective
| | 01:57 | with this striped tiled background.
| | Collapse this transcript |
| Defining Web Backgrounds in Photoshop CS2| 00:01 | >>So far in this chapter we've focused on how
to create background images in ImageReady CS2.
| | 00:06 | Before we wrap up with this chapter, I just want to show
you the process of defining a background in Photoshop CS2,
| | 00:11 | should you ever need to work in Photoshop CS2, instead of ImageReady CS2.
| | 00:15 | To specify a background, we need to go to
the file browser and choose Save For Web.
| | 00:21 | In the Save For Web dialog box, we're going to go up to
this little popup menu and choose Edit Output Settings,
| | 00:27 | and up here in this little popup menu you can see that we have a
few options, one of them being background. When I choose that,
| | 00:34 | you can see that this interface looks pretty much
identical to the one that we looked at in ImageReady CS2.
| | 00:38 | All I have to do is choose Background, click OK, and
now this is going to be specified as a background.
| | 00:46 | The last thing we are going to do is Optimize, so I'm just go
and choose a slightly lower color here, in my Colors popup menu.
| | 00:53 | I'm going to take this down to eight, and let's take our dither down
to zero, because we don't really need any in this particular case,
| | 01:00 | and let's just work with our Color Reduction palettes
and see what's going to yield the smallest file size.
| | 01:06 | In this case Adaptive looks like it's going to give us the best result.
| | 01:10 | I'm also going to turn off the Transparency check
box, because there's no transparency in this file.
| | 01:15 | Now, all I need to do is click Save.
| | 01:17 | It's going to open my Saved Optimized As dialog box, and I'm going to
go to my desktop and create a new folder, and I'm going to call it "Leaf"
| | 01:27 | and I click Create, and what I want to do is
choose HTML and images from my Format popup menu.
| | 01:37 | This is a little bit different.
| | 01:38 | In ImageRead,y it automatically defaulted to HTML and images.
| | 01:41 | In Photoshop, you can see it was just on images
only, so you want to choose HTML and images.
| | 01:46 | Now you can see that our file name changes to an HTML file, and I can
click Save. If I go to my desktop and open up that folder,
| | 01:56 | this looks pretty much identical to what we're used to
seeing in ImageReady CS2. So if I double click my HTML file,
| | 02:03 | you can see that it's tiling across the entire web browser
and it's creating a very effective background image.
| | 02:08 | So that's how you can create a background image in Photoshop CS2.
| | Collapse this transcript |
|
|
8. Creating NavigationCreating a Horizontal Navigation Bar| 00:01 | >>In this next chapter of movies we're going to talk about how to create
some different types of navigation in PhotoShop CS2 and ImageReady CS2.
| | 00:08 | In this chapter we're just going to focus exclusively on using the
type tools and shape tools to create some navigational elements,
| | 00:15 | and later on in this movie, training specifically in the rollovers
chapter, we'll take a look at how to hook those up and make them
| | 00:20 | into actual working navigation bars and buttons.
| | 00:25 | So let's start in this exercise by creating a really simple navigation bar.
| | 00:29 | I'm going to start by choosing my Rectangle Tool here in the Toolbox, and
I'm going to click and drag and just create a long rectangle, just like so.
| | 00:39 | And you can see over here in our Layers palette, we have a Shape layer.
| | 00:43 | That's something we haven't worked with yet in PhotoShop CS2.
| | 00:45 | You can see that there's a few components that make up our Shape layers.
| | 00:49 | We have this Vector Mask thumbnail.
| | 00:51 | That's what gives us the actual shape.
| | 00:53 | Our shape is defined by a path.
| | 00:55 | You can kind of think of it as a coloring book picture.
| | 00:59 | You know, you have this thick path and
that's what gives you your actual shape.
| | 01:02 | Then you have your Fill layer, which is
what you would color in between the lines.
| | 01:06 | Then you have this Link icon, and it links these 2 items together.
| | 01:10 | So those are the components that make up a Shape layer.
| | 01:13 | I'm just going to grab my Move Tool and I'm
going to click and drag and re-position it here.
| | 01:19 | Now I'm going to grab my Logo layer and I'm going to click and drag
and I'm going to re-position it so that they're nicely aligned.
| | 01:25 | You can see I have my Smart Guides turned
on, and now they're nicely aligned.
| | 01:30 | Now, I'm not crazy about this color for the navigation bar.
| | 01:33 | I think it's too dark.
| | 01:34 | So I can easily change that by double clicking the Fill layer
thumbnail, and I'm just going to choose a nice grey-ish blue here.
| | 01:43 | That looks good.
| | 01:45 | And I'm going to click OK.
| | 01:46 | Next, what we need to do is add some type to our navigation bar.
| | 01:52 | So I'm going to grab my Type Tool, I'm going to put my cursor down.
| | 01:56 | And I have my Type already set up up here.
| | 01:58 | It's set to Arial, Regular, 15 points, Smooth.
| | 02:02 | That's the way that I'd like it to be set up.
| | 02:05 | You can see that I still have this
nice dark blue that I worked with before.
| | 02:09 | If you'd like to choose another color, you can go ahead and do that.
| | 02:12 | I'm just going to type the word "Products"
| | 02:15 | and I'm going to click the Commit Current Edits
button on the Toolbox to accept my change.
| | 02:21 | Next, I'm going to put my cursor down.
| | 02:24 | I want to create another called "About Us".
| | 02:28 | Again, I'll hit Commit Current Edits.
| | 02:30 | And we'll create our third one called "Our Stores".
| | 02:35 | Commit Current Edits.
| | 02:38 | I'm going to last type "Contact Us" and Commit Current Edits.
| | 02:46 | So now I'm going to grab my Move Tool and I'm going to start by choosing my
Products layer here and clicking and dragging to position this on screen.
| | 02:56 | What I want to do is basically make sure
that I'm nicely centered with this rectangle.
| | 03:00 | The easiest way to do that is to hold down
my Shift key and choose the Shape layer.
| | 03:06 | I'm going to choose this option here. It's called Align Vertical Centers
and that's going to make sure that it's aligned nicely on this rectangle.
| | 03:12 | Now what I'm going to do is choose my Products layer and
hold down my Shift key and choose the Contact Us layer,
| | 03:19 | and I'm going to choose Align Vertical
Centers, and that's going to align them.
| | 03:25 | Now you can see that it's really hard to tell that this About Us layer is a
little bit below the Products layer, and what I think would look better is
| | 03:34 | if we aligned them by their top edges.
| | 03:36 | That's visually going to make sure that the tops of these letters are
all aligned, and I think that actually looks a little bit more cohesive.
| | 03:43 | The next thing I want to do is I want to make sure
that the space in between all of these is accurate.
| | 03:48 | So what I'm going to do is I'm going to click the Distribute
Horizontal Centers button, and you can see that that aligns them all
| | 03:55 | so that they all have equal spacing in between them.
| | 03:58 | Next, what I want to do is create a few little dividing lines between them.
| | 04:03 | That's a technique you'll see often in web design these days.
| | 04:06 | So, I'm going to grab my Type Tool and I'm just going to put
it in between here, and I'm going to type this little line.
| | 04:15 | This key is usually shared with the backslash key, and if you
press Shift, you'll get this little line instead of the backslash.
| | 04:22 | Accept the change.
| | 04:24 | I'm just going to do the same over here.
| | 04:27 | Accept my change...
| | 04:29 | Let's just do 1 last one.
| | 04:32 | That looks good.
| | 04:34 | I'm going to commit my change here and then I'm going to
drag these 3 so that they are actually in the Layers palette,
| | 04:41 | in a stacking order of what they appear here on my navigation bar.
| | 04:45 | I'm going to press Shift and Select to multiple select
all of the layers in the Layers palette.
| | 04:50 | I'm going to grab my Move Tool and I'm going to click the Align Top Edges.
| | 04:54 | Then I'm going to make sure that we have them all
distributed, so I'm going to Distribute Vertical Centers.
| | 05:03 | Then I'm going to Distribute Horizontal Centers right here, which
is going to make sure that this spacing is all even in between.
| | 05:10 | And now with them all selected, I'm going to click and drag
and re-position them here so that they're in the middle.
| | 05:17 | That's about right.
| | 05:21 | Good. So now we have them all set up.
| | 05:25 | I find these dividing lines a little bit too dark.
| | 05:27 | I don't want them to be as prominent as what they are.
| | 05:30 | So I'm going to double click the Type layer, and I'm going to
click the color swatch and set that to a slightly lighter color.
| | 05:38 | I'm going to make note of this RGB value: 57, 110, 110.
| | 05:45 | I'm going to match the same color here.
| | 05:48 | So, 57, 110, 110.
| | 05:53 | Let's do the last one.
| | 05:55 | Click the color swatch.
| | 05:57 | 57, 110, 110, and click OK.
| | 06:02 | Now let's take a look at this.
| | 06:03 | We've created a really nice little cavigation
bar, and that was pretty easy.
| | 06:08 | Now, you might be wondering why I went to the trouble
of putting this onto all separate Text layers.
| | 06:13 | That's going to all make sense when we work with rollovers because
there will be times when you want to change the Type properties,
| | 06:20 | and you'll find it easier to have all of these
on individual layers, rather than all on 1.
| | 06:24 | That will make sense in the rollovers chapter.
| | 06:26 | But for right now you can set up your navigation bar just like this.
| | Collapse this transcript |
| Creating Elliptical Buttons| 00:01 | >>Next we're going to take a look at how to create an elliptical
button, such as the one that you see here, in Photoshop CS2.
| | 00:07 | This is going to involve using the shape
tools, the type tools, and layer styles.
| | 00:12 | Let's take a look at how this button is constructed.
| | 00:14 | I'm going to open up the elliptical button layer group here,
and you can see that we have our "Products" Type layer,
| | 00:20 | then we have our vector-based Shape layer, and part of that
Shape layer contains two layer styles or layer effects.
| | 00:26 | We have the glow, and we have the stroke, so we need to take a
look at how to create those particular effects in Photoshop CS2.
| | 00:34 | I'm going to toss this elliptical button into the Trash, and
we're going to start out by grabbing our Ellipse Tool here.
| | 00:42 | We want to make sure that this is set to Shape Layers, and I'm
just going to click and drag, and create a nice little oval here,
| | 00:52 | and I want it to be green, the same color of green as what I have here,
so I'm going to double-click the color swatch or the Fill Layer thumbnail,
| | 00:59 | I'm going to position my cursor over the green
to sample the color, click OK to update that.
| | 01:07 | So that's great.
| | 01:07 | Now what we need to do is we need to add a couple of layer styles to this.
| | 01:11 | The first one we're going to add is going to be the stroke to the
outside, so I'm going to choose Stroke from the Layer Style popup menu.
| | 01:18 | It's going to open up this Layer Style dialog
box, and I can make some adjustments here.
| | 01:22 | I can increase and decrease the size, probably set
around three pixels, is about where I'd like this to be.
| | 01:28 | I can position it outside, I can position it inside, or I
can position it to be the center, so it splits the edges,
| | 01:35 | and I like it when it's centered like this.
| | 01:38 | I can change my blend mode.
| | 01:39 | I'm going to leave this set to Normal.
| | 01:41 | I can also change my opacity.
| | 01:44 | Now, I can choose to have this as a color, a gradient, or a pattern,
but for this one, it's obviously best as just a straight color.
| | 01:50 | Now we're going to change this color, because obviously this
red doesn't look too pretty on top of this green button.
| | 01:54 | So I'm going to click the color swatch, and I'm going to sample this light
gray from the "T" here, and I'm just going to darken it up a little bit.
| | 02:02 | I'm going to click OK, and now I'm going to click OK in
the Layer Style dialog box so that we can see what we have.
| | 02:08 | I'm just going to click the thumbnail here so that we can view what that
looks like without the layer mask, or without being able to see the path,
| | 02:17 | and that looks pretty good, so we'll turn that back on.
| | 02:20 | If we open up our Layer Effects little menu
here, we can see that we have our stroke applied.
| | 02:27 | Now what we're going to do is we're going to apply an inner shadow,
or an inner glow, rather, so I'm going to choose Inner Glow,
| | 02:37 | and what I want to do is just change this so that it's white.
| | 02:40 | So let's just make that a true white.
| | 02:44 | That opens the color picker dialog box.
| | 02:46 | We'll click OK, and I've got my opacity set as it is, and I want to
increase the size, because I want it to have a nice glow around the edges,
| | 02:57 | and you can experiment with these different
settings to see what result you like best.
| | 03:04 | I actually like this one here, where it's on a little bit of
a rounded slope rather than the flat one, and by doing that,
| | 03:12 | I want to decrease my size a little bit.
| | 03:16 | Also change the choke.
| | 03:18 | I like that set as it was, to zero, so this is a
really nice, soft inner glow that I've just created.
| | 03:24 | Now I'm going to click OK.
| | 03:25 | Let's switch to our Javaco logo.
| | 03:28 | So our button's looking pretty good.
| | 03:29 | Now what we need to do is add our text, so I'm going to
click my Shape layer to select it, and grab my Type Tool,
| | 03:35 | and I have this dark blue selected here, and I'm going to leave
it that way, put my cursor down, and I'm going to type "products,"
| | 03:43 | and then grab the Move Tool, and I'm just going to reposition that.
| | 03:49 | Just like so.
| | 03:50 | Now you can see, it's picking up the content from here and it's trying to
center it based on that, but I just want to center it based on this button,
| | 04:00 | just like that, and that looks quite good.
| | 04:03 | So that's how we can create an elliptical button in Photoshop
CS2, using our shapes, our type, and also using our inner glow
| | 04:11 | and stroke layer styles.
| | 04:13 | Next I'm going to show you one of the new features in Photoshop CS2,
which is smart objects, and we're going to do that to duplicate the rest
| | 04:19 | of the buttons for our web page.
| | Collapse this transcript |
| Editing Multiple Buttons with Smart Objects| 00:00 | >>In the last movie, we took a look at how to
create this elliptical button that we have here.
| | 00:05 | What we're going to do now is we're going to create
the other buttons that we would need for our Web page.
| | 00:11 | One way that we could do that would be to select our Shape layer,
go up to the Layers palettemenu, and choose Duplicate Layer.
| | 00:18 | And I could create another layer, click OK, grab my
move tool, and click and drag to create another layer.
| | 00:25 | That's one way I could do that, but if I wanted to make any
changes to that button - maybe I wanted to change the color,
| | 00:31 | maybe I want to slightly change the shape - what I would
have to do is edit every instance of this duplicated layer,
| | 00:37 | and especially when you get working with web pages that have maybe 6 or
8 buttons, then you're starting to take a lot of time to make changes.
| | 00:46 | Fortunately, Photoshop CS2 has a fantastic new feature called Smart
Objects, and you'll be able to see from this exercise how you can put it
| | 00:54 | to work when you're designing web buttons.
| | 00:57 | The most important thing when you're designing web buttons is that
they're all consistent, so that when you make a change to one,
| | 01:02 | you want the changes to be identical with the others,
so that's where smart objects can really help you out.
| | 01:07 | Let's take a look at how they work.
| | 01:08 | I'm going to go up to my Layers palette menu, and
I'm going to choose Group into New Smart Object.
| | 01:16 | You can see down here that there's a big change in my Layers palette.
| | 01:19 | You might be thinking, "Whoa, what happened to my vector-based Shape layer?
| | 01:22 | What happened to my layer styles?"
| | 01:25 | Not to worry.
| | 01:25 | You're going to be able to get back to those, so don't worry.
| | 01:27 | Let's just take a look at how we can create our buttons here.
| | 01:31 | So I am going to choose Duplicate Layer a few times to create the
buttons in our web page here, so we have our "About Us" button.
| | 01:44 | It's duplicated again for the "Our Stores" button.
| | 01:52 | I'm going to duplicate that again for the "Contact Us" button.
| | 02:00 | Now, I'm just going to rename our Smart Object here to "Products" button.
| | 02:09 | So there we go.
| | 02:12 | Now they're all stacked on top of each other, so let's grab
our "Contact Us" layer first, and with the Move Tool selected,
| | 02:18 | and I'm just going to click and drag it out here,
making sure it's nicely aligned with the other one.
| | 02:23 | I'll grab the "Our Stores" button and move it as well, and also
the "About Us" button, and multiple-select all four layers,
| | 02:35 | and I'm going to click the Distribute Horizontal Centers,
and that's going to give us nice spacing in between.
| | 02:40 | Now let's suppose that I want to make some changes to this.
| | 02:44 | I have a client that comes back and says, "I
like the page, but I don't like the buttons."
| | 02:49 | OK, so let's make some changes.
| | 02:50 | I'm going to double-click the "Products" button layer icon, and you can
see I get this error message that says, "After editing the contents,
| | 02:59 | choose 'file save' to commit the changes."
| | 03:02 | OK, fine, so let's go ahead and do that.
| | 03:05 | Well, here we have that button that we created.
| | 03:08 | We have all the contents of our layers.
| | 03:10 | We have our Shape layer and our two layer styles, and
what I can do now is go ahead and make some edits to this.
| | 03:16 | Let's see how that's going to affect things.
| | 03:19 | Let's just make a few arbitrary changes here.
| | 03:21 | Let's change our glow to maybe a bit of a beige-y yellow, click OK.
| | 03:29 | Let's change the color of our stroke, maybe to a dark blue.
| | 03:38 | And let's reshape this.
| | 03:40 | So I'm going to grab my Direct Selection Tool and I'm going
to click the path, and with these little editing nodes,
| | 03:47 | I'm just going to make...make a few little
changes here, reshape this button a little bit.
| | 04:00 | Now let's see what happens when we update this.
| | 04:04 | So I'm going to choose File, Save and
I'm going to close my little PSB File.
| | 04:10 | This is the Smart Object file, the PSB file, and there you
can see all four buttons updated at exactly the same time.
| | 04:19 | Now, some of these are cut off a little bit.
| | 04:21 | Let's fix that, so I'm going to double-click to open it up again.
| | 04:24 | The reason for that is that it's actually off the
document window here, so I'm going to grab my Move Tool.
| | 04:30 | Just going to move this up ever so slightly.
| | 04:33 | I'm actually going to use my arrow keys to move this up, and I'm going
to choose File, Save, close that, and now we've resolved that issue.
| | 04:45 | So now we have our four buttons, and you can see that all the change I
made to the "Products" button automatically effected all of the others.
| | 04:53 | They all look identical, and that's because they're duplicated based
on the original Smart Object. That is really, really cool, because,
| | 05:01 | especially when you're creating really complex buttons, if you have
to make changes to multiple buttons at the same time,
| | 05:07 | it can be very time-consuming and very tedious.
| | 05:10 | This just takes that guesswork right out of it and
makes it dead easy to update them all at the same time.
| | 05:16 | So now, the last thing we need to do is add our text labels.
| | 05:19 | Unfortunately, we can't use the smart objects for text labels, because
the type has to be different in each one, so we can't use it for that,
| | 05:27 | but what we can do is just, you know, grab our type layer, center
it here on our button the way we like, and I can duplicate it.
| | 05:36 | Choose Duplicate Layer.
| | 05:38 | I'm going to call this "About Us."
| | 05:42 | Grab my Move Tool, move it over here,
double-click the Type layer, and type "About Us."
| | 05:50 | Commit my change, do the same thing, duplicate
my layer, call this "Our Stores."
| | 05:59 | Grab my Move Tool and move it over, double-click.
| | 06:07 | Call that "Our Stores," commit the change, recenter it, and
then we'll duplicate one last time and call it "Contact Us."
| | 06:21 | Move it over, select the text layer by double-clicking.
| | 06:26 | We'll call that "Contact Us," and there you go.
| | 06:30 | So we did have to manually change the Type layers, but you can see that
all those changes that we made to the buttons, I just had to change one,
| | 06:36 | and it automatically change the rest, and that is really, really cool.
| | 06:40 | That will save you tons and tons of time.
| | 06:42 | This is a wonderful feature in Photoshop CS2,
especially when you're designing web buttons.
| | Collapse this transcript |
| Creating Pill-Shaped Buttons| 00:01 | >>Next we're going to take a look at some of our more advances shape
functionality, and take a look at how to create some of these fun,
| | 00:07 | little pill-shaped buttons.
| | 00:09 | So you're going to turn off the visibility of this layer
group here, and we're going to get started from scratch.
| | 00:14 | The first thing I'm going to do is grab my Rounded Rectangle
Tool, and let's take a look at this Radius Pixel option up here.
| | 00:22 | If I click and drag, you can see that I've created something that
looks a little bit more rectangular than it does pill-shaped.
| | 00:28 | You can undo that by pressing (Control + Z) or
[Command + Z], and increase this to 25 pixels.
| | 00:34 | Now if I click and drag, you can see that I definitely
have something that looks a little bit more pill-shaped,
| | 00:39 | so the radius dictates how round the edges of a rounded rectangle are, so
right now I've created something that's actually quite a nice pill shape.
| | 00:47 | So let's undo that. I'm actually going to increase it just
a little bit more, up to 35 pixels, and let's click and drag,
| | 00:57 | and create just a nice pill-shaped button.
| | 01:01 | Now, I don't want it to be that color, so I'm going to double-click, open
the color picker, and sample this bright green, and I'm going to click OK.
| | 01:08 | Now what I want to do is I want to square off the end of this, so
what I'm going to do is I'm going to switch to my Rectangle Tol,
| | 01:16 | and instead of having this button here selected, which is the Create
New Shape Layer, I'm going to choose to Subtract from the Shape Layer.
| | 01:23 | so I'm going to click that, and I'm going to click and drag here.
You can see that when I do that, I basically alter the path,
| | 01:31 | which alters what areas of the path are being
filled. I've basically just squared off this area.
| | 01:37 | Now, I don't want to keep these two different paths, so I want to
go to my Path Selection Tool, and you can see on the Options bar,
| | 01:43 | I have a Combine option.
| | 01:44 | I'm going to click Combine, and now I have
permanently changed the shape of my pill-shaped button.
| | 01:50 | Now what I want to do is sort of make sort
of a funky little shape that we saw earlier.
| | 01:54 | Let's turn on and off the visibility of these
so that we can see exactly what they look like.
| | 01:59 | So let's do that.
| | 01:59 | We're going to use the same technique.
| | 02:01 | I'm going to grab the Rectangle Tool, I'm going to make sure it's still on
Subtract, and I'm going to click and drag to create this little rectangle.
| | 02:08 | Now, I want to create another rectangle that's identical to it, so
I'm going to grab my Path Selection Tool, I'm going to select it--
| | 02:14 | click to select it-- and I'm going to choose, Edit, Copy, Edit, Paste,
and I actually have another one on top here, so I'll just move that over,
| | 02:25 | and now you can see, I have the shape exactly
the way I want it, and I can click Combine.
| | 02:29 | That's pretty cool.
| | 02:30 | So let's grab our Move Tool and move that right down here.
| | 02:35 | Now I want to create a back button that
has the same shape, but that's the reverse.
| | 02:41 | Well, I could go through the process of doing that, but what I'm
actually going to do is I am going to go to my Layers palette menu,
| | 02:47 | I'm going to choose Group Into New Smart Object,
and then I'm going to choose to duplicate the layer.
| | 02:55 | So let's call that "Back," and I'll double-click and rename this "Next."
| | 03:03 | So with the Back layer selected, I'll grab my Move Tool.
| | 03:05 | I'm going to click and drag.
| | 03:07 | I want to make sure they're lined up.
| | 03:09 | Now, I want this to be a mirror image of it, so I'm
going to choose Edit, Transform, Flip Horizontal.
| | 03:16 | There we go.
| | 03:16 | Now you can see, I have flipped it, and I
have these nice forward and back buttons.
| | 03:22 | Now, what happens if I want to make a change
to this, now that I've flipped it horizontally?
| | 03:26 | Well, let's just take a little look.
| | 03:27 | Let's double-click the "Next" Smart Object, and open it up, and what
I'm going to do is I'm just going to grab my Path Selection Tool-
| | 03:38 | actually, I'm going to grab the Direct Selection Tool. I'm
going to click the path, and let's just sort of make a sort
| | 03:45 | of a wonky little shape here.
| | 03:46 | Let's choose File, Save, close that down, and you can
see that it updates both of them at the same time.
| | 03:54 | So that's pretty cool.
| | 03:55 | Even if you make a change like flipping it horizontally, the
Smart Object knows that and still makes the changes.
| | 04:02 | When you're designing web buttons, Smart Objects will save you every
time, for making sure that everything is perfect, they're all consistent,
| | 04:09 | and that kind of thing.
| | 04:10 | So I'm just going to go back one step in my History Palette,
because I don't really want to make that wacky little shape.
| | 04:15 | It's really not appropriate for a web button.
| | 04:17 | So the next thing I'm going to do is I'm going to grab my Horizontal
Type Tool, put my cursor down, and I'm going to type "next."
| | 04:25 | Font's a little bit small, so let's highlight
that, bump that up to maybe 14.
| | 04:30 | Still a bit small, so let's try 18.
| | 04:33 | That looks good.
| | 04:34 | We'll grab our Move Tool, and we'll reposition it here.
| | 04:38 | Now I'm going to grab my Type Tool again, put
my cursor down, and I'm going to type "Back."
| | 04:45 | Grab my Move Tool, and get those nice and centered here.
| | 04:51 | There we go.
| | 04:53 | So as you can see, I've created these
really funky little pill-shaped forward,
| | 04:57 | next and back buttons, using some of the more advanced
functionality with our shape tools, and also by using Smart Objects.
| | Collapse this transcript |
| Creating Rounded Rectangular Buttons| 00:00 | >>In the last movie, we took a look at how to create some
fun buttons in Photoshop CS2 by subtracting from our shapes.
| | 00:07 | This time, we're going to look at how to do something interesting by adding
to our shapes, and we're going to create these little round rectangles
| | 00:13 | that you can see here.
| | 00:14 | So let's turn off the visibility of our Buttons layer group, and I'm
going to go in and I'm going to choose my Rounded Rectangle Tool,
| | 00:21 | and I want to set the radius to 35 pixels.
| | 00:26 | And with this nice, soft blue selected, I'm going to go ahead and
I'm going to click and drag to create a nice, pill-shaped button.
| | 00:35 | The next thing I'm going to do is I'm going to switch my radius down
to five pixels, and what I'm going to do is I'm going to click the Add
| | 00:43 | To Shape Layer button.
| | 00:44 | In the last movie, we used the Subtract From Shape Layer button.
| | 00:47 | Now we're going to use Add To Shape Layer.
| | 00:49 | I'm going to grab my Zoom Tool and just zoom in so I can really see
what I'm doing here, and with my Rounded Rectangle Tool selected,
| | 00:57 | I'm going to position my cursor overtop of the top part of the path.
| | 01:01 | You can see that the crosshair turns white, and I know that
I'm overtop of that area, and I'm just going to click and drag,
| | 01:08 | and I'm going to position my cursor down here,
so that I know I'm flush against the side.
| | 01:14 | And what I want to do is make sure that the two squared-off
areas match up, just like what I've done right there.
| | 01:21 | And now I'm going to go and choose my Path Selection Tool, and I'm
going to hit Combine so that I have this nice, rounded rectangle.
| | 01:31 | If you're wondering how I panned to this side, I just held down my
spacebar and clicked and dragged, and I'm going to position my cursor
| | 01:44 | over so it's white, the crosshair is white,
so I know I'm nice and aligned here.
| | 01:49 | I'll do the same thing here.
| | 01:50 | I want to make sure my cursor's aligned, but then I'm just going to drag up
a little bit higher so that the straight edges match up right along here.
| | 01:58 | Now that I've done that, I'm going to grab
my Path Selection Tool and hit Combine.
| | 02:05 | Perfect. Now let's double-click our Zoom Tool to
zoom out so we can see the shape that we created.
| | 02:10 | Looks pretty good.
| | 02:11 | What I want to do next is add a stroke to it, so I'm
going to choose Stroke from the Layer Styles popup menu.
| | 02:18 | Red is obviously not a good choice, so let's click the Color Picker
dialog box, and I'm going to just choose this dark blue and click OK.
| | 02:26 | Now, I don't like it being on the outside like this.
| | 02:29 | I want it to be in the center.
| | 02:31 | I find that that looks a little bit nicer and a little bit
cleaner, so let's leave it in the center, and let's click OK.
| | 02:36 | And when we click off the shape, you can see
we have this really nice rounded rectangle.
| | 02:42 | It's a really nice variation on all the boring
rectangular buttons that we see in the world of web design.
| | 02:49 | So what we want to do is we want to be able to duplicate this.
| | 02:51 | No problem.
| | 02:52 | We know how to do that with Smart Objects.
| | 02:54 | So let's go ahead and choose Group Into Smart Object.
| | 02:58 | We have our Smart Object, and now I'm just going to duplicate this layer.
| | 03:03 | We'll call this "About Us button".
| | 03:07 | Back to our shape, then duplicate layer.
| | 03:12 | Call this "Our Stores button".
| | 03:17 | Click OK, move it up in the layers stack.
| | 03:20 | Go back to the shape one layer, duplicate layer, call this "Contact
Us button", and click OK and move it up in the layer stack.
| | 03:30 | Now, I'm just going to rename our shape
one to "Products button", and there we go.
| | 03:38 | So let's start with our Contact Us button.
| | 03:39 | I'm going to grab my Move Tool and click
and drag to move it along over here.
| | 03:44 | Now, I turned off my Smart Guides at some point, so let's go ahead and
choose View/Show Smart Guides so that these are all nicely aligned.
| | 03:52 | So I'm going to align this all the way over here.
| | 03:53 | Let's move around to our Our Stores button layer, move it on over.
| | 04:01 | Same thing with our About Us.
| | 04:03 | And our Products button is going to have to move along over here.
| | 04:07 | I made these a little bigger than what I did the
originals, so they're going to span along the top here.
| | 04:11 | Now what we want to do is select all four by holding down the
Shift key, and we want to distribute the horizontal center
| | 04:20 | so that they're evenly spaced, and just like with the other
exercises that we've done. If I want to update one of these buttons,
| | 04:26 | I can simply double-click one of the Smart
Objects, click OK, and go ahead and make changes.
| | 04:32 | Let's say that we want to change our color
from a light blue to maybe a light gray.
| | 04:38 | So let's change that to gray.
| | 04:41 | Click OK, File, Save, close it up, and it updates them all automatically.
| | 04:48 | Let's undo that, because I really like that light
blue, so I'm going to press (Command + Z) or [Control + Z].
| | 04:53 | Now all we have to do is grab our Type Tool and type our text, and
we can see that's not in a very good place in the stacking order,
| | 05:03 | so let's drag it all the way up to the top. Our text color is a light
blue, which is why we can't see it, so let's double-click to highlight it,
| | 05:12 | and we'll choose this nice, dark blue.
| | 05:15 | Make that a little bit darker.
| | 05:16 | There we go.
| | 05:17 | Click OK, and I'll grab my Move Tool.
| | 05:20 | I'll position it along my button, and I can just repeat
that process for the remaining text layers on this button.
| | 05:27 | We've learned how to do that several times in this movie training.
| | 05:30 | So let's duplicate our layer.
| | 05:33 | We'll call this "About Us."
| | 05:35 | Double-click to highlight.
| | 05:39 | Actually, I'll grab my Move Tool first before we
rename it, so we'll grab the Move Tool and move it.
| | 05:44 | We'll double-click it to highlight it.
| | 05:45 | We'll type "About Us," commit our changes, duplicate.
| | 05:55 | We'll call this "Our Stores."
| | 05:58 | Grab our Move Tool, move it along here, double-click.
| | 06:05 | Call it "Our Stores," commit the change, reposition,
and let's do the exact same thing for the last one.
| | 06:13 | So we're going to duplicate, call it "Contact Us," move it over
here on its own, double-click, retype the text, grab our Move Tool
| | 06:26 | and reposition, and there we go.
| | 06:28 | So that's a really fun way to create web buttons as well.
| | 06:31 | You can see that the rounded rectangle is a really interesting shape.
| | 06:34 | It provides a nice variation for our web buttons, and
it was really simple to create here in Photoshop CS2.
| | Collapse this transcript |
| Creating 3-Dimensional Buttons| 00:01 | >>Next I want to show you some techniques for
creating some 3-dimensional buttons in Photoshop CS2.
| | 00:06 | Here you can see we have our Products button.
| | 00:09 | What I want to do is make this look a little bit more 3-dimensional.
| | 00:14 | In this movie I am going to show you three different
techniques for doing that using three different layer styles.
| | 00:19 | We're going to use the Bevel and Emboss layers style for this.
| | 00:22 | I am going to choose Bevel and Emboss and
I am going to start off with the inner bevel.
| | 00:28 | You can see I have a few different techniques that allow me to do this.
| | 00:34 | I personally prefer the look of the Smooth button but if
you want something that has a little bit more definition,
| | 00:39 | you can choose one of the others.
| | 00:40 | You can adjust how deep it is.
| | 00:42 | I am going to leave this at a little bit below 100 percent.
| | 00:45 | Somewhere maybe around the 90 percent mark.
| | 00:48 | I can choose the direction, and I can also choose the size.
| | 00:53 | Now as we get into the size, you can see that
the shadows sort of evens out a little bit more.
| | 00:57 | I can also choose to soften it.
| | 01:01 | I like to do that.
| | 01:02 | I like it to be nice and smooth.
| | 01:05 | I don't like it to be too harsh.
| | 01:06 | So let's take this down to about four pixels.
| | 01:10 | Now I can also adjust the angle here.
| | 01:12 | That is basically the angle of the light source.
| | 01:15 | So right now the light sources is shining from the top
right down here, which is casting the shadow on this side.
| | 01:22 | If I want I can create the light sources so that it is
coming from the bottom left, or directly from the bottom,
| | 01:28 | or we can return it to basically its default
where it is coming from the top left here.
| | 01:36 | I can also adjust the contour.
| | 01:38 | You can see that as you experiment with these
you can create some pretty interesting effects.
| | 01:43 | I typically stick to these three here, although I do sometimes find
that this nice little slope one gives me some interesting results.
| | 01:51 | I am just going to return it to one of these here that is
nice and smooth, and you can see that I can adjust my opacity.
| | 02:02 | That's adjusting the opacity of the button.
| | 02:05 | I am going to leave a little around the 45 percent mark.
| | 02:09 | I can also adjust the color of my shadow by clicking the color swatch.
| | 02:13 | I am just going to sample the dark green and
go down and choose a slightly darker green.
| | 02:17 | I don't like my shadows to be too black because
I find that they look a little unnatural.
| | 02:20 | So let's click OK.
| | 02:22 | We can also adjust the opacity of our shadow.
| | 02:26 | That helps make it blend a little bit more.
| | 02:28 | I am going to soften this up just a little
bit, and just slightly increase my size.
| | 02:36 | So that's one technique we can use for creating
a 3-dimensional button in Photoshop CS2.
| | 02:42 | Lets just click OK and click off our layers
so that we can see the results of that.
| | 02:46 | So that's using the inner bevel.
| | 02:48 | I am going to duplicate this button by choosing Duplicate Layer.
| | 02:53 | Click OK. Grab my Move Tool here and just move it down here.
| | 02:59 | Next what we are going to do is experiment
with a different bevel and emboss.
| | 03:04 | So I am just going to open the layer style here, double-click,
and this time we're going to experiment with the outer bevel.
| | 03:11 | This does something entirely different than what we did in the last one.
| | 03:16 | You can see that basically it's beveling
it on outside versus on the inside.
| | 03:20 | I can adjust the depth, I can adjust the
size, and I can adjust how soft it is.
| | 03:29 | Now in this case I prefer to leave the softness turned down quite low.
| | 03:33 | With the last one I liked it to be nice and soft and smooth.
| | 03:35 | This one I prefer to have it set a little bit differently.
| | 03:38 | Again, we can adjust our light source, and we can also adjust the contours.
| | 03:44 | You can experiment with these to see exactly what kind result you get.
| | 03:49 | I'm going to leave it on this nice slope.
| | 03:51 | I can also adjust the color of my shadow.
| | 03:53 | Let's choose a slightly darker green, and
wee can adjust the opacity of our shadow.
| | 03:58 | Let's take that up to about 80 percent.
| | 04:01 | Click OK. Now you can see that's a completely different kind
of button that we've created here, than with the inner bevel.
| | 04:09 | So we have the inner bevel and the outer bevel.
| | 04:10 | I'm going to duplicate this one more time.
| | 04:15 | Click Duplicate Layer.
| | 04:16 | Click OK. Grab my Move Tool and position it a little bit below here.
| | 04:20 | This time I am going to use the Pillow Emboss.
| | 04:23 | Let's double-click to open up our Bevel and Emboss,
and this time I am going to choose Pillow Emboss.
| | 04:30 | You can see that I now have this little indent.
| | 04:34 | I can increase and decrease the depth,
and I can increase and decrease the size.
| | 04:40 | I prefer to keep this quite small.
| | 04:43 | I can adjust how soft it is.
| | 04:46 | Just like the others we can adjust our light source.
| | 04:53 | Now this has Use Global Light checked, and that means that all of the
layer styles in the layer that are currently in the document are going
| | 04:59 | to use the same light source.
| | 05:00 | This is kind of cool because typical you want things to use
the same light source so it looks a little bit more natural.
| | 05:07 | So that is kind of nice to be able to do that.
| | 05:09 | So let's just return that back to roughly where it was.
| | 05:12 | I can also adjust the contour here.
| | 05:14 | There are a number of different options that I can work with.
| | 05:19 | Let's leave it on this one here.
| | 05:21 | Just like before I can adjust my shadow.
| | 05:24 | Let's click OK and see what that one produced.
| | 05:27 | That produced a completely different effect than what the last one did.
| | 05:31 | So you can see those are different ways to create
some 3-dimensional buttons in Photoshop CS2.
| | 05:35 | Once you actually get a shape that you are happy with, such
as what I have here, then you can use that layer style,
| | 05:41 | the Bevel and Emboss layer style, to create
some really interesting 3-dimensional effects.
| | Collapse this transcript |
| Creating a Tabbed Navigation Bar| 00:01 | >> Next we are going to take a look at how to
create a tabbed navigation bar in Photoshop CS2.
| | 00:05 | The trick to creating a tabbed navigation bar is really
getting your spacing and your alignment set up properly.
| | 00:12 | I find that the most complex thing about creating a tabbed navigation bar.
| | 00:15 | So let's take a look at how we can actually achieve that and
take a look at how we can create this tabbed navigation bar.
| | 00:22 | The first thing I am going to do is turn on my rulers.
| | 00:24 | I'm going to choose View > Rulers.
| | 00:26 | You can see that by default, these are set to inches.
| | 00:29 | Well, when you are designing web graphics,
its easier if they are set to pixels.
| | 00:33 | So lets change that preference.
| | 00:34 | I'm going to choose Photoshop > Preferences > Units & Rulers.
| | 00:37 | If you are on Windows, you are going to find it under the Edit menu.
| | 00:40 | Edit > Preferences > Units & Rulers.
| | 00:42 | We're going to choose Pixels from this Rulers popup menu, and click OK.
| | 00:48 | Now what we're going to do is set up some guides.
| | 00:52 | Guides will help us achieve proper alignment.
| | 00:54 | So I am going to click from the horizontal
ruler and drag to grab a horizontal guide.
| | 01:00 | I am going to position it right at the top of the T of the word "tea".
| | 01:05 | Now, by default, our guides are set to this cyan blue color.
| | 01:09 | I find because of the color scheme of this image, it a
little bit tough to work with the guides of this color.
| | 01:14 | But fortunately, I can change that.
| | 01:16 | I am going to choose Photoshop > Preferences > Guides Grid & Slices.
| | 01:20 | Again, if you are on Windows you're going to find that under the Edit menu.
| | 01:22 | I am going to choose the green from the color popup
menu for guides, and then I am going to click OK.
| | 01:31 | Now what we need to do is set up some of our vertical guides.
| | 01:35 | The first vertical guide I am going to set at the 150 pixel mark.
| | 01:40 | I am actually just going to re-adjust this one here
because I have noticed it is not quite where I wanted it.
| | 01:46 | It really should be at the 150 mark.
| | 01:48 | So let's just adjust that a little bit.
| | 01:51 | There we go.
| | 01:51 | Perfect. So we've got both of these at the 150 pixel mark.
| | 01:58 | Next we're going to create a series of vertical guides and we're going to
add those at the 185 mark, the 220 mark, 320 mark, the 340 mark, 440 mark,
| | 02:40 | 460 mark, the 560 mark, the 580 mark.
| | 02:50 | Now you may be starting to see a pattern
here in terms of how these are all set up.
| | 02:55 | There we go.
| | 02:56 | That's the 580 mark, the 680 mark, and last, the 715 mark.
| | 03:07 | So basically our tabs are going to go in these large spaces
here, which you can see, are each spaced at 100 pixels apart.
| | 03:14 | We want to have some distance between our tabs right here
and each of those are going to be spaced 20 pixels apart.
| | 03:20 | Next I am going to grab the Line Tool from the Toolbox, and
I'm going to make sure that my weight is set to 10 pixels.
| | 03:27 | That has to do with the thickness of the line.
| | 03:29 | I'm going to go over here to my foreground color swatch and
I'm going to sample color from the JavaCo Tea smoke swirl.
| | 03:35 | I'm just going to make that a slightly darker blue and click OK.
| | 03:39 | Now what I want to do is position my cursor over this second vertical
line and I want to line it up so that the cross hair turns pink.
| | 03:48 | That shows me that it is perfectly aligned.
| | 03:51 | I want to hold down my Shift key and click and drag to create a nice
perfect straight line that extends all the way to this last vertical guide.
| | 03:58 | If I didn't hold my shift key you could see it makes
it a little tricky to get a perfectly straight line.
| | 04:03 | By holding the Shift key, it automatically
constrains it so it's perfectly straight.
| | 04:07 | So there we have our nice straight line.
| | 04:09 | Now I am going to grab my Move Tool from the Toolbox and
I am going to click and drag to reposition it down here
| | 04:15 | so that it is flush against this guide.
| | 04:17 | I can tell it's flush because it has turned
pink, and that is my Smart Guide showing me that.
| | 04:22 | The next thing I am going to do is start to actually create my tabs.
| | 04:26 | So what I am going to do is grab my Rounded Rectangle Tool from
my Toolbox and I want to turn on the Add to Shape Area button,
| | 04:34 | and I am just going to click and drag, and add a tab right here.
| | 04:41 | Now you might be thinking: "Okay, while
why is it extending down to the bottom?"
| | 04:44 | Don't worry about that part right now.
| | 04:45 | We are going to fix that a little bit later.
| | 04:47 | So now that we have one tab here, we want to
make sure that all the rest are the same height.
| | 04:51 | Now we can achieve that by using the Smart Guides, but I think
that it is probably just as easy to grab another horizontal guide,
| | 04:57 | and position it right on top.
| | 05:00 | Now when we create our second guides you can see again, I can
line up my cursor, the cross hair, right against the inner section
| | 05:07 | of these two guides, click and drag, and I know that I
am creating a tab that is identical to the one over here.
| | 05:14 | Let's do that again.
| | 05:19 | And one more time here with the cross hair.
| | 05:21 | Click and drag making sure it is perfectly aligned
at the inner section right here when it turns pink.
| | 05:28 | Now what we want to do is get rid of these areas down here at the bottom.
| | 05:32 | To do that I am going to click the Subtract from Shape Area button,
and I am going to choose the Rectangle Tool from the Toolbox.
| | 05:40 | I am going to position my cursor over top
of the intersection of these two guides.
| | 05:45 | Now it is turning green because it is over-top of Smart Guides.
| | 05:48 | I am going to click and drag all the way over here.
| | 05:52 | You can see it subtracting from those areas.
| | 05:55 | I am going to grab my Path Selection Tool
from the Toolbox, and hit Combine.
| | 06:00 | And there we have our tabs.
| | 06:02 | Now if you want to see what this looks like without the guides, you can
simply press (Command + Semicolon/;) or [Control + Semicolon/;] on Windows
| | 06:08 | to take a look at what this looks like.
| | 06:11 | Next we are going to add an inner tab to these
just to give them a little bit of dimension.
| | 06:15 | To do that we need to set up a few more guides.
| | 06:17 | I am going to start with a horizontal guide.
| | 06:19 | I am going to grab it from my ruler, and I am going to click and
drag, and I am going to position it right on top of this line.
| | 06:26 | Just like so.
| | 06:27 | Now I am going to add a series of additional vertical guides.
| | 06:31 | I am going to add them at the 230, the 310, 350, 430,
470, 350, 430, 470, 550, 590, and 670 pixel marks.
| | 07:11 | Just like so.
| | 07:12 | Again, you can start to see a pattern here.
| | 07:14 | Now what I am going to do is go back and choose my Rounded Rectangle
Tool, and I am going to click the New Shape Layer button,
| | 07:24 | so that we are creating a new shape layer.
| | 07:25 | We don't want to add to the existing one.
| | 07:27 | We want to create a new one.
| | 07:30 | And, again I have my Rounded Rectangle Tool selected, and I
am going to click the color swatch on the foreground color,
| | 07:35 | and I am going to choose a nice light, light blue, almost a white.
| | 07:38 | Click OK.
| | 07:41 | I just realized that I need to set up one more guide.
| | 07:43 | I need to establish the height for this
particular tab that I am going to create.
| | 07:47 | I'm going to position that at the 105 pixel mark.
| | 07:50 | Right here.
| | 07:52 | Excellent.
| | 07:53 | So now what I am going to do is click and drag to create my new tabs.
| | 07:59 | Now what I am going to do in this particular case
is; I am not going to add as I did the last time.
| | 08:07 | I am going to create new ones for each of these individual tabs.
| | 08:13 | The reason I am doing that is because if I am
going to make a rollover out of these, chances are,
| | 08:19 | what I am going to do is change the color of these tabs.
| | 08:22 | Having them on separate layers will just make that a whole lot easier.
| | 08:26 | So we're going to put these all on separate layers
as you can down here in shape of the layers palette.
| | 08:33 | So what I need to do now is subtract from each of these.
| | 08:35 | With my Shape 5 layer selected, I am going to grab my
Rectangle Tool, and I am going to click the Subtract button
| | 08:44 | I am just going to line up my cursor here, click and
drag, grab the Past Selection Tool, and hit Combine.
| | 08:54 | Now I actually wanted to cut a little bit more off of that.
| | 08:57 | I wanted to cut it all the way up to here.
| | 08:59 | So let's just do that one more time.
| | 09:00 | I am going to grab my Rectangle Tool, make sure it is on Subtract,
position my cursor at the intersection of the lines, click and drag,
| | 09:10 | grab the Past Selection Tool, and hit Combine.
| | 09:14 | Perfect. Now let's continue that for the other four shape layers.
| | 09:18 | The Rectangle Tool... We want to make sure that when I
have my shape layer selected, that it is on Subtract.
| | 09:27 | Position my cursor so that we can see the pink cross hair, click and
drag, we'll switch over to the Past Selection Tool, and hit Combine.
| | 09:37 | Now let's try that for shape 3.
| | 09:39 | Now this is something that actually might
trip you up. Let's choose the Rectangle Tool.
| | 09:43 | Here I have shape 3 selected, but my buttons are grayed out up here.
| | 09:47 | That's because I actually need to click the thumbnail.
| | 09:50 | You see that little frame that you see now?
| | 09:52 | That's what's actually allowing me to work with the path.
| | 09:55 | If you don't have that little frame selected, if it's
not visible, you wont be able to subtract from the path.
| | 10:00 | So that's a little something that might just trip you up from time to time.
| | 10:04 | Let's turn on the Subtract button, and line up our cursor,
click and drag, grab the Past Selection Tool, and hit Combine.
| | 10:15 | Last, we're going to go to shape 2, again clicking the
thumbnail, we're going to click the Rectangle Tool.
| | 10:22 | It is already on Subtract.
| | 10:25 | Let's click and drag, go to the Past Selection Tool, and hit Combine.
| | 10:31 | We'll scroll down to bottom of our Layers palette, hit
JavaCo Tea so we can see exactly what this looks like.
| | 10:38 | Now let's take a look at this what it looks like without the guides.
| | 10:41 | So we are going to press (Command + Semicolon/;) or [Control + Semicolon/;].
| | 10:43 | So that looks pretty cool.
| | 10:45 | We've created a really nice tabbed navigation bar.
| | 10:48 | Now what I want to do is just create a nice drop shadow around this.
| | 10:52 | So I am going to click my Shape 1 layer here, and I am going to
go down to my Layer Styles pop-up menu and choose Drop Shadow.
| | 11:01 | I don't want a real harsh shadow; I just
want something really nice and light.
| | 11:05 | So I am going to drop my opacity down to about 30 percent.
| | 11:09 | I am going to decrease my distance to one pixel, and I am going
to increase the size to about 7 or 8 pixels, just like so.
| | 11:19 | I am going to leave the contour as it is and click OK.
| | 11:24 | So now we have this nice shadow behind it.
| | 11:26 | It gives it a little bit of three-dimensionality.
| | 11:28 | The last thing that we are going to do is actually add our
text, which we have done many times through this chapter.
| | 11:33 | I am going to grab my Type Tool and I am going
to decrease my font size to about 14 points.
| | 11:38 | We want this to be a nice dark blue, so I'll click my
color swatch here to open up the Color Picker dialogue box,
| | 11:44 | and let's sample a nice blue. I am going
to make it a little bit darker than that,
| | 11:48 | so let's move down here in the Color Picker dialogue box.
| | 11:51 | Click OK. Let's just go up to the top.
| | 11:56 | We need to make sure we are creating this above our shape layers.
| | 11:59 | So make sure shape 5 is selected.
| | 12:02 | Put our cursor down and type "Products".
| | 12:08 | We can grab the Move Tool, and click and drag to position it in place.
| | 12:15 | Now we can duplicate that layer.
| | 12:17 | We'll call that "About Us".
| | 12:22 | Grab the Move Tool, move it over, make sure it is aligned,
double-click, and retype it, and click Commit Current Edits.
| | 12:35 | Lets just repeat that process for the other two buttons.
| | 12:41 | This one needs a bit of repositioning, so with the Move
Tool, we'll just click and drag and move it over a bit.
| | 12:55 | We'll duplicate it one more time for "Contact Us".
| | 13:01 | Grab the Move Tool, click and drag, double-click to highlight,
commit our change, and we'll just move that over to center it.
| | 13:15 | Excellent.
| | 13:16 | So that is how we can create a tabbed navigation bar.
| | 13:18 | Let's turn on our guides one more time by pressing
(Command + Semicolon/;) or [Control + Semicolon/;].
| | 13:23 | This was a pretty tedious process setting up all of these guides.
| | 13:26 | It will take you some planning to sit down and do this.
| | 13:29 | To give you and idea of how I planned this out, I started by
knowing that the entire width of my document was 750 pixels.
| | 13:37 | Then I figured out roughly where I wanted my tabbed
navigation bar to sit and how wide I wanted it to be.
| | 13:43 | Then I decided how wide I wanted each tab, and how much space I
wanted between each tab, and I sort of figured it out from there.
| | 13:50 | I did a little bit of work on paper with my ruler and with my calculator
to figure out exactly how to make sure that this was going to work
| | 13:57 | and it would all be evenly spaced.
| | 13:59 | So the actual process of creating a tabbed navigation bar
in terms of creating the shapes is not terribly difficult.
| | 14:05 | Where you are going to have to do the most work is sitting down
and figuring out exactly how to get this nicely spaced and aligned,
| | 14:13 | and really invest the time setting up your guides
appropriately because you can see it really will pay off.
| | 14:18 | We hide these guides again by pressing
(Command + Semicolon/;) or [Control + Semicolon/;].
| | 14:22 | You can see that they are perfectly the same
height, perfectly aligned, and perfectly spaced.
| | Collapse this transcript |
| Creating a Navigation Bar with Icons| 00:00 | >>Next I'm going to show you how to create some iconic navigation.
| | 00:04 | We're going to create some small icons to go with the labels for our...
| | 00:09 | for our navigation Products, About Us, Stores, and Contact Us.
| | 00:12 | There is a saying that pictures can tell a thousand
words, and in web design, that can sometimes be true.
| | 00:16 | Sometimes creating icons as a navigational
structure can be really effective.
| | 00:21 | Just make sure that what you create is simple, easy to
recognize by people with all sorts of different backgrounds,
| | 00:26 | because you may have people visiting your website from all over the world.
| | 00:30 | So let's go ahead and start by choosing our Custom Shape Tool.
| | 00:34 | If we go into this little Shape popup menu, you can see
that there's a number of funky little shapes in here.
| | 00:39 | Now, I don't really see anything in here that I really want to
use, so what I'm going to do is expand this and choose All,
| | 00:45 | and that's going to put all the libraries that
ship with Photoshop CS2 in this popup menu.
| | 00:50 | It's going to ask me if I want to replace the current shapes with the
ones from the library called All and I'm going to click OK to do so.
| | 00:57 | Now you can see I have a whole bunch of
different options in here that I can work with.
| | 01:02 | I like this little envelope for the contact icon, so let's close
that up, and I'm going to click and drag to create an envelope.
| | 01:09 | When I release my mouse, there we have our little icon.
| | 01:15 | I'm going to grab my Move Tool and I'm going to click and
drag to reposition that in the center above the word "Contact."
| | 01:21 | Next I'm going to grab my Custom Shape Tool again, and
I'm going to make sure I have New Shape Layers selected,
| | 01:28 | and what I'm going to do is I'm going to
expand this little Shape popup menu again.
| | 01:32 | I'm going to try to find something that would go with the stores.
| | 01:36 | When I click and drag and go all the way to the bottom,
you can see that we have this little shopping cart icon,
| | 01:41 | and I think that will work for the stores,
so let's choose that and close this up.
| | 01:46 | This time, I'm going to hold down my Shift key as I create
this so that I can maintain the original aspect ratio,
| | 01:52 | or the original proportions of this shopping cart.
| | 01:55 | I'm going to release, and there we have our second icon.
| | 01:57 | I'm going to grab the Move Tool, and I'm going to click and drag and
reposition it so it's centered here, and that looks good right about there.
| | 02:06 | Let's just click off to take a look at what that looks like.
| | 02:11 | That's coming together quite nicely.
| | 02:13 | Now, I don't really have anything that would work for the
Products or About Us icons here in our Shape popup menu.
| | 02:21 | If we go back to the Custom Shape Tool and take a look here,
I don't really see anything that works, so you know what?
| | 02:26 | I'm going to create my own custom shapes, and this may
seem a little intimidating, but it's actually quite simple.
| | 02:32 | I'm going to open up a new file, I'm going to go into our
navigation folder, I'm going to open up the file called "teacup."
| | 02:39 | I'm going to make an icon out of this teacup, and now
you may be wondering how on earth are we going to do that?
| | 02:45 | Well, it's actually quite simple.
| | 02:46 | I'm going to make sure my background layer is selected, and I'm going
to grab the Pen Tool, and then what I'm going to do is I'm just going
| | 02:54 | to position these little nodes, and just clicking and dragging, I'm
just going to do this all the way around the perimeter of this teacup...
| | 03:06 | Now, this does take a little bit of time, and depending on how much
of an angle you have or how much of a bend you have in the line,
| | 03:28 | you're going to have to position more or less
little nodes, which is exactly what I'm doing here.
| | 03:33 | Now, the reason that I started this and positioned my cursor on the
background layer is so that it would create the shape layer on top
| | 03:42 | of the background and below the cup, and that's
what's allowing me to basically just trace it.
| | 03:47 | If I had positioned this shape layer on top, I wouldn't be able
to see the layer below, so this is actually working out quite well
| | 03:54 | by having it underneath.
| | 03:56 | When I'm finished, what I'm going to do is position
my cursor over the node that I started with,
| | 04:10 | and you can see that I get this little circle icon beside the cursor.
| | 04:14 | I'm going to click, and that's automatically going to close my path.
| | 04:18 | Now I'm going to turn off the visibility of my cup layer,
and you see that I have this great shape that I just created
| | 04:24 | that is exactly the same shape as my little cup.
| | 04:27 | Now, there's a few areas where the edges aren't refined,
but this is quite large, and when we view it really small,
| | 04:32 | it's really not going to matter too much.
| | 04:33 | Next what I want to do is I want to define this as a
custom shape, so I'm going to go up to my Edit menu,
| | 04:39 | and I'm going to choose Define Custom Shape.
| | 04:42 | You can see it gives me a little preview of what this shape
is going to look like, and I'm going to call this "teacup."
| | 04:47 | I'm going to click OK.
| | 04:49 | Now I'm going to go back to my icon buttons file, I'm going to choose my
Custom Shape Tool, and I'm going to go and open up the Shape popup menu,
| | 04:58 | and there we have our little teacup icon, so I'm going to click that,
close out the Shape po-up menu, I'm going to hold down the Shift key
| | 05:06 | so that we can maintain the original aspect ratio or the
original proportions of our teacup, and I'm just going to click
| | 05:12 | and drag and create our icon.
| | 05:14 | Going to grab the Move Tool, and I'm going to click and drag and
center it above About Us, and that looks good right about there.
| | 05:24 | Let's click off so that we can see what that looks like,
so that was pretty easy to create that little icon.
| | 05:30 | Let's create another one that's a little bit more complex.
| | 05:32 | I'm going to choose File, Open and I'm going to open the file called
"teapot." Now we're going to create an icon for this little teapot.
| | 05:40 | I'm going to click the background layer to select it, and I'm going to
grab the Pen Tool, and just like with the teacup, I'm just going to click
| | 05:48 | and go all around the perimeter of this teapot.
| | 05:57 | Now, don't worry about that growing area behind that's blue.
| | 06:01 | It's going to get corrected as we trace this little teapot here,
and again, because I created this shape layer below the teapot,
| | 06:10 | this is allowing me to trace it.
| | 06:14 | Now, down at the bottom, we're going to have to position
more nodes than what we were before, and that's OK.
| | 06:36 | We'll just click and drag, click and drag with there little tiny
nodes that we can really get this nice bend or this nice curve
| | 06:43 | at the bottom of the teapot.
| | 06:48 | I'm going to go around the handle here, and as you saw
with the teacup, it doesn't have to be absolutely perfect,
| | 07:02 | because when you view it at a small size, you're not really going to see
any of the idiosyncrasies or any of the minor mistakes you might make
| | 07:09 | as you trace, so you can be pretty loose, And again, I'm
going to place my cursor over the very first node I created.
| | 07:24 | You can see that I have that little circle icon,
and if I click, it's going to close my path.
| | 07:30 | Now, we have a little problem here, because in order to define this
teapot, we need to get rid of this area inside the handle, and that's fine.
| | 07:37 | We know that if we click the Subtract button up here, that
we can do just that, so I've clicked the Subtract button,
| | 07:43 | and now I'm just going to click and drag
around the area inside the handle...
| | 07:47 | and again, I'm going to close my path when I see that little
circle, and now we've created a little shape for our teapot,
| | 08:10 | so let's turn off the visibility of layer
5 of our teapot, and there we go.
| | 08:14 | With my shape layer selected, I'm going to choose Edit,
Define Custom Shape, now you can see a little icon of it,
| | 08:21 | we're going to call it "teapot." Click OK and we'll go
back to our icon buttons file and choose the Custom Shape Tool.
| | 08:31 | Next, grab our teapot right there, here it is, close this up... I'm going to
hold down the Shift key to maintain the original proportions and click
| | 08:40 | and drag, and there we have a teapot. So I grab my
Move Tool and click and drag so I can position it.
| | 08:49 | I'm aligning it with my existing icons, you can see it's centered with
those, and it's also nicely centered on top of the Products button.
| | 08:59 | So there we go.
| | 08:59 | Now let's click off of our shape layer so that
we can have a look at our iconic navigation bar.
| | 09:03 | That's pretty cool.
| | 09:05 | That didn't take me a lot of time at all to create that.
| | 09:08 | I used two shapes that were already part of the existing custom shapes
library, and you can see that I took two objects that are fairly simple
| | 09:15 | and made them into these really great little icons. I find what a lot of
people think is that you have to be a very, very skilled artist
| | 09:23 | or a very skilled designer to be able to create funky little icons like
this, but I've shown you that just by tracing it like that,
| | 09:29 | you can create some really compelling visual icons for your website,
and this can create a really effective navigation bar as you can see
| | 09:36 | that we've done right here.
| | Collapse this transcript |
|
|
9. Optimizing Transparent GraphicsOptimizing and Saving Transparent GIFs| 00:01 | >>Next we're going to talk about how we can optimize transparent graphics.
| | 00:05 | There's a couple of limitations that we need to keep
in mind when we're optimizing transparent graphics.
| | 00:11 | The first one is that of the two file formats we've discussed in this movie
training, .GIF and .JPG, .GIF is the only one that supports transparency.
| | 00:19 | Further to that limitation, .GIF only supports pixels being
turned on or off, which means it only supports one-bit masking.
| | 00:27 | Photoshop CS2 and ImageArtist CS2 support up to eight-bit masking,
which is what allows us to have anti-aliased edges, drop shadows,
| | 00:35 | and glows around the edges of our transparent graphics.
| | 00:40 | So let's take a look first at what we mean by anti-aliasing and then let's
take a look at how we can resolve some of these issues with the limitations
| | 00:48 | of the .GIF file format.
| | 00:49 | I'm going to click the New Layer button on my
Layers palette and reposition it below my cup layer.
| | 00:55 | Then I'm going to fill it with my foreground color
by pressing (Option + Delete) or [Alt + Backspace],
| | 01:01 | and you can see that what happens is I have a really
nice transition between my cup and my background.
| | 01:08 | Likewise with these little rays here, we have
a really easy transition between the two.
| | 01:13 | We don't see a jagged edge.
| | 01:15 | Let's zoom in and see how that's actually working.
| | 01:18 | You can see here that we have pixels, we have
transitional pixels that go from the red to the beige.
| | 01:24 | If I turn off the visibility of my layer
one, we can really see how that's happening.
| | 01:29 | We have a series of pixels that are fully opaque, we
have a series of pixels that are fully transparent.
| | 01:34 | We know they're transparent because we see that checkerboard background.
| | 01:38 | We also have these pixels in here along the edge which are what's allowing
us to make that transition, because they are partially transparent pixels.
| | 01:47 | Now, unfortunately, the .GIF file format isn't going
to recognize those partially transparent pixels,
| | 01:53 | so what's going to happen when we optimize this?
| | 01:56 | Well, let's click our Optimize tab.
| | 01:58 | You can see that it's putting these on a white background.
| | 02:00 | That's because I don't have my Transparency option checked.
| | 02:03 | I need to turn that on, and let's compare
between a transparent .GIF and our original.
| | 02:10 | Here you can see we have this really ugly jagged edge.
| | 02:13 | In our original, we have that really nice smooth transition of pixels,
so how is this going to translate to what it looks like in a web browser?
| | 02:22 | Well, let's set up a background image for this and then take a look.
| | 02:25 | I'm going to choose File, Output Settings, Background and I'm going
to leave the open image, that herbal chai image, as the foreground image.
| | 02:33 | But I want to specify an image to be a background so that it tiles in the
background, so then you click Choose, and inside my transparency folder,
| | 02:41 | I have an image called "cup tile," and I'm going to use that, so I'm
going to click Open, and then click OK. Let's take a look
| | 02:48 | at how this looks in our browser.
| | 02:49 | You can see that we have this really ugly edge, you know, and that's
because it's removed the partially transparent pixels that make
| | 02:58 | up the anti-aliased edge, so we obviously don't want to put something
that looks like this on a web site, because it's just really unattractive
| | 03:06 | to look at, so how can we fix this?
| | 03:09 | Well, we can fix this by applying a matte color, so what we want
to ultimately do is we want to switch back here to our original,
| | 03:17 | and what we want to do is we want to put a color behind these pixels
to blend the two together so that we create a fully opaque pixel,
| | 03:25 | and a matte color will allow us to do that.
| | 03:28 | Let's take a look at how that works, so let's click Optimized.
| | 03:32 | What we want to do is choose a matte color that's the same color as what's
in our background, so let's open up our background tile by choosing
| | 03:38 | File, Open and open up "cup tile." I'm going to grab my Eyedropper
Tool, and I'm going to sample color from the darkest of the beiges here,
| | 03:48 | because that's the one that makes up the predominant background.
| | 03:52 | Now, I'm going to switch back to my herbal chai image, and I'm
going to choose Foreground Color from the Matte Color popup menu.
| | 03:59 | What you can see has happened here is that it has put these beige
pixels behind, and now you can see that we have a nice fade from the red
| | 04:10 | to the beige, so let's see how this is going to
translate when we look at it our web browser.
| | 04:16 | Now you can see that we've retained the look of that nice soft edge.
| | 04:21 | It's really simulated anti-aliasing by putting the matte color around
those pixels, and basically what we're doing is you can just think
| | 04:29 | about putting an outline of that solid beige color behind the
transparent pixels, which is mimicking the look of an anti-aliased edge.
| | 04:40 | So let's close this up.
| | 04:42 | Now let's take this one step further and think about what would
happen if we had a glow, so let's set our matte color to None,
| | 04:49 | and here in our Layers palette, you can see I have
a layer effect already applied called Outer Glow.
| | 04:58 | Let's turn that on and turn on the visibility of
our layer one, and go to our original tab here,
| | 05:03 | and here you can see we have a nice transition between the two.
| | 05:08 | Let's preview this in our browser, turn off our layer one, and
let's preview what this is going to look like in our browser.
| | 05:14 | You can see that gain, we lose that glow.
| | 05:18 | Now it just looks like it's outlined in yellow, and this is even more
unattractive than what we had before, so let's close this up, and again,
| | 05:27 | we're going to apply a matte color, so I'm going
to sample some color from our cup tile image,
| | 05:32 | which just happens to be our foreground color right now, go back to the
herbal chai image, and we're going to choose Foreground Color as our matte.
| | 05:40 | Let's move over to our Optimize tab and see what it's done here.
| | 05:44 | You can see that it's basically created that nice fade by putting
solid-colored pixels behind, so let's look at this in our web browser.
| | 05:54 | Now you can see that we have a really nice result.
| | 05:57 | Now, I want to point out something, and you may not
be able to see this on your screen at a smaller size,
| | 06:02 | but what's happening is that because it put solid-colored
pixels and this background has a little bit of a pattern to it,
| | 06:10 | you can see that there's some overlap, and it sort of looks like
the solid-colored pixels are taking away from this tiled background,
| | 06:18 | this patterned background.
| | 06:19 | That's going to happen anytime that you work with a background image that
has a pattern to it, and that's something that you're just going to have
| | 06:27 | to learn to live with or figure out a way to work
around, for example, not use a glow such as this.
| | 06:33 | In this case, it doesn't really detract too much, because
there's a very fine transition between the pattern,
| | 06:38 | but if you're working with a really broad-tooth background that really
shows transitioning color, this technique might not work on a glow.
| | 06:45 | You may have to make some compromises in the design
process to not use something like that, so think about that,
| | 06:51 | but as we discussed in the background chapter, we don't want to be
working with a web background that has a lot of variation in color anyway,
| | 06:58 | so using this technique 90% of the time will probably work for you.
| | 07:03 | So that's how you can get around some
of the limitations of .GIF optimization.
| | 07:08 | Now we want to save this, so I'm going to go up to my
File menu, and I'm going ton choose Save Optimized As.
| | 07:14 | I'm going to go to my desktop and create a new folder.
| | 07:16 | I'm going to call this "herbal chai" and click Create. What I want to
do is I want to save the HTML and images, and I'm going to click Save,
| | 07:28 | and it's going to save everything into this
folder on my desktop called "herbal chai."
| | 07:33 | There's my .HTML file, and if I open up
this images folder, I have two images.
| | 07:37 | I have the cup tile, which is the background, which is being used
to tile the background, and then I have this herbal chai .GIF.
| | 07:43 | Let's open up this .GIF and see what we've got.
| | 07:45 | This is what it looks like when we actually open up the file with the
mat color behind it, and here's where you can really see what it's doing.
| | 07:52 | It's adding solid-color pixels so that it simulates that transition,
it simulates the transition of the glow into the background
| | 08:01 | by adding solid-color pixels.
| | 08:02 | Even though we have a harsh edge out here, we're not going to notice
it because it's against a background that's exactly the same color.
| | 08:09 | So let's close this up and go back to this folder,
and take a look at our herbal chai .HTML file.
| | 08:15 | There we go.
| | 08:16 | Now we have a really nice result, and we've been able to simulate
the look of partially transparent pixels by using a matte color,
| | 08:25 | so those are things you can think about when
you're optimizing transparent graphics as a .GIF.
| | Collapse this transcript |
| Optimizing Transparent GIFs in Photoshop CS2| 00:01 | >>In the last movie, we took a look at some of the limitations of
optimizing transparent graphics as .GIF, and I showed you the workflow
| | 00:07 | for how to optimize graphics using ImageReady CS2.
| | 00:10 | In this movie, I just want to go through the same
process, but show you the workflow in Photoshop CS22,
| | 00:16 | should you ever need to optimize transparent graphics here.
| | 00:19 | You'll find the process a bit more tedious
in Photoshop CS2 than in ImageReady CS2.
| | 00:24 | You'll see that throughout this, but you'll develop your own working
style and figure out which application you prefer working in.
| | 00:30 | I personally prefer to work in ImageReady CS2, but it's
useful to know how to optimize transparent graphics here too.
| | 00:35 | The first thing we do is we remember that when we optimize
transparent graphics, we lose our nice anti-aliased edge,
| | 00:43 | so we want to set up a matte color.
| | 00:45 | We know that we want our matte color to match our background
tile, and this is the background tile that we're going to use,
| | 00:50 | so I'm going to go to the Save For Web dialog box by choosing File,
Save For Web and that opens up my little tiled background image.
| | 01:00 | I'm going to grab my Eyedropper Tool, and
I'm going to sample color from the beige,
| | 01:04 | so you can see that the Eyedropper Tool color updates automatteically.
| | 01:07 | Now I'm going to click Done.
| | 01:09 | Now I'm finished with my "cup tile" image.
| | 01:11 | The only reason I needed to have it open was to sample color.
| | 01:14 | I don't need to save my changes.
| | 01:16 | Now I'm going to take my herbalchai.PSD file, and choose File,
Save For Web and we need to set up our .GIF optimization settings,
| | 01:25 | so you need to turn on Transparency.
| | 01:28 | If we preview this image in our browser right now,
you can see that it's just on a white background,
| | 01:34 | so the next thing we need to do is specify our background image, so we're
going to go up to the little popup menu, choose Edit Output Settings,
| | 01:42 | we're going to choose Background, and we're
going to click the Choose button beside the path.
| | 01:47 | This looks identical as it did in ImageReady CS2, and click Choose, and
choose "cup tile" from my transparency folder, click OK, click OK again.
| | 01:57 | Now let's preview this in a browser.
| | 01:59 | Now we need to address the edge issue, which has to do with matte color.
| | 02:04 | So let's close our web browser.
| | 02:06 | We sampled color from our cup tile earlier, so that's set as
our Eyedropper color, and from the matte color popup window,
| | 02:12 | I'm going to choose Eyedropper Color.
| | 02:14 | If you knew the RGB value, you could also click Other to open up
the Color Picker dialog box, and you could type in the RGB value.
| | 02:21 | I just find it easier to sample color.
| | 02:24 | So we have our matte color set up, let's preview that
in our browser, and now you can see it's looking good.
| | 02:29 | We have mimicked the anti-aliased edge by applying a matte color to fill
the partially transparent pixels with solid color, so let's close this,
| | 02:39 | and now let's go through the process of saving.
| | 02:42 | I'm going to click the Save button in the Save For Web dialog box, I'm
going to go to my desktop and create a new folder called "herbal chai,"
| | 02:49 | going to click Create.
| | 02:55 | I want to make sure that I'm saving both the HTML
and the images, and I'm going to click Save.
| | 03:00 | Now if we go to our desktop, here's our herbal chai folder,
and this looks identical to what it did in ImageReady CS2.
| | 03:07 | We have our HTML file, our images folder that contains the herbal
chai .GIF and the cup tile .GIF, which is our tile background.
| | 03:17 | If we double-click to open this up, you can see that it looks
great in our web browser, and that matte color has really worked
| | 03:23 | to simulate the anti-aliased edge, so that's how you
could optimize transparent .GIFs in Photoshop CS2.
| | 03:29 | As you can see, the principles are identical, but the
workflow is a little bit different than ImageReady CS2.
| | Collapse this transcript |
| Creating Transparent GIFs from Non-Transparent Images| 00:01 | >>There will be times when you're given an image and you want some
of the areas to be transparent during the optimization process,
| | 00:08 | so here we have an image that is fully opaque.
| | 00:10 | These is no transparency in this image, but what we
might want to do is have some areas of transparency.
| | 00:16 | For example, we might want to knock out this beige background so we
just have these two nicely rounded rectangles on top of the background,
| | 00:25 | so let's see how we would do that.
| | 00:28 | We go to the File menu and choose Save For Web, and I'm going to sample
color with my Eyedropper Tool, I'm going to sample this background color,
| | 00:38 | which is that light beige, and now what I'm going to do is I'm
going to click this Map Selected Colors To Transparent button,
| | 00:45 | and you can see that that automatically looks for all the instances
of that color in the image, and it maps them to be transparent.
| | 00:53 | Let's grab the Hand Tool and click and drag
and move around and see what this looks like.
| | 00:58 | Now what we want to do is use the same principles that we used before to
optimize this as a transparent graphic. So the first thing that we're going
| | 01:07 | to do is we're going to figure out something to put
this onto, some sort of a background to put this onto,
| | 01:12 | so I'm going to go up to my little popup menu here. I'm going to
choose Edit Output Settings, I'm going to go to Background,
| | 01:19 | and instead of actually having an image specified in here, I'm just
going to click Delete. I'm going to choose a solid color from in here,
| | 01:26 | so let's go to Other. Let's just choose a dark
red, and I'm going to make note of these RGB values.
| | 01:35 | 143, actually, let's make this 145 just so it's easy to remember.
| | 01:41 | 145, 35, 35, and I'm going to click OK. Click OK again.
| | 01:48 | Now what we need to do is we need to set our matte color, because
remember, if we look at this in our web browser right now,
| | 01:53 | we're going to have those really ugly jagged edges, so we want to specify
a matte color that matches this background. So what we're going to do is go
| | 02:01 | to our Matte Color popup menu, and we're going to choose Other, and
I'm going to type 145, 35, 35, which is the color that we specified
| | 02:10 | as our background, and I'm going to click OK.
| | 02:13 | Now let's take a look at this in our browser.
| | 02:15 | Now you can see that we have optimized this and used the mat
color, so it's now making those edges a little bit softer.
| | 02:24 | Now, you can see that there are some issues with this technique, because
when we map those pixels to transparent, obviously in the anti-aliasing
| | 02:31 | on the type here, some of those little beige pixels
were used, likewise around the edges of these.
| | 02:37 | That's why they're not looking as clean as they could.
| | 02:39 | So there are some limitations with this technique, but for the most part,
if you have a very simple graphic and you need to be able to knock out some
| | 02:47 | of those areas to transparent, you can rely on this technique to do that.
| | 02:51 | Let's just exit out of the Save For Web dialog box here, and
I want to show you another tool that you can sometimes use,
| | 02:58 | and that is the Magic Eraser Tool.
| | 03:00 | You can see it's the last tool in our eraser tool file, and what that lets
us do is basically click any color inside the image and map the pixels
| | 03:09 | to transparent, so let's take a look.
| | 03:11 | Let's actually knock out these green here.
| | 03:13 | Now, you can see that it...
| | 03:14 | I'm going to have to click each time that I see it in
my image, and there you can see it's knocking it out.
| | 03:22 | Now, in a case like this, it's not doing a great job, because again,
where you have anti-aliasing, it has to make some guesses about what colors
| | 03:30 | to keep, but this is a tool you can use as well if
you need to quickly get some areas to be transparent.
| | 03:37 | Let's just go backwards in our History palette to
when we opened it and return to our image, how it was,
| | 03:44 | so you can see that the Magic Eraser Tool can
sometimes be reliable, sometimes it can't.
| | 03:49 | It really depends on what pixels you're trying to make transparent.
| | 03:53 | Again, this whole idea comes back to the idea of working on layers.
| | 03:56 | Had this particular image been a layered file, I wouldn't have had
this image, because I could have just turned on and off the visibility
| | 04:03 | of different layers, and I wouldn't have had to rely
on either of the techniques I showed you in this file,
| | 04:07 | so keep that in mind as you're building your files.
| | 04:10 | Working with layers is important, and also keep in mind the
techniques that I showed you in the event that you're really stuck
| | 04:16 | and need to convert some areas to transparent pixels.
| | Collapse this transcript |
| Simulating Transparency with JPEGs| 00:01 | >>As I mentioned earlier in this chapter, .GIF is the only
file format of .jpg and .GIF that supports transparency.
| | 00:09 | Now, if you have a photograph that you want to
optimize for the web that contains transparent areas,
| | 00:14 | you can simulate .JPG transparency using a mat color similar to what
we did when we were optimizing our .GIF, so let's take a look at that.
| | 00:22 | The first thing I want to do is I want to specify a background color
for my image, bwcause that's really going to illustrate the full idea
| | 00:29 | of how the matte color works with .JPG. I'm just going to sample a dark
green here with my Eyedropper Tool, and I'm going to go to the File menu
| | 00:37 | and I'm going to choose Output Settings, Background,
and I want to just choose a solid background color.
| | 00:43 | I'm going to choose my foreground color, which
is that dark green, and I'm going to click OK.
| | 00:48 | Now I'm going to switch over to my Optimize tab, and you can
see it automatically fills those transparent areas with white,
| | 00:56 | and I'm just going to leave the optimization settings
as they are, and let's preview this in our browser.
| | 01:00 | What you can see is that those areas automatically went to white, so unless
you specify otherwise, any transparent ares, when you optimize a .JPG,
| | 01:09 | will automatically go to white.
| | 01:12 | In this case, that's obviously not desirable, so
let's close out of this and go back to our image,
| | 01:17 | and what we're going to do is choose foreground color from our Matte Color
popup menu, because it's the same color we used for our background image.
| | 01:24 | You can see I'm still in my Optimize tab, and
it's filled those areas with that solid color.
| | 01:29 | Now let's preview that in a browser, and we can see that basically,
it just seamlessly blends into that, so that looks quite good.
| | 01:37 | Now, let's take a look at a slightly different example.
| | 01:39 | Let's go up to our file menu and choose Output Settings, Background,
and instead of choosing a background color, I'm going to choose None,
| | 01:48 | going to click the Choose button for path, go to our
transparency folder and use the cup tile folder and click OK.
| | 01:55 | And click Open.
| | 01:56 | Now, we obviously don't want our matte color to be
this dark green, so let's just go and set it to none,
| | 02:01 | and click the Preview In Default Browser button.
| | 02:04 | Again, we know that when it's none, it's set to white.
| | 02:07 | So, we can sample color from this background, but
how's that going to look on a patterned background?
| | 02:13 | Well, let's take a look.
| | 02:14 | So what we need to do is choose File, Open, open up our cup tile
image, grab our Eyedropper Tool, sample color, close our file,
| | 02:22 | and choose foreground color from the Matte Color popup menu.
| | 02:28 | You can see it fills those transparent pixels
with the beige, because I'm in my Optimize tab.
| | 02:33 | Let's preview that in a browser.
| | 02:34 | What we can see here is that basically it's filled
them with solid color, and that's sort of in the case
| | 02:41 | of a patterned background doesn't always yield the best results.
| | 02:44 | Right here it's against, you know, the top
corner, so it doesn't really look too bad,
| | 02:48 | but here you can see it really doesn't look terribly attractive, so
that's something that you're going to have to take into consideration
| | 02:54 | when you're going through your design.
| | 02:55 | If you want to use .JPGs with transparency, and you want to simulate the
look of transparency with a matte color, then what you're going to have
| | 03:03 | to do is be really careful, and you're going to have to make sure your
background is a solid color or doesn't have a really harsh pattern to it,
| | 03:10 | as it does in this example, because you can see here that we actually
got our layer as close to the edges of this image as possible,
| | 03:20 | so there's not really any more room we can cut out in terms of image area.
| | 03:26 | We've got this image extended right to the edges, so that's something
to consider during the actual design process, but as you can see,
| | 03:33 | you can simulate the look of transparency
using a mat color when you optimize as .JPGs.
| | Collapse this transcript |
|
|
10. Creating AnimationsCreating Animations from Layer Visibility| 00:01 | >>In the next chapter of movies, we're going to take a look at
how to build animations on Photoshop CS2 and ImageReady CS2.
| | 00:07 | New to Photoshop CS2 is the presence of the animation
palette and all the associated features that go with it.
| | 00:14 | In previous versions, this functionality has existed only in ImageReady.
| | 00:17 | Now it exists in both programs.
| | 00:20 | I personally still prefer to build my animations in ImageReady
CS2, but the functionality works the same in both programs,
| | 00:25 | so you can feel free to choose whichever works best for you.
| | 00:29 | In the first few movies in this chapter, we're going to focus on how to
create animations, and then later on we're actually going to take a look
| | 00:36 | at the optimization process.
| | 00:38 | The only thing that I want to point out here is that of the file
formats we've looked at in this movie training, .GIF and .JPG,
| | 00:44 | again .GIF is the only file format that supports animation, so that's
something that we need to consider when we're building animations.
| | 00:51 | We can also export our animations to Macromedia Flash, and we're
going to take a look at that later on in this movie training,
| | 00:56 | but for right now just keep in mind that we're going
to be eventually exporting these as animated .GIFs,
| | 01:02 | so let's start off with our first technique for building
animations, which is building an animation with layer visibility.
| | 01:09 | So I have my frame one here, and I'm going to click the Duplicate
Current Frame button, and I'm going to turn on the visibility
| | 01:15 | of the "steam 2" layer.
| | 01:16 | I'm going to Duplicate again, I'm going to turn off
the "steam" layer and turn on the "steam 3" layer.
| | 01:23 | Duplicate it again, turn off the visibility of the steam
three layer, turn on the visibility of the steam one layer.
| | 01:30 | Now let's play our animation.
| | 01:31 | And stop. Now what I want to do is I want to turn on the visibility of this
shadow layer, so you see I have frame 3 selected, and if I turn it on,
| | 01:42 | you can see that it only turns it on to frame 3.
| | 01:46 | It doesn't turn it on all the frames.
| | 01:48 | Now, I could easily go through and manually select any of these frames
and turn that on, but imagine when you're building complex animations,
| | 01:56 | when you end up with tens or hundreds of frames, that
can be a really tedious and time-consuming process,
| | 02:02 | so what I need to do is turn on this Unified Layer Visibility option.
| | 02:06 | First, though, I need to make sure that my shadow layer is
targeted, so I'm going to click the Unify Layer Visibility button.
| | 02:13 | It's going to ask me if I want to match the current visibility to the
other frames, and I'm going to click Match, and now you can see I have
| | 02:23 | that shadow in each of those frames, so now I'm going to
click Play, and now you see that we have that set up.
| | 02:31 | So let's take a look actually at how this looks in a web browser,
so I'm just going to make sure that I have .GIF selected here
| | 02:38 | from my Optimize palette menu.
| | 02:39 | I'm not really too concerned about the settings that I have.
| | 02:41 | Just make sure that you have something with 64 colors and above, and
we're going to just click the Preview in Default Browser button,
| | 02:49 | and you can see how fast that little animation plays, so what we want to
do is we want to adjust the frame rate so it slows it down a little bit,
| | 02:57 | so let's go back to our teacup image, and you can see here that
we have a Delay popup menu, and I'm going to set that to .2.
| | 03:05 | Now, that only affected the current frame that I was working with.
| | 03:09 | If I want to affect all frames, I can click a frame, hold down
the Shift key to multiple-select all the frames I want to affect,
| | 03:18 | choose .2 from the popup menu, and now
you can see all frames have that reflected.
| | 03:24 | Now let's preview the animation in our browser.
| | 03:26 | So here you can see now it's playing at a much better rate, so
let's turn off or close out of our web browser and go back here.
| | 03:35 | I want to show one more option here when we're
playing our animation, and that's the looping options.
| | 03:41 | Looping has to do with how often our animation repeats, so right now it's
set to forever, so if I click Play, it's basically just going to play
| | 03:49 | until I choose to stop it.
| | 03:52 | If I want, I could also set it to once.
| | 03:55 | That way, if I click the Play button, it's going to play once and stop.
| | 03:58 | I could also set this by any other number of times.
| | 04:03 | It says five times here because I actually used five times at one
point when I was using ImageReady CS2, so you may not see that there.
| | 04:10 | So I can click Other and we can set our loop count.
| | 04:13 | Let's set that to three, and click OK, and now we'll click Play.
| | 04:22 | Now it plays three times and stops.
| | 04:24 | Let's preview that in our browser.
| | 04:29 | There we go.
| | 04:30 | Now it's played three times and stopped, so let's close
out of our browser and return back to ImageReady CS2.
| | 04:37 | So that's how we can create some really simple
animations in ImageReady CS2 by using layer visibility.
| | 04:45 | In the next movie, we're going to take this
up a notch and start working with tweening.
| | Collapse this transcript |
| Tweening with Opacity| 00:01 | >>Next we're going to take a look at how
we can build animations by tweening.
| | 00:05 | In this movie, we'll take a look at tweening by working with layer
opacity, and in the next movie, we'll take a look at tweening
| | 00:10 | with layer visibility and layer position.
| | 00:13 | So right here I have an image that has a teapot on one layer and
our "White Tea" on a second layer, and what I want is for this "White Tea"
| | 00:22 | to fade in really slowly.
| | 00:25 | Now, I can't really do that with layer visibility, because layer visibility
is on or off, but what I can do is fade it in with layer opacity.
| | 00:33 | So what I'm going to do is I'm going to start with my animation frame
frame one, and I'm going to drop the opacity on my "White Tea" layer.
| | 00:40 | I'm going to target that in Layers palette, and I'm
going to drop the Opacity to zero, so I can't see it.
| | 00:46 | Now I'm going to duplicate my frame, so I have frame two, and
with frame two selected, I'm going to turn up the Opacity to 100%.
| | 00:55 | Now let's click Play and see what happens.
| | 00:57 | Now you can see it's just flashing on and off.
| | 00:59 | What I want it to do is fade in slowly.
| | 01:02 | Now, I could go through the process of creating multiple frames, and, you
know, incrementally increasing the opacity, but that would take forever
| | 01:09 | and would not yield a very good result.
| | 01:11 | We're going to let ImageReady do that for
us, and we're going to do that by tweening.
| | 01:14 | So I'm going to choose frame two, I'm going to
hold down my Shift key and choose frame one.
| | 01:20 | Now I'm going to click the Tween button to open up this Tween dialog
box, and what I want to do is I'm going to tween with my selection,
| | 01:27 | and I'm going to add a total of 15 frames.
| | 01:32 | I want to make sure that I have all of my layers.
| | 01:34 | You could also choose to work with selected layers, but I'm going
to use all layers, and I want to make sure that my position,
| | 01:41 | opacity and effects are turned on.
| | 01:42 | For this, we're really only concerned with the opacity, but later on, we
may change our mind, so I always like to leave these three options checked,
| | 01:49 | and now I'm going to click OK. You see what it's done is it's
created a bunch of frames for us, and if we look at the previews,
| | 01:56 | you can see that it's slowly fading that white
T in, so let's play this and see what we get.
| | 02:01 | You can see that it's fading in really nicely.
| | 02:08 | Now, unfortunately, at the ends, what's happening is we're going from
frame 17 back to frame one, and it's just a really harsh transition.
| | 02:17 | Now, I could just choose tom play this once and stop it.
| | 02:20 | We know how to do that by specifying once in the looping popup
menu, but now what I want to do is I really liked how it faded in.
| | 02:28 | Now I want it to fade out. I could just do the same thing
that I did before, and create my frames and tween them,
| | 02:36 | but what I could actually do now is just create a whole separate set
and then reverse them. So, with my frame one selected,
| | 02:44 | I'm going to scroll over, hold down the Shift key, and click
frame 17. I'm going to go to my Animation palette menu
| | 02:51 | and I'm going to choose Copy Frames. Now I'm going to choose Paste
Frames and it's going to ask whether I want to replace them,
| | 02:59 | if I want to paste it over, if I want to
paste it before, or if I want to paste after.
| | 03:04 | I want to paste after, so I'm going to click OK.
Now you can see that I have another 17 frames here.
| | 03:12 | Unfortunately, now what's going to happen is it's still going to go from
fully opaque to fully transparent, and that's not really what I want,
| | 03:21 | but I do still have these frames selected.
| | 03:23 | If you don't, you can just hold down the Shift key and select
from frame 18 all the way up to frame 34. I'm going to choose
| | 03:31 | Reverse Frames, and that's going to reverse the order.
So let's take a look at what happens now when we play this.
| | 03:37 | Now you can see that it's fading in and fading out, so that was a
really simple way for me to be able to create this really nice effect,
| | 03:49 | so let's click Stop. In the next movie we'll take a look
at some more techniques by tweening with layer visibility,
| | 03:58 | by tweening with layer position and layer styles.
| | Collapse this transcript |
| Tweening with Position and Layer Styles| 00:01 | >>In the last movie, we took a look at how to tween with opacity,
and in this movie, we're going to take a look at how we can tween
| | 00:06 | with layer position and layer styles.
| | 00:11 | So you can see here we have our ""White Tea"ea" layer on top of our teapot
and I'm going to target that layer. I'm going to grab my Move Tool
| | 00:18 | and I'm going to click and drag so that it's all the way at the top.
I can see my little Smart Guide up there and I know that the top
| | 00:24 | of the letter H is right against, flush against the
top of my document window, or the edge of my image.
| | 00:30 | Now what I'm going to do is I'm going to click the Duplicate
Current Frame button with my "White Tea" layer still targeted
| | 00:36 | and the Move Tool still selected in the Toolbox,
I'm going to drag it all the way down to the bottom.
| | 00:41 | I want to try to keep it in a nice straight line,
so now you can see it's nice and snug at the bottom.
| | 00:46 | I see my Smart Guide.
| | 00:48 | But the problem here is that if I tween now, we're not going to be
able to see our "White Tea" text because it's on top of a white teapot.
| | 00:55 | But I liked how it was white at the top, so what I'd like it
to do is I'd like as we go down for it to change from white
| | 01:01 | to a slightly different color. Let's do that with a layer style.
| | 01:05 | With my "White Tea" layer targeted, I'm going to go to my Add A Layer
Style popup menu, and I'm going to choose gradient overlay,
| | 01:12 | and you can see right now it's set to use the current foreground
and background color swatches, which is going from gray to white.
| | 01:19 | I want to change that, so I'm going to
click to open up this Gradient Editor.
| | 01:23 | I'm going to click this little gray button right here, double-click it to
open it up. I want to choose a couple of different colors of purple,
| | 01:32 | so I'm going to go up here and just choose,
you know, a nice dark purple, and click OK.
| | 01:39 | That's going to update the stop on this side.
| | 01:41 | Now we want to update on this side, because
we don't want any white in this gradient.
| | 01:45 | I do just want sort of a nice really light soft purple, just something
that has a little bit of color to it but that's still going to be able
| | 01:52 | to be seen when it's on top of this teapot. Something like this
should do the trick. So let's click OK and this looks quite nice.
| | 02:00 | We'll click OK, and now we can preview how that's looking.
| | 02:04 | We can increase the scale or decrease the scale.
| | 02:07 | I actually like it when it's decreased so that
we see a little bit more of the lighter up here...
| | 02:12 | I actually am finding that this is not a great purple.
| | 02:15 | I want to darken that up a bit, so let's click our gradient one more
time, double-click the stop, and let's choose a slightly darker purple.
| | 02:24 | There we go.
| | 02:25 | Click OK and you can see that's starting to look a little bit better
now. Let's click OK to exit out of our Layer Style dialog box
| | 02:33 | and make that change. Now you can see we're going from here to here
if I click on my two frames, so let's tween between those two frames.
| | 02:41 | I'm going to hold down my Shift key and select, click the Tween button,
and we want to make sure that Position, Opacity, and Effects are turned on.
| | 02:51 | Let's tween this by, say, 25 frames, click
OK, and now let's play our animation.
| | 02:58 | There you can see it creates a really nice effect, so let's stop this,
and wrap up for now, but leave this file open if you're following along,
| | 03:13 | because in the next movie I want to show you the process
for actually optimizing and saving this as an animated .GIF.
| | Collapse this transcript |
| Optimizing and Saving Animated GIFs| 00:01 | >>Now that we've learned some different techniques for creating animations,
let's take a look at the process for optimizing and saving animations.
| | 00:08 | There's two file formats that you can
use when you're working with animations.
| | 00:12 | You can optimize and save as an animated .GIF or as an animated Flash file.
| | 00:17 | In this movie, we're just going to focus on animated
.GIFs, and in the next chapter, we'll take a look at how to work
| | 00:22 | with Macromedia Flash files.
| | 00:26 | So what we need to do here is switch to our Optimize tab, and we want
to make sure that we have .GIF selected from our Format popup menu.
| | 00:36 | Basically the same principles apply when we're
optimizing an animated .GIF as it does with any other .GIF.
| | 00:42 | We want to go through our color table and figure out how many colors
we can reduce our animation down to without affecting the quality.
| | 00:51 | Now, because we have some areas down here that fade and don't have
really sharp edges, we'll probably find that we have to keep the number
| | 00:58 | of colors quite high, so in this case, we're probably
going to need to leave this at the full of 256.
| | 01:05 | So that's our first frame.
| | 01:06 | Now, what about the subsequent frames?
| | 01:08 | Well, one of the limitations about optimizing using a .GIF file
format is we can only use one optimization setting for all frames,
| | 01:17 | so what you really need to do is go through and make sure that all of the
frames look good with the optimization settings that you're working with.
| | 01:26 | That will really help you, so if you need to refresh your memory on
how to optimize .GIFs, go back and take a look at some of the exercises
| | 01:35 | in the optimization chapter, but basically the same principles apply here.
| | 01:40 | I'm just going to leave this the way it is with our 256 colors.
| | 01:44 | It is a relatively big file, but that's OK for now, and what
I'm going to do is just go ahead and save the optimized version,
| | 01:51 | so I'm going to choose File, Save Optimized as, and of course I
have the option to save HTML and images, images only, or HTML only.
| | 02:00 | I'm going to choose images only, and that's because one
of the nice things about the animated .GIF file format is
| | 02:06 | that it doesn't need any additional HTML code to work in a web browser.
| | 02:11 | A web browser sees an animated .GIF just as it does a regular .GIF,
and it just plays the series of static frames one after the next based
| | 02:18 | on the frame rate you have specified.
| | 02:22 | Now, if you're optimizing to the Macromedia Flash format, you'll need to
have a special browser plug-in, and that's where you're probably going
| | 02:28 | to want to generate the HTML code, because it will
generate the code to go and look for that plug-in for you,
| | 02:32 | but let's not worry about that for right now.
| | 02:34 | Let's just focus on this animated .GIF.
| | 02:36 | So I'm going to save this on my desktop, my whiteteafinal.GIF, I'm
going to click Save. Sometimes if you have a long animation,
| | 02:44 | it'll take a little bit of time, so just be
patient. So here we have our whiteteafinal.GIF.
| | 02:50 | If I double-click it, it'll open up in Photoshop, but what
I can do is just click and drag it down onto my web browser,
| | 02:55 | and there you can see it playing.
| | 02:57 | And here we can see our whiteteafinal.GIF
file, and I didn't have to do anything.
| | 03:03 | I didn't have to write any HTML code.
| | 03:04 | I didn't have to save any HTML code.
| | 03:06 | My web browser just knew exactly what to do with it.
| | 03:09 | Now, you can also play this animation or take a look at it by choosing
File, Open File, and navigating to your desktop to find it.
| | 03:16 | So if you can't click and drag onto your web browser
like I did, especially if you're using Windows,
| | 03:20 | that's another technique where you can take a
look at how this is working in your web browser.
| | 03:24 | So that's how simple it is to optimize and save as an animated .GIF.
| | 03:30 | Now, I want to jump over to Photoshop CS2 and just walk you
through the process there, because it is a little bit different.
| | 03:35 | Let's click the Edit In Photoshop button to open our file
in Photoshop, and this is going to take a little bit of time just
| | 03:41 | because we have an animation here... so here we are in Photoshop.
If I go to my Window menu, I can choose Animation.
| | 03:51 | That's going to open up my Animation palette, and you can
see it's got all the frames that I've created in this file,
| | 03:58 | so how are we going to optimize this?
| | 03:59 | Well, first I need to go File, Save For Web and open up the
Save For Web dialog box. Again, the same principles apply.
| | 04:07 | We need to choose .GIF, we need to specify a number of colors.
| | 04:11 | Now, the trick here is how are you going to view all of the different
animation frames, because as we looked at with ImageReady CS2,
| | 04:17 | when you save an optimized animated .GIF, it
only has one optimization setting for all,
| | 04:23 | and you want to be able to preview what it looks like on each frame.
| | 04:26 | Well, fortunately, we have these nice little controls down here.
| | 04:29 | I can play the animation to see how it's looking, or I
can go back and forth and look at each frame individually,
| | 04:37 | so these little navigation buttons here are what allow me
to go through and take a look at how my animation looks
| | 04:45 | at each frame throughout the process of this animation.
| | 04:48 | When I'm finished and I'm happy with my settings, I can click Save.
| | 04:52 | That'll open up my Save Optimized As dialog box.
| | 04:55 | I'm going to go to my desktop.
| | 04:56 | I'm just going to choose images only, because we don't need to save the
HTML, as we saw earlier. And let's call this whiteteafinal_ps to stand
| | 05:05 | for Photoshop, click Save, and we'll go to our desktop.
| | 05:09 | There's our file, and just like before, we'll click and drag and position
this on top of our browser icon down here to open it up, and there it is.
| | 05:18 | We have out whiteteafinal_ps file, and you can see that
it saves it identically the way that ImageReady CS did,
| | 05:23 | so you can see that you can optimize and
save your animations in both programs.
| | 05:28 | It's just a slightly different process.
| | 05:30 | I do prefer to use ImageReady, because I like having access to
the Optimize palette and you can review it easier
| | 05:37 | and look at optimization settings on each frame in your document window.
But if you're more comfortable with Photoshop, you can certainly go ahead
| | 05:44 | and save and optimize your animations there, too.
| | Collapse this transcript |
| Optimizing Transparent Animated GIFs| 00:01 | >>Next I want to just take the principles that we've learned in this
chapter and the principles that we've learned in the last
| | 00:07 | on working with transparent graphics, combine them
together and think about what we would do if we had an animation
| | 00:12 | that contained transparent content.
| | 00:14 | Well, we know that we have to use the .GIF file format, number one. That's
fine, but what are we going to do with the edges of our transparent .GIF?
| | 00:21 | How's it going to affect it? All that kind of stuff.
| | 00:23 | Let's figure it out here.
| | 00:24 | Well, it's basically the same process as saving a
static .GIF, but let's take a look at how it works.
| | 00:29 | I'm going to click Play so we can take
a look at what this animation looks like.
| | 00:33 | You can see that each of the elements just slowly fades in.
| | 00:43 | Now what I want to do is I want to put this on a
colored background, so I'm going to go to my File menu,
| | 00:48 | I'm going to choose Output Settings, Background.
| | 00:51 | I'm going to go to my Background Color popup menu, and choose
Other, and I'm going to type in a specific RGB value
| | 00:57 | for my background color: 195, 195, 145.
| | 01:02 | I'm going to click OK, and there we
have that beige we've been working with.
| | 01:07 | I'm going to click OK, and now let's take a
look at what this looks like in our web browser.
| | 01:11 | Well, first of all, it's on a white background, and we know that that
can be solved by turning on the transparency check box, so let's do that.
| | 01:22 | Go over here and turn on the transparency check box.
| | 01:25 | Now let's take a look again.
| | 01:27 | Now it's on the actual background, but we still have this really
ugly jagged edge. We know that that's a result of the fact
| | 01:38 | that the animated .GIF format, or the .GIF format in general, which
doesn't support pixels that have partial transparency.
| | 01:45 | They're either turned on or they're turned
off, so we're losing our anti-aliasing.
| | 01:48 | So let's go back to ImageReady, and we know how to fix this.
| | 01:52 | All we have to do is choose our Matte Color pop-up menu, this time we're
going to choose Other, and just like with our background image,
| | 01:58 | I'm going to type in a RGB value, 195, 195, 145. Click OK.
| | 02:06 | Let's take a look at this in our browser.
| | 02:10 | Now we've got our nice anti-aliased edge, because the matte color is
adding pixels around the edges, just like it did in the last chapter,
| | 02:19 | and it's making it blend seamlessly with the background.
| | 02:22 | Now, just like saving any other animated .GIF,
what we want to do is click our Optimize tab,
| | 02:27 | and we want to take a look at the optimization settings on each frame.
| | 02:31 | We want to just scroll through and make
sure that we're happy with how it looks.
| | 02:36 | I have this set right now to 128 colors.
| | 02:39 | If I go down to 64, I start to really lose the anti-aliasing on
some of these internal elements here, and I really don't like that,
| | 02:46 | so I'm going to return it to 128.
Going to 256 doesn't really buy me that much more.
| | 02:54 | All that it does really is increase my file
size, so I'm perfectly happy with this at 128.
| | 02:59 | So what we want to do is just play our animation with the Optimize tab
selected, so that we have a look at how it looks, and it's looking fine,
| | 03:08 | all the transitions are coming in quite nicely.
| | 03:18 | You can see there it looks a little bit wonky, but once we actually play
this in our browser, you're not really going to see that transition.
| | 03:24 | So I'm going to choose File, Save Optimized As, and we're going to go
to our desktop and we're going to create our herbalchai.HTML and images.
| | 03:34 | The reason I'm creating HTML here is not because we
need the code in order to play that animated .GIF.
| | 03:40 | It's there because I want the animated .GIF to appear on that solid-color
background that I created, so I'm going to create a new folder called
| | 03:47 | "herbal chai". I'm going to click
Create, and now I'm going to save it.
| | 03:53 | Go to our desktop.
| | 03:54 | Here's our HTML file.
| | 04:01 | Here's our animated .GIF image.
| | 04:04 | We're going to double-click, and there we go.
| | 04:08 | Now we can see our file coming in.
| | 04:14 | So that's just the principles for how to save an animated
transparent .GIF, and you can see that they're basically the same
| | 04:21 | as creating a static transparent .GIF, but it's important
to understand that when you're working with animation too.
| | Collapse this transcript |
| Creating an Animated Slide Show| 00:01 | >>The last thing we're going to do is take a
look at how to create an animated slideshow.
| | 00:05 | So basically we're going to take a series of photographs
and transition nicely between one and the next.
| | 00:11 | One way I could do that is open all the photographs that I want
to open or put all the contents into a single file and turn on
| | 00:17 | and off layer visibility, but ImageReady actually has a
really useful feature to help you setup an animated slideshow.
| | 00:24 | So I'm going to start by going to my File menu
and I'm going to choose Import, Folder as Frames.
| | 00:30 | So I'm going to choose that...
| | 00:31 | Then I'm going to go to my desktop to my exercise
files folder, into our animation folder.
| | 00:35 | I'm going to open this folder called Slideshow,
and I'm going to click Choose.
| | 00:40 | You can see there's a total of five photographs in there.
| | 00:44 | What it's done, is it's basically opened up all four and it's put each
one on an individual layer and each one as its own individual frame.
| | 00:52 | So this just saves me the hassle of having to open individual photographs,
put them all on to individual layers, turn on and off the visibility
| | 00:59 | and all that kind of nonsense for each individual frame.
| | 01:02 | Now I can just go right into tweening.
| | 01:04 | So what I want to do is I don't want to have
this harsh transition between these slides.
| | 01:09 | What I want is to have a really nice cross-fade between each one.
| | 01:12 | So with frame one selected, I'm going to
hold down the Shift key and click frame two.
| | 01:16 | I click the Tween button, and I'm going to add about
25 frames in between. I'm going to leave it set to 25 here.
| | 01:23 | And I'm going to click OK.
| | 01:25 | Now, I'm going to skip ahead.
| | 01:30 | I'm going to go to frame 27 and 28.
| | 01:40 | I'm going to hold down my Shift key to multiple-select them.
| | 01:43 | I'm going to click the Tween button, I'm going to leave it at 25.
| | 01:46 | Click OK. And there it's created the individual frames in between.
| | 01:51 | Let's skip ahead.
| | 01:52 | We're going to go up to frame 53 and 54.
| | 02:01 | We're going to multiple-select those.
| | 02:02 | I'm going to click the Tween button.
| | 02:04 | We're going to leave the settings the same and click OK.
| | 02:09 | Now we're going to go all the way to the end, which is our last two frames.
| | 02:14 | Hold down the Shift key to multiple-select; click
Tween; leave the settings the same; click OK.
| | 02:22 | Now let's play this and see what we get.
| | 02:42 | Now you can see there's a really harsh fade
from that last frame to the first frame.
| | 02:46 | One thing I could do is just set this to once.
| | 02:49 | It'll go back to the beginning and start with frame one.
| | 02:51 | And what that'll do is it'll just play it once and then stop it.
| | 02:55 | But if I want the whole thing to just continue to play over and
over seamlessly, I can actually fix this little issue quite simply.
| | 03:03 | So I'm going to click my frame, and I'm going to click the Tween button
and instead of choosing Previous Frame, I'm going to choose First Frame.
| | 03:12 | We're going to add 25 frames and I'm going to click OK.
| | 03:15 | We'll go back to the beginning here and play it.
| | 03:19 | And there you can see it's making that nice,
seamless transition back to the beginning photograph.
| | 03:40 | I could also choose to set this back to forever,
and then it'll just keep playing indefinitely.
| | 04:02 | Let's click Stop.
| | 04:03 | So you can see that this is a really nice technique
for creating an animated slide show of photographs.
| | 04:08 | Especially that File, Import Folder as Frames command because
it really saves you the hassle of putting all of your photographs
| | 04:15 | on individual layers and then playing around with the
layer visibility in order to get your animation setup.
| | 04:20 | This just does it for you automatically.
| | 04:23 | So this is a really great technique and a really
useful feature in ImageReady CS2 that you can use.
| | Collapse this transcript |
|
|
11. Creating SWF Files for the WebCreating SWF Files for the Web| 00:01 | >>ImageReady CS2 has a feature called Export to
Macromedia Flash, and that feature lets you do two things.
| | 00:08 | It lets you A) export content to use directly on the web without the need
to use Macromedia Flash, and B) it allows you to export content
| | 00:16 | to the Macromedia Flash format, which you can then open and edit.
| | 00:21 | In this chapter, we're going to focus on the creation
aspect, as in we're going to create content in ImageReady
| | 00:27 | that we can publish directly on the web.
| | 00:29 | Later we'll take a look at how to integrate with Macromedia Flash
in terms of how to take your layered Photoshop files and get them
| | 00:35 | into Macromedia Flash successfully.
| | 00:37 | Right now we're just going to focus on how to get images onto the web.
| | 00:40 | So we're going to start in this movie by looking at static images and then
in the next movie we'll take a look at animations and some of the pros
| | 00:46 | and cons of what you can do with the export to Macromedia Flash feature.
| | 00:49 | You can see that I have a file that has some transparency
here and I have it set it up like that for a reason.
| | 00:56 | So let's just go ahead and export this to a Flash file.
| | 01:00 | So I'm going to choose: File, Export, Macromedia Flash.
| | 01:06 | I have a number of options in this dialog box.
| | 01:09 | The options that we're going to use here are going to be very different
than what we use later on in this movie training when we take a look at how
| | 01:15 | to integrate between the two programs.
| | 01:17 | Any time I export an image to use it directly on the web, I
want to make sure I turn on this Preserve Appearance option.
| | 01:24 | What that's going to do is it's going to insure that everything
looks identical in the final exported SWF file as it does
| | 01:33 | in the original ImageReady CS2 file.
| | 01:36 | If you turn that off, you risk losing some of your features
such as layer styles, adjustment layers and that kind of thing.
| | 01:43 | So make sure when you're going directly to
the web you leave this option turned on.
| | 01:48 | The next thing that we're going to do is
we're going to choose a background color.
| | 01:51 | So I'm going to click and go to Other, which is going to open up the Color
Picker dialog box, and I click on "H" so that we can view this by hue,
| | 02:01 | and I'm going to type in 209, hit the Tab key, 235, hit
the Tab key again, 209, and hit the Tab key one more time;
| | 02:12 | and that's going to make this a nice light green.
| | 02:14 | Then I'm going to click OK.
| | 02:16 | I want you to think about the term "background color"
and what that would mean to you because this may
| | 02:22 | or may not confuse you what's actually going to end up happening.
| | 02:24 | So just think about that.
| | 02:26 | We've chosen to create a background color
and we've made it this light green.
| | 02:29 | So think about it what you might think will
happen and we'll compare that in the final file.
| | 02:33 | The next thing we're going to do is turn on the Generate HTML option.
| | 02:38 | The Macromedia Flash format or the SWF format requires that
all web browsers have a plug-in, the Macromedia Flash plug-in,
| | 02:46 | in order to view SWF files in a browser.
| | 02:48 | Now, most people nowadays have them, most of the browsers now
ship their default settings with the Macromedia Flash plug-in.
| | 02:57 | But there will be some users that don't have it, so the nice
thing about when you generate the HTML from ImageReady,
| | 03:03 | it automatically looks for the Macromedia Flash plug-in.
| | 03:06 | If you don't have it installed on your computer, it will inform the
user, in the form of a dialog box, and it will give them the option to go
| | 03:14 | to the Macromedia website to download the plug-in for free.
| | 03:19 | So by generating the HTML you can see that there's a lot
of browser detection code that's involved in that process.
| | 03:25 | So even if you don't end up using the optimized HTML code, it's generating
the HTML for you to look for the browser, which you can then cut
| | 03:32 | and paste into HTML editor if you need to.
| | 03:35 | We're not going to leave dynamic text turned on
but we are going to come down here to our Options.
| | 03:40 | And we have basically three options that are
going to work for us when we're going to the web.
| | 03:46 | Let's start with Lossless 8.
| | 03:48 | Lossless 8 is basically like optimizing a file as a GIF.
| | 03:52 | JPEG is basically like optimizing a file as a JPEG.
| | 03:56 | Auto-select will basically choose whichever it feels
is the best format based on the content of the file.
| | 04:03 | So when you're exporting images for the web, I typically use Auto-select.
| | 04:07 | I find it does a good job of figuring out the
smallest file size and the best quality image.
| | 04:12 | The one you want to stay away from when
you're going to the web is Lossless 32.
| | 04:16 | And that will increase your file size because it maintains all
the transparency in the file, it doesn't compress the file at all.
| | 04:22 | So, that's one that you want to stay away from.
| | 04:25 | Later in this movie training, when we look at how to
take our files into Macromedia Flash to edit them,
| | 04:30 | we're going to want to look at this option a little more carefully.
| | 04:32 | But for right now we're going to leave this on Auto-select.
| | 04:35 | Now we have a JPEG quality.
| | 04:37 | This is available if we choose Auto-select, JPEG;
but it's not available if we choose Lossless 8.
| | 04:43 | So let's choose Auto-select and this basically
let's me control the quality of it.
| | 04:48 | Now, the frustrating thing about this particular
feature is that you don't get a preview.
| | 04:53 | So you can't see the difference between an 80 and a 40 quality.
| | 04:59 | So, what you have to do is save the file, take a look at
it, if you're not happy with it, come back and re-export it.
| | 05:04 | So, let's start around the 80-mark, that's
what it has as the default setting.
| | 05:08 | And we'll leave it there and we're going to click OK.
| | 05:11 | That's going to open up our export as Macromedia Flash dialog
box and we're going to be able to tell it where to save the file.
| | 05:17 | So, I'm going to click my desktop, I'm going to create a new
folder and I'm going to call it SWF. Then I'm going to click Create
| | 05:25 | and I'm going to click Save.
| | 05:27 | Now, this warning message is going to come up
any time you have Preserve Appearance turned on.
| | 05:32 | What it says is that one or more text or shape
layers were flat because Preserve Appearance was checked.
| | 05:38 | We take a look at our file, you can see
that we actually have a shape layer.
| | 05:42 | The thing is is that because this is going directly to the web, we
don't care if it flattens our file because we're not going to open it
| | 05:49 | in Macromedia Flash and try to edit the layers.
| | 05:52 | We're basically just exporting it so we can put it up on the web.
| | 05:55 | We're always going to have the layers in our Photoshop file; it's
just that they're not going to be in this SWF file, so that's fine.
| | 06:01 | We'll click OK and acknowledge that.
| | 06:03 | Now, let's go to our desktop and we're going
to double-click the SWF folder to open it.
| | 06:07 | You can see we have the javacotea.HTML file and the javacotea.SWF
file. If I double-click the file you can see
| | 06:14 | that it's automatically going to open it in my web browser.
| | 06:17 | Now, let's get back to this idea of background color.
| | 06:19 | When I first looked at this feature, I anticipated that background
color meant background color as in what we thought of it earlier
| | 06:27 | in this movie chapter when we apply a background color or a
background image to the entire background of our web page.
| | 06:33 | That's not the case.
| | 06:34 | SWF background color in the export Macromedia
Flash dialog box works more like matte color.
| | 06:40 | So remember when we optimize transparent JPEGs and we turned on
matte color, it filled the transparent pixels with solid color.
| | 06:47 | That's how the background color behaves in this particular feature.
| | 06:52 | So, it's really there to function more as a matte color and make sure that
you have smooth transitions, than it is to fill up the entire background.
| | 07:00 | If you want to add a background color to this, you can do so
using the output settings dialog box using the same techniques
| | 07:06 | that we learned earlier in this movie training.
| | 07:09 | So that's basically how easy it is to export a SWF.
| | 07:13 | So let's close this and just take a look at our file here.
| | 07:16 | I'm going to press (Command + I), and you can see
that this file is 20K, so it's relatively small.
| | 07:23 | We don't really need to worry too, too
much more about what we want to do with it.
| | 07:27 | If we wanted to we could go back to ImageReady
and try to reduce that quality setting;
| | 07:32 | which would probably result in a slightly smaller file size.
| | 07:35 | Now, you have to sort of weigh how much time you want to spend doing that.
| | 07:39 | As I said, 20K is already a fairly small file so we're
probably going to be fairly happy with that on-line anyway.
| | 07:44 | As you can see, that's the basic process for exporting
static images to the web using the Macromedia Flash format.
| | 07:52 | In the next movie we're going to take a look at
how to export animations as Macromedia Flash files
| | 07:57 | which adds a little bit more complexity into the equation.
| | Collapse this transcript |
| Creating SWF Animations for the Web| 00:01 | >>In the last movie we took a look at the process for taking an image that
was created in Image Ready CS2 and exporting it to a Macromedia Flash file
| | 00:10 | or SWF file so that we could use it directly
on the web without the need for Macromedia Flash.
| | 00:16 | We're going to take the concepts that we learned
in that movie and now apply them to animations.
| | 00:21 | And you might think, well, how different can it be?
| | 00:23 | In some cases, it's not that different, but in others, you're going to run
into some problems and the purpose of this movie is to show you what types
| | 00:29 | of animations will work well if you want to go directly to the web and
what types of animations you want to avoid and use Macromedia Flash for.
| | 00:37 | So, let's start with this teacup.PSD file.
| | 00:41 | If I click the Play button at the bottom of our animation palette,
you can see that basically this is like a little flipbook animation
| | 00:46 | where basically the visibility of these layers
is being turned on and off to simulate motion.
| | 00:52 | So let's take a look at how we're going to export this.
| | 00:54 | I'm going to choose File, Export, Macromedia Flash.
| | 00:58 | We're going to leave preserved appearance turned on because
we want the animation in this SWF file to look identical
| | 01:03 | to what it does in ImageReady CS2.
| | 01:05 | We're going to leave generate HTML turned on because we want ImageReady to
generate the browser detection code to make this file work in a web browser
| | 01:14 | because we know that in order to view a SWF file, your users
have to have the Macromedia Flash browser plug-in installed.
| | 01:21 | The browser detection code will make sure that they have it and if they
don't, it'll direct them to Macromedia's website so they can download it.
| | 01:28 | Now what we can do is we can take a look at these options.
| | 01:31 | I'm going to leave this on Auto-select, which, as we know from the last
exercise, is going to choose one of these three formats as the best quality
| | 01:39 | and the smallest file size.
| | 01:41 | So let's click OK.
| | 01:42 | That's going to open up our export dialog box and then I'm going to go
to my Desktop and I'm going to create New Folder called SWF Animation
| | 01:52 | and then I'm going to click Create.
| | 01:54 | Now I'm going to click Save.
| | 01:56 | Save my file.
| | 01:58 | We go into my folder.
| | 02:00 | Let's look at the file.
| | 02:01 | You can see the animation's come in beautifully.
| | 02:04 | Now let's take a look at the file size.
| | 02:06 | I'm going to click the file and I'm going to press (Command + I) on
Mac or I'm going to right-click and choose Properties on Windows
| | 02:12 | and you can see that the file is 40K.
| | 02:14 | Which isn't too bad, maybe a little bit bigger than you want
it to be, but in general it's not too bad. You can live with it.
| | 02:20 | So we can close that and close this window.
| | 02:23 | So this particular type of animation, where it's basically working
through layer visibility, works quite well if you want to export it
| | 02:32 | and use it directly on the web.
| | 02:34 | Really we don't need to take this into Macromedia Flash.
| | 02:36 | If we did, we could probably make it a
little bit smaller but not a whole lot.
| | 02:40 | We haven't lost any quality so there's really no
real need to do it for this particular type of animation.
| | 02:46 | Keep in mind, that's the type of animation that works well.
| | 02:49 | Let's move that one aside and go onto this one.
| | 02:52 | Now click Play so that you can see how this is built.
| | 02:55 | This is basically a series of three photographs that
I've tweened to create a cross-fade in between them.
| | 03:01 | So let's stop that and think of how we're going to export that.
| | 03:05 | So I'm going to choose File, Export, Macromedia Flash.
| | 03:09 | I'm going to use the same options that I did last time by choosing
Auto-select and leaving Preserve Appearance and Generate HTML turned on.
| | 03:17 | So again, what this is going to do is it's going to look through
each of these three formats and determine which one to use
| | 03:24 | to create the best looking file and the smallest file size.
| | 03:28 | So we're going to click OK.
| | 03:30 | This is tea shop.
| | 03:31 | And I'm going to call this, "tea shop auto", so that we know
exactly what's happening, it's the auto-select option.
| | 03:36 | This is going to be important later on.
| | 03:39 | Click OK. Now we're going to go to the folder and we're
going to open that HTML file and look at our image.
| | 03:47 | You can see it looks fabulous...looks just like it did in ImageReady.
| | 03:51 | Now, let's look at the file size.
| | 03:52 | I'm going to press Command.
| | 03:53 | I'm going to click the file.
| | 03:54 | I'm going to press (Command + I) on Mac or
right-click on Windows and choose Properties.
| | 03:59 | Now, here we have a problem.
| | 04:01 | A 1000 K, that's a MG.
| | 04:04 | Not going to work.
| | 04:05 | That is entirely too big for us to put that on the web.
| | 04:08 | So let's close this, and close this and
go back here and see what we can do.
| | 04:13 | Let's try some of the other formats.
| | 04:15 | Maybe Auto-select wasn't our best option.
| | 04:17 | Let's see what else we can produce here.
| | 04:19 | So I'm going to choose Export Macromedia Flash.
| | 04:22 | Let's start with Lossless eight.
| | 04:24 | I'm going to click OK.
| | 04:27 | Let's just call this "tea shop loss eight".
| | 04:33 | Click Save.
| | 04:36 | And I'll acknowledge the warning, go into
our folder and open up the HTML file.
| | 04:42 | Now this isn't what we want.
| | 04:44 | This has really degraded the quality of our animation.
| | 04:47 | You can sort of see these swimming little pixels that are
scurrying around our animation and the quality is not very good.
| | 04:54 | Now just for curiosity sake, let's take a
look at the file size: one point three MGs.
| | 04:59 | It's entirely too big.
| | 05:04 | So let's go back, see what else we can do here.
| | 05:06 | So File, Export, Macromedia Flash.
| | 05:11 | Let's try JPEG and see what we can do and let's just decrease the quality.
| | 05:16 | We'll decrease that maybe to 35 percent.
| | 05:20 | Click OK. JPEG.
| | 05:24 | And we're going to click Save.
| | 05:29 | Now we'll go in and take a look at that one.
| | 05:32 | This doesn't produce a very good result either.
| | 05:35 | You can see that we get these black frames
as it tweens from one frame to the next.
| | 05:41 | So let's close that but let's just take a look at our file size.
| | 05:45 | 60K. So far this has given us the best file
size but it's not a very good quality animation.
| | 05:50 | So we have one thing we can try.
| | 05:52 | Export, Macromedia Flash, Lossless 32.
| | 05:56 | Let's just give that a whirl out of curiosity.
| | 05:59 | So let's call this loss 32.
| | 06:04 | Click Save.
| | 06:07 | Open it up and take a look.
| | 06:09 | This has kept our file quite nicely.
| | 06:11 | Let's take a look at the size.
| | 06:14 | Again, it's 1,000 K.
| | 06:16 | So obviously when we first exported this, up here at
the top, our auto-select was using the Lossless 32.
| | 06:25 | Now, 1,000 K is entirely too big to put on the web.
| | 06:29 | Your users will hate you.
| | 06:30 | So, what are we going to do to make this smaller?
| | 06:34 | Why is this happening?
| | 06:35 | Why was the other image, or the other animation, this teacup, so small?
| | 06:40 | Well, what's really tampering with this file is that there's transparency
in it and it doesn't really know how to handle that effectively.
| | 06:47 | The JPEG format can't handle it and the
Lossless 8 format can't handle it properly.
| | 06:52 | So that's why it's defaulting to Lossless 32 because Lossless
32 is basically like using a PNG and that will maintain
| | 06:59 | and preserve the transparency.
| | 07:01 | It doesn't really compress the image and that's
what's leaving us with that enormous file size.
| | 07:06 | So you can try a couple of things.
| | 07:08 | First thing that we're going to do is we're going to grab the Crop Tool.
| | 07:12 | We're going to click and drag to select the whole canvas and double-click.
| | 07:15 | Now, why would we do that?
| | 07:17 | Well, as we're tweening, there's certain parts of the
images that are off the canvas that we can't actually see.
| | 07:23 | When we export it, it's not clipping it to the area that we
can just see; so all that other stuff that's around the perimeter
| | 07:31 | or outside of our viewable area is being saved in the animation.
| | 07:34 | So that's adding extra file size that we don't
need, because we're not benefiting from it.
| | 07:39 | So we've cropped our image, let's see if we can get it any smaller.
| | 07:43 | So let's choose File, Export, Macromedia Flash.
| | 07:47 | We know that auto-select was using Lossless 32 so
we'll choose that just to see what it does here.
| | 07:52 | Click OK. And I'm going to call this Auto-crop and click Save.
| | 08:01 | Let's just take a look at what we've got.
| | 08:03 | We'll double-click the HTML file.
| | 08:05 | You can see it looks just the way it did.
| | 08:08 | Let's take a look at the size.
| | 08:11 | Now it's cut the file size in half, so now we're down to 540K.
| | 08:16 | But that's still entirely too big to put on the web.
| | 08:20 | There's no way we can get away with that.
| | 08:22 | But, there's also no way that we can make this any smaller
in ImageReady because we've exhausted our possibilities.
| | 08:29 | We know that we can only use Auto-select to give us a quality image.
| | 08:33 | JPEG and Lossless 8 are going to give
us something that looks really ugly.
| | 08:37 | So we're sort of at our limits here.
| | 08:39 | What we're going ultimately have to do is take
this file into Flash and publish it there.
| | 08:45 | So the purpose of this movie, I will show you how to take this into
Flash and publish it there, but the purpose of this movie is to show you
| | 08:52 | if you don't have Flash and you want to create an animation, don't
develop something complicated like this with a number of tweened frames
| | 08:59 | because the formats that can make this
small, can't handle the transparency.
| | 09:04 | The formats that can handle the transparency are going to
make a file that's entirely too big for you to put on-line.
| | 09:10 | You're going to need to take it into Macromedia
Flash to fix it and make it a reasonable size.
| | 09:16 | This type of animation on the right, as you saw, created a very small
file size because there was no need to worry about transparency.
| | 09:24 | This flipbook style animation will lend itself very well to being exported
to the Swift file format because it doesn't need to worry about any
| | 09:32 | of that transparency stuff that we talked about.
| | 09:34 | So those are some things to consider when you're building your animations.
| | 09:37 | If you do want to build an animation such as the one on the left
here, this teashop.PSD file, that's not a problem but just keep
| | 09:45 | in mind you're going to have to bring it into
Macromedia Flash to get it a little bit smaller.
| | 09:48 | So let's take a look at the process to do that.
| | 09:51 | I'm going to go up here to my hard drive and open up Macromedia Flash.
| | 10:01 | So now that I'm in Flash, I'm going to create a new Flash document.
| | 10:04 | I want to make sure that my Flash document actually
matches the same size as my ImageReady document.
| | 10:10 | So let's just switch back to ImageReady for a second
and I'm going to choose Image, Image Size, 269 by 291.
| | 10:18 | So let's cancel, go back to Flash, click the size,
and it was 269 by 291 and we're going to click OK.
| | 10:28 | Now we're going to choose File, Import, Import To Stage.
| | 10:32 | We're going to go to our desktop to that SWF Animation folder and we're
going to find the image that we used Auto-select and that we cropped,
| | 10:40 | that was the one that was 540K.
| | 10:42 | We're going to click Import.
| | 10:44 | There's our animation.
| | 10:45 | If we want, we can take a look and here's all our
individual frames and we can see what it looks like.
| | 10:51 | Now what I'm going to do is I'm going to choose File, Publish Settings.
| | 10:57 | We're going to export both the Flash file and the HTML
file so I'm going to call this "teashop flash" and we're going
| | 11:08 | to call this teashop.HTML.
| | 11:13 | To save this, we'll just click and expand this,
go to our Desktop and go to that same Flash animation folder,
| | 11:21 | click Save and we're going to do the same thing for the HTML file.
| | 11:24 | You can see it automatically picked it up because
it knew that's where the Flash file was going to go.
| | 11:29 | And we're going to click the Flash tab and what we can do is
instead of leaving the JPEG quality at 80, we can take it down.
| | 11:36 | Now you don't want to take it down too much.
| | 11:37 | We'll try 55 and see how that looks.
| | 11:41 | Click OK. Now go to the File menu and choose Publish, Preview.
| | 11:47 | Look at the Flash file.
| | 11:49 | That looks pretty good.
| | 11:52 | So let's close that.
| | 11:53 | And now we're going to choose File, Publish.
| | 11:56 | It's publishing the file; it's all done.
| | 11:58 | So let's go to our Desktop to that Flash animation folder.
| | 12:01 | Scroll down and here's our file.
| | 12:03 | So let's take a look.
| | 12:05 | It looks great.
| | 12:06 | Now, let's take a look at our file size.
| | 12:09 | 36K. Woohoo!
| | 12:11 | We've finally gotten something that we can work with.
| | 12:14 | So, what I want you to take from this movie again
is, think about what types of animations work well.
| | 12:20 | This one does.
| | 12:21 | This one doesn't when you're going directly from ImageReady CS to the web.
| | 12:25 | If you have Macromedia Flash, go ahead and
build something complicated with tweens.
| | 12:29 | But keep in mind you're going to have to go into Flash and publish
it from there to get the file size down to something small.
| | 12:35 | If you don't have Macromedia Flash and you still want
to create a Flash file, think about something like this,
| | 12:40 | that doesn't have any type of transparency.
| | 12:42 | Because that's what's going to really weight you down
when it comes to your file size and your image quality.
| | Collapse this transcript |
|
|
12. SlicingCreating User Slices| 00:01 | >>In this next chapter, we're going to take
a look at how to slice in ImageReady CS2.
| | 00:06 | Now for this chapter, I'm going to use ImageReady CS2 exclusively but I
want to point out that the slice tools that we're going to be using here,
| | 00:12 | the Slice Tool and the Slice Select Tool,
are also available in Photoshop CS2.
| | 00:16 | I prefer to slice in ImageReady because I like to have access to my Slice
palette, which you can see over here, and also to my Web Content palette.
| | 00:24 | And I find that that gives me some more visual information
about what's happening in my image as I'm slicing.
| | 00:29 | But feel free to use either application, the
tools actually work the same across both programs.
| | 00:35 | So let's talk about this idea of slicing.
| | 00:38 | Slicing basically let's us take one composition
and slice it up into individual sections.
| | 00:43 | Now why would we want to do that?
| | 00:44 | Well, let's take a look at this page.
| | 00:47 | If we were to try to optimize this page as it is and put it on-line,
we'd have a tough time because we have this photographic content
| | 00:54 | that requires probably a JPEG optimization; we have
this one down here that's a little bit more complex.
| | 01:01 | Either we're going to have to experiment with JPEG or
GIF optimization to see which one's going to work best.
| | 01:06 | Then we have some areas that are just going to work really well as a GIF
but they don't certainly need the number of colors that we need down here.
| | 01:15 | Also, we probably want to be able to link
to buttons using these particular buttons.
| | 01:20 | So to do all of that, we're going to slice our image into individual
sections and that's going to allow us to add links to some of our buttons.
| | 01:29 | And it's going to allow us to specify different
optimization settings for different areas of the image.
| | 01:34 | What happens after you slice your image and you save all the slices
is that when you save the HTML it saves it into an HTML table
| | 01:42 | and that table is reassembled when you view your images in a
web browser and it will look identical to what we see here.
| | 01:49 | So let's take a look at how slicing works first.
| | 01:52 | We're just start with the basics of creating user slices.
| | 01:55 | There's three types of slices in ImageReady
CS2: auto, user, and layer-based slices.
| | 02:00 | We're just going to start here with user slices and auto slices and as we
move through this chapter we're going to build in complexity and concepts.
| | 02:09 | So let's start by making sure our Slice Tool is selected and I'm going
to click and drag to create a slice around our Javaco tea logo here
| | 02:16 | with this green rectangle.
| | 02:18 | Now, I have my Smart Guides turned on and that's allowing me
to snap over here to the edges of the layer and it's going
| | 02:27 | to snap the slices to that edge.
| | 02:30 | So I find that a really helpful feature to use.
| | 02:33 | So now you can see that I have these little nodes, and if I switch
over to my Slice Select Tool, you can see that as I position my cursor,
| | 02:40 | I can actually resize this should I want to.
| | 02:42 | I'm actually going to leave it the way that it was.
| | 02:44 | So I'm going to go back to my Slice Tool and now I'm
going to just click and drag to create a second slice.
| | 02:50 | Now, let's take a look at what we actually have here.
| | 02:54 | We have two slices that I created; you
can see that they're defined with blue.
| | 02:58 | But I also have these other four slices in my
image that are numbered and have symbols in gray.
| | 03:03 | The color indicates a key difference.
| | 03:06 | The slices in blue are user slices because I
the user created them using the slice tool.
| | 03:12 | The gray slices are called auto-slices and they appear
automatically as soon as you begin slicing your image.
| | 03:18 | The reason that we need auto-slices in our image is that we
have to have every pixel in our image contained inside a slice,
| | 03:26 | whether it be a user-slice or whether it be an auto-slice.
| | 03:29 | The reason for that is that the way that a web browser understands
a sliced composition, is that it understands the HTML table code.
| | 03:37 | So ultimately, we have to be able to have a square composition
that can be divided into individual table cells and reassembled
| | 03:44 | when it's viewed in a web browser.
| | 03:46 | So if we look here, we have one slice here,
a second slice here, a third slice over here.
| | 03:53 | And then four, five and six down here which make up this area.
| | 03:57 | The way that these are numbered is it
goes from left to right and top to bottom.
| | 04:02 | So as we continue to add slices to this composition, the auto-slices are
going to update constantly to make sure that we have every pixel accounted
| | 04:13 | for and can be reassembled into an HTML table.
| | 04:16 | So next what I'm going to do is I'm going to show you how
you can take a user-slice and convert it to an auto-slice.
| | 04:22 | So let's grab this Slice Select Tool and I'm going to click right here
to select our slice of four and I'm going to go up to my Slices palette
| | 04:29 | and I'm going to choose Promote To User-slice.
| | 04:32 | That can be helpful because sometimes when you slice an auto-slice will
automatically get created and it'll actually be the exact same shape
| | 04:39 | and dimension as what you'd like if you were going to slice it on your own.
| | 04:43 | And it just saves you from actually going through the process of slicing.
| | 04:46 | Now this isn't the exact shape that I'd
like; I want it to hug this products button.
| | 04:50 | So I'm just going to use these little editing
nodes and click and drag and resize it.
| | 04:54 | And you can see that as I did that, it
created these additional auto-slices.
| | 05:00 | So let's just grab our slice tool and we're just
going to continue to add user-slices to this image.
| | 05:06 | One for each of these buttons.
| | 05:08 | And there we go.
| | 05:11 | So that's basically the gist of how we can
create user-slices with the Slice Tool.
| | 05:16 | Now, if we go up to our slices menu, you can see that we also have some
other commands: Duplicate, Combine, Divide, Delete, and Delete All.
| | 05:24 | So let's take a look at how that works.
| | 05:26 | Let's start with our Slice Select Tool and I'm just going to grab
my slice, oh, three here, and I'm going to choose Slices, Divide Slice.
| | 05:33 | I'm just going to divide this horizontally
into two and vertically into two.
| | 05:37 | I'm not really going to focus on what I'm slicing here; I'm
just wanting to show you the functionality of how this works.
| | 05:42 | So, we've divided it into two and now
we have these four different sections.
| | 05:47 | And I can still go ahead and resize this as you can see.
| | 05:52 | Just like so.
| | 05:53 | What I can also do is I can choose to
combine my slices and I can delete my slices.
| | 06:00 | So let's take a look at what's going to happen if I combine them.
| | 06:03 | Right now I have all four of these selected.
| | 06:05 | So let's choose: Slices, Combine Slices.
| | 06:09 | Now, you can see it's all in one.
| | 06:11 | I can also go to my Slice palette and choose Delete Slice.
| | 06:15 | And that's going to delete that slice that I created.
| | 06:18 | You want to be careful with Delete All because
that will delete all of the slices in your image.
| | 06:24 | So now that we've created some user-slices for our buttons, let's in
the next movie take a look at how to create layer-based slices for some
| | 06:32 | of the other elements in this particular file.
| | Collapse this transcript |
| Creating Layer-Based Slices| 00:01 | >>In the last movie we got to this point with our slicing, we had
created five user-slices for our Javaco tea logo and our buttons.
| | 00:09 | What we want to do now is we want to take
a look at how to create layer-based slices.
| | 00:13 | We go over to our Layers palette here you can
see that we have a layer set called "Our Stores".
| | 00:18 | In there we have a layer for each of the
elements that make up the content on this web page.
| | 00:24 | Now what we want to do is create a layer-based slice for each element.
| | 00:28 | So I'm going to start with the cup layer and I'm going to go to
my Layers menu and I'm going to choose New Layer-based Slice.
| | 00:34 | And that automatically creates a new layer-based slice.
| | 00:38 | So let's do the same thing for each of the other four layers.
| | 00:41 | I'm just going to target them in the Layers
palette and choose Layer, New Layer-based Slice.
| | 00:48 | And you can automatically see that there's a difference between
our layer-based slices and our user-slices with the icon.
| | 00:53 | Here's the icon for the user-slice and
here's the icon for the layer-based slice.
| | 00:59 | So what's the advantage of using the layer-based
slice versus the user-slice?
| | 01:03 | Well, it has to do with what happens when
you edit the contents of your layers.
| | 01:07 | Let's take a look at what I mean.
| | 01:09 | I'm going to target my Javaco logo layer here in
the Layers palette and I'm going to grab my Move Tool.
| | 01:15 | Let's see what happens when I move this layer.
| | 01:17 | You can see that the layer moves but the
slice configuration remains the same.
| | 01:22 | So if I were to save this and optimize all the slices, I
would have to re-slice my image after I made this move.
| | 01:29 | Let's just go ahead and reposition it back where it was.
| | 01:32 | Let's try that with our cup layer here that is part of a layer-based slice.
| | 01:38 | Then I click and drag and you can see that what happens
here is that my slice automatically moves with my layer.
| | 01:46 | So no matter what I do to it, if I move it or I resize it, it's
going to update automatically and follow the contents of the layer.
| | 01:53 | Let's take a look at what would happen if we resize.
| | 01:55 | I'm going to target my type layer.
| | 01:57 | I'm going to choose my Type Tool here from the Toolbox,
which shows us that this is actually paragraph type.
| | 02:04 | Let's just see what happens if I click and drag to resize this.
| | 02:07 | You can see that my slice automatically updates and it automatically
creates another series of user-slices to fill up the entire image area.
| | 02:16 | So I'm just going to click and drag and position
this all the way over here to the right.
| | 02:23 | Now I may decide that I want to add and
subtract from the size of my slices.
| | 02:28 | You can see here that my slice 23, my layer-based slice
for the map, is actually a little bit wider than the rest.
| | 02:35 | And likewise over here, my easy-to-find
is a little bit narrower than the rest.
| | 02:40 | So what I might want to do is I might want to actually increase or
decrease the size of my slices without affecting the size of the layer.
| | 02:46 | And I can do that quite easily.
| | 02:48 | I'm going to grab the Slice Select Tool from the
Toolbox and I'm going to click the easy-to-find,
| | 02:52 | hard-to-forget and let's go to the layer-based
dimension section of our slice palette.
| | 02:57 | You can see that we have these pad fields and that's basically allowing
us to pad the size of the slice without affecting the size of the layer.
| | 03:05 | So let's try to pad this layer-based slice to the left by three pixels.
| | 03:10 | You can see that that automatically fixes this
problem, so we now just have the one auto-slice here.
| | 03:16 | Now let's take a look at this example.
| | 03:18 | Here we have our slice 22 and we want to make it just a tiny bit smaller.
| | 03:25 | So we want to pad that on the right side.
| | 03:28 | Let's just try negative two and see what happens.
| | 03:32 | We're not quite there yet.
| | 03:33 | Let's try negative three, and there we go.
| | 03:37 | Now you can see that we've got it so that
it's just hugging on the inside of that.
| | 03:43 | We have this single auto-slice over here.
| | 03:47 | Now let's increase the size of our right
side of our easy-to-find, hard-to-forget.
| | 03:53 | We're going to add probably about 25 pixels...no that
wasn't quite enough, so maybe let's try 55...perfect.
| | 04:04 | So now we have all of these slices that are about the same size and
sometimes you'll just want to have the minimum number of slices in here
| | 04:11 | and being able to pad the size of your slices, either
positively or negatively as we've done in these examples,
| | 04:17 | will help you make sure that your slices are all perfectly aligned.
| | 04:21 | So that's how we can work with layer-based slices.
| | 04:23 | Now you might be wondering well, layer-based
slices seem so much more flexible than user slices,
| | 04:27 | why would I just not create all layer-based slices?
| | 04:30 | Well, there is some editing functionality that you can't access in
layer-based slices that you have to use specifically with user slices.
| | 04:37 | And we're going to take a look at some of those
limitations as we move through this training.
| | 04:42 | Now, if you have a layer-based slice and you decide that
you want to promote it to a user slice you can do that.
| | 04:47 | I have my Slice Select Tool selected here.
| | 04:49 | I'm going to click slice oh five and go to my slices
palette and I'm going to choose: promote to user slice.
| | 04:55 | And you can see that that automatically updates it to a user slice.
| | 04:58 | And I know it's a user slice because I can see the little icon right
here showing me that it is a user slice, not a layer-based slice.
| | 05:06 | I'm going to undo that by pressing (Command + Z) or [Ctrl + Z]. And we're
just going to leave this file open for the next movie where we're going
| | 05:14 | to take a look at how to rename our slices.
| | Collapse this transcript |
| Renaming Slices| 00:01 | >>Now that we have our entire image sliced up in the first exercise
in this chapter, we took a look at how to create user-slices
| | 00:07 | and in the last movie we took a look at how to create layer-based slices.
| | 00:11 | Our next task is to look at how our slices are named.
| | 00:14 | Slice-naming is really important because as soon as you save the optimized
files, the name of the slice will become the file name and that's something
| | 00:22 | to keep in mind because you want to make sure that A) it's not
3,000 characters long and B) that it makes sense
| | 00:29 | so that when you're working with
the actual images you know what image is which.
| | 00:35 | So let's just take a look at the Web Content
palate here, let's just extend it.
| | 00:40 | We've got a couple of problems that we need to identify.
| | 00:42 | First of all, where are these numbers coming from?
| | 00:45 | Well, if we take a look, oh nine, which one is this?
| | 00:48 | Javaco Stores...we turn on and off the visibility.
| | 00:51 | Oh, there we can see, it's coming from the actual slice name.
| | 00:55 | So user-slices are named based on the file name. You can see it right here,
Javaco Stores 09. Javaco Stores 09 is the slice number.
| | 01:06 | If we scroll up, we can see that our layer-based
slices don't have the slice number.
| | 01:12 | What they have is the layer name.
| | 01:15 | In this case, this is a little bit problematic because we have
these layers that are quite long, in terms of their file name,
| | 01:21 | plus they have spaces and other sorts of whacky characters in them.
| | 01:25 | And that's not really going to work for
us when we actually go to save this.
| | 01:29 | So let's take a look at how we can rename these.
| | 01:32 | First I'm going to just read just the stacking
order here and the Web Content palette.
| | 01:37 | We have slice 09, then we have slice 18,
then we have slice 23, then we have slice 02.
| | 01:43 | I'm just going to click and drag to reposition this to the bottom.
| | 01:47 | And then I'm going to click and drag to
position slice fifteen right here in between.
| | 01:53 | So you can see that this works very similar
to how it does in the Layers palette.
| | 01:57 | Now, what if I want to have something
more descriptive in these slice names?
| | 02:01 | Than these slice numbers?
| | 02:03 | Well, to rename my slices, just like renaming
layers, I just double-click to get the bounding
| | 02:08 | box and I can rename them.
| | 02:10 | So let's call this Javaco Stores logo.
| | 02:14 | And I'm going to press Return or Enter.
| | 02:16 | This here is our Products button, so let's double-click
and I'm just going to call this PB (product button).
| | 02:24 | It's important to keep these short because if you have more than 31
characters, especially on a Mac, you're going to run into trouble.
| | 02:30 | So keep these nice and short.
| | 02:33 | Let's take a look at our next one.
| | 02:34 | This is our About button.
| | 02:36 | So let's double-click.
| | 02:38 | We'll call this About button, AB.
| | 02:40 | What's our next one?
| | 02:44 | Our next one is our Stores.
| | 02:47 | So we'll double-click.
| | 02:48 | I'm going to call this Stores button, and use this short form SB.
| | 02:52 | And the last one is our Contact button, so
I'm going to call this CB, contact us button.
| | 03:00 | So that's sort of how I think about it in terms of
naming, you may have something that works better for you,
| | 03:04 | but for right now that's going to work well for us.
| | 03:06 | The purpose here is just to show you how this actually works.
| | 03:09 | Now let's take a look at these layer-based slices.
| | 03:12 | The cup and the map layer are fine; we
don't need to make any changes to those.
| | 03:16 | But the other ones you can see are quite long.
| | 03:19 | So let's double-click our easy-to-find layer in the Layers
palette and let's just rename that Easy and press Enter or Return.
| | 03:27 | And you can see that that automatically updated it.
| | 03:30 | Now, what if you don't want to change the
name of your layer in the layers palette?
| | 03:33 | Well, that's OK, then we can just double-click the slice name and
get rid of what we don't want and let's just call this On-line,
| | 03:46 | press Return or Enter.
| | 03:48 | And there you can see, it didn't change my
layer name; it just changed my slice name.
| | 03:54 | So when you make a change to the layer name, it
updates both the layer name and the slice name.
| | 03:59 | But if you just change the slice name, it
won't affect the contents of the Layers palette.
| | 04:03 | So now you can see that we have these nicely renamed.
| | 04:07 | Now, I want to point out in addition to being able to double-click
the layer name, we can also change the slice name in the Slice palette.
| | 04:14 | Let's take a look.
| | 04:15 | You can see that as I choose each slice, the
Slice palette updates with the appropriate name.
| | 04:20 | If I want to rename that, all I have
to do is click and type in something new.
| | 04:32 | And there we go.
| | 04:36 | And now I just have to press Return or Enter.
| | 04:40 | And it automatically updates it in both places.
| | 04:42 | I'm just going to rename that back to Logo.
| | 04:44 | So those are the ways you can actually go through and rename your slices.
| | 04:51 | Now let's talk a little bit first before we wrap up here about how it
actually gets the information and figures out how to name our slices.
| | 04:59 | We know that user-slices are based on the slice name.
| | 05:02 | Layer-based slices are based on the layer name, but we can
actually change that default naming convention if we choose to.
| | 05:09 | To do that, I'm going to go up to my File menu,
I'm going to choose Output Settings Slices.
| | 05:16 | And you can see here that we have this default naming convention.
| | 05:20 | And I can basically change it to anything.
| | 05:22 | I can choose it to be the document name underscore (_) and you can see
it layer name or slice name or I can change this based on dates.
| | 05:30 | I can add any criteria that I want in here.
| | 05:33 | So you can change this all you like and modify
your default slice naming if you so choose.
| | 05:40 | I'm just going to click Cancel and exit out of this.
| | 05:43 | So that's the process that we can use for
renaming our slices in ImageReady CS2.
| | 05:48 | In the next movie we're going to take a look at how to
optimize and save the slices in our composition here.
| | Collapse this transcript |
| Optimizing and Saving Slices| 00:00 | >>If you followed the last few movies in this chapter, you know that we
started out by creating our user-slices, creating our layer-based slices,
| | 00:08 | and in the last movie we renamed our slices in preparation for saving.
| | 00:13 | Just to reiterate, the names that we have for our slices, which appear
over here in our web content palette, are the ones that are going to be used
| | 00:18 | when we actually optimize and save our slices,
which is what we're going to do in this movie.
| | 00:23 | The first thing we need to do is actually go through
the process of optimizing each of our slices.
| | 00:28 | And that may seem like a long, arduous task.
| | 00:31 | But I'm going to show you some tricks to really speed things up.
| | 00:34 | The first thing I'm going to do is look at this image and assess OK, what's
going to need to be a JPEG, what's going to need to be a GIF and just sort
| | 00:41 | of make some decisions.
| | 00:43 | Because this is the only image I know is going
to require being a JPEG, I'm going to start with it.
| | 00:49 | So I'm going to click the slice to select, I have my slice select
tool selected in the toolbar, I'm going to click to select it.
| | 00:56 | And I'm going to choose JPEG from the pop-up menu.
| | 01:00 | Just expand these panels, and I'm just going to grab my
optimized tab and I'm going to play around with these settings
| | 01:08 | until I get something that I'm happy with.
| | 01:11 | I think the medium is too low, so I'm going
to just boost that up, maybe to about fifty.
| | 01:15 | And that looks pretty good.
| | 01:18 | So, I'm pretty happy with that one.
| | 01:20 | Now I'm going to move on to my other slices and you can see that by
default it's obviously using a very low number of colors for GIF so we need
| | 01:30 | to make some changes here.
| | 01:31 | I'm going to start with my next slice that's the
most complicated which is probably slice twenty-one.
| | 01:37 | You can see that yeah, right now it's got up to two
colors and we know that that's going to be too low.
| | 01:41 | So let's go up to 256 and that's probably going to be too many.
| | 01:46 | So let's just incrementally drop the number of colors until
we see something that we're unhappy with and then we'll know
| | 01:54 | that we've gone too far.
| | 01:55 | That's the point that I think it's starting to look unattractive,
especially because we have a little bit of photographic content here.
| | 02:06 | I think the difference between 32 and 64, in
terms of the file size, is hardly anything at all.
| | 02:11 | You can see it's a difference of 1K.
| | 02:13 | We go from 22 to 21K.
| | 02:16 | But the difference in quality is quite
significant, so we'll leave that as 64.
| | 02:21 | And we can just work with our color reduction palates here until we
find one that yields the smallest file size and the best results.
| | 02:31 | So I think selective is going to work best for us here.
| | 02:35 | And we don't need to have any dithering, we've got that set to no dither
and we do want to turn on this transparency check box because we know
| | 02:44 | that this particular layer is transparent and we're just going to set our
matte color to be white because that's the color of our background here.
| | 02:54 | So we've got that one all setup, so that's looking good.
| | 02:57 | Now we need to go back to some of the rest of these.
| | 03:00 | So, let's start with our Javaco tea logo.
| | 03:04 | And we know that two colors is too few, so let's start with
64 and just work our way down until we come up with something
| | 03:11 | that we're not happy with.
| | 03:13 | Definitely eight is too few, so let's
take a look at how it looks at sixteen.
| | 03:20 | And I think actually that looks all right.
| | 03:22 | It's a little jagged around here, so let's
compare our file size between sixteen and 32.
| | 03:29 | You see that the change is hardly anything at all, it's a difference of 1K.
| | 03:32 | So I'm going to leave that as 32.
| | 03:34 | Let's just choose between Perceptual, Selective and Adaptive.
| | 03:41 | And again I think Selective is the best choice here.
| | 03:43 | And we don't have any dithering, so that's great.
| | 03:49 | Now we have these four buttons and you can
see that they all look pretty much identical,
| | 03:53 | and they're all going to use basically the same optimization settings
so that rather than going through and matching the optimization settings
| | 04:00 | for each, what I'm going to do is I'm going
to link these slices for optimization.
| | 04:04 | So with my Slice Select Tool selected, I'm going to click
the Products, or the slice 09, hold down my Shift key,
| | 04:13 | and select the other four slices.
| | 04:16 | So I have slice nine, fifteen, eighteen and twenty-three selected.
| | 04:19 | Going to go to my Slice menu and I'm going
to choose link slices for optimization.
| | 04:25 | And you can see now I have this little red link icon.
| | 04:29 | Now what I can do is I can specify my optimization
settings and you can see it's affecting all four once.
| | 04:39 | So this is really saving me some time.
| | 04:42 | You know, I could go through and manually change it for each one once I
get one button setup, but why not do all four of them at the same time.
| | 04:50 | So I've got this set to sixteen colors and now let's just play
around with our color reduction palate and see which one's going
| | 04:57 | to give us the best result.
| | 04:58 | I think actually perceptual gave us the
nicest result here so let's leave it at that.
| | 05:05 | Now we have these other two slices to contend with and just by
looking at them, my guess is that the easy to find, hard to forget,
| | 05:13 | we'll probably be able to use the same
settings as what we have for this one.
| | 05:17 | Now, I'm not going to link it for optimization because
it's possible it may be a little bit different.
| | 05:23 | But what I'm going to do is I'm going to grab this
droplet button, and I'm going to drag it onto this slice.
| | 05:28 | And you can see it just copied those settings.
| | 05:33 | Now what I can do is just play around a little bit more and see if
I can find something that's a little bit of a different setting.
| | 05:41 | If I take that down to four, you can see that looks pretty good.
| | 05:43 | Now, I can probably use those optimization settings for this slice.
| | 05:47 | So I'll click and drag the droplet and there you go.
| | 05:50 | You can see that those settings actually work quite well.
| | 05:53 | If we go up to eight, we hardly see any change at all.
| | 05:56 | So we'll just leave it as we had it when we originally set it up.
| | 05:59 | So those are some useful techniques for optimizing your slices.
| | 06:03 | Now we also have to optimize our auto-slices.
| | 06:06 | So I'm going to grab my slice tool and I'm just
going to click any of the...one of the auto-slices,
| | 06:10 | it doesn't matter which one because you'll notice
that auto-slices all have this little link icon.
| | 06:16 | That's because you can only specify one optimization
setting for all auto-slices in your image.
| | 06:24 | So that's something to consider because you may need to
convert some of your auto-slices to user-slices in order
| | 06:29 | to get some effective optimization settings.
| | 06:31 | In this case we really only have this white and this light green.
| | 06:36 | So you can see that really having it set to two is probably just fine.
| | 06:40 | If we go up to four, it's not really going to make a difference.
| | 06:43 | I'm actually going to switch to this slice oh three because it
contains both of those colors and I can preview a little bit nicer
| | 06:50 | and see which one works better.
| | 06:51 | So there we go.
| | 06:53 | Now we have our slice oh three and we're seeing
that the setting is two...is working just fine.
| | 07:01 | Now I want to view this without the slices.
| | 07:04 | And it's important to view this, your optimization
settings, without the slice visibility turned
| | 07:09 | on because sometimes the slice visibility can skew
what your optimization settings are going to look like.
| | 07:14 | So you can see that this toggle slice visibility button here can
really help you to just turn those on and off and take a look
| | 07:20 | at what you're creating.
| | 07:22 | So this is looking good and I'm really
happy with the optimization settings here.
| | 07:25 | So let's turn those back on.
| | 07:28 | Now we're going to save this.
| | 07:29 | So to do that I'm going to choose File; Save optimized as; I'm going
to go to my Desktop and I'm going to create a new folder called Stores.
| | 07:37 | And what I need to do is I need to create both the HTML and the images.
| | 07:44 | The reason for that is that in order for these all to work together
in a web browser I need to be able to have the HTML table code
| | 07:51 | that will reassemble these all into a table and
make it look the same way that it does here.
| | 07:56 | If you want to take just the images and put it into an HTML editor such
as Dreamweaver or GoLive, you could choose to just save the images only.
| | 08:05 | But I want this to actually work in a web browser and I want
my composition to appear exactly as it did here in Image Ready
| | 08:13 | when I open it in a web browser.
| | 08:14 | So I'm going to save both the HTML and the images.
| | 08:17 | So let's click Save and go to our Desktop and let's
take a look at what it created in this storage folder.
| | 08:24 | We have our Java code stores HTML file and if we open the images
folder you can see that we have all of these little images.
| | 08:31 | Now the ones with numbers are the user-slices.
| | 08:34 | Let's just take a look at what they are.
| | 08:36 | Let's double-click the Java code stores 22 and open it up.
| | 08:40 | Yup, there you can see it's just a little tiny slice and if
we match it, Java code stores 22, there it is right there.
| | 08:48 | It looks identical.
| | 08:50 | Now, let's take a look at the rest.
| | 08:53 | The rest of the slices all reflect the names
that we gave the slices in the last exercise.
| | 08:57 | So Java code logo, Java code stores products
button, on-line, etcetera, etcetera.
| | 09:04 | Let's go ahead and double-click to open one of these.
| | 09:06 | Let's go to our cup layer.
| | 09:08 | There it is.
| | 09:09 | You can see that there is our cup slice,
which looks identical to the one in our image.
| | 09:15 | So let's go back and open up the Java code stores dot HTML file.
| | 09:21 | So as you can see our composition looks exactly the
same in our web browser as it did in Image Ready CS.
| | 09:27 | So even though we have all of these little tiny images
that are making up this file, they're all being reassembled
| | 09:33 | in the correct place using the HTML table code that Image
Ready CS2 automatically generated when we saved the HTML.
| | 09:43 | So that's the process for saving and optimizing our sliced composition.
| | 09:49 | In the next movie, we're going to take a look at how we can apply things
like Alt text and status bar messages and assign URLs to individual slices.
| | Collapse this transcript |
| Assigning Alt Text, Status Bar Messages, and URLs to Slices| 00:01 | >>Next we're going to take a look at how to assign alt text, status
bar messages, and URLs to individual slices in our composition.
| | 00:10 | Here's the file we've been working with. So far we've created user
slices, we've created layer-based slices, we've renamed our slices,
| | 00:17 | and we've saved and optimized our slices.
| | 00:20 | Now what we want to do is we want to actually add some alt text, we
want to add some status bar messages, and we want to assign some URLs.
| | 00:29 | So let's start with alt text.
| | 00:31 | First of all, what is alt text?
| | 00:34 | Some people turn off the ability to view pictures in the
web browser, and if they do that and they load your page,
| | 00:41 | they're going to have no idea what content
is supposed to be in place of the images.
| | 00:45 | So it's up to you as a web designer to
put a little bit of information there.
| | 00:48 | So let's just say for example, we're going
to work with this Javaco tea logo.
| | 00:53 | We want to give some information about what is actually part of this image.
| | 00:57 | So in the alt text field of our slice palate,
we're going to type: Javaco tea logo.
| | 01:05 | I'm going to click my Preview In Safari button to view this.
| | 01:09 | Now, I have this setup to view all of my pictures, but if you go
to Safari and choose Preferences and turn off the "Display image
| | 01:20 | when page opens" option, which is in the Appearance.
| | 01:23 | Close this.
| | 01:25 | Close Safari and go back to ImageReady and preview it again.
| | 01:30 | Now you can see that by turning that option off we don't see
any of the images, but what we do see is this Javaco tea logo.
| | 01:38 | And that's the alt text that we provided.
| | 01:40 | So let's close out of there and go back to Safari to our Preferences
and turn on the "Display images when page opens" option and close.
| | 01:51 | So that's why you would want to have alt text there.
| | 01:53 | As you can see it's pretty easy to assign alt text.
| | 01:56 | You're just going to click the slice and you're going to type something.
| | 02:00 | Let's type "teacup photo".
| | 02:04 | Go to this one and type "map image".
| | 02:10 | And we'll go here and type "products button".
| | 02:17 | We'll just continue adding some alt text for each of these items.
| | 02:23 | And we'll move on to "our stores".
| | 02:30 | "Contact us."
| | 02:33 | And we'll finish up here with our last two type layers.
| | 02:45 | And there we go.
| | 02:50 | Now let's take a look at how this works in Internet Explorer.
| | 02:53 | So let's open up Internet Explorer.
| | 02:55 | Here's what our page looks like.
| | 02:58 | The other nice thing about putting alt text is that while your
page is loading, if it takes a long time for your graphics to load,
| | 03:03 | you'll actually see the alt text behind it.
| | 03:06 | So let's turn off our images in Internet Explorer by choosing: Explore,
Preference (if you're on Windows, it'll be under the Edit menu).
| | 03:14 | And under the Web Content option, I'm going to turn off Show Pictures.
| | 03:19 | Click OK. Close my browser window and let's just
load this up in Internet Explorer one more time.
| | 03:26 | Now you can see all the alt text here that we put in place for
each of the items that have images that mean something to our user.
| | 03:36 | So that's how we can create alt text.
| | 03:38 | Let's go back to Internet Explorer to the
Preferences and turn back on Show Pictures.
| | 03:42 | Now you might wonder why anybody would ever do that, but some people
live in rural areas and are stuck with dial-up access... some have
| | 03:50 | to do that and it's important to add some alt text just to
make it easy for people who don't have their pictures on by default.
| | 03:59 | So that's alt text.
| | 04:01 | Now let's take a look at what status bar messages are all about.
| | 04:04 | Here you can see we have this Status Bar Message field.
| | 04:07 | Basically what we want is the status bar to change as you
position your cursor over different slices in the image.
| | 04:14 | So let's take for example, this map.
| | 04:17 | We're going to target it and in the status bar message
we're going to type "Find a Javaco store near you."
| | 04:26 | Let's check this out when we view this in a web browser.
| | 04:30 | Let's start with Safari.
| | 04:31 | We can see that Safari actually doesn't have a field for status bar text.
| | 04:36 | Internet Explorer does.
| | 04:38 | So let's close and go to Microsoft Internet Explorer.
| | 04:42 | Here we go.
| | 04:43 | Look what happens when I position my cursor over that map.
| | 04:46 | It changes to find a Javaco store near you.
| | 04:49 | So you can set up status bar text for any of the slices in this image.
| | 04:54 | And you can see that that just provides a little
bit more visual information for your viewer as he
| | 05:01 | or she is navigating throughout your page.
| | 05:03 | So that's how we can set up status bar text.
| | 05:07 | Now, the last thing we're going to set up and probably the
most important thing is URLs to link to different things.
| | 05:14 | So in this case it's important because obviously we're
going to use our buttons to link to different pages.
| | 05:19 | So let's take a look at how we would assign a URL.
| | 05:22 | With the Slice Select Tool, we're going to click one of
these slices to select it. This is our Products button.
| | 05:28 | And what we're going to do is just type a URL.
| | 05:32 | I'm going to type in the Lynda.com website because that's really
just something I can link to easily to show you how this process works.
| | 05:44 | Now let's preview in a web browser and you can see that as I
position my cursor over that button now, it changes to the hand icon.
| | 05:53 | If I click it, you can see that it's automatically
going to take me to the Lynda.com web page.
| | 06:00 | So that's how you can go and setup your links.
| | 06:05 | Now we have some options in terms of how you setup these links.
| | 06:08 | We can choose to open it in the same window.
| | 06:11 | We can choose to open it in a new window.
| | 06:13 | So let's take a look at the differences.
| | 06:15 | Let's go back and preview this in a browser and see what happens right now.
| | 06:19 | You can see that it automatically replaces the contents of that page.
| | 06:23 | If I wanted to, I could set it up to open in a new web browser window.
| | 06:27 | So let's make sure that our product slice is selected.
| | 06:31 | We have our link typed in here.
| | 06:33 | I'm going to choose underscore (_)blank.
| | 06:36 | And now I'm going to click.
| | 06:38 | When I click this, you can see that it's opening
a new page and I still have my other page behind.
| | 06:45 | So that's how you can have it open up in a new window.
| | 06:49 | You can see it's pretty easy to be able to assign your
URLs, you just basically type them in there and choose a target.
| | 06:56 | Whether you want it to be in the same window, you can just leave it with
absolutely nothing in here or if you wanted to open it in a new window,
| | 07:02 | you can just choose blank.
| | 07:04 | So that's how you can create status bar messages, alt
text and link to URLs for your slices in ImageReady CS2.
| | 07:11 | The last thing we're going to take a look at
in the next movie is how to create slice sets.
| | Collapse this transcript |
| Using Slice Sets| 00:01 | >>Next we're going to take a look at how
to work with slice sets in ImageReady CS2.
| | 00:05 | Slice sets offer two key benefits.
| | 00:08 | First is the organizational benefit that is similar to the
concept of layer sets, which we have here in the Layers palette.
| | 00:16 | When you have a large number of slices in your Web
Content palette, sometimes you'll find it overwhelming,
| | 00:20 | and it'll be nice to organize them into slice sets.
| | 00:24 | The second and more important benefit is that you can create
different configurations of slices in the same file and turn on
| | 00:30 | and off the visibility of those slice sets.
| | 00:32 | For example, here I have my javaco.PSD file, and you can see I have
my homepage, my Products page, my About Us page, my Our Stores page,
| | 00:43 | and my Contact Us page, all within the same file.
| | 00:46 | Obviously the same set of slices is not going
to work for each of these different configurations.
| | 00:52 | The configuration that I have right here, of my buttons and my
logo, will apply to each, but the actual slices that we create
| | 00:58 | for the content will be different for each particular page.
| | 01:03 | So I can create a slice set for each page
and store everything all in the same file,
| | 01:07 | which will save me from re-slicing every time I switch compositions.
| | 01:11 | So let's start with what we have here, which is our buttons and our logos.
| | 01:16 | So let's grab a Slice Tool, and we know how to slice just
by clicking and dragging to create a series of user slices.
| | 01:24 | Now, I could use layer-based slices, but I'm just going to use user
slices in this particular case just to get through this quickly.
| | 01:32 | When you're designing your own web pages you can decide which of
the two - let's undo that - which of the two works better for you.
| | 01:41 | We're just going to create a series of user slices here...
| | 01:49 | and just resize that one a little bit...
| | 01:52 | there we go.
| | 01:53 | So now we have this set of user slices here, and you can see up
here in our Web Content palette you can see all of those elements.
| | 01:59 | I'm going to contain those into a single slice set, because
those are slices that we're going to use in all of our pages.
| | 02:07 | So let's group those into a slice set.
| | 02:08 | So I'm going to click this slice 02, hold down my Shift key,
click the top slice, and we click the New Slice Set button,
| | 02:15 | and you can see that automatically puts those into a slice set.
| | 02:19 | Just like with the Layers palette, if I want to rename I can
just click to get the bounding box, and we'll call that "Buttons".
| | 02:26 | We'll leave the visibility of that turned on.
| | 02:30 | Now let's turn on the visibility of our Home layer and grab our Slice
Tool here in the Toolbox, and let's just click and drag to create a series
| | 02:40 | of user slices to make up the contents of this page.
| | 02:44 | Now I'm not going to be too, too careful about the actual
slices that I create, the purpose of this exercise is just
| | 02:50 | to show you how slice sets work.
| | 02:55 | So there we go.
| | 02:56 | I'm actually going to extend that all the way, grab our slice
select tool and just make a few edits here to some of these slices.
| | 03:04 | And there we go.
| | 03:07 | So those three slices make up the contents of our home page.
| | 03:11 | Now down here we should probably divide this one into two
because we have some photographic content and we have some type.
| | 03:17 | So let's target that and choose Slices, Divide Slice, and
we'll want to divide that into two horizontal slices...
| | 03:25 | and I'll just click and drag to reposition that a little bit lower...
| | 03:30 | there we go.
| | 03:31 | Now let's hold down the Shift key and multiple select those slices.
| | 03:35 | Click the Slice Set button...
| | 03:39 | there you can see the contents of our slice set...
| | 03:40 | and I'm going to double-click that and I'm going to call it "Home".
| | 03:44 | Press Return or Enter.
| | 03:46 | Now, let's turn off the visibility of our Home layer set
and turn on the visibility of our products layer set.
| | 03:51 | And you can see that these slices don't match this at all, but I
want to be able to keep these slices here in this Slice palette
| | 04:00 | because when I do go back to working with my home
layer I want to be able to get back to those slices.
| | 04:05 | So not a problem, just like with layer sets I
can turn off the visibility of that slice set.
| | 04:10 | Now, I'm going to grab my Slice Tool and I'm going to click and drag...
| | 04:14 | and I'm going to create a series of slices
that works for this particular set of layers.
| | 04:25 | I'm just going to resize, grab my Slice Select
Tool, to get this looking the way we want it.
| | 04:41 | And there we go.
| | 04:45 | So now we have the slices for our Products page.
| | 04:49 | So let's multiple select those by holding down the Shift key.
| | 04:52 | We'll click the Slice Set button, and see there are the
contents, double click and we'll call this "Products".
| | 05:01 | Press Return.
| | 05:02 | I'm just going to turn off the visibility of those, turn off the
visibility of our Products, and turn on the visibility of About Us.
| | 05:10 | Now I'm just going to grab my Slice Tool again and click
and drag to create my series of slices for my About Us page.
| | 05:24 | There we go.
| | 05:24 | We'll multiple select these holding down the Shift key, click the New
Slice Set button, close it up, double-click, and call that About Us.
| | 05:46 | Turn off the visibility of the slices...
| | 05:48 | actually let's leave the visibility of those slices turned on.
| | 05:51 | Turn off the visibility of the About Us layer set and turn on Our Stores.
| | 05:55 | This actually isn't too bad for this particular composition, but it's not
quite perfect. We need to create a new set of slices for those as well.
| | 06:02 | So let's turn off the visibility of the About Us and grab our
Slice tool and click and drag to create a series of slices here.
| | 06:15 | And if I need to I can grab my Slice Select
Tool and click my slice to reposition.
| | 06:27 | There we go.
| | 06:29 | Now we have the slices that make up the Our Stores page.
| | 06:33 | So we'll multiple select them, click the New Slice Set
button, double-click, call it Our Stores and close it up.
| | 06:42 | Turn off the visibility, and then turn on the visibility
of the Contact Us layer and do pretty much the same thing.
| | 06:48 | Grab the Slice Tool, click and drag to create our slice,
and then click and drag again to create our second slice.
| | 06:59 | And multiple select those holding down the Shift key, click the
New Slice Set button, and we'll double-click, call that Contact Us.
| | 07:08 | Now let's see how all this works in our file.
| | 07:11 | Let's just move our Layers palette down and
expand the contents of our Web Content palette.
| | 07:16 | Turn off the visibility of some of these and see what happens.
| | 07:20 | So we have our buttons turned on.
| | 07:21 | We'll turn on the button's slice set.
| | 07:25 | We'll turn on our Home layer set
| | 07:27 | and we can turn on our Home slice set.
| | 07:29 | You can see that we can just continue to toggle through
here and see that those slice sets that we saved are still there
| | 07:36 | and still match our image.
| | 07:39 | So as we go through and make changes you can see
that we have these slice sets here and as we work
| | 07:44 | on individual pages we can always go back and access these.
| | 07:47 | And this makes it easy for us to have multiple pages within our same file.
| | 07:54 | So, and that saves us from re-slicing over and over
again every time we need to export each individual page.
| | Collapse this transcript |
|
|
13. Creating RolloversUsing Preset Rollover Styles| 00:01 | >>In this chapter of movies, we're going to
take a look at rollovers in ImageReady CS2.
| | 00:06 | Now, rollovers is one thing that you can only create in ImageReady
CS2, you're not able to use - there is no functionality in Photoshop CS2
| | 00:13 | to create rollovers, so you must use ImageReady for this particular task.
| | 00:18 | Before we actually start, let's take a look at what rollovers are.
| | 00:21 | I have the Pottery Barn website open here and
I just want to show you what a rollover is.
| | 00:28 | You can see that as I position my curser overtop
of each of these navigational elements they change.
| | 00:36 | That's called an over state. That's kind of a visual
cue that you give your users to show them what's a link.
| | 00:44 | Now, if I click one of these items...
| | 00:46 | let's click Tableware and Entertaining - you can see
that it automatically changes, it's now italicized.
| | 00:52 | That's because it's in a selected state.
| | 00:54 | So we have our over state, when we position our cursor over it,
and we have our selected state when that is actually selected.
| | 01:02 | This is really helpful in navigation, to be able to give your viewer
some visual cues as to where they are and what is actually a link.
| | 01:12 | So now that we know what rollovers are,
let's take a look at how we can create some.
| | 01:16 | I'm going to show you the fastest and easiest way to create rollovers
in ImageReady CS2, and that is using preset rollover styles.
| | 01:25 | There's a lot of stuff that's required when you create a rollover.
| | 01:27 | You have to slice up the button.
| | 01:29 | So we'd have to create a slice around our Products button, one
around our About Us, one around Our Stores, one around Contact Us -
| | 01:35 | so we need to make our slices.
| | 01:37 | Then we need to create an over state, a down state, and a selected state.
| | 01:41 | We don't always have to create each of those three states, but
we do actually have to go through the process of creating them.
| | 01:47 | ImageReady CS2 has preset rollover styles
that will actually do all that for you.
| | 01:51 | So let's take a look at how they work.
| | 01:53 | If we go up to the Styles palette menu and choose Web Rollover
Styles, click Replace, it's going to update with a series of styles.
| | 02:02 | And you can see that all of these styles have
this black triangle on the top, left-hand corner.
| | 02:08 | What that indicates is that it's a rollover style. It's not just a regular
style that's going to get applied to a layer, it's an actual rollover style
| | 02:14 | which is going to create a rollover button for you.
| | 02:18 | So let's go into our Buttons layer set, and I'm going
to click the Products button layer to select it,
| | 02:24 | and I'm just going to click this Blue Gel Push Button with
Selected, and that just means that it has a selected state.
| | 02:30 | Let's click it and see what happens.
| | 02:32 | Well, first of all, we notice that we have a layer-based slice,
and the rest of our image is made up of a series of auto-slices.
| | 02:39 | Let's take a look at what's happened over here in our Web Content palette.
| | 02:42 | You can see that we have two rollover states.
| | 02:44 | We have an over state, and a Selected state.
| | 02:47 | So this is the normal state for the button, when the user positions their
cursor over, this is the over state, and this is the selected state.
| | 02:55 | It's just a very subtle variation in color.
| | 02:58 | That's really the key with rollovers is
to make a subtle yet noticeable change.
| | 03:03 | You don't want to radically change the design every time you create it.
| | 03:06 | Every time a user positions their cursor
over it or selects a button or what have you.
| | 03:12 | So, let's see what this has actually created in our web browser.
| | 03:16 | Let's click the Preview In Safari button or Preview In Default Web Browser.
| | 03:20 | Here you can see we have our little button.
| | 03:22 | If I position my cursor over it I get the over state.
| | 03:26 | If I clicked it I get the selected state.
| | 03:29 | Now if we scroll all the way down to the bottom here, you can
see that there's a bunch of code that's called JavaScript code.
| | 03:36 | Now in order for rollovers to work in a web browser there needs to be this
set of java script code to give it instructions on how to make it work.
| | 03:45 | And, fortunately, ImageReady CS2 will generate the required
JavaScript code when you choose to save HTML or HTML in images,
| | 03:53 | and it will write that JavaScript code for you.
| | 03:55 | That will make it really easy for you to set up these rollovers.
| | 04:00 | Let's take a look at how we can finish setting up these rollovers.
| | 04:03 | You can see that what's happened down here is we
have this series of layer styles that are applied,
| | 04:09 | and that's basically all that's happened is this rollover style is made up
of a set of different layer styles and they've been applied to this layer.
| | 04:17 | I want to apply the same layer style to these three buttons,
and I could go in and manually do each one at a time.
| | 04:23 | Or, I can click one, hold down my Shift key to multiple select the
others, click the Blue Gel with Selected Rollover style, and boom,
| | 04:33 | now I have a rollover style for each of these four buttons.
| | 04:37 | If we go up here to our Web Content palette, you can see that we have
over and selected states that look identical for each of these buttons.
| | 04:45 | Let's take a look at what happens when we preview this.
| | 04:48 | Go into our web browser, here's our over
states, there's our selected state.
| | 04:55 | See that even when that button is
selected we can still see these over states.
| | 05:00 | Let's select.
| | 05:02 | Now you can see the over states.
| | 05:05 | So that's pretty cool.
| | 05:06 | We didn't actually have to really do much of
anything to create these funky little buttons.
| | 05:11 | We just used the preset rollover styles in ImageReady
CS2, and you can see that there's a number of them.
| | 05:17 | If we go to any of the other libraries - let's just go
back and choose Reset Styles to get to the default -
| | 05:23 | you can see that there are actually some rollover styles in there as well.
| | 05:27 | You can tell when something's a rollover style when it
has these little black triangles in the top left hand corner.
| | 05:33 | That's going to indicate to you that it is actually
a rollover style, not just a regular style.
| | 05:38 | As you've seen, the rollover styles add the over and selected
states, in some cases it'll add an over and a down state, or an over,
| | 05:46 | down and selected state, but, ultimately, they
will create those different states for you.
| | 05:51 | So that's about the fastest and easiest
way to create rollovers in ImageReady CS2.
| | 05:55 | Next up, we're going to take a look at how we can take
this and save it in optimize with these rollovers here.
| | Collapse this transcript |
| Optimizing and Saving Rollovers| 00:01 | >>In the last movie, we took a look at how to create these web
buttons using the preset rollover styles in ImageReady CS,
| | 00:09 | and as you remember the rollover style created the over and selected
states for us and automatically sliced up each of these buttons.
| | 00:19 | So what we want to do now is we want to go through
the process of optimizing and saving these.
| | 00:24 | So first I'm going to click my Optimize tab, and I know from
the slicing chapter that all four of these buttons are the same,
| | 00:31 | and to save me some time, instead of setting optimization settings
for each button, what I can do is link them for optimization.
| | 00:38 | So I'm going to multiple select the slices in my Slice palette,
and I'm going to choose Slices, Link Slices For Optimization.
| | 00:46 | So now we have them all linked together, and no matter what
setting I specify, it's going to apply it to all of the buttons.
| | 00:53 | Now, the process of optimizing rollovers is similar
in concept to when we worked with animation.
| | 00:59 | In that case, we could only specify one
optimization setting for each frame.
| | 01:03 | Here, we can only specify one optimization setting for the entire rollover.
| | 01:07 | So, no matter how many states you have in your rollover, you
can only use one optimization setting for all of those states.
| | 01:15 | So we need to make sure that we're really happy with the states - all
three states, in this case - for each of the optimization settings.
| | 01:24 | So we're going to have to do a little bit of experimentation to see
whether JPEG or GIF is going to yield the smallest file size here,
| | 01:31 | because we do have some type and then we do have
our buttons that are a continuous tone graphic.
| | 01:39 | So we have our GIF selected here, let's
start with that and see what we can create.
| | 01:44 | Let's drop it down to 128.
| | 01:46 | I'm actually going to toggle the Slice Visibility button, just
because I want to see how this is going to look without the slices,
| | 01:52 | I find it gives me a more accurate view...
| | 01:57 | take it down to 64...
| | 02:07 | and really, it's not until we get to about
32 that we start to have a bad quality.
| | 02:12 | So let's take a look at that with our over and selected states.
| | 02:15 | selected we're starting to see a little bit of
grain in here, so let's see what happens with 64...
| | 02:20 | that looks a little bit better.
| | 02:22 | So we're down to a file that's 32K.
| | 02:25 | So with selected 64, we have 32K.
| | 02:27 | Let's try JPEG and see what we get.
| | 02:30 | We have 34K and you can see that the file automatically is not looking
too good, so obviously GIF is going to be our best solution in this case.
| | 02:37 | So we'll check out all the different states and make sure
that we really are happy with it, and that looks pretty good.
| | 02:45 | So now what we're going to do is we're going to
actually go through the process of saving these files.
| | 02:50 | I'm going to go to my File menu, and I'm going to choose Save
Optimized As, and I'm going to go to my desktop and I'm going
| | 02:58 | to create a new folder called "Buttons".
| | 03:02 | I want to make sure that I save the HTML and images,
because in order for these rollovers to work in a web browser,
| | 03:10 | we need a little piece of JavaScript code to tell
the web browser what to do with these rollovers.
| | 03:15 | The only way we're going to do that is if we create HTML and images.
| | 03:18 | So let's click Save.
| | 03:23 | Now this is telling me that some names are being truncated because
they're more than 31 characters, because I'm on a Mac, and I can go ahead
| | 03:30 | and change my Save Options if I want to.
| | 03:34 | That's because some of these names here in the Web Content palette
-- if we expand this you can see -- some of these are quite long.
| | 03:41 | So that's something that you want to consider
when you're designing your own web pages.
| | 03:44 | I'm just going to live with the fact that it's going to truncate
my names, I'm not too concerned about this because the basics
| | 03:49 | of this exercise is just to help you learn how
to actually save and optimize these rollovers.
| | 03:54 | So here we are in Buttons, Javaco around...
| | 03:58 | Let's click save, we're going to accept this warning
and now let's go down here and see what we've got.
| | 04:04 | If we go into our images folder you can see that we have all of these
images that are based on the actual auto slices in the image, the 11, 12,
| | 04:14 | 13, and all the ones above it.
| | 04:16 | Then we have a whole bunch of other ones here, and you can
see that as we move down we have a series of different files,
| | 04:26 | and these represent all of the different rollover states for our buttons.
| | 04:30 | So let's go ahead and open up this file and see what we've got here.
| | 04:33 | You can see that as I'm positioning my cursor over, I'm seeing my over
states, and as I click, you can see I'm getting my selected states.
| | 04:46 | So that's pretty cool, to be able to save all that within the same file.
| | 04:54 | So let's exit out of that.
| | 04:56 | So that's the basic process for when you need to save a rollover, and
the basic thing to remember is that if you're working with buttons,
| | 05:03 | link them for optimization, that will save you from
specifying settings for the same buttons over and over.
| | 05:08 | The second thing to remember is that you can only use one
optimization for all of the rollover states in your image.
| | 05:14 | So keep those two things in mind when you're optimizing your rollovers.
| | Collapse this transcript |
| Creating and Saving Rollover Styles| 00:01 | >>Now that we have an understanding about how rollover styles
work, let's take some time and create some custom rollovers,
| | 00:08 | because you're often going to want to create your own
custom rollovers, rather than relying on the ones that ship
| | 00:12 | in the preset rollover styles with ImageReady CS2.
| | 00:15 | There's a number of ways that we can create rollover styles,
and we're going to take a look at that throughout this chapter.
| | 00:20 | The first type of rollover that we're
going to create is with rollover styles.
| | 00:25 | So, let's get started.
| | 00:26 | I'm going to open up my Buttons layer set, I'm going to choose
Products button, and on my Web Content palette I'm going
| | 00:32 | to click Create Layer Based Rollover.
| | 00:35 | That's automatically going to create a layer-based
slice, and you can see it creates an over state.
| | 00:41 | Now, I want my over state to be a different color than my
Products button, so what I'm going to do is create a color overlay
| | 00:49 | with my layer styles overtop of this layer.
| | 00:51 | So I'm going to choose Color Overlay from the Styles popup menu,
I'm going to click the color swatch, and I'm going to make this sort
| | 01:01 | of a medium blue- or a medium turquoise I guess.
| | 01:04 | Just like this.
| | 01:05 | I'm going to click OK.
| | 01:06 | I also want to add a shadow, so I'm going to click Inner
Shadow, and I'm just going to leave this set to the defaults,
| | 01:14 | and I'm going to click OK.
| | 01:16 | So now we have our over state, you can see our layer styles
disappear here, and we have our over state, now they appear again.
| | 01:24 | So this is contact sensitive. The Layers palette becomes
contact sensitive based on what state we have selected here.
| | 01:32 | Now we're going to create a Down state.
| | 01:34 | So I'm going to click the Create Rollover State button,
that creates a down state, and I want to change the color
| | 01:39 | of this just slightly for the down state.
| | 01:41 | So I'm going to double click my Double overlay layer style, click this
Color Swatch, and I'm just going to select a slightly darker blue.
| | 01:49 | And I'm going to click OK, and I'm going to click OK again.
| | 01:53 | So now I have my normal, my over, and my down state.
| | 01:58 | Now I want to create a Selected state.
| | 02:00 | So let's click the New Rollover State button, and I'm going to double
click the Color overlay because this time I don't it to be blue at all,
| | 02:08 | I want it actually to be green.
| | 02:09 | So let's click the color swatch, and we'll just pick kind of a
medium green, and click OK, and click OK again to accept that change.
| | 02:24 | So now we have our normal, our over, our down, and our Selected state.
| | 02:30 | Now we want to take a look at the interactivity of this rollover.
| | 02:33 | Now I could go ahead and preview this in my browser, but what I'm
going to do is just click this button called Preview Document.
| | 02:39 | And if I click that what it allows me to do is
basically preview my different rollover states.
| | 02:44 | So, if I position my cursor over it, I see the
over state, if I click, I can see the down state.
| | 02:50 | If I release my mouse I see the selected state.
| | 02:52 | You can see that they all update automatically over
here in the Web Content palette, depending on where I am.
| | 02:58 | So here we have our normal, over, down, and selected.
| | 03:03 | So that's pretty cool.
| | 03:04 | So let's exit the Preview mode by clicking the Preview Document button.
| | 03:08 | Now we want to apply these same layer styles onto our
other buttons, and that could be a tedious process,
| | 03:16 | because cutting and pasting as we saw earlier might not work here.
| | 03:18 | But what we can do is create our own custom rollover style.
| | 03:22 | So I'm going to go to my Window menu, and I'm going to choose Styles,
and I'm going to make sure I have my Styles palette open here.
| | 03:30 | I'm going to click the button down here called Create New Style.
| | 03:35 | I want to make sure I include Layer Effects,
Blending Options, and Rollover States.
| | 03:39 | The Rollover States option is critical because that's what's going to
allow me to maintain all of the different states for this button.
| | 03:44 | I'm just going to call this my Javaco rollover, and I'm going to click OK.
| | 03:52 | So there we have our Javaco rollover right here.
| | 03:55 | Now I'm going to click the About Us button.
| | 03:57 | I'm going to click it, I'm going to click our Javaco rollover
style that we've created, and let's take a look at what it created.
| | 04:04 | Here we have the normal, the over, the down, and the selected state.
| | 04:10 | Pretty cool, huh?
| | 04:11 | Let's try it again.
| | 04:12 | Here's our Our Stores, we're going to click it.
| | 04:14 | Let's see what it created.
| | 04:17 | The normal, the over, the down and the selected.
| | 04:21 | Let's do the last one, the Contact Us button.
| | 04:23 | And you can see it created the normal, the over, the
down and the selected state, and they're all consistent.
| | 04:32 | So let's take a look at what this looks like now in our web browser.
| | 04:35 | I'm going to click the Preview In Safari button or
the Preview In Default Browser, and let's take a look.
| | 04:41 | As I position my cursor over, we see the down states, as I click, you can
see the down state and when I release my mouse you see the selected state.
| | 04:51 | Here's the over states, the down state, the selected state.
| | 04:56 | Over, down, selected.
| | 04:59 | So that's pretty cool, that didn't really take
us a lot of time to create those rollovers.
| | 05:03 | You can see that by saving these as custom rollover styles
you can apply them to more than one button and make sure
| | 05:09 | that your rollovers are consistent from one button to the next.
| | 05:13 | Next up we'll take a look at how to create rollovers with layer visibility.
| | Collapse this transcript |
| Creating Rollovers from Layer Visibility| 00:01 | >>Next we're going to take a look at rollovers and take a
look at how to create rollovers based on layer visibility.
| | 00:07 | So what I'm going to do is I'm first going to slice my image here.
| | 00:11 | So, I'm going to grab my Slice Tool and I'm going to click and
drag to create four user slices around each of these buttons.
| | 00:25 | Once I've done that I'm going to start with my
Products button here which is slice number three.
| | 00:35 | I'm going to open my Products layer set - you
can see that I have a number of layers in here.
| | 00:43 | So, this is going to be my normal state.
| | 00:45 | Next I want to create an over state, so I'm going to click the
oer state, I'm going to turn off the visibility of the blue layer,
| | 00:51 | turn on the visibility of the grey layer, turn
off the visibility of the Products blue layer,
| | 00:56 | and turn on the visibility of the Products green layer.
| | 00:59 | That's going to be my oer state.
| | 01:01 | Now I'm going to create a dwn state.
| | 01:03 | So, I'm going to click the Create Rollover State button, and you can see
that as I toggle between it bases the dwn state on the rollover state.
| | 01:11 | All I'mm going to do is I'm going to turn on the visibility of
my tea layer, and that's going to be the change to my down state.
| | 01:17 | I'm going to click my Create Rollover State
button one more time, to create a selected state.
| | 01:23 | Again, the selected state is based on the down state.
| | 01:26 | And now I'm going to turn on the visibility of my smoke curl layer.
| | 01:29 | So let's take a look.
| | 01:30 | We have our normal, our over, our down, and our selected states.
| | 01:35 | Let's preview that here.
| | 01:37 | I'm going to click the Preview Document button, I'm going to position
my cursor over to see the over state, click to see the down state,
| | 01:45 | release to see the selected state.
| | 01:48 | So that's pretty cool- and pretty easy
to just create those with layer visibility.
| | 01:52 | Let's move on and work on our next one.
| | 01:54 | We're going to start with Javaco 05, which is our About Us.
| | 01:58 | So let's close up the Products layer group
- oh, and I didn't exit the Document Mode.
| | 02:03 | This Document Mode can be a little bit tricky.
| | 02:04 | You have to remember to exit in and out of it.
| | 02:07 | So I'm going to click OK, and now we've exited, and I
know that because the button is white now instead of grey.
| | 02:12 | So, close up the Products layer group, open up the About
layer group, and we're going to basically do the same thing.
| | 02:19 | We're going to first create an over state, we're going to turn off the
visibility of the blue layer, turn on the visibility of the grey layer,
| | 02:26 | turn off the visibility of the About blue layer,
and turn on the visibility of the About green layer.
| | 02:30 | I'm going to create a new rollover state, which is a down state.
| | 02:34 | This time I'm going to turn on the visibility of the circle layer,
I'm going to create another rollover state which is selected,
| | 02:40 | and I'm going to turn on the visibility of the smoke curl layer.
| | 02:43 | Let's close that up and move on to the next one.
| | 02:47 | I'm going to grab my Slice Select Tool and click Our Stores.
| | 02:51 | We're going to expand the Stores layer set.
| | 02:54 | Let's go up here in the Layers palette to
number seven, and create an over state.
| | 03:01 | We're going to turn off the visibility of the blue
layer, turn on the visibility of the grey layer.
| | 03:06 | Turn off the visibility of the blue Stores layer,
turn on the visibility of the Stores green layer.
| | 03:10 | Now we're going to create a down state.
| | 03:12 | I'm going to turn on the visibility of the Label layer, I'm
going to create another state which is the selected state,
| | 03:18 | and that's going to be the smoke curl.
| | 03:20 | So you can see I'm being very consistent
in terms of how these are built.
| | 03:26 | Basically, my over state is always changing the background color and the
color of the type, my down state is always adding an element to my icon,
| | 03:34 | and the selected state is always adding the little smoke curl.
| | 03:39 | So you want to think about that type of
consistency when you're designing your rollovers.
| | 03:43 | Let's go to our last one, Javaco 09.
| | 03:46 | This is our Contact Us button.
| | 03:49 | We'll expand that layer set, we're going to create a new rollover state,
which is going to be an over state, we'll turn off the blue layer,
| | 03:56 | turn on the grey layer, turn off the Contact
blue layer, turn on the Contact green layer.
| | 04:01 | Now we're going to create another rollover
state which is going to be a down state.
| | 04:05 | We're going to turn off, and this time
I'm just going to turn on the Flap layer.
| | 04:09 | I'm going to create another rollover state, which is the selected state.
| | 04:12 | And now I'm just going to turn on our
smoke curl layer, and I can close this up.
| | 04:16 | Now let's take a look at how this is going to work in our web browser.
| | 04:19 | I'm going to click the Preview In Safari button, and let's take a look.
| | 04:24 | There's our over states.
| | 04:27 | Here's my down state, selected, over, down, selected.
| | 04:32 | over, down, selected.
| | 04:34 | over, down, selected.
| | 04:36 | So that was pretty cool, and it really didn't take
too much time to do that with layer visibility.
| | 04:40 | The most time consuming is obviously designing what the rollovers are
going to look like, but you have an idea of how to do that from some
| | 04:46 | of the other chapters in this movie.
| | 04:48 | You can see that that's how we would go
about creating rollovers with layer visibility.
| | 04:53 | Next we're going to take this idea of layer visibility
one step further and we're going to apply it to type.
| | Collapse this transcript |
| Creating Rollovers with Type| 00:01 | >>One effective way of creating a navigation bar that contains just
text is to create over and selected states with your font style change.
| | 00:09 | For example, you could have this as your regular state and as you
position your cursor over each of the buttons you could have it change
| | 00:16 | to italic, and then when you've selected
it, it could change to bold italic.
| | 00:20 | That's a really effective and easy to create visual
cue to help your users navigate through your website.
| | 00:26 | So let's take a look at how we would create that.
| | 00:29 | I'm first going to start with my Slice Tool,
and I'm going to slice up this navigation bar,
| | 00:34 | and I'm going to create these user slices basically the size of each
of these little areas, these little chunks on the navigation bar,
| | 00:42 | for each little text label.
| | 00:44 | I'm just going to grab my Slice Select Tool and
just make sure that these are flush against each other,
| | 00:51 | and I know that they are when I can see that dotted line.
| | 00:55 | So let's start here with our Contact Us layer,
which is our layer which is our slice six.
| | 01:01 | I'm going to click the Create Rollover
State button to create an over state.
| | 01:09 | And, what I'm going to do is I'm going to go to my Contact Us layer,
and I'm going to double-click, and you can see it's telling me
| | 01:18 | that the layout may change.
| | 01:19 | I'm going to click OK, and what I'm going
to do is I'm going to change this to italic.
| | 01:23 | What I want you to notice is that if you click back on the normal
state, even though I had over selected, it's still going to overwrite
| | 01:31 | that change in both places.
| | 01:33 | That's just kind of a quirky thing that you have to get used to.
| | 01:35 | When I first tried to create text-based rollovers, I sort of thought
that it would be contact sensitive, similar to the way that it works
| | 01:42 | with layer styles, but it doesn't work that way
with type, so we have to try to work around that.
| | 01:47 | So what we're going to do is I'm going to go back to my normal state,
and I'm going to choose Regular, and that's going to overwrite both.
| | 01:54 | Now what I'm going to do is I'm going to duplicate this layer.
| | 01:57 | So I'm going to go to my Layers palette
menu and I'm going to choose Duplicate.
| | 02:01 | I'm going to turn off the visibility of my Contact Us layer, I'm
going to double-click this and I'm going to rename it Contact Us over,
| | 02:10 | and I'm going to double-click the tea icon and change it to italic.
| | 02:15 | So now let's see what we've got.
| | 02:17 | Here's our over state, except that I've made a little mistake.
| | 02:21 | I need to turn off the visibility here.
| | 02:24 | So here's our normal state, here's our over state, and
I need to turn on the visibility of the over layer.
| | 02:31 | So, normal...
| | 02:33 | over. Now I want to create a selected state, so I'm
going to click the Create Rollover State button,
| | 02:38 | you can see it creates a down state first, that's fine.
| | 02:40 | I'll just leave the down state the same as the over state,
and I'll click one more and create a selected state.
| | 02:46 | Now what I want to do is I want to make this bold italic.
| | 02:49 | So I'm going to duplicate my layer, I'm going to turn off the visibility
of the over layer, I'm going to double-click this, and call it selected.
| | 03:01 | I'm going to double-click the tea icon and I'm going to choose Bold + Italic.
| | 03:07 | So let's make sure we have this set up right.
| | 03:09 | I have to turn off the visibility of that layer in
each of these cases, as necessary, and turn it on here.
| | 03:17 | So, here we have our normal, over, down, selected.
| | 03:25 | And take a look at how the visibility works here.
| | 03:29 | The Contact Us is turned on, the over is turned on, the
over is turned on again, and the selected is turned on.
| | 03:36 | So, let's preview this in our document window and see how it looks.
| | 03:41 | Over, down, selected.
| | 03:44 | That's pretty cool.
| | 03:45 | It is a little bit tedious to have to create these duplicate layers
but it's not too bad. You can do it pretty quickly, as we've seen here.
| | 03:52 | So let's move on to the next one.
| | 03:53 | We're going to start with Our Stores, and again, it's
reminding me that I have to exit my Document Mode,
| | 03:59 | this is something I forget to do all the time.
| | 04:02 | So, just click OK to exit our Document Mode.
| | 04:04 | We're going to click the Our Stores layer,
and we are going to choose slice 05.
| | 04:09 | We're going to create - I'm actually going to create the
layers first, before I start creating my different states.
| | 04:17 | So I'm going to duplicate my layer twice.
| | 04:19 | This one we're going to call "Over", this one we're going to call "Selected".
| | 04:28 | And I'm double-clicking the layer name to highlight it
and get this bounding box, and pressing Return or Enter.
| | 04:34 | So let's turn off the visibility.
| | 04:36 | Make sure we have the Our Stores set up correctly, which we do.
| | 04:40 | Now let's take a look at the over state.
| | 04:42 | We're going to double-click, click OK, and we're going to say italic.
| | 04:48 | Turn that off, turn this one on, double click,
click OK, and we're going to choose Bold + Italic.
| | 04:56 | So now we can create our different rollover states.
| | 04:57 | So let's start here, with Our Stores turned on.
| | 05:01 | We're going to click the Create Rollover State button.
| | 05:03 | We're going to use the regular type for our normal state.
| | 05:07 | For our over state we're going to turn
off Our Stores, turn on Our Stores over.
| | 05:12 | We're going to create a down state.
| | 05:14 | We're going to leave it the same.
| | 05:15 | We're going to create another state, which is the selected state.
| | 05:17 | We're going to turn off the over state, turn on the selected state.
| | 05:21 | Now let's take a look and make sure that worked OK.
| | 05:24 | Over, down, selected.
| | 05:27 | Beautiful.
| | 05:28 | Let's click the Preview Document button to exit.
| | 05:31 | Now we're going to do that for the rest.
| | 05:33 | So I'm first going to duplicate my layer.
| | 05:40 | Duplicate it again.
| | 05:42 | We're going to call this one over, and the second one selected.
| | 05:52 | Turn off About Us and off selected.
| | 05:55 | Double-click.
| | 05:57 | Click OK. Italic.
| | 06:01 | Turn the visibility off.
| | 06:02 | Turn the visibility on of the selected.
| | 06:05 | Double-click, click OK, and choose Bold + Italic.
| | 06:10 | Now we can set up our rollover states.
| | 06:12 | So let's go to 04, we're going to turn off the visibility of these.
| | 06:18 | Click the Create Rollover - oh, sorry, that was a mistake on my part.
| | 06:21 | We're going to turn on the About Us layer.
| | 06:23 | Click the Create Rollover State button,
turn off About Us, turn on About Us over.
| | 06:28 | We're going to click the rollover state again to create a down,
which is going to remain the same, and we're going to click it again
| | 06:33 | to create a selected state.
| | 06:34 | We'll turn off the About Us over, turn on the About Us selected.
| | 06:39 | And now we'll do the last one which is Products.
| | 06:42 | So we're going to duplicate this twice.
| | 06:48 | We're going to call this Products over, we're
going to call the second one Products selected.
| | 06:57 | We are going to select our layer style - well actually
first we need to actually set this up, don't we?
| | 07:03 | So let's double-click, click OK.
| | 07:06 | We're working on the selected, that's going to be bold, italic.
| | 07:11 | And the over is going to be italic.
| | 07:16 | Excellent.
| | 07:17 | So here we are in our normal state.
| | 07:19 | Turn off the visibility of the Products Over and Products Selected,
click the New Rollover State button to create an over state.
| | 07:26 | We're going to turn off Products, turn on Products Over.
| | 07:29 | We're going to create a down state.
| | 07:31 | We're going to leave it the same, we're going to create a selected state,
we're going to turn off the over layer, turn on the selected layer.
| | 07:38 | Excellent.
| | 07:39 | Now let's take a look at this in our web browser.
| | 07:43 | We can see our over states.
| | 07:46 | If I click you can see my selected states, and my over states.
| | 07:51 | SO that was pretty easy.
| | 07:53 | The difficult thing about that is just sort
of keeping track of what layers are turned on.
| | 07:58 | You can see I made a few little mistakes as
I was working and I was able to correct them.
| | 08:03 | You just need to take your time and go through and make sure
that the visibility of the appropriate layers is turned on.
| | 08:08 | And I like to name my layers as I've done here.
| | 08:10 | I have the Normal state, the over state, the selected state, and
that just helps me corrospond it to the appropriate rollover state.
| | 08:18 | So again this is just all about layer visibility, but, as you can see,
by just changing your type face you're able to create a very effective
| | 08:25 | and easy way for your users to navigate through your website.
| | 08:29 | You can see that the change of the font face adds a really nice visual
cue and helps them know where they are as they navigate through.
| | Collapse this transcript |
| Creating Remote Rollovers| 00:01 | >>Next we're going to take a look at how to
create remote rollovers in ImageReady CS2.
| | 00:05 | The rollovers we've created thus far basically
affect a change in the current slice.
| | 00:12 | Remote rollovers mean that something happens elsewhere on the screen.
| | 00:16 | Let's take a look at a practical example.
| | 00:19 | Here we have a website, and you can see that as I position
my cursor over each of these navigational elements,
| | 00:26 | the icon over here on the right side updates.
| | 00:30 | This indicates a remote rollover because it's
something happening elsewhere on the webpage.
| | 00:36 | So that's a remote rollover.
| | 00:38 | So let's see how we can set up a remote
rollover for this particular navigation bar.
| | 00:42 | The first thing we need to do is we need to
create some slices for our navigation bar.
| | 00:49 | So I'm just going to click and drag and create a series of user slices.
| | 00:57 | We'll just grab the Slice Select tool and resize
these so that they're nice and flush against each other.
| | 01:14 | There we go.
| | 01:14 | Now I want to create a little remote rollover so we
have an icon appear up here on the top left corner.
| | 01:22 | So I need to create a slice that's big enough
to contain all of the remote rollovers.
| | 01:26 | They're not all going to be turned on at the same
time, but we want to make sure that they all fit.
| | 01:31 | So if we go into our Products layer group, here we have Teapot
Over , and I'm going to turn on the visibility of that layer.
| | 01:38 | I'm going to open my About Us layer group, I'm going
to turn on the visibility of the Teacup Over layer.
| | 01:45 | I'm going to open up my Our Stores layer group, I'm
going to turn on the visibility of my Tin Over layer.
| | 01:50 | I'm going to open up my Contact Us layer group and I'm
going to turn on the visibility of the Envelope layer.
| | 01:56 | Now, as I said, we're never going to have
all four of these turned on at the same time.
| | 02:00 | The reason I'm turning these on is so that when I create the slice
by clicking the Slice Tool, I can click and drag and create a slice
| | 02:07 | that is big enough to contain all four of those icons, because we want
to make sure that they can all successfully appear in that slice area.
| | 02:17 | So we've done that.
| | 02:19 | Now we can turn off the visibility of those over icons and close up
these layer groups, or layer sets as they're called in ImageReady.
| | 02:27 | I'm going to leave the Products layer group
open because we're going to start with it.
| | 02:35 | So I'm going to grab my Slice Select Tool, and
I'm going to click the Products button here...
| | 02:41 | and that's slice 04.
| | 02:43 | What I want to do is create an over state.
| | 02:46 | Now the first thing I want to do with my over state is I want to
change the type from being the type face that it is to being italic,
| | 02:53 | and I have that set up here, I have some duplicated
layers that have the appropriate text set up.
| | 02:58 | So I'm going to turn off the visibility of
Products, turn on the visibility of Products Over.
| | 03:03 | Now I also want the little Teapot Over icon to appear.
| | 03:08 | So let's see what happens if we preview that in our browser window.
| | 03:13 | Well you can see that what happens is that our over state
works for the type but we don't see the icon up here.
| | 03:19 | That's because when you create an over state it only looks
at the contents of what's happening inside the slice.
| | 03:27 | I could turn all the layers on I want anywhere else in the image
and it's not going to make any difference to the over state.
| | 03:33 | It only looks at the contents that are inside the slice area.
| | 03:38 | So what I have to do is I have to tell it to look at the contents of slice
2 as well, and to do that we're going to use this little target icon.
| | 03:46 | You can see the Tool Tip says "Drag to image window to
make the targeted slice remote for this rollover state."
| | 03:52 | So we're going to do just that.
| | 03:53 | We're going to click and drag, and when I get
to the 02 layer I'm going to release my mouse.
| | 03:59 | And you can see that we now have two new
little icons, two little slice icons.
| | 04:03 | We have this one that's indicating this is a remote state, and
this one here indicating that this slice has a remote state.
| | 04:09 | So now let's look at how this works in our web browser.
| | 04:14 | Now it's working exactly how we want it to, so let's set up the others.
| | 04:19 | So let's close this one up, we'll close up the Products layer
group, and we'll go to the About Us layer group and open that up,
| | 04:29 | and we're going to choose slice 05.
| | 04:32 | Now I'm saying "layer group" - in ImageReady
CS it's actually called "layer set."
| | 04:36 | However, they're the same concept in principle.
| | 04:38 | So here we have our Remote 05, and I'm going to
create an over state, make sure it's selected.
| | 04:45 | I'm going to turn off the About Us layer, turn on the
About Us Over layer, and turn on the Teacup Over layer.
| | 04:52 | I'm going to grab the target icon, and click and
drag onto the slice 02, and release my mouse.
| | 04:57 | You can see I now have the little icons that show it's a remote rollover.
| | 05:02 | We'll close that up and move on to the next
one, which is Remote 06, the Our Stores layer.
| | 05:07 | So we'll close up About Us, and open up Our Stores.
| | 05:12 | I'm going to create a new rollover state, which is an over state.
| | 05:15 | I'm going to turn off the visibility of Our
Stores, turn on the visibility of Our Stores Over.
| | 05:21 | I'm also going to turn on the visibility of the Tin Over.
| | 05:24 | I'm going to click and drag the target icon onto slice 02.
| | 05:29 | When I release you can see that we now have these little icons
that show it's a remote rollover state for the over state.
| | 05:37 | Let's close this up, and we're going to
go on to our last one, which is slice 07.
| | 05:41 | We're going to close up the Our Stores layer
set and open up the Contact Us layer set.
| | 05:47 | I'm going to, with the remote 07 selected, click the
Create Rollover State button to create an Over state.
| | 05:52 | I'm going to turn off the visibility of the Contact Us layer,
and turn on the visibility of the Contact Us Over layer.
| | 05:58 | I'm also going to turn on the visibility of the Envelope Over layer,
and grab this little target icon, and click and drag onto the slice 02.
| | 06:10 | Now let's take a look at the result.
| | 06:13 | I'm going to click the Preview In Safari button, and
now you can see our little remote rollover states.
| | 06:21 | So that creates kind of an interesting navigational cue, you know, as
you're positioning your cursor you sort of see this little picture,
| | 06:28 | and we took a look at how to create these
icons earlier in the navigation chapter.
| | 06:31 | I didn't use them in this context when we created them, but
you can see that this is another navigational use for them.
| | 06:38 | So let's close this.
| | 06:40 | Now we just created over states.
| | 06:43 | We can also create remote selected states, and, using this
file as it is, we're going to do that in the next movie.
| | Collapse this transcript |
| Creating Remote Selected States| 00:01 | >>If we followed the last movie, you should have a file
open on your machine that looks something like this.
| | 00:05 | Yours will be called remote.PSD.
| | 00:07 | If you're starting from scratch, open up the file called
selected.PSD so you're in the same place as the rest of us.
| | 00:14 | What we did in the last movie is take a look at
how to create remote rollovers for an over state.
| | 00:19 | Let's take a look by previewing in our browser here.
| | 00:22 | You can see that as I position my cursor over each of these text buttons
I get a little icon in the top left hand corner and it changes depending
| | 00:30 | on which text button I position my mouse over.
| | 00:33 | That's called a remote state, and by positioning my
cursor over, we know it's called a remote over state.
| | 00:39 | Next, we're going to take a look at how to create a remote slected state.
| | 00:44 | So what we're going to do is we're going to start with our
Contact Us layer, and here we have our over state selected.
| | 00:51 | And what we want to do first is create a slice for our selected state.
| | 00:54 | So let's turn on the visibility of our Envelope Selected
layer, that's what's going to be our selected state.
| | 00:59 | We're going to see this little icon.
| | 01:01 | Now all of these are the same size so I'm just going to leave the
Envelope Selected turned on and grab my Slice Tool, and I'm going to click
| | 01:09 | and drag and create a slice.
| | 01:13 | One thing I'm going to point out: if the contents of what's going to
appear in this slice are different sizes, similar to what we had up there
| | 01:20 | where they're all slightly different sizes, I would recommend that as
you're creating your slice, you turn on the visibility of all those layers.
| | 01:26 | That way you'll make sure that you create a slice that's
going to encompass the entire contents of all of those layers.
| | 01:33 | Because that's important, you don't want to have anything cut off.
| | 01:36 | So this is going to work out just fine for us.
| | 01:40 | So let's go back to our slice 7, go to the over state, and we're
going to turn off the visibility of the Envelope Selected layer.
| | 01:49 | That was just there to create our slice.
| | 01:51 | And we're going to click the Create Rollover State
button, and that's going to create a down state.
| | 01:56 | Now, I don't really want to create a down state here, I just
want to create a selected state, so I'm going to double-click,
| | 02:00 | and I'm going to choose selected, and I'm going to click OK.
| | 02:04 | And there you can see I've overridden the down state.
| | 02:08 | Now what I'm going to do is I'm going to turn
off the visibility of the Contact Us Over layer,
| | 02:12 | turn on the visibility of the Contact Us Selected layer.
| | 02:15 | Turn off the visibility of the Envelope Over layer, and I'm
going to turn on the visibility of the Envelope Selected layer.
| | 02:23 | So that's going to make up our selected state.
| | 02:25 | Now we know in order to make this a remote rollover we have to target it.
| | 02:31 | Let's take a look at what I mean by that.
| | 02:32 | Let's click the Preview In Default Browser
button, and here are all our remote states.
| | 02:38 | If I click that Contact Us, you can see that nothing's happening
here, and that's because we haven't set it up to be a remote state.
| | 02:46 | We've turned on the visibility, but it hasn't become a remote state yet.
| | 02:50 | So let's do that.
| | 02:51 | We're going to grab this little target
icon, and click and drag onto our slice 10.
| | 02:57 | Voila. Now let's take a look at the difference.
| | 03:00 | We're going to preview this in our browser.
| | 03:02 | Here's our over states, and now let's click
Contact Us to see our selected state...
| | 03:08 | and there we go.
| | 03:10 | You can see that the over states still exist, even though
that selected state is still there, I can still position my cursor
| | 03:16 | over these other buttons, and get the other remote over states.
| | 03:21 | So let's set this up for our other layers, or our other buttons here.
| | 03:26 | So let's go to Selected 6...
| | 03:28 | let's open it up and choose the over state...
| | 03:31 | and what I'm going to do is click the Create Rollover
State button, that's going to create a down state.
| | 03:37 | I'm going to double-click to create a selected state.
| | 03:40 | And I'm going to click OK.
| | 03:41 | Let's close up the Contact Us layer set, open up the Our Stores layer set.
| | 03:46 | I'm going to turn off the visibility of the Our Stores Over
layer, turn on the visibility of the Our Stores Selected layer.
| | 03:52 | I'm going to turn off the visibility of the Tin Over layer,
and turn on the visibility of the Tin Selected layer.
| | 03:58 | What I'm going to do is I'm just going to grab
this target icon and drag it onto our slice 10.
| | 04:04 | Beautiful, let's keep moving on here.
| | 04:06 | We're going to start with - we're going to move on to slice 05.
| | 04:09 | We're going to grab our Over layer, close up the layer set called
Our Stores, we're going to create a new rollover state called Down,
| | 04:19 | double-click it, choose Selected, and click OK.
| | 04:24 | Now we're going to open up the About Us layer set, turn off the
visibility of the About Us Over layer, turn on the About Us Selected.
| | 04:32 | Turn off Teacup Over, turn on Teacup Selected.
| | 04:36 | Grab the little target, and click and drag on to the slice.
| | 04:41 | Last one. Slice 04, let's open it up.
| | 04:44 | Grab the Over state, close up About Us, open up Products.
| | 04:49 | We're going to click the Create Rollover State button,
we're going to double-click and make that a selected state.
| | 04:56 | Click OK. Turn off the visibility of Products
Over, turn on the visibility of Products Selected.
| | 05:02 | Turn off the visibility of Teapot Over,
turn on the visibility of Teapot Selected.
| | 05:07 | Now we're going to click and drag the target
icon onto slice 10 to make it a remote rollover.
| | 05:12 | So now let's preview this in our browser and see what we've got.
| | 05:17 | We see all of our remote states, and we can see our remote Selected states.
| | 05:27 | So that's pretty cool, and it really wasn't too hard to do that.
| | 05:30 | The trick is just to always remember where you are because there's a lot of
work to turn on and off the visibility of layers, and your Layers palette
| | 05:36 | and your Web Content palette can get pretty complicated pretty fast.
| | 05:40 | So that's how we can create remote selected states.
| | 05:44 | Now you can see that there's a number of HTML pages required
to make this work because there's all of these selected states.
| | 05:51 | So we have all of these pages that look slightly different.
| | 05:54 | Now you might be thinking "Ugh, I'm going to have to go through and export
and save each of these HTML files with each of these configurations."
| | 06:01 | Uh-uh. There's actually this really cool feature in ImageReady
CS2 that's going to let us save all of those pages at once.
| | 06:07 | So let's go to the File menu and choose Output Settings, Saving HTML.
| | 06:12 | We're going to turn on this option called Output Multiple HTML Files.
| | 06:17 | We're going to leave the HTML naming the same, and we're going to click OK.
| | 06:21 | We're going to choose File, Save Optimized As.
| | 06:26 | I'm going to go to my desktop, and I'm going to create a
new folder called "Remote", and I'm going to click Create.
| | 06:34 | And I'm going to make sure that we save HTML and images, that's critical.
| | 06:38 | Because we know that A) we need the JavaScript
code to make these rollovers work in a web browser,
| | 06:42 | and B) we want to save all of the HTML files required to make
this whole site work with all of the over and selected states.
| | 06:51 | So let's click Save.
| | 06:52 | And I'm getting this little error message that's telling me that some
of my files will be truncated because they're over 31 characters.
| | 07:00 | I'm not going to worry about that, but when you're designing your web
pages make sure that you're really careful about making sure that you fit
| | 07:07 | within this 31 character limit.
| | 07:08 | So I'll click OK, go to my desktop to this Remote folder, and
you can see that we have all of these additional HTML files.
| | 07:17 | We go into our images folder - you can
see that we have tons and tons of images.
| | 07:20 | We have all of our little over images
and all of our little selected images.
| | 07:24 | There's a lot that we need to make this website work.
| | 07:28 | Let's start with this HTML page just the selected HTML.
| | 07:32 | Here's our over states.
| | 07:34 | Now watch in the title bar up here, or the address
bar, what happens when we click Contact Us.
| | 07:39 | Now it's calling Selected 07.
| | 07:41 | That's because this was slice 07.
| | 07:44 | Let's click About Us.
| | 07:45 | Now it's calling the Selected 05.
| | 07:48 | That's because it was slice 05.
| | 07:50 | So it's actually saved all of these individual
HTML files which we saw in that folder.
| | 07:55 | And that's pretty cool because that saves you a lot of time
from going through and having to save each page individually.
| | 08:01 | So let's exit out of that and return to Photoshop CS2.
| | 08:05 | So the last two exercises were a little bit complicated in terms of the
functionality and, you know, sort of sifting through the Layers palette
| | 08:14 | and the Web Content palette, but I hope that from that you're able to
see how you can very effectively create remote states for both over
| | 08:21 | and selected states in ImageReady CS2.
| | Collapse this transcript |
| Creating Animated Rollovers| 00:01 | >>The last of our rollover projects and the last exercise in
this chapter is going to be creating an animated rollover.
| | 00:08 | So let's get started.
| | 00:09 | The first thing I'm going to do is grab my Slice Tool and I'm going
to slice these four buttons - I'm going to create four user slices
| | 00:18 | which we've done many times in this chapter, I'm just clicking and
dragging with my Slice Tool - and let's start with the Animated 3 slice.
| | 00:28 | That's our Products slice.
| | 00:29 | I'm going to click the Create Rollover
State button to create an over state.
| | 00:35 | And you can see I have my Animation palette visible here.
| | 00:37 | What I'm going to do is I'm going to click
the Duplicate Current Frame button.
| | 00:41 | I'm going to make sure that I have my over state selected.
| | 00:43 | You can see that automatically, as soon as
I do that, I get this funky little icon here,
| | 00:46 | and that tells me that I have an animation on my over state.
| | 00:50 | Now what I'm going to do, with my Frame 2 selected, I'm going to turn
off the visibility of the Products layer and turn on the visibility
| | 00:59 | of the Products Rollover layer.
| | 01:01 | Now what I want to do is create a series of
tweened frames in between these two frames.
| | 01:06 | So I'm going to multiple select these two by holding down the Shift key,
and I'm going to click the Tween button, and I'm going to add 20 frames,
| | 01:16 | and I'm going to click OK.
| | 01:18 | Now let's take a look at this in our web browser and see what happens.
| | 01:24 | There you can see.
| | 01:25 | Now this isn't really doing exactly what I want, I don't want
it to keep flashing like that, because that's pretty annoying.
| | 01:30 | I basically want it to just play
once when I position my cursor over it.
| | 01:35 | So we know how to fix that.
| | 01:36 | We know that if we go into our Looping popup menu we can just choose once.
| | 01:42 | Now let's take a look at the results.
| | 01:44 | There we go.
| | 01:45 | Beautiful, that's exactly what we want to create.
| | 01:49 | Now what we need to do is create our down states and our selected
states, and I'm not going to create those as animated states.
| | 01:53 | I think that just one animated state is more than enough, and, on
that note, keep in mind that animation is something that you want
| | 02:01 | to use tastefully and sparingly on your web site.
| | 02:04 | Something like this can be quite effective but keep in mind that the
connection you have to the internet and your processor speed is going
| | 02:10 | to dictate how quickly and how slowly these animated
rollovers play on each individual user's machine.
| | 02:16 | So take that into consideration when you're designing.
| | 02:18 | So I'm going to click the Create Rollover State button,
that's going to automatically create a down state.
| | 02:23 | Now you notice that it doesn't have this little animation icon.
| | 02:26 | That's because the animation doesn't carry from one rollover
state to the next, it remains with the current one only.
| | 02:33 | So, for the down state, I'm going to turn off the
Products rollover and turn on the Products layer.
| | 02:40 | Now I'm going to click to create a selected state.
| | 02:42 | I'm going to do the opposite.
| | 02:43 | I'm going to turn off the Products layer,
turn on the Products rollover layer.
| | 02:47 | Let's take a look in our browser and see what we've got.
| | 02:50 | over, down, selected.
| | 02:53 | That's pretty cool.
| | 02:54 | Let's repeat this process for the remaining three buttons.
| | 02:57 | Back in ImageReady, I'm going to scroll up here and close up
our Animated 3 slice, I'm going to go to my Animated 5 slice.
| | 03:06 | I'm going to click the Create Rollover State button.
| | 03:10 | With that over state selected I'm going to
click the Duplicate Current Frame button.
| | 03:16 | With Frame 2 selected, I'm going to turn off the visibility of the
About layer, turn on the visibility of the About rollover button.
| | 03:22 | I'm going to multiple select the 2 frames,
click the tween animation frames --
| | 03:27 | you can see it's automatically got the settings from
the last time I used it -- and I'm going to click OK.
| | 03:33 | Now I'm going to create my down state.
| | 03:35 | I'm going to turn off the About rollover, turn on the About layer, going
to click the Create Over State again, and I'm going to reverse that,
| | 03:42 | I'm going to turn off the About layer and turn on the About rollover layer.
| | 03:46 | Let's close that up and move on to the next one.
| | 03:50 | So let's create our over state, duplicate our current frame,
turn off the Stores layer, turn on the Stores rollover.
| | 04:01 | Click the Tween button. Our settings are
the same, so we're going to click OK.
| | 04:06 | Click the rollover state to create a down state.
| | 04:09 | We're going to turn off the Stores rollover, turn on the Stores layer.
| | 04:13 | We're going to click the Create Rollover State button again.
| | 04:17 | We're going to do the reverse.
| | 04:18 | Turn off Stores, turn on Stores rollover.
| | 04:22 | Close that up, move on to the Slice 09.
| | 04:25 | We're going to create a new rollover state, we're going to duplicate our
frame, turn off the Contact layer, turn on the Contact rollover layer.
| | 04:35 | We're going to click multiple select the
two frames, and click the Tween button.
| | 04:40 | We're going to leave our settings the same and click OK.
| | 04:44 | Now we're going to create a down state by
clicking the Create Rollover State button.
| | 04:49 | We're going to turn off the Contact rollover
layer and turn on the Contact layer.
| | 04:53 | We're going to create another state, this
time we're creating a selected state.
| | 04:56 | We're going to do the reverse.
| | 04:57 | Turn off the Contact layer, turn on the Contact rollover layer.
| | 05:01 | Now let's preview this in our web browser.
| | 05:04 | This is going to take a little bit of time to generate
this, because we have a few animations in here.
| | 05:12 | So let's just take a look.
| | 05:13 | There we go.
| | 05:13 | Now you can see one thing I forgot to do, and that's that I didn't
set the looping on these 3 to 1, as I did with that first one,
| | 05:28 | so let's go back and correct that.
| | 05:30 | So we want to go and choose our over state, which has the
little animation icon, and we're going to choose once.
| | 05:37 | We've fixed our Slice 09.
| | 05:39 | Let's close that up and move on to Slice 07.
| | 05:41 | We're going to choose the over state, choose once.
| | 05:45 | Close it up, move on to the Slice 05.
| | 05:49 | Open it up, go to the over state, choose once, and close it up.
| | 05:56 | Now let's take a look.
| | 05:56 | Again, it's going to take a little bit of time to generate this preview...
| | 06:12 | here's our over states.
| | 06:13 | You can see the animation is just playing once.
| | 06:16 | There's our down state, there's our selected state.
| | 06:19 | over, down, selected.
| | 06:22 | over, down, selected.
| | 06:25 | over, down, selected.
| | 06:27 | So that's pretty cool.
| | 06:28 | That didn't take too much time to create those
really cool little animated navigation bar.
| | 06:33 | So now what are you going to do if you want to optimize this and save it?
| | 06:37 | Well you're going to use the same principles that we've used all along.
| | 06:40 | Keep in mind that the optimization settings you use apply to
all frames of your animation and all states of your rollover.
| | 06:48 | So let's choose Window, Optimize, and we'll open up
our Optimize palette here, and let's take a look.
| | 06:57 | We have this set on 128, let's click our Optimize tab, and
you can see I'm not really losing too much quality here.
| | 07:05 | Now I've deliberately created these to be quite simple, and
that's basically because I knew that I was going to create these
| | 07:11 | as animated rollovers.
| | 07:12 | So if you're going to create an animated rollover, don't
use some ridiculously complex photograph to try to do this
| | 07:18 | because it's not going to optimize as well.
| | 07:19 | Think about that, and think about what optimizes
well as an animated GIF when you're doing this.
| | 07:24 | Let's go down to 64 colors, still looking pretty good.
| | 07:28 | See if we can go down even further, down to 32.
| | 07:31 | Now I'm starting to find that I'm losing some
quality, so obviously 64 was our best choice here.
| | 07:36 | So we want to check this on all of our states, all
of our rollover states, make sure that this looks OK.
| | 07:43 | Really, you want to go through all of the states on the button.
| | 07:48 | Now because these are very consistent in their appearance you
can probably use the same settings without too much of a hassle -
| | 07:54 | in fact you could easily multiple select all four
buttons and link them for optimization, so let's do that.
| | 08:02 | So with my Slice Select Tool I'm going to multiple select
these layers and choose Slice, Link Slices for Optimization.
| | 08:10 | Let's take the optimization down to 64, and
we'll leave this on the Selective Color palette.
| | 08:17 | Now we're going to save our files.
| | 08:19 | Now we want to make sure, because we have selected states, that
we save multiple HTML files - one for each of the pages when it's
| | 08:26 | in it's selected state.
| | 08:27 | So let's go to File, Output Settings, Save in HTML,
and turn on the Output Multiple HTML Files option.
| | 08:34 | We talked about this in more detail in the last
movie when we looked at remote selected states.
| | 08:39 | This option is what's going to generate the multiple
HTML files we need, so one page for each selected state.
| | 08:46 | Let's click OK.
| | 08:47 | So I'm going to choose File, Save Optimized As, and I'm going to go
to my desktop and I'm going to create a new folder called "Animated."
| | 08:57 | I'm going to click Create, and we want to make
sure that we're saving HTML and images, for 2 reasons.
| | 09:04 | Number one, we need the JavaScript code to make the rollovers work,
and number two, we need all of the individual HTML pages for each
| | 09:10 | of the individual selected states.
| | 09:12 | That's why we chose that Output Multiple HTML Files option.
| | 09:16 | Now we're going to click Save. It's going to take
a little bit of time to save this, so just be patient.
| | 09:21 | You can see that we have the Save Optimized progress bar right
here, and it's taking some time because of the animations
| | 09:28 | and because of all the selected states
and all the pages it needs to create.
| | 09:31 | So let's go to our desktop.
| | 09:33 | Here's our Animated folder, and here we have all our pages that we
need, and we have all of the little images that we need in order
| | 09:41 | to make the different states of the rollover work.
| | 09:43 | So let's double-click Animated. There's our over
states- watch up here in the address bar as I click.
| | 09:54 | Here's my down state, here's my selected state.
| | 09:56 | You can see it's now targeting the Animated 09 HTML file, and
that name is generated on the fact that this was the Slice 09.
| | 10:05 | Now let's take a look if we choose About Us.
| | 10:07 | You can see it's now calling that Animated 05 file, so you can
see that it's created all of these individual HTML files for all
| | 10:16 | of the different selected states.
| | 10:17 | So you can see we've really created a very nice little navigation
bar here with these animated rollovers in ImageReady CS2.
| | 10:23 | Let's just return to Image ReadyCS2 and
that concludes our section on rollovers.
| | Collapse this transcript |
|
|
14. Creating Image MapsUsing the Image Map Tools| 00:01 | >>In this chapter of movies, we're going to take a
look at how to create image maps in ImageReady CS 2.
| | 00:06 | Image maps are helpful if you have a single image and you
want to make parts of that image link to different web pages.
| | 00:13 | For example, here we have a map of the United States.
| | 00:17 | Perhaps we want to have this Southern Stores circle link
to one web page and the Northern Stores link to another
| | 00:24 | and the Pacific Stores link to a third and
the Southwestern Stores link to a forth.
| | 00:29 | In that case, in order to create an effective
navigation structure, we can use image maps.
| | 00:34 | We go up to the Image Map Tool flyout here.
| | 00:37 | You can see there's 3 Image Map tools:
the Rectangle, the Circle and the Polygon.
| | 00:41 | We're going to start with the Circle and create
an image map area for this Southern Stores area.
| | 00:45 | So I'm just going to click and drag and that's going to create a circle.
| | 00:49 | I want it to be just pretty much the same size as what I have here.
| | 00:54 | And now I can just click and drag to reposition.
| | 00:56 | I'm positioning my cursor inside.
| | 00:58 | And I want to make it a little bit bigger so
I'll just grab these little resize handles here.
| | 01:02 | Just make it just a tiny bit bigger.
| | 01:04 | I'm going to use my arrow key to just click the Up button once and
the Right once and that pretty much centers that perfectly.
| | 01:11 | So that's looking good.
| | 01:13 | Now what we want to do is create image map
areas for these other 3 sections of this image.
| | 01:18 | To do that the best thing to use is the Polygon Image Map Tool
because it's going to allow us to create some irregular shapes.
| | 01:24 | To make it easy on yourself, grab the Zoom Tool and zoom
in so that you can really see what you're working on.
| | 01:31 | Zoom in one more time.
| | 01:33 | I'm going to hold down the spacebar so that I get the Hand Tool.
| | 01:36 | Then, with the Polygon Image Map Tool selected, what you're
going to do is you're just going to click in the top corner here
| | 01:43 | and then every time the line sort of changes you're just going to continue
to click because you basically want to create a line that hugs the edge
| | 01:56 | of this little orange graphic here, the Northern Stores graphic.
| | 02:01 | If you don't get this perfect, don't worry
because we can fix a lot of this later.
| | 02:06 | Now you could have tried to do this at the original
100 percent zoom, but let me tell you, it's a lot harder!
| | 02:11 | If you zoom up close like this, you can
really see exactly what you're doing.
| | 02:16 | Now, what we want to do is we want to get
back to the top here and close the path.
| | 02:20 | And if I position my cursor right over where I started I can see
that little circle icon and if I click it will close the path
| | 02:29 | or the image map shape.
| | 02:31 | This tool works similarly to some of the Pen tools work in Photoshop CS2.
| | 02:36 | You'll find that it's sometimes a little bit unrefined and can sometimes do
some wonky things but overall it works similar in concept to the Pen tools.
| | 02:44 | In some of these places you can see I didn't quite get in the right spot
so what I can do is you can see when I get close to these nodes it changes
| | 02:52 | to a white cursor and that indicates that I can move the nodes.
| | 02:55 | I can just click and drag and reposition these nodes so that I'm
really making sure that my image map hugs the edge of this graphic.
| | 03:05 | Now the corners are always going to be a little bit rough.
| | 03:08 | This one's actually looking pretty good.
| | 03:09 | We don't need to worry too too much about this,
| | 03:12 | but that's probably a little bit better.
| | 03:14 | So there we go.
| | 03:14 | We've got a pretty good-looking image
map here for our Northern Stores graphic.
| | 03:18 | Now we're going to go and do our Southwestern Stores graphic.
| | 03:21 | So I'm going to stay zoomed in, hold down the spacebar,
and just click and drag so I can see what I'm working on.
| | 03:28 | With my Polygon Image Map Tool still selected
I'm going to start down here in the bottom.
| | 03:32 | You can start wherever you want.
| | 03:33 | I always find it easier to start away from existing image maps.
| | 03:37 | It's just a personal preference.
| | 03:38 | But you can do whatever works for you.
| | 03:40 | Again, we're just going to click and drag.
| | 03:43 | Each time the line changes angle significantly, we want
to click because we want to make sure it hugs the edges.
| | 03:53 | And basically, every place you click you're going to get one
of those little nodes that we edited with the Northern Stores graphic.
| | 03:59 | You can see those little red squares.
| | 04:00 | Those are the nodes.
| | 04:02 | Now we didn't get quite to edge there, but that's OK.
| | 04:04 | We can fix that later.
| | 04:09 | I'm going to put a few more nodes around this edge than we did with
the Northern Stores graphic because I found it was a little hard to edit.
| | 04:16 | I didn't have quite enough nodes
to really get the nice angle of this line.
| | 04:21 | You'll find that with any type of line that's rounded you're
going to find it a little bit tricky to get a nice perfect arc.
| | 04:35 | Again, when we get back to the original place where we started we see
that little circle beside our cursor and I can click to close the path.
| | 04:44 | And we'll just grab these little nodes and reposition them
so that we're hugging the edges of our image of our graphic here.
| | 04:57 | This didn't actually turn out too bad so we
just need to make a couple of minor adjustments.
| | 05:05 | There we go.
| | 05:06 | So that looks pretty good.
| | 05:08 | Let's grab the Zoom Tool and just double
click it and return to 100 percent zoom.
| | 05:12 | Now if you want, you can go ahead and create
an image map for the Pacific Stores.
| | 05:16 | It's pretty much the same process as what we've done with Northern
and Southwestern so I won't bore you by watching me create another one
| | 05:22 | but that's the process if you want to create image maps.
| | 05:25 | You can also create layer-based image maps which
you're going to learn about in the next exercise.
| | 05:30 | The reason I chose to use the Image Map Tool is because as you
can see here in the Layers palette, this map is all on one layer.
| | 05:37 | So really that's the only option we have to
create an image map from this particular file.
| | 05:43 | In the next exercise, we'll take a look
at how to work with layer-based image maps.
| | Collapse this transcript |
| Creating Layer-Based Image Maps| 00:01 | >>In the last exercise we took a look at how
to create image maps using the Image Map Tool.
| | 00:06 | You can also create layer-based image map areas, which works similar
to the concept of layer-based slices and layer-based rollovers
| | 00:15 | in that you use a layer to define the area for your image map.
| | 00:20 | So here you can see, if we take a look at the layer stack, we
have each section of our map on its own layer and that's going
| | 00:28 | to give us the flexibility to be able
to define each section as an image map.
| | 00:32 | In the previous exercise, our entire map was on one layer
so we had no choice but to use the Image Map Tool.
| | 00:38 | Let's take a look at how these work.
| | 00:40 | I'm going to just click the Eastern layer to select it and
I'm going to choose Layer, New Layer-Based Image Map Area.
| | 00:49 | And you can see it automatically creates this layer-based image map area.
| | 00:54 | Now let's click Northern and do the same thing.
| | 00:57 | We're going to choose Layer, New Layer-Based Image Map Area.
| | 01:01 | So here we have these 2.
| | 01:03 | You'll notice in the Layers palette as soon as we define
these as image map areas we get these little hand icons
| | 01:08 | which indicates it's a layer-based image map.
| | 01:11 | Now we have a problem here.
| | 01:12 | We actually have 2 problems.
| | 01:13 | First of all we have these rectangular-shaped image maps and you
know it doesn't really hug the edges of the layer terribly well.
| | 01:20 | The second problem is that you can see that part of these layers overlap.
| | 01:24 | Let me just grab the Move Tool so we have our
Pointer cursor instead of the Move Tool cursor...
| | 01:29 | Part of these layers overlap. What that's doing
is it's causing the image map layers to overlap.
| | 01:34 | This doesn't really work for us, but that's
OK because we can fix this quite easily.
| | 01:39 | So we're going to go to the Window menu and we're going to choose Image Map
and that's going to open the Image Map palette which is grouped together
| | 01:47 | with the Slice and Table palettes by default.
| | 01:50 | If we open up this layer-based settings section, you can
see we have a shape defined for our layer-based image map.
| | 01:57 | Rectangle, Circle and Polygon.
| | 01:58 | Right now it's set to Rectangle.
| | 02:00 | If we set it to Circle you can see it makes it
into a circle which is not quite what we want.
| | 02:05 | Or you can switch it to Polygon.
| | 02:07 | And what that's going to try to do is it's going to try
to create a polygon that's roughly the shape of the layer.
| | 02:14 | Now you can see that it's done a pretty good job but not a fantastic job.
| | 02:19 | The quality right now is set to 80.
| | 02:21 | If we take it all the way down to say 35 and click,
or 40, you can see that it just makes it look worse.
| | 02:28 | If we take it all the way to the top, if we click to accept the
change, you can see that it really perfectly hugs the edge of that layer
| | 02:36 | which is exactly what we want.
| | 02:38 | So we've fixed our Northern Stores.
| | 02:40 | Now we need to fix our Eastern Stores.
| | 02:41 | So I'm going to grab the Image Map Select Tool in the Toolbox and then
click inside Eastern stores to select it, and I'm going to choose Polygon
| | 02:50 | from the Shape popup menu. I'm going to increase the quality to
100 and you can see now it's going to hug the edge of that quite nicely.
| | 02:58 | Now we're going to grab our Southern layer and we're
going to choose Layer, New Layer-Based Image Map Area.
| | 03:06 | Again, we're going to choose Polygon and
again, we'll increase the quality to 100.
| | 03:11 | Voila! Let's just do the same thing for
our last one which is the Pacific layer.
| | 03:16 | So Layer, New Layer-Based Image Map Area, and we're
going to choose Polygon, and increase the quality to 100.
| | 03:26 | Perfect! So now we have these 4 areas.
| | 03:29 | Let's take a look at what this is going to look like in our browser.
| | 03:32 | Let's just click the Optimize tab- we don't
need to worry too much about the settings.
| | 03:36 | I just wanted to make sure that they weren't set to GIF and 2 Colors
so we couldn't see anything, but this is fine for just previewing.
| | 03:42 | So let's click the Preview In Safari button or
whichever your default browser happens to be.
| | 03:47 | You can see that as I position my cursor over each of these areas
the cursor changes to the hand, indicating that they're links.
| | 03:57 | Let's close this and go back to ImageReady.
| | 03:59 | The benefit of using the layer-based image map areas is
what happens if we decide to make any changes to this map?
| | 04:06 | So we're going to grab the Move Tool and we're just going to switch back
to the original tab and we're going to click and drag and you can see
| | 04:13 | that what happens is it takes the image map area with it.
| | 04:17 | It's always hugging the perimeter of that layer.
| | 04:19 | So no matter where we move it, you know, it's always
going to have that image map associated with it.
| | 04:24 | So let's move it back.
| | 04:25 | Now if you're wondering why the cup and the text didn't move it's
because if we scroll up a little bit here you can see that the icons
| | 04:32 | in the regions are on their own layer so that's why it didn't move with it.
| | 04:35 | So we've got Pacific Stores out here.
| | 04:38 | Now let's preview this in our Browser.
| | 04:41 | Same thing, you can see it moved it and
our image map area moved along with it.
| | 04:47 | So there's no image map in here but there is on our Pacific
Stores and on our Northern Stores and on our Southern Stores.
| | 04:54 | So let's close that.
| | 04:55 | So just like when you worked with layer-based slices, you can see that
working with layer-based image map areas gives you the flexibility
| | 05:02 | to move your layers around without having to worry that you're
going to have to go back and recreate your layer-based image map.
| | 05:10 | Next we're going to take a look at how
you can optimize and save image maps.
| | Collapse this transcript |
| Renaming, Optimizing, and Saving Image Maps| 00:00 | >>Next we're going to take a look at how you can re-name, optimize,
and save the contents of an image map in ImageReady CS 2.
| | 00:08 | You can see here we are in our Javaco Store Maps file which looks
almost identical to the file that we worked with in the last exercise
| | 00:15 | when we defined these layer-based image map areas.
| | 00:20 | So what we want to do is rename our image map.
| | 00:23 | You can see that they're automatically given a
name here in the Image Map palette: Image Map 04.
| | 00:28 | That is also mimicked over here in the
Image Map section of the Web Content palette.
| | 00:33 | Unlike slices and rollovers, the names aren't
based on file names or layers or anything like that.
| | 00:40 | It's basically just given a sequential number.
| | 00:43 | If you're working with a large file with a large
number of image map areas you may find this confusing.
| | 00:48 | When you go to save this and optimize it the names of the image maps
aren't going to affect the file names as it does with slices and rollovers.
| | 00:56 | So you don't need to be too concerned about
how it's going to work when you save the file.
| | 01:00 | The main consideration is that I find, personally,
Image Map 01, 02, 03 and 04 really mean nothing to me.
| | 01:07 | So if I'm looking at this quickly it really
doesn't give me enough information about files.
| | 01:11 | So you might want to rename them.
| | 01:12 | So there's 2 ways you can do that.
| | 01:14 | Let's start in the Web Content palette.
| | 01:16 | Basically, I can just double-click it and type a name.
| | 01:19 | I'm going to type Pacific and press Return or Enter.
| | 01:25 | You can see it updates here in the Image Map palette.
| | 01:28 | Let's go to number 3, which is our Northern Stores,
double click, type "Northern" and press Return or Enter.
| | 01:36 | The other way that you can rename image maps, which you've
probably already guessed yourself, is in the Image Map palette.
| | 01:41 | So let's click Image Map 02 to select it, which is our
Southern stores image map area, and let's type "Southern".
| | 01:48 | And we can just press Return or Enter again.
| | 01:50 | It updates in both places.
| | 01:52 | Let's do the last one, Image Map 01, which we're
going to call "Eastern" and press Return or Enter.
| | 01:59 | So now that we've renamed them, you're often going to want
to obviously optimize and save the contents of image maps.
| | 02:05 | The first thing we're going to do is just click
the Optimize tab so that we can take a look at this.
| | 02:09 | It's pretty difficult to see what the optimization settings
are on our image map here because we can't really see it
| | 02:15 | because we have the image maps blocking it.
| | 02:18 | So what we can do is click the Toggle Image Maps Visibility
button and that's going to show us what our image looks like.
| | 02:25 | Let's just go to the Optimize palette here.
| | 02:26 | Now, because this pretty much contains flat graphical content,
it makes the most sense to obviously optimize this as a GIF.
| | 02:34 | So the next thing that we just need to figure
out is how many colors we're going to use.
| | 02:37 | Right now this is set to 64.
| | 02:39 | We could take it down to 28 and see what happens.
| | 02:42 | You can see that in our Teapot we sort of get this line-y
effect and in our Teacup, it's not really keeping a lot of the detail.
| | 02:50 | So obviously 32 is too low.
| | 02:52 | If we go to 128 you can see it radically increases the file size,
but the images look much better. So let's try to split the difference at 64
| | 03:00 | and that actually looks pretty good.
| | 03:03 | Considering that these are quite small, we can get away with
them having a little bit of a grainy detail to them.
| | 03:09 | So that's perfectly acceptable the way it is.
| | 03:11 | You'll probably notice that all 4 of these
image map areas update at the same time.
| | 03:18 | This is unlike when you work with slices where
each slice has it's own optimization setting.
| | 03:25 | You can see that if I click Northern, for example, and change this to
128 then click Eastern, it's also 128 even though we just set it to 64.
| | 03:36 | That's because...
| | 03:38 | (let's go back and switch this to 64)
| | 03:40 | you only use one optimization setting for an entire image map.
| | 03:45 | The reason for that is that, unlike slices and rollovers, it
doesn't save all the individual image maps into individual files.
| | 03:53 | All of the image maps get saved into onme file. That's why you
need to make sure you're happy with the optimization setting
| | 04:00 | on the entire image map not just the individual areas.
| | 04:04 | OK? So that's something important to remember.
| | 04:06 | So now that we're happy with our optimization settings, we need to
just go up to the File menu and go to Output Settings, Image Maps.
| | 04:13 | We need to decide what type of image map we want to create.
| | 04:17 | 99.9 percent of the time you're going to choose Client Side.
| | 04:21 | Server Side image maps are a thing of the past and
pretty much you don't really need to worry about them.
| | 04:27 | It's Client Side that you want to make sure is selected.
| | 04:30 | So we'll click that and click OK, and then
we're going to go File, Save Optimized As.
| | 04:37 | We're going to click the desktop, we're going to create a
new file and I'm going to call it "Stores" and click Create.
| | 04:46 | I want to make sure that I choose HTML and images
because I want to generate the HTML code required
| | 04:53 | to make this image map work in a web browser.
| | 04:56 | So HTML and images. Let's click Save.
| | 05:01 | There, it saved.
| | 05:02 | Navigate to our desktop, double-click the Stores folder. Here's our
HTML file and if you open up the Images folder, just like I said,
| | 05:09 | everything is contained in one single graphic.
| | 05:12 | If you were thinking it was going to be 4, keep in mind that when you
save an image map, all the image map areas get contained in one file.
| | 05:20 | Double-click Javaco Store Maps and you can see as
we position our cursor over, it changes to the hand,
| | 05:29 | indicating that it is indeed an image map area.
| | 05:33 | So let's go ahead and close that and return to ImageReady CS 2 and
we're going to leave this file open and optimized for the next exercise
| | 05:41 | where we'll take a look at how we can assign URLs to image map areas.
| | Collapse this transcript |
| Assigning URLs| 00:01 | Next we're going to take a look at how to
assign URLs to image map areas in ImageReadyy CS2.
| | 00:05 | Here we have the Eastern image map area selected,
which you can see in the Web Content palette here,
| | 00:11 | and what we're going to do is we're simply going to
type a URL in the URL field on the image map palette.
| | 00:16 | So I'm just going to type the lynda.com address.
| | 00:19 | I'm going to leave the Target field
empty, so I'm going to press Return or Enter.
| | 00:22 | And now I'm going to move onto the Northern image map
area and this time I'm going to type lynda.com/books.
| | 00:30 | I'll press Return or Enter.
| | 00:32 | This time, what I'm going to do is I'm going to
choose underscore (_) blank from the Target popup menu.
| | 00:37 | That's going to have an impact on how our file opens in a web browser.
| | 00:42 | Now, I'm deliberately using live links here
from the lynda.com website because I want
| | 00:47 | to show you how it works using these different target fields.
| | 00:50 | You can certainly use any URL you want.
| | 00:52 | You can choose to use an absolute link like what
I've done here, for example. For an absolute link,
| | 00:58 | we use the 'http://www.'information
because it's linking to an external website.
| | 01:06 | If I wanted to use a relative link such as
this one here, nav_about.html,
| | 01:12 | that's a relative link because it would be linking within the same site.
| | 01:17 | So for example, if I had a lynda.com website and I
wanted to link to another page in the lynda.com website,
| | 01:23 | I would just use a relative link instead of an absolute one
and not have to include this lengthy address information.
| | 01:29 | So let's click the Preview In Safari button
here to take a look at how this works.
| | 01:34 | So we started off with Eastern Stores, and you remember
that we didn't specify anything in the Target field.
| | 01:39 | So if we click it, you can see automatically it just opens
the lynda.com website in the same web browser window.
| | 01:44 | If we want to get back, we can click back and
that will take us back to our original page.
| | 01:50 | Now let's click Northern Stores.
| | 01:51 | Remember that we chose underscore (_) blank from the target field.
| | 01:55 | You can see that instead of replacing the contents of the current browser
window with the new page, it opened up a new instance of the browser
| | 02:03 | and opened the page in there.
| | 02:05 | So that's the difference between leaving it blank
and choosing underscore blank in the target field,
| | 02:09 | so depending on what type of experience you want your users
to have is going to depend on what option you choose there.
| | 02:16 | So let's just close this and return to ImageReady CS2.
| | 02:19 | So that's the process for actually assigning URLs to image map areas.
| | 02:24 | It works pretty much identical to what it did when we took a look
at how to assign URL's to slices earlier in this movie training.
| | Collapse this transcript |
| Creating Image Map-Based Rollovers| 00:01 | >>Next we're going to take a look at how you can
add different rollover states to image map areas.
| | 00:07 | Just like with any type of rollover, adding a rollover state to an image
map can provide some visual interest and a visual cue to your users
| | 00:16 | when they've positioned their mouse over a clippable area.
| | 00:19 | Basically, the process of creating rollover-based image
maps is very similar to creating any type of rollover.
| | 00:25 | The first thing we need to do is define our image map areas.
| | 00:29 | So let's start with our East layer here, which you can see is defining the
east section of our map, and choose Layer, New Layer-Based Image Map Area.
| | 00:38 | We're going to choose Polygon from the Image Layer Settings and
we're going to increase the quality to 100 in our Image Map palette.
| | 00:47 | We're going to repeat the same process for the South layer...
| | 00:57 | the North layer...
| | 01:07 | and the West layer.
| | 01:08 | So we're choosing Layer, New Layer-Based Image Map Area,
choosing Polygon from the Layer-Based Settings popup menu,
| | 01:14 | and increasing the quality to 100.
| | 01:17 | So now we have our image map areas.
| | 01:19 | Now I'm going to quickly re-name these because I find, especially when I
start to work with rollover states, that's when I really want to make sure
| | 01:26 | that my image map areas are named properly.
| | 01:28 | So we'll double click the Image Map 01 and type Eastern.
| | 01:35 | Double click Image Map 02 and type Southern.
| | 01:40 | Double click Image Map 03 and type Northern.
| | 01:44 | And double click Image Map 04 and type Pacific.
| | 01:50 | Excellent!
| | 01:51 | Now we can actually begin to create the different rollover States.
| | 01:55 | So let's start with Eastern.
| | 01:57 | Just like with any other rollover, we're going
to click the Create Rollover State button.
| | 02:00 | It's going to create an over state.
| | 02:03 | Now, I'm going to create our over states using layer
visibility, so I'm going to turn on the Eastern Stores layer.
| | 02:09 | Next I'm going to move to the Southern image map area and
I'm going to click Create Over State to create an over state,
| | 02:16 | and I'm going to turn on the visibility of the Southern Stores layer.
| | 02:20 | We'll move onto the Northern and I'll create a new rollover state,
the over state, and turn on the visibility of the Northern Stores layer.
| | 02:29 | I'm just going to scroll up in our Layers
palette and in our Web Content palette.
| | 02:34 | Click Pacific, create a new rollover state, which will create an
over state, and turn on the visibility of the Pacific Stores layer.
| | 02:42 | I'm just going to switch to the Optimize tab and make sure
that our Optimization settings are something that we can see
| | 02:49 | when we view it in a web browser.
| | 02:50 | I just want to make sure it's not set to something like GIF, 2 colors.
| | 02:53 | Go back to original and click Preview In Safari.
| | 02:57 | Now let's see what happens when we position
our cursor over each of these areas.
| | 03:04 | You can see that basically we get the over state each time
we position our mouse over each of the clickable areas.
| | 03:12 | So this is again just another way to add some information to your
viewers that they are positioning their mouse over a clickable area.
| | 03:19 | So let's close here.
| | 03:21 | Now, you can add more than just over states.
| | 03:25 | In this case I just added an over state.
| | 03:27 | If I click the Create Rollover State button you
can see that's going to create a down state.
| | 03:31 | If I double click you can see that it gives me all the same
options I had when I was working with regular rollovers.
| | 03:38 | So just click OK and just leave this as a down
state and let's just show you how that works.
| | 03:43 | So with our Pacific Stores layer targeted,
let's just add a drop shadow to that.
| | 03:49 | We're making sure the down state is selected.
| | 03:52 | We'll just leave the layer style set up
with its default settings and click OK.
| | 03:56 | Now let's take a look at how that looks in Safari.
| | 03:59 | So if I position my cursor over, we see the over state.
| | 04:03 | If I click, you see the down state, which adds that shadow.
| | 04:08 | So again, this is just a way to add some visual interest
and the visual cue that this is a clickable area.
| | 04:15 | So, as you can see, all the principles that you learned
in the last chapter of movies, when we worked with rollovers,
| | 04:21 | apply when you're working with image maps and
you want to create image map-based rollovers.
| | Collapse this transcript |
|
|
15. Creating Web Photo GalleriesCreating Web Photo Galleries| 00:01 | >>So far in this movie training we've
focused on how you can create web graphics.
| | 00:05 | Now, sometimes you're going to want to take a series of images,
whether they be photographs, or images that you've worked on,
| | 00:11 | and you're going to want to share them with others.
| | 00:13 | For example you may want share a series of photographs with family
or you may want to take a series of images that you've created
| | 00:19 | and show them to clients.
| | 00:21 | Designing an entire website to do that
can take a long time and be very tedious.
| | 00:26 | So, Photoshop CS2 offers a great feature which is called Web
Photo Galleries, which basically lets you take a folder of images,
| | 00:33 | or a series of images, and put them right into an HTML page.
| | 00:36 | It does all the formatting for you, optimizes
images, creates thumbnails, the whole enchilada.
| | 00:42 | Very cool!
| | 00:42 | So let's take a look in this chapter how that works.
| | 00:44 | I'm going to go up to my File menu and I'm
going to choose Automate, Web Photo Gallery,
| | 00:49 | and that's going to open up this Web Photo Gallery dialog box.
| | 00:52 | Now, if you've used this feature before, you
may have different settings than what I do.
| | 00:58 | These are the default settings.
| | 00:59 | This dialog box is sticky, though, so
it will remember the last settings you used.
| | 01:03 | So if you've used this dialog box before it may look a little different.
| | 01:06 | So let's take a look here and you can see there are a number of
styles that I can work with and we can also customize these a bit.
| | 01:12 | We're going to get into that in the next movie.
| | 01:14 | For right now we're just going to take a look at how this works.
| | 01:16 | Wwhat I'm going to do is I'm just going
to choose one of |
|
|
