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

Master These Essential Photoshop for Web Design Techniques:

Creating Professional Video Overlays, Building & Managing Layer Comps for Client Presentations, Implementing Global Changes Across Multiple Design States

Exercise Preview

Exercise Overview

Modern web designers must frequently present multiple interaction states to stakeholders and development teams. Whether you're showcasing hover effects on navigation elements, demonstrating modal overlays, or illustrating user flow variations, the ability to efficiently mock up these dynamic states is crucial for professional web design workflows.

While Photoshop doesn't include dedicated prototyping features like specialized UX tools, its powerful Layer Comps functionality provides a robust solution for creating and managing multiple design states within a single document. This approach not only streamlines your workflow but also ensures consistency across all variations while maintaining organized, client-ready presentations. In this comprehensive exercise, you'll master the techniques professionals use to create compelling interactive mockups that effectively communicate user experience concepts.

Creating the Video Overlay Foundation

Video overlays are ubiquitous in modern web design, serving everything from product demonstrations to testimonial content. Creating a professional-quality overlay begins with proper layer organization and visual hierarchy.

1. In Photoshop, close any files you have open to ensure a clean workspace.
2. Hit Cmd–O (Mac) or CTRL–O (Windows) to open the file dialog.
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 containing the Be Your Own Food Critic headline and iPhone photo to focus your work area.
5. Proper layer organization is essential for complex designs. In the Layers panel, select the nav folder to establish our insertion point.
6. At the bottom of the Layers panel, click the Create a new group button to create a new layer group.
7. Double–click the name Group 1 and rename it: video pop-up for clear identification.
8. At the bottom of the Layers panel, click the Create new fill or adjustment layer button and choose Solid Color to create our overlay backdrop.
9. In the Color Picker, set it to black, #000000 to create maximum contrast.
10. Click OK to apply the color selection.
11. At the top of the Layers panel, set Opacity to 80%. This creates the standard overlay effect that dims background content without completely obscuring it, directing user attention to the video content while maintaining visual context.
12. Choose the Move tool to position video elements precisely.
13. We've been provided with a still frame from the video that will serve as our poster image. Go to File > Place Embedded to import external assets while maintaining file portability.
14. Navigate into Class Files > yourname-Photoshop for Web Class > iTastify and double–click video-poster-frame.jpg to select it.
15. Hit Return (Mac) or Enter (Windows) to accept the default size scaling.
16. Drag the video approximately to the middle of the gray background within the masthead area.
17. To ensure pixel-perfect alignment, hit Cmd–A (Mac) or CTRL–A (Windows) to select the entire canvas area.
18. In the Options bar, click the Align horizontal centers button to achieve perfect horizontal centering.
19. Clear the selection by choosing Select > Deselect or hitting Cmd–D (Mac) or CTRL–D (Windows) to continue working without selection constraints.

Adding Professional Video Controls

Authentic video controls enhance user recognition and provide clear interaction cues. We'll implement YouTube-style controls that users immediately understand, maintaining consistency with familiar interface patterns.

1. Go to File > Open to access our pre-designed control elements.
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 open the controls file. Note the @2x designation, indicating these assets are optimized for high-resolution displays.
4. In the Layers panel, select the YouTube Controls folder to capture all control elements.
5. Copy it using Cmd–C (Mac) or CTRL–C (Windows).

6. Close the file to return to your main workspace.

   You should now be back in iTastify Design Done.psd. The controls may not be immediately visible as they're positioned in the center of the artboard, but we'll use Photoshop's alignment tools to position them precisely.

7. Paste the controls using Cmd–V (Mac) or CTRL–V (Windows).

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

   

   This technique creates a selection based on the layer's content boundaries, providing precise alignment reference points for positioning related elements.

9. In the Layers panel select the YouTube Controls folder to prepare for alignment.

10. In the Options bar, apply the following alignments to position controls authentically:

    • Click Align bottom edges to position controls at the video's bottom edge.
    • Click Align left edges to align with the video's left boundary.

