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
- Use GuideGuide Plugin for 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.
Typography
- 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