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

In this class you’ll get up and running quickly so you can start using Photoshop right away to design the UI (user interface) and UX (user experience) of websites and apps.

You’ll learn to design web layouts for mobile, tablet, and desktop (or screens for apps) using text, graphics, styles, and more. With artboards and guides, you can design on popular grid systems (like Bootstrap), making it easier to design responsive webpages.

Learn how to use Photoshop to create and optimize graphics for web, apps, etc. We focus on modern techniques (including new features added to Photoshop CC) that are specifically relavent to UI and UX designers. You’ll design on grids, extract image assets, create hi-res 2x graphics, and so much more.

Small Classes
Computer Provided
Book included
Free Retake

$650
12 Hours
Mac or PC
594 Broadway, NYC or live online

FAQ •
Discounts
Discounts

Shorter courses such as this are already affordably priced and are not eligible for discounts.

Payment Plan

This course is not eligible for a payment plan, which is only available for programs priced at $2,495 and above. Read our Payment Plan FAQ for more details.

Take this course as part of a certificate program and save:
• Policies

Corporate training available

Take this class as part of a certificate program and save:

Class Overview Video

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

View full syllabus

Photoshop for Web Design & UI Class Syllabus

Section 1

Creating New Files & Designing on a Grid System

Topics

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

Topics

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

Adding Page Navigation & Editing Smart Objects

Topics

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

Topics

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

Adapting a Webpage Layout for Tablets

Topics

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

Topics

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

Optimizing for Web: JPEGs & HiDPI/Retina Graphics

Topics

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

Topics

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

Topics

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

Topics

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

Topics

Creating, Applying, & Editing Paragraph Styles

Masking Photos & Visual Effects

Topics

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

Topics

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

Create mockups for mobile, tablet, & desktop websites.
Learn how grids help you structure your design & make it easier for developers to code the site.
Turn wireframes into a final design.

Frequently Asked Questions

Are there prerequisites for this course?

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 or Photoshop Bootcamp class.
Familiarity with how webpages are coded with HTML and CSS is helpful, but not required.

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.

Do you offer discounts or a payment plan for this course?

Discounts

Shorter courses such as this are already affordably priced and are not eligible for discounts.

Payment Plan

This course is not eligible for a payment plan, which is only available for programs priced at $2,495 and above. Read our Payment Plan FAQ for more details.

Take this course as part of a certificate program and save:

Can I take this course online (remote learning)?

You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).

How does attending “live online” work?

Students can attend this training remotely through screen sharing software (we use Zoom).
Participants can hear the instruction, ask questions, and even share their screen with the instructor.
For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!

Photoshop for Web Design & UI

Create & Optimize Graphics for Websites & UI (User Interface)

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