Girl Develop It: Intro to Photoshop Web Design

Photo by @sophshepherd

In her Intro to Photoshop for the Web course at Girl Develop It Austin in November 2014, Sophie Shepherd shared her thoughts on creating digital mockups geared for multi-device delivery. Here are my notes from the course:

Basic Thoughts on Photoshop Web Design

  • There are a lot of ways to do the same thing in Photoshop
  • Developing your personal way of finding out how to do it is okay.
  • Become familiar with Photoshop through projects
  • Learn what the software can do and then slowly apply them to your workflow

Setting up Grids

  • Modern Photoshop version 
    • Select View > new Guide Layout… to bring up New Guide Layout dialog box.
    • In dialog box, enter your settings for your grid
  • Older versions of Photoshop 

Clipping or Shape Masking

  • Bring up Ellipse tool (U) in Photoshop
  • Hold down shift while dragging with mouse to create a perfect circle shape
  • Place photograph in a separate layer above circle shape.
  • Select Layer > Create Clipping Mask or press Command + Option + G to place image into the shape of the circle.
  • Image should be framed by circle shape.
  • To mask multiple images can be masked into one shape, select multiple layers above the target layer with the shape.


  • Create a typography box 
    • Press T to bring up the Type tool
    • Click and drag to create a type box
    • Start entering text
    • The dimensions of the box can be adjusted for improved editing.
  • Setup a baseline for typography for vertical rhythm 
    • Turn grid on by selecting View > Show > Grid
    • Select Preferences > Guides, Grid, & Slices to bring up Preferences dialog box
    • In Grid fieldset, set color to light grey
    • Select Dashed Lines for Style
    • Set Gridline Every 16 pixels

Photoshop File Organization

  • Duplicate existing Photoshop 
    • Select a Photoshop layer
    • Press ⌘ + J
    • Name layers with meaningful labels
  • Group layers in layer folders 
    • Select multple layers
    • Then press ⌘ + G
    • Name folders with meaningful labels
  • Read Photoshop Etiquette


Leave a Reply

Your email address will not be published. Required fields are marked *