# Photoshop for Web Design & UI

Canonical URL: <https://www.creativelive.com/classes/photoshop-web-ui>

## Overview

### Learn Photoshop for UI and UX Design: Create and Optimize Graphics for Websites, Apps, and More

**Note:** Newer design applications such as [Adobe XD](/topics/adobe-xd-classes-nyc) and [Sketch](/topics/sketch-classes-nyc) are now commonly used for designing websites and apps. These tools include features specifically built for Web Designers, App Designers, and UX/UI Designers. If your focus is on designing digital products and experiences, you may also want to explore our [Adobe XD](/topics/adobe-xd-classes-nyc) and [Sketch](/topics/sketch-classes-nyc) classes.

In this class, you’ll learn how to design web layouts for mobile, tablet, desktop, and app screens using text, graphics, styles, and other design elements. Using artboards and guides, you’ll work with popular grid systems such as Bootstrap, making it easier to design responsive web pages.

You’ll also learn how to create and optimize graphics using Photoshop for websites, apps, and digital interfaces. The course focuses on modern workflows and features relevant to UI and UX Designers. Topics include designing on grids, extracting image assets, creating high-resolution 2x graphics, and preparing visual elements for development.

## What you'll learn

- Use Photoshop to create and optimize graphics for web and user interface design
- Create wireframes and turn them into finished designs that are optimized for mobile, tablet, and desktop screens
- Learn how to design on grids, extract image assets, create hi‑res 2x graphics, and more

## Prerequisites

Students should be comfortable with the basics of Photoshop. If you’re comfortable using another Adobe app (such as InDesign, Illustrator, etc.) but haven’t used Photoshop you will probably be fine. 

If you have never used Photoshop or another Adobe app, consider taking either our [Photoshop in a Day](/classes/photoshop-1day) or [Photoshop Bootcamp](/classes/photoshop-beginner) class.

Familiarity with how webpages are coded with HTML and CSS is helpful, but not required.

## Curriculum

### Section 1

#### Creating New Files & Designing on a Grid System

- Setting Preferences & Workspace
- Creating a New Document
- Creating a Grid
- Designing with Bootstrap’s Grid
- Viewing at Accurate Size
- Creating Colored Backgrounds for Text
- Importing Text

#### Adding Photos & Editing the Layout

- Changing the Page’s Background Color
- Importing Photos
- Changing Canvas Size
- Grouping Layers

#### Adding Page Navigation & Editing Smart Objects

- Creating a Navbar
- Adding a Stroke
- Changing Opacity
- Importing Vector Graphics from Adobe Illustrator
- Editing a Vector-Based Smart Object in Illustrator
- Editing a Pixel-Based Smart Object in Photoshop
- Content-Aware Fill
- Swapping Out Graphics

### Section 2

#### Text Styling & Adjusting Images Behind Text

- Adding a Drop Shadow to Type
- Darkening a Background Photo to Make Text More Legible

#### Adapting a Webpage Layout for Tablets

- Copying the Desktop Design into the Tablet File
- Adjusting Elements to Fit the New Dimensions
- Cropping the Canvas

#### Adapting a Webpage Layout for Mobile Phones

- Copying the Tablet Design into the Mobile Phone File
- Adjusting Elements to Fit the New Dimensions

#### Optimizing for Web: JPEGs & HiDPI/Retina Graphics

- Using Save for Web
- Optimizing Photos for Low-Res Screens
- Optimizing Photos for Hi-Res (HiDPI/Retina) Screens
- Compression Settings for 1x & 2x Versions
- Saving File Size When Optimizing 2x Graphics

### Section 3

#### Optimizing for Web: PNG Vs. GIF

- 8-Bit File Formats: GIF vs. PNG-8
- PNG-24: Save For Web’s Only Choice for Partial Transparency
- Properly Optimizing Colors: Limited Colors vs. Gradients vs. Black & White
- Making a 1x from a 2x Graphic

#### Extracting Assets from a Design

- Pros & Cons of the Extract Assets Panel
- Creating PNG, GIF, & JPEG Files from a Design
- Extracting PNG-8 with Partial-Transparency
- The Proper Way to Extract 1x and 2x Graphics
- Why Photoshop Sometimes Exports Low-Res JPEGs & How to Fix It

#### Designing in 2x Photoshop Files

- Designing at 2x versus 1x
- Turning a Wireframe into a Real Design
- Setting Anti-Aliasing & Hyphenation
- Using Clipping Masks to Crop an Image
- Aligning to a Selection

### Section 4

#### Paragraph Styles

- Creating, Applying, & Editing Paragraph Styles

#### Masking Photos & Visual Effects

- Importing & Cropping Photos (Masking)
- Colorizing Icons (Vector Smart Objects) in Photoshop
- Adding Effects Such as Stroke, Inner Shadow, & Gradient Overlay
- Copying Effects to Other Layers
- Fill Opacity

#### Optimizing Graphics in a 2x Design

- How Extract Assets in a 2x File Differs from a 1x File
- Slicing
- Layer Based Slices
- Custom Sized Slices

## FAQ

### Do I need to bring anything to the class?

No. We provide computers (Mac or PC) with Photoshop installed. Choose your operating system at checkout.

## Pricing

**Tuition:** $650