11. The controls should now be perfectly aligned to the video's bottom edge. Choose Select > Deselect or hit Cmd–D (Mac) or CTRL–D (Windows) to clear the selection.

Implementing a Professional Close Button

Every modal interface requires clear exit options. We'll create a professional close button using Photoshop's built-in shapes, ensuring consistency with established UI conventions while maintaining visual hierarchy.

1. First, we need to load Photoshop's legacy shape library. Open the Shapes panel by choosing Window > Shapes.

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

3. Zoom in closer on the top-left corner of the video image to work with precision.
4. In the Tools panel, locate and choose the Custom Shape tool below the other vector shape tools.
5. At the top left of the Options bar, ensure the menu is set to Shape rather than Path or Pixels to create vector-based graphics.
6. In the Options bar, click on the Fill button to configure the shape's appearance.
7. At the top of the pop-up panel, click on the Solid Color button for a clean, professional fill.
8. Navigate to the Grayscale folder and choose black (the last color) for maximum contrast against light backgrounds.
9. Now we'll select our shape. Towards the right side of the Options bar, click the Shape icon/menu (located next to Align Edges).
10. In the pop-up panel, navigate into Legacy Shapes and More > All Legacy Default Shapes > Web to access web-specific UI elements.

11. The Add button appears as a + inside a circle. When rotated 45 degrees, this transforms into an X, creating the universal close button symbol that users immediately recognize.

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

    

12. Position the cursor at the top-left corner of the video image and click once to place the shape.

    

13. In the dialog that appears, configure the following settings for optimal button size:

    • Set both Width and Height to 50 px for adequate touch target size
    • Check on From Center for precise positioning
    • Click OK to create the shape
14. Hit Cmd–T (Mac) or CTRL–T (Windows) to enter transform mode.
15. In the Options bar, locate the Rotate field to the right of H: 100%, and set it to 45º to transform the plus into an X.
16. Hit Return (Mac) or Enter (Windows) twice to apply the transformation.
17. In the Layers panel, rename the Shape 1 layer to close X for clear layer identification.
18. Select the video pop-up folder in the Layers panel to deselect individual elements and preview the button clearly.
19. Currently, the icon appears transparent. We need a solid white background for proper contrast and professional appearance. Choose the Ellipse tool to create this background.
20. Click once at the center of the close button to position the background element.

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

    Making the background one pixel smaller than the icon ensures clean visual boundaries without unsightly overhang.

22. Click OK to create the background circle.
23. In the Options bar, click the Fill color button to set the background color.
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, rename Ellipse 1 to button bg for clarity.
26. Drag the close X layer above the button bg layer to ensure proper stacking order.
27. Select both the close X and button bg layers by Shift–clicking on them in the Layers panel.
28. Choose the Move tool to access alignment options.

29. In the Options bar, apply precise alignment:

    • Click the Align vertical centers button for vertical centering
    • Click the Align horizontal centers button for horizontal centering

30. While working in the Options bar, verify these settings for optimal workflow control:

    • Auto-Select should NOT be checked to prevent accidental layer switching

    • The adjacent menu should be set to Layer for precise selection control

31. Zoom out to view the complete page layout and assess the overall composition.
32. In the Layers panel, collapse the video pop-up folder to organize your workspace.

33. Test the overlay's effectiveness by toggling visibility. Click the eye icon next to the video pop-up folder to see the before/after effect.

Mastering Layer Comps for Professional Presentations

While manual layer visibility toggling works for quick reviews, professional client presentations and development handoffs require more sophisticated organization. Layer Comps provide this functionality, allowing you to save and instantly switch between multiple design states while maintaining perfect consistency.

1. In the Layers panel, ensure the video pop-up folder is hidden to establish our baseline state.
2. Hit Cmd–S (Mac) or CTRL–S (Windows) to save your progress before creating Layer Comps.
3. Go to Window > Layer Comps to open this essential presentation tool.
4. We'll first save the normal page state without any overlays. At the bottom of the Layer Comps panel, click the Create New Layer Comp button .

