Mocking Up Interaction States (Pop-Up, Hover, Etc.)

Topics covered in this Photoshop for Web Design tutorial:

Creating a video overlay, Creating & viewing layer comps, Making changes across layer comps

Exercise Preview

Exercise Overview

Sometimes you want to mock up how a page will look in different states. How does a button look when you hover over it, or what would it look like when a video pop-up opens over the page? While Photoshop doesn’t have any features specifically designed for mocking up these types of interactive states, a feature called Layer Comps will allow us to accomplish our goal. In this exercise, you’ll learn how to mock up a couple different interaction states.

Creating the Video Overlay

1. In Photoshop, close any files you have open.
2. Hit Cmd–O (Mac) or Ctrl–O (Windows).
3. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > iTastify and open iTastify Design Done.psd.
4. Zoom in on the top masthead area with the Be Your Own Food Critic headline and iPhone photo.
5. The first state we want to mock up is how a video overlay would look on the page. To start, we need a new layer group on top of everything. In the Layers panel, select the nav folder.
6. At the bottom of the Layers panel, click the Create a new group button .
7. Double–click the name Group 1 and rename it: video pop-up
8. At the bottom of the Layers panel, click the Create new fill or adjustment layer button and choose Solid Color.
9. In the Color Picker, set it to black, #000
10. Click OK.
11. At the top of the Layers panel, set Opacity to 80%. By darkening the page, we can focus the user on the video we want them to watch.
12. Choose the Move tool .
13. We’ve been provided with a still frame from the video. Go to File > Place Embedded.
14. Navigate into Class Files > yourname-Photoshop for Web Class > iTastify and double–click video-poster-frame.jpg.
15. Hit Return (Mac) or Enter (Windows) to accept the size.
16. Drag the video approximately to the middle of the gray background for the masthead.
17. To make sure it is exactly centered on the page, hit Cmd–A (Mac) or Ctrl–A (Windows) to select all.
18. In the Options bar, click the Align horizontal centers button .
19. Get rid of the selection by choosing Select > Deselect or hitting Cmd–D (Mac) or Ctrl–D (Windows).

Adding Video Controls

To make this look like a video, we recreated the YouTube video controls that you can overlay onto the video preview image.

1. Go to File > Open.
2. If you’re not in the iTastify folder, navigate into Class Files > yourname-Photoshop for Web Class > iTastify.
3. Double–click on youtube-controls@2x.psd to choose it.
4. In the Layers panel, select the YouTube Controls folder.
5. Copy it (Cmd–C (Mac) or Ctrl–C (Windows)).

6. Close the file.

   You should now be back in yourname-iTastify Interactive States.psd. You may not see the controls because they are in the middle of the artboard. Don’t worry, we have a quick way of aligning them to the video preview.

7. Paste it (Cmd–C (Mac) or Ctrl–C (Windows)).

8. Hold Cmd (Mac) or Ctrl (Windows) and click on the thumbnail of the video-poster-frame layer, as shown below:

   

   The video preview image should now have a marquee selection around it, which we can align to.

9. In the Layers panel select the YouTube Controls folder.

10. In the Options bar:

    • Click Align bottom edges .
    • Click Align left edges .

11. The controls should be aligned to the bottom of the video! Choose Select > Deselect or hit Cmd–D (Mac) or Ctrl–D (Windows).

Adding a Close Button

We should add a close button for the video. Conveniently, Photoshop has an icon we can use for this.

1. Photoshop has a built-in shape that we want to use, but we must load it first. Open the Shapes panel by choosing Window > Shapes.

2. At the top right of the Shapes panel, go into the panel menu and choose Legacy Shapes and More.

3. Zoom in closer on the top-left corner of the video image.
4. In the Tools panel below the other vector shape tools, choose the Custom Shape tool .
5. At the top left of the Options bar, set the menu to Shape. (The menu may currently say Path or Pixels.)
6. In the Options bar, click on the Fill button .
7. At the top of the pop-up panel, click on the Solid Color button .
8. Go into the Grayscale folder and choose black (the last color).
9. Let’s choose the shape we want to create. Towards the right side of the Options bar, click the Shape icon/menu (next to Align Edges).
10. In the pop-up panel, navigate into Legacy Shapes and More > All Legacy Default Shapes > Web.

