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

Photoshop for Web Design & UI in NYC or Live Online

Design & Create Graphics for the Web

Learn to use Photoshop to create and optimize graphics specifically for web and user interface (UI) design. We'll cover Photoshop's web design features: artboards, grids, image saving options, and more. You'll be able to turn wireframes into visually stunning, responsive UI designs that are sure to engage your audience.

This course focuses on generating content for web and UI and does not cover image retouching or color correction. Students interested in those topics should explore our many Photoshop options, such as Photoshop Bootcamp and Photoshop in a Day. For more information on topics covered in class, see the syllabus below.

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 the Skills Guarantee™

Hands-on Training in small groups

Work on projects proven to boost retention
Workbook Included

Students get a custom workbook with step-by-step instructions.
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 course materials and gain additional practice
Setup Assistance Provided

Prior to the course, we will help you get set up properly with the software you need.

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

Eugene was great! Knowledgeable, professional and concise. A great trainer who has a gift for relevant imparting techniques, tips and correlating personal experience to the learning material. Passionate about this class. Thank you.

E.G. attended Photoshop for Web Design & UI

Eugene is a very good teacher and a genuinely nice guy. His enthusiasm to teach Photoshop made this class great. He took the time to discuss things with everyone and would recommend courses for everyone depending on their goals. This Web Design Class was by far the best class I have taken. Thank you to NYIM and Eugene.

A.R. attended Photoshop for Web Design & UI

2 Students gave Photoshop for Web Design & UI a 5-star rating

Full Course Syllabus

Download PDF Outline

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

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

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

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

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

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

Frequently Asked Questions

Does this course require any prior knowledge or experience?

Students must be comfortable using a computer. No other prior knowledge is required.
Do I need to bring a computer?

No. We provide a computer with the necessary software for each attendee. Choose a Mac or a PC during the checkout process.
Are discounts available for this course?

No. This course is not eligible for any discounts.

We offer discounts for packages of classes, including our Excel Bootcamp, SQL Bootcamp, Data Analytics, and PowerPoint Bootcamp.

We also provide discounts for ten or more classes purchased together. Please reach out for more information on our voucher programs.
Does this course come with a book?

Yes. This course includes a complimentary book or manual at no additional cost.
What if I need to retake this course? May I retake it for free?

Yes. You may retake this course for free once within six months, provided that the class is running with an available seat. For more information, visit our policies page.
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!
What if I don’t have the software on my computer?

Upon registration, please email contact@nyimtraining.com and we will help you get set up with the software or anything else needed for an optimal training experience.

Corporate & Onsite Photoshop for Web Training

For over two decades, NYIM Training has created and delivered the highest-rated corporate training programs in New York. We have extensive experience developing curriculum for a variety of training sessions, both onsite and in our Midtown offices. Our program can be completely customized to suit your training needs.

Onsite at Your Location
- We’ll come to your offices anywhere in the USA
- Customize the curriculum or choose from existing courses
- Flexible scheduling
Private Training at NYIM
- Central location in Midtown Manhattan
- Modern computer lab—students arrive hands-free
- Customize your curriculum or choose from existing courses
- Catering options available
Group Class Vouchers
- Purchase discounted vouchers to public classes
- Frequently scheduled courses
- Employees choose their schedule
- Custom learning management system for large purchases

Get a Free Quote

contact@nyimtraining.com 212 • 658 • 1918

Photoshop for the Web & UI

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

Learn how to use Photoshop to create and optimize graphics for web and user interface design. This course does not cover image retouching, color correction, or print design. We hone in UI design, helping you turn wireframes into incredible designs for the web.

You’ll learn modern techniques, including new features added to Photoshop CC. By the end of this course, you'll be able to turn wireframes into completed designs. We'll help you design responsive website layouts optimized for mobile, tablet, and desktop screens of all sizes. We'll design on grids, extract image assets, create hi-res 2x graphics, and more.

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

This course requires a working knowledge of Photoshop. If you are new to Photoshop, check out our Photoshop Bootcamp or Photoshop in a Day.

Rated the Best Photoshop Courses in New York City

Practical and hands-on training focused on real-world applications of Photoshop
Engaging and interactive instructors
Proprietary course manual and shortcut sheets
Small class sizes for personalized attention

What You'll Learn

Learn the Skills Guarantee™

Hands-on Training in small groups

Workbook Included

Learn from industry experts with teaching experience

Retake the course for free within one year

Setup Assistance Provided

Full Course Syllabus

Creating New Files & Designing on a Grid System

Adding Photos & Editing the Layout

Adding Page Navigation & Editing Smart Objects

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

Optimizing for Web: PNG vs. GIF

Extracting Assets from a Design

Designing in 2x Photoshop Files

Paragraph Styles

Masking Photos & Visual Effects

Optimizing Graphics in a 2x Design

Schedule & Enrollment

This Course is Available Live Online

See What Students Are Saying About Live Online

Frequently Asked Questions

Does this course require any prior knowledge or experience?

Do I need to bring a computer?

Are discounts available for this course?

Does this course come with a book?

What if I need to retake this course? May I retake it for free?

Can I take this course online (remote learning)?

How does attending “live online” work?

What if I don’t have the software on my computer?

Onsite at Your Location

Private Training at NYIM

Group Class Vouchers

Get a Free Quote

Photoshop for the Web & UI

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

Rated the Best Photoshop Courses in New York City

Related Classes

Photoshop in a Day

Photoshop Private Training

Adobe Photoshop Bootcamp

Sketch in a Day