5. Name it normal and ensure all the Apply to Layers options are checked.

   Layer Comps capture specific layer attributes including visibility, position, and layer styles, enabling rapid switching between design variations within a single file. This approach is invaluable for client presentations, as it demonstrates interaction flows without requiring separate files. Note that certain changes like text content, fill colors, and stroke colors cannot be saved in Layer Comps—these are considered content modifications rather than state changes.

6. Click OK to create your first Layer Comp.
7. Now we'll create the overlay state. In the Layers panel, show the video pop-up folder by clicking its eye icon .
8. At the bottom of the Layer Comps panel, click the Create New Layer Comp button again.
9. Name it video pop-up and verify all options are checked for comprehensive state saving.
10. Click OK to complete the second Layer Comp.

11. Navigate between your Layer Comps using these methods:

    • Click the Layer Comp icon to the left of any Layer Comp name (clicking the name itself doesn't activate the comp)
    • Use the Previous or Next arrows at the bottom of the Layer Comps panel for sequential navigation

12. Before proceeding, ensure you're viewing the normal Layer Comp to establish the correct baseline.

Building Additional Interactive States

Modern web interfaces require multiple interaction states to fully communicate user experience concepts. We'll add a hover state demonstration to show how users interact with category elements—a crucial component for any content-driven interface.

1. Let's create a hover state for the category selection interface. In the file, scroll down to locate the Rate What You Ate section.
2. Ctrl–click (Mac) or Right–click (Windows) on the Appetizers icon's white circle to access context-sensitive options.
3. In the context menu that appears, under Category-Appetizers choose Ellipse to select the background shape.
4. In the Layers panel, note that Category-Appetizers contains the complete icon system: icon, ellipse background, and text label. For cohesive hover effects, we'll apply styling to the entire group rather than individual elements.
5. Double–click in the empty space to the right of Category-Appetizers to open Layer Style options.
6. The Layer Style window opens. On the left, click directly on the words Color Overlay to both enable and select this effect. Clicking just the checkbox won't display the configuration options.
7. Set Blend Mode to Normal for standard color replacement.
8. To the right of Blend Mode, click the Color swatch to choose your brand color.
9. Set the color to the iTastify brand red, #e24637 for consistent brand application.

10. Click OK twice to apply the color overlay and close all dialogs.

    This layer style modification represents exactly the type of interactive state change that's essential for modern web interfaces—providing clear visual feedback when users hover over interactive elements.

11. In the Layer Comps panel, notice that the Layer Comp icon indicates you're currently viewing the Last Document State—this represents unsaved changes.

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

    Notice that the red color overlay isn't present in the normal state—exactly as intended for proper state separation.

13. Click the Layer Comp icon to the left of video pop-up to verify state isolation.

    The hover styling hasn't affected this state either, demonstrating proper Layer Comp isolation.

14. Return to the Last Document State by clicking its Layer Comp icon to save our new state.

15. At the bottom of the Layer Comps panel, click the Create New Layer Comp button to preserve this state.

16. Name it category hover and ensure all options are checked for complete state capture.

17. Click OK to finalize this Layer Comp.

18. Test your Layer Comp system by viewing each state (normal, video pop-up, and category hover) to confirm that the red hover effect only appears in the category hover comp. This precise control demonstrates the power of Layer Comps for maintaining clean, separated interaction states.

Managing Global Changes Across Layer Comps

Real-world projects often require modifications that should apply universally across all design states. Understanding how to implement these global changes while maintaining your carefully crafted Layer Comps is essential for efficient design iteration.

1. Ensure you are viewing the category hover Layer Comp to start from a known state.

2. Let's make a structural change that should appear in all states. Cmd–click (Mac) or CTRL–click (Windows) on the Rate What You Ate heading to select it directly.

3. Drag the heading down slightly to simulate a layout adjustment request from your client or design team.

4. In the Layer Comps panel, switch between your saved states and observe how this positional change only appears in the category hover comp. The other comps retain their original heading position because Layer Comps preserve position data.