Christopher Schmitt

designer, web developer, author, strategist, dreamer

Working with the web since 1993, Christopher Schmitt directs Heatvision.com, Inc., a small new media publishing and design firm. The author of several books, including CSS Cookbook and Photoshop in 10 Simple Steps or Less, Schmitt is also a contributor to many web development magazines.

LATEST ENTRY

Girl Develop It: Intro to Photoshop Web Design

5 days ago
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.

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

Resources

JavaScript ELSEWHERE

Links of Interest

Internet Trails

Publications

Popular Blog Posts


Featured Publication

Designing Web & Mobile Graphics

by Christopher Schmitt

New Riders, 2013