In this course, you'll learn to use Photoshop to create and optimize graphics specifically for web and user interface design (without spending time on image retouching or color correction).

We'll cover Photoshop's web design features: artboards, grids, and image saving options, for example. You'll be able to turn wireframes into visually stunning, responsive UI designs.

This course is located at our design school, Noble Desktop, at 185 Madison Avenue in Midtown.

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.

Schedule & Enrollment: Photoshop for Web Design & UI

12 Hours
$650

NYC or Live Online
Free retake
Expert instructors
Small classes

This course is offered by our affiliate school, Noble Desktop.
View upcoming course dates and register at nobledesktop.com.

Tuition

As one of our smaller courses, tuition for this course is due in full before the start date. The best way to save on this course is to take it as part of a certificate program.

Full Tuition

$650
Due before the class starts

What’s Included

12 hours of hands-on instruction
Live, project-based training from experts
Retake for free within 1 year
Verified digital certificate of completion

What’s included with my tuition?

A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement
Expert instructors who are industry professionals and experienced educators that are driven to help you succeed
Top-notch curricula that have been tried and tested over many cohorts and are consistently improved for an optimal learning experience
Supplemental materials to assist both during and after the course - please refer to specific course pages to see what supplemental materials are offered
A 1-year free retake policy which allows students to retake any part of the course or program for free to refresh the materials and gain additional practice
A certificate of completion to verify your accomplishment

Are there any additional fees or expenses?

There are no extra fees or taxes for our courses. The price you see on this page is the maximum you’ll pay us.

However, if you plan to take the course live online, you may need to obtain required software. We’ll help you get set up with a free trial of paid software prior to the class. Most of our coding classes utilize freely-available open-source software. For most of our design and motion graphics courses, we will help you get set up with a free trial of Adobe Creative Cloud. If you attend the course in-person, we will have a computer already set up for you with all of the required software for no additional cost.

Do you offer any discounts for this course?

We don’t currently offer discounts as we do our best to affordably prices our courses.

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

Web Design with WordPress & PHP Certificate

Price: $5,000 | Hours: 0 hours

Learn the Skills Guarantee™

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

Hands-on, personalized training

Learn with real-world projects

Several students, sitting at computers, looking at the front of the classroom

Cutting edge curriculum

Step-by-step instruction to boost retention

The Career Centers instructors are highly skilled communicators who really know their craft. They are wonderful about explaining and re-explaining when necessary and I never felt rushed or foolish for asking a question.
—Diane Speros

Learn from industry experts

Gain industry knowledge from professionals

Free retake

Retake the course for free within one year

Interactive Training

Learn in Real-Time with Small Class Sizes

Attend this course in-person in NYC or Live Online via Zoom. Engage with expert instructors, ask questions, and get feedback on your exercises and projects.

Unlike other providers, these are not mass open-enrollment classes. At NYC Career Centers, you’ll learn in small groups (typically 8-15 students) and receive personalized attention.

On Campus in NYC 185 Madison Avenue, NYC

Get face-to-face interaction with an instructor and other students when you learn at our NYC campus. Courses are hands-on with a computer and software provided.

Live, interactive class
Experienced instructor in the room with you
Computer and software provided

More about our campus

Live Online Remote, from anywhere

Get the same interactivity and access to the instructor as in-person students. There are no extra fees and we’ll work with you to ensure your remote setup is perfect.

Live, interactive class
Experienced instructor teaching over Zoom
Remote setup assistance provided

More about live online training

photo of instructor leading a class in person

student taking a class live online, seated on their living room floor, leaning against a couch

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of Photoshop for Web Design & UI

Free Retake & Class Recordings

Missed a session or need a refresher? We have you covered!

Free Retake

We offer a single free retake of the class within a year.

Class Recordings

You can also access recordings of each session in your student portal within one business day of the session’s end. Recordings are available for one month after the session.

See terms and conditions.

Photoshop for Web Design & UI Curriculum

What You’ll Learn at a Glance

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

Course Syllabus

Download Syllabus PDF

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

Frequently Asked Questions

Does this course require any prior knowledge or experience?

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

Do you offer payment plans or student financing for this course?

This course does not qualify for payments plans or student financing. See our Payment Plan FAQ to find related programs that qualify.

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!
You will need your own computer and copy of any required software. If you don’t have the software, you can usually do a free trial or purchase your own license. If you need assistance, contact us at nyc@careercenters.com

What happens if I need to miss a session?

You have some options:

You can watch a recording of the session. We will provide any course materials.
If you can’t come into the classroom but can still attend remotely, we will provide you with the Zoom login information.
You can use your free retake to make up any missed class time.

Compare Photoshop for Web Design & UI to Similar Courses

Select up to two courses and tap Compare selected courses to view a side-by-side comparison of Photoshop for Web Design & UI with your selected courses.

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 that are 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 important 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 Introduction to Adobe Photoshop or Beginner to Intermediate courses.

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

Installments
	10% non-refundable deposit
$650.00	Total You Pay