Photoshop Project: Website Mock-up

 Email this information to yourself or a friend

 Remind me of this course at a later date

Official Program Description

Photoshop is traditionally taught by examining the tools, features, and capabilities one at a time. Classes and manuals are full of valuable information. What’s missing is an exploration of the workflow and best practices; that is: putting it all together to achieve a project goal.

Photoshop Project: Website Mock-up is a holistic approach to learning Photoshop. Yes, you will examine many tools, features, and capabilities but you will examine them in the process of completing a project: from a blank canvas to wireframe and finally to a pixel-perfect website mockup. You will explore how to easily create alternate mock-ups for presenting design options and how to optimize images directly from your file using slices. In addition, this project-based class will examine a best-practices workflow--so you learn the application the way experienced practitioners actually use the application

Who Should Attend

The workshop is appropriate for beginning and intermediate level Photoshop users.

Expected Outcomes

Upon completion of this course, you will understand everything you need to know to create a website mock-up.


You should have at least a beginning knowledge of Photoshop.

Attend and You Will Learn

Understanding Resolution

Setting Photoshop Preferences for a Web Mock-up

Using Color

  • Understanding the RGB color space
  • Exploring the Color Picker
  • Creating a color palette

Creating a Wireframe for an App

Understanding and Using the Layer’s Panel

Using Adjustment Layers for Better Looking Photos

Image Optimization

  • Raster vs. vector graphics
  • File formats for the web
  • Best methods for saving images for web use

Understanding the Ever-changing World of Web Typography

Exploring the Power of Smart Objects

Building a Pixel-perfect Comp

  • Setting up grids and guides
  • Importing a color palette
  • Using gradient fills
  • Understanding character and paragraph formatting
  • Understanding how to create and use character and paragraph styles
  • Creating masks for creative effects
  • Placing and using raster and vector smart objects
  • Creating, saving, and appling layer styles
  • Understanding the shape tool
  • Creating and applying layer comps

Slices, Selections, and Sprites

  • Understanding, creating, and optimizing slices
  • Exploring the many selection tools
  • Understanding and using image sprites

Applies Towards the Following Certificate(s)


  Photoshop Project: Website Mock-up
  2015 - TTS - May - Jun 2015   Status:  Available
In-Class:   Tue, Wed 9:00AM - 4:30PM
9 Jun 2015 to 10 Jun 2015
Class Schedule: 2 Sessions
Contact Hours: 12.0
Course Fee(s):
Registration Fee non-credit    $449.00
Gov't & Non-Profit Registration Fee non-credit    $349.00
Potential Discount(s):
  1.20 CEUs
Location:   On Campus