11. The Add button looks like a + inside a circle. If we rotate this icon 45º it will look like an x instead of a + and we’ll have a close button!

    Double–click the Add button to choose it and close the panel.

    

12. Aim the cursor at the top-left corner of the video image and click once.

    

13. In the dialog that appears set the following:

    • Set both Width and Height to 50 px
    • Check on From Center.
    • Click OK.
14. Hit Cmd–T (Mac) or Ctrl–T (Windows) so we can transform this icon.
15. In the Options bar, to the right of H: 100%, set Rotate to 45º
16. Hit Return (Mac) or Enter (Windows) twice to apply the change.
17. In the Layers panel, rename the Shape 1 layer to close x
18. In the Layers panel, select the video pop-up folder (so we can preview the icon without it selected).
19. You can currently see through the icon, but we want it to have a solid white background. Choose the Ellipse tool .
20. Click once around the center of the close button.

21. In the dialog that appears, set Width and Height to 49 px.

    We’re making it one pixel smaller than the icon to ensure none of the white will protrude past the black icon.

22. Click OK.
23. In the Options bar, click the Fill color button .
24. In the Grayscale folder click on the White swatch and hit Return (Mac) or Enter (Windows) to close the color panel.
25. In the Layers panel, change the name of Ellipse 1 to button bg
26. Drag the close x layer above the button bg layer.
27. Select the close x and button bg layers by Shift–clicking on them in the Layers panel.
28. Choose the Move tool .

29. In the Options bar:

    • Click the Align vertical centers button .
    • Click the Align horizontal centers button .

30. While you’re in the Options bar, make sure the following are also set. We’ll want these set a bit later in this exercise:

    • Auto-Select is NOT checked.

    • The menu to its right is set to Layer.

31. The close icon is done! Zoom out so you can see the full width of the page.
32. In the Layers panel, close the video pop-up folder.

33. To see how the page looks with or without the video overlay, toggle its visibility by clicking the eye next to the video pop-up folder. Looking good so far!

Layer Comps

While toggling the visibility of layers works fine for simple presentations, there is a more refined method we can use, which is especially helpful when showing multiple interactive states.

1. In the Layers panel, make sure the video pop-up folder is hidden.
2. Hit Cmd–S (Mac) or Ctrl–S (Windows) to save.
3. Go to Window > Layer Comps.
4. We want to save the normal appearance of the page, before the video pops up. At the bottom of the Layer Comps panel, click the Create New Layer Comp button .

5. Name it normal and make sure all the Apply to Layers options are checked on.

   Layer comps allow us to change specific layer attributes (visibility, position, layer style, etc.) so we can save different variations of the current file (so we can view them quickly and easily later on). Some changes cannot be saved using Layer Comps, including content changes (like changing text), fill color, stroke color, etc. You’ll see what this means as we start using the Layer Comps.

6. Click OK.
7. Now let’s save the overlay as another layer comp. In the Layers panel, show the video pop-up folder.
8. At the bottom of the Layer Comps panel, click the Create New Layer Comp button .
9. Name it video pop-up and make sure all the options are checked.
10. Click OK.

11. To switch between our layer comps, you can:

    • Click the Layer Comp icon to the left of a layer comp. (Clicking on the name of a layer comp does not view it!)
    • Click the Previous or Next arrows at the bottom left of the Layer Comps panel.

12. Before moving on, make sure you’re viewing the normal layer comp.

Creating One More Layer Comp

