Classes available in-person (strict social distancing) or live online with an extended free retake period. See details.

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

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 (using the latest Photoshop features) 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.

This course has a prerequisite

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.

Learn the Skills Guarantee™

Hands-on training in small groups

Work on projects proven to boost retention
Time-tested curriculum and supporting materials

Refined over many cohorts for an optimal learning experience
Learn from industry experts with teaching experience

Experienced educators who are driven to help you succeed
Retake the course for free within one year

Refresh the materials and gain additional practice

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

The teaching method at Noble Desktop is perfect and the classes provide you with infinite knowledge that makes you eager to take everything they offer. I love Noble!
—Ivonne Ackerman

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

Learn with Hands-on Projects

Learn practical skills by working on real projects with instructor guidance and lectures to strengthen and improve your skill.

Course Syllabus

Download Syllabus PDF

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

Schedule & Enrollment: Photoshop for Web Design & UI

$650
12 Hours
NYC or Live Online
Full setup assistance provided

Discounts

Discounts

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

Payment Plans

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.
• Policies

Filter

January 16–23

Saturdays, 10–5pm
- Mon
- Tue
- Wed
- Thu
- Fri
- Sat
- Sun
Enroll in this section
May 18–27

Tuesdays & Thursdays, 6–9pm
- Mon
- Tue
- Wed
- Thu
- Fri
- Sat
- Sun
Enroll in this section

This Course is Available Live Online

You can attend this training live online at the scheduled time the course is offered (New York, Eastern Time) through screen-sharing software Zoom (free for you).
Our live online training is interactive and hands-on, just like our in-person classes. There are no extra fees and we’ll work with you to ensure your setup is perfect

Classes are activity-based and taught by a live instructor.
You can hear the instruction, ask questions, and share your screen—all in real-time.
Retake the course for free (in-person or live online) within one year.

See What Students Are Saying About Live Online

“Overall experience on Zoom was maybe even better than in IRL classroom because the instruction takes place right on your own screen, with less distraction. Great overall experience.”
“Given the fact that we had to do this entire class remotely due to Covid-19, I didn’t have very high expectations it would run so smoothly. However, I don’t think it could’ve gone any better. Not only do I feel very comfortable with the program now, but I’m actually excited to use it!”
“This was the first online class I’ve taken with ND and it was a great experience. Looking forward to the other classes I’ve signed up for!”

Learn more about how our live online training works

Online Training Demo

1-Minute Overview

Frequently Asked Questions

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.
Does this course require any prior knowledge or experience?

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 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:
- Visual Design Certificate
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!

Corporate & Onsite Photoshop Training

Purchase group class vouchers at a discount for our regularly-scheduled group classes in NYC, or create a custom training program at your offices.

Private Training

Available onsite at your location
Modern computer labs available at our offices
Customize or choose from our existing courses
Free instructor consultations to finalize content

Group Class Vouchers

Send employees to our group classes
Extensive offerings and flexible scheduling
Simple billing and logistics
Computers and training resources provided

Learn to Design for Web & Mobile Using Photoshop

This is the ultimate Photoshop for web/UI course. In addition to learning key features and techniques, we’ll cover important workflow tips and tricks. Learn to efficiently create professional designs that are easier for developers to code!

Real-World Class Exercises

“I’d approached this class with an open mind because while I'm a “Photoshop veteran” I hadn't used it for website wireframing. Simply put the Photoshop for Web Design & UI course material is directly in line with the subject. There was much that I learned that I wished I had known about before for my own projects. I found the course’s “real world” scenarios/examples to be very educational. The course's instructor Ethan was masterful.”
Darryl Kaalund
Custom Workbook Included

Learn Photoshop by first by watching a short demo, then by practicing on web and mobile designs and by exporting web-optimized images. Take the custom workbook home and recreate the class projects anytime after the class.
Learn to Design & Optimize Images for the Web

“Don’t assume that because you know Photoshop you know how to design for the web. This class goes through various exercises that show the processes on design and optimization for exporting web-ready images. As always, all of Noble’s instructors are great, know their stuff and are always helpful with troubleshooting and providing resources to take with you.”
German Hernandez, Multimedia Designer

Highly Reviewed by Our Alumni

From our hands-on training style to world-class instructors and proprietary curriculum, we deliver a learning experience our alumni can be proud of.

7 Students Rated Our Photoshop for Web Design & UI 5 Stars

I really enjoyed the class. I didn’t know that you could change the name of a layer and save a photo for web. I’m used to working in Illustrator. After the class, I felt a lot more comfortable manipulating objects, layers and effects in Photoshop. Thinking “responsively” or in terms of a 12-column Bootstrap layout is great, but the techniques we learned to resize and manipulate objects and layers are what made the class invaluable.

Elizabeth Funk, Women in Sovereign Entities

Very comprehensive class to learn the latest functionality in Photoshop for web developers and designers.

Scott Mitzner

I’m fairly new to web design and found that Photoshop for Web Design & UI was the perfect way for me to start.

MaryRose Devine

The Photoshop for Web Design & UI class was great! Ethan was a great instructor and thoroughly explained the steps. I finished the class feeling confident and eager to apply what I learned to my work.

Victoria Greiss

Fantastic teacher and course! Really gets into tips and tricks to wow even the most seasoned Photoshop users.

Trudy Appling

I've been using Photoshop for many years. This class presented several methods and tricks that I didn't know existed.

Dawn Cavalieri

Relaxing environment, welcoming atmosphere. Bagels every morning for students! Everyone's friendly.

Paul

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

This course has a prerequisite

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

Learn the Skills Guarantee™

Hands-on training in small groups

Time-tested curriculum and supporting materials

Learn from industry experts with teaching experience

Retake the course for free within one year

What You’ll Learn

Learn with Hands-on Projects

Course Syllabus

Section 1

Creating New Files & Designing on a Grid System

Adding Photos & Editing the Layout

Adding Page Navigation & Editing Smart Objects

Section 2

Text Styling & Adjusting Images Behind Text

Adapting a Webpage Layout for Tablets

Adapting a Webpage Layout for Mobile Phones

Optimizing for Web: JPEGs & HiDPI/Retina Graphics

Section 3

Optimizing for Web: PNG vs. GIF

Extracting Assets from a Design

Designing in 2x Photoshop Files

Section 4

Paragraph Styles

Masking Photos & Visual Effects

Optimizing Graphics in a 2x Design

Schedule & Enrollment: Photoshop for Web Design & UI

Discounts

Payment Plans

January 16–23

Saturdays, 10–5pm

May 18–27

Tuesdays & Thursdays, 6–9pm

May 18–27

Tuesdays & Thursdays, 6–9pm

January 16–23

Saturdays, 10–5pm

This Course is Available Live Online

See What Students Are Saying About Live Online

Online Training Demo

Frequently Asked Questions

Do I need to bring anything to the class?

Does this course require any prior knowledge or experience?

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

Discounts

Payment Plan

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

Can I take this course online (remote learning)?

How does attending “live online” work?

Corporate & Onsite Photoshop Training

Private Training

Group Class Vouchers

Learn to Design for Web & Mobile Using Photoshop

Real-World Class Exercises

Custom Workbook Included

Learn to Design & Optimize Images for the Web

Highly Reviewed by Our Alumni

7 Students Rated Our Photoshop for Web Design & UI 5 Stars

Compare Photoshop for Web Design & UI to Similar Courses

UX & UI Design Certificate

Web Design Certificate

Sketch Bootcamp

Visual Design Certificate