Girl Develop It: Intro to Photoshop Web Design
4 months ago
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.
- 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