1. Let’s create another layer comp. In the file, scroll down to the Rate What You Ate section.
2. Ctrl–click (Mac) or Right–click (Windows) on the Appetizers icon’s white circle.
3. In the menu that appears, under Category-Appetizers choose Ellipse.
4. In the Layers panel, notice the Category-Appetizers contains the appetizers icon, ellipse, and text. We want to change the color of all these elements, so we’ll apply a layer style to the group containing them.
5. Double–click in the empty space to the right of Category-Appetizers.
6. The Layer Style window should open. On the left, check on the words Color Overlay so it’s checked on and selected. Click directly on the words. Do not just check the checkbox, or else you won’t see its options on the right.
7. Set Blend Mode to Normal.
8. To the right of Blend Mode, click the Color swatch.
9. Set the color to the iTastify red, #e24637

10. Click OK twice to close the windows.

    The change we just made is a layer style change, which can be saved into a layer comp.

11. In the Layer Comps panel, notice that the Layer Comp icon indicates we are currently viewing the Last Document State.

12. Click the Layer Comp icon to the left of normal to switch to it.

    Notice that the Appetizers red color overlay has not been applied there.

13. Click the Layer Comp icon to the left of video pop-up to switch to it.

    The change hasn’t been made there either. The change was only made in the Last Document State.

14. Switch back to the Last Document State by clicking its Layer Comp icon .

15. At the bottom of the Layer Comps panel, click the Create New Layer Comp button .

16. Name it category hover and make sure all the options are checked.

17. Click OK.

18. View each of the 3 layer comps we created (normal, video pop-up, and category hover) to see that the red color change was only made to the category hover layer comp. That’s precisely what we wanted.

Making Changes Across Layer Comps

What if we want to make a change that should apply to all the layer comps? Let’s see how to do that.

1. Make sure you are viewing the category hover layer comp.

2. Cmd–click (Mac) or Ctrl–click (Windows) the Rate What You Ate heading.

3. Drag it down a bit.

4. In the Layer Comps panel, switch between the layer comps to see that the text has not been moved in any of the layer comps we created.

5. Switch to Last Document State to see that is where this most recent change was made.

6. We want to apply this change to our previously saved layer comps. In the Layer Comps panel:

   • Click on the name of normal (not the icon).
   • Shift–click on the name of category hover.

7. At the bottom of the Layer Comps panel, click the Update Positions button .

8. Switch between the various layer comps to see that the Rate What You Ate heading was moved in all of them.

   Every time you make a change to visibility, position, or appearance (layer style), the change is initially saved into Last Document State. To save that change into any other layer comp(s), you must select the desired layer comp(s) and update them by clicking the appropriate update button.

9. View the normal layer comp.

10. Content changes such as text are not tracked individually across layer comps. Let’s see an example. Scroll up to the top of the page.

11. Select the Type tool .

12. Change the text in the Learn More button to: Watch Video

13. Hit Esc to finish editing the text.

14. In the Layer Comps panel, view the category hover layer comp to see that the change has already been made there!

    This is because text changes are not one of the the attributes that are differentiated between layer comps (visibility, position, layer style, etc.). Only those things can be different across layer comps. Everything else will be the same.

    For example if you delete a layer, it will be deleted across all layer comps!

15. Let’s see one more example. Scroll down to the Download Now button near the bottom of the page.

16. Choose the Move tool .

17. Cmd–click (Mac) or Ctrl–click (Windows) the Download Now button’s red background.

18. To change the button’s color, in the Layers panel, double–click the layer thumbnail to the left of Download Button bg.

19. In the Color Picker, set the color to black, #000

20. Click OK.

21. Switch between the different layer comps to see that the button is black in all of them.

    You might have expected this change to be different across the layer comps, because it seems like an appearance change. But the appearance change that layer comps track is specific to layer styles (color overlay, stroke, drop shadow, etc.). A fill or stroke applied directly to vector objects (via the Options bar or Properties panel) is different than the color overlay or stroke effects applied as a layer style! The difference is subtle, so we understand how that can be confusing at first. It’s because Photoshop actually has multiple ways to apply fill colors and strokes. That’s why we wanted to talk about it!

22. That’s all for now. Hit Cmd–S (Mac) or Ctrl–S (Windows) to save.