Design and create brilliant visual designs and user interface elements

This course will teach you all the main options that are required for building graphics and interfaces for online use. Web designers will love this course because it allows them to create graphics and export them for later use in their web design software. Marketeers will love this course because it allows them to create and handle simple banners, ads and promotions to put on their website, social media pages or use as an email signature.

This is the ultimate Photoshop course for visual web and user interface designers. In addition to learning key features and techniques, we’ll cover important workflow techniques and show you how to efficiently create professional designs that are easy for developers to code!

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Free course refreshers

Professional training environment with Macs and PCs

Book a Course

Course outline - WHAT you’ll learn

Photoshop Interface

  • Interface Overview
  • Arranging Panels
  • Saving a Custom Workspace
  • Open, View and Arrange Documents
  • Zooming In and Out
  • Arranging Documents
  • Setting up a new file
  • Setting up a grid system for wireframes
  • Using guides

Image Basics

  • Making Basic Selections
  • Marquee Tools
  • Modifying Selections
  • Basic Image Adjustments
  • Brightness and Contrast
  • Hue and Saturation
  • Cropping an image
  • Changing image size

Using colour

  • Understanding web-safe colours
  • Using RGB and Hex colours
  • Saving swatches
  • Using Kuler

Working with layers

  • Creating layers
  • Moving / copying / deleting / renaming layers
  • Clipping layers
  • Using Layer Groups
  • Using Solid Colour and Gradient layers
  • Aligning layers
  • Using layer filters

Layer effects

  • Using layer effects
  • Duplicating layer effects
  • Properly scaling layer effects
  • Saving Style presets
  • Layer mask basics

Working with text

  • Creating point type
  • Creating area type
  • Setting paragraph options
  • Setting character options
  • Using styles to automate formatting
  • Loading and redefining styles

Working with objects

  • Creating basic shapes
  • Understanding the types of objects
  • Editing vector shapes
  • Applying vector layer formatting
  • Defining a custom shape

Working with Smart Objects

  • Understanding the Smart Object workflow
  • Creating linked Smart Objects
  • Creating embedded Smart Objects
  • Applying Smart Filters


  • Using the Slice tool
  • Naming and managing slices
  • Using Adobe Generator for automatic output
  • Using the Save for Web command
  • Understanding the different file formats
  • Where to go from here

Related Courses

Responsive HTML Email

Create optimised HTML emails that work on all devices

Building Responsive Websites

Code, Build and Manage Websites

Muse Essentials

Build, edit and update responsive websites using Muse

Adobe Animate Essentials

Create Web Banners, Animation & Interactivity using Animate

  • Contact Us