IntroductionWelcome| 00:00 | If you are a web designer, a blogger,
an illustrator, a photographer, or anyone
| | 00:05 | who wants to share images online,
you will find Photoshop to be a flexible and
| | 00:09 | creative resource for
preparing your images for the web.
| | 00:13 | (Music playing)
| | 00:19 | I am Jan Kabili, Senior Trainer at
lynda.com and this is Photoshop CS4 for the Web.
| | 00:25 | For you Photoshop users out there,
I have designed this course so that
| | 00:30 | you can take the next step in putting
your content on the web or designing
| | 00:33 | effective web interfaces.
| | 00:35 | We will cover the principles of
optimizing your images for the web with the
| | 00:39 | Save for Web and Devices feature.
We will also look at how to create
| | 00:42 | animations. I'll show you how to
design a comp for your web pages, including
| | 00:47 | how to design graphics for rollovers
and navigation. I'll spend some time going
| | 00:51 | over how and why to slice images, plus
I'll show you a great feature that can
| | 00:56 | automatically make a website from your images.
| | 00:59 | Photoshop integrates with Dreamweaver,
Fireworks, Flash and Illustrator.
| | 01:03 | I'll show you how so you can use Photoshop
in combination with other programs in
| | 01:08 | the Adobe CS4 Suite to get the results
you have envisioned onto the screen.
| | 01:13 | If you are ready, I'm ready. Let's get
started with Photoshop CS4 for the Web.
| | Collapse this transcript |
| What you'll learn in this course| 00:00 | This course in Photoshop CS4 for the
Web will teach you what you need to know
| | 00:05 | to create exciting visual assets that
will make your websites, blogs, web ads,
| | 00:10 | and other online projects really standout.
| | 00:13 | In this movie, I would like to show you
some of the things that you can make in
| | 00:16 | Photoshop for the Web and some of the
things that I'll be teaching you how to
| | 00:20 | make in this course.
| | 00:21 | One of the subjects is optimizing
graphics and photographs for the web. I'll be
| | 00:25 | showing you how to work in the Save
for Web and Devices window in Photoshop,
| | 00:29 | which you see here. Optimizing your
artwork as JPEGs, GIFs, and PNGs ready to
| | 00:34 | be put on a website.
| | 00:35 | I will also teach you all about
slicing. You'll learn how to take a small
| | 00:40 | graphic in Photoshop, and turn it
into a repeating web-page background with
| | 00:44 | various patterns like this. I'll
also show you how to make a full-screen
| | 00:48 | graphic background and how to size it
depending on the monitor resolution at
| | 00:53 | which your audience is likely to view your site.
| | 00:55 | I will show you how to prepare
transparent graphics for the web. Graphics that
| | 00:59 | are surrounded by transparent pixels,
so that those transparent graphics blend
| | 01:04 | in smoothly with web page backgrounds
and even if the graphic has a drop-shadow
| | 01:09 | or other effect on it.
| | 01:10 | In Photoshop CS4, you will learn that
you can't actually make rollover buttons work,
| | 01:15 | but you can create the graphics
for rollovers in Photoshop. I'll show you
| | 01:19 | how to make an entire navigation bar of
rollovers using Photoshop's Layer Comps
| | 01:23 | feature, and I'll teach you how to use
a special Photoshop script for exporting
| | 01:28 | multiple rollover graphics from Layer
Comps. That's a script that lynda.com has
| | 01:32 | commissioned and is making
available to you for free.
| | 01:35 | I will teach you how to make vector
based navigation icons from photographs
| | 01:40 | making use of Photoshop's Custom
Shape tool, and I'll walk you through a
| | 01:44 | workflow for preparing photographs
for the web. Including starting with raw
| | 01:48 | photographs, resizing photographs,
and sharpening photographs for the web.
| | 01:53 | I will show you how to make GIF
animations using frame-by-frame animation as
| | 01:57 | well as automatic tweening, and I'll
walk you through some exciting automatic
| | 02:02 | features including the Web Gallery
feature that automatically makes an entire
| | 02:06 | website from your images. And
including the Zoomify feature, which allows you
| | 02:10 | to export large photographs like panoramas
and display them in high resolution online.
| | 02:16 | I will also show you how to use
variables and datasets in Photoshop for making
| | 02:21 | multiple variations on a web banner
automatically. I'll show you how to
| | 02:25 | integrate your Photoshop web work with
other CS4 web programs like Dreamweaver CS4,
| | 02:30 | Fireworks CS4, Illustrator CS4,
and Flash CS4. That should give you a
| | 02:37 | taste of the kinds of things that you
can do in Photoshop for the web and
| | 02:41 | the kinds of things that you
will be learning in this course.
| | 02:44 | I think you will find that this is a
really comprehensive course. It offers
| | 02:47 | lots of information that's hard to find
elsewhere. So please do jump right in,
| | 02:52 | and get your feet wet learning all this
and more in Photoshop CS4 for the Web.
| | Collapse this transcript |
| Using the exercise files| 00:00 |
I have prepared some Exercise Files
that I'll use to demonstrate techniques
| | 00:04 |
throughout this course. If you are a
Premium member of the lynda.com Online
| | 00:09 |
Training Library or if you are viewing
the course on a DVD, you have access to
| | 00:13 |
those Exercise Files.
| | 00:15 |
I have organized the Exercise Files by
chapter. The same chapters that you will
| | 00:19 |
see in the table of contents for this course.
| | 00:22 |
Here on my Mac, I have put my Exercise
Files out here on my Desktop. This is
| | 00:26 |
the Mac Finder where you can see
the path to those Exercise Files.
| | 00:30 |
Inside the Exercise Files folder are
chapter folders and then inside the
| | 00:35 |
sub-folders are the files for that
particular movie. In most of the movies,
| | 00:39 |
I'll just start with one or more files
open, and you can open the same files to
| | 00:43 |
follow along. I hope that you enjoy
and are inspired by these examples.
| | 00:48 |
| | Collapse this transcript |
|
|
1. The InterfaceLooking over the interface| 00:00 | Understanding the Photoshop CS4
interface is important for web designers and
| | 00:04 | developers who want to work
faster and smarter in Photoshop.
| | 00:08 | If you are new to Photoshop, learning
the interface is essential. If you're a more
| | 00:12 | seasoned Photoshop user, you will
need to know about some changes to the
| | 00:15 | interface in this version of the program.
| | 00:17 | So in this chapter, I'll review
interface fundamentals and new features that
| | 00:22 | I've covered in more depth in another
course in the lynda.com library that's
| | 00:25 | called Photoshop CS4 Essential
Training which is also a good place to go for
| | 00:30 | background on other Photoshop
fundamentals like layers and selections.
| | 00:34 | I am going to start by taking you
on an overview of the Photoshop CS4
| | 00:39 | interface. On the right side of the
screen are panels that contain controls
| | 00:43 | and information that you will
use as you work on your web images.
| | 00:47 | Here, you will find panels for working
with color, with photo adjustments,
| | 00:52 | with layers and lots more, and I'll be
returning to the panels to look at them in more
| | 00:56 | detail in another movie.
| | 00:58 | Over on the left side of the screen is
the toolbox that you will use to create
| | 01:01 | and edit your web images in Photoshop.
To select a tool, you just click on it
| | 01:06 | like the Move tool here, the very first
tool. And when you do, the options for
| | 01:10 | that tool change up here
in the Tool Options bar.
| | 01:14 | You will notice that some of the
tools have a black triangle in the
| | 01:17 | bottom-right corner like this tool,
the Crop tool. That means that there are
| | 01:20 | other tools hidden behind. In this case,
if I click and hold on the Crop tool,
| | 01:25 | I see that there is a Slice tool, and
a Slice Select tool behind the Crop tool.
| | 01:29 | These are important tools for web work,
and they have actually moved in this
| | 01:33 | version of Photoshop CS4 behind the
Crop tool. To select one of them, you just
| | 01:37 | release your mouse on top of the tool
in the fly-out menu and that tool is now
| | 01:41 | the active one and its options are
displayed in the Tool Options bar.
| | 01:46 | Photoshop CS4 offers something new
in tools and that is the ability to
| | 01:50 | temporarily move between tools. This is
called the spring-loaded tools feature,
| | 01:55 | and it works like this. Each tool has
a shortcut. The shortcut for the Move tool
| | 01:59 | for example is V.
| | 02:01 | If I hold down the V key on my
keyboard and keep it pressed down, I'll be
| | 02:04 | temporarily switched to the Move tool
with which I could click and drag to move
| | 02:08 | the content of a selected layer in a document.
| | 02:12 | Then when I release my finger from
the V key, I automatically go back to
| | 02:16 | whatever tool was selected before that.
In this case, the Slice Select tool.
| | 02:21 | At the top of the screen is the menu
bar where there are drop-down menus.
| | 02:25 | You may see some items up here that you
don't see in your copy of Photoshop. That's
| | 02:29 | because I happen to have Photoshop
CS4 Extended installed on this machine,
| | 02:34 | which contains some additional
scientific analysis, 3D, and video features that
| | 02:39 | are outside the scope of this course.
You can feel comfortable using either
| | 02:43 | Photoshop CS4 or Photoshop
CS4 Extended for this course.
| | 02:47 | If you are on a Mac, you will see a
new bar right here that's called the
| | 02:51 | application bar. If you are on a PC,
all the icons that you see here on this
| | 02:56 | application bar will be up in
the menu bar on your screen.
| | 02:59 | The application bar offers quick access
to some features that you will use all
| | 03:03 | the time. So for example, over here
is a menu that contains quick access to
| | 03:08 | Guides, Grids, and Rulers, features
that help you to position and align items
| | 03:13 | in your web layouts.
| | 03:15 | Then there are some navigation
features, a menu of commonly used zoom
| | 03:20 | percentages, a Hand tool, and a Zoom
tool. You can access the Hand tool or Zoom
| | 03:25 | tool either from here in the
application bar or from the toolbox. If I click
| | 03:30 | on the Zoom tool, I can come down into
my image and click to magnify my view of the image.
| | 03:36 | If you have a powerful enough graphics
card in your computer to support OpenGL
| | 03:40 | technology, in Photoshop CS4 you can
click and hold with the Zoom tool and
| | 03:45 | you get continuous zoom like this. When
you zoom in far enough, you will see this
| | 03:50 | grid around individual pixels.
| | 03:53 | To zoom out, I can go to the Tool
Options bar, which now shows options for the
| | 03:57 | Zoom tool, and select this minus
symbol. Then I can come into the image and
| | 04:02 | click, or click and hold
for a continuous zoom out.
| | 04:06 | When I'm zoomed-in so far that I can't
see the entire image like this, I can
| | 04:11 | access the Hand tool from the
application bar or from the toolbox and then,
| | 04:14 | I can come in and click and drag in the
image to see another part of it. With
| | 04:19 | OpenGL technology, I can click and flick,
and the image moves itself across the document window.
| | 04:26 | The Hand tool and the Zoom tool offer
a couple of buttons in the Tool Options bar
| | 04:30 | that I think are really useful.
One is Fit Screen. If I click that, then
| | 04:34 | the image is automatically taken back
to whatever percentage will automatically
| | 04:38 | fill the screen, and if I click Actual
Pixels, I'm taken back to 100% view.
| | 04:44 | The next icon in the application bar is
a new tool called the Rotate View tool,
| | 04:48 | which is accessible either from here
or from the toolbox. With this tool
| | 04:52 | selected, I can come into the image,
click and drag, and I'll be changing the
| | 04:56 | orientation of the image temporarily.
So that it's more comfortable to work on,
| | 04:59 | particularly if I have a pen tablet
attached to my computer, which allows me to draw.
| | 05:05 | By the way, when I use the Rotate View tool,
I'm not changing the orientation
| | 05:08 | of the actual document; I'm just
changing the working image temporarily.
| | 05:12 | The next menu is the Arrange Documents
menu. If I had more than one document open,
| | 05:17 | I could use this menu to select
different layouts that would allow me
| | 05:20 | to see more than one document at a time.
| | 05:23 | Finally, the Screen Mode menu, which
gives me options for three different
| | 05:27 | screen modes in Photoshop CS4. One that
I really like is the Full Screen Mode.
| | 05:32 | If I click that and then click the
Full Screen button, the image is displayed
| | 05:36 | against this plain black background,
which is a great way to show your designs
| | 05:40 | to clients. Then when you want to go
back to regular view, just press the F key
| | 05:44 | on the keyboard.
| | 05:46 | Another new interface feature in
Photoshop is the Application Frame. If you are
| | 05:50 | on a PC, you won't notice anything
unusual, but if you are on a Mac, you may
| | 05:54 | not be used to seeing this gray area
behind your image that stretches all the
| | 05:58 | way from the toolbox on the
left to the panels on the right.
| | 06:01 | In fact, this is not the default view
on a Mac. On a Mac, the document window
| | 06:05 | is free-floating by default. I'll show
you what that looks like by going up to
| | 06:09 | the Window menu and down to
Application Frame to disable it. With the
| | 06:14 | Application Frame disabled, you can
see my desktop behind here and if I had
| | 06:18 | icons on my desktop or I had another
application opened, it would be showing
| | 06:21 | down here as well, which can be distracting.
| | 06:24 | With the Application Frame disabled,
there is always the danger that you will
| | 06:27 | accidentally click on the desktop
which takes you out of Photoshop, and
| | 06:31 | requires you to click back on the
document window to go back into Photoshop.
| | 06:35 | You may prefer to enable your
Application Frame on a Mac, by going up to
| | 06:39 | Window and down to Application Frame.
| | 06:42 | The other thing the Application Frame
allows you to do is to resize and move
| | 06:46 | Photoshop as a whole. I can do the
same here from the bottom or from the
| | 06:50 | corner and now if I had another
application, say Dreamweaver, I would be able
| | 06:54 | to quickly go back and forth
between the two applications.
| | 06:57 | I also could come up to this top bar,
and click and drag and move Photoshop as a whole.
| | 07:03 | I can even drag it off onto a
second monitor. I'll put it back where
| | 07:07 | it was and I'll stretch it out for now.
| | 07:12 | These new interface features in
Photoshop are part of Adobe's effort to make
| | 07:15 | the look and feel of the various
Creative Suite programs more consistent.
| | 07:19 | That's good news for you as web
designers and developers, because you often
| | 07:23 | find yourself working across programs
and across platforms. The new consistent
| | 07:28 | interfaces will make your work a lot easier.
| | Collapse this transcript |
| Working with tabbed documents| 00:00 | There are times when you want to
have more than one document open in
| | 00:04 | Photoshop. For example, let's say that
you want to add different images to a
| | 00:08 | webpage design like this one or let's
say that you want to compare a couple of
| | 00:13 | photographs to find the
best one to use in the design.
| | 00:16 | Multiple documents behave a little bit
differently in Photoshop CS4 than they
| | 00:20 | did in previous versions of the
program, as I'm going to show you in this
| | 00:24 | movie. When you open multiple documents
in Photoshop CS4, they open into docked
| | 00:29 | tabs. So for example, I have a tab
here for home2.PSD and then I have another
| | 00:36 | document open here in the wetsuit_
graphic1 tab and another document open in the
| | 00:41 | navbar1 tab and so on.
| | 00:44 | Sometimes if so many documents opened
at once that they won't all fit in this
| | 00:48 | area. In that case you will see a
double pointed arrow here and you can click
| | 00:52 | that arrow and you can select from the
menu of all the open documents the one
| | 00:57 | that you want to see. Another way to
move through open documents is to cycle
| | 01:02 | through them using a keyboard shortcut.
On either Mac or Windows, you can hold
| | 01:06 | down the Ctrl key and then click on the
Tab key to cycle through open documents
| | 01:11 | in the order in which they were opened
and if you hold down the Shift key as well,
| | 01:15 | so that's Ctrl+Shift and then press
the Tab key, you will cycle back the other way.
| | 01:22 | And on the Mac there is yet
another shortcut which is Command+~ or
| | 01:27 | Shift+Command+~ to cycle in the other
direction. You can change the order of
| | 01:32 | the tabs up here. So if you want one
particular image to be somewhere else in
| | 01:37 | the order of open tabs, you can just
click and drag that tab and when you are
| | 01:41 | ready to close any of the
documents, you click the X on its tab.
| | 01:45 | Let's say that you want to see more
than one image at a time. There is a new
| | 01:49 | menu in Photoshop CS4 that will help
you with that. It's called the Arrange
| | 01:53 | Documents menu and its icon is located
here in the application bar on a Mac
| | 01:58 | and up in the menu bar on a PC.
I'm going to click the Arrange Documents icon
| | 02:02 | to open this menu of multiple
document layouts. I could choose any one of
| | 02:06 | these. For example, a 2-Up layout, a 3-
Up layout. I'm going to go down to the
| | 02:11 | 5-Up layout here and click on it and
now I can see each one of my documents in
| | 02:16 | a separate document window.
| | 02:18 | Let's say my goal here is to compare
these two surfer photos, the orange one
| | 02:23 | and the blue one. Right now, the
photos aren't showing me the surfer and they
| | 02:28 | are too big to fit in their
document windows. So I'm going to make the
| | 02:32 | surfer_photo1 the active document by
clicking on its tab and you can see that
| | 02:37 | tab is now lighter than the
other opened Document Window tabs.
| | 02:40 | Then I'm going to select the Zoom
tool in the Applications bar or from the
| | 02:44 | toolbox. I'll come into the image and
I'll hold down the Alt key on the PC, the
| | 02:49 | Option key on the Mac to change the
Zoom to a Zoom Out mode and I'll click in
| | 02:54 | the image. In the tab for this image,
I can now see that I have zoomed out to
| | 02:58 | 66.7% and you will notice in the tab
for the blue surfer_photo that image is
| | 03:05 | zoomed to 100%. I would like to see
these photos at the same zoom level and I
| | 03:10 | also want to see the
surfer in both of the photos.
| | 03:13 | So I'm going to get the Hand tool
and I'm going to come in and drag in
| | 03:18 | surfer_photo1, so that I can see the
actual surfer on the wave. And then to
| | 03:24 | bring surfer_photo2 to the same zoom
level and the same location, I'm going to
| | 03:29 | go back to the Arrange Documents menu,
click on it and there at the bottom of
| | 03:33 | this menu you see that I can choose to
Match Zoom Levels, Location or both.
| | 03:38 | I'm going to choose Match Zoom and Location.
Now I can see the same part of both
| | 03:43 | photos and in fact, all of the opened
documents have been zoomed to the same
| | 03:48 | zoom level 66.7%, and if they are too
big to fit in the document window, they
| | 03:54 | are moved to the same location.
| | 03:55 | I am going to close both of these
surfer photos now by clicking the X on each
| | 04:00 | of these two surfer_photo tabs. And
now I have just three opened documents. I
| | 04:04 | want to be able to see all three of
these opened documents, so I'm going to go
| | 04:08 | back to the Arrange Documents menu,
click there and I'm going to choose a
| | 04:13 | different layout. This 3-Up vertical layout.
| | 04:17 | These layouts are all customizable. I
can adjust the layout by moving my mouse
| | 04:22 | over the border between these open
Document Windows and when it changes to a
| | 04:26 | double pointed arrow, I can click and
drag and change the arrangement. The
| | 04:31 | reason that I want to see all three of
these documents at once is so that I can
| | 04:34 | drag this navigation bar up into this
webpage design that I'm building and I
| | 04:40 | also be able to drag this
logo into the webpage design.
| | 04:44 | To move an image from one open
document to another, I have to get the Move
| | 04:48 | tool. So I'll click on it here in the
toolbox or I can just press the keyboard
| | 04:52 | shortcut V to access the Move tool.
And then I'll come into the navbar1.PSD
| | 04:59 | document window, click on it to make
that the active document and all I have to
| | 05:04 | do is click and drag with the Move tool
up into the homepage2.PSD document and
| | 05:10 | release my mouse and the navigation bar
is copied from one document to the other.
| | 05:17 | Then with the Move tool I can drag to
get the navigation bar just where I want
| | 05:21 | it and I can also use the arrow keys
on my keyboard to just nudge it into
| | 05:25 | place. I'm going to close navigationbar1
.PSD and then I'm going to consolidate
| | 05:32 | both of these opened documents into
one window, because I want to show you
| | 05:35 | another way that you can move documents
from one window to another in Photoshop CS4.
| | 05:41 | To consolidate the two document
windows that are still open, I'm going to go
| | 05:44 | back to the Arrange Documents menu,
click on it and I'm going to choose the
| | 05:49 | first icon here Consolidate All. So
that's how you put multiple document
| | 05:53 | windows back together once you have
separated them out. I also want to go back
| | 05:57 | to 100% here, so with home2.PSD as the
active window, I'm going to click on the
| | 06:04 | Zoom tool and I'll choose
Actual Pixels to go back to 100%.
| | 06:08 | And now I'm going to click on logo1.PSD,
so that I can access this logo. I want
| | 06:14 | to move this into the home2.PSD document.
So again, I'll need the Move tool and
| | 06:21 | this time rather than open two
separate document windows, I'm just going to
| | 06:24 | click on the logo and drag up and
hover over the tab for home2.PSD and that
| | 06:31 | switches me back to the home2.PSD
document window, and with my mouse still hold
| | 06:36 | down, I haven't let up on the mouse yet,
I'm going to come down and just drop
| | 06:40 | that logo into place on the navigation bar
and then I can drag it down where I want it.
| | 06:46 | The new tab documents in Photoshop CS4
make it easier than ever to keep track
| | 06:50 | of all of your open images, rather than
allowing them to float free in separate
| | 06:54 | windows where one document window can
get hidden behind another. If you do what
| | 06:59 | to have your document windows floating
free, you can always pull one of these
| | 07:03 | tabs away from the others and
it will float free like this.
| | 07:07 | The danger though is that if you click
back on another document, for example,
| | 07:10 | if I click on this logo I can lose
the free floating document and to get it
| | 07:15 | back, I'll have to go up to the
Window menu and choose from the bottom of
| | 07:20 | Window menu the home2 document and
that will come back to the foreground. I
| | 07:25 | could also set all of the open
document windows to float free by going to the
| | 07:29 | Arrange Documents window and choosing
Float All in Windows. And now they are
| | 07:33 | arranged in this cascading pattern on my screen.
| | 07:36 | So as you can see, using tab
documents gives you more control of where your
| | 07:41 | documents are on the screen. It's just
one more interface improvement that will
| | 07:45 | make your life easier when you are
designing for the web in Photoshop CS4.
| | Collapse this transcript |
| Customizing panels| 00:00 | Photoshop's panels contain lots of
commands and features that you will use when
| | 00:05 | you are designing for the web. It's
rare that you will need access to all of
| | 00:09 | the panels all of the time, so I
suggest that you customize your panel
| | 00:12 | arrangement, so that you have the
controls you need most often at your finger
| | 00:16 | tips without having extra panels
taking up your valuable screen real estate.
| | 00:21 | In this movie, I'll show you some ways
that you can customize the arrangement
| | 00:24 | of panels. Right now you are looking
at the default panel arrangement. Panels
| | 00:29 | are arranged in groups and if you
click any one of the panel tabs in a group,
| | 00:33 | like the Swatches panel tab here, it
will bring the corresponding panel to the
| | 00:37 | foreground of that group.
| | 00:39 | These panel groups are docked into a
column on the right side of the screen by
| | 00:43 | default. The dock helps to organize
them and keep them in place. It also gives
| | 00:48 | you the ability to collapse all of the
panels at once, so that you have more
| | 00:52 | room for your document window. So
if you are working with a really wide
| | 00:55 | document here and you need more space,
you can come to the top-right of the
| | 01:00 | column of panels and click this double
pointed arrow, and the entire column of
| | 01:04 | panels reduces itself to icons with labels.
| | 01:07 | Then if you need to use any one of the
panels, you can just click its icon and
| | 01:12 | it pops out. When you are done using it,
you can click the icon again and it
| | 01:16 | pops down again. If you need even more
space to work, move your mouse over the
| | 01:21 | left hand border of the column of panels,
until you see the cursor change to a
| | 01:25 | double pointed arrow. Then drag to the
right and you can reduce the column to
| | 01:30 | just icons, which also pop out for your use
and then pop back when you click the icon.
| | 01:36 | I am going to open this column again
by clicking the double pointed arrow
| | 01:39 | again. If you have a panel showing
that you don't use, you can close it from
| | 01:45 | this icon on the right side of the
panel group. This is called the panel menu
| | 01:50 | icon and it's an important icon to know
about. If you click-and-hold on a panel
| | 01:54 | menu icon, you will see lots of
controls related to the selected panel.
| | 02:00 | So in this case I have the Adjustments
panel selected and down here I have all
| | 02:04 | kinds of controls related to the
Adjustments panel. I'm actually going to go to
| | 02:08 | the bottom of this menu and choose
Close in order to close the Adjustments
| | 02:13 | panel. Now it's gone. If I want to open
a panel, I can go up to the Window menu
| | 02:19 | and choose the panel by name. So
here I can reopen the Adjustments panel.
| | 02:24 | I can also close an entire panel group.
That's a good way to save space. So I'm
| | 02:30 | going to close this group of the
Masks in Adjustments panel by going to the
| | 02:34 | panel menu on that group and all the
way down to the bottom and choosing Close
| | 02:39 | Tab Group. You can collapse and expand
panel groups by clicking in the blank
| | 02:45 | area right here on the right side of
the group. So right now this panel group
| | 02:50 | is collapsed, I see nothing underneath
it. If I want to expand it, I click in
| | 02:54 | this area and it expands. Now I can
see the layers in the Layers panel. I can
| | 02:59 | do the opposite, collapse the panel
group which I'll do up here by clicking in
| | 03:03 | this blank area. That collapses the
Color, Swatches and Styles panel group. I
| | 03:08 | click again to reopen that panel group.
| | 03:12 | Another way to customize the column of
panel groups is to reorder the groups in
| | 03:17 | the column. So let's say I would like
to have my Layers, Channels and Paths
| | 03:21 | group at the top of the column. Again,
I'll click in this blank area and I'll
| | 03:25 | drag up to the top of the column, until
I see this single light blue line. Then
| | 03:30 | I release my mouse and now I have the
Layers, Channels and Paths group above
| | 03:35 | the Colors, Swatches and Styles group.
| | 03:38 | You can move any panel out of the
docked column by grabbing its tab, which I'll
| | 03:43 | do here with the Layers panel, and
dragging out of the column. Now you will
| | 03:47 | have a free-floating panel. If you
click on the title bar of the panel, you can
| | 03:52 | move it wherever you want on your
screen or even off to another monitor.
| | 03:57 | You can further customize by creating
your own panel groups or your own columns
| | 04:01 | of docked panels. For example, let's
say that I want to add the History panel
| | 04:07 | to the Layers panel here. I'm going to
go up to the Window menu and go down to
| | 04:11 | History. That opens the History panel,
which happens to be a pop-out panel from
| | 04:17 | an inner column, which has started to
form here. I'm going to take the History
| | 04:22 | panel by its tab, drag it over and drag
it into the group with the Layers panel.
| | 04:29 | When I see this blue border around the
Layers panel, I'll release my mouse. Now
| | 04:33 | I have a group of these two panels,
Layers and History. I'll go back to the
| | 04:38 | Layers panel here and I'm going to
bring out another new panel by going to the
| | 04:42 | Window menu and going down
to the Layer Comps panel.
| | 04:45 | I have more to say about the Layer
Comps panel in the chapter on rollover
| | 04:50 | graphics. The Layer Comps panel is
often used in conjunction with the Layers
| | 04:54 | panel. So I'm going to take the Layer
Comps panel by its tab, drag it over and
| | 05:00 | rather than put it in a group with the
Layers panel, I'm going to move it to
| | 05:04 | the bottom of the Layers panel. When I
see this light blue line, I'll release
| | 05:07 | my mouse. Now the Layer Comps panel is
docked to the Layers and History group.
| | 05:14 | So basically, I have created my own
column, which I can move freely around the
| | 05:18 | screen by clicking on this title bar
and moving it. I can icon-ize this new
| | 05:22 | column by clicking this double pointed
arrow and I could then take that entire
| | 05:27 | column. I could move it over and I
could dock it here to the right of the
| | 05:33 | existing column, so that now I have
three columns here. Let me close this Notes
| | 05:38 | panel, so you can see the three columns
that I now have. I could also take that
| | 05:43 | newly minted column that I made
and drag it off to a second monitor.
| | 05:47 | If you have made a lot of changes to
your panel arrangement and you want to get
| | 05:50 | back to the way things were by default,
you can always go to this menu at the
| | 05:54 | top-right of the screen, click and
choose Essentials. That reestablishes the
| | 06:00 | default arrangement of panels. I don't
think there is one single configuration
| | 06:04 | that's always the best for web work
because you find yourself doing so many
| | 06:08 | different tasks as you prepare web
graphics. One day you may be working on
| | 06:12 | rollover graphics, another on type,
another on slicing webpage layouts. The
| | 06:18 | good news is that there is lots of
flexibility to configure Photoshop's panels
| | 06:22 | to suit whatever task you are doing at
the moment using the flexible interface
| | 06:26 | controls that I have shown you in this movie.
| | Collapse this transcript |
| Customizing web shortcuts| 00:00 | Many of the tools and menu items in
Photoshop can be activated by keyboard
| | 00:05 | shortcuts. As you become more
experienced in Photoshop, you'll find that using
| | 00:09 | keyboard shortcuts for commonly used
commands will make you more efficient.
| | 00:14 | I would like to show you how you can
customize shortcuts that you often use in
| | 00:17 | your web work. All of the tools in the
toolbox have shortcuts. So rather than
| | 00:22 | clicking on a tool to activate it, you
can just press its shortcut. To learn a
| | 00:25 | tool shortcut all you have to do is
hover over the tool. So if I hover over the
| | 00:30 | Crop tool I can see that its shortcut
is letter C on the keyboard. So if I want
| | 00:34 | to activate that tool, I just press C.
And if I want to activate the tools
| | 00:39 | behind this one, the hidden tools
which in this case are the important web
| | 00:44 | tools, the Slice tool and the Slice
Select tool, I'll hold down the Shift key
| | 00:48 | and press C again. There is the Slice
tool and press C again and there is the
| | 00:53 | Slice Select tool. The panels over on
the right have panel menus and many of
| | 00:59 | the items in the panel menus also have
shortcuts. So I'm going to go over here
| | 01:03 | to the Layers panel menu and click on
it and you can see that some of these
| | 01:08 | items including the first one for
making a New Layer have shortcuts written
| | 01:12 | next to them. So in this case, the
shortcut for New Layer is Shift+Command+N on
| | 01:20 | a Mac, on a PC that would be Shift+
Ctrl+N. I am going to move off of that
| | 01:25 | command and then I'm going to go down
to my Layers panel where you can see I
| | 01:28 | currently have two layers and I'll
press that shortcut. Shift+Command+N or
| | 01:33 | Shift+ Ctrl+N and you can see I get a
New Layer dialog box. I'll click OK and
| | 01:39 | I now have another layer in my Layers
panel. At the top of the screen are menus,
| | 01:44 | officially called the Application
menus and if I click on the File menu there,
| | 01:48 | for example, you will see that many of
the commands in this menu have shortcuts
| | 01:52 | as well. One of the commands in this
menu that you use all the time in your web
| | 01:56 | work is the Save for Web & Devices
command which I'll talk about in another
| | 02:00 | movie. You can see the shortcut for
that command is pretty complicated. You
| | 02:04 | have to press down four keys at once,
which can be awkward and hard to remember.
| | 02:08 | On a Mac those are the Option+
Shift+Command and S keys. On a PC that
| | 02:14 | would be Alt+Shift+Ctrl and S.
I'm going to show you how you can change this
| | 02:18 | shortcut to make it simpler to use and
remember. I am going to move off this
| | 02:23 | command and then release my mouse to
close that menu. And then I'm going to go
| | 02:26 | up to the Layer menu at the top of
the screen, another application menu and
| | 02:31 | show you another command that you will
use often in your web work and that's
| | 02:35 | New Layer Based Slice, which I'll talk
about in another movie. But for now what
| | 02:40 | I would like you to see is that there
is no shortcut listed to the right of
| | 02:43 | this command and I'm going to show
you how you can create a shortcut for
| | 02:47 | command like this one that doesn't
already have a shortcut. To do both those
| | 02:51 | things I'm going to go to the Edit
menu and go all the way down to the bottom
| | 02:55 | of that menu to Keyboard Shortcuts.
That opens the Keyboard Shortcuts and menus
| | 03:01 | dialog box. Right now this dialog box
displays the default set of Photoshop
| | 03:06 | shortcuts called Photoshop Defaults
and they are listed here. There are
| | 03:10 | shortcuts for Application menus we currently
see. There are shortcuts for panel menus,
| | 03:15 | which are those menus that hang
off the side of the panels, and there
| | 03:19 | are shortcuts for tools. I want to
preserve the Photoshop Default Shortcuts in
| | 03:24 | case I want to go back to them. So
before I make any changes I'm going to go
| | 03:28 | over to the right of the Set menu and
press this icon to create a new set of
| | 03:33 | shortcuts to which I'll make changes.
Here in the Save As field, I'm going to
| | 03:37 | type a new name for these shortcuts.
I'll call these web and then I'm going to
| | 03:41 | type the extension for a keyboard
shortcut file, which is KYS. I want to be
| | 03:46 | sure to save this in the Keyboard
Shortcuts folder and then I'll click Save.
| | 03:51 | And you can see that I'm now creating
a new set of shortcuts called web. Now
| | 03:55 | I'm ready to simplify that complicated
shortcut that I showed you for the Save
| | 03:58 | for Web & Devices command. First I'll
make sure that I'm looking at shortcuts
| | 04:02 | for Application menus. I know that this
command is in the File menu. So I'll go
| | 04:07 | down to File and I click the arrow to
the left of file to expand and see all of
| | 04:11 | the items in that menu. Then I'm going
to scroll down over here, until I see
| | 04:17 | the Save for Web & Devices command
and there is that complicated shortcut.
| | 04:22 | I'm just going to click on that shortcut
to open its editing window. Instead of
| | 04:25 | this long shortcut I would like to use
the shortcut Command+Comma on a Mac,
| | 04:31 | on a PC that would be Ctrl+Comma.
So I'll just press those commands on
| | 04:35 | my keyboard. Command+Comma or Ctrl+Comma
and that changes the shortcut in this
| | 04:40 | list and I'll go up to the Accept
button and click there. So that's how you can
| | 04:45 | change a shortcut. Now I would like
to show you how to add a shortcut to a
| | 04:48 | command that doesn't have one. As I
showed you the New Layer Based Slice
| | 04:52 | command. So using this scroll bar I'm
going to scroll back up. I'm going to
| | 04:57 | collapse the File menu and I'm going to
click on the arrow to the left of Layer
| | 05:02 | to open the commands for the Layer menu.
Now I have to scroll down until I see
| | 05:07 | the command for New Layer Based Slice.
I am going to click on the blank area to
| | 05:11 | the right of the New Layer Based Slice
command to open in Editing window and
| | 05:17 | I'm going to add the command F5.
That's using the Function keys on the
| | 05:21 | keyboard. So I'll press F5 and I get
this message with a sound telling me that
| | 05:27 | F5 is already in use and will be
removed from the places that it's currently
| | 05:31 | being used which is the menu that opens
the Brushes panel. That's fine with me
| | 05:35 | because I'm not going to be opening
the Brushes panel as much as I'm going to
| | 05:38 | be using this New Layer Based Slice
command. So I'm willing to make that
| | 05:42 | switch. If I wanted to go to the
Brushes command and change the shortcut for
| | 05:47 | that command I could press Accept and
Go To Conflict. Instead I'm just going to
| | 05:51 | accept this change and then I'm going
to go up to this icon, which is the Save
| | 05:56 | Set icon, and I'm going to click there
to save the web set with these changes.
| | 06:02 | Now I'm going to go and click OK to
close the Keyboards Shortcuts and menus
| | 06:07 | dialog box with my customize keyboard
shortcuts. I would like to show you these
| | 06:11 | changes in the menus in Photoshop. So
I'm going to go to the File menu and you
| | 06:16 | can see my Custom command listed there,
Command+Comma. If I wanted to go back
| | 06:20 | to the regular default command for Save
for Web & Devices then I could just go
| | 06:25 | back into Keyboard Shortcuts and go
back to my Default Photoshop Set. I'm going
| | 06:30 | to move my mouse off of that menu and
release and go up to the Layer menu to
| | 06:34 | show you that the New Layer Based
Slice command also has my Custom shortcut
| | 06:38 | next to it F5 and I move my mouse off
of that and release. I realize that not
| | 06:43 | everyone likes to use keyboard
shortcuts, particularly if you are just learning
| | 06:46 | Photoshop. But when you are ready to
use shortcuts for web work, make things
| | 06:51 | easy on yourself by customizing the web
related shortcuts that I have shown you
| | 06:55 | here as well as any others that
you find yourself using often.
| | Collapse this transcript |
| Saving a custom web workspace| 00:01 | You can customize your Photoshop
workspace by rearranging panels and by
| | 00:05 | creating custom keyboard shortcuts,
as I showed you how to do in an earlier movie.
| | 00:09 | First, I'm going to set up my panels
in a way that's efficient for web work.
| | 00:14 | There is no single panel configuration
that's best for all web tasks, but
| | 00:18 | one approach is to start with the
preset web workspace that's ships with
| | 00:22 | Photoshop CS4 and tweak that to suit your needs.
| | 00:27 | You'll find a menu of preset
workspaces over here on the right under the
| | 00:31 | workspace switcher, which is located on
the application bar on a Mac and on the
| | 00:36 | menu bar on a PC. The workspace
switcher is currently set to its default, the
| | 00:41 | Essentials workspace, which sets up the
panel configuration that you see here.
| | 00:45 | I'm going to click on the workspace
switcher to see a list of the preset workspaces.
| | 00:50 | Some of these presets control which
panel is up here; others also affect
| | 00:54 | keyboard shortcuts and menu items too.
I'm going to choose the preset workspace
| | 01:00 | labeled, Web. Keep your eye on the
panels, so that you see that when I choose
| | 01:03 | that workspace, a different subset of
panels opens here on the right side of
| | 01:07 | the screen. I think these panels are a
reasonable starting point for web work.
| | 01:11 | So I would like to add the Layer Comps
panel to this configuration that I would
| | 01:15 | be saving as a custom web workspace.
| | 01:17 | To do that, I go to the Window menu
and I choose Layer Comps. The Layer Comps
| | 01:22 | panel opens with its panel group, the
History panel and the Actions panel. It
| | 01:27 | also created a second inner column of
panels here. I really don't want to have
| | 01:31 | two columns of panels. So I'm going to
take this entire layer group and move it
| | 01:35 | to the bottom of that outer column.
| | 01:37 | To do that, I'll click on this blank
area to the right of the Layer Comps tab
| | 01:42 | and I'll drag all the way down to the
bottom of the outer column. When I see
| | 01:45 | that light blue bar, I'm going to
release my mouse. It puts the Layer Comps
| | 01:50 | panel group at the bottom of this
single column of panels. I would like to save
| | 01:55 | this configuration of panels as a
custom workspace but I also want to include
| | 01:59 | in that custom workspace, some
keyboard shortcuts for the web that created in
| | 02:04 | an earlier movie. Let me show you those.
| | 02:06 | I am going to go to the File menu and
I'm going down to Save for Web & Devices.
| | 02:12 | This is a command that you will use
often in your web work. I have customized
| | 02:16 | the keyboard shortcuts for this
command to simplify it, so that it's now just
| | 02:20 | Command+Comma on a Mac. That would be
Ctrl+Comma on a PC. I have also added a
| | 02:25 | keyboard shortcut under the Layer menu,
to the New Layer Based Slice command
| | 02:30 | here, where I added the keyboard shortcut F5.
| | 02:34 | Now I want to save those keyboard
shortcuts and this panel configuration as a
| | 02:39 | custom web workspace. To do that,
I'll go back to the workspace switcher,
| | 02:43 | I'll click and I'll choose Save Workspace.
In the Save Workspace dialog box,
| | 02:49 | I'll type the name of the workspace.
I'll call it, my web, but you can call it
| | 02:53 | whatever you want. I'll tell
Photoshop what I want to include in this
| | 02:57 | workspace. I want to include these
panels and the Locations that you see them
| | 03:01 | here, and I would like to include my
Keyboard Shortcuts, as they are currently
| | 03:05 | set. So I'll check that too. If I had
made changes to menu items, I could also
| | 03:09 | include those changes here but I
haven't done so. So I'll leave this check box,
| | 03:14 | menus, un-checked. I'm going to click
Save. Now the workspace switcher displays
| | 03:19 | the my web custom workspace.
| | 03:21 | Now let's say that I have some other
work to do and I want to go back to my
| | 03:24 | Essentials workspace. I can do that any
time by clicking the workspace switcher
| | 03:29 | here and choosing the Essentials
workspace. You may have noticed the panels
| | 03:33 | change going back to the Essentials
configuration. Then say that later, I want
| | 03:38 | to go back to my web workspace.
I'll do that the same way, going to the
| | 03:42 | workspace switcher and choosing my web,
which is my custom workspace which
| | 03:47 | appears at the top of this menu. I
get a warning here about my keyboard
| | 03:51 | shortcuts. Yes, I want to apply this
workspace, even though it's going to
| | 03:55 | modify my keyboard shortcuts. I'll say
Yes and I'm back to my custom workspace
| | 04:01 | called my web.
| | 04:02 | What if you want to edit a custom
workspace? Let's say, for example, that I
| | 04:07 | want to close this particular panel
group Character and Paragraph, and not
| | 04:11 | include that in this workspace. I'll
click the panel menu on the right side of
| | 04:16 | the Character panel and down at the
bottom of that menu, I'll choose to close
| | 04:20 | this entire panel group, Close Tab Group.
Now I want to edit the my web custom
| | 04:26 | workspace to incorporate that change.
| | 04:28 | So I'm going to go up to the workspace
switcher and I'm going to choose Save
| | 04:33 | Workspace again. In the Save Workspace
dialog box, I'm going to type the same
| | 04:38 | workspace name that I had before, my
web. Again, I'm going to include Panel
| | 04:43 | Locations and Keyboard Shortcuts and
click Save. I get this warning that I'm
| | 04:48 | replacing the original my web workspace.
Yes, that's what I want to do. Now I
| | 04:53 | have successfully edited my custom workspace.
| | 04:56 | What if you want to delete a custom
workspace? To do that, you will go back to
| | 05:01 | the workspace switcher. You have to
switch to a different workspace. So I'll
| | 05:05 | switch to Essentials this time, for
example, and then you go back to the
| | 05:08 | workspace again and you choose Delete
Workspace. Then in the Delete Workspace
| | 05:14 | window, you can click this Workspace
menu and choose which custom workspace you
| | 05:19 | want to delete. Then you click Delete,
but I'm actually not going to do that
| | 05:23 | because I would like to keep this workspace.
So I'm going to cancel out of here for now.
| | 05:27 | If you have been using Photoshop CS3,
you may have noticed a couple of things
| | 05:30 | that were different from that version
of the program as you work through this
| | 05:34 | lesson. For one, the workspace
switcher is located in a slightly different
| | 05:38 | place in Photoshop CS4. It's no
longer in the Tool Options bar. Some of the
| | 05:44 | preset workspace names have changed,
but the principle is the same. The
| | 05:47 | workspace switcher provides a way for
you to save a custom configuration of
| | 05:52 | panels, keyboard shortcuts and even
menu changes, if you want, that suits your
| | 05:57 | web work or any other task for that
matter. So that you can go off and do
| | 06:01 | something else and then restore that
custom workspace the next time you are
| | 06:06 | designing for the web.
| | Collapse this transcript |
|
|
2. PreparationSetting preferences for the web| 00:00 | Photoshop's Preferences offer a way for
you to customize the way that your copy
| | 00:05 | of Photoshop behaves. In another course
in the library, Photoshop CS4 Essential
| | 00:10 | Training, I have mentioned some
preferences that you may want to customize,
| | 00:14 | no matter what you are doing in the
program, but here I would like to emphasize
| | 00:17 | one preference choice that I suggest
you make whenever you are doing web work
| | 00:21 | in Photoshop. That's to make sure that
the rulers unit of measurement is set to pixels.
| | 00:26 | Before I show you how to do that, I'm
going to go ahead and make my rulers
| | 00:30 | visible by going to the application
bar here on a Mac or the menu bar on a PC
| | 00:36 | and choosing from the View Extras menu,
Show Rulers. You can see that my rulers
| | 00:41 | are currently measuring in inches. If
yours are too, you are going to want to
| | 00:45 | change the default preference, so that
the rulers display in pixels rather than inches.
| | 00:50 | To do that, on a Mac I'll go to the
Photoshop menu, on a PC to the Edit menu
| | 00:56 | and from there choose Preferences and
then I'll move over to the sub-category,
| | 01:00 | Units & Rulers. I'll move that dialog
box down, so you can see the rulers and
| | 01:05 | I'm going to go to the Units field,
the Rulers menu and from there choose
| | 01:11 | pixels, it's as simple as that. As
soon as I do, you can see that the rulers
| | 01:15 | are now measuring in pixels. I'll
now click OK to close this dialog box.
| | 01:20 | If you ever need to switch back to
inches for any reason, say, you are working
| | 01:24 | on a print job, you can do that by
going back to Preferences or just do it on
| | 01:29 | the fly by moving into either the
horizontal ruler here or the vertical ruler
| | 01:34 | here and right-clicking on a PC or
holding the Ctrl key as you click on a Mac
| | 01:40 | and choosing inches from the Pop-up menu.
Then you can go back the same way to
| | 01:45 | pixels by right-clicking on a PC or Ctrl
-clicking on a Mac in one of the rulers
| | 01:50 | and choosing pixels.
| | 01:52 | The rulers come in really handy for
measuring and for positioning items in a
| | 01:55 | Web Design. You can adjust the
origin point to 0,0 point of the rulers by
| | 02:00 | clicking in the top-left corner and
dragging to wherever you want those points
| | 02:05 | to be. So if I want to measure this
Polaroid looking photograph here, I can
| | 02:10 | drag down to its corner and release and
then I have the 0 point here and the 0
| | 02:15 | point here on the rulers. If I want to
put the origin points back where they
| | 02:18 | were, I'll just double-
click in that top-left corner.
| | 02:21 | By the way, when you do have the
Rulers open, you also have access to Guides
| | 02:27 | and Guides are also very useful for
positioning and measuring as you are laying
| | 02:31 | out a webpage. To create a guide, I
can go to either the horizontal ruler or
| | 02:35 | the vertical ruler and click and drag
to bring out a guide and just drop it
| | 02:39 | wherever I want. The guides are also
useful for showing you where you are on
| | 02:44 | the ruler. I can drag out more than one guide.
| | 02:47 | I can make the guides temporarily
invisible by going to the View Extras menu on
| | 02:52 | the application bar on a Mac or on
the menu bar on a PC and disabling Show
| | 02:57 | Guides. I'll turn that back on by
going back to that menu and choosing Show
| | 03:01 | Guides again. If I want to delete one
of the guides, I make sure I have the
| | 03:06 | Move tool selected in the toolbox and
then I come over the guide until I see
| | 03:10 | this double pointed arrow and I just
click, hold and drag off of the canvas. If
| | 03:16 | I want to clear all the guides, I go to
the View menu at the top of the screen
| | 03:21 | and down to Clear Guides.
| | 03:22 | Rulers and Guides can be very useful,
when you are designing a webpage layout
| | 03:27 | or working on another kind of web
image, but just be sure that when you are
| | 03:31 | designing for the web, you first
set the rulers preference to pixels in
| | 03:35 | Photoshop's Preferences.
| | Collapse this transcript |
| Choosing color settings for the web| 00:01 | When you are making images for the web,
of course you want the colors in the
| | 00:04 | images to look the same to your
audiences when they view the image in a Web
| | 00:07 | browser as the colors do when you
are working on the image in Photoshop.
| | 00:12 | To achieve that kind of consistency,
you will make use of some color management
| | 00:16 | features in Photoshop. The color
management approach that print designers use,
| | 00:20 | which is to tag an image with the color
profile, isn't the best way to go when
| | 00:24 | you are designing for the web. That's
because today, many Web browsers still
| | 00:28 | are not color managed. In other words,
many Web browsers can't read the color
| | 00:32 | profile attached to an image.
| | 00:35 | So a better approach to color
management for the web is just to try to emulate
| | 00:39 | in your copy of Photoshop, the way
that colors will appear in a typical Web
| | 00:43 | browser on a typical computer monitor,
which today means a PC monitor. The
| | 00:48 | first thing to do on your way to
achieving that goal of color consistency is to
| | 00:53 | configure Photoshop's color settings.
I suggest that you do this before you
| | 00:57 | create or adjust any image that
you are working on for the web.
| | 01:01 | To do that, I'm going to go up to the
Edit menu and I'm going to choose Color
| | 01:05 | Settings. That opens the Color
Settings dialog box. Fortunately, I don't have
| | 01:10 | to evade through all of the settings
in this dialog box one by one. Instead,
| | 01:15 | all I have to do is make one choice
from one menu and that's the Settings menu
| | 01:19 | here at the top of the dialog box.
I'll click on that menu and I'm going to
| | 01:24 | choose North America General Purpose 2.
This is the choice that I recommend for
| | 01:28 | web work, even over this other
setting which is called North America
| | 01:32 | Web/Internet.
| | 01:34 | So I select North America General
Purpose 2 and you notice that that has
| | 01:38 | automatically set all of the other
menus that you see here. One of the menus
| | 01:43 | affected by these settings trace that I
just made is the RGB Working Space menu
| | 01:48 | here. The RGB Working Space determines
the characteristics of the color space
| | 01:54 | in which images will be displayed when
you are working on them in Photoshop.
| | 01:59 | As you can see, the RGB Working Space
has been automatically set to sRGB. sRGB
| | 02:06 | is the best choice for web work
because it's the working space that most
| | 02:11 | closely resembles the color
characteristics of a typical PC monitor, which is
| | 02:15 | what your viewers are probably going
to be using when they view your images.
| | 02:20 | So sRGB is the RGB color space that
you want to be working in when you are
| | 02:24 | making images that will be displayed
on the web, even though sRGB contains a
| | 02:29 | relatively narrow range of colors as
compared to broader color spaces that are
| | 02:34 | used for print work, like Adobe RGB or Prophoto.
| | 02:38 | The only one of these working spaces
that I'm interested in right now is the
| | 02:42 | RGB working space. That's because when
you create images for the web, you are
| | 02:46 | always using RGB color mode. So I'm
going to skip over the CMYK, Gray, and Spot
| | 02:52 | Working Spaces. To take a look at the
Color Management Policies, in particular
| | 02:57 | the RGB color management policy down
here. Choosing the umbrella setting, North
| | 03:01 | America General Purpose 2, set the
RGB color management policy to Preserve
| | 03:08 | Embedded Profiles.
| | 03:09 | Preserve Embedded Profiles means
that if I happen to open an image into
| | 03:13 | Photoshop that has been tagged with a
color profile that's different than sRGB,
| | 03:18 | say Adobe RGB, then Photoshop is going
to respect that non-sRGB color profile
| | 03:24 | and not try to change it. I'll skip
right over the CMYK and Gray Color
| | 03:28 | Management Policies because they are
not relevant to the web and I'm going to
| | 03:32 | take a look at these three checkboxes,
which were automatically unchecked when
| | 03:36 | I chose North America General
Purpose 2 form the Settings menu.
| | 03:40 | Because these three checkboxes are left
unchecked, if I'm working with an image
| | 03:44 | whose tag does not match the sRGB
working space, Photoshop is not going to stop
| | 03:49 | and ask me any questions about what to
do at that point. So I'm going to accept
| | 03:53 | all of these settings by clicking OK.
Now I have set my RGB Working Space to
| | 03:59 | sRGB. So that's the first step in a
color management workflow for the web.
| | 04:04 | Now let's say that I happen to open an
image that I'm preparing for a website
| | 04:08 | that doesn't match my sRGB working space.
In other words, it's been tagged with
| | 04:13 | a color profile other than sRGB. At
that point, I would want to convert the
| | 04:17 | image to sRGB, so that it does match
the working space. The image that you see
| | 04:22 | here is one that I opened that does
have a color profile tag that differs from sRGB.
| | 04:28 | To see that, I'm going to go down to
the document information area at the
| | 04:31 | bottom of the document window and I'm
going to click the arrow to the right of
| | 04:35 | that document information area. I'll
choose Show and then I going to choose
| | 04:39 | Document Profile. Now I can see in the
document information area that this file
| | 04:44 | has been tagged with the
Adobe RGB (1998) color profile.
| | 04:49 | What I want to do is to convert the
image from Adobe RGB (1998) to sRGB. There
| | 04:55 | are two ways to do it in Photoshop
CS4. One way is to do it while you are
| | 04:59 | editing the image in Photoshop proper.
To do that, I'm going to go up to the
| | 05:04 | Edit menu at the top of the
screen and down to Convert to Profile.
| | 05:09 | That opens the Convert to Profile
dialog box. Here I'm going to go to this
| | 05:13 | Destination Space area, to the Profile
field and I'm going to change that to
| | 05:17 | Working RGB - sRGB, so that I'm going
to be converting from the Adobe RGB color
| | 05:23 | space to the sRGB color space, which
is the same as my RGB working space.
| | 05:29 | Normally, at this point I would click
OK but I'm actually going to cancel this
| | 05:33 | so that I can show you another way
to convert an image to the sRGB color profile.
| | 05:38 | The way I just showed you is fine, if
you can remember to do it, but since you
| | 05:41 | may not be focusing on color
management while you are editing an image, you
| | 05:45 | might not remember to do this.
That's no problem, because another way to
| | 05:49 | convert to sRGB is when you are
saving for the web in the Save for Web &
| | 05:53 | Devices dialog box.
| | 05:55 | The Save for Web & Devices dialog is
the place you would normally go after you
| | 06:00 | had edited or tweaked an image and
gotten it just the way you have wanted it
| | 06:03 | and we are ready to optimize it in a
web format. To open the Save for Web &
| | 06:07 | Devices window, I'm going to go up to
the File menu and down to Save for Web &
| | 06:12 | Devices. That opens this big Save for
Web & Devices window where there are lots
| | 06:18 | of settings that I'm going to address
in detail in later chapters, but for now
| | 06:22 | I want to concentrate on just one
setting here and that is Convert to sRGB.
| | 06:27 | I am going to make sure that Convert
to sRGB is checked and assuming that I
| | 06:31 | have set all the rest of the controls
here the way I want them, I'm going to
| | 06:35 | click Save. In the Save Optimized As
dialog box that opens, I'm going to
| | 06:41 | navigate to my Desktop and I'm then
going to go up to the Save As field where I
| | 06:45 | can see the name of this image which
is going to be optimized as a GIF.
| | 06:49 | I'm going to change the name from adobeRGB.
gif to converted.gif, since this version
| | 06:56 | of the file is the one that I converted
to sRGB. Then I'll click Save. If I go
| | 07:02 | out to my Desktop, I see that I now have
that converted.gif out there waiting for me.
| | 07:06 | For purposes of comparison, I'm going
to save another copy of the original as a
| | 07:10 | GIF, this time without converting to
sRGB. So back in the original PSD file,
| | 07:17 | I'm going to go again to File > Save
for Web & Devices and this time I'm going
| | 07:22 | to uncheck Convert to sRGB. Then I'm
going to click Save. Again, I'll navigate
| | 07:27 | to my Desktop and I'm going to rename
this copy of the image, unconverted.gif,
| | 07:34 | and I'll click Save.
| | 07:35 | Now I'm going to open both versions,
the converted and the non-converted
| | 07:39 | version to compare their colors. I'll
go up to the File menu and down to Open.
| | 07:45 | I'll navigate to my Desktop and there
I'm going to click on converted.gif. Then
| | 07:50 | I'll hold down the Command key,
that's the Ctrl key on a PC and I'll click
| | 07:54 | unconverted.gif and then I'll click Open.
| | 07:57 | There are now three tabs here in the
Photoshop document window, the original
| | 08:01 | PSD file, the web ready GIF that I
converted to sRGB, and the web ready GIF
| | 08:07 | that I didn't convert to sRGB.
| | 08:09 | To see all three at once so I can
compare their colors, I'm going to go up to
| | 08:12 | the application bar and that's the menu
bar on a PC and I'm going to click the
| | 08:16 | Arrange Documents menu. Then I'm going
to select this 3-Up view, which shows me
| | 08:21 | all three of the images.
| | 08:23 | Notice that the original PSD over here
on the left has really bright colors,
| | 08:27 | particularly as compared to this middle
image, which is the GIF that I did not
| | 08:32 | convert to sRGB. Notice that the colors
here are much duller and less saturated
| | 08:37 | than they are in the original. Now
look at the converted.gif, the GIF that I
| | 08:41 | did convert to sRGB. Like the original,
this version of the file has bright,
| | 08:46 | saturated colors.
| | 08:48 | So the lesson is that when you are
trying to manage color in your web images,
| | 08:52 | first set Photoshop's Working RGB
Color Space to sRGB in the Color Settings
| | 08:58 | dialog box and you can do that with
that one umbrella setting, North America
| | 09:03 | General Purpose 2. Then if you do
happen to open an image that's tagged with a
| | 09:08 | profile other than sRGB, you want to
convert that image to sRGB. That's done
| | 09:13 | most easily in the Save for Web & Devices
window using the checkbox that I just showed you.
| | 09:18 | So that's the best way to match the
colors that your viewers will see in your
| | 09:22 | GIF or JPG or other web ready image in
a Web browser to the colors that you see
| | 09:28 | in the image when you are
working on it in Photoshop.
| | Collapse this transcript |
|
|
3. Working with ColorThe decline of web-safe color| 00:00 | I have some good new for those of you
who design flat web graphics, like the
| | 00:05 | ones that you see here. That good
news is that you no longer have to limit
| | 00:09 | yourself to using only web safe colors
in your designs and that's been true for
| | 00:13 | a while now. The concept of web safe
colors was important in the 1990s when
| | 00:19 | consumer level computers had 8-bit
video display cards that could display only
| | 00:24 | a limited number of colors.
| | 00:25 | Computers like that did fine with
images that contained only web safe colors,
| | 00:30 | which were colors from a set palette of
216 particular colors. But if an image
| | 00:37 | was designed with other non-web safe
colors, like the image that you see here
| | 00:41 | on the right. When it was viewed on a
consumer's 8-bit computer, it would often
| | 00:45 | look like this image over here on the left.
| | 00:48 | Colors would have shifted, like this
curved graphic right here and other colors
| | 00:52 | would have dithered or broken up into
little dots of color like this, as the
| | 00:57 | computer used dots of web safe colors
to simulate non-web safe colors that it
| | 01:02 | couldn't display directly.
| | 01:04 | Nowadays, most computers can display
millions of colors. So viewers don't see
| | 01:08 | shifting and dithering like this in
graphics on the web. But if a client does
| | 01:14 | ask you to design with web safe colors,
you should know what they are. They are
| | 01:18 | a specific palette of 216 colors that
can be displayed without shifting or
| | 01:23 | dithering on an 8-bit display.
| | 01:24 | You should also know that if you do
need to use web safe colors for any reason,
| | 01:29 | say your boss just asks you to, or say
you are designing for an audience that
| | 01:33 | you know has really old computers, then
you can easily setup Photoshop's color
| | 01:38 | choosing features, like the Color
Picker or the Swatches panel, to offer only
| | 01:43 | web safe colors for you to choose from,
as I'll show you how to do later in this chapter.
| | Collapse this transcript |
| Choosing color with the Color Picker| 00:01 | Many of the tools and commands in
Photoshop, ranging from the Brush tool to the
| | 00:05 | Type tool to commands like Fill and
Stroke, apply color. So it's important to
| | 00:10 | know the various ways that you can
choose the colors that you are going to be
| | 00:13 | applying in Photoshop, including
using the Color Picker which is the main
| | 00:18 | subject of this movie.
| | 00:19 | Take a look at the bottom of the
toolbox here, where you will see two color
| | 00:23 | boxes, the foreground color box and
the background color box. You may have
| | 00:27 | different colors in your boxes but
whatever color is currently filling the
| | 00:31 | foreground color box is the one that
many of Photoshop's tools will use.
| | 00:36 | The background color comes into play
less often, perhaps, when you are making a
| | 00:40 | gradient that includes the background
color, but it's also a good place to
| | 00:44 | store a second color that you may want
quick access to as you are designing.
| | 00:48 | You can switch back and forth between
the foreground and background colors by
| | 00:52 | clicking this double pointed arrow or
by pressing the X key on your keyboard.
| | 00:57 | The default foreground and background
colors are black ad white. You can always
| | 01:01 | restore black and white by clicking on
this icon right here or by pressing the
| | 01:05 | D key on your keyboard. One popular way
to select a foreground color is to open
| | 01:10 | the Color Picker. To do that, I'm going
to click once on the foreground color box.
| | 01:15 | In the Color Picker, I can choose a
color by clicking anywhere on this large
| | 01:19 | color field on the left. The color
that I choose appears in the top half of
| | 01:24 | this grayer over on the right. I can
change the colors available by moving the
| | 01:29 | sliders on the central bar and then I
can pick a different color over here in
| | 01:34 | the color field. There are three
components to color in Photoshop and they are
| | 01:38 | represented by these three buttons here.
Hue means the actual color, S refers
| | 01:45 | to the saturation of a color, which
means its purity or intensity, and B is for
| | 01:50 | the brightness of a color,
its lightness or darkness.
| | 01:53 | Because the H button is selected here,
colors are arranged by hue in this
| | 01:58 | vertical slider bar. Over in the color
field, I see variations on the color hue
| | 02:05 | arranged by saturation from right to
left and by brightness from top to bottom.
| | 02:11 | If I want a few colors organized in
another way, I can click the S button here.
| | 02:16 | That organizes the color in this slider
by saturation, from highly saturated at
| | 02:21 | the top to less saturated at the bottom,
or I could click the B button here to
| | 02:27 | organize the colors in the slider
by brightness, from light to dark.
| | 02:31 | Down here are three buttons labeled R, G,
and B. These represent the R, G, and
| | 02:37 | B values of the color. These fields
come in handy if a client asks you to
| | 02:41 | design with a specific color, perhaps,
a corporate color. If he gives you the
| | 02:45 | RGB values for a color, you can type
them in here. So for example, I might come
| | 02:50 | in and type 68 as the R value of a color,
148 as the green value and 72 as the
| | 02:58 | blue value. There is nothing magic
about those particular numbers. I just
| | 03:02 | wanted to show you that they select a
particular color, in this case, a green.
| | 03:06 | If you happen to know the hexadecimal
code value of a color, you can type it
| | 03:10 | into this box down here. Hexadecimal
code is a special numbering system that's
| | 03:15 | used to describe web color. So let's
say I know that I want a color that's
| | 03:20 | ccff00, I can type that in and that
automatically selects this color for me.
| | 03:26 | Another thing that I can do in the
Color Picker is to set it to display only
| | 03:31 | web safe colors, a subject that I
covered in detail in another movie.
| | 03:35 | If you have to design with web safe
colors, you can come down here where it
| | 03:39 | says Only Web Colors, and check that box.
Then everything that you see here in
| | 03:44 | the Color Picker and in the Color
slider is a web safe color. If I click on any
| | 03:49 | of these colors, I have selected a web
safe color, which appears here in the
| | 03:53 | square. I'm going to uncheck Only Web
Colors for just a moment and I'm going to
| | 03:57 | select another color. Notice that when
I did that, this little cube appeared on
| | 04:03 | the right side of the large square.
| | 04:05 | The cube means that the color I have
selected is not web safe. Photoshop will
| | 04:10 | automatically select the nearest web
safe color for me, if I click on that
| | 04:14 | cube. The cube disappeared because
now I do have a web safe color selected.
| | 04:19 | When I have got the color that I want,
I click OK and that closes the Color
| | 04:23 | Picker and fills the foreground color
box here with the selected color which is
| | 04:28 | ready for me to use in Photoshop.
| | 04:30 | So I think you can see that the Color
Picker is a useful way to choose color in
| | 04:34 | Photoshop. It offers lots of features
that give you flexibility and versatility
| | 04:39 | when you are trying to choose a
color for use in your own designs.
| | Collapse this transcript |
| Sampling color with the Eyedropper tool| 00:01 |
The Eyedropper tool is the most
straightforward way to sample color for use
| | 00:05 |
with Photoshop's color related features.
You can use it to select color from
| | 00:10 |
anywhere on your screen, from inside a
document that's open in Photoshop or
| | 00:14 |
even from outside of Photoshop. That
means that you can borrow some colors from
| | 00:20 |
any document that's open in
any program on your computer.
| | 00:23 |
To see how the Eyedropper tool works, I
have opened this image in Photoshop and
| | 00:27 |
I'm going to go over to the toolbox
and I'm going to click on the Eyedropper
| | 00:30 |
tool to select it. I would like to
catch here a couple of the colors in this
| | 00:34 |
image, so that I can use them in
another design. So all I have to do is come in
| | 00:38 |
with the Eyedropper and click on one
of the colors. I'll click on this orange
| | 00:42 |
right here.
| | 00:43 |
When I do that, you can see that
color appeared down here in the foreground
| | 00:47 |
color box in the toolbox, all ready to
be used. If there is another color in
| | 00:51 |
this image that I want to keep, I can
switch the background and foreground
| | 00:55 |
color boxes here by pressing this
double pointed arrow or clicking X on my
| | 00:59 |
keyboard. That puts the gold in the
background color box and makes the
| | 01:03 |
foreground color box available to me,
so that I can come in and click on
| | 01:07 |
another color. I'll click on this petal
of the flower to capture that subtle blue.
| | 01:13 |
So that's how you can sample color from
an image that's open in Photoshop using
| | 01:16 |
the Eyedropper tool, but that's not all
this tool will do. It will also sample
| | 01:21 |
colors from anywhere on your screen.
So I'm going to move Photoshop over a
| | 01:26 |
little bit, so that I can see my Desktop.
To do that, I'll go to the right-hand
| | 01:30 |
side of the application frame and
I'm just going to drag to the left.
| | 01:34 |
If you are on a Mac and you don't have
your application frame enabled, then you
| | 01:37 |
can skip that step. I just want you to
be able to have access to your Desktop.
| | 01:41 |
So you can see that I have this gray
Desktop color and I have a light blue
| | 01:45 |
folder on my Desktop. If I want to
sample that light blue for use in Photoshop,
| | 01:49 |
I have to have some kind of an image
open in Photoshop to start with. It can
| | 01:53 |
even be a blank white file, but I need
something here because this is where I
| | 01:57 |
start this technique.
| | 01:59 |
What I do is I click-and-hold with
my mouse inside of the open image in
| | 02:03 |
Photoshop. I don't release the mouse, I
move outside of Photoshop and here I'm
| | 02:08 |
over with the gray Desktop. If you
look at the foreground color box in the
| | 02:12 |
toolbox in Photoshop, you will see the
same gray reflected there. What really
| | 02:17 |
I'm after is this light blue right here.
I can move my cursor over that folder.
| | 02:22 |
I haven't released it yet. You will
see that the foreground color box is now
| | 02:26 |
light blue. So now I'll release my
mouse and that light blue from outside of
| | 02:31 |
Photoshop is the color that I have captured.
| | 02:34 |
In another movie in this chapter, I'll
show you how you can use this technique
| | 02:38 |
to borrow colors from a website that
you like in an open Web browser on your
| | 02:42 |
screen and even how to save the
borrowed colors as a palette inside the
| | 02:47 |
Swatches panel. But before that, I
want to show you one more thing about the
| | 02:51 |
Eyedropper tool. That is that there is
a new feature up here in the Options bar
| | 02:56 |
for the Eyedropper tool, the
ability to sample color from the currently
| | 03:00 |
selected layer in the Layers panel.
| | 03:02 |
I am going to keep that at the default,
which is All Layers for just a moment
| | 03:06 |
and I'm going to go to the Layers
panel to show you that right now I have the
| | 03:10 |
Background layer selected. If you
don't have that, you can just click on that
| | 03:14 |
layer in the Layers panel to select
the Background layer. Let me show you
| | 03:18 |
what's on the Background layer. To do
that, I'm going to hold down the Option
| | 03:21 |
key on a Mac or the Alt key on a PC
and click on this eye icon to the left of
| | 03:26 |
the Background layer. That
temporarily makes the content of all the layers
| | 03:30 |
above that invisible, so that you can
see what's on this layer. It's filled
| | 03:34 |
completely with this brick red color.
| | 03:36 |
If I make the next layer in the
layers stack visible by clicking in its eye
| | 03:41 |
icon spot, you can see what's on that
layer, which is this yellow matte. Then
| | 03:46 |
some transparent pixels around the
matte, through which I can see down to the
| | 03:50 |
background on the layer below. I'll
turn on the tree and you can see what's
| | 03:55 |
there, just the orange tree and then
transparent pixels through which I can see
| | 04:00 |
the content of the layers below. I'll
turn on these other layers, the same way.
| | 04:05 |
As you saw before, when Sample is set
to All Layers, if I click, say on this
| | 04:10 |
light blue petal, the foreground
color box changes to light blue. But if I
| | 04:16 |
change the Sample field to Current
Layer that means that the Eyedropper tool
| | 04:21 |
will select the color on the currently
selected layer that's beneath my cursor.
| | 04:26 |
So let's see how that works.
| | 04:27 |
Now if I come back to this blue petal
and I click, Photoshop sampled not the
| | 04:34 |
blue that's on the topmost layer
under my cursor, but rather the Eyedropper
| | 04:38 |
bode down to the currently selected
layer, which is that brick red Background
| | 04:43 |
layer and that's the color that it sampled.
| | 04:47 |
You can see that brick red here in the
foreground color box. I think that can
| | 04:51 |
be a useful feature but it also can be
one of those features that surprises you
| | 04:54 |
when it happens. So to avoid being
surprised in the future, I'm going to go
| | 04:58 |
back up to the Sample menu here and I'm
going to change it back to its default
| | 05:02 |
All Layers.
| | 05:04 |
As you can see the Eyedropper tool is a
useful tool for sampling colors from a
| | 05:08 |
Photoshop document, like this one or
from any place on your screen. You can use
| | 05:13 |
it to borrow colors from a brochure
that you have open in Adobe InDesign or as
| | 05:18 |
I mentioned from a website that's
opened as a Web browser, or for any document
| | 05:21 |
that has a color scheme that you like.
| | 05:24 |
| | Collapse this transcript |
| Choosing color with the Swatches panel| 00:00 | The Swatches panel offers an
alternative way to select color. It's particularly
| | 00:05 | useful when you are designing for the
web because the Swatches panel can house
| | 00:09 | a specific palette of colors that you
are using in a design and make those
| | 00:13 | colors available directly on screen
without you having to open a separate
| | 00:17 | dialog box each time you want to
switch colors as you would have to do if you
| | 00:21 | were using the Color Picker
which I described in another movie.
| | 00:25 | This is my Swatches panel right over
here. If yours isn't open, you can open it
| | 00:28 | from the Window menu at the top of the
screen, or as I did, go to the Workspace
| | 00:33 | Switcher and choose the Preset Web
Workspace from there, and that sets up all
| | 00:38 | the panels as you see them here with
the Swatches panel open at the top.
| | 00:42 | If I want to use one of the colors from
the Swatches panel, all I have to do is
| | 00:46 | move my mouse over that color and
the cursor changes to an Eyedropper
| | 00:50 | indicating that color is going to be
sampled. I'll then click on the color and
| | 00:55 | notice that down here in the
foreground toolbox that color appears.
| | 00:59 | So that's how you select a color
which you can then use for any purpose
| | 01:03 | painting with a Brush tool or filling
with the Fill command or stroking with
| | 01:08 | the Stroke command and so on. If I
choose other colors in the Swatches panel,
| | 01:13 | keep your eye on the toolbox and
you will see that foreground change.
| | 01:17 | I think that the Swatches panel comes
in particularly handy when you are trying
| | 01:21 | to recolor text. I'm going to add a
simple line of type here and then I'm going
| | 01:26 | to show you how to work interactively
with the Swatches panel to change its
| | 01:30 | color on the fly.
| | 01:31 | To add text, I'm going to go to this T
tool in the toolbar and make sure that I
| | 01:36 | have either the Horizontal or
Vertical Type tool selected. I'll get the
| | 01:40 | Horizontal Type tool and then I'll go
to the Tool Options bar and I'll select a
| | 01:44 | font from this first field by
clicking the arrow on the field and just
| | 01:49 | selecting a font that I like, I'm
going to choose Mistral, you can choose any
| | 01:53 | font that you have on your
machine and that you like.
| | 01:56 | In the next field, you can change the
Style of some fonts. In this case, I only
| | 02:01 | have one choice and that's Regular.
That you may see Bold or Italic or
| | 02:05 | Bold/Italic here and you
can choose whatever you like.
| | 02:08 | In the next field, I can set the Size
of the type. I'm going to click the arrow
| | 02:12 | to the right of this field and make
a choice from this menu or I can just
| | 02:16 | type-in a point size, and that's
all I'm going to change there for now.
| | 02:20 | To create type, I just click anywhere
in the image and start typing. I'm going
| | 02:26 | to type Ride the tide! Whenever you
create or edit type in Photoshop, you have
| | 02:33 | to commit that change. One way to do
that is to go to the Tool Options bar at
| | 02:38 | the far right and click this big checkmark.
| | 02:41 | Now you will see in the Layers panel
down here that there is a brand new layer
| | 02:45 | that was created automatically and
it's a special type layer, I can tell that
| | 02:49 | because it has this T
symbol here in the thumbnail.
| | 02:52 | The content of type layers remains
editable and that's what makes them
| | 02:56 | different than regular pixel-based
layers. One of the things you can edit about
| | 03:00 | Type is its color, and this is
where the Swatches panel comes in.
| | 03:04 | First, I'm going to select the type
that I want to change and I'll do that by
| | 03:08 | making sure I have the Type tool still
selected in the toolbox and then coming
| | 03:12 | in and clicking just to the right of
the Type and dragging, and I could select
| | 03:16 | just a few letters or all of the letters.
| | 03:19 | This adds a highlight around the
selected letters. I would like to hide that
| | 03:22 | highlight, so I can really see the
color of the text. To hide the highlight,
| | 03:26 | I'll press the Command key on a Mac,
that's the Ctrl key on a PC and the letter
| | 03:31 | H. And now I'm going to go to the
Swatches panel and I'm going to start trying
| | 03:36 | out some other colors.
| | 03:37 | All I have to do is click on colors
here and that text changes interactively.
| | 03:42 | So I can do this until I find the
color that I like. I think I'll choose that
| | 03:47 | dark purple. And now I'll go up to the
Tool Options bar and click the checkmark
| | 03:52 | to commit those changes.
| | 03:53 | I don't want to click that checkmark
until I have made my color changes as I
| | 03:57 | just showed you. The colors that you
currently see here in the Swatches panel
| | 04:02 | are the default set of swatches. But
you are not limited to those colors. There
| | 04:06 | are quite a few other sets of swatches
that ship with Photoshop. Here's how you
| | 04:10 | can load one of those into the
Swatches panel. Go to the panel menu on the
| | 04:14 | right side of the Swatches panel, click
and from this line down, you will see a
| | 04:19 | list of different swatch sets.
| | 04:21 | I am going to go all the way to the
bottom of that list. There are three or
| | 04:25 | four different arrangements of web
colors listed here. I'm going to choose the
| | 04:29 | Web Hues swatch set, and in this
dialog box, I'm going to click OK and that
| | 04:35 | replaces the colors that were in the
Swatches panel with these new colors, all
| | 04:39 | of which happened to be web-safe. And
then to select any one of those, I could
| | 04:43 | just click on it here in the Swatches panel.
| | 04:45 | You are not limited to loading just
the swatch sets that ship with Photoshop.
| | 04:50 | If you are working on a project with
someone else, he or she could create a
| | 04:53 | custom set of swatches, as I'm going
to show you how to do in an upcoming
| | 04:57 | movie. And then that person could
save their custom set and send it to you.
| | 05:02 | Here's how you would load a custom
swatch set into your copy of Photoshop.
| | 05:07 | Again, I'm going to go to the panel
menu on the right side of the Swatches
| | 05:10 | panel and I'm going to choose Replace
Swatches, and then I'm going to navigate
| | 05:15 | out to the Exercise Files
to find a Custom Swatch Set.
| | 05:19 | I am going to choose color.aco swatch
set but you can use any swatch set that
| | 05:25 | you happened to have. I'll select
this one and I'll click Load. You can see
| | 05:30 | that the swatches here have changed.
Let me pull out the Swatches panel by
| | 05:34 | clicking on its Tab and dragging over
to the left, and then I'm going to make
| | 05:37 | the panel longer by clicking on its
bottom-right corner and dragging down, so
| | 05:42 | that you can see what's in this
swatch set that I just loaded.
| | 05:45 | I will scroll down there also. You
can see most of this set. It's actually
| | 05:49 | quite a large swatch set and what it
is are all web-safe colors divided into
| | 05:54 | three areas that differ in how
saturated they are. So in this area up here, we
| | 06:00 | have lots of different highly-
saturated web-safe colors, and here are some
| | 06:04 | medium-saturated web-safe colors, and
here are some unsaturated web-safe colors.
| | 06:09 | It's sometimes hard to see these when
you are looking at other arrangements of
| | 06:12 | web-safe swatch sets. So
this is a nice alternative.
| | 06:16 | And finally, if you want to go back to
your original default set of swatches,
| | 06:20 | you can do that at anytime by going
to the panel menu up here and choosing
| | 06:25 | Reset Swatches, and clicking OK, and
there are my original swatches. I can take
| | 06:31 | my Swatches panel by its tab and drag it
back over into the column on the right.
| | 06:36 | As you can see the Swatches panel is a
good way to access colors while you're
| | 06:41 | designing and it has the bonus of
allowing you to have a custom palette of
| | 06:45 | colors always available right on your screen.
| | Collapse this transcript |
| Making a custom color swatch| 00:01 | The Swatches panel is useful not only
for selecting colors to use in Photoshop
| | 00:05 | but also for storing custom sets of
colors that you can use in your future web
| | 00:10 | projects. One use for a custom swatch
set is to store colors that you sample
| | 00:15 | from an existing website, so that you
can use the color scheme of that website
| | 00:19 | as a starting place for your own web designs.
| | 00:21 | To show you how to do that, I have
opened a document here in Photoshop. This
| | 00:25 | could be any document, even a blank file.
I have also opened a Web browser down
| | 00:30 | here, with a live web page that
contains a color scheme that I happened to
| | 00:34 | like. I'd like to capture some of
this color scheme and save it as a custom
| | 00:39 | swatch set here in my Photoshop Swatches panel.
| | 00:42 | The first step is to clear out all the
colors in the Swatches panel so that I
| | 00:46 | have a blank slate that I can fill
with my own colors. When there are lots of
| | 00:50 | colors in the Swatches panel as they
currently are, the quickest way to delete
| | 00:54 | them all is by using the Preset Manager.
| | 00:56 | I will open the Preset Manager by
going to the panel menu and from there,
| | 01:01 | choosing Preset Manager. The Preset
Manager shows all of the colors that are
| | 01:06 | currently displayed in the Swatches
panel. I'm going to select them all by
| | 01:10 | going to the first of those colors
and clicking on it and then I'm going to
| | 01:13 | hold down my Shift Key as I
click on the last of the colors.
| | 01:16 | With all of them selected in the Preset
Manager, I'm going to click the Delete
| | 01:20 | button over here on the right side of
the Preset Manager and all of the colors
| | 01:24 | are now deleted from the Preset Manager.
I'll click Done and that deletes all
| | 01:29 | of those colors from the Swatches panel.
| | 01:31 | To sample a color from this website
in Photoshop I'm going to select the
| | 01:35 | Eyedropper tool from the toolbox. Then
I'm going to move over the Open document
| | 01:39 | window in Photoshop and I'm going to
click-and-hold, and that's the key to keep
| | 01:43 | the mouse held down as you move out of
the Photoshop document window and over
| | 01:48 | the Web browser.
| | 01:48 | I will move the cursor over a color
that I like in this website, this yellow
| | 01:52 | for example, and only then will I
release the mouse. That fills the foreground
| | 01:56 | color box in my toolbox with that
yellow color from the website. To save that
| | 02:01 | yellow color as a swatch in my Swatches
panel, I'll just move over the Swatches
| | 02:05 | panel in Photoshop, the icon turns
to a Paint Bucket and I'll click.
| | 02:10 | I can give the new color swatch a name,
I'll call this bright yellow, click OK,
| | 02:16 | and that color now appears as a
swatch in the Swatches panel. I'm going to
| | 02:20 | repeat this a few more times to
add to this set of custom colors.
| | 02:25 | So again, I'll move my cursor over the
open Photoshop document, press down on
| | 02:29 | the mouse and hold and I'll select this
orange color, which then appears in the
| | 02:33 | foreground color box in Photoshop. To
add it to the Swatches panel, I'll move
| | 02:38 | over the Swatches panel and click,
and I won't bother naming this swatch.
| | 02:42 | I'll just click OK.
| | 02:42 | So now I have four colors in my
custom swatch set and I could add more, but
| | 02:48 | I'll leave it at that for now. The next
thing that I want to do is to save this
| | 02:52 | custom swatch set so that I can bring
it up again in the future and use it.
| | 02:55 | To do that, I'll go the panel menu on
the right side of the Swatches panel and
| | 02:59 | I'm going to choose Save Swatches. It's
important to navigate to the same place
| | 03:03 | inside of Photoshop where all of
the other swatches are located.
| | 03:07 | On a Mac, that's in the Applications
folder and then inside of the Adobe
| | 03:12 | Photoshop CS4 folder, inside the
Presets folder and inside the Color Swatches
| | 03:17 | folder. Here you can see all of the
files that represent the pre-built swatch
| | 03:21 | sets that come with Photoshop.
I'm going to give my swatch set a name.
| | 03:25 | I'll call this jan custom and I'll click
Save, and now I'm going to close my Web
| | 03:30 | browser and let's say that it's
another day and I want to use a different set
| | 03:34 | of swatches. Let's say I
want to use my default swatches.
| | 03:36 | I will go back to the panel menu in
Photoshop and I'll click Reset Swatches and
| | 03:41 | I'll click OK. I must say that I
changed my mind and I want to get my custom
| | 03:45 | swatch set back, so that I can use
those colors. If I go to the panel menu and
| | 03:50 | I'll look for that custom swatch set
that I called jan custom swatch set, it's
| | 03:54 | not there. That's because you have
to restart Photoshop in order to get a
| | 03:58 | custom swatch set to appear here in this menu.
| | 04:03 | Now, if I go to the panel menu in
Photoshop, there is my jan custom swatch set.
| | 04:08 | So I'll select that, I click OK and
there is my custom swatch set all ready to
| | 04:13 | use. There is another way to create a
custom swatch set and that's by using the
| | 04:17 | new Kuler panel in Photoshop CS4.
| | 04:20 | Kuler is an extension that comes with
Photoshop to give you interactive access
| | 04:25 | to color combinations that other
people create and post online. So to use
| | 04:30 | Kuler, I first have to make sure that
I'm online and I'm also going to clear
| | 04:34 | out the Swatches panel here in
Photoshop. So that will have a blank space in
| | 04:38 | which to build another custom swatch set.
| | 04:40 | Since, there are only a few colors
here, I'll delete them one at a time by
| | 04:44 | holding down the Option key on a Mac
or the Alt key on a PC which changes the
| | 04:49 | icon to a Scissors and then I'll just
click on each one of these. Then I'm
| | 04:53 | going to open Kuler by going to the
Window menu, going to Extensions and
| | 04:57 | choosing Kuler.
| | 04:58 | Here, I can see color combinations
called color themes that other people have
| | 05:02 | created and then uploaded. There are
different categories of color themes that
| | 05:07 | I can browse, Most Popular, Highest
Rated, Newest and so on. When I see a theme
| | 05:13 | that I like, like the second one here
Firenze, I'll click on it to select it,
| | 05:17 | and then I can automatically add it
to my Swatches panel by clicking this
| | 05:22 | bottom-right icon right here
Add selected theme to swatches.
| | 05:26 | I can save this custom swatch set for
future use in the same way that I showed
| | 05:30 | you earlier in this movie. So the next
time, you are trying to create a color
| | 05:34 | scheme for your own web layout, rather
than start from scratch, you might try
| | 05:39 | making a custom swatch set by sampling
the colors from an online website, from
| | 05:44 | another document that's open on your
screen or by using Kuler from inside
| | 05:48 | Photoshop as I've shown you how to do here.
| | Collapse this transcript |
| Recoloring web graphics| 00:00 | There are often times when you want to
change the color of a web graphic, maybe
| | 00:05 | you're refreshing colors in a site
redesign, or maybe you want different color
| | 00:09 | versions of the same graphic to put on
different web pages. As long as you've
| | 00:13 | had the foresight to place different
pieces of artwork on different layers in
| | 00:17 | the source file, re-coloring will be
quick using the method that I'll show you here.
| | 00:21 | Here I have a file with individual
pieces of artwork on separate layers
| | 00:25 | including the flowers that you see here.
If this file had only one layer, it
| | 00:30 | would be difficult to select the
flowers to change their color only because
| | 00:34 | they do have these soft edges. But
fortunately, the flowers are on their own
| | 00:39 | layer surrounded by transparent pixels.
| | 00:41 | I am going to turn off the visibility
of all the other layers temporarily to
| | 00:46 | show you that by moving over to the
Flowers layer holding down the Option key
| | 00:50 | on a Mac or the Alt key on a PC and
clicking the Eye icon to the left of the
| | 00:55 | Flowers layer. You can see them there
on their own layer and this gray and
| | 00:59 | white pattern that represents
transparent pixels on the layer.
| | 01:02 | I will go back to the Layers panel
and Option or Alt-click on that Eye icon
| | 01:07 | again to bring all the other layers back.
Now, I want to fill the flowers only.
| | 01:12 | To do that, I'm going to click on the
Flowers layer to select that layer and
| | 01:16 | then I'm going to use the Transparent
Lock, which is the first of these four
| | 01:20 | lock icons at the top of the Layers panel.
| | 01:23 | I will click on that lock to activate
it and you can then see a lock icon on
| | 01:27 | the Flowers layer. Now I'm going to
choose a color for the flowers from the
| | 01:30 | Swatches panel. I'll click on this
purple. The purple appears as the foreground
| | 01:35 | color in the toolbox and now I'm going
to use the Edit command to fill the flowers.
| | 01:40 | I will go to the Edit menu at the
top of the screen and down to the Fill
| | 01:45 | command here and I'll leave everything
as is and in the Fill dialog box, I'll
| | 01:50 | use the default setting which is to
fill with the foreground color. I'll click
| | 01:55 | OK and the only thing that fills with
purple are the flowers on the Flowers
| | 01:59 | layer. That's because the Transparent
Lock has protected all of the transparent
| | 02:03 | pixels on the layer from filling with color.
| | 02:06 | Now, let me show you what happens if
you don't use the Transparent Lock icon.
| | 02:10 | I'm going to select a different layer,
the Lines layer and I'm not going to
| | 02:14 | click on the Transparent Lock icon this
time. I'll go up to the Swatches panel
| | 02:19 | and I'll select another color for the
lines, this dark blue and then I'm going
| | 02:23 | to use the Fill command.
| | 02:25 | Now I could go up and choose Edit >
Fill again, but I'd like to show you a
| | 02:29 | shortcut for filling and this is one
of the shortcuts that I suggest you
| | 02:32 | remember because you will be using it
so often. The shortcut to fill with the
| | 02:36 | foreground color is Option+Delete on
a Mac. That's Alt+Backspace on a PC.
| | 02:42 | So I'll press that key command and the
entire Lines layer has filled with the
| | 02:48 | foreground color, and that's not what I
wanted. I just wanted to show you what
| | 02:52 | happens if you don't use the
Transparent Lock. So I'm going to undo that by
| | 02:56 | pressing Command+Z on a Mac, that's Ctrl
+Z on a PC and I'll try again. With the
| | 03:02 | Lines layer still selected, I'll click
on the Transparent Lock icon and use the
| | 03:07 | shortcut for filling again, Option+
Delete or Alt+Backspace. So that works great
| | 03:13 | on a pixel-based layer.
| | 03:15 | Now, what if you have a type layer? In
Photoshop, type layers are made up of
| | 03:19 | vector-based type rather than pixels.
So when I select the type layer here, the
| | 03:25 | one with the special T on it, notice
that the Transparent Lock icon is grayed
| | 03:29 | out. It's not available. But that's okay,
because on a type layer I don't need
| | 03:34 | it. All I have to do is select a color
for the type. I'll leave it at this blue
| | 03:39 | that's currently in the foreground
color box and use the Fill command. I'll use
| | 03:43 | the shortcut again Option+Delete or
Alt+Backspace and only the text on this
| | 03:47 | type layer filled with color.
| | 03:48 | So the lesson is that you don't have to
labor over making selections or trying
| | 03:53 | to paint in color if you have taken
advantage of layers while building your web
| | 03:57 | graphics. As long as you have the
source file with individual pieces of artwork
| | 04:02 | on separate layers, it's a snap to
recolor using the fill techniques that
| | 04:06 | I have shown you here.
| | Collapse this transcript |
| Copying color as HTML| 00:00 | One way to unify the design of a web
page is to take colors from the graphics
| | 00:05 | on a page and use them to color HTML
elements like the page background or HTML
| | 00:11 | text or links.
| | 00:13 | If you're a web designer, you probably
know that the colors of HTML elements
| | 00:18 | like those are specified with a
special numbering system called Hexadecimal
| | 00:22 | Code. Photoshop has a feature built in
that will copy the hexadecimal code of
| | 00:28 | any color in an image that's open in
Photoshop. So you can paste it into the
| | 00:32 | code in your web building
program. Here's how it works.
| | 00:35 | I am going to select the Eyedropper
here in the toolbox and then I'm going to
| | 00:39 | come into this open image in Photoshop
and then I'm going to hold the Ctrl key
| | 00:43 | as I press down on the mouse and that's
right-click on a PC and hold the mouse
| | 00:48 | down and that brings up this contextual menu.
| | 00:51 | I will move down to the bottom of the
menu and select Copy Color as HTML and
| | 00:56 | then I'll release the mouse. Now, I'm
going to open a blank page in a Text
| | 01:00 | Editor but you could do this in
Dreamweaver or in any application in which you
| | 01:04 | build your sites.
| | 01:05 | I am going to go down to the dock on
my Mac where I have already started a
| | 01:09 | blank page in the Mac program called
Text Edit. I'll go up to the Edit menu and
| | 01:15 | I'm going to go down to Paste and
that pastes into this document outside of
| | 01:19 | Photoshop the hexadecimal value of the
orange that I copied from my Photoshop graphic.
| | 01:25 | So that I now have that hexadecimal
value to use in any page that I'm building
| | 01:29 | in this other application.
| | 01:30 | So that's just one more small thing
you can do in Photoshop to make your web
| | 01:34 | design easier.
| | Collapse this transcript |
|
|
4. Optimizing Images for the WebTouring the Save for Web interface| 00:01 | This movie introduces the Save for
Web and Devices window where you will
| | 00:04 | optimize images for the web.
I'm starting here in Photoshop proper with a
| | 00:09 | photograph on which I have finished
working. I have tweaked the image, I have
| | 00:12 | cropped it, I have added some
adjustments, I have resized a copy for the web,
| | 00:17 | and now I'm ready to optimize. You will
notice that this is a .PSD file, a file
| | 00:22 | in a native Photoshop format. That's a
format that a Web browser won't display.
| | 00:27 | So one thing I want to do when I
optimize is to convert this photo to a format
| | 00:31 | that can't be displayed
on a Web browser like JPEG.
| | 00:34 | And the other thing I want to do is
to make the photo as small as I can, so
| | 00:38 | that it will download relatively
fast in a viewer's Web browser.
| | 00:41 | To optimize, I'm going to go to the
File menu at the top of the screen, and I'm
| | 00:45 | going down to Save for Web & Devices,
and that opens Save for Web and Devices
| | 00:50 | window. I'm going to click on its
title bar here and move it, so that you can
| | 00:54 | see there really is a completely
separate interface from Photoshop proper,
| | 00:58 | where the original image is still open below.
| | 01:01 | The first thing I'm going to do here is
to click on this tab that says 2-Up. In
| | 01:06 | the 2-Up view you see two views of the
image. On the left is the original PSD
| | 01:11 | format image, and I know that because
it says so right down here at the bottom
| | 01:15 | of the image, and it also tells me
there the size of the original image, which
| | 01:19 | is 437 kilobytes. In the view on the
right, I see the image optimized with all
| | 01:25 | of the controls that are currently set
over here on the right side of the Save
| | 01:29 | for Web & Devices window. So it just so
happens that right now the image is set
| | 01:33 | to optimize in the JPEG format,
which is usually the best format for a
| | 01:38 | photograph, and to optimize with high
quality and some other settings as well.
| | 01:43 | At the bottom of the Preview window
you can see the file format and its size
| | 01:48 | with the current settings. And you also
can see a rough estimate of the amount
| | 01:52 | of time it would take a viewer's
browser to download this image with this
| | 01:55 | particular speed Internet connection.
If you click the menu to the right of
| | 01:59 | that, you can set that estimate to show
you estimated download times with other
| | 02:04 | kinds of Internet connections. But
please remember that these are just
| | 02:07 | estimates, and should be
taken with a grain of salt.
| | 02:09 | I am going to go up to the top of the
screen, and I'm going to choose the 4-Up
| | 02:13 | Tab now to show you that view. Some
people prefer to work this way, because
| | 02:18 | here you can see not only the original
image in one of the four previews, but
| | 02:22 | you see three other previews, and
you can click on a preview and set the
| | 02:26 | controls, then click on another
preview and set the controls in a different
| | 02:29 | way. And do the same yet one more time,
and then you can compare the appearance
| | 02:36 | of each preview, as well as the file
size of each preview. And those are the
| | 02:40 | two properties that you want to keep
your eye on always when you are optimizing
| | 02:44 | an image. Because the challenge is
that reducing file size, so that the file
| | 02:48 | downloads fast on the viewer's end
can cause the appearance of the image to
| | 02:52 | degrade. So your goal when you are
optimizing is to try to make the image small
| | 02:57 | and fast size, but also retain
relatively good image quality.
| | 03:00 | Let's see what else is here in the
Save for Web window. On the top left there
| | 03:04 | is an abbreviated toolbox with some
tools that you recognize from Photoshop
| | 03:08 | Proper. Like a Zoom tool for zooming in
and out on your image, a Hand tool for
| | 03:13 | moving around an image that's too
big to fit in one of the previews. An
| | 03:17 | Eyedropper tool for sampling color and more.
| | 03:20 | Notice this light-blue border around
this preview. That's there because I just
| | 03:24 | clicked on that preview, if I click
on the next preview then that's the one
| | 03:28 | that's selected. And any changes that I
make to the controls on the right will
| | 03:31 | affect only that preview. We'll be
looking at the controls on the right in
| | 03:35 | great detail in other movies, but I do
want to point out a couple of new and
| | 03:39 | changed items here.
| | 03:41 | Here are the Color Management controls.
In previous versions of Photoshop these
| | 03:45 | were hidden behind some menus and hard
to find, and they have been moved to the
| | 03:48 | face of this window so they are
easier to access. This is a new field in
| | 03:52 | Photoshop CS4, the Metadata field,
which allows you to add Copyright, Contact
| | 03:58 | and other information to your optimized images.
| | 04:00 | The Color Table here is used when you
are optimizing GIFs or PNG-8s, which have
| | 04:05 | limited numbers of colors. We will be
looking at the Color Table in detail too
| | 04:09 | in other movies. Beneath that you have
the Image Size controls, which also have
| | 04:14 | moved in this version of the
program, and they are used to change the
| | 04:17 | dimensions of the image from inside
this window, so you don't have to cancel
| | 04:21 | out resizing image and then come back in
if you change your mind about its size.
| | 04:25 | Beneath that are controls for
previewing animated GIFs, which we will also be
| | 04:29 | looking at. When you are all done with
the Optimization controls, you'll click
| | 04:34 | Save and that will save an optimized
version of the file ready for the web.
| | 04:38 | The Cancel button just closes the Save
for Web & Devices window, if you change
| | 04:42 | your mind about optimizing, and the
Done button does the same thing, except
| | 04:47 | that when it closes the window it
remembers the current optimization settings,
| | 04:51 | so that the next time you open the
image in this window, you'll see those
| | 04:55 | optimization settings to start with.
| | 04:58 | The Preview button is also an important
one, and it's become more prominent in
| | 05:02 | this version of the program. If this is
the first time that you are using Save
| | 05:05 | for Web & Devices, you may see a
question mark on top of this Preview and
| | 05:09 | Browser icon right here, and that
means that you need to set up the Preview
| | 05:13 | function to recognize the Web
browsers is on your computer.
| | 05:16 | Here's how you do that. I'm going to
click the arrows to the right of the
| | 05:20 | Preview and Browser icon and choose
Edit List. In the Browser's box that opens,
| | 05:25 | I'm going to click Find All, and
Photoshop goes out and finds the Web browsers
| | 05:30 | that I have installed on my computer.
I can set any one of these to be the
| | 05:34 | Default Browser, I'm just going to
leave things as they are and click OK, and
| | 05:38 | now you can see that that icon has
changed to the Safari Web browser icon,
| | 05:43 | because that is the Browser that I
chose as the Default. And what that means is
| | 05:47 | that when I click the Preview button
right here with one of the Preview windows
| | 05:51 | selected, my Safari Web browser opens
showing me a preview of the optimized
| | 05:56 | image with the optimization settings
that I have chosen for that particular
| | 06:01 | preview. And you'll see there is also
some information about the image down here.
| | 06:05 | I am going to close that Safari Web
browser window, and show you that I can
| | 06:09 | then click on the Preview and Browser
icon menu, and choose to see the image in
| | 06:14 | one of my other browsers. It's a good
idea to preview your images in more than
| | 06:18 | one browser, because you audience is
also likely to be using different browsers.
| | 06:23 | If you are wondering what this Device
Central button does, it will take you to
| | 06:26 | Adobe Device Central, an application
for developing and testing content for
| | 06:30 | mobile devices like cell phones.
| | 06:33 | So that's an overview of the Save for
Web and Devices window. In the upcoming
| | 06:37 | movies in this chapter I'll be
showing you how to use the controls in this
| | 06:41 | window to optimize
photographs and graphics for the web.
| | Collapse this transcript |
| Optimizing photos as JPEGs| 00:01 | JPEG is the best file format in which
to optimize a photograph for the web.
| | 00:05 | Your goal when optimizing a JPEG is to
make it as small as possible, but still
| | 00:09 | retain good photo quality. I'll
show you how to go about that with this
| | 00:13 | photograph which is a native Photoshop
document, a .PSD, which is file format
| | 00:18 | that is not web-ready.
| | 00:20 | To convert this image for the web,
I'll go to the File menu at the top of the
| | 00:23 | screen and down to Save for Web &
Devices. In the Save for Web & Devices window
| | 00:28 | I'll use the 4-Up view, you could use
the 2-Up or the Optimize view. I'm going
| | 00:32 | to select the Hand tool here and
click in one of these previews to move the
| | 00:36 | image up so that you can
see the whole surfer here.
| | 00:39 | Here I see three previews of the image,
and you'll notice that each one of
| | 00:42 | those is currently set to GIF.
Photographs usually don't look very good when
| | 00:46 | they are optimized in the GIF format,
as you can see here. That's because GIFs
| | 00:50 | allow only a limited number of colors
and photographs are made up of continuous
| | 00:54 | tone and color. So when you have a
photograph, the best thing to do is to go
| | 00:58 | over to the Format menu on the right
side of the screen and change the format
| | 01:02 | to JPEG. That affects the selected
preview, which is the one right here with a
| | 01:06 | light-blue border. And you'll notice
that as soon as I made that change, this
| | 01:10 | preview looks a lot better,
particularly as compared to GIFs, but I notice that
| | 01:14 | the file size is a bit larger than I
would like it to be. So my job is to try
| | 01:18 | to get the file size down while retaining
an image quality that's approximately this good.
| | 01:23 | The main way to do that in the Save
for Web & Devices window is to vary the
| | 01:27 | quality. You can see here that this
preview has a relatively high quality of
| | 01:31 | 60. I'd like to compare that to some
previews of JPEGs with lower qualities.
| | 01:35 | So I'm going to go over to this icon at
the top right of the window, click, and
| | 01:39 | that opens this menu where I'll
choose Repopulate Views, and that sets the
| | 01:44 | other two previews to JPEG as well,
each with a different quality. The one on
| | 01:48 | the bottom right is a low quality of 15.
With that setting I see lots of JPEG
| | 01:54 | artifacts here. Blocks of color, and
some lines around the high contrast area.
| | 01:59 | And those aren't acceptable. So I'll
look at the 30 quality or medium quality
| | 02:02 | image, and I see that there still are
some JPEG artifacts, but not as many. So
| | 02:07 | this comparison is telling me that
I'd like to choose a quality somewhere
| | 02:10 | between 30 and 60. I still have the
top right preview selected, and to
| | 02:15 | fine-tune its quality, I'm going to go
over to the quality slider on the right
| | 02:18 | side of the screen, click to the right
of that field, drag the slider to the
| | 02:22 | left slightly, and I'll try a quality
of 50. I'll click there to close the
| | 02:27 | slider, and I can see that the image
still looks good, and that one change has
| | 02:31 | reduced the file size by 10 kilobytes.
What else can I do to make the file size
| | 02:36 | a little smaller?
| | 02:37 | Over on the right side I could try
adding a little blur to the image, because a
| | 02:41 | blurry image compresses better as a
JPEG than a sharp image. I'll click the
| | 02:45 | arrows to the right of the Blur field,
and I'll drag over increasing blur
| | 02:49 | slightly. I don't want to go too far
with this setting, because I certainly
| | 02:52 | don't want a blurry JPEG. I'll click
to close that slider, and I see that I
| | 02:57 | have saved a little bit more in file
size, and I think my image still looks
| | 03:00 | okay. Another thing that reduces file
size is this Optimize checkbox. If I were
| | 03:05 | to uncheck that, keep your eye on
the file size, and you'll see that it
| | 03:08 | increases slightly.
| | 03:10 | So I'm going to leave Optimized checked
to reduce the file size a bit, and I'm
| | 03:14 | going to leave Embed Color Profile
unchecked. If Embed Color Profile were
| | 03:18 | checked, Photoshop would embed
information in the optimized JPEG describing its
| | 03:23 | color space. The purpose of color
profiles is mainly to try to get the color in
| | 03:28 | a print to match what you see on your
screen when you are working on the image
| | 03:31 | in Photoshop. Of course when you are
designing for the web, your output device
| | 03:34 | is not a printer, but a Web browser.
And unfortunately most Web browsers can't
| | 03:39 | recolor profiles, except for a few
browsers like Safari and Firefox 3. Those
| | 03:44 | facts leads many web designers to
leave the Embed Color Profile box unchecked
| | 03:49 | saving a little file size, and also
to leave this preview setting at its
| | 03:53 | default of Monitor Color.
| | 03:55 | However, this approach to Color
Management for the web could change, as more
| | 03:59 | browsers become color managed in the future.
| | 04:01 | Well, I'm on the subject of Color
Management, to get the most consistency
| | 04:04 | between the colors in the preview image
here, and the colors that your viewers
| | 04:08 | will see in this image on their screens.
Leave Convert of sRGB checked here. If
| | 04:13 | you have an image like this one, which
has the Adobe RGB profile embedded in
| | 04:17 | it, and you haven't already converted
the image to the sRGB color space outside
| | 04:22 | of Save for Web & Devices, then
checking this box will convert the image to the
| | 04:26 | sRGB color space, and that's a good
choice, because sRGB is the color space
| | 04:31 | that most resembles a PC monitor, which
is what most people viewing the web are
| | 04:36 | likely to be using when
they see your image online.
| | 04:39 | What else can I do in this window to
reduce the file size? Well there really is
| | 04:43 | only one more thing, and it's something
I don't like to do here. And that is to
| | 04:47 | reduce the physical dimensions of the
image down here by changing the Width or
| | 04:50 | the Height, or changing the Percent
field here. If I do reduce the dimensions
| | 04:55 | of the image, I make sure to set this
Quality menu to Bicubic Sharper, because
| | 04:59 | that's the best formula for reducing
file size. However, if I'm going to resize
| | 05:03 | an image, I'd like to do that before
I come into the Save for Web & Devices
| | 05:07 | window, because I think it's important
to resize an image before you sharpen
| | 05:11 | it. So I'll resize a copy of the source
file, sharpen it, and then come in and
| | 05:16 | optimize the copy for the web.
| | 05:17 | If I do want to try to get this image
smaller than 31 kilobytes, there is one
| | 05:21 | more thing I could try, and that is to
exit out of the Save for Web & Devices
| | 05:25 | window, and try to tone down the
saturation and the contrast of the image,
| | 05:29 | because JPEG does a better job optimizing
lower contrast and lower saturation images.
| | 05:35 | So I'm going to click the Done button
here, and back in Photoshop proper I'll
| | 05:40 | go to the Adjustments panel. If yours
isn't open, you can open it from the
| | 05:43 | Window menu at the top of the screen.
| | 05:45 | Here I'm going to click on this first
icon, the Brightness/Contrast Adjustment,
| | 05:49 | and that adds an adjustment layer to
my Layers panel. The beauty of using an
| | 05:53 | adjustment layer to adjust a photo
is that it doesn't directly change the
| | 05:57 | pixels in the photographic layer,
and the adjustment layer always remains editable.
| | 06:01 | I am going to come up to the
Adjustments panel, which is now showing controls
| | 06:05 | for the Brightness/Contrast Adjustment,
and I'm going to reduce the Contrast.
| | 06:08 | I' won't go too far, maybe around 30,
and I think the image still looks good.
| | 06:13 | If I want to see the difference
between how the image looks with this change
| | 06:17 | and without it, I'll turn the Preview
icon off. That's how the image was, and
| | 06:22 | on, that's how the image is. I
think it looks fine like that.
| | 06:25 | I am going to add one more adjustment
layer to change the saturation of this
| | 06:29 | image. I'll go to this big green arrow
on the bottom left of the Adjustments
| | 06:33 | panel and click it, to take the
Adjustments panel backs to its default view,
| | 06:37 | and in the Adjustments panel I'll click
on this Vibrance Adjustment icon. That
| | 06:41 | adds another adjustment layer in the
Layers panel, and the settings have now
| | 06:45 | changed to Vibrance and Saturation.
| | 06:47 | I am going to take the Vibrance slider
and more it down to the left slightly,
| | 06:51 | Vibrance is very similar to Saturation,
except where it does a better job with
| | 06:55 | skin tones and some other colors.
| | 06:57 | I am going to save this source file
with the changes I just made to it. That
| | 07:01 | way if I ever need to make a change to
the web version of the image later, I'll
| | 07:05 | have the matching layered source file
to come back to. To do that I'll go to
| | 07:09 | the File menu and down to Save, or I
could use the shortcut Command+S on a Mac,
| | 07:13 | or Ctrl+S on a PC, and that saves the
altered source file over its original version.
| | 07:19 | Now I'll go back to the Save for Web &
Devices window by going up to the File
| | 07:23 | menu and choosing Save for Web & Devices.
| | 07:26 | If you remember before I went out to
Photoshop proper to make those changes,
| | 07:30 | the file size of this preview was
about 31k, so I have realized a slight file
| | 07:35 | savings by toning down the
saturation and contrast of the original image.
| | 07:40 | When I'm all done choosing my
Optimization settings, with this preview
| | 07:43 | selected, I'm going to go down to the
Save button and click. And that opens the
| | 07:47 | Save Optimized As window. Here I'm
going to navigate to my desktop where I'll
| | 07:51 | save a JPEG copy of the original file.
I'll make sure that format is set to
| | 07:57 | Images Only, and I'll click Save.
| | 07:58 | Now I'm going to go out to my Desktop
and there I'll find my JPEG, I'll open
| | 08:03 | that JPEG in Photoshop by double-
clicking it, I'm going to go to the Arrange
| | 08:07 | Documents menu in Photoshop and choose
the 2-Up view, so that I can see both
| | 08:12 | the original PSD photo on the left,
and the optimized JPEG on the right.
| | 08:17 | I think the quality of this JPEG is
acceptable. It's not as good as the
| | 08:21 | original. But if you remember, we've
realized a really tremendous file saving
| | 08:25 | by compressing this photo to a
JPEG and it now can be put on the web.
| | 08:29 | So those are some techniques that
you can use when you are optimizing a
| | 08:32 | photograph as a JPEG in the Save for
Web & Devices window. First of all, please
| | 08:37 | be sure to use Save for Web & Devices,
rather than just going to the File >
| | 08:40 | Save As command, because File > Save
As usually results in much larger files,
| | 08:45 | and doesn't offer the comparative views
that you get in the Save for Web window.
| | 08:49 | By the way, photographs aren't the
only kind of image to optimize as JPEGs.
| | 08:54 | Some kinds of graphics also optimize
best as JPEG, in particular graphics that
| | 08:58 | have glows or gradients or drop shadows,
or other effects that are continuous
| | 09:03 | tone. Whether you are optimizing a
special graphic like those or a photograph,
| | 09:08 | in the Save for Web window the Control
to Concentrate on is the Quality slider,
| | 09:12 | you can also try adding a little blur
to reduce file size, and to make your
| | 09:16 | JPEG even smaller, you can try toning
down its contrast and saturation in the
| | 09:21 | source image.
| | Collapse this transcript |
| Adding metadata| 00:00 | Photoshop CS4 has some new controls
for including copyright information and
| | 00:05 | other metadata in a JPEG or other
optimized web image. I'm going to optimize
| | 00:10 | this PSD file for the web, saving it
out as a JPEG. But before I go into the
| | 00:15 | Save for Web and Devices window to do
that, I'm going to add some metadata to
| | 00:19 | the source file.
| | 00:20 | In Photoshop I'm going to go up to the
File menu and down to File Info. In the
| | 00:25 | File Info dialog box there are a
number of categories of information called
| | 00:30 | Metadata that could be added to this
file. If I click on the Camera Data tab
| | 00:34 | here, you'll see that there is already
some information attached to this file
| | 00:38 | that came directly from
the photographer's camera.
| | 00:40 | I am going to go back to the
Description tab. The most important information
| | 00:44 | for most photographers is down here in
the copyright area. To attach copyright
| | 00:49 | information to the source file, I'm
going to go to the Copyright Status field,
| | 00:53 | and change it from Unknown to
Copyrighted. Then in the Copyright Notice area,
| | 00:58 | I'm going to type the photographer's
name. I'll enter a copyright symbol by
| | 01:03 | pressing the Option Key and the G key
on a Mac, or holding the Alt Key on a PC
| | 01:08 | as I type 0169, and then I'll type the
date. I'm also going to enter a title
| | 01:14 | for this photo. I'll go up to the
Document Title field and I'm going to
| | 01:17 | type-in, Surfing in Oxnard, California.
I could enter more information here,
| | 01:23 | but that's enough for now. I'm going to
go into this other tab, IPTC, which is
| | 01:28 | the acronym for this International
Press Organization that uses metadata, and
| | 01:32 | here I'm going to type-in some
contact information. I'll start typing the
| | 01:36 | photographer's name, and it fills that
in for me automatically from the other
| | 01:40 | entry. And I could put in some address
information. When I'm done, I'll click
| | 01:47 | OK to close the File Info dialog box.
| | 01:51 | Now I'm ready to optimize the image
for the web. I'll go to the File menu and
| | 01:55 | choose Save for Web & Devices. I've
covered the other settings in this window
| | 01:59 | in other movies, so I'm going to go
right down to the Metadata menu here, which
| | 02:03 | is new in this version of Photoshop CS4.
From this menu I can choose whether to
| | 02:08 | include in web optimized JPEG copy of
the file, any or all of the information
| | 02:13 | from back in the File Info dialog box.
I could choose to add no metadata, or
| | 02:18 | just the copyright information, the
Copyright and Contact information,
| | 02:22 | everything except the camera
information that I showed you, or all the
| | 02:25 | information that's in that File Info dialog box.
| | 02:28 | Generally I just include copyright and
contact information. I'm happy with the
| | 02:32 | fact that that hasn't increased the
file size, so I'm going to accept that and
| | 02:36 | all the other settings here and click Save
to open the Save Optimized As dialog box.
| | 02:42 | I am going to save this file on my
Desktop, and I'm going to go to the format
| | 02:46 | area and save not only the image, but
also some simple HTML code, and I'll
| | 02:51 | click Save. Now I'm going to go out
to the Desktop, where I'll see what
| | 02:55 | Photoshop has saved. Here's an HTML
file, and here is an images folder. If I
| | 03:00 | open the images folder, there is the
JPEG. I'm going to open that JPEG in
| | 03:04 | Photoshop. I see the copyright symbol
here in the title bar in Photoshop, and
| | 03:09 | that appears because I chose
Copyrighted as the Copyright Status back in the
| | 03:14 | File Info dialog box in the source
file. I'd like to see what's in the File
| | 03:18 | Info dialog box in this JPEG copy of the file.
| | 03:21 | So with the JPEG selected here, I'm
going to go up to the File menu and down to
| | 03:25 | File Info, and I can see that in the
IPTC Contact tab, I do have the contact
| | 03:31 | information. And if I go back to the
Description tab, I can see that I have the
| | 03:35 | Document Title, and the Author, and
the copyright information. And in the
| | 03:39 | Description tab the JPEG retained to
the copyright information that I added to
| | 03:43 | the source file. But if I go to Camera
Data tab, none of that data is there,
| | 03:48 | because I chose only to save the Copyright
and the Contact information with the JPEG.
| | 03:53 | I am going to cancel out of this
dialog box, and I'm going to go out to my
| | 03:56 | Desktop again to show you the HTML file
that Photoshop created. I'll open that
| | 04:01 | in a Web browser, and this Web
browser is like most will show me the source
| | 04:05 | code. In Safari I'll go to the View
menu and down to View Source. Notice that
| | 04:09 | it saved the copyright information that
I added as a comment in the HTML code.
| | 04:14 | And the title that I gave to the photo
is now the title in the HTML code. So
| | 04:19 | that if I look back at the Web browser
I can see that title here at the top of
| | 04:23 | the Web browser window.
| | 04:24 | By the way I probably wouldn't use
that bit of HTML code in my final website,
| | 04:29 | but I might actually use it during the
development phase to show someone I'm
| | 04:32 | working how the image
would look in a Web browser.
| | 04:35 | So as you can see the new Metadata
menu in the Save for Web & Devices window
| | 04:39 | offers some useful options for saving
Copyright, Contact, and other information
| | 04:44 | with your web optimized images.
| | Collapse this transcript |
| Optimizing graphics as GIFs| 00:00 | GIF, some people say JIF, is an ideal
format in which to optimize graphics that
| | 00:06 | have a large areas of solid color,
like a logo, an illustration or text.
| | 00:10 | When you optimize a GIF, you will
try to make it as small as possible,
| | 00:13 | but keep it looking good.
| | 00:15 | I am starting here with this .PSD
file that's a Photoshop document file to
| | 00:19 | optimize it as a GIF for the web, I'll
choose File > Save for Web & Devices. In
| | 00:24 | the Save for Web & Devices Window, I'm
going to use the 2-Up tab this time. You
| | 00:28 | could use the 4-Up or the Optimize tab.
| | 00:31 | On the left side here is the original
PSD file and on the right side is a copy
| | 00:36 | of the file as it will look optimized
as a GIF with the settings that you see
| | 00:40 | over here on the right. And the most
important of those settings is also
| | 00:43 | displayed underneath the GIF preview
over here. This is telling me that at the
| | 00:47 | moment this GIF contains 32 colors. The
maximum number of colors that a GIF can
| | 00:52 | contain is 256. I'm going to go ahead
and change the number of colors in the
| | 00:57 | file to 256, so you can
see what that looks like.
| | 01:01 | I'll go to the Colors field up at the
top right, and I'll choose 256 from the
| | 01:05 | drop-down menu, and then in the Color
Table I can see all of the 256 colors
| | 01:11 | that are currently in this GIF preview.
There are many more colors than that in
| | 01:14 | the original PSD file, particularly
around the edges of objects like this blue
| | 01:18 | circle where there are multiple shades
of blue that help make the edge of the
| | 01:22 | circle look smooth, and the same is
true around the edge of the type here and
| | 01:26 | the other objects in the graphic.
| | 01:27 | When I optimize it as a GIF, all of
those colors are indexed down to the
| | 01:31 | limited number of colors here in the
Color Table. The main thing that you can
| | 01:35 | do to reduce the file size of the GIF
is to reduce the number of colors in it.
| | 01:39 | Right now this GIF with 256 colors will
be 16.78 kilobytes. I'd like to see if
| | 01:45 | I can get that number down. The
approach I usually take is to go up to the
| | 01:49 | colors field and start reducing the
number of Colors in the file by choosing
| | 01:53 | these presets. So I'll choose 128 and
I'll keep my eye on the file, it looks
| | 01:58 | good to me. Down here is see that I
have reduced the file size to 14.53
| | 02:03 | kilobytes, and I'll just continue to
do that in this menu, moving down to 64 colors.
| | 02:08 | I think that still looks good. I'll try
32, I'm still happy with that, and 16,
| | 02:15 | now at 16 I'm starting to see the image
degrade a little bit around the edge of
| | 02:19 | the black type, the blue circles and
the orange highway sign. I'm seeing some
| | 02:24 | jagged edges.
| | 02:26 | So I probably wouldn't take it down
this far. But just to show you how this
| | 02:29 | works, I'm going to take the Colors
all the way down to 2, and as you can see
| | 02:33 | almost everything goes away, because
there are now only two colors here, green
| | 02:38 | and black. And here's how the graphic
looks with only 4 colors, with 8 colors
| | 02:42 | it's getting a little better. Although
you can see that the orange of this sign
| | 02:45 | is gone, because there is no orange in
the Color Table. So I think that 32 was
| | 02:50 | the best choice here. I'll go
back to 32 Colors in this file.
| | 02:54 | Now my file size is 11.12 kilobytes.
Another thing that I can do to try to
| | 02:58 | reduce the file size is to go to the
Dither field and reduce the amount of
| | 03:02 | Dither. Dithering is the computer's
attempt to simulate a color that isn't here
| | 03:07 | in the Color Table. Dithering can make
some images look better, particularly if
| | 03:11 | there are gradual transitions between
colors, like a gradient for example. But
| | 03:15 | dithering often increase file size. So
I'm not just going to reduce the Dither
| | 03:20 | here, I'm actually going to turn it off
all together from this menu right here,
| | 03:23 | I'll choose No Dither, and I can see
that I have reduced the file size even
| | 03:27 | further by doing that, and I think
the image still looks pretty good.
| | 03:30 | Another thing I can do to bring file
size down in a GIF is to go to the Lossy
| | 03:34 | field and add a little bit of Lossy
compression. I'll click the arrow to the
| | 03:37 | right of the Lossy field and I'll pull
the Lossy slider up a bit. I don't want
| | 03:41 | to go too far with Lossy compression
or the image will degrade. That choice
| | 03:46 | reduces the file size even
further. Now I'm under 10 kilobytes.
| | 03:50 | Another thing that I can try in order
to reduce the size of this GIF is to
| | 03:54 | change the color reduction palette
right up here, which basically is a formula
| | 03:59 | that determines which colors, in this
case, which 32 colors will populate the
| | 04:04 | Color Table. The Selective color palette,
which is currently selected, is very
| | 04:08 | similar to the Perceptual
and the Adaptive palettes.
| | 04:11 | All three of those look at the original
source image and select colors from the
| | 04:14 | image, but each one by using a
different formula. The best approach here is
| | 04:18 | just to try each one and see which
one creates a smaller file with the best
| | 04:22 | appearance. So right now it's set to
Selective and my file is 9.402K. If I try
| | 04:29 | Perceptual, I see that the file size
decreases further. Now it's 9.115K, and it
| | 04:35 | still looks good. Let's try Adaptive,
and that actually reduces the file size
| | 04:39 | the most, down to 8.945K. Before I
leave this menu, I want to show you one more
| | 04:45 | menu choice here, and
that's the Restrictive palette.
| | 04:48 | Watch what happens when I choose this.
I've actually lost so many of the
| | 04:53 | original colors that I can't see some
of the objects in my optimize GIF. What
| | 04:57 | the Restrictive palette does is shift
the colors in the original file to web
| | 05:02 | safe colors, and in the Color Table
you can see that all these colors are web
| | 05:05 | safe, because they have a small
diamond in their center. So the Restrictive
| | 05:10 | palette is not the right choice here,
and in many cases it's not the right
| | 05:14 | choice. I generally stick with the
Selective, Adaptive or Perceptual palettes.
| | 05:19 | So now I have an image that's less than
9 kilobytes. So I click the Save button
| | 05:24 | and the Save Optimized As dialog box,
I'll Save to my Desktop, and I'm just
| | 05:28 | going to Save Images Only. I'll click
the Save button, and then I'm going to go
| | 05:32 | out to my Desktop to find the GIF that
I just created. I'm going to open that,
| | 05:36 | and in Photoshop, I'm going to go to
the Arranged Documents menu and choose
| | 05:40 | this 2-Up view, so that I can compare
the GIF on the right to the original
| | 05:44 | image on the left. I think this GIF
looks quite good, it's certainly is much
| | 05:48 | smaller, and it's in a
format that can be viewed online.
| | 05:52 | So those are some techniques for
optimizing a graphic as a GIF. Start with an
| | 05:56 | image that has large areas of flat
color, reduce the number of colors in the
| | 05:59 | GIF, try reducing the amount of
dithering and adding some lossy compression to
| | 06:04 | get the GIF as small as
possible, but keep it looking good.
| | Collapse this transcript |
| Locking GIF colors| 00:00 |
There will be times when you are
converting a graphic to a GIF and you want to
| | 00:04 |
retain the original colors from the
graphic. For example, let's say that this
| | 00:08 |
is a company logo and these are the
corporate colors and you need to match
| | 00:11 |
these colors when you put the logo
online. Here's how you can do that.
| | 00:15 |
I am going to go to the File menu at
the top of the screen, and down to Save
| | 00:18 |
for Web & Devices. I'm going to use
the 2-Up view to optimize this image. On
| | 00:23 |
the right is my preview of the image as
a GIF; on the left is the original. At
| | 00:27 |
the bottom of the preview I see that I
currently have 128 colors in this GIF,
| | 00:31 |
and that the file is
pretty big, over 22 kilobytes.
| | 00:35 |
I would like to get the file size down.
I know that the main way to reduce file
| | 00:38 |
size in a GIF is to reduce the number
of colors. So I'll come up to the Colors
| | 00:42 |
field here, I'll click, and I'm
going to see how this looks with only 64
| | 00:46 |
colors. Most of it looks okay, but
the stripe here at the top has lost its
| | 00:50 |
color. Instead of the light green that
was in the original, it's a dotted light
| | 00:54 |
blue. Those dots are dithering, which
is Photoshop's attempt to simulate a
| | 00:58 |
color that's not currently in
the color table of 64 colors.
| | 01:02 |
I could try to fix that by turning
off Dithering. I'll go to the menu Label
| | 01:06 |
Diffusion, and I'll choose No Dither.
But now, although I don't have dithering
| | 01:10 |
in that stripe, it has shifted color
and it's not the original green. In
| | 01:14 |
addition to that, if I look at the
file size, I see that the file is still
| | 01:18 |
pretty big. So I actually need to
reduce the colors even further. Let's try
| | 01:22 |
that, I'm going to go to the Colors
field and I'll choose 16 colors. Now I see
| | 01:27 |
that not only that top stripe, but all
their stripes have shifted color. What
| | 01:31 |
can I do to fix that?
| | 01:32 |
I can try using the Lock feature on the
Color Table, and here's how that works.
| | 01:37 |
I'm going to go back to the Colors
field and set it back to 128 colors so that
| | 01:42 |
all three stripes match the original.
Then I'm going to move over to the
| | 01:46 |
Abbreviated toolbox on the left side
of the Save for Web & Devices Window and
| | 01:50 |
select the Eyedropper. With the
Eyedropper, I'm going to move over at the green
| | 01:54 |
stripe and click on it. Over in the
Color Table, I see that light green
| | 01:58 |
highlighted, and I'm going to go to
the Lock icon under the Color Table and
| | 02:02 |
click it to lock down that color.
| | 02:04 |
I can see that it's locked because it
has a small square in the bottom right
| | 02:08 |
corner. I'm going to do the same with
all of the other major colors here.
| | 02:12 |
I'll click on the blue stripe with the
Eyedropper tool, and I click the Lock to lock
| | 02:16 |
it down in the Color Table. The purple
stripe, and lock it down. This orange
| | 02:22 |
background, I'll lock that down, this
yellow, I'll lock that down, the Beige,
| | 02:28 |
and lock that, the blue in the flowers,
and lock that. I'll even try to select
| | 02:33 |
the orange in this line art.
I'm going to zoom in to do that by pressing
| | 02:37 |
Command++, that's Ctrl++ on a PC, and
then with my Eyedropper I can get right
| | 02:43 |
in there and find that orange in the
line art, and I'll lock down. Then I'll
| | 02:48 |
zoom back out by pressing
Command+-, that's Ctrl+- on a PC.
| | 02:53 |
Now that I have the major colors
locked down, I'm going to try to reduce the
| | 02:56 |
number of colors in the file, again by
going to the Colors field and I'll try
| | 03:01 |
64 colors, and this time I haven't lost
any of the colors. I'll take this down
| | 03:05 |
even further to 32 colors, and the
colors are still true to the original.
| | 03:10 |
I'll try 16 colors, and I think the file
still looks all right. I'm losing a little
| | 03:15 |
bit in these orange outlines, but it's
not bad, and I have managed to reduce
| | 03:19 |
the file from over 22 kilobytes
when I started, down to 12 kilobytes.
| | 03:24 |
Over in the Color Table I can see that
all the colors that I have locked down
| | 03:27 |
are still there among the 16 colors
that are left. If I locked out a color that
| | 03:32 |
I really didn't want to retain, I could
always go back to the Colors field and
| | 03:36 |
switch back to a larger number of
colors, then come into the Color Table and
| | 03:40 |
click on the color I didn't want to
lock down, and then go to the Second panel
| | 03:44 |
menu in the Save for Web & Devices
Window, which is right over here to the
| | 03:48 |
right of the Color Table. From there
I could choose Lock or Unlock selected
| | 03:52 |
colors, or I could even unlock all
the colors. I'll just unlock that one
| | 03:56 |
selected color for now.
| | 03:57 |
And you can see that it no longer has
the little square indicating that it's
| | 04:01 |
one of the locked down colors, and
now I could try the whole process again
| | 04:04 |
using the Lock feature to control
exactly which colors are retained, as I map
| | 04:09 |
the many colors in the source file
over here, down to a limited number of
| | 04:13 |
colors in the GIF.
| | 04:15 |
| | Collapse this transcript |
| Optimizing graphics as PNGs| 00:00 |
PNG is another file format that you can
use to optimize images for the web.
| | 00:04 |
It comes in two flavors. PNG-8 is similar
to GIF. PNG-24 can retain soft edges on
| | 00:11 |
an object against the transparent
background. I'll show you how to optimize in
| | 00:15 |
both PNG formats in this movie.
| | 00:17 |
This image is a good candidate for
the PNG format, because it's made up of
| | 00:21 |
solid colors. I'm going to go to File >
Save for Web & Devices, and you can see
| | 00:26 |
that over here on the right, I have the
same image optimized as a GIF. I've got
| | 00:31 |
the number of colors set to 32, the
Selective palette, and Dither is turned
| | 00:36 |
off. I would like to compare the
results of optimizing this as a GIF, to
| | 00:40 |
optimizing it as PNG. So I'm going to
click on the Preview on the left, which
| | 00:45 |
currently is set to show
the original .PSD source file.
| | 00:48 |
I'll move up to the Preset button and
from here I'm going to choose PNG-8, 128
| | 00:53 |
Dithered. The preset in this menu are
just collections of various optimization
| | 00:57 |
settings that you can use to get
started when you are optimizing an image. As
| | 01:01 |
you can see the Format menu is now set
to PNG-8, I'll set the number of colors
| | 01:06 |
to 32, and I'll turn off Dither, and
now these settings match the settings that
| | 01:12 |
I've chosen for the GIF on the right.
There is one difference between the
| | 01:15 |
available PNG-8 settings and the
available GIF settings, and that is that PNG-8
| | 01:20 |
does not offer the opportunity
for lossy compression that GIF does.
| | 01:25 |
Now I'm going to compare the two images.
I think they both look pretty much the
| | 01:29 |
same, but if you look down at the
bottom left of each image, you'll see that
| | 01:33 |
the PNG-8 version is 9.122 kilobytes,
and the GIF version is actually bigger.
| | 01:38 |
It's almost 11 kilobytes. So in this
case PNG is the better choice. The lesson
| | 01:44 |
is that when you have an image made up
of areas of solid color like this one,
| | 01:48 |
it's worth trying both PNG-8 and GIF
optimization settings, because there are
| | 01:53 |
times when a PNG-8 will look just as
good, but be smaller in file size than a GIF.
| | 01:57 |
Now that's if you choose PNG-8 from
the Format menu. Notice that there is
| | 02:01 |
another choice here, PNG-24. I'm going
to cancel out of Save for Web & Devices,
| | 02:06 |
so that I can show you that on another
file. And that's this flowers2.PSD file.
| | 02:13 |
Here I have some soft edged flowers on
a transparent background. I'm going to
| | 02:17 |
zoom in using the Command++ or Ctrl++
shortcut. So you can that the edges of
| | 02:23 |
these flowers are made up of semi-
transparent pixels. Some of those edge pixels
| | 02:28 |
are more or less transparent than others,
and that's what makes the edges look
| | 02:32 |
soft and smooth.
| | 02:33 |
I would like to be able to retain
these semi-transparent edge pixels when I
| | 02:37 |
convert this file from a PSD file,
which does show multiple levels of
| | 02:42 |
transparency to a format that I can
display on the web. So I'm going to choose
| | 02:46 |
File, and go down to Save for Web &
Devices. The original PSD is up here, and
| | 02:52 |
down here I have my optimized preview,
which happens to be set to GIF right
| | 02:56 |
now. And as you can see it doesn't
look very good either at the soft edges or
| | 03:00 |
in this gradient here. So I'm going to
go over to the Format menu on the right
| | 03:04 |
and I'm going to change the format to PNG-24.
| | 03:08 |
Now the image looks really good, and if
I zoom in by pressing Command++ that's
| | 03:12 |
Ctrl++ on the PC, you can see that
even in the PNG preview, I do have
| | 03:17 |
semi-transparent edges on the flower.
The downside is that the file size is
| | 03:22 |
really big. It's over 60 kilobytes,
and that's often the case with PNG-24.
| | 03:27 |
Another drawback of PNG-24 is that
it's not recognized uniformly by all Web browsers.
| | 03:33 |
So if you do have an image like this
with a soft anti-aliased or feathered edge
| | 03:38 |
against a transparent background, you
can try PNG-24, but in many cases rather
| | 03:43 |
than settle for a large file that's
not going to be seen the same way in all
| | 03:47 |
Web browsers, you may be better off
trying the tricks that I'll show you for
| | 03:50 |
optimizing transparent GIFs, which
I'll be covering in an upcoming chapter.
| | 03:55 |
| | Collapse this transcript |
|
|
5. Making Web BackgroundsDesigning web backgrounds| 00:00 | Some of the images you'll create in
Photoshop will be displayed as webpage
| | 00:05 | backgrounds, rather than as foreground
images. A background image is a single
| | 00:09 | file that gets coded in the HTML code
of a webpage to repeat itself over and
| | 00:14 | over across and down the background
of a webpage in a viewer's browser.
| | 00:19 | So an image that starts out as a small
graphic in Photoshop like this can get
| | 00:24 | converted to a GIF or a JPEG, coded
with HTML and result in a background that
| | 00:29 | looks like this. Here you see that
small image I just showed you in Photoshop
| | 00:34 | repeating itself over and over across
the background of a page in my Safari
| | 00:38 | Web browser. The advantage of a file
being coded as a background image is that
| | 00:43 | the viewer's browser has to download
only one image file and that image file
| | 00:47 | can be pretty small to fill the
background of an entire webpage.
| | 00:50 | Before I show you how to create
background images for the web in the other
| | 00:54 | movies in this chapter, I would like to
bring up some design considerations for
| | 00:58 | you to keep in mind when you are
designing background images. One of those is
| | 01:01 | the size of the image. The smaller
the background image that you make in
| | 01:05 | Photoshop, the more times it will
repeat across the webpage and that will give
| | 01:09 | a very different look to the page. So
for example, here is a webpage background
| | 01:14 | made with the smaller version of
the same image that made this webpage background.
| | 01:18 | So when you are creating a source file
in Photoshop for a background, size your
| | 01:22 | image for the look that you had in mind.
The color of the background image is
| | 01:26 | also important. Try to stick with
colors that don't contrast with one another,
| | 01:30 | like this. Because a high contrast
image can be quite distracting when it's
| | 01:35 | repeated over and over, and it can
make it difficult to see and focus on
| | 01:39 | foreground elements that are
placed on top of it on a webpage.
| | 01:43 | Another design consideration is the
brightness of the background image. If you
| | 01:48 | plan to use dark foreground elements,
either text or objects like this, then
| | 01:53 | make a background image that's light.
If you plan on using light foreground
| | 01:57 | elements like this text, then you
don't want a light background as well,
| | 02:00 | because the foreground elements will be
hard to read. And the opposite is true too.
| | 02:04 | You can see in this example that
dark foreground elements are hard to read
| | 02:09 | on dark backgrounds, but light
foreground elements are easy to read.
| | 02:13 | And finally, try to stay away from
medium value background images, because
| | 02:17 | colors of almost any brightness value
will be hard to read against a medium
| | 02:21 | background. When you are designing web
backgrounds, choosing the right size,
| | 02:24 | color and brightness can have a big
effect on the way your page looks in a
| | 02:28 | viewer's browser. Keep these factors in
mind as you work through the movies in
| | 02:32 | this chapter, where you will learn how
to make different kinds of background
| | 02:35 | images in Photoshop.
| | Collapse this transcript |
| Optimizing a tiling background| 00:01 | Optimizing and tiling background image
is just like optimizing any web graphic,
| | 00:05 | except that you have the option to
preview the image repeating itself across
| | 00:09 | the Web browser. And when you save the
optimized image, you have the option to
| | 00:13 | tell Photoshop to write HTML code.
That's right. Photoshop will write code that
| | 00:18 | will cause the image to act
as a repeating background tile.
| | 00:21 | To show you how all that goes, I'll
start with this small PSD file, and I'll go
| | 00:25 | into the Save for Web & Devices
window by choosing File > Save for Web &
| | 00:29 | Devices. The preview on the
right is currently set to GIF.
| | 00:34 | I know this is going to optimize best
as a GIF or a PNG because it's flat art.
| | 00:38 | The file size is currently only 2.098
kilobytes. But I'm pretty sure I can get
| | 00:43 | this lower by reducing the
number of colors in the Colors field.
| | 00:47 | So just as I would normally do with a
GIF, I'll come to the Colors field, and
| | 00:51 | check each one of these presets until I
start seeing the image degrade which it
| | 00:55 | does at four colors.
| | 00:57 | So I'll increase the colors from 4 to
8. I'm also going to turn off Dither,
| | 01:02 | which usually results in a file
savings too, and now if I look at the size of
| | 01:06 | this image, it's only 1.431 kilobytes.
When this file is coded to repeat across
| | 01:12 | and down a page in a Web browser, the
entire page background will way in at
| | 01:16 | this small size.
| | 01:18 | So far, I haven't done anything
differently than I would normally do when
| | 01:21 | optimizing a GIF. But if I want to, I
can preview this image as a repeating
| | 01:25 | background tile in a Web browser.
| | 01:27 | I will have to set it up as a
background image, and to do that, I'll go to the
| | 01:31 | panel menu at the top right of the
window, and I'll choose this setting, Edit
| | 01:35 | Output Settings.
| | 01:37 | That opens this Output Settings
dialog box, and here I can specify some
| | 01:42 | properties of the HTML code that
Photoshop will write. For now, I'll leave that
| | 01:45 | at its defaults. I'm going to go up
to the Settings field, and I'm going to
| | 01:49 | choose Background Image, and then I'll click OK.
| | 01:53 | Now, if I come down to the Preview
button at the bottom of the screen, I'll see
| | 01:57 | a preview not of this single image,
but my Web browser will open and I'll see
| | 02:01 | my small graphic repeating itself
across and down the entire face of my Web
| | 02:07 | browser, and that's true no matter how
small I make the Web browser or how big
| | 02:11 | I can stretch it out.
| | 02:13 | The preview also shows some information
about the optimized image, and it shows
| | 02:17 | the HTML code that Photoshop has
written to preview the image here in my browser.
| | 02:21 | I am going to close the browser window
now, and I'm back in the Save for Web &
| | 02:25 | Devices window. If I'm satisfied with
the way the background looked in the Web
| | 02:28 | browser, I could save at this point, or
if there was something that I wanted to
| | 02:32 | change about the background, I would
click the Done button here, so that
| | 02:36 | Photoshop remembers the settings
I currently have in this window.
| | 02:40 | Then back in Photoshop proper, I could
change something about the file. I could
| | 02:43 | change its colors, or I could change
its size for example. To change its size,
| | 02:48 | I'm going to go to the Image menu at
the top of the screen and choose Image
| | 02:51 | Size, and there in the Pixel Dimensions
area, I'm going to reduce the Width of
| | 02:56 | the file. Maybe I'll make it 60 pixels,
and the Height is automatically reduced
| | 03:00 | to match, and I'll click OK.
| | 03:02 | Now, this graphic is smaller. So when
I go back to the File menu, and down to
| | 03:07 | Save for Web & Devices and preview
again in a Web browser, I'll get this
| | 03:11 | smaller background pattern in my Web browser.
| | 03:14 | So now, I'm done previewing and I'm
satisfied with this background. I'll close
| | 03:18 | the Web browser, and it's time to
save the optimized image. As usual, I'll
| | 03:22 | click the Save button here at the
bottom of the Save for Web & Devices window,
| | 03:26 | and that opens the Save Optimized As dialog box.
| | 03:29 | Now, I have a choice to make. I can
choose to save images only which will save
| | 03:33 | only the small single GIF, or I can
choose HTML and Images which tells
| | 03:39 | Photoshop to write HTML code that will
cause the GIF to repeat itself across a
| | 03:44 | web-page in a browser.
| | 03:45 | So I'm going to choose that and I'll
click Save. Now, I'm going to go out to my
| | 03:49 | Desktop to see what Photoshop made and
saved for me. I have two new items here.
| | 03:55 | One is this Images folder and
if I look inside the Images folder,
| | 03:59 | I see that I have a GIF.
| | 04:00 | I am going to open that GIF, and here
it is in Photoshop. If I go up to the
| | 04:05 | Arrange Documents menu, I'll choose
the 2-Up Tab, and I can see my GIF on the
| | 04:09 | right, and my original PSD file on the
left. I think the GIF looks pretty good.
| | 04:15 | I'm happy with that optimization job.
| | 04:17 | Now, I'm going to go back out to the
Desktop to take a look at that HTML file
| | 04:21 | that Photoshop wrote. I'll open that in
a Web browser and here in the browser,
| | 04:25 | I can see my small graphic tiling
across and down to fill the browser window.
| | 04:30 | I am going back to my Desktop for a
moment to show you the HTML file again and
| | 04:35 | emphasize that you don't have to use
this HTML file. The GIF that's saved along
| | 04:39 | with it here in the Images
folder is just like any other GIF.
| | 04:43 | You could bring this GIF alone into a
site building program like Dreamweaver
| | 04:47 | and create HTML code with
background image properties there. But having
| | 04:51 | Photoshop create this HTML file along
with the GIF, gives you a couple of options.
| | 04:57 | If you are working with a team, you
could give them the HTML file along with
| | 05:02 | this Images folder and its GIF, so
that they could see how the graphic would
| | 05:06 | look tiling across the page background,
or if you were making a simple web
| | 05:10 | page, you could bring this HTML code
along with the Images folder and its GIF
| | 05:15 | into a site building program, and use
it as a starting point to build out the
| | 05:19 | rest of the page.
| | Collapse this transcript |
| Building symmetrical background| 00:01 | You can take advantage of the fact
that a background image repeats itself or
| | 00:05 | tiles over and over in a page
background in a Web browser to create a
| | 00:09 | symmetrical background design from a
single image in Photoshop. This technique
| | 00:13 | makes use of the skills you've
learned in the last couple of movies about
| | 00:17 | designing and optimizing a
tiling web page background.
| | 00:20 | The basis for the symmetrical
background that I'm going to make is this small
| | 00:24 | icon, which is located on a transparent
layer in Photoshop. I'm going to start
| | 00:28 | out by expanding the canvas around this
icon, so that the icon sits squarely in
| | 00:33 | the middle of a slightly larger graphic.
I'll go up to the Image menu at the
| | 00:37 | top of the screen and down to Canvas
Size. In the Canvas Size dialog box, I'll
| | 00:42 | make sure that the Anchor is set in
the middle of this diagram, and then I'll
| | 00:46 | go up to the Width field, and I'll set
the size of the graphic to 200 pixels in
| | 00:50 | Width, and 200 pixels in
Height, and I'll click OK.
| | 00:54 | I would like to fill in this
transparent area with white as my page background
| | 00:59 | color, and I'll do that on a separate
layer. To make a new layer underneath the
| | 01:03 | current layer, layer 1, I'll select
layer 1 in the Layers panel, and then I'm
| | 01:07 | going to hold down the Command key on
a Mac, or the Ctrl key on the PC, as I
| | 01:11 | come down and click the second icon
from the right at the bottom of the Layers
| | 01:15 | panel here, which is the Add New Layer
icon. I now have a blank layer too at
| | 01:20 | the bottom of the layer stack.
| | 01:22 | With that layer selected, I'm going to
set my foreground color in the toolbox
| | 01:26 | to white by pressing the D key on
the keyboard and then the X key on the
| | 01:30 | keyboard, and then I'll use the
shortcut for filling with the foreground color,
| | 01:34 | which is Option+Delete on a Mac, or Alt
+Backspace on a PC. I'm going to give
| | 01:40 | these layers some meaningful names.
I'll double-click on the layer 2 name in
| | 01:43 | the Layers panel, and I'll type bg for
background, and then click off. And I'll
| | 01:48 | double-click on the layer 1 layer name
in the Layers panel, and I'm going to
| | 01:52 | type corners, and you see why in a
moment when I start to make this pattern,
| | 01:56 | and I'll click off.
| | 01:58 | Next I'm going to copy the contents
of the corners layer, which is the blue
| | 02:01 | icon into my computer's clipboard. I'll
go to the Select menu at the top of the
| | 02:05 | screen and choose All, or I could just
use the keyboard shortcut Command+A on a
| | 02:10 | Mac or Ctrl+A on a PC, and then to
copy, I'll go to the Edit menu, and I'll
| | 02:16 | choose Copy, or use Command+C on a Mac
or Ctrl+C on a PC, and that copies the
| | 02:22 | contents of the selected corners layer.
| | 02:25 | Now I want to eliminate this border of
marching ants. So I'll go to the Select
| | 02:29 | menu again, and I'll choose Deselect,
and the shortcut for that is Command+D on
| | 02:34 | the Mac, or Ctrl+D on a PC. You may
not like to use shortcuts, but if you are
| | 02:38 | going to remember any, those are some
to remember because they are used so often.
| | 02:43 | Now I'm going to use a filter. With the
corners layer selected I'm going to go
| | 02:47 | to the Filter menu at the top of the
screen, and down to Other, and over to
| | 02:51 | Offset. I'm going to set some options
in the Offset dialog box. First I'll set
| | 02:56 | undefined areas to wrap around, and
then I'm going to go to the Horizontal
| | 03:00 | Offset field, and I'm going to type
100 there and I'll also type 100 in the
| | 03:05 | Vertical Offset field, and I'll click OK.
| | 03:08 | And that has started the symmetrical
pattern for me. If you remember, I copied
| | 03:12 | that icon a few moments ago and I
still have that copy in my computer's
| | 03:16 | clipboard. So I'm going to paste that
down into the center of this image, by
| | 03:20 | going to the Edit menu and choosing
Paste. Now I have a copy of the icon in the
| | 03:25 | middle of the image again, and I have
a new layer in the Layers panel, which
| | 03:29 | I'm going to rename, Center,
and I'll click off of that.
| | 03:33 | So this is the graphic that's going
to repeat itself across my web page
| | 03:37 | background creating a symmetrical
pattern. To set this up as a tiling
| | 03:40 | background, I'll go into the File menu,
and down to Save for Web & Devices.
| | 03:45 | I'll go over to the panel menu at the
far right of the Save for Web & Devices
| | 03:49 | window, and choose Edit Output Settings.
And here I'm going to tell Photoshop
| | 03:55 | that I want this image to be a
background image, by going to the Settings menu
| | 03:59 | and choosing Background
Image, and then I'll click OK.
| | 04:02 | Now I'll come down to preview the
results by clicking the Preview button here
| | 04:06 | at the bottom of the Save for Web &
Devices window, and that opens my Web
| | 04:10 | browser showing me a preview of my
repeating symmetrical background, and I also
| | 04:15 | get a preview of some information
about the optimized GIF that I have just
| | 04:19 | created, and about the HTML code.
| | 04:22 | The purpose of previewing is to see
if there is anything you would like to
| | 04:24 | change about the image, and there are
a couple of things that I would change
| | 04:27 | here. First of all I think I would make
the blue icon a little lighter, so that
| | 04:32 | it's not as contrasting with the
white background, and therefore doesn't
| | 04:35 | distract too many foreground images I
might want to add to it. And I can see
| | 04:39 | here in the information about the
optimized file. That it is 4.2 kilobytes and
| | 04:44 | contains 128 colors.
| | 04:45 | I would like to change that color
optimization setting, so that I can try to
| | 04:49 | get the file size down here. So I'm
going to close my Web browser preview, and
| | 04:54 | I'm back in the Save for Web &
Devices window. Here I'm going to click to
| | 04:57 | activate the window, and then I'm
going to press Done, so that Photoshop
| | 05:01 | remembers the settings that I currently
have, and that closes the Save for Web
| | 05:05 | & Devices window and brings me back
out here to Photoshop proper. Here I'm
| | 05:10 | going to change the color of the blue
icon. With the center layer selected, I'm
| | 05:15 | going to click on the Eye Dropper tool
in the toolbox, and then I'm going to
| | 05:18 | come in and click on top of the blue
on one of the icons in my graphics. That
| | 05:23 | sets the foreground color to that blue.
| | 05:25 | I am going to click in that foreground
color to open the Color Picker, and in
| | 05:30 | the Color Picker I'm going to choose F
for Saturation, then I'm going to drag
| | 05:34 | down in this vertical slider to choose
a less saturated version of light blue.
| | 05:39 | I think this will be less contrasting
against the white background. So I'll
| | 05:43 | click OK, and now I want to fill the
icon on the center layer with that color.
| | 05:49 | I don't want to fill the entire layer.
So I'm going to click the pixel lock
| | 05:52 | right here, and then I'll press the
shortcut for filling with the foreground
| | 05:56 | color, which is Option+Delete on the Mac,
Alt+Backspace on the PC, and I'll do
| | 06:01 | the same to the corners layer. I'll
select it in the Layers panel, click the
| | 06:05 | Lock Transparency icon, and
press Option+Delete or Alt+Backspace.
| | 06:09 | Now I'm going to go back into the
Save for Web & Devices window by choosing
| | 06:13 | File > Save for Web & Devices. Now
that I have re-colored the graphic, making
| | 06:17 | it less contrasting, I'm also going to
try to lower the file size here by going
| | 06:23 | up to the Colors menu and reducing
the number of colors in the file. I'd
| | 06:27 | imagine I can go as low as perhaps as
8 colors here, and I see that the file
| | 06:31 | still looks good, but it's much reduced
down to 1.981 kilobytes. I'm satisfied
| | 06:36 | with that, so I'm going to click the
Save button, and in the Save Optimized As
| | 06:40 | dialog box, I'll make sure that I have
navigated to my desktop, and I'm going
| | 06:44 | to make a new folder there. I'll
call this one sym bg for symmetrical
| | 06:50 | background, and I'll click Create.
Then I'll go to the Format menu, and I'm
| | 06:54 | going to choose HTML and Images from
this menu, so that Photoshop not only
| | 06:58 | saves an optimized GIF for me, but
also writes some HTML code that will make
| | 07:03 | this GIF repeat as a page
background in a Web browser.
| | 07:06 | I'll click Save, and then I go out to
my Desktop to see what Photoshop made.
| | 07:11 | There is my sym bg folder, I'm going
to look inside that folder, and there I
| | 07:15 | see an HTML file, as well as an Images
folder. Inside the Images folder is a
| | 07:21 | GIF. I'll open the GIF so you can see
that it is my pattern tile that I just
| | 07:26 | made. Then I'll go back to my desktop,
look inside the sym bg folder again, and
| | 07:31 | I'm going to open that pattern1.html
that Photoshop wrote for me. And that will
| | 07:36 | open the HTML file with my
symmetrical page background in a Web browser.
| | 07:41 | This entire background was made from
that one small file. So that's how you can
| | 07:46 | make a symmetrical patterned
background for a webpage, using just one small
| | 07:50 | image that will download quickly to
your viewer's browser, and repeat itself to
| | 07:54 | fill the entire page background.
| | Collapse this transcript |
| Building a striped background| 00:00 | Because a background image will repeat
itself over and over in a viewer's Web browser,
| | 00:04 | you can make some really fun
striped backgrounds using small graphic
| | 00:08 | files like the one that you see here.
This is just a horizontal file that I
| | 00:12 | filled with areas of color. I used the
Rectangular Marquee tool to come in and
| | 00:17 | select areas like this, and then to
fill the selection with the foreground
| | 00:21 | color. So I'm just going to press the
Option+Delete key on my Mac to fill with
| | 00:25 | color, that's the Alt+Backspace key on
a PC, and then I'll press Command+D on a
| | 00:30 | Mac or Ctrl+D on a PC to remove that
selection, and now I have another little
| | 00:35 | bar of color there.
| | 00:36 | I am going to optimize this image for
the web by going to the File menu and
| | 00:40 | down to Save for Web & Devices. As I
have shown you in other movies in this
| | 00:44 | chapter, I'm going to try to reduce
the number of colors in the file by going
| | 00:47 | to the Colors field here and choosing
a lesser number of colors. I'll try 32
| | 00:52 | colors. I could spend more time
reducing the file size even further, but I'm
| | 00:56 | going to leave that for now. And my
next step is to designate this image as a
| | 01:00 | repeating background. As I have shown
you in other movies, I'm going to go to
| | 01:04 | the panel menu at the top right of the
screen, choose Edit Output Settings, and
| | 01:08 | there change the Settings menu
to Background Image, and click OK.
| | 01:13 | Now comes the fun part, which is
previewing this image in a Web browser.
| | 01:16 | I'll go to the Preview button at the bottom
of the Save for Web & Devices windows,
| | 01:20 | click there, and you can see that that
small graphic file is filling my entire
| | 01:24 | Web browser with this nice striped
pattern. But that's not all; I would like to
| | 01:29 | show you a couple of variations on this
pattern. I'm going to close out of the
| | 01:32 | Web browser, click inside the Save for
Web & Devices window to activate it, and
| | 01:37 | click the Done button.
| | 01:39 | Back here in Photoshop I'm going to
turn this bar on its head, by going to the
| | 01:44 | Image menu and down to Image Rotation,
and over to 90 degrees clockwise. And
| | 01:49 | now I have a vertical bar rather than
a horizontal bar, and that's going to
| | 01:52 | completely change the orientation of
the stripes in my browser background.
| | 01:56 | I'll go to the File menu again, and back to
Save for Web & Devices. I still have all
| | 02:01 | the settings that I chose a moment ago,
so all I have to do is preview the file
| | 02:05 | by clicking the Preview button. And
as you can see I now have horizontal
| | 02:09 | stripes, rather than vertical as the
page background in this Web browser.
| | 02:13 | I am going to close the Web browser
one more time to show you one more
| | 02:16 | variation on this theme. I'll click
back in Save for Web & Devices, and this
| | 02:20 | time I'll just cancel to go back to
Photoshop. I'm going to set my foreground
| | 02:24 | color to a little bit darker color so
that you can see what I'm about to do
| | 02:28 | more clearly, and then in the toolbox
I'm going to click on the Brush tool and
| | 02:32 | select the Pencil tool. With a small
Pencil tool, I'm going to come in and I'm
| | 02:36 | just going to draw some squiggly lines
across some areas of this bar. And then
| | 02:45 | I'm going to go back and get my Brush
tool, and I'm going to open the Brushes
| | 02:49 | panel from the Window menu at the top
of the screen. The Brushes panel offers
| | 02:54 | lots and lots of options, for
different Brush Sizes, and brush tips, and
| | 02:59 | different ways of painting.
| | 03:00 | I am going to do something really
simple here, which is to stick with a very
| | 03:03 | small hard brush, this 5 pixel brush,
click on Brush Tip Shape to activate the
| | 03:08 | settings down here, and then I'm going
to go to the Spacing slider, and drag it
| | 03:12 | to the right. Keep your eye on that
Preview bar at the bottom of the screen
| | 03:16 | which is showing me how this brush is
now going to paint, and as you can see,
| | 03:20 | it's now going to paint with dotted
lines. So with that brush I'll come back
| | 03:24 | into my image, and I'm just going to
drag across the bar in a few places to add
| | 03:29 | some dotted lines. There are so
many brushes to play with here.
| | 03:33 | I will try one more. This Oblique
brush down here. I'll select to that, and
| | 03:37 | then move its Spacing slider over
until I see some dots, and then I'll come
| | 03:41 | into the image, and I need to make my
brush smaller, so I'm going to press the
| | 03:45 | Left Bracket key on the keyboard.
That's the key right next to the P key. When
| | 03:49 | that's small enough, I'll come in
and draw with that Oblique brush.
| | 03:53 | I'll leave it that for now, but I urge
you to experiment with the brushes. Now
| | 03:57 | I'm going to go back to the File menu
and down to Save for Web & Devices and
| | 04:01 | I'm going to preview one more time.
And you can see that all of these
| | 04:05 | interesting little effects have been
added to my stripes. I'm going to save
| | 04:09 | this background now by going out of the
browser again, and in the Save for Web
| | 04:14 | & Devices window, and clicking the Save button.
| | 04:17 | Here in the Save Optimized As dialog
box, I'm going to make sure that I have
| | 04:21 | navigated to my desktop, and I'll
click on the New Folder button, and I'll
| | 04:25 | create a new folder called striped bg.
I'll make sure that the Format is set to
| | 04:30 | HTML and Images, so that Photoshop
writes that HTML file that's going to repeat
| | 04:35 | this background image across a Web
browser, and then I'll click Save.
| | 04:38 | I will go out to the Desktop again and
look inside the striped bg folder, where
| | 04:43 | I'll find the Images subfolder with
the stripes.gif and stripes.html, which
| | 04:48 | Photoshop wrote for me. I'm going to
open stripes.html in a Web browser, and
| | 04:53 | now you can see the full effect of
the horizontal stripes that I just made.
| | 04:57 | If you are a fan of striped webpage
backgrounds, I hope that you give this
| | 05:00 | technique a try. Backgrounds like this
are quick to make in Photoshop, and it's
| | 05:05 | quick to download in the viewer's browser.
| | Collapse this transcript |
| Using a full-screen background| 00:01 | If you want to make a full screen background
that appears to fill a viewer's browser,
| | 00:04 | you have a couple of challenges.
First of all, when you code an image
| | 00:08 | as an HTML background image, it will
always repeat or tile as I have shown you
| | 00:13 | in other movies.
| | 00:14 | So if your goal is a full screen
background that fills a viewer's browser,
| | 00:18 | but doesn't appear to repeat, then you
have to make the dimensions of that image
| | 00:22 | larger than the viewer's browser window.
| | 00:25 | The problem is you can't control the
resolution at which a viewer sets his or
| | 00:29 | her monitor, and you can't control
whether the viewer stretches his or her
| | 00:33 | browser to the full resolution of the screen.
| | 00:36 | So for example, let's say that you
create a background file that's 1024x768
| | 00:43 | pixels, and a viewer has a monitor
that he or she has set to that screen
| | 00:49 | resolution, 1024x768. If, but only if,
that viewer has pulled the browser
| | 00:55 | window out to fill the entire screen,
then that viewer will see the entire graphic.
| | 01:00 | If he or she hasn't stretched her
browser window out that far, she will only
| | 01:04 | see part of the background graphic.
And if another viewer has his or her
| | 01:08 | monitor set to 800x600 resolution,
then that viewer won't see the entire
| | 01:12 | graphic either.
| | 01:13 | At the other end of the spectrum, a
viewer may have a really big monitor like a
| | 01:17 | 30-inch Apple Cinema Display set to
high resolution. If you have designed a
| | 01:22 | full screen graphic for a lower
resolution than that, your background will
| | 01:25 | repeat. So what's the solution to
all of these different situations?
| | 01:29 | The best you can do is to do some
market research and try to determine the
| | 01:33 | maximum monitor resolution at which
your particular viewers are likely to view
| | 01:37 | your website. Then design your full
screen background to be slightly larger
| | 01:42 | than those dimensions. And don't'
forget to checkout how the design will look
| | 01:46 | at a lower resolution too.
| | 01:48 | If you have access to the exercise
files for this course, there is a file there
| | 01:52 | that will help you to see how your full
screen graphics may look in browsers of
| | 01:57 | different sizes. If you don't have
access to the Exercise Files, you can make
| | 02:00 | your own version of this file.
| | 02:02 | Let me show it to you. It's here. It's
called browser_sizes.PSD. If you wanted
| | 02:07 | to make your own file like this, you
would create a new transparent file of
| | 02:11 | 1024x768 pixels, and you would use
your rulers and guides to measure out 480
| | 02:18 | pixels from the top and 640 pixels
from the left side, and a couple of other
| | 02:23 | lines at the other dimensions that you
see here, and then use the Pencil tool
| | 02:28 | to draw in these lines.
What can this file do for you?
| | 02:31 | Well, if you have a full screen
graphic that you have designed like this one,
| | 02:35 | bigstripes.PSD, I'm going to go to the
Arrange Documents menu which is in the
| | 02:40 | application bar on a Mac, and in the
menu bar on a PC. From that menu, I'll
| | 02:45 | choose the 2-Up View.
| | 02:46 | Then I'm going to bring browser_sizes.
PSD into my bigstripes.PSD graphic. To do
| | 02:53 | that, I'll make sure that the Move
tool is selected in the toolbox, and I'll
| | 02:57 | click on browser_sizes.PSD to make
sure that's activated, and I'll make sure
| | 03:02 | that the single layer in that file is
selected as well. Then I'm going to click
| | 03:07 | in browser_sizes.PSD, hold down my
Shift key, and drag and then release my
| | 03:13 | mouse when I'm over bigstripes.PSD,
and then release the Shift key.
| | 03:18 | Now, I'm going to close browser_sizes.
PSD, and I can see that I have the two
| | 03:23 | files together. The various dimensions
are on the top transparent layer, the
| | 03:27 | resolutions layer, and the image is on
the background layer below. What these
| | 03:31 | lines are showing you is how much of
this particular full screen graphic a
| | 03:35 | viewer would see in a browser set to
view 640x480 pixels or 800x600 pixels, or
| | 03:43 | 1024x768 pixels.
| | 03:46 | To show you that more clearly, I'm
going to click on the Tab of this document
| | 03:49 | and drag out of the application frame,
so the document is floating free. Then
| | 03:53 | I'll go down to the bottom-right
corner and I'm going to drag in, so that you
| | 03:57 | can see that at 800x600 pixels for
example, this is the amount of this
| | 04:02 | particular full screen background
graphic that a viewer would see.
| | 04:05 | If a viewer had a particularly small
monitor, 640x480, then this is how much of
| | 04:12 | the full screen graphic he or she would
see. Although these days that's pretty
| | 04:16 | small for a monitor. I'll
pull that all the way out again.
| | 04:19 | Let's say that I'm satisfied with the
way this full screen graphic will look at
| | 04:23 | all the different resolutions that a
viewer might use. Then I would go ahead
| | 04:27 | and optimize this PSD file for the web.
| | 04:29 | First, I would make this Resolutions
layer invisible by clicking the Eye icon
| | 04:33 | to its left, and then that layer won't
be included in the optimized file. Then
| | 04:38 | I'll go to the File menu at the top
of the screen, choose Save for Web &
| | 04:41 | Devices, and I'm going to optimize this
big graphic just like I would any other
| | 04:46 | GIF, as I have shown you how to
do in other movies in this chapter.
| | 04:49 | This is a GIF preview down here. I
can see that it's pretty big right now,
| | 04:53 | 20.24 kilobytes. To get it smaller,
I'm going to go up to the Colors field in
| | 04:57 | the Controls on the right-hand side of
the window, and I'm going to reduce the
| | 05:01 | number of colors here. I'll try 16.
I'll go down to 8. I think I might even be
| | 05:08 | able to get away with 4 colors in
this image, and yes it still looks good.
| | 05:12 | I am going to turn off Dither, and
I'm going to add a little bit of lossy
| | 05:16 | compression, and I have been able to
get the file down to 13.59 kilobytes. Now,
| | 05:22 | what I want to do is to set the file up
to be a background image. So I'm going
| | 05:26 | to go to the panel menu at the top-right
of this window, and choose Edit Output Settings.
| | 05:31 | I will go to the Settings menu, and
I'm going to choose Background Image, and
| | 05:36 | click OK. Then I'll save the optimized
file. I'll make sure I have navigated to
| | 05:41 | my desktop and there I'm going to
create a new folder, which I'll call fullbg
| | 05:47 | for full background. Click Create.
| | 05:50 | Make sure that Format is set to HTML
and Images, so that Photoshop writes an
| | 05:55 | HTML file for me that codes this
image as a background image, and then I'll
| | 05:59 | click Save. I'm going to go out to my
desktop, and there is my fullbg folder.
| | 06:04 | I'll look inside, and inside is
bigstripes.html as well as an Images folder
| | 06:10 | containing the optimized GIF.
I'm going to open bigstripes.html in my default
| | 06:15 | browser. To show you what this full
screen graphic will look like on my screen,
| | 06:19 | which happens to be set to 1024x768.
| | 06:23 | You will notice that part of the
graphic is cut off at the bottom, and that's
| | 06:26 | because as in almost any browser, there
are some browser elements up here that
| | 06:31 | take up some of that space.
| | 06:33 | So the trick when you are designing a
background that you want to fill your
| | 06:36 | viewer's entire browser window is to
make it big enough, so that it won't
| | 06:39 | repeat on any of your target viewers'
screens, and to come up with a design
| | 06:44 | that you think is acceptable when
viewed at various browser sizes.
| | Collapse this transcript |
|
|
6. Optimizing Transparent GraphicsUnderstanding transparency| 00:00 | A transparent web graphic is an image
surrounded by transparent pixels,
| | 00:05 | like the one that you see here. The
gray and white checkerboard represents
| | 00:08 | transparency in Photoshop. When a
graphic like this one is placed on a website
| | 00:13 | the page background will show through
the transparent areas of the image, so
| | 00:17 | that the graphic doesn't appear rectangular.
| | 00:19 | The advantage of using transparent
graphics is that they offer visual interest
| | 00:23 | in a web environment that really is
dominated by rectangularity, in the shape
| | 00:27 | of browser windows, in many of the
rectangular page layouts that you see out
| | 00:31 | there and particularly in web graphics
which are inherently rectangular unless
| | 00:36 | you optimize them with transparency
using the techniques that you will learn in
| | 00:39 | this chapter. Take a look at the edges
of the graphic in this PSD file and you
| | 00:44 | will see that they look
really smooth, when viewed at 100%.
| | 00:48 | To show you how that's done, I'm
going to turn that black layer back on by
| | 00:52 | clicking the Eye Icon to its left in
the Layers panel and then I'm going to
| | 00:55 | come in and zoom in on the image by
pressing Command++ or Ctrl++ on the PC and
| | 01:01 | then I'm going to hold down the
Spacebar to temporarily change to the Hand tool
| | 01:05 | and move that image up.
| | 01:06 | And you can see that the edges of the
purple graphic and the yellow graphic and
| | 01:10 | the orange graphic are all made up of
small squares of color. However, when
| | 01:15 | viewed back at 100% you don't see these
squares of color, instead you see what
| | 01:19 | appears to be a smooth edge and the
reason is that these edge pixels are filled
| | 01:24 | with varying levels of Opacity.
| | 01:26 | So for example, on the yellow part
here you can see that some of the yellow
| | 01:30 | pixels are opaque, you cannot see
through them and others are semi-transparent
| | 01:36 | and some are more semi transparent than
others as they move out toward the edge
| | 01:40 | of the graphic.
| | 01:41 | By the way that's what the Anti-
aliasing is, if you heard that word. It's a
| | 01:45 | gradual falloff of semi-transparent
pixels that makes the edge of pixel based
| | 01:50 | graphic look smooth. A PSD file like
this one supports this kind of multi-level
| | 01:55 | transparency and that's why graphics
like this can look smooth in the PSD
| | 02:00 | source file.
| | 02:01 | But what happens when I convert this
source file format, this PSD file to a
| | 02:05 | Web-ready format, like GIF or PNG-8.
In that case the edge won't have
| | 02:10 | semi-transparent pixels because
those formats don't allow multi-level
| | 02:14 | transparency. To illustrate what I
mean, I'm going to go over to the Layers
| | 02:18 | panel and turn off that black layer,
so that once again I have a transparent
| | 02:22 | graphic or a graphic with a
transparent surrounding area.
| | 02:26 | Then I'm going to go to the File menu
and down to Save for Web & Devices. In
| | 02:30 | the Save for Web & Devices window I'll
use the 2-Up tab so that on the left I
| | 02:34 | can see the original PSD file with this
smooth edged graphic and on the right I
| | 02:39 | can see a preview of the image as
it will look optimized for the web.
| | 02:44 | Right now this is set to GIF. Let's see
what happens if I change the format of
| | 02:47 | the optimized preview to JPEG.
Right away I lose the gray and white
| | 02:51 | checkerboard, which means that I no
longer have transparent pixels in this
| | 02:55 | image. That's because the JPEG format
doesn't support transparency at all.
| | 03:00 | Don't worry because I'll show you how
to simulate the look of transparency in a
| | 03:03 | JPEG in a separate movie in this
chapter. But if you really want a graphic to
| | 03:07 | have transparent pixels that allow you
to see through to the background behind
| | 03:11 | it, you can't use the JPEG
format. Well, what can you use?
| | 03:15 | If I go back to the Format menu and
I choose PNG-24, I get my transparent
| | 03:19 | pixels back and the edges of the
graphic look pretty smooth. But this isn't
| | 03:24 | terrific solution either, because
unfortunately although PNG-24 supports
| | 03:29 | multi-level transparency, much like the
original PSD file, that feature doesn't
| | 03:33 | work in all Web browsers. Beyond that
a PNG-24 usually makes really big files
| | 03:39 | from Photoshop.
| | 03:40 | So this isn't the solution either. The
better choice when you are optimizing a
| | 03:44 | transparent graphic is to optimize it
in the GIF or PNG-8 format. So I'm going
| | 03:49 | to go back to this menu and I'm going
to choose GIF. By the way, just assume
| | 03:53 | that what I'm showing you in this
chapter about GIF is also true of PNG-8.
| | 03:58 | So with the GIF format I do have
transparent graphics here, but take a look at
| | 04:03 | the edges and you can see that they are
really jaggedy. I'll zoom in closer so
| | 04:07 | you can see that by selecting the Zoom
tool and I'll click there and zoom in,
| | 04:11 | so that you can see that the edges of
the transparent graphics that's optimized
| | 04:16 | in the GIF format are really jaggedy.
Particularly as compared to the nice
| | 04:20 | smooth, semi-transparent
edges of the original PSD file.
| | 04:24 | Now I should mention that you won't see
transparency here at all if this box in
| | 04:30 | the GIF controls is not checked. So you
have to have that box checked, but you
| | 04:34 | still have the problem of the jaggedy edges.
| | 04:37 | The good news is that there is a way
around that and that's what I'm going to
| | 04:40 | show you in the movies to come in
this chapter, where you will learn how to
| | 04:44 | simulate smooth edged graphics by
adding a matte color from this field that
| | 04:49 | matches the webpage background that you
plan to use. And I'll even show you how
| | 04:53 | to make that work against a patterned
webpage background and when you are using
| | 04:58 | graphics that have soft
shadows or glows on them.
| | Collapse this transcript |
| Optimizing transparent graphics for solid backgrounds| 00:01 | When you optimize a transparent
graphic for the web, the trick is to make
| | 00:05 | its edge appear smooth rather than
jaggedy against a webpage background.
| | 00:09 | In this movie, I'll show you how to use
the Matte control in the Save for Web window.
| | 00:14 | To accomplish that, when you
are optimizing a transparent graphic as a
| | 00:17 | GIF to place against a solid color
webpage background. By the way, what I'm
| | 00:21 | going to show you here is also true
of the PNG-8 format, which is another
| | 00:25 | possible file format for
optimizing a transparent graphic.
| | 00:28 | The transparent graphic in this PSD
file has an Anti-Aliased edge that looks
| | 00:33 | smooth because it's made up of pixels
of varying levels of transparency as I
| | 00:37 | explained in the movie on understanding
transparency. I'm going to go into the
| | 00:41 | Save for Web & Devices window here to
optimize this file for the web.
| | 00:46 | I'll select the Zoom tool on the left side
of the window and zoom in so that you can
| | 00:50 | see the edges of the graphic more closely.
| | 00:52 | In the PSD file, you can see that the
edges have pixels of varying levels of
| | 00:57 | transparency and that's what makes the
PSD look smooth. But in the GIF preview
| | 01:01 | on the right, the edges of the
graphic are jagged. That's because the GIF
| | 01:05 | format doesn't support multi-level
transparency. Instead every pixel in the GIF
| | 01:10 | is either fully opaque like these
or fully transparent like these.
| | 01:14 | The challenge is to make the jagged edges look
smooth when placed against a webpage background.
| | 01:20 | I am going to set up a solid color
webpage background against which to preview
| | 01:24 | this image. To do that, I'm going to go
over to the box on the far left of the
| | 01:27 | Save for Web & Devices window that's
currently black. Yours may have a color in
| | 01:31 | it. I'm going to click that box
and that opens the Color Picker.
| | 01:35 | To get some color in this field on the
left, I'm going to go to the vertical
| | 01:39 | bar in the middle and drag the
sliders up until I start to see colors.
| | 01:43 | I'm going to click on an Aqua color, any
color will do and then with the S field
| | 01:48 | selected here, I'm going to drag the
vertical sliders down to get a less
| | 01:52 | saturated version of that blue. I'll
choose something like this. It doesn't
| | 01:56 | matter exactly what color you choose except
that in this example a light color works better.
| | 02:00 | I'm going to click OK
and that fills this box with
| | 02:04 | this light blue color.
| | 02:05 | This color we will call the eyedropper
color. The next step is to set up this
| | 02:09 | eyedropper color as a webpage
background. To do that, I'll go to this panel
| | 02:13 | menu at the top right of this Save for
Web & Devices window and from there I'll
| | 02:17 | choose Edit Output Settings.
I'm going to go to the second menu, the one
| | 02:21 | labeled HTML, and I'm going to choose
Background. That opens the Background
| | 02:25 | Settings. I don't want to view this
transparent graphic as a background graphic
| | 02:30 | or a repeating tile. So instead, I'm
going to choose View Document As Image.
| | 02:36 | And that tells Photoshop to preview
this image as a foreground graphic against
| | 02:40 | a webpage background.
| | 02:41 | I am going to skip over the Background
Image field here which only comes into
| | 02:45 | play if I'm going to use an image
file that's the source of my webpage
| | 02:49 | background, instead I would like to use
a Solid Color as my webpage background
| | 02:53 | that comes from instructions in an
HTML file. So I'm going to go down to the
| | 02:57 | Color field and I'm going to change
that from None which is the Default to
| | 03:02 | Eyedropper color which is the Aqua
color that I selected in the eyedropper
| | 03:06 | color box, over here.
| | 03:09 | And then I'll click OK. Now I'm going
to preview the optimized GIF with the
| | 03:14 | default settings against that light
blue background. By going to the Preview
| | 03:18 | button at the bottom of the screen,
clicking and that launches my default Web browser
| | 03:22 | where you can see the default graphic
against the light blue background.
| | 03:25 | If you look closely, you will see that
the edges of the graphic look jagged.
| | 03:29 | I'll zoom in so you can see that more
closely. That isn't the look that I want,
| | 03:33 | I would like these edges to look smooth.
To fix this, I'm going to go back to
| | 03:37 | the Save for Web & Devices window. I'll
close the Web browser and here in Save
| | 03:41 | for Web & Devices, I'll move over to
the GIF settings, I'll make sure that
| | 03:45 | Transparency is checked, so that I
retain these transparent pixels and I'm
| | 03:50 | going to go to the Matte field.
| | 03:51 | I am going to click the arrow on the
right side of the Matte field and change
| | 03:55 | it from None to Eyedropper color.
This is the same blue to which I set the
| | 04:00 | webpage background a moment ago. And
you can see now that the edges of the
| | 04:04 | graphic have filled in with that blue
color. Now when I preview, the blue edges
| | 04:09 | of the graphic blend perfectly with the
light blue background. I can zoom in to
| | 04:12 | show you that more closely and
that's exactly what I wanted.
| | 04:15 | So now that I'm satisfied with the
preview, I'll close the Web browser and I'll
| | 04:20 | come back to Save for Web & Devices to
save my optimized GIF. I could tweak the
| | 04:25 | other GIF settings to try to get the
file size down but I'm just going to leave
| | 04:29 | them for now and I'm going to click
the Save button at the bottom of the
| | 04:32 | window. Here at the Save Optimized
As dialog box, I'll navigate out to my
| | 04:37 | desktop, I'll create a new folder and I
call this one solid bg for solid color
| | 04:42 | background and click Create.
| | 04:44 | I am going to go to the Format field
and from there I'll make sure that I have
| | 04:48 | HTML and Images selected, so that
Photoshop writes an HTML file for me that
| | 04:53 | contains instructions to place this
graphic against that particular blue
| | 04:57 | background. Alternatively, I could
choose Images only which would save out just
| | 05:01 | the transparent GIF without the background.
| | 05:04 | But for this lesson, I'm going to
choose HTML and Images. I'll now click Save.
| | 05:08 | Now I'm going to go out to my desktop,
I'll look inside that new solid bg
| | 05:12 | folder and there I have an HTML file
written by Photoshop, an Images sub-folder
| | 05:17 | created by Photoshop and inside of that
sub-folder, my optimized GIF. I'm going
| | 05:22 | to open that; I'll zoom in so that you
can see that it does have blue pixels
| | 05:27 | against the edge of the optimized GIF.
| | 05:29 | Now I'll go back and I'll open that
HTML file to view my transparent graphic
| | 05:35 | with its simulated smooth edges
against the light blue background. This same
| | 05:39 | technique will also work against some
patterned backgrounds and that's what I
| | 05:43 | would like to show you in the
upcoming movies in this chapter.
| | Collapse this transcript |
| Optimizing transparent graphics for patterned backgrounds| 00:00 | A transparent graphic like this one
can be placed against a patterned webpage
| | 00:04 | background is an alternative to putting
it against a solid webpage background.
| | 00:09 | In this movie, I'll show you how to
optimize this transparent graphic as a GIF
| | 00:13 | and place it against a thin patterned
background made from this background tile.
| | 00:18 | The technique I'll show you works
really well with a pattern background made up
| | 00:22 | of thin lines, like you see here. But
I'll also show you that it doesn't work
| | 00:26 | as well against a background like
this that's made up of thick lines.
| | 00:30 | I'll start off by going back to the thin_
bg.gif image and I'm going to get my
| | 00:35 | Eyedropper tool in the toolbox and
click on the dominant color in this image.
| | 00:39 | That sets that color as the foreground
color in Photoshop's toolbox and that's
| | 00:43 | all I need the background for. I can
close it now, by clicking the X on its tab
| | 00:47 | and I'm also going to
close the thick background.
| | 00:50 | Now I'm going to optimize this
transparent graphic for the web by going to the
| | 00:54 | File menu at the top of the screen and
down to Save for Web & Devices. I'll use
| | 00:59 | the 2-Up tab and I'm going to select
the Zoom tool in the toolbox and zoom in
| | 01:03 | on the graphic. As I explained in
earlier movies, when the GIF settings are at
| | 01:07 | their defaults, which includes the
Matte field set to None, the edges of the
| | 01:11 | transparent graphic look jagged
because the GIF format doesn't support
| | 01:15 | multi-level transparency.
| | 01:17 | To start off, I'm going to show you how
the GIF looks with the default settings
| | 01:21 | against a patterned background. I'll
go to the panel menu at the top right of
| | 01:25 | this window and I'll choose Edit
Output Settings. In the Output Settings
| | 01:28 | window, I'm going to go to the second
menu and I'm going to choose Background.
| | 01:32 | Here I'll click View Document As Image,
because I want this transparent graphic
| | 01:37 | to be treated as a
foreground image against a background.
| | 01:40 | I will set up the background here in
the Background Image area. I'm going to
| | 01:44 | click choose and from here I'm going to
navigate into my Exercise Files folder,
| | 01:49 | down to the chapter06 sub-folder and
into the 06_03 sub-folder. There I have
| | 01:55 | two background GIFs, the ones
I showed you a moment ago. I'm going to
| | 01:58 | select the one called thin_bg.gif and
click Open. Selecting that GIF here sets it up
| | 02:04 | to be a repeating background that will
tile itself over and over in the Web browser.
| | 02:09 | It doesn't matter what's set in the
Color field because the color of the
| | 02:12 | webpage is going to be obscured by the
repeating background image. I'll click
| | 02:16 | OK here and back in the Save for Web &
Devices window I'm going to go down to
| | 02:20 | the Preview button and click that to
launch my Web browser. In the Web browser,
| | 02:25 | you can see the thin_bg.gif repeating
itself over and over as a background tile.
| | 02:29 | Here you can see the transparent
GIF. If you look at the edge, you will
| | 02:33 | see that it's quite jaggedy. That
isn't the look that I want. So I would like
| | 02:37 | to go back to the Save for Web &
Devices window and try to camouflage this edge
| | 02:41 | against a patterned background like this one.
| | 02:43 | I will close the Web browser and in the
Save for Web & Devices window I'm going
| | 02:48 | to go to the Matte field, which is the
key to this technique, and I'm going to
| | 02:52 | choose Foreground Color. Foreground
color is that light blue that I set as the
| | 02:57 | foreground color in Photoshop's toolbox.
That fills the edges of my transparent
| | 03:01 | graphic with the blue from
the Foreground Color box.
| | 03:04 | Let's see how this looks against that
repeating background tile. I'll go back
| | 03:08 | to the Preview button, click it and
now I can see in my Web browser that the
| | 03:12 | edges of my transparent graphic looks
smooth and they blend in quite well with
| | 03:17 | this thin patterned background. I'll
zoom in so that you can see that there
| | 03:21 | actually is a little gap in some places
where the darker blue edge crosses the
| | 03:26 | thin blue lines of this pattern. But
back at 100%, you really can't see that
| | 03:30 | and so this technique works quite well
against a thin patterned background like this one.
| | 03:36 | At this point, I'm satisfied with what
I have but I want to take a moment to
| | 03:39 | show you what this image would look
like against my thick background. I'm going
| | 03:44 | to go back to the panel menu at the
top right of the screen and down to Edit
| | 03:47 | Output Settings. Here I'm going to
go to the second menu again and choose
| | 03:51 | Background again.
| | 03:52 | Go back to the Background Image Path
field and click the Choose button. That
| | 03:56 | will take me right back into my 06_
03 sub-folder, where I have this other
| | 04:01 | background thick_bg.gif. I'm going to
select that one and click Open and click
| | 04:06 | OK and back in Save for Web & Devices,
I'm going to go back to the Preview
| | 04:10 | button and click that and
that opens my Web browser again.
| | 04:14 | What I would like you to see is that
the edges of my transparent graphic don't
| | 04:17 | look as good against this thick
background pattern because you can really see
| | 04:21 | the darker blue against the thick
light blue lines in this pattern.
| | 04:25 | So the lesson to take from this
exercise is that if you are going to optimize a
| | 04:29 | transparent graphic, design a
background that's made up of thin lines rather
| | 04:33 | than thick lines and then use the
Matte field in the Save for Web & Devices
| | 04:37 | window to camouflage the edge of your graphic
as I have shown you how to do in this movie.
| | Collapse this transcript |
| Optimizing transparent graphics with shadows and glows| 00:01 | You can give a transparent graphic some
dimension by adding a layer effect like
| | 00:05 | a drop shadow or an outer glow to its
outer edge. The challenge is to make the
| | 00:09 | soft edges of the shadow or glow appear
to blend in with the colors and pattern
| | 00:13 | in the web page background that you
plan to use. In other movies in this chapter,
| | 00:17 | I showed you how to use the
Matte feature to camouflage the soft edge
| | 00:21 | of an anti-aliased transparent
graphic against various webpage backgrounds.
| | 00:26 | The good news is that the same
technique often works with a soft edge that's
| | 00:30 | carved not by anti-aliasing, but by a
drop shadow or an outer glow. Here I have
| | 00:36 | a transparent graphic and if I go
over to the Layers panel and I click the
| | 00:40 | arrow to the right of the fx icon, you
can see the right of the drop shadow on
| | 00:44 | the transparent layer. I'm going to
turn-on the white layer for just a moment
| | 00:49 | by clicking in the box to the left of
that layer, so that you can better see
| | 00:52 | the shadow on the graphic.
| | 00:54 | And then I'll turn the white layer off
again by clicking its eye icon so that I
| | 00:58 | can optimize this image as a
transparent graphic. I have another image opened
| | 01:02 | here and that's thin_bg.gif. I would
like to set up this GIF to repeat itself
| | 01:08 | over and over in a Web browser as a
tiling background image, and then I'll
| | 01:12 | place my transparent graphic on
top of that webpage background.
| | 01:15 | I am going to select my Eyedropper
tool here in the toolbox and click in the
| | 01:19 | dominant color in the tile that's going
to make up my webpage background. That
| | 01:23 | sets that color here in the
Foreground Color box in toolbox. And now I can
| | 01:28 | close thin_bg.gif. It's no longer
needed and back in my transparent graphic,
| | 01:33 | I'm going to start optimizing for the
web. I'll go to the File menu and down to
| | 01:38 | Save For Web & Devices.
| | 01:39 | I will use the 2-Up tab, which shows
me a preview of the optimized GIF on the
| | 01:44 | right and the PSD file on the left. The
first thing I'm going to do here is set
| | 01:49 | up thin_bg.gif to be the webpage
background. So I'll move over to the panel
| | 01:54 | menu at the top right of the screen
and I'll choose Edit Output Settings. In
| | 01:58 | the Output Settings window, I'll go
to the second menu and I'll choose Background.
| | 02:03 | I want the transparent graphic to be
viewed as the foreground image. So I'll
| | 02:07 | leave Image selected here and then
I'll go to the Background Image area and
| | 02:11 | I'll create a path to thin_bg.gif,
which will tell Photoshop to use that small
| | 02:18 | blue graphic as my repeating background tile.
| | 02:21 | I click the Choose button, and I'll
navigate to my Desktop, and then into the
| | 02:25 | Exercise Files folder, and then into
the chapter06 folder, and finally into the
| | 02:30 | 06_04 sub-folder. There I'll find thin_
bg.gif which I'll select and click Open.
| | 02:38 | And that creates this path in
the background image to thin_bg.gif.
| | 02:43 | Then I'll click OK.
| | 02:44 | Notice that in the Preview window here,
the GIF doesn't look very good. The
| | 02:49 | shadow that's nice and soft in the PSD
image is blocked in with black here in
| | 02:54 | the Preview. That's because the GIF
settings over on the right are set to their
| | 02:57 | defaults which includes the Matte
field set to None. As you can imagine, this
| | 03:02 | isn't going to look very good
against a patterned background.
| | 03:05 | I will click Preview button so you can
see that that black really isn't what I
| | 03:09 | would like to have on the edge of my
graphic. I can fix that back in the Save
| | 03:13 | For Web & Devices window. So I'll close
my Web browser and back in Save For Web
| | 03:17 | & Devices. I'm going to go to the Matte
field and there I'm going to click the
| | 03:21 | double-pointed arrow and I'm
going to choose Foreground Color.
| | 03:24 | Foreground Color is the blue that I set
as the foreground color in the toolbox
| | 03:29 | a few moments ago. That fills in all
the soft pixels of the shadow from the
| | 03:33 | original image with that blue color.
This doesn't look very good here in the
| | 03:38 | Save For Web & Devices window but it
should blend in nicely with the patterned
| | 03:42 | webpage background when viewed in a Web browser.
| | 03:44 | I could go out and preview this again
but instead I'm just going to go ahead
| | 03:48 | and save it. So I'm going to click
the Save button at the bottom of this
| | 03:51 | window. I'm going to create a new
folder there which I'll call shadow and then
| | 03:56 | I'm going to go to my Format menu
and make sure that it's set to HTML and Images.
| | 04:01 | I am also going to go to the Settings
menu here and I'm going to choose Other
| | 04:06 | to open up the Output Settings window,
the same one that we saw a few minutes
| | 04:09 | ago except that this time from the
second menu I'm going to choose Saving Files.
| | 04:14 | I am doing that so that I can show you
that Copy Background Images when Saving
| | 04:18 | is checked and that's the default. So
I'll click OK and now I'm going to save
| | 04:23 | by clicking the Save button. I'll go
out to my Desktop and into my shadow
| | 04:27 | folder, to see what Photoshop made for me.
| | 04:30 | Photoshop created this Images sub-
folder and inside of that I have my GIF with
| | 04:35 | its camouflaged edge, and I have a
copy of the background tile as well.
| | 04:40 | I'm going to open the HTML file in a Web
browser so that you can see the soft pixels
| | 04:44 | of the shadow blending quite well
with this patterned webpage background.
| | 04:49 | But you should keep in mind that when
you are optimizing a transparent graphic
| | 04:53 | that has a layer effect like this
drop shadow or an outer glow, it's
| | 04:57 | particularly important that the
background be composed of thin lines and
| | 05:01 | non-contrasting colors because the
drop shadow moves so far out from the edge
| | 05:06 | of the graphic, as you can see here,
that it wouldn't blend in well with a less
| | 05:09 | subtle pattern.
| | Collapse this transcript |
| Starting with a non-transparent graphic| 00:01 | When you are making a transparent
graphic for the web, you will often start out
| | 00:04 | with a source file like a PSD file that
already contains transparent areas,
| | 00:09 | but it's also possible to add transparent
areas to a web graphic even if you are
| | 00:14 | starting from a source file like this
one that has no transparent pixels in it.
| | 00:17 | Here is how it is done.
| | 00:18 | I am going to optimize this image by
going to File and Save for Web & Devices.
| | 00:23 | I'm going to select the Eyedropper on
the left side of the window, and then I'm
| | 00:27 | going to come into the GIF Preview over
here on the right. What I would like to
| | 00:30 | do is to eliminate this darker blue
all around the image and even in between
| | 00:35 | the black line and the lighter blue.
So I'll just click anywhere on that blue
| | 00:39 | color to set it as the Eyedropper
color over here on the left. To add
| | 00:43 | transparency to this GIF, all I have to
do is go over to the Color Table where
| | 00:47 | I can see that particular blue
highlighted here and then go to the Transparency
| | 00:52 | icon and give it a click. That remaps
all instances of that particular blue to
| | 00:58 | transparency, as you can see here in
the icon and more importantly, here in the
| | 01:02 | GIF Preview.
| | 01:04 | Viewers will be able to see through all
these transparent areas, even over here
| | 01:07 | inside the black line, down to
the web-page background color below.
| | 01:11 | I am going to go ahead and set a web-
page background color against which to
| | 01:15 | preview this now transparent graphic.
I'll go back to the Eyedropper and I'm
| | 01:20 | going to use it to select a color right
out of the image, this purple, but you
| | 01:23 | actually can choose any color.
| | 01:25 | Now, purple is the Eyedropper color and
I'm going to go back to the panel menu
| | 01:30 | on the top right and choose Edit
Output Settings. Here I'm going to go to the
| | 01:34 | second menu and choose Background.
I want the graphic to be viewed as a
| | 01:38 | foreground image, so I'll leave Image
selected here and then I'll come down to
| | 01:42 | the Color field and I'll change it to
Eyedropper Color to pick up that purple
| | 01:46 | that I just chose as the Eyedropper
Color and then I'll click OK. At this
| | 01:50 | point, I could come down and preview
the image against the purple background,
| | 01:53 | but you have seen me do that many times
in other movies in this chapter, so I'm
| | 01:57 | just going to go ahead and
save the resulting image.
| | 02:00 | To do that, I'll click the Save button.
I'll navigate to the desktop and I'm
| | 02:05 | going to create a new folder there
called nontrans. You can call it anything
| | 02:09 | you want. Then I'm going to go to the
Format field and I'm going to change that
| | 02:14 | to HTML and Images so that Photoshop
writes in HTML file with that purple
| | 02:19 | background color in it. And then I'll
click Save. Now, I'm going to go out to
| | 02:24 | my desktop and open that nontrans
folder and there I'll find an images folder
| | 02:29 | that Photoshop made for me with a
GIF inside as well as an HTML file.
| | 02:33 | I am going to open the GIF in Photoshop
so that you can see that it indeed has
| | 02:38 | transparent areas now. Go back to the
desktop once again, open the nontrans
| | 02:43 | folder and open that HTML file in a Web
browser and here you can see the purple
| | 02:48 | HTML background that I just made,
showing through the transparent areas inside
| | 02:53 | the black line and around the light-
blue area as well. So, that's how you can
| | 02:58 | start with the source file that has no
transparent pixels and optimize it as a
| | 03:02 | transparent GIF.
| | Collapse this transcript |
| Simulating transparency for JPEGs| 00:00 | When you are working with an
illustration, you can optimize it with
| | 00:04 | transparency in either the GIF or PNG-
8 format, as you have learned in other
| | 00:08 | movies in the chapter. But there may be
times when you have a photograph rather
| | 00:12 | than an illustration that has
transparent areas that you would like to retain
| | 00:16 | on the web. The challenge is that the
JPEG format which is usually the best
| | 00:20 | format in which to optimize a
photograph doesn't support transparency. In this
| | 00:25 | movie, I'll show you a
work around for that problem.
| | 00:27 | Here I have a photograph and I have
knocked out the edges of the photograph so
| | 00:31 | that it appears to have rounded corners.
I would like it to look around it on
| | 00:35 | the web. So, I'm going to go ahead and
optimize it by going to the File menu
| | 00:39 | and down to Save for Web & Devices. In
the 2-Up View, the PSD source file with
| | 00:44 | its transparent edges is on the left.
On the right is a preview of the image
| | 00:49 | optimized as a JPEG. When the format is
set to JPEG here, I automatically lose
| | 00:54 | all of the transparent areas, and by
default, all the transparent pixels fill
| | 00:59 | in with white. Well, if I want to
optimize this as a JPEG to get the best photo
| | 01:04 | quality, I can simulate
the look of transparency.
| | 01:07 | First, I set a color for the page
background. I'm going to take a color right
| | 01:11 | out of the photo by selecting the
Eyedropper tool and coming in and clicking on
| | 01:16 | one of the light yellows here. And
that fills the Eyedropper color box over
| | 01:20 | here on the left with that yellow. Then
I'm going to set the page background to
| | 01:24 | that same yellow by going to the panel
menu at the top right of the screen and
| | 01:28 | down to Edit Output Settings. I'll
go to the second menu and I'll choose
| | 01:33 | Background. I'll leave Image selected
here so that my photograph is treated as
| | 01:38 | a foreground image. If there is
anything in the background image area, I'll
| | 01:42 | select and delete it because I
want to use a solid color for the page
| | 01:45 | background. So in the Color field I'm
going to choose Eyedropper Color, which
| | 01:50 | is that yellow that I selected a
moment ago, and then I'll click OK.
| | 01:54 | Now, I'm going to preview the image and
that's isn't right because I still have
| | 01:59 | the white pixels around the photograph
just set on the yellow background. So, I
| | 02:03 | need to go back into Save for Web &
Devices and do one more thing here and that
| | 02:08 | is to go to the Matte field which is
the key to making this work and change it
| | 02:13 | to from None to Eyedropper Color to
match the background. That fills in the
| | 02:18 | pixels that have been transparent in
the source file with the Eyedropper Color
| | 02:22 | in the JPEG Preview.
| | 02:24 | Now, I'm going to click the Preview
button again and the photo does look like
| | 02:27 | it has rounded corners because the
yellow areas blend in perfectly with the
| | 02:32 | web-page background. This simulation
of transparency in a JPEG can work well
| | 02:37 | against a solid background color
like this but not as perfectly against a
| | 02:41 | patterned background. I'm going to
close the Web browser and then I'm going to
| | 02:46 | close the Save for Web & Devices
window too by pressing Cancel. And back in
| | 02:52 | Photoshop, I'm going to click on
another image that I have open, yellow_bg.gif.
| | 02:57 | This is a small file that I have
optimized as a GIF so that I can set it to be
| | 03:01 | a repeating background image on a web page.
| | 03:03 | I am going to get the Eyedropper tool
in Photoshop and I'm going to select the
| | 03:09 | dominant color here in this GIF to be
my foreground color in the toolbox, and
| | 03:13 | then I can close this GIF and I'm back
in my original PSD photograph with its
| | 03:19 | transparent pixels. Again, I'll go to
the Save for Web & Devices window and
| | 03:24 | with the Preview window selected, I'll
go up to the panel menu again and down
| | 03:29 | to Edit Output Settings.
| | 03:30 | In the Output Settings window, again,
I'll go to the second menu, change it to
| | 03:34 | Background, leave the document viewed
as a foreground image and then I'm going
| | 03:38 | to go to the Background Image field,
I'll click the Choose button and I'm going
| | 03:43 | to navigate to my desktop and then
into my Exercise Files, into my chapter06
| | 03:47 | folder and into the 06_06 sub-folder,
where I have my background GIF that I
| | 03:53 | just showed you. I'll select the
yellow_bg.gif and click Open and then
| | 03:58 | I'll click OK.
| | 03:59 | Now, if you remember, I had chosen a
yellow out of that background GIF as a
| | 04:04 | foreground color in Photoshop's toolbox.
So what I'm going to do now is to go
| | 04:09 | to the Matte field and instead of None
I'm going to choose Foreground Color and
| | 04:13 | now I'm going to preview my image, and
although, there is a little bit of a gap
| | 04:18 | here between the photo and the
background. It doesn't look too bad, but if I
| | 04:23 | were working with a less subtle
background, this method of simulating
| | 04:27 | transparency in a JPEG wouldn't be as good.
| | 04:29 | I am going to close the Web browser
and I'm just going to finish this off by
| | 04:33 | saving, navigating to my desktop,
creating a new folder, I'll call this one
| | 04:38 | jpegtrans and going to the Format field.
I'm going to save with both HTML and
| | 04:44 | Images and then I'll click Save.
I'll go out to my desktop and in then
| | 04:49 | jpegtrans folder, which contains the
JPEG and the copy of the background GIF.
| | 04:55 | I'm going to open the JPEG so that
you can see that the area that had been
| | 04:59 | transparent in the source file is
now filled with the yellow from the
| | 05:03 | foreground color box in the toolbox.
I'll go back to the desktop again and I'm
| | 05:07 | going to open the HTML file that
Photoshop made and there you can see it
| | 05:11 | in my Web browser.
| | 05:12 | So, that's how you can simulate
transparency when you are saving a photograph
| | 05:16 | in the JPEG format.
| | Collapse this transcript |
|
|
7. Creating Navigation GraphicsBuilding a simple navigation bar| 00:01 | Navigation graphics like buttons
and navigation bars are among the most
| | 00:05 | important web graphics that you will
make because they act as a road map for
| | 00:09 | your viewers to find their way around
your website. In this chapter, I'll focus
| | 00:13 | on how to make static navigation elements
like buttons and bars and in a later chapter,
| | 00:17 | I'll cover how to make graphics
for rollover navigation. This movie
| | 00:21 | covers how to use alignment features
and the Shape and Type tools to make a
| | 00:26 | simple navigation bar.
| | 00:27 | I am working in this partially created
graphic, but you could do this exercise
| | 00:31 | in a new blank file if you prefer.
I'm going to start by setting some guides to
| | 00:36 | identify where I want to drive out a
Navigation Bar. I'll go to the application
| | 00:42 | bar here on a Mac or to the menu bar on
a PC and click on the View Extras menu
| | 00:47 | and choose Show Rulers. The rulers are
displaying pixels and if yours aren't,
| | 00:52 | you can Ctrl-click on a Mac or right-
click on a PC in the Ruler and choose Pixels.
| | 00:59 | From the Horizontal Ruler at the top
of the document, I'm going to click and
| | 01:02 | drag a horizontal guide and I'll drop
it just above the GROUNDSWELL type, then
| | 01:07 | I'll go to the Vertical Ruler and I'll
drag out a vertical guide and I'll drop
| | 01:11 | that at about 300 on the
Horizontal Ruler at the top of the document.
| | 01:16 | Now, I'm going to create a Navigation
Bar in this area defined by the guides.
| | 01:20 | To do that, I'm going to go down and
select a Geometric Shape tool from the
| | 01:24 | fly-out menu of shape tools here in
the toolbox. I'll choose a Rectangle tool
| | 01:29 | but a rounded rectangle would work too.
I prefer to use these shape tools over
| | 01:33 | making a new layer and creating a
Pixel-based Navigation Bar because the
| | 01:37 | objects created by the shape layers
are vector-based and that makes them
| | 01:41 | eligible for editing in the future. So
I could recolor or resize one of these
| | 01:46 | shapes quite easily as you will see in a moment.
| | 01:49 | With the Rectangle tool selected, I'm
going to go up to the View menu and I'm
| | 01:52 | going to confirm that there is a check
mark to the left of the Snap command and
| | 01:57 | that in the Snap To fly-out menu,
there is a check mark next to Guides. That
| | 02:01 | will allow me to draw out a shape
and it will automatically snap to these
| | 02:04 | guides so I don't have to be too
careful about where I draw it. I just need to
| | 02:08 | click close to the Guides and start
dragging, and you can see that the top and
| | 02:11 | left side of this shape
snapped right to those Guides.
| | 02:15 | When I release my mouse, I have
rectangular shape on its own layer here in the
| | 02:19 | Layers panel that automatically fills
with whatever color is over here in the
| | 02:24 | foreground color box in the toolbox.
Because this is a shape layer, I can
| | 02:28 | easily resize it by going to the Arrow
tools in the toolbox and choosing the
| | 02:33 | Direct Selection tool. Then I'll click
on one of the borders of the shape and
| | 02:38 | that brings up these anchor points. Now,
I can click on the anchor points or on
| | 02:42 | any edge of the shape and drag to
reshape it. So, I'm just going to make it a
| | 02:47 | little wider. It's also easy to
recolor a shape. To do that, I'll go to the
| | 02:52 | shape layer and I'm going to double-
click on the left-most icon on this layer,
| | 02:56 | which represents the color of this shape.
That opens the Color Picker and with
| | 03:02 | the Color Picker open, if I move my
mouse out of the Color Picker it changes to
| | 03:06 | an Eyedropper and I can move over the
image and sample a color like the green
| | 03:10 | from the GROUNDSWELL logo and that
automatically re-colors my shape. I'll say
| | 03:15 | OK in the Color Picker to close that
box and so you can see how flexible a
| | 03:20 | shape layer is.
| | 03:21 | When I'm done editing the shape layer,
I'm going to click on the right-hand
| | 03:25 | thumbnail on this shape layer to de-
select and to remove the light vector
| | 03:30 | outline around the shape in the image
and then I'm going to get rid of these
| | 03:33 | guides by going to the View menu and
choosing Clear Guides. With the shape
| | 03:37 | layer selected, I can go to the Move
tool and then I'm going to use the Arrow
| | 03:42 | keys on my keyboard to just
nudge that Navigation Bar into place.
| | 03:46 | Now, I'd like to add some text buttons
to this Navigation Bar. To do that, I'm
| | 03:51 | going to the T tool in the toolbox and
I'm going to choose the Horizontal Type
| | 03:55 | tool. I have already set the options in
the Options bar for the Type tool.
| | 04:00 | I'm going to use Verdana type in a
regular style at 12 point, I have set
| | 04:05 | Anti-aliasing to Strong and I have
set the color of the type to White.
| | 04:09 | So I can just come in and click in the
Navigation Bar and I'm going to press
| | 04:13 | down the Caps lock key so I can type-in
uppercase and I'll type HOME. Whenever
| | 04:17 | I create or edit type, I need to go to
the Options bar and click this checkbox
| | 04:22 | to confirm the type.
| | 04:23 | So I'm going to do that a few more
times to add some more text buttons.
| | 04:26 | I'll click again in the Navigation Bar and
I'm going to type GEAR, click the check
| | 04:33 | mark. I'll click again and I'll type
VIDEOS, check and PHOTOS and check. I
| | 04:41 | haven't been very careful about exactly
where I typed because I'm going to use
| | 04:45 | the Move tools built in Alignment
Options to align all of the various text
| | 04:50 | buttons here.
| | 04:52 | To do that, I'm going to go to the
Layers panel and there I can see that there
| | 04:55 | is a separate layer that's been
automatically made for each piece of type that
| | 04:59 | I entered and these are Special Type
layers as you can see from the T on the
| | 05:03 | thumbnail. With the top Type layer
selected, I'm going to hold down the Shift
| | 05:07 | Key as I click on the bottom-most of
these four Type layers and that selects
| | 05:11 | all the layers in between. Then I'm
going to select the Move tool in the
| | 05:15 | toolbox and that brings up the
Alignment Options here. I'm going to click on
| | 05:20 | the first of these buttons, which will
align the four pieces of Type by their
| | 05:24 | tops, and then I'd like to have the
same amount or space between each one of
| | 05:28 | these buttons. So with those four
layers still selected, I'm going to go to
| | 05:32 | this icon, which distributes the
contents of these four layers by their
| | 05:36 | horizontal centers.
| | 05:38 | Now, I'd like to take all four of
those Text buttons and center them on the
| | 05:42 | Navigation Bar here. So, I'm going to
go back to the Layers panel and I'm going
| | 05:46 | to add the Shape 1 layer to the
selected layers. The Shape 1 layer contains
| | 05:51 | that Navigation Bar. To add that I'm
going to hold down the Command key on a
| | 05:55 | Mac or the Control key on a PC as I
click on that layer. And now back in the
| | 06:00 | Move tool options, I'll click this
Horizontal Center Alignment button and that
| | 06:05 | aligns all four of my buttons on the
Navigation Bar. Then I'm going to click
| | 06:09 | off the four layers in the blank area
of the Layers panel to deselect all the layers.
| | 06:14 | One way to separate Text buttons like
this is to add pipes between them. On
| | 06:18 | your keyboard, you probably have a
Pipe key that's on the same key as the
| | 06:22 | backslash. I'm going to select the
Type tool again and then I'm going to come
| | 06:26 | into the Navigation Bar between the
first two buttons. I'll hold the Shift Key
| | 06:30 | on my keyboard and I'll click the
backslash key and that adds this white pipe.
| | 06:35 | As with any Type layer, I need to
accept this type. So, I'll go up to the check
| | 06:38 | mark on the Options Bar and click.
| | 06:41 | I could come in and type a couple of
more pipes here or I could just duplicate
| | 06:45 | this single Type layer that I have
already made. To duplicate the Pipe layer,
| | 06:49 | I'm going to hold the Control key on
a Mac as I click on this layer, that's
| | 06:52 | right-click on a PC and from the
Contextual menu I'll choose Duplicate Layer.
| | 06:57 | I'll just click OK on that box and then
I'm going to get my Move tool again and
| | 07:02 | I'm going to click-and-drag the
Duplicate Pipe and holding the Shift Key keeps
| | 07:07 | the second pipe aligned with the first.
Notice these pink lines here. These are
| | 07:11 | called Smart Guides and there is
another way to align objects with one another
| | 07:16 | as you move them around in Photoshop.
So I'm going to drag that pipe over
| | 07:19 | between the next two Text buttons and
then I'll go back to the Layers panel,
| | 07:24 | I'll Control or right-click on this
Copy layer, choose Duplicate Layer again,
| | 07:29 | click OK and then again I'll hold the
Shift Key as I click-and-drag with the
| | 07:34 | Move tool and I'll drop that third
pipe in between the last two buttons.
| | 07:39 | One of the nice things about Type
layers is that you can edit multiple Type
| | 07:42 | layers at one time. So, for example,
let's say that I want to change the color
| | 07:46 | of the three pipes, each of which is
on a separate Type layer in the Layers
| | 07:50 | panel. I have clicked on the top one
and now I'm going to Shift-click on the
| | 07:54 | bottom layer there to select all three.
Then I'll get the Type tool again in
| | 07:59 | the toolbox. Then I'll click on the
Color field in the Type Tool Options bar to
| | 08:04 | open the Color Picker. With the Color
Picker open, if I move my mouse over a
| | 08:08 | color in the Navigation Bar, that color
is selected and when I click OK in the
| | 08:12 | Color Picker, all three pieces of
Type are automatically recolored with the
| | 08:17 | orange that I just sampled from
another part of the Navigation Bar. So, those
| | 08:21 | are some techniques for taking
advantage of the Alignment features in Photoshop
| | 08:25 | as well as the flexibility of shape
layers and Type layers to make a simple
| | 08:29 | Navigation Bar.
| | Collapse this transcript |
| Building a simple button with layer styles| 00:00 | Buttons are among the most common web
graphics. In this movie I'm going to show
| | 00:04 | you how to make a simple button using
layer styles. Once you learn how flexible
| | 00:09 | layer styles are, you can tweak and
combine them to make unique buttons of your own.
| | 00:13 | I am going to start by going to the
toolbox and selecting from the family of
| | 00:17 | Shape tools here the Ellipse tool,
which is used to make circular and oval
| | 00:21 | buttons. Then I'm going to come in
and I'm going to drag out an oval shape.
| | 00:25 | That creates a new shape layer in the
Layers panel and fills it with whatever
| | 00:30 | color is in your foreground color box
here in the toolbox, mine happens to have
| | 00:33 | green. So I have a green button.
Notice that there is an outline around that
| | 00:37 | button. That's a vector outline
because the shape layer is made up of two
| | 00:41 | components, colored pixels and a vector
outline. If you don't want to see that
| | 00:46 | vector outline on your graphic, you
can just click on the vector thumbnail on
| | 00:50 | the right side of the shape
layer and the outline disappears.
| | 00:54 | Let's say I want to recolor this
button to match this Navigation bar, all I
| | 00:58 | have to do is double-click the other
thumbnail on the shape layer, the colored
| | 01:02 | thumbnail here and that opens the
Color Picker and then I can move my cursor
| | 01:07 | out of the Color Picker and it
changes to an Eyedropper that I can use to
| | 01:11 | sample a color by clicking on it. That
automatically fills the button with the
| | 01:16 | color that I just sampled and I'm going
to click the Color Picker to close its dialog box.
| | 01:21 | Now, I would like to add some
dimension to this flat button. I'm going to use
| | 01:25 | layer effects to do that. A
combination of layer effects is known as a layer
| | 01:29 | style. With the Shape 1 layer selected,
I'm going to go down to the bottom of
| | 01:33 | the Layers panel and click on the FX
button there and then I'm going to choose
| | 01:37 | one of the effects from this pop-up menu.
I'll start with the Bevel and Emboss
| | 01:42 | effect. That applies a default Bevel
and Emboss to the button and it opens the
| | 01:46 | Layer Style dialog box.
| | 01:48 | In the menu on the left-hand side of
the Layer Style dialog box, there is a
| | 01:52 | check mark next to Bevel and Emboss
indicating that it has been applied to the
| | 01:56 | contents of the selected layer. And
Bevel and Emboss is highlighted there,
| | 02:00 | which makes these options appear on
the right side of the Layer Style dialog
| | 02:04 | box. I can customize any or all of
these options. So as a simple example, I can
| | 02:09 | take the Soften slider and drag to the
right and that will soften the Bevel on
| | 02:14 | that button. And I have an interactive
preview so that I can see the results on
| | 02:18 | the button because the
Preview box is checked by default.
| | 02:22 | A layer style can be composed of more
than one layer effect. Let's say I wanted
| | 02:26 | to add an inner shadow to the layer
style in this button. With a Layer Style
| | 02:30 | dialog box still open, I can click the
check mark next to Inner Shadow to apply
| | 02:34 | that effect and you can see it
immediately in the button, and then if I would
| | 02:38 | like to tweak some of its options, I
click on the Inner Shadow effect and that
| | 02:43 | brings up the Inner Shadow options here
on the right. Here I can do things like
| | 02:47 | change the Opacity of the shadow to
make it a little less obvious, and I can
| | 02:52 | change the size of the shadow making
it softer. I can change its choke. I can
| | 02:57 | even change the color of the Inner
Shadow by clicking on this color box to open
| | 03:01 | the Color Picker moving to a color area
and choosing another color. Maybe I'll
| | 03:06 | choose a dark-green and clicking OK to
close the Color Picker and I could do a
| | 03:10 | lot more here with the many layer
effects available and the many options
| | 03:14 | available for each effect.
| | 03:16 | When I'm done creating a layer style,
I can either just close this dialog box
| | 03:21 | or if I wish, I can click New Style
and then click OK and that will save that
| | 03:25 | new style here in the Styles panel. If
your Styles panel isn't open, you can
| | 03:30 | always open it from the Window menu at
the top of the screen, but you really
| | 03:33 | don't even need the Styles panel
open to apply a style to a shape.
| | 03:37 | So, for example, let's say I wanted
to add another shape to this Navigation Bar.
| | 03:42 | With any of the Shape tools
selected in the toolbox, let's say the rounded
| | 03:46 | rectangle this time, I can go up to
the Tool Options bar for that Shape tool
| | 03:50 | and in the Style field there, I can
click and I can select my new style from
| | 03:56 | the panel of styles that appears there.
I'll click in the Tool Options bar to
| | 03:59 | close this menu of styles and then I
can come into the graphic and I can draw
| | 04:03 | out a rounded rectangle and it will
have the same style as the button. It has a
| | 04:07 | different color because I happened to
have green selected up here in the color
| | 04:11 | box for the Rounded Rectangle tool,
but the Bevel and the Inner Shadow is the same.
| | 04:16 | If I wanted to be sure to retain that
style for the future, I would then come
| | 04:20 | to the panel menu on the right side of
the Styles panel and I would choose Save Style.
| | 04:25 | I'm not going to
do that right now though.
| | 04:27 | So that's how you can create a simple
button using layer styles. Layer Styles
| | 04:31 | offer so many options; I hope you
will experiment with them so that you can
| | 04:35 | create your own unique layer style
buttons and other navigation graphics.
| | Collapse this transcript |
| Creating a navigation bar with Smart Object buttons| 00:00 | Photoshop's Smart Object feature comes
in really handy for creating matching
| | 00:05 | navigation buttons. You can use it
to make buttons that are linked to one
| | 00:08 | another so that a change to one
affects all of them. To show you this,
| | 00:12 | I'm going to start with a simple button
that I explained in another movie. This was
| | 00:16 | made with the Elliptical Shape tool and
then I added a few layer effects to the
| | 00:20 | button shape layer.
| | 00:21 | I am going to convert the button layer
to a Smart Object by holding down the
| | 00:25 | Ctrl key as I click on the button
layer, that's right-click on a PC and
| | 00:29 | choosing Convert to Smart Object.
Notice the new Smart Object icon on the
| | 00:33 | button layer and notice also that you
no longer see the layer effects in this
| | 00:37 | layer. But they are still there.
Photoshop has preserved those layer effects in
| | 00:42 | the original source content of this
Smart Object, as you will see in a moment.
| | 00:46 | Now I'm going to duplicate this button
layer to make another button. To do that
| | 00:50 | I'll hold down the Ctrl key and click
on the button layer or right-click on a
| | 00:54 | PC. And from this menu, I'm going to
choose Duplicate Layer. It's important not
| | 00:59 | to choose New Smart Object via Copy.
That would make another button, but that
| | 01:04 | button would not be linked to the original.
| | 01:06 | So I'm going to choose Duplicate Layer
instead and I'll choose OK and then I
| | 01:11 | have a new button copy layer that's
also a Smart Object. You can't see the
| | 01:15 | copied button because it's directly on
top of the first button. To move it, I'm
| | 01:19 | going to select the Move tool in
toolbox and I'm going to hold down the Shift
| | 01:23 | key as I drag to the right. Holding the
Shift key constrains vertical movement
| | 01:28 | and these pink smart guides also help
me to align the copy to the original.
| | 01:32 | I'll release my mouse and
then I'll release the Shift key.
| | 01:35 | I would like to have two more
copies of this button that are also Smart
| | 01:39 | Objects. I could make those the same
way I just made the button copy, but I'm
| | 01:43 | going to show you another way that I
think is faster. I'm going to hold down
| | 01:46 | the Option key on a Mac or the Alt key
on a PC and the Shift key and then I'm
| | 01:51 | going to drag with the Move tool to the
right and I'll do it one more time and
| | 01:55 | now I have four buttons and you can
see the four button layers in the Layers panel.
| | 01:59 | Just paste the buttons out with the
same amount of space between them all, I'm
| | 02:04 | going to make sure I have the top
button copy 3 layer selected and then I'll
| | 02:08 | hold the Shift key as I select the
button layer and that selects all four
| | 02:12 | button layers and now I'm going to go
up to the Move Tool Options bar and click
| | 02:16 | on this icon right here, which will
distribute their horizontal centers.
| | 02:20 | I would like to add some text to each
button. Unfortunately, I can't include
| | 02:24 | that text in the Smart Objects because
each piece of text needs to be different
| | 02:29 | than the other. I'm going to click on
the top button copy 3 layer to select
| | 02:32 | that one, so that the text comes in
above all the buttons. Then I'll go over to
| | 02:37 | the toolbox and select the Horizontal Type tool.
| | 02:39 | I have already setup all my type
options in the Tool Options bar up here and so
| | 02:44 | I'm just going to come in and type the
word Home with the Caps Lock key down
| | 02:48 | and then I'll go to the Type tool
Options bar and click the checkmark
| | 02:52 | to accept that type.
| | 02:53 | And then I'm going to make use of
the new spring loaded tool feature in
| | 02:57 | Photoshop CS4 to temporarily switch to
the Move tool by pressing the V key and
| | 03:02 | keeping it held down and then I'll come
in and just drag that bit of text into
| | 03:07 | the center of the button.
| | 03:07 | I am going to repeat that three more
times to add text to these other buttons.
| | 03:13 | I'll click and I'll type Gear, I'll
click the check mark, hold the V key and
| | 03:18 | reposition that text on its button.
I'll click, I'll type Videos, checkmark, V
| | 03:24 | key, reposition the text. Click Photos,
checkmark, V Key and reposition this text.
| | 03:33 | So now I have got my Smart Object
buttons all setup and they are all exactly
| | 03:37 | the same except for their text. Let's
say that I show these to a client and he
| | 03:41 | says "Nope, I don't like those buttons.
I would like buttons with a different
| | 03:45 | color and a different shape". That's
okay because I have to make a change to
| | 03:49 | only one of these buttons and they all
will automatically update with that change.
| | 03:54 | To show you that, I'm going to select
the first button layer, which is the
| | 03:57 | button on the far left. Changing the
color of a Smart Object or making any
| | 04:01 | change to its pixels has to be done
from inside the Smart Object. So I'm going
| | 04:06 | to come over to the button layer and
I'm going to double-click on its Smart
| | 04:10 | Object icon right here and I'll
click OK and that opens a second file in
| | 04:15 | Photoshop called button2.psb. This is
the original content of the Smart Object.
| | 04:23 | If you look in the Layers panel, you
will see those original layer effects. So
| | 04:27 | I would like to change the color of
this button because it's a shape layer. The
| | 04:31 | way to do that is to double-click the
left-hand icon on the button layer. That
| | 04:36 | opens the Color Picker and here I'm
going to move the sliders on the vertical
| | 04:39 | bar to change the color to something
else, maybe this lavender color and I'll
| | 04:44 | click OK. I could also change one the
layer effects. To do that, I'm going to
| | 04:49 | double-click in the blank area of the button
layer to open the Layer Style dialog box.
| | 04:54 | I would like to change the color of
the Inner Shadow from green to a more
| | 04:58 | purple color to match the new color of
the button. So I'm going to click right
| | 05:02 | on the Inner Shadow Style on the left
side of the Layer Style dialog box and
| | 05:06 | that brings up the Inner Shadow
options here, I'll click on a color field to
| | 05:11 | open the Color Picker and I'm going
to move the vertical slider up toward
| | 05:15 | purple and then I'll click OK.
| | 05:16 | I will click OK again to close the
Layer Style dialog box and of course, that's
| | 05:22 | not all I could do to the button, I
could change its shape for example. To do
| | 05:26 | that, I'm going to go to the Edit menu
and down to Free Transform Path. This is
| | 05:31 | a path because I have a vector-based
shape layer here. I can then come in and
| | 05:36 | click on any of the borders or anchor
point and drag to change the shape of the
| | 05:40 | button. I'm just going to click on
the bottom border and make the button
| | 05:43 | narrower and then I'll click the
checkmark to accept that transform.
| | 05:48 | When I'm all done making changes to the
Smart Object button, I need to save and
| | 05:52 | close the PSB file. To do that I'll go
to the File menu and I'll click Close
| | 05:59 | and I get this message asking if I want
to save the content, yes I do. And it's
| | 06:03 | important that I save in just the same
place as the original PSB. I don't want
| | 06:07 | to choose Save As and save somewhere else.
| | 06:10 | That takes me right back into my
original PSD file and as you can see not just
| | 06:16 | the Home button, but all the buttons
are automatically updated with the changes
| | 06:20 | that I made to the single Smart Object
button. Because I changed the shape of
| | 06:24 | the buttons, I would like to move
their text. So I'm going to select the top
| | 06:28 | text layer Photos, the bottom text
layer Home holding the Shift key and then
| | 06:32 | I'm going to select the Move tool and
I'm going to drag all four text layers
| | 06:37 | into place in the center of their buttons.
| | 06:39 | Using Smart Objects for the buttons
themselves insure that all my buttons were
| | 06:43 | exactly the same to start with and
made it a snap to change just one of the
| | 06:48 | buttons and have the rest
automatically update, saving time and effort.
| | Collapse this transcript |
| Creating a navigation bar with custom shape icons| 00:01 |
You can use icons to represent the
buttons on a navigation bar. This kind of
| | 00:05 |
navigation is particularly helpful if
your audience is international, because
| | 00:09 |
it doesn't depend on text. You can use
Photoshop's Custom Shape tool to create
| | 00:13 |
navigation icons. Photoshop comes with
some pre-built custom shapes like the
| | 00:19 |
fish and the butterfly that you see
here or you can define your own custom
| | 00:23 |
shape from any image even a photograph.
I'll show you how to do both here.
| | 00:27 |
I am going to start by adding a pre-
built custom shape to the partially built
| | 00:31 |
navigation bar that I have and I want
to add a button right here for SUNSPOTS.
| | 00:37 |
I'm going to go to toolbox and I'll
click on the Shape tool slot there and from
| | 00:41 |
the flyout menu, I'll pass over these
geometric shape tools and go down to the
| | 00:46 |
Custom Shape tool.
| | 00:48 |
In the Custom Shape Tool Options bar
up here, I have a Shape field. I'm going
| | 00:52 |
to click there and that opens this
small menu of pre-built Custom Shape icons.
| | 00:58 |
I don't see anything here that's
relevant to SUNSPOTS, but no worries because
| | 01:02 |
there are many more icons that ship
with Photoshop. To access those, I'm going
| | 01:07 |
to click on the arrow on the right side
of this menu and down at the bottom of
| | 01:11 |
the list I can see all the different
kinds of custom shapes available. ANIMALS,
| | 01:15 |
ARROWS, BANNERS, etcetera.
| | 01:17 |
I am going to click All and click OK
to replace the default icons with all of
| | 01:23 |
the icons. Then I'll go to the bottom
right corner of the menu and I'm going to
| | 01:26 |
click and drag down so that I can see
as many icons as possible. I'm looking
| | 01:31 |
for an icon to represent SUNSPOTS and
I see something right here that I think
| | 01:35 |
will do, this graphic of a sun. So I'm
going to click there to select it and
| | 01:39 |
then I'll go back to the Tool Options bar
and click in a blank area to close the menu.
| | 01:44 |
I want to make sure that Style is set
to this icon, which means, don't add a
| | 01:49 |
style and I can choose any color I want
from the Color field here. I'm going to
| | 01:53 |
leave it at black. I'm going to come
into the image and holding the Shift key
| | 01:58 |
to constrain proportions, I'm going to
drag out the custom shape and I can make
| | 02:03 |
this as big or as small as I want
because this shape is vector based.
| | 02:08 |
As I drag, I see these pink lines that
are Smart Guides that help me to line up
| | 02:13 |
the shape with the other icons and
with the text beneath it. I'm going to
| | 02:17 |
release my mouse and then my Shift key
and there is my custom shape. There is a
| | 02:22 |
faint line around it. That's the
vector outline. I don't like to see that, so
| | 02:27 |
I'm going to go over to the new shape
layer that was just created automatically
| | 02:31 |
in the Layers panel and click on this
vector thumbnail and then the outline
| | 02:35 |
goes away. Because a shape is vector-
based, I can make the graphic bigger or
| | 02:40 |
smaller without degrading its appearance.
| | 02:42 |
So for example, I could go to the
Edit menu, choose Free Transform and I'm
| | 02:47 |
going to hold down the Shift key that
constrain proportion and drag on one of
| | 02:50 |
the corner anchor points to make this
slightly bigger. Then I'll go to the
| | 02:54 |
Options bar and click the checkmark to
accept that transform change and finally
| | 02:59 |
I'm going to get my Move tool in
the toolbox and I'm going to drag this
| | 03:02 |
SUNSPOTS icon into place using the
Smart Guides to line up with these other
| | 03:07 |
icons. So that's how you can use a
pre-built custom shape tool to create
| | 03:13 |
navigation icons.
| | 03:14 |
I would like to have a button for
WARNINGS as well. I didn't see anything in
| | 03:18 |
the pre-built custom shape icons that
I thought would work here. So I'm going
| | 03:22 |
to create my own Custom Shape icon
from a Photograph. I happen to have a
| | 03:27 |
photograph open already, this flag2.PSD.
What I want to do is to select just
| | 03:33 |
the flag and the stand and
to use that as my new shape.
| | 03:36 |
There are many selection tools in
Photoshop and going into all of those is
| | 03:40 |
outside the scope of this particular
course. You will find more on selections
| | 03:44 |
in Photoshop CS4 Essential Training,
but I do want to show you one tool that I
| | 03:49 |
use all the time and that is the
Quick Selection tool here in the toolbox.
| | 03:53 |
This tool selects by color and tone.
So if I come into this image with a
| | 03:58 |
relatively small brush and with the
flag layer selected in the Layers panel and
| | 04:03 |
I start to drag, the Quick Selection
tool runs ahead of me selecting the beach
| | 04:08 |
and the sky and the sea by their color
and their tone and it does a pretty good job.
| | 04:13 |
I can add to the selected areas by
just clicking because the default behavior
| | 04:18 |
of this tool is to add to the existing
selection. Now I went a bit to far there
| | 04:23 |
and so there are areas that I want to
remove from the selection to do that I'll
| | 04:27 |
go up to the Options bar and click on
the third icon from the left and then
| | 04:31 |
I'll drag over the areas that I want
to remove from the selection of the
| | 04:35 |
background and if I go too far, I can
go back and get the Plus icon in the
| | 04:39 |
Options bar and come in and
add back into the selection.
| | 04:43 |
So I'm adding more to the background
that I have selected. I'll even add this
| | 04:47 |
little bird. I see one more area to
subtract, so I'll go back to the Subtract
| | 04:51 |
icon and add in the rest of the stand.
It's not a perfect selection, but it
| | 04:55 |
will do because all I need is a
silhouette to use as my custom shape.
| | 04:59 |
Now I need to have the flag selected,
not the background so I'm going to go up
| | 05:03 |
to the Select menu and choose Inverse.
I can refine the edge of this selection
| | 05:08 |
by clicking this Refine Edge button in
the Options bar and in the Refine Edge
| | 05:12 |
dialog box I can preview the selection
in various ways. I'm going to click on
| | 05:16 |
the far right icon to
preview this selection as a mask.
| | 05:20 |
I can see that these edges are pretty
soft. I would like to crisp up the edges
| | 05:25 |
and so I'm going to move the Radius
slider to the left, the Feather slider to
| | 05:29 |
the left and then I'm going to move
the Contrast slider over to the right and
| | 05:33 |
that makes the edges pretty hard. Then
I'm going to smooth them out by moving
| | 05:37 |
this Smooth slider over. That looks
pretty good to me, so I'll click OK.
| | 05:42 |
Now that I have a selection, I'm going
to convert it into a vector-based path,
| | 05:46 |
so that I can make a vector-based
shape out of it. To make this into a path,
| | 05:51 |
I'm going to click on the Paths
palette here with the Layers palette. If you
| | 05:54 |
Paths palette isn't open then you can
open it from the Window menu at the top
| | 05:58 |
of the screen.
| | 05:59 |
I am going to click on the Paths panel.
If your Paths panel isn't open, you can
| | 06:03 |
open it from the Window menu at the
top of the screen. At the bottom of this
| | 06:06 |
panel is an icon that will change the
selection into a path. I'll click that
| | 06:12 |
and now I have a Work Path. I want
this to be a real path. So I'm going to
| | 06:16 |
double -click the Work Path and say OK.
| | 06:18 |
Now, I'm going to make this into a
Custom Shape by going to the Edit menu and
| | 06:23 |
going down to Define Custom Shape.
I'll name my shape flag and click OK.
| | 06:29 |
And now I can close the flag2PSD image;
I don't need it anymore and I'm going
| | 06:34 |
to go back to the icons image. I'll go
back to my navigation bar to add my new
| | 06:39 |
Custom Shape. I'm going to select the
Custom Shape tool again and then in the
| | 06:43 |
Shape field I click and I want to
scroll down to the bottom of all of these
| | 06:48 |
icons and there I'll find my New Custom
Shape icon, the flag that I just made.
| | 06:53 |
I'll select it and I'll up to the
Options bar and I'll click in the blank area
| | 06:58 |
to close that menu.
| | 06:59 |
Now, I come into the navigation bar.
I'm going to hold the Shift key so that
| | 07:03 |
the flag doesn't distort and I'm
going to drag, to drag out the flag that I
| | 07:08 |
just made. I'm going to get my Move
tool and I'll move that into place using
| | 07:12 |
the Smart Guides and I think it's a
little bit big. So I'm going to go to the
| | 07:16 |
Edit menu > Free Transform Path,
shift and drag a corner and then press the
| | 07:23 |
checkmark in the Options bar and
with the Move tool again I'll tweak the
| | 07:28 |
position of the flag.
| | 07:30 |
If I don't want to see the vector
outline around the flag, I'll go to the
| | 07:33 |
Layers panel, where I'll see yet
another shape layer that was automatically
| | 07:37 |
created and I'll click on the vector-
shaped thumbnail there and there is my new
| | 07:43 |
icon made from a photograph.
| | 07:45 |
I am going to do that for you one more
time to create an icon for this SURFSPOT
| | 07:49 |
button here. I have got another image
open. This is a photograph from which I
| | 07:53 |
have already selected a way, the
background. So the palm tree here is on a
| | 07:58 |
transparent background. Whenever you
have a situation like this, you can make a
| | 08:02 |
selection in just a moment by going to
the layer on which the photograph lives
| | 08:07 |
and holding down the Command key on a
Mac or the Ctrl key on PC as you click
| | 08:12 |
directly on the thumbnail on that layer
and that will select the content of the
| | 08:16 |
transparent layer.
| | 08:17 |
With this selection I'm going to go to
the Path panel. I already have a Work
| | 08:21 |
Path started there for me, so I'm just
going to double-click it and say OK and
| | 08:26 |
now I have a path around the palm tree.
I can deselect by pressing Command+D on
| | 08:30 |
a Mac or Ctrl+D on a PC and then I'm
going to go to the Edit menu and again I'm
| | 08:36 |
going to define Custom Shape.
I'll call this palmtree and click OK.
| | 08:40 |
I can close the palm tree photograph
now and back at the navigation bar I'll
| | 08:45 |
select Custom Shape tool, I'll go to
the Shape field, I'll scroll to the bottom
| | 08:49 |
of all of these icons and I'll select
the palm tree icon which now appears there.
| | 08:54 |
I will go to the Tool Options bar and
click in the blank area to close that
| | 08:57 |
menu and then holding the Shift key,
I'm going to drag out an icon for
| | 09:01 |
SUNSPOTS. I'll get the Move tool. I'll
move that where I want it lining it up
| | 09:05 |
with the other icons using the Smart
Guides and now if I look in the Layers panel,
| | 09:10 |
I have a third shape layer.
I'm going to click on the vector thumbnail
| | 09:14 |
on that layer to remove the outline
from around the palm tree. So that's how
| | 09:17 |
you can make navigation icons using
either pre-built custom shapes that come
| | 09:23 |
with Photoshop or creating your own
unique custom shapes from any photograph or graphic.
| | 09:29 |
| | Collapse this transcript |
| Building a gel button| 00:01 | Gel buttons are everywhere on the web,
and there is more then one way to make them.
| | 00:04 | Here is a method for making a
Gel button that applies skills that you
| | 00:08 | have learned in this course. How to
use a shape tool and how to layer on
| | 00:12 | customize layer effects in a layer style.
I hope you will use this lesson as a
| | 00:16 | starting point, and then add your own
spin to get some great looking custom
| | 00:20 | made buttons. I'm going to start by
selecting the rounded rectangle tool from
| | 00:25 | the Shape tool slot in the toolbox.
The radius field in the Tool Options bar
| | 00:29 | determines how round the corners of the
rounded rectangle will be. I'm going to
| | 00:34 | increase from the default of 10 to
around 36, because I want to make a button
| | 00:39 | that has very rounded edges in a pill shape.
| | 00:41 | I am going to come into the Navigation
bar here, and I'm going to drag out a
| | 00:46 | button. It fills with black
automatically, because that's the foreground color,
| | 00:50 | and if you notice in the Layers panel
it automatically made a shape layer.
| | 00:54 | I'm going to click off the vector thumbnail
on that shape, so that I don't see the
| | 00:58 | vector outline around the button. Now
I'm going to start adding layer effects
| | 01:02 | to this button. To open the Layer
Styles dialog box, I'm going to double-click
| | 01:06 | in the blank area of the shape layer.
That's an alternative to coming down to
| | 01:11 | the fx icon and choosing one layer effect,
as I've shown you how to do in other movies.
| | 01:16 | In the Layer Style dialog box, I'll add
my fist layer effect Color Overlay. To
| | 01:21 | apply it to this button, I'll check
the Color Overlay style here. The default
| | 01:25 | is red. Red isn't what I want, so I'm
going to click on color overlay, and that
| | 01:30 | brings up the color overlay options
in the middle of the Layer Style dialog
| | 01:34 | box. Here there is a color field, I'm
going to click in the color field to open
| | 01:38 | the Color Picker, and then I can move
my mouse outside of the Color Picker and
| | 01:42 | it changes to and Eye Dropper.
I'm going to come over the Swatches panel and
| | 01:45 | I'm going to sample a light green
from the default set of Swatches, but any
| | 01:50 | light color will do here.
| | 01:51 | Now, I'm going to click OK to close
the Color Picker. The second layer effect
| | 01:54 | that I'm going to add is a Satin Effect.
I'll click on Satin here. And right
| | 01:59 | away you can see that darker area in
the button. I'm going to do some major
| | 02:03 | customizing on this effect. So I'm
going to select the Satin effect in the
| | 02:07 | Styles list here. I'll start working
with the Satin Effect option. The first
| | 02:11 | thing I want to do is to change the
color of this effect, it's too dark for me.
| | 02:15 | So I'm going to go over to the Color
Field here, click, and with the Color
| | 02:19 | Picker open, I'm going to go back to
the Swatches panel, and I'll sample light
| | 02:22 | green again, but this time after I
sample the light green, I'm going to make
| | 02:27 | the color a bit brighter than the
color I used for the Color Overlay effect.
| | 02:31 | With the B button selected here for
brightness, I'll move the sliders on the
| | 02:35 | vertical color bar up to choose a
lighter green, and then I'll click OK. You
| | 02:39 | can barely see that color here, but you
will see it more clearly in just a few
| | 02:43 | seconds when I change some of these
other options. I'm going to change the
| | 02:47 | blend mode here from Multiply, which
darkens, to Overlay, which sometimes
| | 02:51 | darkens and sometimes lightens,
depending on the colors involved.
| | 02:54 | You can see that the Satin Effect
is now lighter in the button. I would
| | 02:57 | actually like to change it so that
it's going straight across the button. So
| | 03:01 | I'm going to this Angle Wheel, and I'm
going to move it up to 90 degrees. Now
| | 03:06 | I'm going to expand the distance and
size of this Satin Effect. I'll put both
| | 03:10 | of these sliders to about 25. You can
also just type numbers in here if you
| | 03:15 | wish. The Contour field affects the
shape of a layer effect. Usually, I
| | 03:19 | approach Contour by opening the
Contour menu, by clicking on the arrow to its
| | 03:23 | right, and just cycling through the
various Contours until I see one that I
| | 03:27 | like. In this case I'm going to stick
with this one, the second from the left
| | 03:31 | on the bottom. This is the ring contour,
and to blend the edges of the effect
| | 03:36 | with the button a little better,
I'm going to choose Anti-alias here.
| | 03:39 | Now you are starting to really see an
effect on the button. I'm going to add
| | 03:42 | another effect, and that's Bevel and
Emboss. I'll check Bevel and Emboss in the
| | 03:46 | styles list, and then I'll click on
Bevel and Emboss, so that I get the options
| | 03:51 | over here. Keep your eye on the
parameter of the button as I check Contour,
| | 03:55 | which adds a lot more shading around
the edge of the button. I'm going to
| | 03:58 | increase the size of the effect a
little bit, I'll put size up to 7 and I'll
| | 04:03 | soften just a bit as well to get a
softer bevel. You can experiment with some
| | 04:07 | of these settings, because you have
an interactive preview going on in the
| | 04:10 | button as long as the
preview box here is checked.
| | 04:13 | Another important change that I'm going
to make in the Bevel and Emboss Effect
| | 04:17 | is down here in the shading area. For
the highlight mode, I'm going to increase
| | 04:22 | the Opacity all the way up to 100%, and
for the shadow mode, I'll take Opacity
| | 04:27 | all the way down to 0%.
| | 04:29 | Now I'm going to add an Inner Glow
layer effect. So I'll click on the Inner
| | 04:32 | Glow in the styles list. You can see
it here around the parameter of the
| | 04:36 | button, and then I'll select Inner Glow
to bring up the Inner Glow options.
| | 04:40 | I'm going to change the color from yellow
to a green color to match the button by
| | 04:44 | clicking in the color field and then
moving over to green, and I'll click OK
| | 04:49 | there. And then I'm going to make the
Inner Glow darker by changing its blend
| | 04:53 | mode from screen, which is a lightening
effect, to multiply which is darkening
| | 04:57 | effect. I'm going to increase the Choke
field here quite a bit, maybe to about
| | 05:03 | there, and I'll increase the size as
well to bring out that Inner Glow a little
| | 05:08 | bit more. And now I actually think I'm
going to go back and change that green
| | 05:11 | color making it something darker. So
I'm going back to the color field, and I'm
| | 05:15 | going to darken the green
there, and I'll click OK.
| | 05:18 | One last effect, I'm going to add an
Inner Shadow Effect, by clicking on the
| | 05:21 | checkbox next to Inner Shadow in the
Styles list, and then selecting Inner
| | 05:25 | Shadow. The shadow here at the top of
the button is pretty dark right now, so
| | 05:30 | I'm going to click on the black color
in the Inner Shadow options, and I'll
| | 05:35 | move the sliders up to bring in some
color, and then I'm going to click on
| | 05:39 | green, and then I'll drag the sliders
down to get a darker green, black is just
| | 05:45 | too harsh, and I'll click OK. I would
like to increase the size of that shadow,
| | 05:50 | so I'm going to increase Choke, and
I'll increase the size bit too. Now you
| | 05:55 | really starting to see a Gel Effect in
the button caused by Highlights, Shadows
| | 06:00 | and Bevels in the various layer
effects that I have been combining in this
| | 06:03 | complex layer style I'm making.
| | 06:05 | Now the next and last effect is not
really necessary, but you can add it if you
| | 06:09 | want, and that's an Outer Glow. I'll
select the Outer Glow, and I think it's a
| | 06:14 | bit bright right now, so I'm going to
go to the Opacity slider, and I'm going
| | 06:18 | to lower that. I'm going to increase
the size of the outer glow, and I'm going
| | 06:22 | to change its color too. So I'll click
in the Color box, and instead of yellow,
| | 06:27 | I'm going to pick a greener color to
match the button. May be I'll make that
| | 06:30 | just a little bit darker as well,
and click OK. If I wanted to save this
| | 06:34 | complex style so that I could apply it
to other buttons later. As I have shown
| | 06:38 | you in other movies, I'll click the
New Style button here, and my style would
| | 06:42 | appear in the styles panel.
| | 06:44 | For now I'm just going to click OK,
and there is a new Gel button. As you can
| | 06:48 | see the combination of layer effects
that I applied to this button had a
| | 06:53 | dimension and really gave it the look
of a Gel button, but remember that the
| | 06:57 | options that I chose aren't set in
stone. You can tweak any of the effects in
| | 07:02 | this complex layer style to get a
unique look for your own Gel buttons.
| | Collapse this transcript |
|
|
8. Preparing Photographs for the WebFollowing a web photo workflow| 00:00 |
When you are preparing photographs
for the web, I suggest that you follow a
| | 00:03 |
workflow that not only makes you
efficient but that also helps you to create
| | 00:08 |
high quality JPEGs for the web and
that helps you to protect your original
| | 00:12 |
photographs from being permanently
altered. Of course, the first step in your
| | 00:16 |
photo workflow would be to open a
photograph in Photoshop. You can just go to
| | 00:20 |
the File menu and choose Open but
another way to do it is to use Adobe Bridge
| | 00:25 |
and to choose your images visually and
open them from there or I can just click
| | 00:29 |
on this Launch Bridge icon.
| | 00:33 |
Adobe Bridge is an image management and
viewing program. You can use it to sort
| | 00:38 |
and label and rate and organize image
files. All of that is outside the scope
| | 00:42 |
of this particular course, although
you can learn more about Bridge in other
| | 00:46 |
courses in the lynda.com Library. But
what I want to show you now is how you
| | 00:50 |
can see and then open a file
from here in Bridge into Photoshop.
| | 00:54 |
I am looking for a photograph that I
know is in my Exercise Files. To find it
| | 00:59 |
in Bridge, I can navigate in the
Folders panel on the 08_01 sub-folder and that
| | 01:06 |
shows me in the Content panel
thumbnail previews of the contents of that
| | 01:10 |
sub-folder. As you can see, Bridge can
display lots of different file formats,
| | 01:14 |
JPEG, GIF, PSD, layered Source files,
Illustrator files, PDF files, TIFs and
| | 01:22 |
RAW files.
| | 01:24 |
You can even preview a Flash
animation or a QuickTime movie here in Adobe
| | 01:28 |
Bridge. If I want to open one of these
images into Photoshop, all I have to do
| | 01:33 |
is double-click the JPEG and it opens
in Photoshop ready for editing. I'm going
| | 01:37 |
to close it now and go back to Bridge
so that I can show you what happens when
| | 01:41 |
I open a RAW file rather than a JPEG.
| | 01:45 |
This is a RAW file from a Cannon
camera. A RAW file is basically the raw
| | 01:50 |
uncompressed image data from a
camera's sensor. If I double-click on this
| | 01:54 |
photograph, it opens not in Photoshop
proper but rather in the Adobe Camera Raw
| | 02:00 |
interface, which is separate from
Photoshop. It's a plug-in. If you would like
| | 02:04 |
to learn about Camera Raw, you will
find other material about this subject in
| | 02:08 |
the lynda.com Library.
| | 02:10 |
For now, I just want to show you what I
would do with the file for the web. So
| | 02:14 |
here I might make a few adjustments.
I'll drag the Exposure slider over, the
| | 02:19 |
Blacks slider, maybe I'll add some
Clarity and some Vibrance and once I have
| | 02:24 |
made my adjustments, I'll come down to
the Workflow Options at the bottom of
| | 02:27 |
the screen and make some changes for the
web in the Workflow Options dialog box.
| | 02:33 |
I am going to go to the Space field and
change the color space of the image to
| | 02:37 |
sRGB, which is the recommended color
space for images destined for the web.
| | 02:42 |
I'll also change the Bit Depth to 8-Bit,
which is the proper Bit Depth for the
| | 02:47 |
web, and if I'm going to be preparing
the image only for the web, then I'll go
| | 02:51 |
to the Size field and make that smaller too.
| | 02:54 |
However, if I think that after I make
changes to the image in Photoshop, I
| | 02:58 |
might want to make a print as well as
make a web image, then I would leave the
| | 03:02 |
size as is, but for now I'm going
to make it smaller. I'll talk about
| | 03:06 |
resolution in the next movie in this
chapter but the main thing to remember at
| | 03:09 |
this point is you don't have to
change the resolution. Because when you are
| | 03:13 |
preparing an image for the web, you are
not interested in the number of pixels
| | 03:16 |
per inch; you are interested in just
the pixel dimensions, which I set here in
| | 03:21 |
the Size menu. Click OK and to open
the image in Photoshop with all of these
| | 03:26 |
changes, I'll click the Open Image
button and now I have my image here in
| | 03:30 |
Photoshop ready to be adjusted or manipulated.
| | 03:34 |
I suggest that you try to practice Non-
destructive editing, keeping the pixels
| | 03:38 |
in the photograph layer untouched. So
for example, let's say that I wanted to
| | 03:43 |
eliminate the birds from the
photograph. I'm working in the Color and Tone
| | 03:47 |
workspace and I'm going to get the Spot
Healing Brush and rather than just come
| | 03:52 |
right into the photograph layer and
try to remove the birds, I'm going to
| | 03:56 |
create a new layer in the Layers panel
by clicking the Add New Layer icon down
| | 04:00 |
here. And with that new layer selected,
I'll go up to the Spot Healing Brush
| | 04:05 |
Options bar and check Sample All Layers
and then I'll come in and click on the
| | 04:10 |
bird in the sky to cover him up with
pixels sampled from nearby and that's all
| | 04:15 |
taken care of on this new Layer 1,
rather than on the photo layer, the
| | 04:19 |
Background layer here.
| | 04:21 |
Similarly, if I wanted to make an
adjustment, change the image to black and
| | 04:25 |
white. I would use an adjustment
layer rather than making an adjustment
| | 04:29 |
directly on this Background photo layer.
By the way, if you do want to display
| | 04:33 |
a photo in black and white on the web,
you still have to save it out as an RGB
| | 04:37 |
color mode photo.
| | 04:38 |
So If I wanted to make this black and
white, I could come up to the Black and
| | 04:42 |
White Adjustment Layer icon here in
the new Adjustments panel, select that to
| | 04:47 |
create a Black and White adjustment
layer in the Layers panel and then I could
| | 04:51 |
tweak the sliders here to make a
custom black and white adjustment. I can add
| | 04:55 |
Type layers, I can add filters and
layer effects and manipulate the photo in
| | 05:00 |
many different ways here in Photoshop.
| | 05:02 |
But when I'm all done, an important
part of the workflow is to save the master
| | 05:06 |
file as your source file with all of
its layers and all of the changes that you
| | 05:10 |
have made. To do that, I'm going to
go to the File menu at the top of the
| | 05:13 |
screen and down to Save As. I'm going
to save on my Desktop and I'm going to
| | 05:19 |
make a folder there by clicking the New
Folder button and I'll call this source
| | 05:23 |
files and click Create. I'll make
sure that Layers is checked here and then
| | 05:29 |
I'll click the Save button and I'll click OK.
| | 05:31 |
The source files are important because
after you have optimized this photograph
| | 05:36 |
as a JPEG and placed it on the web,
if you wanted to come back and change
| | 05:40 |
something about it, you would need to
come back to the original source file,
| | 05:43 |
because they are optimized in the JPEG
format, which is a lossy file format.
| | 05:47 |
You don't want to be re-optimizing
JPEGs over and over. So you want to come
| | 05:51 |
back and make changes in the original
source file and then re-optimize for the web.
| | 05:57 |
There are two more steps that I
recommend in a photo workflow. The first of
| | 06:01 |
those is to make a copy of your master
file and resize that copy for the web,
| | 06:06 |
then to sharpen the resized copy. Once
you have finished all that, you will be
| | 06:11 |
ready to take the photo into the Save
for Web and Devices window as I have
| | 06:14 |
shown you how to do in many
other movies in this course.
| | 06:18 |
So that's the workflow that I recommend
that you follow when you are preparing
| | 06:21 |
photographs for the web. I think
this will help you to create the best
| | 06:25 |
photographs for display on you
website and to practice productive and
| | 06:29 |
non-destructive editing.
| | 06:33 |
| | Collapse this transcript |
| Resizing a copy for the web| 00:00 | Resizing a photograph for displaying
on the web is an important step in your
| | 00:04 | photo preparation workflow. I recommend
that you resize a copy after you have
| | 00:08 | edited the original photograph with all
of the file layers intact and save the
| | 00:12 | result as a master source file in
PSD format. That's the Photoshop native
| | 00:17 | format. That will give you the
flexibility to make copies of the master in
| | 00:21 | various sizes for the web and for other uses.
| | 00:24 | I am working in the Essentials
workspace and here I have a master source file,
| | 00:28 | a photograph to which I have added some
edits that you can see over here in the
| | 00:32 | Layers panel. I have added a Black and
White adjustment layer, which I'll turn
| | 00:36 | on and off for you to see, and I
have done some retouching on this layer
| | 00:41 | eliminating this bird from the sky.
| | 00:43 | Now I want to resize a copy of this
master source file to post on the web.
| | 00:48 | Before I resize, I'll check the
current dimensions of the file. One way to do
| | 00:52 | that is to go up to the application
bar and turn on the Rulers from this View
| | 00:56 | Extras menu, I'll choose Show Rulers
and the horizontal and vertical rulers now
| | 01:01 | appear in the document window. If the
rulers are displaying in inches like they
| | 01:05 | are here, I'll Ctrl-click or right-
click on a PC inside either the horizontal
| | 01:10 | or the vertical ruler and I'll choose
Pixels from the menu that pops up and now
| | 01:15 | the rulers display pixels to measure
the width and the height of this file. I
| | 01:21 | can get the same information in
another form by clicking down here at the
| | 01:24 | bottom of the document window in the
Document Information field. This photo is
| | 01:28 | currently 1024 pixels wide and 1536
pixels high which is bigger than the size
| | 01:35 | that I would like it to be for posting
on the web. So I move out of this box
| | 01:39 | and release my mouse and now I
begin to make the photo smaller.
| | 01:43 | To do that, I'm going to go up to the
Image menu at the top of the screen and
| | 01:46 | choose Image Size. In the Image Size
dialog box, the first thing that I'll do
| | 01:51 | is make sure that Resample Image is
checked. If the Resample Image box was
| | 01:56 | unchecked like this, I wouldn't be
able to go up here and change the pixels
| | 02:00 | dimensions in the file, which is what
I want to do when I'm resizing an image
| | 02:04 | for the web. So I'll turn Resample
Image back on by checking its box which
| | 02:08 | tells Photoshop that I want to change
the number of pixels in this file or
| | 02:12 | although I don't recommend it, by
manufacturing pixels to add to make the file
| | 02:16 | bigger. I'll also make sure that the
Constraint Proportions box is checked here
| | 02:22 | so that when I change the height of
the photo in pixels, the width will
| | 02:25 | automatically change proportionately
and if I would add a layer styles like a
| | 02:30 | Drop Shadow or Bevel and Emboss to
this image, I want to make sure that Scale
| | 02:34 | Styles was also checked so that the
style would resize along with the image.
| | 02:39 | Even though I don't have any layer
styles in this image, I usually always leave
| | 02:42 | this checked.
| | 02:44 | Next, I'll go down to the
interpolation method menu here at the bottom of the
| | 02:48 | Image Size dialog box. Because I'm
reducing the size of this file, the best
| | 02:53 | choice is by Bicubic sharper because
it tries to maintain detail in sharpness
| | 02:57 | while downsizing a file and now I'm
ready to change the dimensions of this file.
| | 03:03 | To do that, I'm going to go up to the
Pixel Dimensions area of the Image Size
| | 03:06 | dialog box and I'll type in the number
of pixels tall that I would like this
| | 03:11 | image to be for my web page. In the
Height field, I'm going to type in 200 and
| | 03:16 | the Width field changes
automatically in proportion to this height to 133
| | 03:21 | pixels wide. If I needed this photo to
fit in a particular size box that was of
| | 03:25 | a different ratio, then I would have to
crop the image to get it to fit. Notice
| | 03:30 | that the total file size is
significantly reduced. This is basically the amount
| | 03:34 | of space that the file will take up
in memory or on disk and it has been
| | 03:39 | dramatically reduced from what it was. 4
.5 megabytes down to 77.9 kilobytes as
| | 03:46 | a result of reducing the pixel dimensions.
| | 03:48 | I am going to ignore the Document
Sizes field because when I resize an image
| | 03:52 | for the web in this dialog box, I'm
interested really only in the pixels
| | 03:56 | dimensions up here. I don't have to
bother changing the Resolution field down
| | 04:00 | here because this field refers to the
number of pixels that would be allocated
| | 04:04 | to each inch if the file were
printed in inches and so this field is only
| | 04:08 | relevant if I'm planning to print the image.
| | 04:12 | Now I'll click OK and that reduces the
photo but I'm looking at it now at only
| | 04:16 | 33%. So I'm going to go up to the
application bar and choose 100%. Now I'm
| | 04:22 | going to save the resized file in
Photoshop format, so that I have got an
| | 04:25 | edited, layered version that I can
come back to if I need to make any changes
| | 04:30 | after I have published the JPEG
version of the file. I'll go up to the File
| | 04:34 | menu, choose File > Save As because I
don't want to save over the master source
| | 04:38 | file. In the Save As dialog box, I'll
navigate to my Desktop and there I'm
| | 04:44 | going to make a new folder, I'm going
to call this one resized for web and
| | 04:49 | click Create. In the Save As field,
I'll change the name of this file slightly
| | 04:54 | so I know that this is a version that
has been resized for the web and then I'm
| | 04:57 | going to go down and make sure that
Layers is checked and that Format is set to
| | 05:01 | Photoshop in order to reserve the
layers that I have added to the file.
| | 05:05 | Finally, I'll click Save and I'll click OK.
| | 05:08 | Now I'm going out to my Desktop, I'll
look inside the resized for web folder
| | 05:12 | and there is the image that I just made,
it is reduced in size down to 133 by
| | 05:18 | 200 pixels.
| | 05:20 | The next steps in the photo preparation
workflow that I recommend is to sharpen
| | 05:24 | this resized version of the file and
then to open it in the Save for Web &
| | 05:29 | Devices window to optimize it and
make another copy in the JPEG format for
| | 05:33 | posting on the web.
| | Collapse this transcript |
| Sharpening for the web| 00:00 | Almost every digitized photograph can
benefit from some sharpening. Even if you
| | 00:04 | don't notice at first that the image is
soft. I suggest that you sharpen after
| | 00:09 | you have resized a copy of the file in
the size that you are going to post it
| | 00:12 | on the web and before you
optimize the file in JPEG format.
| | 00:16 | The reason to sharpen after you have
resized is that the sharpening setting
| | 00:20 | that you choose will vary
depending on the size of the file.
| | 00:24 | Here I have a layered PSD file that I
have already resized for my website. Over
| | 00:29 | in the Layers panel, you can see that
I have added several adjustment layers
| | 00:32 | and a retouching layer. I would like
to keep these layers in the file but
| | 00:36 | sharpening will affect only one layer.
So before I sharpen, I'm going to make a
| | 00:40 | composite of all of these
layers and sharpen the composite.
| | 00:44 | I am working in the Color and Tone
workspace. I'll click on the top layer here
| | 00:49 | and then I'm going to go to the panel
menu at the right side of the Layers
| | 00:52 | panel, hold down the Option key on the
Mac. That's the Alt key on the PC. As I
| | 00:56 | select Merge Visible and that creates
a new layer here that's a composite of
| | 01:00 | the content of all the layers below.
I'm going to rename that layer sharpen and
| | 01:05 | now with the sharpen layer selected,
I'm going to apply a smart filter. I'll go
| | 01:10 | up to the Filter menu and down to
Convert for Smart Filters and I'll click OK.
| | 01:16 | Now, if I look at the sharpen layer, I
see that there is a smart object icon on
| | 01:21 | that layer. Converting for Smart
Filters allows me to apply sharpening filter
| | 01:26 | in a way that doesn't directly change
the pixels on this layer and in a way
| | 01:30 | that will allow me to come back
later and reedit my sharpening settings.
| | 01:34 | Now I can come up to the Filter menu
and go down to the Sharpen category. I
| | 01:38 | suggest either using Smart Sharpen or
Unsharp Mask. I'm going to use Smart
| | 01:43 | Sharpen because it offers this nice big
preview for you to see and also because
| | 01:48 | it offers more settings than Unsharp
Mask. But it does work in a very similar
| | 01:52 | way to the Unsharp Mask filter.
| | 01:55 | By default the Basic button is
selected and that offers the settings that you
| | 01:58 | see here. I'm going to leave the
Remove settings at Gaussian Blur. I'm also
| | 02:03 | going to leave More Accurate checked.
This control was designed to give more
| | 02:07 | accurate blur removal. If you are
working on a very large file for print, this
| | 02:11 | can slow things down but on a small
file like this one for the web, you won't
| | 02:14 | notice any effect. So I'll
leave More Accurate checked.
| | 02:18 | Now I'm going to come to the Amount and
Radius sliders. I'm going to exaggerate
| | 02:22 | those so that I can show you how
sharpening works. I'm going to drag Amount all
| | 02:25 | the way over and I'm going to
increase Radius to a larger number than I
| | 02:29 | normally would use and now you can see
that the image in the preview is very
| | 02:32 | crispy looking. I'm going to zoom in by
clicking the plus button underneath the
| | 02:37 | preview. Now normally I would not
zoom in to this percentage when I was
| | 02:41 | sharpening but I want to
show you what sharpening does.
| | 02:44 | The sharpening filters look for edges
of high contrast. For example, the black
| | 02:50 | of the surfer's pants against the
white of the wave. At those high contrast
| | 02:54 | edges, the filter makes the light
pixels lighter and the dark pixels darker and
| | 02:59 | that gives the illusion of sharpness.
You can control that effect with the
| | 03:03 | Amount and the Radius sliders. The
Amount slider effects how light or how dark
| | 03:08 | those edge pixels will become. So keep
your eye on those pixels as I move the
| | 03:12 | Amount slider way down to more like 90
and you can see that the lightening and
| | 03:17 | darkening edge effect is much more subtle.
| | 03:19 | The Radius slider determines how many
pixels out from those high contrast edges
| | 03:24 | will be affected by this sharpening. I
usually keep the Radius pretty low, I'm
| | 03:28 | going to go maybe down to .7 and now
you can see there is just a thin line
| | 03:33 | along the edge of light pixels and dark pixels.
| | 03:37 | I notice that there is a hallo of light
pixels around the surfer's head and the
| | 03:41 | lightening is particularly noticeable
along his right leg. The good news is
| | 03:45 | that with Smart Sharpen, you can
control the amount of sharpening in the
| | 03:48 | highlights separately from the
amount of sharpening in the dark areas.
| | 03:52 | To do that, I'm going click on the
Advanced button here and that offers the
| | 03:56 | Shadow tab and a Highlight tab here
and I'm actually going to go back to 100%
| | 04:01 | view. I can still see that there is a
little hallo of light around the surfer's
| | 04:06 | head and along his right leg. So I'm
going to drag the Fade Amount slider up,
| | 04:10 | maybe to around 15. That adjusts the
amount of sharpening in the highlights.
| | 04:15 | I don't want to go too far because
then I'll also loose my sharpening in the
| | 04:18 | rest of the highlights in the water here.
I'm also going to increase the Tonal
| | 04:22 | Width slider, which controls the range
of highlights that are affected by this
| | 04:26 | Fade Amount setting. So I'm going to
drag that up until I see the white line
| | 04:31 | along the surfer's right leg start to
disappear. I think that looks a little
| | 04:36 | better and I'll leave the
Radius setting as it is.
| | 04:39 | Now I'm going to click OK to accept
these sharpening settings and I'll do a
| | 04:43 | before and after comparison in my image.
That's how it was and that's how it
| | 04:49 | is. If I wanted to make a change, I
can always go back into the Smart Sharpen
| | 04:54 | filter because I have the foresight to
make this into a smart filter. So I can
| | 04:59 | double-click on Smart Sharpen and that
reopens the dialog box. I could go back
| | 05:03 | to the Sharpen tab, for example, and
I could sharpen a little bit more and
| | 05:07 | click OK.
| | 05:09 | The other advantage of having your
smart filters is that a smart filter comes
| | 05:13 | with a layer mask of its own and I can
use that layer mask to target exactly
| | 05:18 | the area that's going to be sharpened.
To do that, I'm going to go over to the
| | 05:22 | toolbox and I'm going to select the Brush tool.
| | 05:25 | I have got a pretty large 200 pixel
soft brush selected and I have black as my
| | 05:30 | foreground color in the toolbox.
I'm going to come over to the Layers panel and
| | 05:34 | I'm going to click on the layer mask,
here on the Smart Filters layer and then
| | 05:39 | with black and a soft brush, I'll paint
over the areas of the photo that I want
| | 05:43 | to protect from the
sharpening that I just applied.
| | 05:46 | So I'm going to all around the edges,
so that the main thing that sharpened is
| | 05:50 | the surfer himself in the middle and
I haven't painted there. I'm going to
| | 05:53 | Option-click on that mask so that you
can see that I have painted around the
| | 05:57 | edges with black. All of those areas
will be protected from the sharpening
| | 06:00 | settings. The areas that are white
will have the sharpening applied and those
| | 06:04 | that are grey will have a lesser
amount of sharpening. I'll Option-click to
| | 06:09 | come back to normal view.
| | 06:11 | So as you have seen, sharpening can
really add some punch to your photographs
| | 06:14 | and if you make use of the features
that I just showed, you can use sharpening
| | 06:18 | to draw the viewer's eyes directly to
the subject. So don't forget to sharpen
| | 06:22 | all your photographs before
your optimize them for the web.
| | Collapse this transcript |
|
|
9. Laying Out Page CompsStarting a new file from scratch| 00:00 | Whether you are building a navigation
bar, a layered web graphic or entire
| | 00:04 | webpage comp, if you are starting from
scratch in Photoshop, your first step
| | 00:09 | will be to make a new file.
| | 00:10 | In Photoshop's New dialog box, you
will encounter some terms like Color Mode,
| | 00:15 | Bit Depth and Resolution, all of
which you will hear about in this movie.
| | 00:19 | So let's say that I'm about to create
a new blank file in which I'm going to
| | 00:23 | build a webpage layout. Before I begin
building a layout, it's a good idea to
| | 00:27 | so some research to try to determine
the best size for the layout. I have tried
| | 00:32 | to guesstimate the setup in which my
particular audience is likely to view the
| | 00:36 | web page that I'm building. In other
words, what platform it really be on; Mac
| | 00:40 | or Windows, what Web browser will
they most likely use and what will be the
| | 00:44 | display resolution of their monitors?
| | 00:46 | If I get some answers to that from my
research, then I'll go ahead and simulate
| | 00:50 | that setup on a computer and make a
screenshot of the Web browser as I have
| | 00:55 | done here. To make a screenshot, you
can either use the screenshot commands
| | 00:59 | that are built into your operating
system or you can use a separate screenshot
| | 01:03 | application. Here is the screenshot
that I have made of the Safari Web browser
| | 01:08 | opened on a Mac with my display
resolutions set to 800X600. What I want to do
| | 01:13 | with this with this file open in
Photoshop is to measure the content area that
| | 01:17 | I can see here.
| | 01:18 | To do that, I'm going to go to the
toolbox. In this slot where I normally see
| | 01:22 | the Eyedropper tool, there is a tool
called the Ruler tool. I'm going to select
| | 01:27 | that one and then I'm going to come
into the screenshot and I'm going to start
| | 01:31 | at the top of the content here, not
including the tool bars that are the part
| | 01:34 | of the Web browser above that.
| | 01:36 | So I'll click where the content begins
and drag straight down and before I get
| | 01:40 | to that scroll bar at the bottom, I
release the mouse and I get this figure 447
| | 01:45 | pixels in the tool options bar as the
height of the content area. I'll make a
| | 01:49 | note of that and then I'll do the same
thing starting from the left side of the
| | 01:53 | content area and over to the right,
stopping before I get to the scroll bar and
| | 01:58 | that gives me another number up here.
| | 02:00 | Now I round out these two numbers, I
get about 780 pixels of width and 440
| | 02:06 | pixels of height that a viewer could
see with this setup without having to scroll.
| | 02:10 | So those are the numbers that I'll use
as I create my webpage layout in Photoshop.
| | 02:15 | I am going to close this screenshot
for now and go up to the File menu and
| | 02:20 | choose New. Here in the New dialog box,
I can give the file a name. I'll call
| | 02:24 | this homepage_comp and I don't have to
add the file format. That will be added
| | 02:30 | automatically when I save the file.
The Preset is set to Default Photoshop
| | 02:34 | Size. There are some other options
here, but I'm going to leave that at the
| | 02:37 | Default Photoshop Size and fill
in all these fields to myself.
| | 02:41 | First, I'll setup the width and height
of the web page layout that I'm making.
| | 02:45 | Because I'm designing for the web and
not for print, I'm going to change the
| | 02:48 | units of measurement over here from
inches to pixels and when I do that in the
| | 02:53 | Width field, the Height field
automatically changes to pixels also and then
| | 02:58 | I'll type in the dimensions that I
just figures out: 780 pixels of width and
| | 03:03 | 440 pixels of height.
| | 03:05 | The next field is the Resolution field.
Because I have set the dimensions of
| | 03:08 | this file in pixels up here, it
really doesn't matter what number is in the
| | 03:12 | Resolution field. It doesn't have to
be 72 as you may have heard, because in
| | 03:17 | this dialog box in Photoshop
resolution just means the number of pixels that
| | 03:21 | would be allocated to every
printed inch if the file were printed.
| | 03:26 | I don't intend to print the file, I'm
making it for the web and the size on
| | 03:30 | screen will be fixed by the number of
pixels of width and height that I have
| | 03:34 | entered here regardless of what's in
this resolution box. So for example,
| | 03:38 | notice that width and resolution of 72,
the image size reported over here on
| | 03:42 | the right is 1005.5 kilobytes. If I
were to type a different number in the
| | 03:47 | resolution filed, say 300, the image
size stays the same. I'll go ahead and put
| | 03:52 | that back to 72, because I know some
people are more comfortable with that but
| | 03:56 | it really doesn't matter.
| | 03:58 | Now I'm going to move to the Color
Mode field and I'm going to leave that set
| | 04:01 | to RGB color. Color Mode is the
color model that will be used to describe
| | 04:06 | colors in the image. When you design
for the web, color mode should always be
| | 04:10 | set to RGB color, because a Web
browser can't read these other options: CMYK
| | 04:14 | color, Grayscale color or the other
choices here and this is true by the way,
| | 04:19 | even if you are creating a file that
you want to have a pure black and white on the web.
| | 04:23 | The next field is for Bit depth. Bit
depth is the amount of color information
| | 04:28 | in the image. Although Photoshop
support 16-Bit images, today's Web browsers
| | 04:32 | don't. So I leave this set to 8 bit.
Then I'll move to the Background Contents
| | 04:37 | field. I can set this to white or to
whatever color it happens to be in the
| | 04:42 | Background Color box in the toolbox or
if I'm making a transparent graphic, I
| | 04:46 | could choose Transparent here.
| | 04:48 | Whatever you choose here isn't really
crucial, because you can always change
| | 04:52 | the background color later. I'm going
leave this set to White and I'll just
| | 04:56 | open up the Advanced area here so that
you can see the Color Profile field is
| | 05:00 | set to sRGB because that happens to be
the working RGB color space that I have
| | 05:06 | set in my color settings as I have
described in another movie and this is the
| | 05:10 | best color profile for a file that
you are making for the web and the Pixel
| | 05:14 | Aspect Ratio, I'll leave it at
the Default, it's not relevant.
| | 05:17 | I am going to close the Advanced area
by clicking this arrow and then I'm going
| | 05:21 | to click OK to open this new file
that's all ready to be worked on in
| | 05:25 | Photoshop. I'm going to save the file.
I'll go to the File menu and notice that
| | 05:29 | the Save option is not available. It's
grayed out. That's because this file has
| | 05:33 | never been saved. So instead, I'll
choose Save As and in the Save As dialog
| | 05:38 | box, I'm going to navigate to my Desktop.
I'll make sure that Format is set to
| | 05:42 | Photoshop, because I want to make a
file that has lots of layers and other
| | 05:46 | Photoshop proprietary features in it.
So I'm going to use the native .PSD file
| | 05:51 | format and I'll click Save.
| | 05:54 | The blank file is now ready for me to
build into a webpage comp as I'll show
| | 05:58 | you how to do in other movies in this chapter.
| | Collapse this transcript |
| Storyboarding| 00:00 | It's wise to plan out each major page
in a website by creating a storyboard,
| | 00:05 | sometimes called the wireframe to block
out content areas, like your navigation
| | 00:09 | elements, text blocks, image areas,
any space you want to reserve for
| | 00:14 | advertising and so on. And that will
give you a template that you can flesh out
| | 00:18 | later as you design a page comp with artwork.
| | 00:21 | I am starting here with a new
blank file that's the same size as the
| | 00:25 | anticipated size of the browser
window that my target audience is likely to
| | 00:29 | use. I explained how to create a file
of that size in an earlier movie in this
| | 00:33 | chapter. I'm going to use Photoshop's
grids and guides to help me position
| | 00:38 | elements in my storyboard.
| | 00:39 | I will go to my View Extras menu in the
application bar on a Mac or in the menu
| | 00:43 | bar on the PC and I'm going to enable
Show Grids and also Show Rulers.
| | 00:48 | I'm going to start by clicking in this
horizontal ruler and dragging out a guide
| | 00:53 | and I'll use the grid to know where to
drop that guide right on this grid line.
| | 00:57 | I will drag some more guides.
Right now I'm marking out an area for a
| | 01:01 | navigation bar. I'm also going to drag
out a guide from the left-hand ruler and
| | 01:05 | I'm going to place this vertical guide
at about the 760 pixel point keeping my
| | 01:11 | eye on the horizontal ruler at
the top of the document window.
| | 01:13 | Normally, I would continue to drag out
these guides, but for now I'm going to
| | 01:17 | go right to the step of creating
blocks that represent the different page
| | 01:21 | elements. In the toolbox I'm going to
select the Rectangle Shape tool and then
| | 01:25 | I'm going use the guides that I just
drew as a starting place for making this
| | 01:29 | block that represents my navigation bar.
| | 01:32 | Now if I expand the Layers panel, you
can see that that shape came in on its
| | 01:36 | own layer, which is one of the
advantages of using shape layers when you are
| | 01:40 | storyboarding. I want to make sure
that the next shape I draw is on the
| | 01:43 | separate layer. So I'm going to click
on the vector thumbnail here on this
| | 01:46 | shape and now I can come
and make another shape layer.
| | 01:49 | I will collapse my Layers panel and
I'm going to choose another color for my
| | 01:53 | second shape by going up to the tool
options bar for the Rectangle Shape tool,
| | 01:57 | clicking and choosing a lighter gray,
and then I'll drag out another rectangle.
| | 02:01 | I might do the same thing down further
on the page to represent an image area.
| | 02:05 | Now that particular shape is too
large. I would like to make it smaller,
| | 02:10 | because it is a vector shape that's
easy to do. I could go to the toolbox and
| | 02:14 | select the Direct Selection tool and
then I can click on any of its edges and
| | 02:18 | drag to make it smaller. I can also
distort the shape if I wanted by clicking
| | 02:23 | on any of the anchor points here and dragging.
| | 02:25 | But I would like this to be rectangular.
So I'm going to press Command+Z on a
| | 02:29 | Mac, Ctrl+Z on a PC to undo that change.
Now if look at my Layers panel, I have
| | 02:34 | a couple of more layers. I would like
to make more image areas that are the
| | 02:39 | same shape as the shape on the
selected Layer 3. I could do that here in the
| | 02:43 | Layers panel by duplicating this Shape 3 layer.
| | 02:46 | Another way to do it, if I collapse the
Layers panel is to select the Move tool
| | 02:50 | in the toolbox and then to hold down
the Option key on a Mac or the Alt key on
| | 02:54 | a PC and drag to the right and that
copies the content of the selected layer.
| | 02:59 | I'm going to do that one more time, so
that I have three boxes that are all the
| | 03:03 | same size and shape.
| | 03:04 | Now I would like to add some text to
the storyboard. I'm going to select the
| | 03:07 | Horizontal Type tool in the toolbox
and I'll change the color of the type to
| | 03:12 | black from the tool options bar.
I'm going to use all of the other defaults
| | 03:16 | here I the Tool Options bar and just
come into the image and start typing and
| | 03:20 | then I'll go up to the Tool Options bar
and click the checkmark to accept that type.
| | 03:24 | If I select that select the Move tool,
I can move that text into a place where
| | 03:28 | I want it. I would like to add some
more text underneath these image areas. And
| | 03:32 | this time I would like it to be several
lines of text. One way to do that is to
| | 03:36 | create what's called Paragraph Text. To
make Paragraph Text, I'm going to go to
| | 03:40 | the Type tool again and I'm going to
click and drag a box underneath one of the
| | 03:45 | image areas. And then I can start
typing inside of that box and as you see the
| | 03:50 | text automatically wraps in the box.
| | 03:53 | With the Horizontal Type tool selected,
I can click inside the box and then I
| | 03:57 | can click on any of the anchor
points of the box and drag to make the box
| | 04:01 | narrower, to make it wider and I can
change the way that the type appears in
| | 04:06 | this text block. I'm going to click
the checkmark again to accept that change
| | 04:10 | and then I'm going to get the Move tool
and move that whole paragraph text box
| | 04:14 | where I want it.
| | 04:15 | Then I can also make copies of that
text by holding down the Option key, that's
| | 04:19 | the Alt key on a PC and dragging,
releasing and doing that again to make yet
| | 04:24 | another copy of my paragraph text block.
| | 04:27 | Now I've got a basic storyboard for
my home page. I'm going to use this
| | 04:31 | storyboard to help me determine how big
to make the graphics files for the page
| | 04:35 | and how much text I'm going to be able to add.
| | 04:38 | As you can see making liberal use of
shape layers for individual elements I'm
| | 04:41 | relying on the Type tool to create
individual lines of text and paragraph text.
| | 04:46 | It gives me a flexible storyboard that
I can use as the basis for my Page Comp.
| | Collapse this transcript |
| Adding images| 00:00 | Earlier in this chapter I suggested
that you storyboard the major pages in your
| | 00:05 | website. Once you have a storyboard
like this one, you can flesh it out into a
| | 00:09 | webpage comp by adding pieces of artwork.
| | 00:12 | In this movie I would like to show you
some techniques for adding artwork to a
| | 00:16 | webpage comp as you build it. But the
techniques that I'll show you here work
| | 00:20 | just as well when you are creating
any kind of layered web graphic. I have
| | 00:24 | already added some layers and some
artwork to this storyboard building it out
| | 00:28 | as a webpage comp.
| | 00:29 | I am going to go to the Layers panel
and start turning on the layers that you
| | 00:33 | see in here so you can see their
content in the image. In addition to those
| | 00:37 | individual layers I have a layer group
here, one that I have named body.
| | 00:42 | I'm going to click the Eye icon to the
left of that and you can see that it
| | 00:45 | contains lots of different pieces of
artwork. If I click the arrow on the body
| | 00:49 | layer group, you will see that not only
are there layers in here, but also all
| | 00:54 | of the sub-layer groups.
| | 00:55 | I show you this to make the point that
as you build out a webpage comp, you are
| | 00:59 | going to end up with lots of layers
and it makes sense to organize those into
| | 01:03 | layer groups to keep the Layers panel
manageable and to make it easier to find
| | 01:07 | the layers that you want to work on.
| | 01:09 | A quick way to make a layer group is
to first select the layers that you want
| | 01:12 | inside the group. So I'm going to
click on the purple box layer here and I'll
| | 01:16 | hold down the Shift key and click on
this green texture layer as well and then
| | 01:20 | I'm going to go up to the panel menu
and I'm going to choose New Group from Layers.
| | 01:24 | I will give this a name, I'll click OK,
and now you can see this new layer
| | 01:29 | group with its layers tucked up
inside of the group. Now I want to bring in
| | 01:33 | some layered artwork to this file. I
have a navigation bar open here and as you
| | 01:38 | can see it has lots of layers and
layer groups of its own. I built it
| | 01:42 | separately on purpose, because I knew
that it would have lots of layers too and
| | 01:46 | it would be more manageable
to work in a separate file.
| | 01:49 | I want to see this file along with
the webpage comp and I also have a
| | 01:52 | photograph open in another file,
which I'll talk about in a moment. So I'm
| | 01:56 | going to go to the Arrange Documents
menu in the application bar on a Mac, in
| | 02:00 | the window bar on a PC and I'll click
on this 3-Up view, so that I can see my
| | 02:05 | webpage comp up here and then the
navigation bar and then the photograph all in
| | 02:10 | separate document windows. The first
thing I'm going to do is make the webpage
| | 02:14 | comp document active by clicking on
its tab and I'm going to click on the top
| | 02:19 | most layer here. I'm doing that
because as I drag more layers in, they are
| | 02:24 | going to go above the selected layer,
and I don't want to obscure the content
| | 02:28 | of the layers that I bring in, because
they are hidden beneath some of these
| | 02:31 | other layers.
| | 02:32 | Now I'm going to click on the tab of
the navigation bar and I need to select
| | 02:37 | all of the layers here. It's not enough
to just select the navigation bar layer
| | 02:41 | group. So with that layer selected
I'll hold the Shift key and click on the
| | 02:46 | bottommost layer and now I'm going to
go over to the toolbox and select my Move tool.
| | 02:51 | I will click inside of the navigation
bar image and drag up into the web comp
| | 02:55 | image and when I see this outline I'll
release my mouse. And with the web comp
| | 03:00 | image selected I can see over on
the right that I have brought in the
| | 03:05 | navigation bar layer
group with all of its layers.
| | 03:08 | I am going to scroll over a bit to
the left so that I can see the left side
| | 03:13 | here and I'm going to make sure that
I have the navigation bar layer group
| | 03:17 | selected in the Layers panel for the
web comp and then I'm just going to click
| | 03:21 | and drag with my Move tool and the
entire content of that navigation bar layer
| | 03:26 | group goes with me as I move
the navigation bar into place.
| | 03:31 | So that's how to work with a layered
graphic as you bring it in to become part
| | 03:35 | of your webpage comp. Now I would
like to bring this photograph into the
| | 03:39 | webpage comp and I happen to know that
it's a little bit too big for the spot
| | 03:43 | in which I want to place it. If you
remember anything from this lesson, it is
| | 03:46 | that it's not worth taking the time to
resize elements that you want to bring
| | 03:50 | into your webpage comp before you bring them in.
| | 03:53 | Instead bring them in and resize them
once they are in the comp. So here is how
| | 03:58 | we do that. I'm going to click on the
photo document. I make sure that my Move
| | 04:02 | tool is selected. I see that I only
have one layer to deal with here and that's
| | 04:06 | selected. So I'll click and drag from
the photo document into the webpage comp
| | 04:12 | and release my mouse when I see this outline.
| | 04:14 | Now I'm going to close the photograph
and I'm going to drag the scroll bar over
| | 04:18 | so that I can see the right side of my
webpage comp. I'm going to take a look
| | 04:23 | at the Layers panel and I can see that
I brought the blue photo in, but that it
| | 04:27 | landed in the wrong place. It landed
inside of this navigation bar layer group.
| | 04:31 | That's easy to fix. I can just click on
the blue photo layer and drag it up to
| | 04:35 | the top of the layer stack and when the
bar at the top of the layer stack turns
| | 04:40 | black, I'll release my mouse.
| | 04:41 | Now I'm going to try to move this photo
into place. I have the blue photo layer
| | 04:46 | selected and I have my Move tool
selected. So I'll just click and drag and
| | 04:50 | before I do, it's a good idea to turn
it into a smart object. That will give me
| | 04:54 | the freedom to resize it or transform
it in other ways as many times as I want
| | 04:59 | without degrading image quality.
| | 05:01 | I am going to hold the Ctrl key as I
click on the blue photo layer, that's
| | 05:05 | right-click on a PC and I'm going to
choose Convert to Smart Object. And you
| | 05:09 | can see the Smart Object logo on the
blue photo layer thumbnail. Now I'm going
| | 05:13 | to go to the Edit menu and down to
Transform. Over here you can see all of the
| | 05:18 | different transform operations. I
could scale the photo or rotate it, skew or
| | 05:23 | distort it, change its perspective,
even flip it horizontally or vertically.
| | 05:28 | What I want to do now is just scale it,
so I can either choose scale from the
| | 05:32 | Transform menu or I can just choose
Free Transform. Now I'm going to move my
| | 05:37 | mouse over to the bottom right anchor
point here and I'm going to hold the
| | 05:41 | Shift key and I'm going to drag in to
make this smaller and then I'm going to
| | 05:46 | click the checkmark in the Transform
Options bar. And with the Move tool I move
| | 05:50 | the photo into place.
| | 05:51 | Well, now I have made the photo too
small. I did that on purpose to make the
| | 05:55 | point that you can transform as many
times as you want. As long as you've made
| | 05:59 | this into a smart object first without
degrading the image quality. So now for
| | 06:03 | example I could go up to the Edit
menu and down to Free Transform again and
| | 06:07 | I'll move over a site anchor point,
hold the Shift key to constraint
| | 06:10 | proportions and drag up and then I'll
move down to the other corner and drag
| | 06:15 | down until the image is the same size
approximately as the other photographs here.
| | 06:21 | The one thing that I don't want to do
is increase the size of the photograph
| | 06:24 | much larger than its original size.
The way to know if I've done that is to
| | 06:29 | keep my eye up here in the tool
Options bar and make sure that the Width and
| | 06:33 | Height numbers don't go higher than
100%. I'm going to click the checkmark
| | 06:37 | again and I'm now done brining in this
photo content, because I have taken the
| | 06:41 | time to storyboard this page
before developing my webpage layout.
| | 06:45 | It was easy to position and size the
various pieces of artwork as I brought
| | 06:49 | them into the layout. Now that my
webpage layout is complete, I'm ready to
| | 06:53 | begin slicing it into individual image
files, which I'm going to show you how
| | 06:57 | to do in an upcoming chapter.
| | Collapse this transcript |
|
|
10. SlicingWhy slice?| 00:01 | You may have heard that you can slice
an image for the web, but you may not
| | 00:04 | know really what slicing does or when
it makes sense to slice up an image.
| | 00:08 | What slicing does is to divide an image,
whether it's an entire webpage comp like
| | 00:12 | this one, or a smaller web graphic,
into multiple areas so that each area can
| | 00:17 | be saved out of Photoshop as a separate
file, a separate JPEG, or GIF, or PNG.
| | 00:22 | Well, why would you want to divide an
image into separate files like that? One
| | 00:26 | reason to slice is if you think that
different areas of the image are likely to
| | 00:30 | optimize best with different
optimization settings. For example, in this
| | 00:34 | webpage comp it's fair to assume that
the photographs here, and here, and here
| | 00:39 | will optimize best in the JPEG format.
That the logo up here, which is made up
| | 00:44 | of flat art, will
optimize best in the GIF format.
| | 00:47 | So I'd need to slice all those areas
separately, so that I can optimize them in
| | 00:52 | different formats. Even if I'm going to
use the same format on two areas, I may
| | 00:56 | want to slice each one. So for example,
this area here could optimize best as
| | 01:01 | JPEG, but it probably won't need as
high a quality as I'll give to the JPEGs
| | 01:06 | that are these photographs. So that's
another area that should be sliced, an
| | 01:09 | area that's likely to optimize best
with different optimization settings from
| | 01:13 | other areas here.
| | 01:15 | Another reason to slice is if you want
to add links to elements in an image and
| | 01:19 | the perfect example is buttons. In
this case, each of these buttons will
| | 01:23 | eventually get a link to a separate
webpage. In order to do that, each of these
| | 01:28 | buttons would have to be a separate
image. So I'm going to slice these buttons
| | 01:31 | in Photoshop, save them out as separate
GIFs or PNGs and then add unique links
| | 01:36 | to each button in Dreamweaver
or another site building program.
| | 01:40 | The last good reason to slice a comp,
like this, is if I want to animate part
| | 01:44 | of it. So let's say that I want this
purple box with the word 'Surfboards' to
| | 01:48 | fade in as a GIF animation. In order to
program it to animate like that, I need
| | 01:53 | to add a slice around this area. So
that the animation doesn't affect the rest
| | 01:58 | of the composition.
| | 01:59 | So those are the reasons to slice. If
none of those reasons apply, then I don't
| | 02:03 | suggest you just get out the slicing
tool and start cutting an image up on the
| | 02:06 | hopes that it's going to load faster
on the viewer's browser, because that
| | 02:09 | really isn't predictable.
| | 02:11 | So that's, why to slice? Now what does
slices look like? I have already added
| | 02:15 | some slices to this image. So I'm
going to make them visible, so you can see
| | 02:18 | them for yourself. I'm going to go to
the View menu and down to Show and down
| | 02:24 | to Slices. So if you ever want to
hide your slices temporarily or show them
| | 02:28 | again, this is where you go.
| | 02:29 | Each one of these rectangles that you
see superimposed over the image is a
| | 02:33 | slice. When I save this image, each of
these sliced areas will be saved out as
| | 02:38 | a separate JPEG, GIF or PNG. I could
then bring the individual JPEGs and GIFs
| | 02:43 | and PNGs into Dreamweaver where they
could be added one at a time to a webpage
| | 02:48 | there. Or I could have Photoshop save
out not only the individual image files,
| | 02:53 | but also some HTML code. That will
take all of the separate sliced images and
| | 02:58 | reassemble them into a composition,
just like this, when viewed in a Web browser.
| | 03:03 | So that's an overview of what slices
are and why you would want to slice. In
| | 03:07 | the rest of this chapter, I'm going
to show you who to slice an image in Photoshop.
| | Collapse this transcript |
| Creating user slices| 00:00 | Photoshop offers a couple of different
kinds of slices. User slices are slices
| | 00:05 | that you make yourself. Auto slices are
slices that Photoshop makes for you and
| | 00:10 | layer-based slices are special kind of
user slice that I'm going to talk about
| | 00:14 | in another movie. In this movie, I'm
going to show you how to create and work
| | 00:18 | with User and Auto slices.
| | 00:20 | Before I start slicing, I usually make
sure that a couple of things are set up.
| | 00:24 | I'm going to go to the View menu at
the top of the screen and I'm going to
| | 00:27 | check that Snap is enabled. That will
help me to line up all the slices as I
| | 00:31 | create them, because it will snap the
slices to one another as well to the
| | 00:36 | underlying artwork.
| | 00:37 | I also want to make sure that View >
Show Slices is enabled. When that option
| | 00:41 | is checked in this menu, I'll see a
little gray number 1 and an icon in the top
| | 00:46 | left of the open image. That's because
Photoshop assumes that every image has
| | 00:51 | one slice that encompasses the
entire image, and you will see that little
| | 00:55 | number whenever you have
View > Show Slices enabled.
| | 00:58 | And the last thing that I'm going to
do to prepare is to set the color of the
| | 01:01 | slice lines. The default color for
slice lines is light blue. You can sort of
| | 01:06 | see that around the edge of the entire
image where this first big slice is. And
| | 01:10 | those blue lines can be hard to see
on top of a blue image like this one.
| | 01:14 | So I'm going to go to Photoshop's
Preferences which are under the Photoshop
| | 01:17 | menu on the Mac and under the Edit menu
on the PC and I'm going down to Guides,
| | 01:22 | Grids, & Slices, and there I'm going
down at the Slices area and change the
| | 01:27 | Line Color from the default of Light
Blue to something brighter like Yellow and
| | 01:31 | then I'll click OK.
| | 01:32 | Now I'm ready to create my first user
slice. To do that I'm going to go to the
| | 01:36 | toolbox and I'll go to the tool slot
that normally shows the Crop tool and from
| | 01:40 | the fly-out menu there I'm going to
select the Slice tool. Now be careful,
| | 01:44 | because there is another tool there
called the Slice Select tool and that's not
| | 01:47 | the one that I want to use to make slices.
| | 01:49 | So I'll get the Slice tool and I know
that I want to slice this logo separately
| | 01:53 | from everything else, because I want
to be sure to optimize this as a GIF and
| | 01:57 | some of the other areas will optimize
better as JPEGs. So I'm going to just
| | 02:01 | click and drag with the Slice
tool around the Groundswell logo,
| | 02:05 | and there is my slice.
| | 02:07 | When I release the mouse, I see that I
have this slice with this blue border
| | 02:11 | around it. That's the User Slice that I
just made. One of the ways that I know
| | 02:14 | it's a user slice is that it has a blue
number and a blue icon at the top left
| | 02:19 | of the slice. But if I look carefully,
I see that there are other slices here
| | 02:23 | as well and those are slices that
have gray icons. Those are Auto Slices.
| | 02:28 | Every time that I make a user slice,
Photoshop runs around behind me and makes
| | 02:32 | this auto slices. Like this slice
number 1 and this slice number 3 and this
| | 02:37 | slice number 4, to fill in the
rectangular spaces around the rectangular slice
| | 02:42 | that I have made. So for example, if I
make another slice here, I'll go over
| | 02:46 | and click and drag around this
purple Surfboards box, Photoshop creates
| | 02:51 | additional auto slices around my new user slice.
| | 02:54 | There are some functional differences
between User slices and Auto slices. For
| | 02:58 | one thing, you can adjust the border
on an Auto slice. So here I see that I
| | 03:03 | have made my slice a little bit too big,
I can go back to the toolbox and this
| | 03:07 | time I can get the Slice Select tool
and then I'll click in that slice around
| | 03:11 | the Groundswell logo to select that
slice and then I can drag on any of its
| | 03:15 | borders to adjust the boundaries of the slice.
| | 03:18 | But I can't do that with an Auto slice.
So right next to that is a gray slice
| | 03:23 | number 3 and when I click there with
the Slice Select tool, I can't adjust the
| | 03:27 | borders. If I decide that I do want to
adjust the borders of an Auto slice, I
| | 03:31 | can convert that slice into a User
slice and the way that I do that is to
| | 03:35 | select with the Slice Select tool as I
just did and then go up to the Options
| | 03:40 | for the Slice Select tool and click
Promote. And now that slice number 3 is
| | 03:44 | also a User slice and I can come over
any one of its borders and click there
| | 03:48 | and drag to adjust the slice.
| | 03:50 | At this point, I can get my Slice tool
from the toolbox and continue to draw
| | 03:54 | slices around other areas in the
photograph, like this. However, sometimes it's
| | 03:59 | faster to just divide up slices that
I have already made. So for example, I
| | 04:03 | would like to divide this big slice
around the buttons into individual slices
| | 04:07 | for each button and rather than draw
each one of those slices, I'm going to go
| | 04:11 | back to the toolbox and get the Slice
Select tool again, click on that slice
| | 04:15 | number 3 and then go up to the Slice
Select tool options and click Divide.
| | 04:20 | Here I can set the number of slices
across that I want. I have set that to 5,
| | 04:24 | evenly spaced and the number of slices
down and I have got that set to 1 slice
| | 04:29 | down. And as you can see I now have
five separate User slices around my
| | 04:33 | buttons. I can adjust the borders
around any of these slices. I'm going to
| | 04:37 | click off of those slices to deselect
them. I can do the opposite as well.
| | 04:40 | Instead of dividing one slice
into several, I can combine slices.
| | 04:44 | So let's say I decide that I want my
entire navigation bar to be one slice.
| | 04:49 | With my Slice Select tool I'll click on
one of those slices, hold the Shift key
| | 04:53 | and click on all the others and then
I'll Ctrl-click, that's right-click on a
| | 04:58 | PC, on any one of the selected slices
and choose Combine Slices and now they
| | 05:02 | are all one big slice.
| | 05:03 | Often I'll make a slice and then change
my mind and I want to delete that slice
| | 05:08 | and start over. That I can do too. So
let's say that I want to delete the slice
| | 05:13 | that I made here around this
photograph. I'm going to click on it with the
| | 05:16 | Slice Select tool to select that slice
and then I'm going to hold down the Ctrl
| | 05:20 | key and click on the slice or right-
click on the slice and choose Delete Slice,
| | 05:25 | and that clears just that selected
slice. What if I want to delete all the
| | 05:29 | slices and start again? Then I can go
up to the View menu at the top of the
| | 05:33 | screen and down to Clear Slices.
| | 05:35 | So now you know how to create slices
with the Slice tool. You understand the
| | 05:39 | difference between User Slices and
Auto Slices and you have learned that you
| | 05:43 | can divide, combine, and even delete
slices. Knowing how to work with slices in
| | 05:48 | those ways, it should take some of the
mystery out of Photoshop slicing process.
| | Collapse this transcript |
| Creating layer-based slices| 00:00 | Layer-based slices are user slices
that you can create automatically based on
| | 00:05 | the content of layers. I find these
the easiest kind of slices to make and
| | 00:09 | they offer some really useful
functional advantages over slices made with the
| | 00:13 | Slice tool, but remember layer-based
slicing only works if you have the
| | 00:17 | foresight to build individual
pieces of artwork on separate layers.
| | 00:22 | I did that here in this webpage comp.
If you look in the Layers panel, you will
| | 00:25 | see that there are lots of layer groups.
If you click the arrow to the left of
| | 00:29 | any one of those groups, like this
photos group, you will see multiple layers
| | 00:32 | tucked away inside each group.
| | 00:34 | I would like to create a layer-based
slice around this left hand photo here.
| | 00:38 | Fortunately, that photo is isolated on
its own layer, the photo left layer. So
| | 00:43 | to make a layer based slice, I'll just
click on that photo left layer in the
| | 00:47 | Layers panel and then go up to the
Layer menu, and choose New Layer Based
| | 00:51 | Slice; or I could use the
shortcut that I added to this command.
| | 00:55 | The New Layer Based Slice command
doesn't come with its own shortcut, so I made
| | 00:59 | a custom keyboard shortcut, as I
showed you how to do in an earlier movie in
| | 01:02 | this course. That command makes this
layer based slice hugging the content on
| | 01:08 | the photo left layer.
| | 01:09 | To speed things up, you can create
more than one layer based slice at a time.
| | 01:13 | So let's say that I want to make layer
based slices around the other two photos
| | 01:17 | here. I'll simply go to the Layers panel,
click on the photo center layer which
| | 01:21 | contains just this photograph in the
center, and I'll hold the Shift key and
| | 01:26 | click on the photo right layer as well,
which holds just the blue photo on the
| | 01:29 | right. Then I'll go up to the Layer
menu and I'll choose New Layer Based
| | 01:34 | Slices. This is pretty interesting that
Photoshop knows to add the 'S' to word
| | 01:38 | Slice, when you select more than one
layer. So that added two more layer based
| | 01:42 | slices, one around each of these two photos.
| | 01:46 | Layer based slicing offers some
functional advantages over user slices made
| | 01:49 | manually with the Slice tool. One big
advantage is that layer based slices move
| | 01:54 | with the underlined artwork. That means
that even after you have sliced entire
| | 01:58 | composition, like this, if you change
your mind about the location of one or
| | 02:02 | more elements, you can move those
pieces of content around and the slices will
| | 02:07 | go with it. So you don't have
to re-slice the whole thing.
| | 02:09 | Let me show you how that works. For
example, let's say that I wanted to move
| | 02:14 | all three of these photos up, but I
have already sliced them and I don't want
| | 02:17 | to re-slice them. It doesn't matter,
whether or not the slices are selected,
| | 02:21 | I'll just de-select them by getting
the Slice Select tool and clicking elsewhere.
| | 02:25 | I can move the underlined artwork and
the slices will go with the artwork. So
| | 02:30 | to move all three photos at once, I'm
going to go to the Layers panel and I'm
| | 02:34 | going to add the photo left layer to
this selection by holding the Command key
| | 02:38 | on a Mac, the Ctrl Key on Windows, and
clicking. So now I have all three photo
| | 02:43 | layers selected. Then I'm going to
get my Move tool and I'm going to
| | 02:48 | click-and-drag. I can move these photos
wherever I want. I'm just going to move
| | 02:52 | them up a bit. When I release my mouse,
did you notice that the slices moved as
| | 02:57 | well? So that's a real time saver.
| | 03:00 | Another advantage of layer based
slicing is that unlike regular user slices,
| | 03:04 | layer based slices will change size to
fit the size of the underlined artwork.
| | 03:09 | So for example, let's say that I
want to make all three of these photos
| | 03:12 | smaller. I happen to have all three
photo layers selected already, so I don't
| | 03:16 | have to bother with that step. The way
that I resize artwork is that I go to
| | 03:21 | the Edit menu at the top of the
screen and choose Free Transform.
| | 03:25 | Now I find these hollow anchor points
around each one of the photos. I'm going
| | 03:30 | to go to anyone of the photos and
move my mouse over a corner anchor point.
| | 03:34 | Then I'm going to hold the Shift key
down to constrain proportion and I'm going
| | 03:38 | to click-and-drag toward the center of
the photo. All three photos are resizing
| | 03:42 | because I happen to have all three
photo layers selected in the Layers panel.
| | 03:47 | To finish resizing the artwork, I'm
going to go to the Options bar for the
| | 03:51 | Transform feature and click this check
mark. Notice that now not only are the
| | 03:56 | photos smaller, but the slices around
those photos automatically resized too,
| | 04:01 | to fit snugly around the smaller photos.
| | 04:04 | At this point, I would probably move
each one of these photos back into place.
| | 04:08 | So for example, I might click on the
photo right layer to select only that
| | 04:11 | layer, and with the Move tool
still selected in the toolbox, I would
| | 04:15 | click-and-drag that photo over and
center it on top of the text here. I'll do
| | 04:20 | the same with the photo center layer,
selecting it and moving the artwork over
| | 04:24 | with the Move tool and again the slice
goes with it. The photo left layer and
| | 04:30 | moving that artwork over,
and its slice goes with it too.
| | 04:34 | Yet another advantage of layer-based
slicing is that if you add an effect, like
| | 04:38 | a drop shadow to artwork, and the
layer-based slice around the artwork will
| | 04:42 | expand to accommodate the drop shadow.
To show you that, I'm going to go ahead
| | 04:47 | and slice all of the buttons in this
webpage comp by going over to the Layers
| | 04:51 | panel and clicking the arrow to
the left of the buttons layer group.
| | 04:55 | In this group, there are five separate
layers with one of these buttons on each
| | 04:59 | layer. I'm going to select all five
by clicking the topmost of the buttons
| | 05:02 | layers, holding the Shift key and
clicking the bottommost of those layers. Then
| | 05:07 | I'll use the layer based slices command,
Layer > New Layer Based Slices. Each
| | 05:12 | one of those layer-based slices
is hugging tightly to its button.
| | 05:16 | Let's say that I wanted to add a
shadow on the Boards button to indicate that
| | 05:20 | the viewer is looking at the boards
page. I'm going to click on the board btn
| | 05:24 | layer only in the Layers panel and then
go down to the fx button at the bottom
| | 05:28 | of the Layers panel. From its pop-up
menu, I'm going to choose Drop Shadow.
| | 05:33 | That opens the Layer Style dialog box.
You can see the little drop shadow on
| | 05:37 | the Boards button right now, I would
like to make that drop shadow a little
| | 05:40 | bigger. So I'm going to go to the Size
slider in the Layer Style dialog box and
| | 05:45 | drag it slightly to the right; maybe to
about 9. Now keep your eye on the slice
| | 05:50 | around the Boards button, as I say OK
in the Layer Style dialog box to accept
| | 05:55 | these changes.
| | 05:56 | So as you can see, layer based slicing
really does offer some useful advantages
| | 06:00 | over slicing manually with the Slice
tool. It's quick and easy and it gives you
| | 06:04 | the options of moving, resizing, and
adding effects to underlined artwork
| | 06:09 | without having to go back and re-slice.
| | Collapse this transcript |
| Adding slice options| 00:00 |
The user slices that you create in an
image either with the Slice tool or with
| | 00:04 |
layer-based slicing will generate JPEGs,
GIFs, or PNGs that will become assets
| | 00:09 |
in your website. The names of those
image files will come from the slice names
| | 00:14 |
in your original source file in
Photoshop. So it's important to give those
| | 00:18 |
user slices meaningful names.
| | 00:20 |
You also have some other options that
you can add to your slices, and that's
| | 00:24 |
what I'm going to show you how to do in
this movie. Here I have a fully sliced
| | 00:28 |
webpage comp and I'm ready to add names
and other options to the slices. I have
| | 00:32 |
to do that slice by slice.
| | 00:34 |
So the first thing I'll do is get the
Slice Select tool from the toolbox and
| | 00:38 |
click on the first slice to which I'm
going to add options. I'm going to start
| | 00:42 |
here with the slice
around this Groundswell logo.
| | 00:45 |
With that slice selected, I'm going to
go up to the Options bar for the Slice
| | 00:48 |
Select tool and if I move way over to
the right in that bar, there is a small
| | 00:53 |
icon there. I'm going to click that icon,
and that opens the Slice Options dialog box.
| | 00:58 |
Here in the Name field, you can see
the default name for the selected slice.
| | 01:02 |
It's not very meaningful, slicing4_02.
It actually comes from the name of the
| | 01:07 |
original image slicing4.PSD
with the slice number 02 tagged on.
| | 01:13 |
When I save out this image and
generate a GIF from this particular slice, the
| | 01:18 |
name of that GIF will be slicing4_02.gif.
That name isn't very meaningful. If I
| | 01:23 |
then bring that GIF into a site
building program like Dreamweaver, the name
| | 01:27 |
won't tell me anything about the
content of the file. So I want to change the
| | 01:31 |
name to something more meaningful like logo.
| | 01:34 |
To do that, I'll just select the
default name and type over it. And now when I
| | 01:38 |
generate an image from the slice, its
name will be logo.gif. Notice that there
| | 01:43 |
are some other options here that you
can add to the slice. These come into play
| | 01:47 |
only if I'm going to ask Photoshop to
generate HTML code along with the images
| | 01:52 |
created from my slices and I usually
do that if for no other reason, then to
| | 01:56 |
preview the results as I'll show
you in another movie in this chapter.
| | 02:00 |
So, what can I include in that HTML?
Well, one thing I can include there is a
| | 02:04 |
link from the image generated from the
selected site to another website.
| | 02:09 |
I'm going to click in the URL field, and
I'm going to type out the full path to an
| | 02:13 |
external website. I'm going to use the
lynda.com site by typing the full path
| | 02:17 |
to the homepage on that site. And if I
want that link to webpage to come up in
| | 02:23 |
a separate browser window, I can go
to this Target field and type _blank.
| | 02:29 |
I am also going to fill in the Alt Tag
field here with the description of the
| | 02:33 |
image that will be created from
this selected slice. I'm going to type
| | 02:37 |
Groundswell logo. The Alt Tag is
important because that offers some tags that
| | 02:43 |
can be read by a reading machine that's
used to make the web more accessible to
| | 02:48 |
those who are visually impaired.
| | 02:49 |
Now that I have added those options,
I'm going to click OK to close the Slice
| | 02:53 |
Options dialog box. To show you what
those slice options do, I'm going to
| | 02:57 |
preview my webpage comp now just to show
you what those slice options have done.
| | 03:01 |
So I'm going to go into the Save for
Web & Devices window by choosing File >
| | 03:06 |
Save for Web & Devices, and at the
bottom of that window, I'm going to go down
| | 03:10 |
and click on the Preview button. That
opens the webpage comp in my default Web
| | 03:14 |
browser and some of it doesn't look
very good because I haven't yet optimized
| | 03:18 |
these sliced areas.
| | 03:20 |
But what I wanted to show you now
is that if I move my mouse over the
| | 03:23 |
Groundswell logo, it changes to this
Hand icon, meaning that this is a live
| | 03:28 |
link, and if I click there, a separate
Web browser window opens displaying the
| | 03:33 |
lynda.com webpage to which
I linked back in Photoshop.
| | 03:37 |
I will go ahead and close that browser
window and I'm also going to close this
| | 03:42 |
other page in my Web browser, and back
in the Save for Web & Devices window,
| | 03:46 |
I'm going to click the Cancel
button to go back to Photoshop.
| | 03:50 |
Normally, I would go ahead and choose
each one of my user slices one at a time,
| | 03:54 |
open the Slice Options dialog box,
name the slice, and add any other slice
| | 03:59 |
options that I wanted to. Back here
in Photoshop, at this point, I would
| | 04:03 |
normally continue to select each
user slice one at a time to give it a
| | 04:07 |
meaningful name and to add slice options
like the ones that I have shown you in this movie.
| | 04:12 |
When all that's done, I would then
optimize, and save the multiple slices in
| | 04:16 |
this image as I'll show you how to do
in an upcoming movie in this chapter.
| | 04:21 |
| | Collapse this transcript |
| Optimizing and saving slices| 00:00 | After you have sliced an image into
multiple slices and added names and other
| | 00:04 | options to the user slices, the final
step is to optimize and save out each
| | 00:09 | slice as an individual JPEG, GIF,
or PNG file. You can then bring those
| | 00:14 | graphic files into a website building
program like Dreamweaver, to include them
| | 00:18 | on the final pages that you build there.
| | 00:21 | Here I have a webpage comp, and I have
finished slicing it and adding names to
| | 00:25 | the important slices, the user slices.
I haven't bothered naming the slices
| | 00:29 | with the gray icons on them because
when I build my final pages in Dreamweaver
| | 00:33 | or another website building program,
those areas won't be graphics. They will
| | 00:38 | be composed of background
color and text in the HTML code.
| | 00:42 | But I do want to save out of Photoshop
all the parts of these pages that I'll
| | 00:46 | include as images. So I'm going to go
to the File menu at the top of the screen
| | 00:50 | and choose Save For Web & Devices.
I'm going to work in the Optimized tab,
| | 00:54 | so I can see as much as possible of
this large image in the Preview area.
| | 00:58 | The task here is to optimize each of
the slices here with the best settings for
| | 01:03 | the content of that slice. There are
lots of slices, over 40 slices, and I
| | 01:08 | don't want to have to optimize each one
separately. So I'll show you a few ways
| | 01:11 | that you can economize, and save
time as you optimize multiple slices.
| | 01:16 | The first thing I'm going to do is to
look for areas that might optimize with
| | 01:20 | the same settings. A good example is
the buttons up here. I'm going to hold
| | 01:25 | down the spacebar temporarily to change
the cursor to a hand, so that I can see
| | 01:29 | the slices around all five at the buttons.
| | 01:32 | With the Slice Select tool selected
here in the toolbox, I'm going to click on
| | 01:36 | the slice around the boards button,
and then I'm going to hold down the Shift
| | 01:39 | key and click on these other four slices.
With all of those selected, I'm going
| | 01:44 | to go over to the Optimization
Controls on the right side of this window.
| | 01:48 | I'm going to make sure that format is set
to GIF, because these are flat art, and
| | 01:53 | then I'm going to try
reducing the number of colors.
| | 01:55 | As you know from an earlier chapter,
reducing the number of colors in a GIF is
| | 01:59 | the best way to reduce its file size.
So right now, I see that five of these
| | 02:03 | buttons are 3.863 kilobytes. That's
reported down here in the bottom left of
| | 02:08 | this Preview window.
| | 02:10 | If I go to the Colors field and I
choose a lower number of colors, I think I
| | 02:14 | can go as low as 8 here, and still have
buttons that look reasonably good. I've
| | 02:19 | managed to lower the size of all five
buttons combined to under 2 kilobytes. So
| | 02:24 | I'm very happy with that result.
| | 02:26 | Now I'll look for some other slices
whose content is similar, like these three
| | 02:30 | photos here in the middle of the page.
Again, I'll hold the spacebar to move
| | 02:34 | the image over so I can see all of the
photos, and then with the Slice Select
| | 02:38 | tool I'll click on the slice around
the first photo, hold down the Shift key
| | 02:42 | and click on the slices around the other two.
| | 02:45 | When I look at the Optimization Controls,
I see that they are currently set to
| | 02:48 | GIF, and that's why the photos don't
look very good, because photos as you
| | 02:52 | know, optimize best as JPEGs. So I'm
going to change the format here to JPEG,
| | 02:57 | it's currently set to Medium, and that
looks pretty good to me, and all three
| | 03:01 | of my photos are coming in at only 13.44
kilobytes, so I'm going to accept that.
| | 03:07 | I see the three buttons down here.
They are going to optimize the same way
| | 03:11 | because they really are copies of
just one graphic. So again, I'll hold the
| | 03:15 | spacebar and click and drag to move over,
and with the Slice Select tool, I'll
| | 03:19 | click on the slice around the first of
these buttons, hold the Shift key and
| | 03:22 | click on the other two slices.
| | 03:24 | One problem that I'm having here is
that I can't tell whether the blue at the
| | 03:28 | edges of these buttons is going to match,
the blue I have in mind for the page
| | 03:32 | background, and that's because the
slices that aren't selected have these kind
| | 03:36 | of a ghost like film over them. That's
just a way of indicating which slices
| | 03:40 | are selected at the moment. So what
I want to do is to make the slices
| | 03:44 | temporarily invisible, so I can really
see the colors in the underline artwork.
| | 03:48 | To do that, I'll go over to the
toolbox on the left side of Save For Web &
| | 03:51 | Devices, and I'll click on this icon
right here, and that will hide the slices
| | 03:55 | temporarily, and now I can go and
reduce the number of colors, and I'll be
| | 04:00 | affecting just those three selected buttons.
| | 04:03 | So for example, if I put these as low
as 2, you can see that that is the area
| | 04:07 | that's being optimized. Well, 2 colors
isn't enough for those, 4 isn't enough
| | 04:12 | because I don't have those curved
button edges, 8 is getting there, and 16 is
| | 04:17 | just fine. So now I'm going to turn my
slices back on by clicking that Hide &
| | 04:22 | Show Slices button again.
| | 04:23 | I have a few more slices to optimize.
One is this slice right here, which could
| | 04:29 | go either way. It could optimize best
as GIF, or could optimize best as JPEG,
| | 04:33 | and the only thing that you can do
in this case is just to try both.
| | 04:36 | So with that slice selected, and the
format set to GIF, with colors at 16, I
| | 04:42 | think that the appearance is pretty
good. The file size is also reasonable,
| | 04:45 | 5.391 kilobyte. I'll change the format
to JPEG with a quality of Medium, the
| | 04:52 | file size is quite low, but I don't
think that the artwork in this slice looks
| | 04:56 | very good with that setting. So I'll
try increasing the quality of this JPEG
| | 05:00 | slice, and now it looks better, and
the file size is fine, 5.03 kilobytes, so
| | 05:06 | I'll stay with that.
| | 05:08 | There are few more user slices that I
haven't optimized yet. I'm going to do
| | 05:11 | all of these together. One is this
groundswell logo slice. I'll select that,
| | 05:16 | and click on these slice here, and this
one over here, which have parts of the
| | 05:20 | pattern of the Navigation bar, and
I'll also hold the Shift key and click on
| | 05:24 | this surfboard's area. And then I'll
go over and choose a number of colors.
| | 05:29 | I'll try 8. I think everything looks
good with 8 colors. And the total file
| | 05:33 | size is low, so I'll leave it at that.
| | 05:35 | So all the user slices are now optimized.
If I click on one of the of the outer
| | 05:39 | slices like this one, I can see that
it has an infinity symbol in it. All of
| | 05:43 | the outer slices have this symbol,
meaning that they are linked together for
| | 05:46 | purposes of optimizing. So whatever I
choose for one of these will apply to all.
| | 05:51 | Because these are flat art, I'll leave
them at GIF and I'll reduce the number
| | 05:54 | of colors maybe to 8 to make sure that
there is enough there, that if I want to
| | 05:58 | save some of these all outer graphics,
the text will be readable. But as I
| | 06:02 | mentioned when I build my final page,
I probably won't use graphics in the
| | 06:06 | areas covered by these outer slices.
| | 06:08 | Now that everything is optimized, it's
time to save. I'll click the Save button
| | 06:12 | at the bottom of the Save For Web &
Devices window. I'll navigate to my
| | 06:16 | Desktop, and there I'm going to make a
new folder, I'll call this the surfboard
| | 06:20 | page, and I'll click Create.
| | 06:22 | I want to make sure that format is set
not to just Images Only, but to HTML and
| | 06:28 | Images, so that along with all of the
image files that Photoshop will generate
| | 06:32 | from the slices, it will also generate
an HTML file containing code that will
| | 06:36 | reassemble all of the images
when viewed in a Web browser.
| | 06:39 | I am also going to make sure that
Slices is set to All Slices. I could just
| | 06:44 | save out the user slices, or I could
save out slices that I had selected with
| | 06:48 | the Slice Select tool, but I'll go with
all Slices for now, and then I'll click
| | 06:52 | the Save button.
| | 06:53 | Now I'm going to go out to my Desktop,
and there is my surfboard page folder.
| | 06:57 | Inside of that folder, there is an
HTML file, and there's also an images
| | 07:01 | folder. Look what's inside the images
folder? Lots of JPEGs and GIFs. Each one
| | 07:07 | of these was generated from a single
slice in that webpage comp. The JPEGs and
| | 07:12 | GIFs that have meaningful names were
made for my user slices, and these names
| | 07:17 | came from the slice names that
I have given to those slices.
| | 07:20 | The GIFs down here that have these
less meaningful names were generated from
| | 07:25 | the outer slices, and these names
came from the name of the original source
| | 07:29 | file and the number of the slice. As I
mentioned, I probably won't use those
| | 07:33 | slices when I build my final page, but
I'll use these JPEGs and these GIFs that
| | 07:39 | contain meaningful names.
| | 07:41 | Let me open a couple of those for you
to see. I'll open a GIF and a JPEG in
| | 07:45 | Photoshop. So here is a JPEG, and here
is a GIF, each of which was saved from
| | 07:51 | a separate slice in my webpage comp.
I'm going to go back to the Desktop and
| | 07:56 | look inside the surfboard page folder
one more time so that I can open this
| | 08:00 | HTML file for you in a Web browser.
| | 08:03 | Here in my default browser, the HTML
code reassembles all of the individual
| | 08:08 | image files into the original
composition. Now I could take this HTML page
| | 08:13 | along with the Images folder into a
site building program like Dreamweaver, and
| | 08:17 | tweak the HTML there adding other
kinds of code like CSS for example; or if I
| | 08:23 | wanted to scrap the HTML code altogether,
I could just bring in the image files
| | 08:27 | into Dreamweaver, create an HTML
page there, and use the image files that
| | 08:32 | Photoshop created as assets on that HTML page.
| | 08:36 | The workflow that you choose to
follow is your preference, but however you
| | 08:40 | proceed the good news is that you now
have the image assets that you need for
| | 08:43 | this webpage, all generated by
Photoshop from a single sliced page layout.
| | Collapse this transcript |
|
|
11. Making Graphics for RolloversUnderstanding Photoshop and rollovers| 00:00 | Rollovers come in handy for many
purposes. They can help your viewers find a
| | 00:04 | link on webpage, figure out where
they are in your website or get more
| | 00:08 | information about a link in the
form of graphics or text. Graphic-based
| | 00:12 | rollovers consist of small image files
that are swapped out one for the other,
| | 00:17 | following instructions coded
in JavaScript behind the scenes.
| | 00:20 | For example, here I'm looking at a
navigation bar in my Safari Web browser and
| | 00:25 | if I move my mouse over anyone of the
buttons in the navigation bar, it appears
| | 00:29 | to change color but what's really
happening is that there are two versions of
| | 00:33 | each one of these buttons and when I
move my mouse over the button, the first
| | 00:37 | version, a GIF that contains a white
gel button is swapped out and replaced
| | 00:42 | with another GIF that
contains a green gel button.
| | 00:45 | I made all of the graphics for this
navigation bar in Photoshop, but when I
| | 00:48 | wanted to make it rollover, I had to
take those graphics into another program
| | 00:52 | like Dreamweaver to create the working
the rollover behavior. It's important to
| | 00:56 | understand upfront what Photoshop can
and cannot do for you when it comes to
| | 01:01 | making rollovers like these.
| | 01:02 | So you can make a white button and
you can make another file that's a
| | 01:06 | green button, but Photoshop cannot
generate the JavaScript code that's
| | 01:10 | necessary to make the rollovers work.
Way back in Creative Suite 2, when
| | 01:15 | ImageReady came with Photoshop you
could do that, but ImageReady is no longer
| | 01:20 | made and no longer comes with
Creative Suite. So if you do want to make
| | 01:24 | rollovers work, then you will make
your graphics in Photoshop and bring them
| | 01:27 | into another application like
Dreamweaver in order to program the graphics
| | 01:31 | to rollover.
| | 01:32 | In this chapter I'll show you how to
create graphics with different states of
| | 01:35 | rollover buttons using a Photoshop
feature called Layer Comps. You will also
| | 01:40 | hear in this chapter about the
special script that www.lynda.com is making
| | 01:44 | available to you for free that will
help you to save out rollover graphics that
| | 01:48 | you've created as Layer Comps and I'll
be showing you how to install and use
| | 01:52 | that script in upcoming movies in this chapter.
| | Collapse this transcript |
| Creating rollover graphics with layer comps| 00:00 | The key to being efficient when you
are making rollover graphics in Photoshop
| | 00:04 | is to make use of a feature called
Layer Comps. Layer Comps allow you to make
| | 00:08 | multiple versions of multiple buttons
all in a single file, which will save
| | 00:12 | your time and effort.
| | 00:14 | I am working in the Web workspace.
I'm starting this lesson with a navigation
| | 00:18 | bar that has four simple buttons. If
you don't have access to the Exercise
| | 00:22 | Files for this course, I suggest that
you make yourself a set of simple buttons
| | 00:26 | like these, so that you can follow along.
| | 00:29 | The way that I made these was to
select the Rounded Rectangle tool in the
| | 00:32 | toolbox, drag out one button and then
duplicate that button layer three more
| | 00:36 | times, moving the buttons apart and
then I added a bit of text with the
| | 00:40 | Horizontal Type tool to each button.
| | 00:43 | The first step in making these buttons
into Rollover Graphics is to slice them
| | 00:47 | so that each button will generate
independent graphic files. In the Layers
| | 00:52 | panel, I can see that each one of the
buttons is on the separate layer, these
| | 00:55 | happen to be shape layers. But
regardless of what kind of layers they are
| | 00:59 | because each button is on a separate
layer, I can use layer based slicing.
| | 01:02 | I am going to select all four button
layers by clicking on the topmost button
| | 01:06 | layer and then holding the Shift key
and clicking on the bottommost. Then I'll
| | 01:10 | go up to the Layer menu and down to
New Layer Based Slices and that creates a
| | 01:15 | layer based user slice around each one
of the four buttons and some auto slices
| | 01:20 | around them.
| | 01:21 | The next step is to set up the way
that I want each button to look in its
| | 01:24 | normal or resting state. One quick way
to do that is to apply a pre-built style
| | 01:29 | to my buttons. I have my Styles panel
open over here, which I opened from the
| | 01:34 | Window menu at the top of the screen.
| | 01:36 | The default style set didn't have any
buttons that I liked and so I went to the
| | 01:40 | panel menu and selected one of
these other style sets that shipped with
| | 01:43 | Photoshop. I selected the Web Style set
and then I clicked OK at the prompt and
| | 01:48 | that replaced the default styles
with these Web Styles. I like these gel
| | 01:53 | buttons so I think I'm going to style
the normal state of my buttons with a white gel.
| | 01:58 | To do that, I'll check that all four
button layers are still selected in the
| | 02:02 | Layers panel and then I'll just click
on that white gel style in the Styles
| | 02:06 | panel. The style is applied to all
four buttons and in the Layers panel
| | 02:10 | underneath each of the button layers
you can see this list of effects that
| | 02:13 | makes up that white gel style.
| | 02:15 | The effects are taking up a lot of
space in the Layers panel, so I'm going to
| | 02:19 | collapse them by clicking on the arrow
to the right of each one of the button
| | 02:22 | layers and now I can see all of the
layers in my Layers panel. Now I want to
| | 02:27 | save the way that the buttons
currently look as the normal state of the
| | 02:30 | rollovers. This is where Layer Comps comes in.
| | 02:34 | I have opened my Layer Comps panel here,
from the Window menu at the top of the
| | 02:37 | screen and then I dragged the Layer
Comps panel by its tab over into the
| | 02:42 | right-hand column and I closed the
rest of the Layer Comps panel group. That
| | 02:46 | gives me more space to work
here in the document window.
| | 02:48 | I am now going to make my first Layer
Comp to memorize the way that the buttons
| | 02:52 | currently look. To do that, I'll go to
the bottom of the Layer Comps panel and
| | 02:56 | I'll click the Add New Layer Comp
button here and I'll give this Layer Comp a
| | 03:00 | name. I'll call this normal.
| | 03:02 | These three fields, Visibility,
Position, and Appearance, Layer Comps can
| | 03:07 | memorize whether layers are visible or
not, the position of layer content in a
| | 03:12 | document window and whether layers
have a layer style, a blending mode or an
| | 03:16 | opacity change applied to them.
| | 03:19 | In this case, Appearance is the most
important because this is the feature that
| | 03:22 | I'm going to use to vary the appearance
of my buttons. But I usually just check
| | 03:26 | all three of these to be safe and then
I'll click OK and that creates my first
| | 03:31 | Layer Comp here in the Layer Comps panel.
| | 03:33 | Now I'm going to go ahead and change
the appearance of these buttons to make
| | 03:37 | them the way I want them to look in
the over state. I'll check that all four
| | 03:40 | layers are still selected in the
Layers panel and then I'm going to go up to
| | 03:44 | the Styles panel and then I'm going to
click on this style which is a blue gel
| | 03:47 | style with a drop shadow.
| | 03:49 | You can see that the appearance of the
button has changed and also that those
| | 03:53 | layer based slices have expanded
vertically to accommodate the drop shadows
| | 03:57 | beneath the buttons. That's one of the
advantages of layer based slicing over
| | 04:01 | manual slicing.
| | 04:02 | Now I'm going to set up another Layer
Comp to memorize the way the buttons look
| | 04:06 | now as their appearance in the over
rollover state. So I'll go back to the
| | 04:10 | Layer Comps panel and I'll click on the
Add New Layer Comp button and I'll name
| | 04:14 | my new Layer Comp over. I'll leave all
three of this fields checked and I'll
| | 04:19 | click OK and that creates the over
Layer Comp here at the Layer Comps panel.
| | 04:24 | I can cycle through my Layer Comps by
clicking the arrows at the bottom of the
| | 04:27 | Layer Comps panel. This takes me back
to the normal Layer Comp and another
| | 04:31 | click takes me back to the over Layer Comp.
| | 04:33 | Another way to view individual Layer
Comps is just to click in the field to the
| | 04:37 | left of the Layer Comp you want to see.
These Layer Comps aren't set in stone.
| | 04:41 | I can change my mind about the
appearance of the button layers on either one of
| | 04:45 | these Layer Comps and then update
the Layer Comp to reflect the change.
| | 04:49 | So for example, let's say that I decide
that I don't like the way the overstate
| | 04:53 | looks instead of using the blue gel
style with this drop shadow, I would like
| | 04:57 | to use a plain green gel style. So I'll
make sure that I have selected my over
| | 05:01 | Layer Comp and then I'll double check
that I still have my four button selected
| | 05:05 | in the Layers panel and then in the
Styles panel, I'm going to click on the
| | 05:09 | green gel style and that
restyles all four buttons.
| | 05:12 | To update the over Layer Comp with that
change, I'll go back to the Layer Comps
| | 05:17 | panel and I'm going to click these
double curved arrows at the bottom of the
| | 05:20 | Layer Comps panel to update the
selected over style. Now when I cycle through
| | 05:25 | the two styles, you can see that
the over style has actually updated.
| | 05:29 | So that's how to use the Layer Comps
panel to create different looks for a set
| | 05:34 | of rollover buttons in their normal
state, their over state and you could add
| | 05:38 | some other states as well like
a down state or an out state.
| | 05:41 | Now that I have created different
versions of these graphics and memorize those
| | 05:45 | as Layer Comps, the next step is to
name and optimize the button slices, which
| | 05:49 | is what I'll show you how to do
in the next movie in this chapter.
| | Collapse this transcript |
| Optimizing rollover graphics| 00:00 | After you have created rollover
graphics, as I showed you how to do in a
| | 00:04 | preceding movie, the next step is to
optimize those graphics for the web,
| | 00:08 | which is what I'll show you how to do here.
To recap what I have done so far,
| | 00:11 | I started with a simple navigation bar
with each button on a separate layer and
| | 00:15 | I sliced the navigation bar so that the
buttons in their various states would be
| | 00:20 | saved out as individual graphics.
| | 00:22 | I set up the appearance of all the
buttons in their normal rollover state,
| | 00:25 | which is the way that you see them
here with this white gel style and then I
| | 00:29 | captured that look as a normal layer
comp. Then I change the appearance of the
| | 00:34 | buttons giving each one this green gel style
and captured that look as the over layer comp.
| | 00:39 | I will pick up here by naming each one
of the button slices. This is important
| | 00:44 | because the graphic files that will
be generated from this slices will get
| | 00:47 | their file names from the slice names
that I'm about to enter. With the Slice
| | 00:51 | Select tool selected in a toolbox, I'm
going to come down to the slice around
| | 00:55 | the boards button and I'm going to Ctrl-
click on a Mac or right-click on a PC.
| | 01:00 | That brings up this contextual menu
from which I can choose Edit Slice options.
| | 01:04 | That's an alternative way to open the
Slice Options dialog box. In an earlier
| | 01:08 | movie, I showed you that you could
also do that from the Slice Options button
| | 01:12 | up here in the Slice Select tool options bar.
| | 01:15 | Here in the Slice Options dialog box
I'm going to give this slice a more
| | 01:18 | meaningful name. I'll type boards_btn
and I would repeat that for each of this
| | 01:23 | other buttons. I'll Ctrl or right-click
> Edit Slice Options, type a meaningful
| | 01:29 | name like swim_btn and click OK.
Again Ctrl or right-click > Edit Slice
| | 01:35 | options. I'll type gear_btn, click OK
and Ctrl or right-click > Edit Slice
| | 01:42 | options. I'll type videos_btn and click OK.
| | 01:47 | For now I'm not going to bother naming
this other order slices. Before I open
| | 01:50 | this Save for Web & Devices window to
optimized the slices, I'm going to go
| | 01:54 | back to the Layer Comps panel and I'm
going to click in the box to the left of
| | 01:58 | the normal layer comp. That changes
the appearance of the buttons to their
| | 02:02 | normal state with the white gel style.
| | 02:04 | Then I'm going to go to the File menu
and I'm going down to Save for Web &
| | 02:08 | Devices. Here, I'll click on the
Optimize tab so that I can see as much as
| | 02:12 | possible of this white image and I'm
going to hold down the Spacebar and then
| | 02:17 | I'm going to drag to the left, so
that I can see all four buttons in the
| | 02:20 | Preview here.
| | 02:21 | Next I'm going to go over to the
toolbox on the left side of this window and
| | 02:24 | click on the Slice Select tool. With
that tool, I'm going to select the four
| | 02:28 | slices around the four buttons by
holding down the Shift key as I click on all
| | 02:33 | four slices. I'm doing that so that I
can optimize all the buttons with the
| | 02:37 | same settings.
| | 02:38 | It's difficult to see the actual
artwork because of the overlay of the slices
| | 02:42 | in this image, so I'm going to go over
to the Hide/Show Slices button here at
| | 02:46 | the bottom of the Save for Web &
Devices toolbox and click that to hide the
| | 02:50 | slices temporarily, but remember that I
still have only the four button slices
| | 02:55 | selected and the optimization
settings that I choose will effect only the
| | 02:59 | artwork under those slices.
| | 03:01 | Over in the optimization controls
I'll leave format set to GIF and in the
| | 03:05 | Colors field, I'm going to see how
these buttons look with, say, 64 colors.
| | 03:11 | They look great, but the file size
report that the bottom left to the preview
| | 03:14 | is pretty big. So I'm going to try
reducing the number of colors. I'll go down
| | 03:19 | to 32 colors, which I think is fine,
and let's see how 16 colors look.
| | 03:24 | With 16 colors the buttons are
starting to degrade at their corners. So I'm
| | 03:28 | going to go back to 32 colors which
gives me a file size of 25 K for all four
| | 03:33 | buttons and now I'll go back and click
on the Show/Hide Slices button to bring
| | 03:38 | my slices back.
| | 03:39 | If I were saving regular graphics
rather than rollover graphics, at this point
| | 03:43 | I'll go down and click the Save button
so that I could save out graphics from
| | 03:47 | each of the slices. However, I don't
want to do this when I'm making rollover
| | 03:51 | graphics, because if I did, Photoshop
will generate just one graphic for the
| | 03:55 | normal state of each button, but no
graphics for the overstate. In other words,
| | 03:59 | I would just get one white button for
each one of these button slices, and that
| | 04:03 | isn't what I want.
| | 04:04 | I would also like each one of these
slices to generate a second button, a green
| | 04:08 | button representing the over state of
the rollover graphic. So rather than
| | 04:13 | click Save, I'm just going to click
Done and that takes me back into Photoshop.
| | 04:17 | Once I'm here, I want to go back to the
Layer Comps panel and click in the box
| | 04:21 | to the left of the over layer comp.
That changes the appearance of the buttons
| | 04:24 | to their over state, which I
styled with this green gel style.
| | 04:29 | Now I'm going to go back into the Save
for Web & Devices window by going to the
| | 04:32 | File menu and going down to Save for
Web & Devices. Again, I'm holding down the
| | 04:37 | Spacebar and dragging to the left so I
can see all four buttons and again with
| | 04:41 | the Slice Select tool, I'm going to
Shift-click in each one of the slices to
| | 04:45 | select all four button slices.
| | 04:47 | I am going to click the Show/Hide
Slices button here, so that I get a better
| | 04:51 | view of my buttons. I'm glad that I
did this because what I'm seeing is that
| | 04:55 | with 32 colors in the GIF format, the
buttons don't look very good with the
| | 04:59 | green gel style, even though they
did look okay with the white gel style.
| | 05:03 | I see some bending in each one of the
buttons. That's caused by the continuous
| | 05:07 | tones in the style that I applied here.
There are two possible ways to fix this
| | 05:12 | I might try optimizing these buttons
in the JPEG format which sometimes works
| | 05:16 | with flat art like this that has
continuous tone in it or I could try
| | 05:20 | increasing the number of colors in
the GIF format. I'll try the JPEG format
| | 05:24 | first, remember I still have all four
buttons slices selected so I'm going up
| | 05:28 | to the format area and I'll choose JPEG.
| | 05:31 | With the JPEG at high quality, I see
that file size is bigger than I would like
| | 05:35 | and I'm also starting to see some art
effects around the type on each one of
| | 05:39 | the buttons. Because I don't want to
increase the quality, which would also
| | 05:43 | increase the file size, I'm going to go
back to the GIF format. So I'll choose
| | 05:46 | GIF from here and I'll try to fix the
bending by going to the Colors field and
| | 05:52 | increasing the number of colors in these GIFs.
| | 05:54 | At 64 colors, I think that the buttons
look fine and I'm happy with this file
| | 05:58 | size, so I'm going to go with that.
I'm going to go back and show these slices
| | 06:03 | again from this button in the toolbox
and then I'm going to click on just one
| | 06:06 | of the order slices down here and I'll
optimize that slice with settings that
| | 06:11 | will apply to all of the other slices
automatically. I probably can get away
| | 06:14 | with less than 32 colors here.
I'll try something like 16.
| | 06:17 | Now that I have done optimizing, I
would like to save out some rollover
| | 06:22 | graphics. However, again, I don't want
to click the save button because if I
| | 06:26 | did that now, then Photoshop would save
the buttons only in their overstate. In
| | 06:31 | other words, I would only get one
version of each one of this buttons, the
| | 06:34 | green version. So I'm going to click
Done again so that Photoshop remembers
| | 06:39 | these optimization settings
and go back into Photoshop.
| | 06:42 | Unfortunately, there is no native way
to export multiple rollover graphics from
| | 06:47 | each one of these multiple slices, but
that's okay because knowing that there
| | 06:51 | is no way to do that in Photoshop CS4
www.lynda.com has gotten together with
| | 06:55 | scripting expert Trevor Morris to
create a special script that will do this
| | 07:00 | automatically for you and we are
making that script to be available to all of
| | 07:03 | you for free.
| | 07:04 | In the next movie I'm going to show you
how to find that special script and how
| | 07:07 | to install it in your copy of Photoshop
and how to use it to expert rollover graphics.
| | Collapse this transcript |
| Installing the lynda.com rollover script| 00:01 |
When you have created multiple
rollover buttons each with several rollover
| | 00:04 |
states, you are going to want to save
out multiple versions of each button.
| | 00:08 |
One version for each of the rollover states.
| | 00:11 |
For example, in this navigation bar
if I go to the Layer Comps panel, I can
| | 00:15 |
switch between the normal state of the
buttons, which I have saved here as a
| | 00:19 |
Layer Comp and the over state of
the buttons, which I have saved as the
| | 00:22 |
Separate Layer Comp and I showed
you how to do that in previous movies.
| | 00:26 |
So what I want to do is save from
each one of these button slices, a green
| | 00:30 |
version of the button and a white
version of the button, each one as a separate
| | 00:34 |
GIF file. So I should have a total of
8 different files coming out of these
| | 00:39 |
four button slices. Unfortunately,
there is no way to make that happen natively
| | 00:43 |
in Photoshop CS4.
| | 00:45 |
For that reason www.lynda.com has
collaborated with Photoshop scripting guru,
| | 00:49 |
Trevor Morris to create a special
script that fills this gap. The script is
| | 00:54 |
called the LayerCompsToSlices script
and what it does is allow you to export
| | 00:58 |
multiple states of multiple slices all at once.
| | 01:01 |
We are making this script available
to everyone for free. You will find the
| | 01:05 |
script in the www.lynda.com Online
Training Library on the course page for this
| | 01:10 |
course Photoshop CS4 for the Web or
if you are listening to the course on a
| | 01:15 |
DVD, you will find it on your course
DVD. Installing the script is as easy as
| | 01:20 |
placing it in a proper folder inside
of Adobe Photoshop CS4 on your computer.
| | 01:25 |
I am going to show you where that
folder is on a Mac and I'll give you the path
| | 01:29 |
to the proper directory on a PC. On
Mac I'm going out to my desktop where I
| | 01:34 |
placed the script right here the Layer
Comp to Slices.jsx file. I'm going to
| | 01:40 |
copy that script and then I'm going to
navigate to the Scripts folder inside of
| | 01:45 |
Adobe Photoshop CS4.
| | 01:47 |
Here in my Finder Window, you can see
the paths to the Scripts folders that I'm
| | 01:51 |
going for. I'm starting over in the
Applications folder and then going to the
| | 01:55 |
Adobe Photoshop CS4 folder and inside
that folder to the Presets subfolder and
| | 02:01 |
inside that folder to the Scripts
subfolder. Inside the Scripts subfolder, I'm
| | 02:07 |
going to paste that script item. Let
me expand this panel so that you can see
| | 02:12 |
my new Layer Comps to Slices.jsx
script there among all of the other scripts
| | 02:18 |
that ship with Photoshop.
| | 02:20 |
Whether you are on a Mac or on a PC,
after you install the script, as I just
| | 02:23 |
showed you, you have to restart
Photoshop so that the script appears in the
| | 02:27 |
Scripts menu, so you can use that next
time around. If I come to the File menu,
| | 02:31 |
and I go down to Scripts, there I can
see my new Layer Comps to Slices script,
| | 02:37 |
waiting to be applied to a file and
that's exactly what I'm going to show how
| | 02:40 |
to do in the next movie.
| | 02:42 |
| | Collapse this transcript |
| Exporting rollover graphics| 00:00 |
If you use Photoshop's Layer Comps to
create multiple rollover graphics,
| | 00:04 |
you can take advantage of this special
lynda.com Layer Comps to Slices script to
| | 00:09 |
export all of the rollover graphics at once.
| | 00:12 |
To recap what I have done so far to the
file that you see here, I have created
| | 00:16 |
two different layer comps for the four
buttons in this navigation bar, and you
| | 00:20 |
can see those layer comps in the Layer
Comps panel. If you are following along
| | 00:24 |
and your Layer Comps panel isn't open,
you can open it from the Window menu at
| | 00:28 |
the top of the screen.
| | 00:29 |
With the normal layer comp selected
here in the Layer Comps panel, the buttons
| | 00:33 |
in the navigation bar are displayed in
their normal state, with this white gel
| | 00:37 |
style applied to each one. If I go back
to the Layer Comps panel and I click to
| | 00:42 |
the left of the over state, you can
see the way that the four buttons look in
| | 00:45 |
the over layer comp. They
have this green gel style.
| | 00:49 |
In addition to applying layer comps
to the buttons, I have sliced this
| | 00:53 |
navigation bar making a separate
slice around each button. I have given the
| | 00:57 |
button slices meaningful names. Then I
have optimized all the slices as GIFs in
| | 01:02 |
Photoshop's Save for Web &
Devices dialog box. So that's a recap.
| | 01:06 |
Now I would like to save out two
different graphics from each one of these
| | 01:10 |
slices. A white version for the normal
state of each of the four buttons, and a
| | 01:14 |
green version for the over state of
each button. Then I could bring all eight
| | 01:19 |
of those graphics into a website
building program like Dreamweaver, where I
| | 01:23 |
could program them to rollover.
| | 01:24 |
I am going to use the lynda.com Layer
Comps to Slices script to export all of
| | 01:29 |
these graphics by going up to the File
menu at the top of the screen and down
| | 01:34 |
to Scripts and over to Layer Comps to
Slices. By the way, if you don't see the
| | 01:39 |
Layer Comps to Slices menu item in
your Scripts menu, then go back and listen
| | 01:43 |
to the preceding movie about how to
install the lynda.com script, so that the
| | 01:48 |
Layer Comps to Slices item
will appear in that menu.
| | 01:52 |
The first thing that this script asks
me is to select a folder in which to keep
| | 01:55 |
all of the optimized files that the
script is going to make for me. I'll do
| | 02:00 |
that in this Choose a Folder window by
navigating to my Desktop, and there I'll
| | 02:03 |
make a new folder by clicking the New
Folder button. I'll name it rollovers and
| | 02:09 |
I'll click Create. To run the script,
I click Choose. Now I'll go out to my
| | 02:15 |
Desktop to see what the script made for
me. There is the rollovers folder that
| | 02:19 |
I have just created. If I open that,
I see inside an images folder that the
| | 02:23 |
script made for me.
| | 02:25 |
Inside the images folder are these many
GIFs. Each of these GIFs came from one
| | 02:30 |
of the slices in the image. They were
saved out in web ready GIF format because
| | 02:35 |
that's the format that I chose when I
optimized each slice in Photoshop's Save
| | 02:39 |
for Web & Devices window. If I would
have optimized any of the slices as JPEGs
| | 02:44 |
or PNGs, then I would see those here as well.
| | 02:47 |
Notice that some of these files have
meaningful names, like boards_btn_over.gif
| | 02:52 |
and boards_btn.gif. Those two files
are two versions of the button that the
| | 02:58 |
script created from the slice that I
have named boards btn. The same is true
| | 03:02 |
for the gear_btn slice, the swim_btn
slice and the videos_btn slice, which
| | 03:08 |
generated videos_btn_over.gif and
videos_btn.gif. The rest of these GIFs that
| | 03:13 |
don't have meaningful names were
made from the auto slices in the file.
| | 03:18 |
I'll open some of the named GIFs so
you can see what they are. I'll select
| | 03:22 |
boards_btn_over.gif and then I'll hold
the Shift Key and select gear_btn.gif.
| | 03:27 |
That selects all four of those files.
To open them all in Photoshop, I'll
| | 03:31 |
double-click anyone of the selected files.
| | 03:34 |
Here in Photoshop is gear_btn.gif,
which is the white version of the boards btn
| | 03:39 |
in its normal state. If I click the
tab on this gear_btn_over.gif, I see the
| | 03:44 |
gear_btn in its over state with the
green gel style. The same is true for
| | 03:48 |
boards_btn.gif, which is the
white version in the normal style, and
| | 03:52 |
boards_btn_over.gif, which is the over
version of the boards btn in its green gel style.
| | 03:57 |
So now that I have all these rollover
graphics, how would I make them into
| | 04:01 |
working rollover buttons? One way
would be to bring both versions of each
| | 04:06 |
button into Dreamweaver and there
create an HTML page and place the buttons on
| | 04:10 |
that page. Then have Dreamweaver add
JavaScript. That would swap one version of
| | 04:15 |
the button for the other, when a viewer
moused over the button in a Web browser.
| | 04:19 |
So that's' how you can use the special
Layer Comps to Slices script to output
| | 04:23 |
multiple rollover graphics all at once.
We hope you will make good use of that
| | 04:27 |
script in your own work.
| | 04:29 |
| | Collapse this transcript |
| Making rollover graphics from layer visibility| 00:00 | Earlier in this chapter, I showed
you how to make graphics for different
| | 00:04 | rollover states in Photoshop by applying
prebuilt styles from Photoshop Styles panel.
| | 00:09 | But that's not the only way
to vary the Photoshop artwork between
| | 00:12 | rollover states.
| | 00:14 | Alternatively, you can put different
pieces of artwork on different layers, and
| | 00:18 | then manipulate the visibility of
layers as you change rollover states.
| | 00:22 | I'll show you how that's done in Photoshop
in just a moment, but first I want to
| | 00:25 | show you the results here
in my Safari web browser.
| | 00:28 | All the artwork that you are about to
see was created in Photoshop, and then I
| | 00:32 | took it from Photoshop into Dreamweaver
to program the artwork to rollover like
| | 00:36 | this. If I take my mouse and I move
over any one of these icons, the icon gets
| | 00:41 | bigger and turns purple. And the
same is true of this Gear icon, and this
| | 00:45 | Wetsuits icon, the Swimwear, and the Surfboard.
| | 00:50 | The way that I did that was to create
two graphics and put one on each layer.
| | 00:54 | One, a small black version of each icon,
and the other, a larger purple version
| | 00:58 | of each icon. And then I varied the
visibility of those two layers in the over
| | 01:03 | state and in the normal state of each
button. But that's not all. I also added
| | 01:08 | another state, and that is a state
that's triggered here in the Web browser by
| | 01:12 | a viewer moving his or her mouse over
an icon and clicking or pressing down.
| | 01:17 | So for example, I'm going to move over
the Wetsuit. It turns purple and gets
| | 01:20 | bigger. And now, I'm going to press
down on my mouse, and the color changes to
| | 01:24 | blue. I go over to another icon and do
the same thing. On mouse over, the icon
| | 01:29 | gets bigger and turns purple, on
mouse down, it turns blue. And you can see
| | 01:34 | that's true on all these icons.
| | 01:37 | And I did that, by adding a Color
Overlay layer effect on the large version of
| | 01:42 | each icon. So, I'm going to go back
into Photoshop and show you how that's made.
| | 01:47 | Here in Photoshop, you can see a
Navigation Bar that contains all of the
| | 01:51 | artwork that I brought into
Dreamweaver to program as rollovers. The artwork
| | 01:55 | was all created here on layers. In the
Layers panel, you can see that there are
| | 01:59 | multiple layer groups. The black small
icons that you see here are in the layer
| | 02:04 | group called small. If I click the
arrow to the left of that layer group, you
| | 02:08 | will see that it contains these five
layers, each of which contains a separate
| | 02:12 | small black icon. So I'll turn a
couple of these off and on, so that you can
| | 02:16 | see the content of each layer.
| | 02:17 | By the way, if you are wondering
about the icons on these layers, these are
| | 02:20 | smart objects that were made in
Adobe Illustrator and then brought into
| | 02:24 | Photoshop. So, this is the way that I
have planned the Navigation Bar to look
| | 02:28 | on the normal state.
| | 02:29 | To memorialize that in a layer comp,
I'm going to go up to the Layer Comps
| | 02:33 | panel and I'm going to click the New
Layer Comp button down here at the bottom
| | 02:37 | of that panel.
| | 02:38 | In the New Layer Comp dialog box, I'm
going to name this layer comp Normal, and
| | 02:43 | I'll leave all three of the layer comp
properties checked. Although the one I'm
| | 02:47 | really interested in is Visibility
because that's the property that I'm varying
| | 02:51 | across rollover states. I'll click OK,
and now I have one layer comp, which I
| | 02:56 | have labeled Normal.
| | 02:57 | Next, I'm going to setup the appearance
of the over state of these buttons. On
| | 03:01 | the over state of any one button, I
would like the button to get larger and to
| | 03:05 | become purple. So, I'm going to go
down to my Layers panel and I'm going to
| | 03:09 | click the Eye icon to the left of the
small layer group to make all the layers
| | 03:13 | in that group temporarily invisible,
and I'll collapse that layer group just to
| | 03:18 | make some room and then I'm going to
go to the big layer group, and I'm going
| | 03:21 | to click the arrow to the left of that
group. You can see that in this group,
| | 03:25 | there are five other layers. Each of
these layers contains a larger version of
| | 03:29 | the icons, which I have colored purple.
| | 03:31 | I am going to click the Eye icon to
the left of the big layer group, and that
| | 03:35 | turns on all of the layers in that group.
So this is the way that I would like
| | 03:39 | each button to look on
its individual over state.
| | 03:42 | Now, remember not all of these icons
will be triggered at the same time. They
| | 03:46 | will just appear one at a time, when a
viewer moves his or her mouse over the
| | 03:50 | corresponding icon in a Web browser.
| | 03:53 | To capture this look, I'm going to go
to the Layer Comps panel, click the Add
| | 03:56 | Layer Comp button again, and I'll call
this the Over state, and I'll leave all
| | 04:00 | the properties checked again and click OK.
| | 04:03 | Now, if I say I go back to the Normal
Layer Comp in the Layer Comps panel, you
| | 04:07 | can see the small black icons and when
I click on the Over layer comp, you see
| | 04:11 | the large purple icons. But that's
not all. I would like to make one more
| | 04:15 | state, and that is going
to be called the Down state.
| | 04:17 | Here in Photoshop, I'll set up the
appearance of the buttons as I would like
| | 04:21 | them to look on the down state. What I
would like to have happened is for each
| | 04:24 | button to change color and turn blue.
One way to do that is by adding a layer
| | 04:29 | effect. So I'm going to start with
this wahine layer which is this icon right
| | 04:33 | here. I'll go to the FX button at the
bottom of the Layers panel and I'm going
| | 04:37 | to choose Color Overlay. That opens
the Layer Style dialog box where I have a
| | 04:42 | black or dark color overlay going on. I
would like that to be a blue color, so
| | 04:46 | in the Color Overlay options, I'm going
to click the Color field and I'm going
| | 04:50 | to choose a blue color. I'll click OK
and then I'll click OK one more time to
| | 04:55 | close the Layers Style dialog box.
| | 04:58 | Now, I would like to use that same
Color Overlay layer effect on these other
| | 05:01 | four layers. One way I can do that is
simply copy the layer effect from one
| | 05:06 | layer to another. I'm going to hold
down the Option Key on a Mac. That's the
| | 05:09 | Alt Key on a PC. As I click on this
Color Overlay effect on the wahine layer
| | 05:14 | and drag up to the gear layer and
release my mouse. And that copies the effect
| | 05:18 | to the Gear layer and you can
see that the Gear icon is now blue.
| | 05:22 | I'll do the same thing again.
I'm going to Option-click or Alt-click on
| | 05:25 | the Color Overlay effect on the wahine
layer and drag it up to the Wetsuit layer,
| | 05:29 | and I'll keep doing that for each
layer. Option+Alt-click and drag, and
| | 05:34 | Option+Alt-click and drag. And, now I
have managed to color each one of the
| | 05:38 | large icons with this lovely blue.
| | 05:41 | Now, I have Photoshop remember that in
yet another layer comp, by going up to
| | 05:45 | the Layer Comps panel, clicking the
Add New Layer Comp icon here, and calling
| | 05:49 | this state the down state and clicking OK.
| | 05:52 | Now, I can cycle through my three
layer comps by using these arrows at the
| | 05:56 | bottom of the Layer Comps panel. And
there you can see the Normal state with
| | 06:00 | the small black icons, the Over state
with the large purple icons and the Down
| | 06:05 | state with the large blue icons.
| | 06:07 | So those are a couple more ways
that you can create rollover artwork in
| | 06:11 | Photoshop by varying the visibility of
layers, and by applying individual layer
| | 06:16 | effects. At this point, I would go
through all the steps that I showed you in
| | 06:20 | previous movies when I was
describing how to create rollover artwork with
| | 06:24 | built-in styles.
| | 06:25 | I would slice up these buttons, I
would name the slices, I would optimize
| | 06:29 | everything for the web, and then I
would run the lynda.com Layer Comps to
| | 06:33 | Slices script that we provided for
you. To export out all of the rollover
| | 06:38 | graphics, for all of the states, of
all of these buttons, all at once.
| | Collapse this transcript |
|
|
12. AnimatingCreating animations from layer visibility| 00:00 |
A simple way to add animation to a
website, a blog, or a web banner is to
| | 00:05 |
create a GIF animation in Photoshop.
The advantage of animated GIFs over other
| | 00:09 |
animation formats is that animated GIFs
can play in any Web browser without any
| | 00:14 |
special plug-ins or code. However, you
don't want to make an animated GIF too
| | 00:18 |
complex, because this format can get
very big in file size, if you include too
| | 00:23 |
many frames, or if the
artwork is too complicated.
| | 00:26 |
The animated GIF format is best suited
for short simple animations like those
| | 00:30 |
you might see in ads or logos. There
are several ways to create animated GIFs
| | 00:35 |
in Photoshop. You can use tweening to
automatically animate layer visibility,
| | 00:40 |
layer position or layer effects. As I
show you how to do later in this chapter.
| | 00:44 |
In this movie, I'm going to cover a
more manual method of animating using
| | 00:48 |
what's called frame-by-frame animation.
The key to this method is to start with
| | 00:52 |
a layered file, like the one here in
which you have made individual pieces of
| | 00:57 |
artwork on separate layers. For example,
in the Layers panel here you can see
| | 01:01 |
that I have multiple layers, and if I
click in the Visibility icon to the left
| | 01:05 |
of each one, you can see what's on each layer.
| | 01:08 |
So here is what is on the S layer, here
what's on the U layer, the R layer, and
| | 01:13 |
the F layer. Each of those layers
contains a single hand-drawn letter on a
| | 01:19 |
transparent background. What I would
like to have happened during the animation
| | 01:23 |
is for each of these letters to appear
briefly on screen in sequence, and that
| | 01:27 |
will be the simple animation.
| | 01:28 |
I am going to start building this
frame-by-frame animation by opening the
| | 01:32 |
Animation panel. I'll go to the Window
menu, and I'll choose Animation. By the
| | 01:37 |
way, I have turned my Application Frame
off, so that I can bring the Animation
| | 01:40 |
panel up high enough that you can see it.
| | 01:42 |
I happened to be working in Photoshop
CS4 Extended, if you are not, you won't
| | 01:47 |
see this Measurement Log tab here, and
the label on your Animation panel may
| | 01:51 |
look a bit different, but it is the
same animation panel. And if you happened
| | 01:55 |
to be working on Photoshop CS4 Extended,
and your Animation panel doesn't look
| | 02:00 |
like this, but instead it looks like a
Timeline, you can change it back to this
| | 02:04 |
view, by going to the panel menu on
the right-side of that Timeline, and
| | 02:07 |
choosing Convert to Frame Animation.
When I open the Animation panel, I see the
| | 02:12 |
first frame of the animation
automatically, and it displays only the layers
| | 02:16 |
that are currently visible
over here in the Layers panel.
| | 02:19 |
Now, I'm going to make a second frame
in the Animation panel by clicking this
| | 02:23 |
icon here, the second from the right
which is the Add Frame icon, and that
| | 02:27 |
creates frame number 2 in this animation.
| | 02:30 |
To start with frame number 2 is an
exact copy of frame number 1, but I want to
| | 02:34 |
make a change on frame number 2.
So I'll make sure that there is this
| | 02:37 |
light-blue highlight around frame 2,
and then I'm going to go over to the
| | 02:40 |
Layers panel and I'm going to click in
the Visibility field of this S layer to
| | 02:45 |
make the contents of that layer visible
on frame 2. And now if I click on frame
| | 02:49 |
1, you don't see the S. if I
click on frame 2, you do see the S.
| | 02:53 |
I am going to make a third frame.
With frame 2 selected, I'll go to the Add
| | 02:57 |
Frame icon in the Animation panel,
I'll click and that creates frame 3, an
| | 03:03 |
exact copy of frame 2. With frame 3
highlighted, I'll go over to the Layers
| | 03:07 |
panel to change some content. I'm going
to turn the S layer off by clicking in
| | 03:12 |
its Visibility field, and I'll turn the
U layer on. Now I'm going to create two
| | 03:17 |
more frames the same way each
with separate layer content.
| | 03:20 |
I'll go back to the Animation panel
and click the Add Frame icon again to
| | 03:24 |
create frame 4, which is now a copy of
frame 3. With frame 4 highlighted, I'll
| | 03:30 |
go over to the Layers panel and I'll
turn off the U layer, and turn on the R
| | 03:34 |
layer. I'll do that one more time in
the Animation panel, click the Add Frame
| | 03:38 |
button, go over to the Layers panel,
turn off the R layer and turn on the F layer.
| | 03:43 |
Now, if I click through the various
frames, you can start to see how the
| | 03:47 |
animation is going to look. There is
one more piece of artwork on another layer
| | 03:51 |
in the Layers panel. But I would like
to have it appear on all of the frames in
| | 03:55 |
the animation, and that's the
artwork on the flowers layer here.
| | 03:59 |
I happened to have frame 5 selected at
the moment, and I'm going to go over to
| | 04:02 |
the Layers panel and make
that flowers layer visible.
| | 04:06 |
The flowers now appear on frame 5 of
the animation, but not on any of the other
| | 04:10 |
frames. So here's how you make the
contents of a layer ripple through to the
| | 04:14 |
other frames in an animation.
| | 04:15 |
I am going back to the Layers panel
again, and this time I'm going to click
| | 04:19 |
directly on the flowers layer, to
highlight that layer. That makes these Unify
| | 04:24 |
icons available here at the top of the
Layers panel. I'm going to click on the
| | 04:27 |
center one. This is a Unify Layer
Visibility icon. And in this message I'm
| | 04:33 |
going to click the Match button.
| | 04:35 |
The content of the flowers layer
appears on all of the frames in the animation.
| | 04:39 |
So I can click through all of
them and see the flowers there.
| | 04:41 |
Now, I'm going to preview the animation
and I can use the controls here at the
| | 04:45 |
bottom of the Animation panel to do
that. I click the double-pointed arrow to
| | 04:49 |
go back to frame 1, and then I'll click
the right facing Play button; that was
| | 04:53 |
the animation. As you can
see it's playing way too fast.
| | 04:57 |
So the next step is to add some time
between each one of the frames in the
| | 05:01 |
animation. To do that, I'm going to
make sure I have the last frame selected,
| | 05:05 |
and then I'll hold the Shift Key down,
and I'll select the first frame and that
| | 05:09 |
gets all the frames in between too.
And then I'm going to click on this Time
| | 05:12 |
menu at the bottom of any one of
these selected frames. And from the pop-up
| | 05:17 |
menu of seconds, I'm going to choose
perhaps 1.0 second as the delay between
| | 05:22 |
each one of these frames. It's always
just a guess and you can go back and
| | 05:25 |
change it if you don't like the result.
| | 05:27 |
I'd like to have a little extra delay
on the first frame, and so I'm going to
| | 05:31 |
click back on frame 1, go to its Time
menu and I'll choose 2.0 seconds for that
| | 05:35 |
extra bit of hesitation at the
beginning of the animation, because I'm going to
| | 05:40 |
have the animation play more than once.
| | 05:42 |
To make that happen, I'm going to
come down to this menu which currently is
| | 05:45 |
labeled once, click there and from here
I can choose a number of times that the
| | 05:49 |
animation will play.
| | 05:51 |
In this case, I don't want it to play
forever, instead I'm just going to have
| | 05:54 |
it play three times, and if you don't
see three times in this menu, you can
| | 05:58 |
click Other, and in the Loop Count
dialog box, you can set the number of times
| | 06:03 |
that you want the animation to play. So,
I cancel there, and from this menu I'm
| | 06:07 |
going to choose 3 times.
| | 06:08 |
Now I'm going to preview by clicking
the Play button here, the animation plays
| | 06:13 |
and hesitates here, and plays again.
Hesitates and plays it third time. And
| | 06:21 |
that's great! That's just the way that
I wanted it to look. Keep in mind that
| | 06:25 |
the time delays that I set here are not
really exact because the speed at which
| | 06:29 |
a GIF animation will play depends in
part on the processing speed of the
| | 06:33 |
viewer's computer. The times that you
see here are really more relative than exact.
| | 06:37 |
Now that I'm done building this
animation, it's time to optimize it as a GIF
| | 06:41 |
and save it. To do that I'm going to
go up to the File menu, and down to Save
| | 06:45 |
for Web & Devices. I'll work in the
Optimized Tab, and I'm going to use the
| | 06:49 |
controls over on the right to optimize
this animated GIF just as I would any
| | 06:54 |
GIF. The controls are just the same.
| | 06:56 |
The Format menu here must be set to
GIF because none of these other choices
| | 07:00 |
will animate. There is no such things
in animated JPEG. And notice that there
| | 07:04 |
is no choice here for exporting a SWF.
If you are interested in creating a SWF
| | 07:07 |
file, then you'll need to use another
application like Adobe Flash or After Effects.
| | 07:12 |
So I'm going to set this to GIF, and
then I'll go to the Colors field and I'll
| | 07:17 |
try to increase the number of colors
here because I see that the photograph in
| | 07:20 |
the background of this
GIF doesn't look very good.
| | 07:23 |
In the Colors field I'm going to
choose the maximum number of possible colors
| | 07:27 |
in a GIF, 256, and I'm still not happy
with the appearance of that photograph
| | 07:31 |
in the background, and down here on the
bottom-left of the Preview, I see that
| | 07:35 |
my animated GIF is going to be pretty big.
| | 07:38 |
So I could try to tweak the GIF
controls, perhaps by getting rid of the lossy
| | 07:43 |
compression here and trying to add
some dither in. But I still don't like to
| | 07:48 |
look at that photograph, and
now the file is way, way too big.
| | 07:51 |
So the upshot is that when you are
including a photograph in an animated GIF,
| | 07:56 |
you may have to live with less
imperfect photo quality or you may have to go
| | 07:59 |
back to your original file and modify
the design. Let me show you how I might
| | 08:03 |
do that in this case.
| | 08:04 |
I am going to click the Cancel button,
and I'm going to go back to Photoshop.
| | 08:08 |
Here in the Layers panel, I'm going
to look inside this bg layer group and
| | 08:12 |
there I can see the photo layer that
contains this photograph in the background.
| | 08:16 |
I am going to change that photograph
into a graphic. To do that I'll select the
| | 08:20 |
photo layer, and I'll go up to the
Filter menu at the top of the screen and
| | 08:24 |
choose Convert for Smart Filters. I
always like to apply the Smart Filter
| | 08:28 |
command before adding a filter,
because that way I'll always be able to come
| | 08:32 |
back and tweak the filter options if I want to.
| | 08:34 |
You can see the special Smart Object
or Smart Filer icon there on the photo
| | 08:38 |
layer. I'm now going back to the Filter
menu, and down to the Artistic category
| | 08:43 |
of filters and from there I'm going to
choose the Cutout filter. That opens the
| | 08:47 |
Filter Gallery here. With the Cutout
filter selected and a preview of how the
| | 08:51 |
image will look with this particular
filter applied, there are options over on
| | 08:55 |
the right that I can tweak. I'm just
going to leave these at the settings that
| | 08:58 |
you see now, 8, 3 and 1, and I'm going
to click OK. As you can see here in the
| | 09:04 |
document window my photograph no
longer looks like a photo. It looks like a
| | 09:08 |
graphic made from a photo. But I kind
of like this look, and this often comes
| | 09:12 |
in handy, I'll reduce the
file size of my animated GIF.
| | 09:15 |
Notice also that that change has
rippled through all of the frames in this
| | 09:19 |
animation. And the reason is that I had
frame number 1 selected when I made the
| | 09:23 |
change, and by default in the Layers
panel this box Propagate Frame 1 is
| | 09:29 |
checked. So that means that any
changes that you make with frame 1 selected
| | 09:33 |
will propagate or ripple
through to all the other frames.
| | 09:36 |
Now I can go back and optimize this
image as a GIF by choosing File > Save for
| | 09:41 |
Web & Devices. I think the image looks
pretty good right now with 64 colors and
| | 09:46 |
a little bit of a lossy compression
and no dither. So I'm going to go with
| | 09:49 |
that. I also like the file size, which
is less than 20 kilobytes for all the
| | 09:53 |
frames in this animation.
| | 09:55 |
One thing to keep in mind when you are
optimizing an animated GIF is that all
| | 09:59 |
of the frames in the animation are
going to optimize with the same settings. So
| | 10:03 |
I like to go through the frames one-by-
one using the controls down here on the
| | 10:07 |
bottom-right of the Save for Web &
Devices window to make sure that all the
| | 10:11 |
frames look good with the
settings that I have chosen.
| | 10:14 |
So I'm going to click the Play button
down here at the bottom-right, and that
| | 10:17 |
will play the animation going through
each frame, so that I can check whether
| | 10:21 |
it looks good with these settings.
And I think it's fine. So I'll click the
| | 10:24 |
Stop button. I could also use this
control right here, which takes me through
| | 10:28 |
the frames one-by-one, if I want to
manually see how each frame looks with
| | 10:32 |
these settings.
| | 10:33 |
When I'm satisfied, I'm going to
click the Save button and I'm going to
| | 10:37 |
navigate to my Desktop from the Format
menu of the Save Optimized As window,
| | 10:42 |
instead of HTML and Images I'm going to
choose Images Only. That's because GIFs
| | 10:47 |
are self-running. They don't need HTML
to play. So I'm just going to save out a
| | 10:51 |
single GIF file here, no HTML. And I
save this GIF to my Desktop by clicking Save.
| | 10:57 |
Now, I'm going back out to my Desktop
and there is my GIF. I'll open that in a
| | 11:02 |
Web browser so that you can see it play.
And here it will play through three
| | 11:05 |
times and then stop.
| | 11:07 |
So that's the frame-by-frame animation
method that you can apply in Photoshop
| | 11:11 |
to create a simple GIF animation, by
turning layer visibility on and off across
| | 11:16 |
the various frames of the animation.
| | 11:18 |
You can bring the animated GIF just
like any GIF file into a website building
| | 11:22 |
program like Dreamweaver to include a
little bit of motion on your web page.
| | 11:27 |
| | Collapse this transcript |
| Tweening with opacity| 00:00 | Tweening is another way to create an
animated GIF in Photoshop. Tweening is an
| | 00:05 | automatic method. All you have to do
is make a couple of frames and Photoshop
| | 00:09 | will automatically make all
the frames in between for you.
| | 00:13 | Open the Animation panel and put it
in Frames Mode by choosing Convert to
| | 00:18 | Frames Mode from the fly-out menu at
the top right of the panel. In this case,
| | 00:23 | I would like to take the graphic that
you see here and have it fade in as my
| | 00:27 | animation, and to do that, I'm going
to tween the opacity of the layer that
| | 00:31 | contains that graphic.
| | 00:33 | Over in the Layers panel, you can see
that layer here. It's this Image layer.
| | 00:37 | This started out as a photograph as
I'll show you now, and then I added this
| | 00:40 | cutout filter to give it a graphic
appearance so that it will optimize better
| | 00:44 | in the GIF format.
| | 00:45 | To start building this tweened animation,
I'm going to do down to the Animation
| | 00:49 | panel and I see there at the first
frame in the animation, which Photoshop
| | 00:54 | creates for me automatically.
I'm going to click the Add Frame button right
| | 00:57 | here and that adds Frame 2, which is
currently an exact copy of Frame 1.
| | 01:01 | I would like to go back to Frame 1 and
make a change there. So I'm going to click
| | 01:05 | on Frame 1 in the Animation panel and
then I'm going to go over to the Layers
| | 01:09 | panel to make a change to this frame.
| | 01:11 | But before I do, it's very important
that I go up to this box, Propagate Frame
| | 01:16 | 1 and uncheck it. If I left this box
checked, then whatever changes I made on
| | 01:22 | Frame 1 of the animation, would ripple
through to the other frames and that's
| | 01:25 | not what I want in this case. Because
on Frame 1, I want to make the image look
| | 01:30 | like it's faded out.
| | 01:32 | So, I'm going to make sure I have the
Image layer selected here in the Layers
| | 01:35 | panel and then I'm going up to the
Layer Opacity field here at the top of the
| | 01:39 | Layers panel. I'll click the arrow
to the left of that field and move the
| | 01:43 | slider all the way to the left until
Opacity is set to zero, and then I'll
| | 01:47 | click off the slider.
| | 01:49 | So now in Frame 1, you don't see the
image at all. Its layer is set to 0%
| | 01:53 | Opacity. In Frame 2, you do see the
image because now the layer is set to 100%
| | 01:59 | Opacity, which was the original
setting. If I were to play this image, it
| | 02:04 | wouldn't look very good, which is flip
back and forth between these two frames.
| | 02:07 | So, I want to add some frames in
between and here is where tweening comes in.
| | 02:11 | I will make sure I have Frame 2
selected here and then I'm going to go to this
| | 02:15 | button, the third from the right.
This is the Tween button. This opens the
| | 02:19 | Tween dialog box. In the top menu there,
I'll choose that I want to Tween With
| | 02:24 | the Previous Frame, which means
Frame 1 in this case, because Frame 2 is
| | 02:28 | selected. Then I'll choose a number
of frames to add in between these two.
| | 02:32 | The more frames that I add, the
smoother the animation will look but the bigger
| | 02:36 | the file size would be. So I try to be
conservative here and then I'll add more
| | 02:40 | if I need to. I'm just going to leave
this set to 5 frames. I usually leave all
| | 02:45 | of the other settings at
their defaults as you see here.
| | 02:47 | What the Parameter settings are
telling you is that these are the three
| | 02:51 | qualities of layers that you can
animate using tweening. You can vary the
| | 02:55 | position of artwork on layers, you can
vary the opacity of layers as I'm doing
| | 02:59 | here, or you can vary layer effects.
| | 03:01 | I will show you how to vary position
and effects in another movie. For now, I'm
| | 03:05 | concentrating on opacity, but even
so I usually leave all three of these
| | 03:09 | checked just to be safe. Then I'll click OK.
| | 03:12 | Now you can see that there are seven
frames in the Animation panel. I created
| | 03:16 | just two of these, Frame 1 and Frame 7,
the last frame. If I click through the
| | 03:21 | frames, you can see that as I do, the
opacity of the Image layer gradually
| | 03:25 | changes so that it appears to be fading
in. I'm going to click the Play button
| | 03:29 | to make sure this looks right
and that's just what I wanted.
| | 03:32 | Now I would like to add some more
frames in which the image fades out. An easy
| | 03:37 | way to do that is to use the frames I
have already created. I'm going to click
| | 03:40 | on the first frame and then click on
Frame number 6, the second frame from the
| | 03:45 | last, holding the Shift key, and that
selects all of the frames from 1 through
| | 03:49 | 6.
| | 03:50 | Then I'm going to go to the panel menu
on the right side of the Animation panel
| | 03:53 | and from that menu, I'm going to choose
Copy Frames. So I'm copying these first
| | 03:58 | six frames. Them I'm going to click on
Frame number 7, in which the image is
| | 04:02 | fully opaque and with Frame number 7
selected, I'll go back to the panel menu
| | 04:07 | and I'll choose Paste Frames.
| | 04:09 | Photoshop asks me where I want to paste
these. I would like to paste them after
| | 04:13 | my selection, meaning after the
selected Frame number 7. So I'll click OK there
| | 04:18 | and now if I were to play, you would
see that the image fades in twice. But
| | 04:22 | that isn't exactly the way I wanted.
I wanted to fade in and then fade out.
| | 04:26 | So I'm going to select all of those
additional frames that I just added, which
| | 04:30 | are frames 8 through 13, by clicking
on 8, holding the Shift key and clicking
| | 04:35 | on 13 and then I'm going to reverse
those frames. To do that, I'll go to the
| | 04:40 | panel menu again, and I'll choose
Reverse Frames. Now if I go all the way back
| | 04:45 | to Frame 1 and click there, and then
click the Play button, the image fades in
| | 04:49 | and then out, which is exactly what
I wanted. I'll do that again for you.
| | 04:54 | At this point, all that's left to do is
to optimize the image as a GIF and save
| | 04:59 | it, just like I showed you how to do
in the last movie. So I'm not going to
| | 05:02 | bother taking you through those steps
again, other than to say that you go to
| | 05:05 | the File menu down to Save for Web &
Devices. You will choose your appropriate
| | 05:10 | GIF settings over here, you will click
Save and you will save Images Only and
| | 05:16 | you are done.
| | 05:17 | You then have an animated GIF that
you can bring into a website building
| | 05:20 | program and add to a webpage. So
that's how you can create an animated GIF
| | 05:24 | using tweening by varying layer
visibility. In upcoming movies, I'll show you
| | 05:29 | how to vary layer position and layer
effects to create some other tweened animations.
| | Collapse this transcript |
| Tweening with position and layer effects| 00:01 | Tweening is a quick and easy way to
create an animated GIF in Photoshop.
| | 00:04 | In an earlier movie I showed you how to
tween layer visibility to make part of an
| | 00:09 | image appear to fade in and fade out
during an animation. There are two other
| | 00:13 | layer properties that can be tweened.
One is Layer Position and the other is
| | 00:17 | Layer Effects.
| | 00:18 | In this movie I'll show you an example
of tweening those two properties.
| | 00:22 | I'm going to be working with this layered
file that has a background layer and a
| | 00:26 | single type layer. On the type layer
there's just this word Surf, which you can
| | 00:30 | see if I turn the visibility of
the layer off and then back on.
| | 00:34 | I would like two things to happen this
word during the course of the animation.
| | 00:38 | First, I would like the word to move
into the image from the top right corner
| | 00:41 | and down to its current position and
as it does move down there, I would like
| | 00:46 | the word to change color from a
peach color down to the white that you
| | 00:49 | currently see here.
| | 00:50 | I am going to work in the Animation
panel and there I see a single frame for an
| | 00:55 | animation that's created automatically
by Photoshop. I'm going to make a second
| | 00:59 | frame by going to the Add Frame button,
here at the bottom of the Animation
| | 01:02 | panel and clicking that
button to create frame 2.
| | 01:06 | Frame 2 is just a copy of Frame 1.
Actually, I'm going to leave frame 2 as it
| | 01:10 | is, because this is where I want the
animation to end up, with the word Surf
| | 01:14 | colored white and in this position. So
I'm going to go back to frame 1 and make
| | 01:18 | some changes there. I'm going to go
over to the Layers panel and I'm going to
| | 01:22 | uncheck Propagate Frame 1, so that the
changes that I make here aren't repeated
| | 01:26 | on frame 2.
| | 01:28 | One of the two things I want to do to
the Surf type layer is to change its
| | 01:31 | color between frames. So on frame 1,
I'm going to add a Color Overlay layer
| | 01:36 | effect by going to this fx button
at the bottom of the Layers panel and
| | 01:40 | choosing Color Overlay. That opens
the Layer Style dialog box. Over on the
| | 01:45 | left, you see a list of all the
various layer effects and you actually can
| | 01:49 | animate any of these effects by
selecting it here and then varying its
| | 01:53 | properties over here in the
middle of the Layers Style dialog box.
| | 01:56 | For example, with Color Overlay
selected I can change options for the Color
| | 02:01 | Overlay effect here. In particular I'm
going to change the color. So I'll click
| | 02:05 | in the Color field. That opens the
Color Picker and then I can move my mouse
| | 02:09 | into the image and sample a color from
the image. I'm going to click on this
| | 02:14 | peach color and that immediately
changes the color of the Type layer.
| | 02:18 | I'll click OK to close the Color Picker and
OK again to close the Layer Style dialog box.
| | 02:22 | So now on frame 1 if you look in the
layers panel, you will see that Color
| | 02:27 | Overlay effect. If I go into the
Animation panel and I switch over to frame 2,
| | 02:33 | the text goes back to white and you no
longer see the Color Overlay effect. So
| | 02:37 | that's one change.
| | 02:39 | Now I'm going to change the position of
the word Surf between frame 1 and frame
| | 02:42 | 2. I'll go back to frame 1 and with the
Surf layer still selected in the Layers
| | 02:47 | panel, I'm going to get the Move tool
in the toolbox and then I'm just going to
| | 02:51 | click and drag that word up
to the top right of the image.
| | 02:54 | When I get toward the corner, you can't
see it anymore because it's blending in
| | 02:58 | perfectly with the background. So I
don't even have to bother dragging the word
| | 03:01 | completely out of the document, even
if I don't want to. I'll just leave it there.
| | 03:05 | Then I'm going to click back and forth
between frame 1 and frame 2, and as I do
| | 03:10 | that, the color and the position of
the word Surf changes. But I would like
| | 03:14 | there to be a smoother transition
between those two states and so I'm going to
| | 03:18 | add some more frames in between these two
that I have created using Photoshop's tweening.
| | 03:23 | I will click on frame 2 here and then
I'm going to click the Tween button at
| | 03:27 | the bottom of the Animation panel.
Here in the Tween dialog box, I'm going to
| | 03:31 | tween with the previous frame, which is
frame 1 and I'm going to try adding ten
| | 03:35 | frames in between and I'll leave
everything else at its default.
| | 03:38 | What I'm most interested in here
though is the position and the effects
| | 03:42 | parameters of this layer. I'll click
OK and that causes Photoshop to make ten
| | 03:46 | additional frames for me. Frame 1 and
frame 12 are the two frames that I made
| | 03:52 | and Photoshop made all these frames in between.
| | 03:55 | To preview the animation, I'm going to
go back to the first frame by clicking
| | 03:58 | this double pointed arrow at the bottom
of the Animation panel. Then I'll click
| | 04:02 | the play button. Now let's see how
the animation looks. That's just what I
| | 04:06 | wanted. I'll play it again for you.
You can see that the word Surf comes in
| | 04:10 | from the top right and it changes
from peach to white as it comes in.
| | 04:14 | All that's left to do now is to
optimize and save the GIF animation by going to
| | 04:19 | the File menu, down to Save for Web &
Devices, and here optimizing this as a
| | 04:24 | GIF, just as I would any single GIF.
Choosing controls that make the image look
| | 04:29 | good and that keep the file size
down, and because every frame of this
| | 04:33 | animation will optimize with the same
settings, I'll be sure to preview all of
| | 04:37 | the frames using the controls down here
at the bottom right of the Save for Web
| | 04:41 | & Devices window.
| | 04:42 | When I'm satisfied with my GIF
settings, I'll click Save and I'll save this
| | 04:46 | animated GIF which I can then bring
into Dreamweaver or some other site
| | 04:51 | building program to include in my website.
| | Collapse this transcript |
| Optimizing transparent animated GIFs| 00:00 | An animated GIF can contain transparent
pixels just like a regular transparent GIF.
| | 00:05 | In this movie, I'll show you how
to put your knowledge of transparent GIFs
| | 00:09 | to work to optimize a transparent animated GIF.
| | 00:12 | Here I have a graphic surrounded by
transparent pixels, represented by this
| | 00:16 | gray and white checkerboard in
Photoshop. I have already turned this graphic
| | 00:20 | into an animation down in the
Animation panel. I'll play it for you,
| | 00:23 | so you can see what it does.
| | 00:25 | I am going to go down and click the
left-hand double-pointed arrow here to go
| | 00:29 | back to the first frame of the animation,
which is completely transparent. And
| | 00:33 | then I'm going to click the Play button
and you will see the surfboard fade in
| | 00:36 | and these elements as well and
then the decorations pop in like that.
| | 00:40 | This animation is currently a native
Photoshop document, a PSD file. I want to
| | 00:45 | optimize it as an animated GIF, so I
can post it on a website and I want the
| | 00:49 | surrounding pixels to remain
transparent when it's a GIF, so that if viewer can
| | 00:53 | see through them to the
web-page background below.
| | 00:56 | To optimize this transparent animation,
I'm going to go up to the File menu and
| | 01:00 | down to Save for Web & Devices. Here,
I'm going to work in the 2-Up Tab, where
| | 01:05 | on the left side, I can see the
original animated PSD file, and on the right I
| | 01:10 | can see a preview of how this
animation will look when it's optimized as an
| | 01:14 | animated GIF, with the GIF Optimization
Settings that are here on the right side.
| | 01:18 | The first thing you will notice is that
there are no transparent pixels in the
| | 01:22 | GIF Preview. The reason for that is
that this box, the Transparency checkbox
| | 01:27 | isn't checked. It's really important to
check this whenever you are optimizing
| | 01:30 | an image with transparent pixels for
the web, whether it's an animated GIF, or
| | 01:34 | a regular GIF, or a PNG.
| | 01:35 | I'd like to preview how this
animated GIF looks against a plain colored
| | 01:40 | web-page background. I'll setup the web
-page background by going over to this
| | 01:44 | box, the Eyedropper Color box, clicking
there to open the Color Picker, and in
| | 01:49 | the Color Picker, moving the sliders on
this vertical bar up to the color area.
| | 01:53 | I have checked Only Web Colors so
that it's easier for me to find the color
| | 01:57 | that I'm looking for, which is this
blue right here. I'm going to click OK and
| | 02:02 | I have now set that green-blue color
as the Eyedropper Color. I'm going to
| | 02:06 | identify that as the web-page background,
by going up to the panel menu at the
| | 02:10 | top right of the screen and from
there I'll choose Edit Output Settings.
| | 02:14 | In the Output Settings dialog box,
I'm going to go to the second menu and
| | 02:18 | choose Background. I do want to view
this document as an image rather than as a
| | 02:22 | background. So I'll leave Image selected.
| | 02:24 | Then I'm going to go down to the Color
field and there I'm going to click and
| | 02:29 | choose Eyedropper Color, which is that
same green-blue that I just put in the
| | 02:33 | Eyedropper Color box back in the Save
for Web & Devices window. I'll click OK
| | 02:37 | to close the Output Settings dialog box.
And here in Save for Web & Devices,
| | 02:42 | I'll go down to the Preview button
and click to preview the animated GIF
| | 02:47 | against that green-blue
background in my default Web browser.
| | 02:51 | You can see it animating here and as
you can see, the edges of these elements
| | 02:55 | don't look very good. They are quite
jaggedy. I'm going to fix this the same
| | 02:59 | way that I fixed the jagged edges on
regular transparent GIFs. I'll close the
| | 03:04 | Web browser, go back into the Save for
Web & Devices window, and then I'll move
| | 03:08 | over to the Matte field, which
is the key to fixing the problem.
| | 03:12 | In the Matte field, I'll choose
Eyedropper Color. As soon as I do that, you can
| | 03:17 | see the edges of this graphic fill in
with that same green-blue color that I
| | 03:21 | have identified as a web-page
background color. Now, I'll preview again against
| | 03:26 | that same green-blue background and
you can see the animation play with nice,
| | 03:30 | smooth edges that blend in perfectly
with the color of the web-page background.
| | 03:35 | I am going to close my Web browser and
go back into the Save for Web & Devices
| | 03:39 | window, and here I'm going to come
over to the GIF settings and optimize the
| | 03:43 | image so that not only it looks good,
but is as small as it can be. Right now
| | 03:48 | it's bigger than I would like
it to be, over 71 kilobytes.
| | 03:51 | I will go to the Colors field and I'll
reduce the number of colors, I'll try
| | 03:55 | 64, I think I can go down lower. Even
at 32, the image looks good. Let's see
| | 04:01 | how it looks at 16. I think it's best
at 32 colors because I notice that the
| | 04:07 | edges of this orange graphic inside
the surfboard were starting to degrade a
| | 04:11 | little at 16 colors.
| | 04:13 | Now I have gotten the file size of the
animated GIF with all 15 of its frames
| | 04:18 | down to 46 kilobytes.
| | 04:21 | If I want to make this animation
smaller, I can cancel out of Save for Web &
| | 04:24 | Devices and I can reduce the number of
frames in the animation or I can resize
| | 04:29 | the animation so that
its dimensions are smaller.
| | 04:31 | But I'm going to leave it for now and
click Save, and in the Save Optimized As
| | 04:36 | window, I'll navigate to my desktop,
I'll create a new folder there, which I
| | 04:41 | called transparent. Then I'll go down
to the Format menu and there I'm going to
| | 04:47 | choose to save both HTML and Images, so
that I have an HTML file that contains
| | 04:52 | instructions for setting
the web-page background color.
| | 04:55 | I will click Save and now I'm going
to go out to my desktop and look inside
| | 04:59 | that transparent folder. There I see
the HTML file that Photoshop just built
| | 05:04 | for me and an Images folder
that contains my transparent GIF.
| | 05:08 | I am going to open the HTML file in a
Web browser and there you can see the
| | 05:12 | transparent GIF fading in and those
decorative elements popping in and the
| | 05:17 | edges of the transparent GIF look
nice and smooth against this web page background.
| | 05:22 | So that's how you can use the
principles that you have learned about optimizing
| | 05:26 | regular transparent GIFs to
optimize a transparent animated GIF.
| | Collapse this transcript |
| Creating simple animated slideshows| 00:00 |
One of the fun things that you can do
with your animation skills in Photoshop
| | 00:04 |
is to create a small slideshow of
a sequence of photos. You have to be
| | 00:08 |
willing to sacrifice some photo quality
because you will be saving your photos
| | 00:12 |
in the GIF format. You have to be
willing to make their dimensions really small,
| | 00:15 |
but if you are willing to go along
with those restrictions, you can make
| | 00:19 |
a fun slideshow to add to a blog,
or a web banner, or maybe to an advertisement.
| | 00:23 |
I am going to start in Photoshop by
going to the File menu and moving down to
| | 00:28 |
the Scripts menu and over to Load
Files into Stack. Here in the Load Layers
| | 00:32 |
dialog box, I'm going to point
Photoshop to the Photos that I want to use in
| | 00:37 |
this slideshow. I'll go to the Use menu
and I'm going to choose Folder because
| | 00:41 |
all of those photos happen to be in a
single folder. Then I'll browse out to
| | 00:45 |
the folder, which is my Exercise Files
folder and in there my chapter12 folder
| | 00:51 |
and finally, the 12_05 sub-folder. So
I'll select that and I'll click Choose.
| | 00:56 |
Photoshop recognizes that there are
five photographs in that folder. So I'll
| | 01:00 |
click OK to have Photoshop create a
brand new file that has all five of those
| | 01:05 |
photographs stacked up as layers in
the Layers panel. The program is smart
| | 01:09 |
enough to put those photos in order
here, according to the numbers in their
| | 01:13 |
file names. Open the Animation panel
and put it in Frames mode by choosing
| | 01:19 |
Convert to Frames Mode from the fly
out menu at the top-right of the panel.
| | 01:23 |
Now I'm going to go down to the
Animation panel to start making my slideshow.
| | 01:27 |
There you will see the first frame of
an animation that's automatically created
| | 01:31 |
by Photoshop. That frame is displaying
this photo, fall1.jpg, which you can see
| | 01:36 |
in the document window. Now I'm going
to click the Add Frame button at the
| | 01:40 |
bottom of the Animation panel to add
frame 2. With frame 2 selected, I'm going
| | 01:45 |
to go over to the Layers panel and
I'm going to make fall1.jpg invisible by
| | 01:49 |
clicking its eye icon. That makes
the next photo in the stack, fall2.jpg,
| | 01:54 |
become the content of frame 2 in the
animation. You can see that photo here.
| | 01:59 |
I will do the same thing three more
times. I'm going to click the Add Frame
| | 02:03 |
button. With frame 3 selected, I'll go
over to the Layers panel and I'll click
| | 02:07 |
the eye icon to the left of fall2.jpg.
So that fall3.jpg becomes the content of
| | 02:13 |
frame 3. I'll add another frame 4, go
to the Layers panel, turn off fall3.jpg.
| | 02:20 |
So that fall4.jpg becomes the content
of frame 4. I'll make frame 5, go back to
| | 02:26 |
the Layers panel, turn off fall4.jpg.
So that fall5.jpg becomes the content of
| | 02:33 |
the fifth frame.
| | 02:34 |
The next thing I'm going to do is to
add a little bit of time between each one
| | 02:37 |
of these photos. So with the fifth
frame selected, I'm going to hold the Shift
| | 02:41 |
key and click on frame 1. That selects
all the frames in between. Then I'll go
| | 02:46 |
to the time menu beneath anyone of the
selected frames and I'm going to add 0.2
| | 02:50 |
seconds delay between each frame. Then
I'm going to click on frame 5, so that
| | 02:55 |
only that frame is highlighted.
I'm going to go back to the time menu and
| | 02:59 |
I'm going to add more of a delay on that
frame than the others, by selecting 1 second.
| | 03:03 |
Now I'll go back to the first frame by
clicking this double pointed arrow and
| | 03:08 |
then I'll click the Play button. So
that's the slideshow that I have made. It's
| | 03:11 |
not exactly the way I would like it
to look. One of the things that I would
| | 03:15 |
like to change is I don't want it to
loop forever. So I'm going to click this
| | 03:18 |
Stop button here, I'm going to go to
the loop menu and I'm going to have this
| | 03:23 |
loop just 3 times.
| | 03:24 |
The other thing I would like to
change is that I want to have a smoother
| | 03:27 |
transition between each one of the
photos. I'm going to use tweening to
| | 03:31 |
accomplish that. I'll start by
clicking on frame 2 and I'm going to click on
| | 03:35 |
the Tween button and tell Photoshop to
Tween With the Previous Frame, which is
| | 03:39 |
frame 1, to add 2 tweened frames in between.
| | 03:43 |
I will leave all these other settings
to their defaults, but I'm really most
| | 03:46 |
interested in Opacity right now, which
is the property of the layers that I'm
| | 03:50 |
currently tweening. I'll click OK and
you can see that Photoshop has added two
| | 03:54 |
new frames. They are frame 2 and
frame 3. So if I click on frame 1, that's
| | 03:59 |
fall1.jpg; frame 2 is a frame that
Photoshop made in which the Opacity of the
| | 04:06 |
photos is starting to gradually fade
one in to the other; frame 3, another one
| | 04:10 |
that Photoshop made; and here is
frame 4, which is another of the original
| | 04:14 |
photos, this is fall2.jpg.
| | 04:16 |
I am going to repeat that three more
times by clicking first on frame 5 and
| | 04:22 |
then clicking the Tween button. I'll
leave the settings to Add 2 frames, Tween
| | 04:26 |
With the Previous Frame and click OK.
Now we click on the next frame that
| | 04:30 |
contains one of the original photos.
That's frame 8 now. Again, I'll tween with
| | 04:35 |
the same settings, adding 2 frames and
say OK. I'll do that one more time by
| | 04:41 |
selecting the last frame, which also
contains one of the original photos, and
| | 04:45 |
I'll tween adding 2 frames there.
| | 04:47 |
Now I'm going to preview by going
back to the first frame, by clicking this
| | 04:51 |
double pointed arrow and then
clicking the Play button. So as you can see,
| | 04:56 |
tweening has added some smoother
transition between each one of these photos.
| | 05:01 |
It's still a bit jumpy but I don't
want to add more frames in between or my
| | 05:05 |
fall size is going to get way too big.
| | 05:07 |
So now that I'm fairly satisfied with
the content, I'm ready to optimize.
| | 05:11 |
I'll go up to the File menu and down to Save
for Web & Devices. In the Save for Web
| | 05:16 |
& Devices dialog box, in the Optimized
tab I can see a preview of one of the
| | 05:21 |
frames in the animated GIF with these
settings over here on the right side of
| | 05:25 |
the Save for Web & Devices window. I
have to optimize this file by making sure
| | 05:29 |
that GIF is set in the format menu.
Then go into the Colors field and
| | 05:34 |
increasing the numbers of colors,
until I like the appearance of the photo.
| | 05:38 |
So I'll try 32 colors, I'll try 64.
It's getting better but I still don't like
| | 05:45 |
the way it looks. I'm going to go all
the way up to 256 colors, which is the
| | 05:49 |
maximum number of colors you can have
in a GIF. I'm still not thrilled with the
| | 05:53 |
appearance of the photo, but that's
the best I'm going to be able to do.
| | 05:57 |
Remember that every frame in this
animated GIF is going to optimize with these
| | 06:00 |
same settings.
| | 06:02 |
So I'm going to come down to the
Animation controls here and I'm going to use
| | 06:06 |
this Next frame button, just so I go
through the rest of the frames and make
| | 06:10 |
sure that I can live with the
appearance of all of them. The bad news is if I
| | 06:15 |
look over at the file size in the
preview, it's over 600 KB and that's way
| | 06:20 |
larger than I find acceptable.
| | 06:22 |
There are a couple of solutions here.
One would be to cancel out of the Save
| | 06:26 |
for Web & Devices dialog box and go
back into Photoshop and reduce the numbers
| | 06:31 |
of photos in the slideshow. Or I could
reduce the number of frames that I ask
| | 06:35 |
Photoshop to tween, but I have only
tweened two frames between each of the
| | 06:39 |
photos anyway. So there is not much
leeway there. So probably the best bet is
| | 06:43 |
to reduce the dimensions of the image
here in the Save for Web & Devices dialog box.
| | 06:49 |
Although normally, I do my resizing
outside of this dialog box because the
| | 06:53 |
image quality has already so degraded
and I'm just making an animated GIF, I'm
| | 06:57 |
willing to do it here. I'm going to
bring the dimensions way down by changing
| | 07:01 |
the width in pixels from 350 to 150
pixels and the height proportionately to
| | 07:08 |
100 pixels. So basically, I'll be
making an animated thumbnail slideshow here.
| | 07:12 |
I will set the reduction method to
Bicubic Sharper. Then I'll press the Return
| | 07:17 |
or Enter key on the keyboard. You can
see that the dimensions get much smaller
| | 07:20 |
but the file size does too. It's still
a bit large but we will go with that for
| | 07:24 |
now. At this point I'll click the Save
button. I'll save it to my Desktop.
| | 07:29 |
I'll give my animated GIF a name and I'll
save in the Images Only Format. Now if I
| | 07:34 |
go out to my Desktop, I see my GIF
right there and I can open that in a Web
| | 07:39 |
browser and watch it animate. So there
it goes my Safari Web browser. That's
| | 07:45 |
how you can use tweening to create a
tiny animated slideshow of a sequence of photos.
| | 07:52 |
| | Collapse this transcript |
|
|
13. AutomatingUsing the Image Processor| 00:00 | The Image Processor is one of the
biggest time savers in Photoshop. I'm going
| | 00:04 | to open it and then I'll show you how
to use it to quickly resize and convert
| | 00:08 | some photographs to JPEG thumbnails
for posting online. I'm going to go in
| | 00:12 | Photoshop to the File menu and then
down to Scripts and then over to Image
| | 00:17 | Processor. That opens this Image
Processor dialog box, which is really easy to
| | 00:21 | use because each one of the
steps is clearly written out here.
| | 00:26 | The first step is to select the
images to process as it says here, if I had
| | 00:30 | opened some images I could Use the Open
Images. I'm actually going to select a
| | 00:34 | folder full of images that I prepared
in advance. But you don't have to prepare
| | 00:38 | by putting images into a folder in
order to use the Image Processor. You can
| | 00:42 | run it on files wherever they live on
your hard drive. If you are going to do
| | 00:45 | that, then I suggest that you launch
the Image Processor, not from Photoshop,
| | 00:49 | as I have done here but from Adobe
Bridge instead. So let me just flip over to
| | 00:53 | Bridge to show you how to do that.
| | 00:55 | Here in Adobe Bridge, I have
navigated to some photos on my hard drive and
| | 00:59 | selected them in the content area and
then I'm going to go up to the Tools
| | 01:03 | menu, and down to Photoshop and over
to Image Processor. So that's how you
| | 01:08 | would work, if you had not put photos
into a folder first before running the
| | 01:12 | Image Processor. But since I have done
that, I'm going to cancel out of here
| | 01:16 | and go back to Photoshop.
| | 01:18 | With the Image Processor open, I'm
going to go to the step number one again and
| | 01:22 | I'll click Select Folder to select
the folder full of images that I want to
| | 01:25 | process. I'll navigate to my Desktop,
into my Exercise Files and down to
| | 01:30 | chapter 13. There I'll select the 13_01
sub-folder and click Choose and you can
| | 01:37 | see the path to that folder
right here, in step number one.
| | 01:40 | The next step is to select a location
in which to save the images that the
| | 01:44 | Image Processor creates. I could save
them in the same folder as the originals,
| | 01:49 | without the fear of overwriting the
originals because the Image Processor tucks
| | 01:53 | the results into sub-folders automatically.
| | 01:55 | But I think this time I'm going to
choose Select Folders, so I can easily find
| | 01:59 | the results and then on my Desktop I'm
going to create a New Folder and I'll
| | 02:03 | call this processed photos and I'll
click Create. And back in the Image
| | 02:09 | Processor, you can see the paths to
that destination folder here in step two.
| | 02:14 | The next step is to choose the file
type or types that I want the Image
| | 02:17 | Processor to create from the original
photos. I'm going to choose Save as JPEG,
| | 02:22 | so that I have a copy of each photo for
the Web. I can choose what size I want
| | 02:26 | those JPEGs to be here by clicking
Resize to Fit and I'm going to type in a
| | 02:31 | Width of 150 and a Height of 225. Now
those aren't exact sizes. In other words,
| | 02:37 | not every one of the photos will resize
to exactly 150X225 pixels. I don't want
| | 02:43 | that to happen because some of my
photos are horizontal rather than vertical.
| | 02:47 | What these numbers do describe is the
size of an imaginary box into which all
| | 02:52 | the resized photos both horizontal and
vertical will fit and you can see that
| | 02:57 | if you look at the label, Resize
to Fit. Over here I can set the JPEG
| | 03:01 | compression Quality for the resulting
JPEG. I can type in a number between one
| | 03:05 | and twelve but I'm not going to save
for Web window, I can't preview the
| | 03:09 | results here. So I'll just choose a
compromise, I'll choose eight and if I
| | 03:13 | don't like the resulting Quality of
the JPEGs, I'll come back in and run the
| | 03:17 | Image Processor again
with higher quality settings.
| | 03:21 | I am going to put a checkmark here next
to Convert Profile to sRGB because I do
| | 03:26 | want to convert the profile of these
photos to sRGB, which is the best color
| | 03:30 | space for the Web as I explained in
depth in an earlier movie on Color Settings.
| | 03:35 | So I'll put a checkmark there. The
photos are already in the PSD format, so I
| | 03:39 | don't want to save another copy of
each as PSD, so I'll uncheck Save as PSD.
| | 03:44 | But I might want to save a copy of
each in the TIF format, so that I could
| | 03:48 | include it in a print brochure for
example, and I'm not going to resize the
| | 03:52 | TIFFs because I want them to be
big enough for a print product.
| | 03:56 | Down in step number 4 there are some
useful options. If I check Run action, I
| | 04:00 | can specify an action that the Image
Processor will run on each photo after
| | 04:05 | resizing each photo. An action is
basically a recorded set of steps in
| | 04:09 | Photoshop. I could record my own
action in Photoshop's Actions panels and run
| | 04:13 | that from here or I can run one of
the Default Actions that come with Photoshop.
| | 04:18 | I will do that for now, so you can
see how that works. With the Default
| | 04:21 | Actions, action set here, I'll go to
this menu and I'll choose one of the
| | 04:26 | Default Actions. I would like each one
of my thumbnail images to be Sepia Toned
| | 04:30 | so that's what I'll choose
here from this Actions menu.
| | 04:33 | Here in the Copyright Information field
I can enter copyright information that
| | 04:37 | will be saved as a metadata with each
one of the resulting images. To enter the
| | 04:41 | copyright symbol, on the Mac I'll
press the Option key and the G key together
| | 04:46 | and on a PC working in the numeric
keyboard, I would hold down the Alt key and
| | 04:50 | type 0169.
| | 04:53 | And then I'll type the name of the
photographer and the date. I'm not going to
| | 04:58 | check Include ICC Profile because as
I explained in other movies, many Web
| | 05:03 | browsers can't read these color management
profiles anyway and they do increase file size.
| | 05:08 | So now I'm done setting up all these
options. If I think I might use the same
| | 05:12 | options again in the future, I can save
these so that next time around I don't
| | 05:16 | have to spend time filling out all
these fields. To save these settings, I can
| | 05:20 | just click the Save button. The Image
Processor will save a small text file in
| | 05:24 | the XML format and then next time I
open the Image Processor, I can click the
| | 05:28 | Load button and load that XML file.
| | 05:31 | And I'll see all the same settings here
that I currently have. Now I'm ready to
| | 05:35 | run the Image Processor to apply all of
these choices to the photos that I put
| | 05:40 | in the folder that I selected up here
in step 1. So I'll click the Run button
| | 05:44 | and in just a moment Photoshop resizes
each image at Sepia Toning and Copyright
| | 05:49 | Information and saves one copy of each
image as a JPEG and another copy as a TIFF.
| | 05:54 | I am going to go out to my desktop to
see those. I'll open my processed photos
| | 05:59 | folders and there I see two sub-folders.
In the JPEG sub-folder are the JPEGs
| | 06:04 | that were created for me and in the
TIFF folder the TIFF copies of each image
| | 06:08 | that were created. I'll open one of
the JPEGs so that you can see it in
| | 06:11 | Photoshop. It has been sepia toned.
You can see that the file size of this
| | 06:16 | thumbnail JPEG does fit within the
parameters that I specified in the Image
| | 06:20 | Processor, which were a maximum of 150
pixels in Width and 225 in Height, but
| | 06:26 | because this is a horizontal
image the Height is only 100 pixels.
| | 06:30 | You can also see a Copyright symbol
down there and if I go to the File menu and
| | 06:35 | open the File Info box, you can see
the Copyright Information here in the
| | 06:39 | Copyright Notice field.
I'm going to cancel to close that.
| | 06:43 | So as you can see the Image Processor
can be a real time saver, if you need to
| | 06:47 | process lots of images for the Web
quickly. However, keep in mind that if you
| | 06:52 | are trying to prepare high quality
photos for your website. Say you have a
| | 06:55 | photography website and you want to
show off your work, then you may want to
| | 06:59 | use this Save for Web & Devices feature
that I covered in the earlier chapter,
| | 07:03 | because Save for Web & Devices gives
you many more optimization options and
| | 07:07 | more often than not, produces smaller
JPEGs that those who get out of Image Processor.
| | Collapse this transcript |
| Creating a web gallery in Bridge| 00:00 |
One of Photoshop's most popular
automated web features has long been the web
| | 00:05 |
photo gallery, which would create an
entire website to display your images in a
| | 00:09 |
matter of seconds. You won't find a web
photo gallery command in Photoshop CS4.
| | 00:14 |
But don't panic. It's still around.
It's just been moved from Photoshop into
| | 00:19 |
Bridge CS4. So I'm here in Adobe
Bridge CS4 to show you how to create a web
| | 00:24 |
gallery. In the Folders panel of
Bridge, I have navigated to a folder that
| | 00:28 |
contains some images. I would like to
post some of these photographs online,
| | 00:32 |
and that's the most common use for a
web gallery to display photographs.
| | 00:36 |
But there are many other possible uses.
For example, as a web designer you
| | 00:40 |
might have displayed some alternative
page wire frames and you want to share
| | 00:44 |
those with a client or with a
colleague. You can do that by creating a web
| | 00:47 |
gallery and posting online. Or let's
say you are a wedding photographer, and
| | 00:51 |
you want to show a bride some proofs,
so that she can choose her favorites. You
| | 00:55 |
can do that by making a web gallery.
| | 00:57 |
When you are ready to make a web
gallery in Bridge, the first step is to select
| | 01:01 |
the items that you want to include in
the gallery from here in the Content
| | 01:04 |
panel. I'm going to click on the first
of these photographs to select it, and
| | 01:08 |
then I'll hold down the Command key on
a Mac or the Ctrl key on a PC, to add to
| | 01:12 |
that selection some other photographs.
The next step is to switch over to the
| | 01:16 |
output workspace. The default
workspace in Bridge is the Essentials workspace
| | 01:21 |
as you can see here. And this doesn't
offer access to the output settings that
| | 01:24 |
you need to create a web gallery.
| | 01:27 |
Because my Bridge window is not
stretched out very far, I can't see a label for
| | 01:31 |
the output workspace up here as you
might in your copy of Bridge. If you do see
| | 01:35 |
a label that says output, go ahead
and click on it. If you don't, go to the
| | 01:39 |
arrow to the right of the workspace
names that you do see, and choose Output
| | 01:43 |
from the drop down menu of Available
Workspaces. This is the Output workspace.
| | 01:48 |
I'm going to customize it a bit by
collapsing the panels on the left, so that I
| | 01:52 |
have more room to work. I'll move my
mouse over the border between the Folders
| | 01:56 |
panel and the Preview
panel, and drag to the left.
| | 01:59 |
The Output panel is where the crucial
settings are for creating and customizing
| | 02:03 |
your web gallery. Right now output is
set to create a PDF file. I'm going to
| | 02:08 |
click on the Web Gallery button to
see all the options for creating a web
| | 02:11 |
gallery. First I'll choose a template
for my gallery from this menu of Gallery
| | 02:16 |
Templates that ship with Bridge. Most
of these are flash based galleries. There
| | 02:20 |
is one HTML gallery. I'm going to show
you one of the Flash Galleries, and you
| | 02:24 |
can experiment with the others on your
own. I'll choose this Filmstrip gallery,
| | 02:28 |
and then I'll go to the Style menu.
| | 02:30 |
I can see here that the Filmstrip
template only offers one style, but some of
| | 02:34 |
the other templates offer a few
variations from the Style menu. To preview the
| | 02:39 |
Filmstrip template with my photos, I'm
going to this Refresh Preview button,
| | 02:44 |
and I'm going to click there. Bridge
creates a temporary gallery for me and
| | 02:47 |
displays it here in the New Output
Preview panel that's appeared. This
| | 02:51 |
particular template shows each one of
the selected photos in a photo thumbnail down here.
| | 02:56 |
And when I click on one of those
thumbnails, I see a larger version of the
| | 02:59 |
photo up here. There is also a
slideshow built into this template, which I can
| | 03:04 |
launch by clicking the Play button
right here, and that causes the gallery to
| | 03:08 |
cycle through the photos with these
gradual transitions in between. I'll click
| | 03:12 |
that button again to stop the
slideshow. There are lots of ways that I can
| | 03:16 |
customize this web gallery. For one
thing, I can change the order of the slides
| | 03:20 |
as they appear in the slideshow.
| | 03:22 |
To do that I come down to the Content
area, where I still have all four of the
| | 03:25 |
photos in the gallery selected. Let's
say that I would like to take this photo
| | 03:29 |
Surf1.PSD, and have it appear at the
end of the slideshow. To do that I'll
| | 03:34 |
click on surf1.PSD in the Content area
which deselects all the other photos,
| | 03:39 |
and I'll drag surf1.PSD all the way
over to the right and drop it there. I
| | 03:43 |
still have to go back and reselect the
other photos. So I'll do that by holding
| | 03:47 |
the Command key on a Mac, or the Ctrl
key on the PC, and clicking on the other
| | 03:51 |
photos in the Content area.
| | 03:53 |
This time around I think I'll add
another photo into my slideshow. And so in
| | 03:57 |
this way I can change my mind about
which photos are included, and in which
| | 04:01 |
order they appear in the web gallery
slideshow. I can do more customizing over
| | 04:05 |
here in the Output panel. For example,
I would like to change the Gallery Title
| | 04:09 |
up here, and the Gallery Caption that
appears over here. To do that I'll go to
| | 04:14 |
the Gallery Title field, and I'll
customize by typing my own title. I'll call
| | 04:18 |
this surfing photos and I'll
type my own gallery caption.
| | 04:21 |
I type oxnard 2008, which is where the
photos were taken. I also can add some
| | 04:27 |
text about the gallery. I'm just going
to type a bunch of access for now, and a
| | 04:31 |
viewer will be able to see that
descriptive text by going to the View menu and
| | 04:35 |
choosing about this gallery. This
template offers a link to an email address
| | 04:39 |
here. I can change the label on this
email link from Contact name, to my name
| | 04:43 |
or the photographer's name. I'll type
the photographer's name in the Your Name
| | 04:47 |
field. And I also could change the
email address here in the Email Address
| | 04:52 |
field. But I'll leave that for now. I
can add Copyright information in the
| | 04:56 |
Copyright Information field.
| | 04:57 |
By holding the Option key and the G key
on a Mac to create a copyright symbol,
| | 05:02 |
or on a PC using the numeric keyboard
to enter the number 0169 while holding
| | 05:08 |
the Alt key. And then again I'll type
the photographer's name and the date.
| | 05:12 |
I'm going to scroll down to show you
that I can also change the colors of the
| | 05:19 |
various areas of the web gallery. So
for example, if I want to change the color
| | 05:23 |
of the area behind the slideshow, I'll
click in the Color field to the left of
| | 05:27 |
slideshow, and here I'll click on another color.
| | 05:30 |
And there are various ways to view and
choose colors in this Colors dialog box.
| | 05:35 |
I like this Crayon view, but there are
some other views of colors here that you
| | 05:38 |
can use instead. I'm done there, so
I'll click OK. Down in the Appearance area
| | 05:43 |
of the Output panel I can choose to
show the file names underneath the Photos
| | 05:47 |
in the web gallery. Although I think
I'll leave that Unchecked for now. I can
| | 05:51 |
also change the Size of this Preview
image, or the Size of these thumbnail images.
| | 05:56 |
So for example, I could choose to see
Large thumbnails instead of Medium. And I
| | 06:00 |
can set a different duration between
the slides. I'll make that three seconds.
| | 06:03 |
As well as choose a different
transition effect between slides. So I'll choose
| | 06:08 |
Cut. When I'm done making these choices,
I can either click Refresh Preview to
| | 06:12 |
view my changes here from inside Bridge,
or I can click Preview in Browser to
| | 06:17 |
see how the gallery looks with these
changes in my Default Web browser.
| | 06:21 |
I'll try that. Here are the large thumbnails
that I chose, and here is the slideshow
| | 06:30 |
with the Cut transition that I chose.
| | 06:32 |
Here's the text that I typed in, and
here under the View menu, under about this
| | 06:37 |
gallery are the access that I typed
into the description field. I'm going to
| | 06:43 |
close the Web browser and go back into
Bridge for the last step. I'm going to
| | 06:47 |
go ahead and save this gallery to my
hard drive. So I choose Save For Disk. But
| | 06:52 |
I also have an option to upload the
entire gallery to a web server to make it
| | 06:57 |
live online. I can do that from right
here in Bridge. There's an alternative to
| | 07:01 |
saving to disk and then using a third
party FTP program to upload the site. If
| | 07:06 |
I want to upload from Bridge, I click
the Upload radio button here, and then I
| | 07:10 |
enter some information into the FTP
server fields. All of this information I'll
| | 07:15 |
get from my Web Hosting Provider. I
have to set up an account with that
| | 07:19 |
provider that will include the
hosting of a website, and an FTP server.
| | 07:23 |
In this first field I'll type the
path to that server, and the name of that
| | 07:26 |
server. Then I'll type my user name
and password, and finally I'll type the
| | 07:31 |
name of the public folder on the web
server that will contain my web gallery.
| | 07:35 |
And when I'm all done I'll click Upload.
But for now I'm going to save to disk.
| | 07:39 |
I'm going to give the gallery a name
surfing gallery. And this will be the name
| | 07:44 |
of the folder that Bridge will make
for me to contain all of the contents of
| | 07:48 |
this website.
| | 07:49 |
Then I'll click the Browse button, and
I'm going to browse out to my desktop,
| | 07:52 |
and I'll just click Choose and Save.
Bridge is now creating that entire gallery
| | 07:58 |
for me, compressing copies of the
photos as JPEG, and writing HTML files, Flash
| | 08:03 |
files and XML files to create an
entire website. I'm going to click OK here,
| | 08:09 |
and now I'm going to go out to the
desktop to see what Bridge made for me.
| | 08:12 |
Here's the Surfing Gallery folder, and
if I look inside, I see the index.html
| | 08:17 |
file that is the main page in this site.
There is also a Resources folder, and
| | 08:21 |
inside of that are some Flash files or
SWF files, some XML files, and an images
| | 08:27 |
sub-folder that contains copies of the
photos in my gallery in their thumbnail
| | 08:31 |
sizes and in Medium and Large sizes.
| | 08:34 |
I'll open the HTML file locally in
my Web browser, and here in my Default
| | 08:39 |
browser is the website that Bridge
created for me. It's got the text that typed
| | 08:43 |
in, it's got the slideshow and it's got
the photo thumbnails. If you have been
| | 08:47 |
waiting for a chance to put your
images online, the Web Gallery in Bridge CS4
| | 08:52 |
is a quick and easy way to
automatically create an entire website with a
| | 08:56 |
minimum of effort. I hope
you'll try with your own images.
| | 09:00 |
| | Collapse this transcript |
| Displaying high-resolution web images with Zoomify| 00:01 | The Zoomify feature allows you to
export panoramas and other large photographs
| | 00:05 | from Photoshop in a way that will
allow them to be posted and viewed in high
| | 00:09 | resolution online. Here in Photoshop
CS4 I'm working in the Color and Tone
| | 00:14 | workspace. I have opened this stunning
panoramic photograph, which is the work
| | 00:19 | of photographer and author Jim Hyde.
This photo is really big. Down in the
| | 00:23 | document information area of the
document window, I can see that it's over
| | 00:26 | 12,000 pixels wide and over 2,500
pixels tall. Normally I'd never think to put
| | 00:32 | in image this big on the web. It would
have to be significantly reduced in size
| | 00:36 | in order to be viewed online as a
conventional JPEG. And doing that would
| | 00:40 | undoubtedly reduce some of its grandeur
and its impact as a wide-angle panorama.
| | 00:44 | So instead of preparing this photo for
the web with the normal Save for Web and
| | 00:48 | Devices feature, I'm going to export it
using Zoomify. I'll go to the File menu
| | 00:52 | at the top of the screen, and I'm
going to choose Export, and then Zoomify.
| | 00:57 | Here in the Zoomify Export dialog box,
I'll go to the Template field and from
| | 01:01 | there I'm going to choose a special
Zoomify Viewer that will display the image
| | 01:05 | on the web. I'm going to choose one
with a Navigator that helps to pan around
| | 01:09 | in the image. And I like this
Black Background, so I'll select that.
| | 01:12 | Next I'm going to go to the Output
Location area, and there I'm going to create
| | 01:16 | a folder to hold the results of the
Zoomify Export. I'll click the Folder
| | 01:20 | button, and out on my desktop I'm
going to make a new folder. I'll click New
| | 01:24 | Folder and then I'll type the name of a
folder. Click Create, and click Choose.
| | 01:29 | The way that Zoomify works is that it
cuts the photo into lots of tiles and
| | 01:34 | save those tiles at various
resolutions compressed as JPEGs. In this Quality
| | 01:39 | field I can set the compression quality
for the JPEGs. I'm going to leave it at
| | 01:43 | its default of 10, and I'm also going
to leave Optimize Tables checked here,
| | 01:47 | which also affects the JPEG compression.
I'll leave the Base Name at sf_pano,
| | 01:52 | which comes from the original image
here. That will be the Base Name for the
| | 01:56 | individual JPEGs that are
saved out by this feature.
| | 01:59 | Finally I'm going to go down to the
Browser Options area where I can set the
| | 02:02 | Width and Height of the Zoomify Viewer.
I'm designing for a Web browser on a
| | 02:07 | 1024x768 monitor, and I'm going to
make the viewer really big, so that it
| | 02:12 | almost fills that space. So I'll make
it about 960 pixels wide by 600 pixels
| | 02:18 | tall. I'm going to leave Open in Web
browser checked, so that my default Web
| | 02:22 | browser is automatically launched to
show me what it's made. And now I'll click
| | 02:26 | OK, and in just a moment Zoomify
prepares many small tiles, creates Zoomify
| | 02:32 | Viewer, and opens my default browser
to show me the results. Here in my Web
| | 02:37 | browser I can see part of the image,
and if I click and drag, I can pan across
| | 02:41 | the image to see the rest of it.
| | 02:43 | As I drag, I'll pause temporarily to
let the image resolve as it comes into
| | 02:47 | view. Another way that I can pan
across the image is to use the Navigator up
| | 02:52 | here. I'll click inside that blue box,
and drag across the Navigator to pan in
| | 02:57 | the image. At the bottom of the
Zoomify Viewer are these controls for zooming
| | 03:03 | in and out. I'm going to click and drag
the zoom control to the right, and then
| | 03:08 | I'm going to use the panning controls
over here to move up, and as you can see
| | 03:13 | when I zoom in, I can really see the
detail of the cars on the bridge. I can
| | 03:17 | use these other arrows to move over to
the left, to move down, and to move to the right.
| | 03:25 | And if I click this last icon in the
controls at the bottom of the viewer, I go
| | 03:28 | back to the original view. So this
is what viewers will see online when I
| | 03:33 | upload the elements that Zoomify has
created for me to a web server. I'm going
| | 03:37 | to go out to my desktop to see just
what those elements are. Here is the
| | 03:42 | Destination folder that I created.
Inside of that folder there is an HTML file
| | 03:47 | that contains the code that displays
the Zoomify Viewer. There is also an image
| | 03:51 | folder that Zoomify created. If I look
inside of that folder, I see that there
| | 03:55 | is some XML data. There is a Flash
or SWF file that contains the Zoomify
| | 04:00 | Viewer, and them there are some
folders that are full of small JPEG tiles, so
| | 04:05 | that you can see the content of some of
these. I'm going to jump over to Bridge
| | 04:08 | for a moment.
| | 04:09 | Here in Bridge I'm navigating to my
desktop in the Favorites panel. In the
| | 04:13 | Content area I see the Zoomify folder.
I'm going to double-click that, and then
| | 04:18 | I'll double-click the sf_pano image
folder, and then I'll go into one of these
| | 04:23 | Tile group folders, so that you can
see some of the many JPEGs that have been
| | 04:27 | saved out by the Zoomify feature in
Photoshop. If I'll scroll down, you can
| | 04:31 | start to get a sense of the many
little tiles into which Zoomify cut the
| | 04:36 | original panorama. I'll go back to my
desktop and into that Zomify folder again
| | 04:41 | to show you that if I want to publish
this online, I can take both the HTML
| | 04:45 | file and the images folder and upload
all of this to a web server. So that
| | 04:50 | viewers can enjoy a high resolution
view of this great looking panorama. With
| | 04:54 | thanks again to photographer Jim Hyde,
and to the Zoomify feature in Photoshop.
| | Collapse this transcript |
| Creating graphic variations with variables| 00:00 |
You can use the variables and
dataset features in Photoshop CS4 to create
| | 00:05 |
variations on a single web graphic
automatically. For example, here I have a
| | 00:10 |
web banner that announces the surf spot
of the month. I would like to have some
| | 00:14 |
variations on this banner that I
could use to freshen up the content on my
| | 00:17 |
website each month or that I could
use on different pages in this site.
| | 00:22 |
I'm working in the Web workspace. There
are three elements of this banner that I
| | 00:26 |
would like to vary. The photo over here ,
the type that says the surf spot of the
| | 00:30 |
month here and the small graphic that
warns that this surf spot is for experts only.
| | 00:36 |
Each of these three items is isolated
on a separate layer in the Layers panel,
| | 00:40 |
which is important for this technique.
I'll go over to the Layers panel and I'm
| | 00:44 |
going to hold down the Option key as I
click on the Photo layer so that you can
| | 00:47 |
see just what's on that layer and I'll
do the same on the Location layer.
| | 00:51 |
You can barely see but there is the
text Waimea on that layer and on the
| | 00:55 |
Expert layer, just this little Expert
graphic. I'm going to define each one of
| | 01:00 |
these layered elements as a variable.
You might think of a variable as a neutral
| | 01:04 |
container that I'll fill with
different content for variations on this
| | 01:08 |
web banner. So the first step is to
define these three elements as variables.
| | 01:12 |
To do that, I'll go up to the Image
menu and I choose Variables > Define.
| | 01:18 |
I'll move this variables dialog box down so
that you can see the web banner too. And
| | 01:23 |
here in the Variables dialog box,
I'll start by defining the first variable,
| | 01:28 |
which is the photo on the Photo layer.
To do that, I'll go to the Layer menu
| | 01:32 |
and here I see a list of all of the
layers in the file. From here, I'll choose
| | 01:36 |
the photo layer. Next, I'll tell
Photoshop what type of variable this is.
| | 01:41 |
To do that, I'll go to the Variable Type
area and I'll check Pixel Replacement, which
| | 01:46 |
means that its content is composed of
image pixels and that I'll be replacing
| | 01:50 |
the pixel-based content with a
different photo for each variation on the banner.
| | 01:55 |
I will give this variable a name here
in the Name field. I like to use the same
| | 01:59 |
name as the corresponding layer to
indicate that the two are related. But I'll
| | 02:03 |
capitalize that name here. So I'll
select the default text and over it,
| | 02:08 |
I'll type the word Photo with a capital P.
In the Method field, I tell Photoshop how
| | 02:14 |
I want each photo to be scaled to fit
in the same space as the photo that you
| | 02:18 |
see here in this banner. When a method
is chosen from this menu, if I roll my
| | 02:23 |
mouse over that method, I can see a
description of the method in the box below.
| | 02:28 |
These are the choices in the Method menu.
| | 02:30 |
I am going to leave it set to Fit. Now
I'm ready to define a second variable.
| | 02:34 |
I'll do that by going back to the Layer
menu and there I'm going to choose the
| | 02:38 |
Location layer. As you may remember,
the Location layer is the layer that
| | 02:42 |
contains the text that names the surf
spot of the month. I'll tell Photoshop
| | 02:47 |
what type of layer this is. Because
this is a type variable that I'll be
| | 02:51 |
changing out in each banner, this is a
text replacement type variable. So I'll
| | 02:55 |
select Text Replacement and then I'll
give this variable a name. I'll call it
| | 02:59 |
Location with a capital L.
| | 03:02 |
The last layer that I'll define as a
variable is the Expert layer, which is the
| | 03:06 |
layer that contains this small Expert
graphic. To define this variable, I'll go
| | 03:10 |
to the Layer menu again and this time
I'll choose Expert. I identify the type
| | 03:15 |
of variable here. This is a Visibility
variable. Because the only change that
| | 03:20 |
I'm going to make to this variable
across banners will be whether or not this
| | 03:23 |
graphic is visible. So I'll check
Visibility and I give the variable a name and
| | 03:28 |
I'll call this one Expert with a capital E.
| | 03:32 |
Back in the Layer menu notice that the
photo, location and expert layers all
| | 03:36 |
have an asterisk. This means that those
layers have been defined as variables.
| | 03:41 |
The other layers, the Background layer
and the Flowers layer, will remain static
| | 03:45 |
from banner to banner. So now that I
have got all the variables defined,
| | 03:50 |
the next step is to create some datasets to
populate those variables. Each dataset
| | 03:55 |
will generate a variation on this web
banner that contains a different photo, a
| | 03:59 |
different line of types specifying
the surf spot and will display or not
| | 04:04 |
display the Expert graphic.
| | 04:06 |
To make the datasets, I'll go to the
Define menu here and I'll switch it to
| | 04:11 |
Data Sets. I'll start by clicking the
Create New Data Set button here and that
| | 04:16 |
makes a dataset that is called Data
Set 1 by default. I'll change the name of
| | 04:20 |
this dataset to something more
meaningful, Mavericks, which is the name of the
| | 04:25 |
surf spot that will be the subject of
this variation of the banner. Now I'll
| | 04:29 |
set the value of the variables in this
dataset. I'll go to the Variables area
| | 04:33 |
where the Name menu is set to Expert.
That means that I'm working on the Expert
| | 04:37 |
variable. To set the value of the
Expert variable, I'll go to the Value field
| | 04:42 |
and I'm going to set the value to
Invisible which means that in this
| | 04:46 |
variation on the web banner, the
Expert graphic will not appear. Now I'll set
| | 04:51 |
the value of another variable by
going to the Name field and choosing the
| | 04:54 |
Location variable.
| | 04:56 |
Here in the Value field, instead of
Waimea, I'll type Mavericks and then I'll
| | 05:01 |
set the value of the last variable
from the Name menu, which is the Photo
| | 05:05 |
variable. To set its value, I'll
click the Select File button here next to
| | 05:10 |
Value. I'll navigate to my 13_04 sub-
folder. In that sub-folder, I'm going to
| | 05:15 |
select the photo_maverisks.PSD and
then I'll click Open. And you can see the
| | 05:20 |
path to that file here next to the
Value field. Notice that the chart at the
| | 05:25 |
bottom of this dialog box summarizes
the Name, the Value and the associated
| | 05:30 |
Layer for each one of the three
variables. The Expert variable, the Location
| | 05:35 |
variable and the Photo variable.
| | 05:37 |
I am going to click Apply to apply all
of the changes that I have made here to
| | 05:42 |
see the results here in the web
banner. So you can see that the photo has
| | 05:46 |
changed, the name of the surf spot has
changed and the visibility of the little
| | 05:50 |
Expert icon has changed as well.
So I'm done making my first dataset.
| | 05:55 |
Now I'm going to make a second dataset
the same way. I'll go a little faster this time
| | 05:59 |
since you have already seen me do it
once. I'll go to the Data Set field and
| | 06:04 |
I'll click the New Data Set icon.
Instead of calling this Data Set 2,
| | 06:08 |
I'll change the name to rincon. I'll go
to the Name field and I'll start with the
| | 06:13 |
Photo variable. I'll select a file
for the rincon banner by clicking this
| | 06:17 |
Select File button. I'll choose
photo_rincon.PSD and click Open.
| | 06:22 |
Then I'll go back to the Name field
and select another variable, the Location
| | 06:26 |
variable. In the Value field for this
variable, I'll change the value from
| | 06:31 |
Mavericks to Rincon. And then I'll go
back to the Name filed one more time and
| | 06:36 |
I'll choose the Expert variable. This
time I'll change the value of the Expert
| | 06:40 |
variable to Visible. I'll click Apply
to see these changes here in the web
| | 06:44 |
banner. There is a new photo. The
text is changed to Rincon. And the Expert
| | 06:49 |
icon is now visible.
| | 06:50 |
I will make a third dataset the very
same way. I'll go to the New Data Set icon
| | 06:55 |
here. I'll name the dataset. I'll call
this one Pipeline. I'll go down to the
| | 07:01 |
first variable, which is the Expert
variable, and this time I'll make the value
| | 07:05 |
Invisible. Then I'll go back to the
Name field and select the Location variable
| | 07:09 |
and I'll change the value to Pipeline.
And I'll go back one more time to the
| | 07:13 |
Name field. I'll choose the Photo
Variable and then I'll click Select File and
| | 07:18 |
navigate out to my photo_pipeline.PSD
and click Open. And finally, I'll click
| | 07:24 |
Apply to see the changes here in
this variation on the web banner.
| | 07:28 |
So now I'm done defining the three
variables and populating them with the data
| | 07:32 |
that I entered into the three datasets.
I'll click the Preview button so that I
| | 07:36 |
can see live updates in the banner.
To do that, I'll click the arrows to the
| | 07:40 |
right of the Data Set field. I can
see the Mavericks banner with all of its
| | 07:44 |
changes and the Rincon banner as well.
Now I'm going to click OK to close the
| | 07:50 |
Variables dialog box, but leave the
banner open here in the document window.
| | 07:54 |
I would like to have Photoshop
automatically generate three versions of this
| | 07:58 |
banner. One from each of the three
datasets. To do that, I'll go up to File,
| | 08:03 |
go down to Export and I'll go over to Data
Sets as Files. In the next dialog box,
| | 08:09 |
I'll click the Select Folder button and
I'll navigate to my Desktop where I'll
| | 08:13 |
make a new folder for my three banners.
I'll click the New Folder button and
| | 08:17 |
I'll call the new folder Banners and
click Create. Then I'll click Choose.
| | 08:23 |
Back in this dialog box, I'll leave the Data
Set menu set to All Data Sets. And then
| | 08:28 |
I'll go down to the file naming areas.
Here is an example of how each banner
| | 08:32 |
will be named with the default
options here in the File Naming field.
| | 08:37 |
This name is a bit long. To shorten it,
I'm going to make some changes to these
| | 08:40 |
File Naming fields. I'll go to the
first field and I'll change it to Data Set
| | 08:45 |
name and then I'll go to each of the
other fields and change those to None.
| | 08:51 |
I'll leave the File Extension set to
.PSD because that's the only choice I have.
| | 08:56 |
PSD is the only format in
which I can export datasets as files.
| | 09:01 |
I'll check compatibility with these other
operating systems and I'll click OK. And
| | 09:07 |
Photoshop goes ahead and creates and
export as PSD files the three variations
| | 09:11 |
on this web banner. To see those, I'll go out
to my Desktop and I'll open the Banners folder.
| | 09:17 |
There are my three PSD files.
I'll open all three of them.
| | 09:23 |
I'll set the first one to 100% and then
I'll go to the Arrange Documents menu and
| | 09:28 |
I'll choose Match Zoom. So there is the
rincon banner with the orange photo and
| | 09:34 |
the Expert graphic and the Rincon text.
| | 09:36 |
Here is the pipeline banner with the
green photo, the Pipeline text and no
| | 09:40 |
Expert graphic and here is the
Mavericks banner with the purple photo,
| | 09:45 |
the Mavericks text and no Expert graphic.
Keep in mind that these three banners are
| | 09:50 |
not yet in web-ready format. To
prepare them for the web, I'd go ahead and
| | 09:55 |
slice each banner and then optimize the
slices as JPEG, GIF or PNG in the Save
| | 10:00 |
for Web & Devices dialog box.
| | 10:03 |
Now in this exercise, I created only a
few variations on this web banner but
| | 10:07 |
imagine that I were creating hundreds
of variations on the banner. I wouldn't
| | 10:10 |
want to go through the manual process
that I just showed you over and over.
| | 10:14 |
It would be more efficient to use a
spreadsheet to populate the variables with
| | 10:17 |
different values and that is what I'm going
to show you how to do in the very next movie.
| | 10:23 |
| | Collapse this transcript |
| Importing values for graphic variations| 00:00 | In the last movie you learned how to
create variations in a web graphic like
| | 00:04 | the banner by defining variables in
Photoshop CS4 and then populating those
| | 00:09 | variables manually by creating datasets
in Photoshop. That technique is useful
| | 00:14 | when you need just a few variations on
a graphic, but if you are making lots of
| | 00:17 | variations, it's probably quicker to
create a spreadsheet that contains the
| | 00:21 | values of the variables that you
make in Photoshop, and then you can just
| | 00:25 | import those values into a document in
Photoshop, as I'll show you how to do here.
| | 00:30 | I already defined the variables in
this web banner. The Photo over here, the
| | 00:35 | Location, which is a type layer, and
this small Expert graphic down here. Now I
| | 00:39 | want to import some values for those
variables. For that I'm going to use a
| | 00:43 | spreadsheet that I created earlier.
The top row of this spreadsheet contains
| | 00:48 | the names of the variables that I
specified in Photoshop. The Location
| | 00:52 | variable, the Photo variable, and the
Expert variable, and then each of the
| | 00:57 | rows contains data to populate those variables.
| | 01:01 | So for example the first row of the
spreadsheet is set up to create a variation
| | 01:05 | on the web banner I just showed you
that contains the text or the surf location
| | 01:09 | Waimea. A particular photo that I have
called photo_waimea.PSD, and in which
| | 01:16 | the expert graphic is not visible. And
then these other rows would create other
| | 01:20 | variations on that web banner. I
happened to have made this in Microsoft Excel,
| | 01:25 | but you can make and use the
spreadsheet in any application that will generate
| | 01:29 | a spreadsheet in comma-
delimited or tab-delimited format.
| | 01:32 | I am going to go up to the File menu,
and down to the Save As. In the Save As
| | 01:39 | dialog box, I'm going to the Format
menu, and there I'm going to be sure to
| | 01:43 | choose either Comma Separated Values,
which creates a .csv file, or Tab
| | 01:49 | Delimited Text, which creates this
flavor of a .txt file. I'll choose the CSV
| | 01:54 | for now, and then it's important
that I save this spreadsheet in the same
| | 01:59 | folder that contains the photos that
are going to populate the photo variable.
| | 02:04 | I have my photos in the 13_05 folder.
So I click Save. And now I'm going to go
| | 02:11 | back to Photoshop, where I still
have my web banner open, in which I have
| | 02:16 | defined the three variables.
| | 02:17 | To import that spreadsheet full of
values for those variables, I'll go up to
| | 02:23 | the Image menu, and down to Variables,
and over to Datasets. I don't happen to
| | 02:28 | have any datasets yet in this image.
I'm just going to click the Import button
| | 02:33 | here, and from the Import Data Set
dialog box that appears, I'll click Select
| | 02:37 | File, and then I'll navigate to find
that .csv spreadsheet that I just made. So
| | 02:42 | I'll select that one, and I'll click Load.
| | 02:45 | I like to check Use First Column
for Dataset Name, because that causes
| | 02:49 | Photoshop to take that first column
of content from my spreadsheet, and use
| | 02:54 | that as the name of each dataset
that Photoshop creates. I don't have any
| | 02:58 | existing dataset, so it doesn't
matter whether Replace Existing Dataset is
| | 03:02 | checked, but I'll just leave that for
now. And I'll also leave Encoding at
| | 03:05 | Automatic, and I'll click OK.
| | 03:09 | Photoshop has just imported all of the
information from that spreadsheet into
| | 03:13 | this dialog box, creating a separate
dataset for each row in that spreadsheet.
| | 03:18 | And each dataset will generate a
different variation on this web graphic. To
| | 03:22 | Preview those, I'll make sure that the
Preview box is checked over here, and
| | 03:26 | then I'll go up to the arrows to the
right of the dataset field, and I can see
| | 03:29 | a live preview here in the document
window. Each variation on my web banner has
| | 03:35 | a different photo, it has different
source spot location here, and it either
| | 03:40 | has that graphic on or off depending
on the instructions in the spreadsheet
| | 03:43 | that I imported.
| | 03:45 | This came out just great, so I'm going
to click OK, and now I'm ready to Export
| | 03:49 | each variation on my web graphic, in
the same way that I showed you how to do
| | 03:53 | in the preceding movie, and that is
to go to up to the File menu, down to
| | 03:56 | Export, and over to Datasets as Files.
I'll select a folder in which to put the
| | 04:02 | resulting files, and I'll just put
that on my desktop. I'll call the folder,
| | 04:06 | banners 2, and I'll click Create, and
click Choose. I'm going to name each file
| | 04:12 | with just the Name of the Dataset with
all of the other file naming field set to None.
| | 04:16 | I will leave the File Extension at PSD,
and I'll make sure the results are
| | 04:20 | compatible with various operating
systems, and then I'll click OK. And
| | 04:25 | Photoshop creates 12 different web
banners for me. To see those, I'm going out
| | 04:29 | to my desktop and into banners 2
folder, and there are all 12 of my web
| | 04:34 | banners. I'll open one of those so
that you can see it here in Photoshop. And
| | 04:38 | now all that's left to do is to
optimize each one of these banners in web ready
| | 04:42 | format, like GIF, JPEG or PNG, so
that I can use them as variations in my website.
| | Collapse this transcript |
|
|
14. Integrating with Other CS4 ApplicationsDreamweaver Smart Object integration| 00:00 | Photoshop is a great program in which
to create image content for a website as
| | 00:05 | you have seen throughout this course.
But Photoshop isn't the only application
| | 00:09 | that you will use when you are doing
web work. If you are creating websites,
| | 00:13 | you will also need an application in
which to build those sites. And Adobe
| | 00:16 | Dreamweaver is the ideal site building
program to use with Photoshop because in
| | 00:21 | Creative Suite 4, Adobe has
significantly improved the integration between
| | 00:26 | Photoshop and Dreamweaver.
| | 00:28 | As in past versions, you can still
bring any of the GIFs, JPEGs, PNGs and even
| | 00:33 | the HTML files that you saved out of
Photoshop into a Dreamweaver site and as
| | 00:39 | in the last version of Dreamweaver,
you can copy from a native PSD file in
| | 00:44 | Photoshop and paste into Dreamweaver,
but now in Creative Suite 4, integration
| | 00:49 | between the two programs goes even
further. Adobe has added Smart Object
| | 00:54 | Technology in CS4 that allows true
roundtrip editing between Photoshop and
| | 00:59 | Dreamweaver. Let me show you how it works.
| | 01:02 | Here in Dreamweaver CS4, I'm going to
open a site that I already made. You can
| | 01:07 | use your own site or if you are
following along, you can open the site that I
| | 01:10 | made by going to the Site menu and down
to New Site and in the Site Definition
| | 01:15 | dialog box I'll click the Advanced tab.
Here I'm going to enter a Site Name,
| | 01:20 | I'll call this the Surf site and then
I'm going to go to the Local Root Folder
| | 01:24 | field and I'm going to click on the
folder to the right of that. This will be
| | 01:28 | the site root folder, the folder that
contains all of the HTML pages and all of
| | 01:33 | the assets that go on those pages.
I'll click Choose and then I'll click OK.
| | 01:39 | Here in my Files panel I can see my new
site, Site surf, and because the arrow
| | 01:44 | is facing down I can see its contents,
which are an index.html file which is
| | 01:50 | the homepage. Another HTML file for a
second page in the site and an images
| | 01:55 | folder that contains the images for
those two pages. There is also an assets
| | 02:00 | folder in which I'm storing some .PSD
native Photoshop files for use as I build
| | 02:06 | up this site.
| | 02:06 | I am going to open the Homepage by
double clicking the icon to the left of
| | 02:11 | index.html. This is a partially built
web page, which I have been filling in
| | 02:16 | with graphics and photographs that I
made in Photoshop. I still got a couple of
| | 02:20 | spaces that I would like to fill,
including this space up here which I would
| | 02:24 | like to fill with the graphic that I
have made in Photoshop. I'm going to do
| | 02:27 | that by creating a smart object for this area.
| | 02:30 | To create a smart object, I could
just open Adobe Bridge and drag in a .PSD
| | 02:35 | file from there or I can use any of
the Insert Image methods in Dreamweaver.
| | 02:40 | So, for example, I can click in this
spot which selects the DIV on the page and
| | 02:45 | then I'll go up to the Insert menu and
down to Image and in the Select Image
| | 02:50 | Source window, I'll make sure that I'm
in my site root folder. If your window
| | 02:54 | doesn't open to that folder as mine
just did, you can always click on the Site
| | 02:58 | Root button down here to
go directly to that folder.
| | 03:02 | Here, I'm going to go into my Assets sub
-folder and I'm going to choose one of
| | 03:06 | the .PSD or native Photoshop files that
I have made in Photoshop. I'll click on
| | 03:11 | subnav.PSD and then I'm going to click
the Choose button. That opens the Image
| | 03:16 | Preview dialog box in Dreamweaver. This
dialog box is very similar to the Save
| | 03:22 | for Web & Devices dialog box in Photoshop.
| | 03:25 | Over on the right, it offers previews
of the image as it will look optimized
| | 03:29 | for the web. Just like in Photoshop, I
can use a 4-up preview, a 2-up preview
| | 03:35 | or a single preview. At the top of this
window, Dreamweaver reports the current
| | 03:39 | file size and some other information
about the file. There are some tools at
| | 03:44 | the bottom including a Crop tool and
the Zoom tool and over on the left are the
| | 03:48 | Optimization options. Because this
is flat art, it will probably optimize
| | 03:52 | better as a GIF or a PNG then as a JPEG.
| | 03:55 | So from the Format menu, I'll make one
of those choices. I'm going to choose
| | 03:59 | GIF and that brings up settings that
are very similar to the GIF Optimization
| | 04:03 | settings that you have seen in
Photoshop Safe for Web & Devices window.
| | 04:07 | I'm going to leave most of these at their
defaults for now but I do want to go to
| | 04:11 | the Colors field and reduce the
number of colors from the maximum of 256 to
| | 04:16 | something lower in order to try to
reduce the file size. Let's see if 8 will
| | 04:21 | work. That did reduce the file size and
I think the image looks just fine like that.
| | 04:26 | So I'm going to click OK. Dreamweaver
is now asking where I want to save the
| | 04:30 | GIF copy of my original source file and
the answer is in the Site Root folder.
| | 04:36 | Again, you can get to your Site Root
folder by clicking the Site Root button
| | 04:39 | down here. Once you are in the site
root folder 14_01, click on the Images
| | 04:45 | sub-folder. If you remember, that's
where all the images for these web pages
| | 04:49 | are stored. I'm going to click Save
in order to save the GIF copy of my PSD
| | 04:54 | source file here in the Images sub-
folder. In the next window I'm gong to add
| | 04:59 | some Alt text for accessibility purposes.
I'll just type sub-nav and click OK.
| | 05:06 | And now I can see the graphic
here in my Dreamweaver page.
| | 05:10 | Notice the green circular arrow icon
here. That identifies this graphic as a
| | 05:14 | smart object and it also tells me that
this copy of the original source file is
| | 05:20 | now in sync with the original. In
other words, this is the latest unchanged
| | 05:24 | version of this graphic. This is a
graphic that I would like to have on many
| | 05:28 | pages in this website. Since I have now
optimized a copy as a GIF, I can easily
| | 05:33 | add that GIF to other pages. For example,
I have another page here in the Files
| | 05:37 | panel, fearless.html.
| | 05:40 | I am going to double click the icon to
the left of fearless.html to open that
| | 05:44 | page in Dreamweaver too. And you can
see fearless.html is now opened in the
| | 05:48 | second tab in Dreamweaver's document
window. I'm going to put the graphic in
| | 05:53 | the same spot that I had it in index.
html. So I'll click in that spot in the
| | 05:58 | fearless.html page and then I'm going
to go up to the Insert menu, down to
| | 06:04 | Image and in the Select Image Source
window, I'm going to click the Site Root
| | 06:08 | button to go back to my site root folder 14_01.
| | 06:10 | I am going to look inside the Images
folder where I just saved that GIF and
| | 06:16 | I'll scroll down to find the GIF
subnav.gif. I'll select that and then
| | 06:21 | I'll click Choose. Here I'll add some
Alt text, sub-nav and click OK. The same
| | 06:27 | graphic now appears on the fearless.
html page again with the green arrow
| | 06:32 | indicating that it's a smart object.
| | 06:34 | Assume that I have put the same graphic
on many, many pages in this website and
| | 06:38 | then my client views the website and
tells me that this graphic is the wrong
| | 06:42 | color and that it needs to say Boards
instead of Surfboards. That's no problem.
| | 06:48 | I can use the new Smart Object
Technology to quickly change the graphic on all
| | 06:52 | the pages on which it appears in this site.
| | 06:55 | In any one of those pages, I'll make
sure that the graphic is selected as it
| | 06:58 | currently is and then I'll go down
to the Edit field in the Properties
| | 07:02 | Inspector. Just to the right of that
is a little Photoshop icon. I'm going to
| | 07:06 | click that icon to launch Photoshop
and to open in Photoshop, the .PSD source
| | 07:12 | file for this graphic. I'm working in
the Color and Tone workspace. Notice in
| | 07:17 | Photoshop Layers panel that this
PSD file has a couple of layers.
| | 07:22 | The top layer is the Type layer.
I'll turn that on and off so you can see
| | 07:25 | what's on it and the bottom layer is
just a solid color. I'll change the type
| | 07:30 | first. I'm just going to double click
the T icon on the Surfboards Type layer
| | 07:34 | and that's select the text and it
selects the Type tool in the toolbox.
| | 07:39 | I'll type Boards to replace that text and
then I'll go up to the check mark in the
| | 07:44 | Tool Options bar. And I'll
click that to commit that change.
| | 07:47 | Next I'm going to fill the Surfboards
bg layer with another color. I'll select
| | 07:52 | that layer and then I'll go over to
my Foreground Color box in the toolbox,
| | 07:56 | click there to open the Color Picker
and I'll navigate to a color. I'll choose
| | 08:01 | this light green and I'll click OK and
then I'll Fill with Foreground Color by
| | 08:05 | pressing Option+Delete on a
Mac or Alt+Backspace on a PC.
| | 08:10 | The final change I'll make here is to
align the new text with the background.
| | 08:14 | To do that, I'll hold down the Shift
key as I click on the Boards layer, so
| | 08:18 | that both layers are selected and then
I'll go to the toolbox and select the
| | 08:21 | Move tool and then in the tool options
bar for the Move tool, I'll click on the
| | 08:26 | two Aligned Centers icon.
This one here and this one here.
| | 08:30 | Now I'm done making changes to the
original subnav.PSD source file. So I'm
| | 08:36 | going to Save that file by pressing
Command+S on a Mac or Ctrl+S on a PC or are
| | 08:42 | just going up to the File menu and
choosing Save. Now I'm going to go back to
| | 08:47 | Dreamweaver. Notice that the
Surfboards graphic on the frearless.html page is
| | 08:53 | still purple and sit till says
Surfboards but the smart object icon on that
| | 08:57 | graphic is changed. It's now green and
red indicating that the GIF version of
| | 09:02 | the file on this page is added sync
with the original PSD file that I just changed.
| | 09:07 | To synchronize the two, I'm going to
Ctrl-click on a Mac or right-click on a PC
| | 09:12 | on that icon and from the menu that
appears, I'm going to choose Update from
| | 09:16 | original. That will cause Dreamweaver
to go back to Photoshop and re-optimize
| | 09:21 | the file from the original PSD file.
So it's not just redoing the GIF or the
| | 09:26 | JPEG every time. Instead it's re-
optimizing from the original, retaining the
| | 09:31 | quality of the image. And now if I go
back to index.html page on which I had
| | 09:36 | put the very same graphic, I can see
that the graphic has been updated there as
| | 09:40 | well. So you can see how quick it
would be to change a graphic on many, many
| | 09:45 | pages in a website making use of new
smart object integration between Photoshop CS4
| | 09:50 | and Dreamweaver CS4.
| | Collapse this transcript |
| Dreamweaver Copy/Paste integration| 00:00 | In the last movie, I showed you how to
use the new Smart Object technology in
| | 00:04 | Dreamweaver CS4 to work with
Dreamweaver and Photoshop together. But that's not
| | 00:09 | the only way to work between the two
programs. There are times when it will
| | 00:12 | make more sense to just copy and paste
between Photoshop and Dreamweaver as I'm
| | 00:17 | going to show how to do in this movie.
| | 00:19 | For this lesson, I'm going to make a
new site in Dreamweaver by going to the
| | 00:22 | Site menu at the top of Dreamweaver
CS4 and choosing New Site. In the Site
| | 00:27 | Definition dialog box, I'll click on
the Advanced tab and in the Site Name
| | 00:32 | field I'll type a name for my site.
I'll call it surf2. I'm going to click on
| | 00:37 | the folder to the right of the Local
root folder field and I'm going to select
| | 00:41 | the 14_02 sub-folder as my site
root folder. I'll click Choose and
| | 00:47 | then I'll click OK.
| | 00:49 | Now down in the Files panel in
Dreamweaver, I can see my new site surf2 where I
| | 00:55 | have an index.html page. That's the
homepage of the site and images folder that
| | 01:00 | contains the images for that page and
I have an assets folder in which I'm
| | 01:05 | storing an original PSD source file.
I'm going to open index.html by
| | 01:10 | double-clicking the icon to the left
of it. You can see here that there is a
| | 01:15 | spot vacant in which I would like
to put an item that I have created in
| | 01:18 | Photoshop. I haven't yet created a
separate graphic that will fit in this area
| | 01:22 | in Photoshop but let me switch back to
Photoshop to show you what I do have.
| | 01:27 | Here in Photoshop, I have made a
layered comp of the web page that I want to
| | 01:31 | build in Dreamweaver. In this area, I
have an image of a surfer on top of a
| | 01:36 | frame and I would like to include that
in my Dreamweaver web page. Because it's
| | 01:41 | not yet a separate comp, I can't make
it into a Smart Object but I can copy and
| | 01:46 | paste it and here is how I would do that.
| | 01:48 | I am going to go to the toolbox and
select the Rectangular Marquee tool and
| | 01:53 | then I'm going to come in and drag out
a selection around that photograph and
| | 01:57 | its frame. To copy the content of all
the layers within that selection, I'll go
| | 02:02 | up to the Edit menu and down to Copy
Merged and then I'm going to delete my
| | 02:06 | selection by going to the
Select menu and choosing Deselect.
| | 02:10 | In Dreamweaver, I'm going to click
in the area where I want to paste that
| | 02:13 | content which selects that div and
then I'll just go up to the Edit menu and
| | 02:18 | choose Paste. That opens Dreamweaver's
Image Preview dialog box, which is very
| | 02:24 | similar to the Save for Web & Devices
dialog box in Photoshop. Here I'm going
| | 02:28 | to optimize this content and because
it's primarily a photograph, I'll optimize
| | 02:33 | it as a JPEG. The only setting I'm
going to bother changing is the Quality
| | 02:36 | setting which I put at about 75, I'm
satisfied with the file size and I think
| | 02:41 | the image looks fine. So I'll click OK.
| | 02:44 | Now Dreamweaver wants to know where I
want to save the JPEG copy of that image
| | 02:48 | which by the way takes its name from
the original PSD file. I'm going to put
| | 02:53 | that in my site root folder 14_02 and
if your dialog box doesn't open to your
| | 02:58 | site root folder, you can get
there by clicking Site Root.
| | 03:01 | Inside the site root folder, I'm going
to select the images folder and I'll put
| | 03:06 | my JPEG there by clicking Save. I'll
add some old text, I'll call this photo of
| | 03:12 | surfer and click OK and the photo now
appears here in my Dreamweaver page.
| | 03:18 | Let's say that later I decide that
I don't really like the look of this
| | 03:21 | photograph, I would rather have it be
tinted with a different color. Because I
| | 03:25 | copied and pasted the original content
into Dreamweaver, I can't make use of
| | 03:30 | smart technology round-trip
editing but here is what I can do.
| | 03:34 | I am going to go back to Photoshop and
here I'm going to make a change to this
| | 03:38 | photo by going over to the Layers
panel, clicking on the photo left layer
| | 03:42 | inside the photos layer group and then
going up to the Adjustments panel. If
| | 03:47 | your Adjustments panel isn't open,
you can open it from the Window menu.
| | 03:51 | Here I'm going to click on the black
and white Adjustment Layer icon to add an
| | 03:56 | adjustment layer above the photo left
layer. By default, that turns everything
| | 04:00 | black and white on the layers below.
I'm going to click in the Tint box here
| | 04:04 | and then I'll click in the color
field to the right of the Tint box and I'm
| | 04:08 | going to choose another color, perhaps
a green with which to tint this photo
| | 04:12 | and then I'll click OK.
| | 04:14 | The only thing that I would like to
have affected by this adjustment layer is
| | 04:17 | the photo on the left. So I'll go to
the bottom of this Adjustments panel and
| | 04:21 | I'm going to click on this Double
Circle icon which clips the adjustment to
| | 04:25 | just the layer below, just the photo left layer.
| | 04:28 | Now I'm going to go back and select
that photo again with the Rectangular
| | 04:31 | Marque tool, which is still selected
in the toolbox. I'll click and drag to
| | 04:36 | make a selection around the photo.
I'll go to the Edit menu and I'll choose
| | 04:39 | Copy Merged.
| | 04:40 | Now I'm going to go back to Dreamweaver.
I'll make sure that I have selected
| | 04:44 | the div that contained the photo by
clicking in that area and then I'll go to
| | 04:48 | the Edit menu and I'll choose
Paste and that updates that area in my
| | 04:53 | Dreamweaver web page.
| | 04:54 | So that's how you can use an
alternative workflow, copy and paste, to work
| | 04:58 | between Photoshop CS4 and Dreamweaver CS4.
| | Collapse this transcript |
| Fireworks integration| 00:01 | Fireworks CS4 is an Adobe program in
Creative Suite 4 for creating bitmap and
| | 00:07 | vector based graphics for the web.
Fireworks has another function. It could be
| | 00:11 | used as a prototyping application in
which you can build multi-page website
| | 00:15 | designs and then export those designs
as HTML prototypes which you can then
| | 00:21 | share in a Web browser
with clients and colleagues.
| | 00:23 | When you use Fireworks in this capacity,
you will find that the program works
| | 00:27 | really well with Photoshop in the
practical workflow that I would like to show
| | 00:30 | you in this movie. I'm going to start
here in Photoshop CS4 where I have built
| | 00:34 | this webpage comp.
| | 00:36 | I am going to bring this webpage comp
from Photoshop into Fireworks and when I
| | 00:40 | do that, I want to make sure that
all of the layer structure and layer
| | 00:43 | properties are retained. So let me show
you what those are before I import the
| | 00:47 | file into Fireworks.
| | 00:48 | I am going to go over to the Layers
panel in Photoshop and there you can see
| | 00:52 | that there are multiple layers in this
file. There is also one layer group, and
| | 00:56 | if click the arrow on that layer
group to expand it, you can see that this
| | 01:00 | layer group contains
multiple editable type layers.
| | 01:03 | Other layers in this file have special
properties. For example, if I click on
| | 01:07 | the TexturedBar layer here which
contains this green bar, you can see that up
| | 01:12 | in the Layers panel, I have attached
this special Overlay blend mode to this
| | 01:16 | layer, which effects the way the colors
in the TexturedBar layer interact with
| | 01:20 | the colors below. Or if I go down and
click on the NavBar layer and then look
| | 01:24 | up at the top of the Layers panel, you
can see that the Opacity of this layer
| | 01:28 | has been reduced to 85% so that the
grey nav bar here is partially transparent.
| | 01:33 | The Surfboard layer, which contains
this white surfboard, has a layer style
| | 01:38 | attached to it. If I click the arrow on
the right side of the Surfboard layer,
| | 01:42 | you can see that there is an outer
glow layer style on this layer and you can
| | 01:46 | see the blue outer glow in the document.
| | 01:48 | So I would like to retain all of this
layer structure and the special layer
| | 01:52 | properties when I bring this PSD
file into Fireworks to include into the
| | 01:57 | prototype that I'm building there.
I'm going to switch over to Fireworks now.
| | 02:02 | I'm building that prototype
in this .png file surfsite.png.
| | 02:07 | PNG is the native file format of
Fireworks. Over on the right, I have a Pages
| | 02:12 | panel in Fireworks. The Pages panel
can keep track of multiple pages that you
| | 02:17 | can have inside of one PNG here in
Fireworks. I have already imported this PSD
| | 02:22 | page comp into Fireworks and it
appears here in the Pages panel as Page 1 of
| | 02:28 | the prototype that I'm building.
| | 02:29 | Now I'm going to import the Photoshop
document, the .PSD page comp that I just
| | 02:35 | showed you in Photoshop as the second
page in this Fireworks PNG. To do that,
| | 02:40 | I'll go down to the Add Page button
at the bottom of the Pages panel and I
| | 02:44 | click the Add Page icon there. That
creates a new page, Page 2, which is
| | 02:49 | currently a blank page on this blue
green canvas that I designated as the
| | 02:54 | canvas color when I
created the PNG in Fireworks.
| | 02:57 | To import my PSD file, I'll go to the
File menu and I'll go down to Import, and
| | 03:03 | into the 14_03 sub-folder. There I'm
going to click on fearless2.PSD, which is
| | 03:09 | my Photoshop webpage comp, and then
click Open. In this dialog box, I can set
| | 03:15 | options for importing the Photoshop
file. I could change its pixel dimensions
| | 03:19 | but I happen to know that it is
sized exactly to fit this PNG file.
| | 03:23 | So I'll leave the width and height as
you see them here. I'll also leave the
| | 03:26 | Resolution set to 72 pixels/inch. I
don't have any layer comps in this file. So
| | 03:32 | I can skip over the Layer Comp field.
I'm also going to leave this other
| | 03:35 | settings at their defaults as you
see them choosing to maintain layer
| | 03:39 | editability over the appearance.
| | 03:42 | I don't need to bring in the background
layer from the PSD file because my PNG
| | 03:46 | file already has this blue green page
background, and I'm not going to import
| | 03:50 | into a new layer. I would like to see a
preview, so I'll click Show Preview and
| | 03:54 | here I can see a preview of the PSD file.
| | 03:57 | I will click OK and then I'll come into
Page 2 of the PNG which is showing here
| | 04:03 | in the Fireworks document window and
I'm going to move my cursor which now
| | 04:07 | looks like a placement icon, up to the
very top left of blue green canvas, and
| | 04:11 | I'll click there to place my Photoshop
document inside the Fireworks PNG file.
| | 04:16 | If I go back to the Fireworks' Pages
panel, I can click back and forth between
| | 04:20 | this page and Page 1 and then back to
Page 2 again. There is also a Layers
| | 04:25 | panel here in Fireworks. To bring
that panel to the forefront of this panel
| | 04:29 | group, I'll click the Layers tab
right here, and now I can see all of the
| | 04:34 | layers that came in with the Photoshop
document to Page 2 of this PNG file. I
| | 04:39 | can see that Photoshop honored the
layer structure of the Photoshop file.
| | 04:42 | All of the layers are here and there
is even the layer group and if I expand
| | 04:46 | the layer group, I can see inside of
it all of my type layers. These layers
| | 04:51 | remain editable. So for example, if I
click on the first of these type layers
| | 04:55 | and that selects the type over here in
the document. This type remains editable
| | 04:59 | here in Fireworks so that I can
change something about it like its color.
| | 05:04 | To change the color of this selected
type layer, I'll go down to the toolbox in
| | 05:08 | Fireworks and I'll click here in the
Fill Color box and in the palette that
| | 05:13 | pops up, I'll click on white and that
changes the color of this text. I'm going
| | 05:18 | to collapse the type layer in the
Layers panel so that you can take a look at
| | 05:21 | some other layers here.
| | 05:23 | I will click on the TexturedBar layer.
You may remember that in Photoshop, that
| | 05:27 | had a special layer blend mode
attached to it and in Fireworks, I still have
| | 05:31 | that Overlay layer blend mode as
reported here in the Fireworks' Layers panel.
| | 05:36 | And if I select the NavBar, you can
see at the top of the Layers panel in
| | 05:41 | Fireworks, that it still has
the reduced opacity of 85%.
| | 05:45 | Not only did Fireworks respect these
layers properties, but I can change them
| | 05:49 | here. So for example, I can click the
arrow to the right of the Opacity field
| | 05:53 | and I can increase the opacity of this
grey nav bar to 100% and will click to
| | 05:58 | close the slider there.
| | 05:59 | You may remember that the Surfboard
layer had a special outer glow layer effect
| | 06:03 | attached to it in Photoshop. I'm going
to select the Surfboard layer and then
| | 06:07 | I'm going to go down to the Properties
panel, which is down here at the bottom
| | 06:11 | of the screen in Fireworks.
| | 06:12 | Notice that there is checkmark
next to Photoshop Live Effects. If I
| | 06:16 | double-click Photoshop Live Effects, I
open Live Effects window in Photoshop
| | 06:21 | and here I can see that there is an
Outer Glow Photoshop Live Effect on the
| | 06:26 | Surfboard layer.
| | 06:28 | I can even change that Live Effect here
by selecting Outer Glow and coming into
| | 06:33 | the Outer Glow options and making a
change. So for example, I could click on
| | 06:36 | the Color field here and I might choose
another color for that glow, something
| | 06:41 | like a light yellow and click OK.
| | 06:44 | So you can see that there is a close
relationship between Fireworks CS4 and
| | 06:49 | Photoshop CS4 and that you can
create content in Photoshop, bring it into
| | 06:54 | Fireworks as a separate page, and
Fireworks will honor the layer structure and
| | 06:58 | the layer properties and allow you to
make changes to the layers in the file
| | 07:02 | right here in Fireworks CS4.
| | Collapse this transcript |
| Exporting from Illustrator to Photoshop| 00:00 | If you prefer using Adobe Illustrator
over Photoshop to create graphics for the web,
| | 00:04 | you can make the original artwork
in Illustrator and bring the results
| | 00:08 | into Photoshop to add perhaps to a
webpage comp that you are building there.
| | 00:12 | One way to get your artwork from
Illustrator into Photoshop is to export it
| | 00:16 | from Illustrator in Photoshop format.
So for example, here I'm working in
| | 00:20 | Illustrator CS4 with a native
Illustrator file that has these objects on a
| | 00:24 | white artboard. You can see that there
are a number of layers and some layer
| | 00:29 | groups and as you can see one of these
layers is a layer of editable type. I
| | 00:33 | would like to retain the layers and
the editability of the type layer when I
| | 00:38 | bring this file into Photoshop.
| | 00:39 | I am going up to the File menu and
I'm going to choose Export. I'm going to
| | 00:44 | navigate to my desktop and then I'll go
to the Format field and I'll make sure
| | 00:48 | that Format is set to Photoshop (PSD
) and then I'll click Export. In this
| | 00:54 | dialog box I can set options
for exporting in Photoshop format.
| | 00:59 | First, I'll make sure that Color Model
is set to RGB so that this file is in
| | 01:03 | the proper Color Mode for the web.
I'll set the Resolution to the Screen
| | 01:08 | Resolution of 72 ppi and then I'll
double check that Write Layers is selected
| | 01:13 | in the Options area in order to
preserve the editability of the type layer. So
| | 01:17 | I'll make sure that Preserve Text
Editability is checked and I'll also check
| | 01:21 | Maximum Editability, so that
Photoshop honors as much as possible about the
| | 01:25 | layers in the Illustrator file and
I'll check Anti-alias so that when the
| | 01:30 | artwork is converted to pixels it's
edges remain as smooth as possible.
| | 01:35 | When I'm done selecting the Export
options, I'll click OK and then I'll go out
| | 01:39 | to my Desktop to see what I have
exported from Illustrator. Here is my PSD or
| | 01:44 | Photoshop document file. I'm going to
open that in Photoshop. Here you can see
| | 01:50 | the objects floating on a transparent
background and over in the Layers panel,
| | 01:54 | I can see first of all that that text
layer remains an editable type layer.
| | 01:58 | If I wanted to change something about
it here in Photoshop, I could just get
| | 02:02 | the Type tool and click and drag over
the type and perhaps I'll change its
| | 02:06 | color by going up to the Tool Options
bar and clicking in the Color Field and
| | 02:10 | choosing a different color and then
going to the Tool Options bar again and
| | 02:14 | clicking the checkmark to accept that change.
| | 02:17 | I also see in the Layers panel that the
layer groups, the type layer group and
| | 02:21 | the artwork layer group have been
preserved and if I expand the artwork layer
| | 02:25 | group I see the groups and
layers from the Illustrator file.
| | 02:30 | So although Photoshop does have tools
for creating graphics to all content if
| | 02:34 | you prefer to make your graphics in
Illustrator you certainly can create them
| | 02:37 | there and just export them in
Photoshop format as I have shown you here.
| | 02:41 | Another way to go from Illustrator to
Photoshop is to bring a Smart Object from
| | 02:45 | Illustrator into Photoshop and I'll
show you how to do that in the next movie.
| | Collapse this transcript |
| Illustrator vector Smart Object integration| 00:00 |
If you create graphics for the web in
Illustrator, you can bring those graphics
| | 00:04 |
into a composition that you are creating
in Photoshop. In another movie in this chapter,
| | 00:08 |
I showed you how to do that
by exporting out of Illustrator in
| | 00:12 |
the Photoshop document format, .PSD format.
| | 00:16 |
Another way to bring Illustrator objects
into Photoshop is as vector Smart Objects.
| | 00:21 |
This is an efficient way to work
between the two applications because
| | 00:24 |
it gives you the opportunity to quickly
go back into Illustrator, make changes
| | 00:29 |
to the file there, and have it
automatically update in Photoshop.
| | 00:33 |
To show you how this works, I have two
documents opened, one in Photoshop CS4
| | 00:38 |
here and one in Illustrator CS4.
The PSD file is a composition that I'm
| | 00:43 |
building in Photoshop. This AI file
contains some vector artwork, these sandals
| | 00:48 |
that I made in Illustrator; you can
see that I'm now working in Illustrator.
| | 00:52 |
I would like to bring the Illustrator
artwork into the Photoshop document to
| | 00:56 |
add it to my composition there. I'll
select the Black Arrow tool, which is the
| | 01:00 |
Selection tool, and then I'll come into
the Illustrator file and I'll click and
| | 01:04 |
drag to select the sandals.
| | 01:06 |
Then I'm going to go up to the Edit
menu in Illustrator and I'm going to choose
| | 01:10 |
Copy. Now I can close this Illustrator
file, I'm done with it, and click back
| | 01:15 |
on the Photoshop file, which takes me
back into Photoshop CS4. Here I'm going
| | 01:21 |
to go to the Edit menu and
I'm going to choose Paste.
| | 01:24 |
I have a choice of how I want to paste
this object, as Pixels, a Path, a Shape
| | 01:29 |
Layer, or a Smart Object. With Smart
Object selected, I'm going to click OK,
| | 01:34 |
and that brings the sandals into the
Photoshop file surrounded by this bounding box.
| | 01:39 |
In just a moment, I'm going to convert
these objects from their current vector
| | 01:43 |
based format which is composed of
drawing instructions to a pixel based format
| | 01:48 |
which is composed of pixels of color
information. But before I do that, I have
| | 01:52 |
the opportunity to resize them without
harming the image at all because they
| | 01:56 |
are still vector based.
| | 01:58 |
So I'm going to move over one of the
corners of this bounding box, I'm going to
| | 02:01 |
hold down the Shift key to constrain
proportions and then I'll click on one
| | 02:05 |
corner and drag toward the center
of the sandals to make them smaller.
| | 02:09 |
Then I'll release the mouse and I'll
click inside the bounding box and drag to
| | 02:13 |
position the sandals where I want them,
and finally, I go up to the Options bar
| | 02:18 |
and I'll click the checkmark there.
| | 02:20 |
Over in the Layers panel, I see that
the illustration came in on a new separate
| | 02:25 |
layer labeled Vector Smart Object, and
notice that the thumbnail has a special
| | 02:29 |
symbol that identifies the
layer as a smart object layer.
| | 02:33 |
A vector Smart Object brought in
from Illustrator remains linked to the
| | 02:37 |
Illustrator file from which it
originated and that means that I can make
| | 02:40 |
changes to the object in the
Illustrator file and those changes will be
| | 02:44 |
automatically updated in this Photoshop file.
| | 02:47 |
To do that, I'm going to double click
the thumbnail on the vector Smart Object
| | 02:51 |
layer. I'll click OK at the prompt
and that re-launches Illustrator CS4 and
| | 02:56 |
opens the Illustrator file that
contains the sandals. That re-launches
| | 03:01 |
Illustrator and opens this file,
which contains the vector Smart Object.
| | 03:04 |
For example I might want to change the
shape of the sandal on the left so that
| | 03:09 |
it matches the round toe of the sandal
on the right. To do that, I'm going to
| | 03:13 |
go up to the toolbox and I'm going to
click on the White Arrow tool, the Direct
| | 03:17 |
Selection tool, and then I'll come
back into the image and I'll click on the
| | 03:20 |
edge of the left sandals. That
brings up this Bezier handles.
| | 03:24 |
If I click on one of those handles and
drag, I can change the shape of the toe
| | 03:29 |
of that sandal. To change the color of
this selected sandal, I'll go up to the
| | 03:34 |
Color panel and I'll drag the sliders
there to fill the left sandal with a
| | 03:39 |
different color.
| | 03:40 |
To apply the same color to the right
sandal I'll click on the edge of the right
| | 03:43 |
sandal and then I go over to the
toolbox and I click on the Fill Color box
| | 03:48 |
there. And then I'll click
on the artboard to deselect.
| | 03:51 |
Now I'm going to save this Illustrator
file with these changes by going up to
| | 03:56 |
the File menu and choosing Save. It's
important to save the changed file over
| | 04:01 |
the original. So I don't want to
choose Save As and I don't want to save
| | 04:04 |
elsewhere or with a different
name. I'll just choose File > Save.
| | 04:07 |
I am going to close the Illustrator
file again and I'll go back and click on
| | 04:13 |
the Photoshop composition in Photoshop
CS4. And notice the sandals have changed
| | 04:18 |
color and the left sandal is
now more rounded than it was.
| | 04:22 |
So the changes that I made in
Illustrator automatically updated the vector
| | 04:26 |
Smart Object here in Photoshop. So
that's the advantage of working with
| | 04:31 |
a vector Smart Object when you bring
content from Illustrator CS4 into Photoshop CS4.
| | 04:38 |
| | Collapse this transcript |
| Flash integration| 00:00 | Flash CS4 is another Adobe Creative
Suite 4 program that you may want to use
| | 00:05 | along with Photoshop CS4 to make assets
for the web. You can make graphics for
| | 00:10 | the web in Photoshop and then
bring it into Flash to add motion and
| | 00:14 | interactivity there.
| | 00:15 | In this movie, I would like to show
you how you can bring a layered Photoshop
| | 00:19 | file into Flash automatically
converting all the Photoshop layers into Flash
| | 00:23 | layers in the Timeline. That will save
you lots of time and effort, and Flash
| | 00:28 | will respect the Photoshop layer
properties like blend modes and layer styles
| | 00:32 | as well as the editability of
Photoshop Type and shape layers.
| | 00:35 | I am starting in Photoshop CS4 with
this .PSD document. This file contains lots
| | 00:42 | of layers. Here are some pixel-based
layers, Photoshop Editable Type layers. In
| | 00:47 | the Suite's layer group, there are a
couple of shape layers that I made with
| | 00:50 | the Custom Shape tool to which I added
an Outer Glow layer style to each, and
| | 00:54 | you can see that glow around the wetsuits.
| | 00:57 | In the photos layer group, I have these
three photos, each of which has its own
| | 01:01 | Drop Shadow. I would like to retain
all of these layers and these layer
| | 01:05 | properties when I bring this file into Flash.
| | 01:08 | I am going to switch over to Flash CS4
now and here, I'm going to create a new
| | 01:13 | Flash file from the Start menu. This is
the Flash stage where compositions are
| | 01:18 | built and down here is the Flash
Timeline, which will list all of the layers in
| | 01:22 | the file but I'm bringing in from
Photoshop. To import that Photoshop file, I'm
| | 01:26 | going up to the Flash File menu and
down to Import and over to Import to Stage.
| | 01:31 | I'll navigate to my Exercise Files.
There I'll click on surf_ad.PSD and then
| | 01:37 | I'll click Import. That opens the
Import to Stage dialog box where I can choose
| | 01:42 | exactly which layers I want to import.
So, for example, if I decided that I
| | 01:47 | wanted to import that entire
composition without the logo, I could just uncheck
| | 01:51 | logo here and everything else would
come in except for the contents of the logo
| | 01:55 | layer. I'm going to check that
again so that I do bring in the logo.
| | 01:59 | You will notice that Flash did
recognize the layer structure. So it saw this
| | 02:04 | layer group, the text layer group
containing the Type layers as well as the
| | 02:08 | suits layer group and down
here, the photos layer group.
| | 02:11 | I am going to start by choosing some
options for importing the Type layers.
| | 02:16 | I'll click on one of the Type layers
and that brings up options over here on
| | 02:20 | the right. I do want to retain the
editability of the text on this Type layer.
| | 02:24 | So, over here on the right, I'll click
the Editable Text button. I actually can
| | 02:28 | set this option for more than one Type
layer at a time. I can select another
| | 02:32 | Type layer and then hold down the
Command key on a Mac or the Control key on a
| | 02:36 | PC as I click on other Type layers to
select them. I also want to retain the
| | 02:41 | editability of these two shape layers
as well as their layer style. I'm going
| | 02:46 | to select both of those by clicking
one and then Command-clicking on a Mac or
| | 02:51 | Ctrl-clicking on a PC on the other
shape layer. That changes the options on the
| | 02:55 | right to options for importing shape
layers and I'm going to choose to Import
| | 03:00 | these shape layers as
editable paths and layer styles.
| | 03:03 | I will scroll down to the photos
layer group and now I can see the three
| | 03:08 | pixel-based photos, each of which has a
layer style on it. I'm going to select
| | 03:13 | all of these by clicking the first,
holding down the Shift Key and clicking the
| | 03:17 | last of the photos and that
selects the photo in between as well.
| | 03:21 | It also changes the options over here
to options for importing image layers.
| | 03:25 | I'm going to choose to import these
layers as bitmap images with editable layer
| | 03:30 | styles. If I scroll up to the top, I
have a coupe of more pixel-based layers
| | 03:35 | like this logo layer. I could import a
pixel-based layer like this as a Flash
| | 03:39 | movie clip. A movie clip is a type of
symbol in Flash and a symbol is a master
| | 03:45 | object that can be used many times in a
Flash composition. Each use of a symbol
| | 03:49 | is called an Instance. So, to import
the logo layer as a movie clip, I'm going
| | 03:54 | to go over to the Options for logo and
I'm going to choose Create Movie Clip
| | 03:58 | for this layer and then I'll give the
instance of this symbol a name. So, I'll
| | 04:03 | call this logo1, and I can do the same
for this other pixel-based layer at the
| | 04:09 | wetsuit sale layer and I'll
call this instance name sale1.
| | 04:15 | Movie clips are important in Flash if
you want to include ActionScript in your
| | 04:19 | Flash composition and its way more
efficient to import a layer as a movie clip
| | 04:23 | now than to go back later in Flash
and have to make it into a movie clip.
| | 04:27 | Now that I'm all done choosing the
Import Options for these individual layers,
| | 04:33 | I'm going to go down to the overall
options at the bottom of this dialog box. I
| | 04:37 | do want to convert layers to Flash
layers. I'm going to leave the layers at
| | 04:42 | their original positions that they were
in the Photoshop file, and I'm going to
| | 04:46 | check Set Stage Size to the same size
as the Photoshop canvas, so that the
| | 04:51 | entire Photoshop composition fits on the
stage in Flash, and then I'll click OK.
| | 04:57 | Here on the stage, I can see all of the
imported content, and if I look in the
| | 05:01 | Timeline down here, I can see that each
of my Photoshop layers is on a separate
| | 05:05 | layer in the Timeline, and here in
Flash I can add motion and interactivity to
| | 05:10 | these layers of content.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | It's really been a pleasure teaching
you this course Photoshop CS4 for the web.
| | 00:05 | Keep in mind that to absorb all the
material here, you have really got to
| | 00:08 | use it in your own work.
| | 00:10 | So do continue to practice the skills
that I have taught you here, and above all,
| | 00:13 | enjoy yourself as you prepare
images for the web in Photoshop CS4.
| | 00:18 | Thanks for viewing!
| | Collapse this transcript |
|
|
