Unit time: 3 hours

Intro to Photoshop

Photoshop has long been an industry-standard tool for professional web designers. Unfortunately, the learning curve is quite steep, since it's a powerful program with a range of functions suited for other purposes — like image and video editing. In this unit, we've curated videos and put together some simple practice exercises to help you get up to speed with the basics of Photoshop in a web design context.

Unlike other units in this course, you won't share any of the exercises you work on with your mentor. They're intended as solo practice exercises to help you get acquainted with the software. By the end of the unit, you will be familiar enough with Photoshop to complete all the projects in Design 101.

Learning Goals

  • Know when to use Photoshop
  • Set up and manage layers in Photoshop
  • Know how to style shapes & text
  • Use the guide and alignment tools to create ordered layouts
  • Use simple shortcuts to simplify the Photoshop workflow


Let's get started with an intro to Photoshop and why it’s useful, and then get acquainted with the basics of layers.

Intro to Photoshop Workspace

Go to video

Organize with layers & layer groups

Go to video

Best practices for workflow

Go to video

Styles, Shapes, & Text

Now, we'll learn how to create & style different shapes and text on the canvas.

Apply styles to text

Go to video

Draw & align shapes

Go to video

Edit rounded rectangles

Go to video

Understanding layer styles

Go to video

Styles, Shapes, & Text: Exercise

Create a new Photoshop document, and set up your first canvas (iPhone size: 640x960). Recreate this simple login screen using what you've learned about layers, text, and shape.


Crucial for any web or mobile design, let's look at layout, alignment, and distribution tools.

Align objects with guides

Go to video

Align objects with layers

Go to video

Unit Mini-Project

  • Create a 960x1100 canvas on Photoshop.
  • Recreate this webpage mockup in Photoshop using the techniques you’ve learned about in this module. You can find placeholder images for the background on Unsplash.