1. Working with Layer CompsSimulating a navigation menu rollover| 00:00 | Now, to begin the lesson,
let's come in to the Exercise Files. Let's open
| | 00:03 | up interaction design.psd. Now again, if you
don't have access to the exercise files, you
| | 00:08 | can use any layered
Photoshop file to follow along.
| | 00:12 | First we're going to need to bring up the
Layer Comps panel. Let's come up to the Window
| | 00:16 | menu, come down and choose layer comps.
| | 00:19 | So this panel here will keep track of any
of the different layers that we have turned
| | 00:22 | on and off in the Layers panel.
| | 00:24 | I'm going to grab this panel and just drag it
into the panel over here on the left, customize
| | 00:30 | my workspace a little bit. I want to be able
to see the Layer Comps panel up here and the
| | 00:35 | Layers panel underneath.
| | 00:37 | Now in the Layers panel, you'll see this is
just a standard Photoshop file with a series
| | 00:40 | of different layers.
| | 00:41 | I have a pointer selection there.
I have navigation menus, headers.
| | 00:45 | So the first thing I want to do is create
the state of our website that's going to be
| | 00:49 | the homepage without any interaction.
| | 00:51 | So let's come up here to the Layers
panel. Let's turn off the Pointer layer.
| | 00:56 | Now that I have all of the layers turned on
and off and positioned the way I want, let's
| | 01:00 | come up to the Layer Comps panel and let's
come down here and click on this button here,
| | 01:03 | which says Create a New layer comp.
| | 01:06 | The Layer Comp dialog box here
gives me some options for my layer comp.
| | 01:09 | The first thing I want to do is come
down and check Position and Appearance.
| | 01:13 | All of the nondestructive aspects of
Photoshop can be captured into individual layer comps.
| | 01:17 | So, Visibility, Position, and Appearance,
which are the Layers Styles or Effects.
| | 01:24 | Under the Name, I'm going to
type in "home" and click OK.
| | 01:27 | Now that I've done that, you'll see that we
have a home layer inside of the Layer Comps
| | 01:31 | panel and this little icon here,
indicating that this is the active layer comp.
| | 01:35 | Now the first interaction state I want to show
is going to be the hover state for the menus.
| | 01:38 | So I am going to come up to the main canvas.
I'm just going to zoom up here to 100%.
| | 01:43 | Let's turn on the Pointer
layer in the Layers panel.
| | 01:46 | I'm going to select the Move tool. Let's grab
the Pointer tool, and let's move it over here
| | 01:51 | under the word Services.
| | 01:53 | I use my arrow keys to
position this exactly where I want it.
| | 01:57 | Notice this one I make a change to any of
the layers in the Layers panel, the layer
| | 02:01 | comps will unhighlight home and highlight
this area here called Last Document State.
| | 02:07 | This indicates that we've made
a change to the home layer comp.
| | 02:10 | Let's come over to the Layers panel, let's
open up Navigation menu, and let's come in
| | 02:14 | here and let's turn on the
subfolder called submenu.
| | 02:17 | If we open this up, we will see that this is
just a simple shape that looks like a drop-
| | 02:20 | down menu, and we have a text
layer here showing our subnavigation.
| | 02:24 | So now this is the rollover state
that we want to show for the subnav.
| | 02:27 | So let's come up to the Layer Comps menu.
Let's click Create New Layer Comp. Let's Name
| | 02:32 | this submenu and then click OK.
| | 02:35 | Now in the Layer Comps panel we'll see we have
two layer comps now: we have home and Sub Menu.
| | 02:40 | If I click on home, you'll see that all of
the layers will hide and show in the Layers
| | 02:44 | panel that matches the
layer comp that we saved there.
| | 02:47 | And if I come down and click Sub Menu,
you'll see all of the layers change there as well.
| | 02:51 | So now we can click between this two layer
comps and see the individual layer states,
| | 02:56 | based on when we created our new layer comp.
| | 02:59 | And now that we have our first two layer
comps created, next we'll combine layer comps with
| | 03:02 | clipping masks.
| | Collapse this transcript |
| Combining layer masks with layer comps| 00:00 | Now, to simulate a submenu
hover, we're going to use clipping masks in
| | 00:04 | addition to layer comps.
| | 00:05 | So to do this, let's come over to the
Sub Menu layer inside of the Layers panel.
| | 00:09 | With that selected, let's come
down and choose Create New Layer.
| | 00:14 | Let's name this layer.
We'll call this sub menu hover.
| | 00:21 | With the layer selected,
| | 00:24 | I'll type the letter M key. Hold Shift+M
to get the Square Marquee Selection tool.
| | 00:29 | I am going to click and drag a shape.
| | 00:31 | I'm going to hit Command+Delete on the Mac or
Ctrl+Delete in Windows to fill with the background color.
| | 00:35 | Command+D or Ctrl+D to deselect the selection.
| | 00:39 | So what I've done here is simply just
drawn a white square. Let's move this down over
| | 00:44 | top of Service Two text.
| | 00:47 | Next, I'm going to come over to the Layers
panel, hold the Option key between the sub
| | 00:50 | menu hover and the Sub Menu. What this
is gong to do is create a clipping mask.
| | 00:55 | Click the mouse and now I've click-grouped in
the white box inside of the Sub Menu.
| | 01:00 | Let's come up to the Opacity setting
here, and let's this to 20% Opacity.
| | 01:04 | Next, let's grab the layer
with the pointer artwork.
| | 01:07 | Let's move this down so it's at the top of
the hover state. So now this looks like hovering
| | 01:11 | over a submenu item.
| | 01:13 | Let's come up to the layer comps.
Let's create a new layer comp.
| | 01:18 | Let's name this Sub Menu Hover, then click OK.
| | 01:24 | So again, when I click between the layer comps,
we can see the different states, and then in
| | 01:28 | the Sub Menu Hover, we actually have a layer
that's turned on, here in the Layers panel,
| | 01:32 | which is part of a clipping
mask to the layer underneath.
| | 01:35 | So, now that we have our Sub Menu Hover Layer
comp created, next we look at combining layer
| | 01:39 | effects and layer comps.
| | Collapse this transcript |
| Combining layer effects with layer comps| 00:00 | Now, in our design comp, I want to
simulate what rolling over a hyperlink would look like.
| | 00:04 | So, in a Layer Comps panel, let's come back
and let's activate the Home layer comp.
| | 00:07 | This will turn off all of the submenu items.
| | 00:10 | Let's come in to the Layers panel.
Let's collapse the navigation menu group.
| | 00:14 | Let's open up content and inside of
content, let's open up a folder called promo 1.
| | 00:19 | Now, inside up here I have a thumbnail, I
have an arrow artwork, which is this little
| | 00:24 | arrow here next to the link,
and then we have a text block.
| | 00:27 | Now, I'm controlling the text in here with
character styles, which is part of Photoshop CS6.
| | 00:33 | If you're using an earlier version of Photoshop,
you can use the technique I'm about to show
| | 00:36 | you to show hyperlinks as well.
| | 00:40 | Let's come over here and select the text Layer.
| | 00:43 | Let's come down and create a new
layer. Let's call this link hover.
| | 00:50 | Let's get our Marquee Selection tool. Let's come
up here and draw a box around the word Watch video.
| | 00:56 | I am going to press the letter I key to get
the eyedropper. Let's come up and select a
| | 01:02 | dark-orangish color.
| | 01:04 | I am going to hold Option+Delete or
Alt+Delete to fill the foreground color.
| | 01:08 | Command+D or Ctrl+D to deselect.
| | 01:10 | Now, let's clip-group this shape into the
text layer. Option key. Click between the
| | 01:17 | layers. Now this is going to
change the color of the type here.
| | 01:20 | Now, I also want to change the color of the
arrow, but if I change the pixel color, that
| | 01:24 | will change across all of the different layer
comps, because layer comps only control what's
| | 01:28 | nondestructive, and changing the color of a
pixel on the canvas is considered destructive.
| | 01:33 | But what we can do is apply an effect.
| | 01:36 | So with the arrow artwork selected in the
Layer panel, let's come down to the Effects.
| | 01:40 | Let's click and apply Color Overlay.
| | 01:43 | Let's move this out of the way.
| | 01:46 | Let's click on the color swatch here.
Let's come down, and let's use the Eyedropper tool
| | 01:50 | and select roughly the same color, so this dark-orange
color, move that around a little bit. Let's click OK.
| | 01:59 | We'll keep the blend mode at Normal,
Opacity 100%, and then click OK.
| | 02:04 | Now, with the layer effect applied to the
arrow artwork, in Layers panel, let's scroll up,
| | 02:09 | let's select the pointer layer, let's grab
our pointer, and let's drag this so that it
| | 02:14 | just intersects the link here so it
looks like we're hovering over that link.
| | 02:20 | So now that's the state we
want to show for our link hovers.
| | 02:22 | Let's come up to the layer comps. Let's
create a new layer comp. We'll call this Link Hover,
| | 02:30 | and notice of these three
checkboxes here, Appearance is checked.
| | 02:33 | Layer Style. Now layer styles relate to
the effects here in the Layer Comps panel,
| | 02:38 | so any changes that we make from the layer
effects can be captured into a layer comp.
| | 02:42 | So now that we have that
in place, let's click OK.
| | 02:45 | So, now if I go back to Sub Menu Hover, notice
that the arrow here is blue and the type over
| | 02:50 | here is blue, but on Link Hover, we have
the clipping layer, which is called Link Hover
| | 02:55 | here, clipped in and turned on, and
the effects for the arrow are turned on.
| | 03:00 | So now that we have our layer comp for Link Hover,
next we'll look at simulating a video overlay.
| | 03:04 |
| | Collapse this transcript |
| Simulating a video lightbox| 00:00 | Next, I want to simulate what it
would like if a video were playing on our web design.
| | 00:05 | So first, I'm going to
zoom out on the canvas here.
| | 00:08 | Let's come over to the layer comps.
Let's activate the home layer.
| | 00:12 | In the Layers panel, let's close up these
content areas. Let's open up the video group.
| | 00:18 | Let's turn this on. Let's grab the Close
button here. Let's get our Move tool. Let's move
| | 00:23 | this up to the upper-right
hand corner of the video frame.
| | 00:26 | I also want to put a ghosted background
here so that this looks like a light box.
| | 00:33 | Let's come down and create a new
layer. Let's call this Overlay.
| | 00:40 | Let's move this under the video Layer.
| | 00:42 | With that layer selected, let's grab our
Marquee tool. Let's click and drag out an area the
| | 00:47 | size of our background canvas. Let's hold Option+
Delete or Alt+Delete to fill with the foreground color.
| | 00:54 | Let's come over at the Opacity.
Let's bring this down to about 75%.
| | 00:58 | So now that's what a video will
look like playing on our site.
| | 01:07 | Let's come over to the Layer Comps
panel, let's create a new layer comp.
| | 01:11 | Let's call this Video Overlay, then click OK.
| | 01:17 | Now that we have a layer comp that
simulates video playing on our site, next we'll look
| | 01:20 | at using layer comps to simulate movement.
| | Collapse this transcript |
| Simulating movement onscreen| 00:00 | Next, we're going to
simulate some motion using layer comps.
| | 00:02 | So what we're going to do now is let's
come back and activate the home layer comp.
| | 00:08 | Let's close up to video group. Let's open
up the mobile group. Let's turn these on.
| | 00:13 | Now, the first thing I want to do is create
the illusion that the mobile screen is moving
| | 00:16 |
inside of the mobile device.
| | 00:18 | So on this layer here, Layer15, I have a
flattened version of what the mobile version of this
| | 00:24 | site would look like.
| | 00:25 | So let's move this over, over the top of the
green layer here, which shows the phone screen
| | 00:30 | size. Let's align these up
so I don't see any green.
| | 00:35 | Let's come over to the Layers panel. Let's
hold the Option Key. Let's clip-group in Layer15
| | 00:40 | into the mobile screen layer.
| | 00:41 | Now, if I were to come over here, hold the
Shift key, and move this up and down, you'll
| | 00:45 | see that as I move this small screen layer, it
looks like it's actually scrolling on our mobile device.
| | 00:49 | So, let's align this so that the top of
the banner is at the top of the screen.
| | 00:54 | Let's come back to the Layers panel. Let's
turn on the hand graphic. Now, with both of these
| | 00:59 | in place, let's come up to the layer comps.
| | 01:01 | Let's create a new layer comp. We'll call
this Mobile Top because we're looking at the
| | 01:07 | top of the mobile screen. Let's click OK.
| | 01:10 | Now, let's come over to the Layers panel.
Let's hold the Command or Control key. Let's select
| | 01:16 | the Hand Layer and Layer15.
| | 01:19 | I'm going to use my Arrow tool. I'm going
to hit the up arrow, and I'm going to move
| | 01:25 | both layers up until we can see the very
footnote area at the bottom of the mobile screen.
| | 01:30 | So, when the bottom of the footer matches the
bottom of the mobile screen, let's come up
| | 01:34 | to layer comps. Let's create one more layer
comp. We'll call this Mobile Navigation, since
| | 01:43 | we can now see the navigation at
the bottom of the mobile screen.
| | 01:46 | Let's click OK. I'll open my
layer comps up a little bit.
| | 01:51 | So now when I go between Mobile Top and Mobile
Navigation, we get the illusion that we actually
| | 01:56 | have a finger here that's actually
moving the screen inside of our mobile device,
| | 01:59 | giving us a way to simulate to our clients what the
mobile experience of this web design would look like.
| | 02:03 | So now that we have all of our layer comps
in place, next we'll look at how we can modify
| | 02:08 | existing layer comps within our composition.
| | Collapse this transcript |
| Updating existing layer comps| 00:00 | Now once to have layer comps
in your composition, it's really easy to update
| | 00:03 | individual layer comps.
| | 00:05 | One thing that's been happening is every time
we make a change, the Layer Comps panel defaults
| | 00:09 | back to the top item here
called Last Documents Date.
| | 00:12 | So to modify one of our layer comps, let's
come up and activate the home layer comp, and
| | 00:16 | let's say we want to show the mobile
screen in addition to the main home screen.
| | 00:20 | So with home selected, let's come down under Mobile.
Let's activate Layer15, Mobile Screen and Mobile Phone.
| | 00:27 | We may need to move the screen over into place.
| | 00:30 | So once we have all of the layers
lined up, let's come over to the home menu.
| | 00:33 | Notice that's still selected, but the
activation is under Last Documents Date.
| | 00:38 | With home selected, we can come down and
click this button here, which is the Update Layer
| | 00:41 | Comp, or you can right-click
and choose Update Layer Comp.
| | 00:44 | In either case, that layer comp will be updated
to match the current state of the Layers panel.
| | 00:49 | So now when I go between other layer comps
such as Sub Menu and Hover and come back to
| | 00:53 | home, the home state now has the main home
screen for the computer and the main home
| | 00:58 | state for the mobile device. And you can
use this technique to update any layer comp to
| | 01:02 | match the current state of the Layers panel.
| | 01:04 | And now that we have all of our layer comps
created, next we'll look at how we can publish
| | 01:08 | out our layer comps.
| | Collapse this transcript |
|
|
2. Exporting and Sharing Layer CompsExporting layer comps to files| 00:00 | So now with all of our
layer comps created, next we're going to want to
| | 00:03 | share these with our client.
| | 00:04 | So the first option we have is to go up to
the File menu, come down to Scripts, and choose
| | 00:09 | Layer Comps to Files.
| | 00:12 | In the dialog box here we can pick where
we going to save this out, under Destination.
| | 00:17 | I'll click Browse. I'll leave
this on Desktop, click Open.
| | 00:23 | Next, we can put a prefix before each file.
| | 00:27 | Next, you can choose whether you want to
save the selected layer comp or all of them.
| | 00:31 | By leaving this unchecked,
it will save all of them.
| | 00:35 | Under File Type, you can choose form a bunch of
different file formats. I'm going to choose JPEG here.
| | 00:40 | I'm not going to include ICC Color Profiling, and
let's set the Quality to 8. And then I'll click Run.
| | 00:46 | What the Photoshop is gong to do is activate
each of the individual layer comps and then
| | 00:50 | save out as JPEG based on
each one of those layer comps.
| | 00:54 | Once Photoshop is done, it will give me a
dialog box, letting me know that they're
| | 00:56 | all complete. And if I take a look at the
desktop here, we'll see that I now have one JPEG for
| | 01:01 | each one of the individual layer comps.
| | 01:03 | So you can use these JPEG files
and then share them with your client.
| | 01:06 | Now, instead of sending one giant JPEG,
another thing you can do is come over here, select
| | 01:11 | all of the JPEGs, and if you have Acrobat,
you can come over here and drag these on top
| | 01:16 | of the Acrobat icon.
| | 01:18 | Acrobat will prompt you and ask you if they
can create a multipage PDF of all of these
| | 01:22 | JPEGs. Click Yes and then Acrobat will take all
of those JPEGs and create a multipage PDF file.
| | 01:30 | Once that's complete inside of Acrobat, I
can arrow through my individual pages or open
| | 01:34 | up the thumbnails and see all of the pages that
were created based on all of those individuals JPEGs.
| | 01:39 | So now that we looked at exporting
individual files, if you have Photoshop CS6, Adobe has
| | 01:45 | reactivated the script to allow us to
create a multipage PDF directly from Photoshop,
| | 01:49 | and we'll take a look at that process next.
| | Collapse this transcript |
| Exporting layer comps to a multipage PDF| 00:00 | Now, if you're using Photoshop
CS2, 3, or 6, you can go right to a multipage
| | 00:05 | PDF file directly from Photoshop.
| | 00:07 | If you're using CS4, 5, or 5.5, you can use
the process we looked at in the last video,
| | 00:13 | using Acrobat to create a
multipage PDF file from a JPEG export.
| | 00:17 | So from Photoshop CS6, let's come up to the
File menu, let's come down and choose Scripts,
| | 00:22 | and let's choose Layer Comps to PDF.
| | 00:26 | From this dialog box, I'll choose Browse.
Let's choose a Name, myDesign, leave it on
| | 00:34 | the desktop, click Save. In this dialogue
box, we also have the option to save only
| | 00:39 | selected layer comps, I'll leave this unchecked.
| | 00:42 | Under Slideshow Options, we have the ability
to have the PDF file go into full-screen view
| | 00:47 | and automatically advance through the
pages after a certain amount of time.
| | 00:50 | I'm going to uncheck this--I don't want
that to happen--and then I'll choose Run.
| | 00:55 | So we're going to see a process similar to
what we saw in the last video, where Photoshop
| | 00:58 | will go through and activate each of the layer
comps, but it'll do an additional step where
| | 01:02 | it will take each JPEG file, put them into
a multipage PDF, and then give us a PDF of
| | 01:07 | all of the different pages
based on our Layer Comps panel.
| | 01:12 | Once it's done, Photoshop will give us a dialog box
letting us know that's complete. We'll click OK.
| | 01:17 | Now, in the desktop, we can see
the new file called myDesign.PDF.
| | 01:21 | I'll double-click this to open it up in Acrobat.
| | 01:24 | Now, even though we've disabled the slideshow,
Acrobat will still want to open in full-screen
| | 01:28 | mode. We're going to
come down here and click No.
| | 01:30 | I'm going to hit Command+D or
Ctrl+D to bring up the open preferences.
| | 01:34 | Let's come under Initial View inside of
Acrobat and let's uncheck the Open in Full Screen
| | 01:39 | mode, then click OK.
| | 01:41 | Now, we can save our files, send it to our
clients, and they will not be prompted for
| | 01:45 | opening the PDF in full-screen view.
| | 01:48 | So now that we've looked at two options for
exporting files directly from Photoshop, next,
| | 01:52 | we'll look at how we can use InDesign to
access layer comps inside of a Photoshop file.
| | Collapse this transcript |
| Accessing layer comps from within InDesign| 00:00 | Now, a great feature inside
of InDesign is its ability to access layer
| | 00:04 | comps inside of a Photoshop file.
| | 00:06 | So to demonstrate this, I'm
going to move over to InDesign.
| | 00:09 | Inside of InDesign let's create a new
document and once inside of InDesign, I'm going to
| | 00:15 | choose Command+D or Ctrl+D to place the document.
| | 00:17 | I'm going to go into the exercise files where
I've been saving my layer comps as we've gone
| | 00:21 | through this course.
| | 00:22 | I'm going to click on the interaction_design.psd,
click Open. With my loaded text gun I'm
| | 00:29 | going to click to place the PSD file.
| | 00:33 | I'm going to scale this
down, put it up on the page.
| | 00:37 | Now, I'm going to right-click. I'm going to
come down and choose Object > Layer Options.
| | 00:46 | When this dialog box comes up, you'll see
that we have the ability inside of InDesign
| | 00:49 | to turn on and off individual layers from
our Photoshop file, but also notice here,
| | 00:53 | we have the Layer Comp menu.
| | 00:55 | This will show all of the layer comps
that we created inside of the Photoshop file.
| | 00:58 | So, let's come in here and activate Home
and click on Preview. And then notice that the
| | 01:04 | hand icon went away. I'll click OK.
| | 01:06 | Now, I'm going to come up here, select this
artwork. I'm going to hold the Option or Alt key
| | 01:13 | and drag out a copy of the same Photoshop file.
| | 01:17 | Let's right-click on the second item, Object
Layer Options. Let's come in here and let's
| | 01:22 | activate the Video Overlay, now click OK.
| | 01:27 | So now we have two instances of the same
Photoshop file, and in each instance we are activating
| | 01:32 | a different layer comp.
| | 01:35 | Let's Option+Drag one more.
| | 01:37 | I am going to grab all of these and just resize
them a little bit so they all fit on the stage.
| | 01:43 | This is a great technique for creating
storyboards that you can share with your clients.
| | 01:48 | On the third one, let's right-click,
Object > Layer Options. Let's come down and choose
| | 01:54 | Mobile Navigation and then click OK.
| | 01:59 | So again, now we have three
instances of the same Photoshop file.
| | 02:01 | Now, if I need to make a change to my layer
comps, I can click any one of these items.
| | 02:07 | Let's right-click. Let's come down and
choose Edit Original. This will bring the original
| | 02:11 | Photoshop file back up in Photoshop.
| | 02:13 | Now, let's make a change to the homepage.
| | 02:15 | So on the Layer Comps panel, let's activate
Home. Now on the Home layer comp, let's say
| | 02:21 | I don't want to see the mobile version on
this particular comp, so with that selected,
| | 02:25 | in the Layers panel, let's Hide Mobile.
| | 02:29 | Let's come back into layer comps.
| | 02:31 | With the Home layer selected,
let's right-click, choose Update Comp.
| | 02:35 | Next let's come down to the Video Overlay.
Let's say the background's a little dark.
| | 02:41 | Let's come into the video group.
| | 02:43 | Let's come into Overlay. Let's change that
from 75 down to 30, right-click on the Video
| | 02:50 | Overlay Comp, update that layer comp, and then
lastly, for Mobile Navigation, let's activate that one.
| | 02:57 | Let's come into Mobile. Let's hide the hand.
Let's get that out of the way. Come back up
| | 03:02 | to layer comp, Mobile Navigation,
right-click, Update layer comp.
| | 03:06 | So now we've changed each of the individual
layer comps that we're using inside of InDesign.
| | 03:11 | Inside of Photoshop, let's choose File > Save.
| | 03:15 | And now, back in InDesign, notice that each one of
the individual layer comps is now being modified.
| | 03:19 | The top one has the mobile screen removed,
the middle one has the video overlay a little
| | 03:23 | bit lighter, and the bottom one has the
hand removed from the mobile navigation view.
| | 03:27 | So, this gives us a really quick and
efficient way to work inside of Photoshop with layer
| | 03:31 | comps and then access those
individual layer comps inside of InDesign.
| | 03:36 | And with that, that completes a whole series
of things that you can use layer comps for
| | 03:40 | inside of Photoshop to show
interactive design states to your clients.
| | Collapse this transcript |
|
|
