# Photoshop for Web Design & UI Canonical URL: ## Overview ### Learn Photoshop for UI & UX Design: Create & Optimize Graphics for Websites, Apps, & More NOTE: Newer design apps such as [Adobe XD](/topics/adobe-xd-classes-nyc) and [Sketch](/topics/sketch-classes-nyc) are now preferred over Photoshop for designing websites, apps, etc. They offer many more features specifically made for Web Designers, App Designers, and UX/UI Designers. Please check out our [Adobe XD](/topics/adobe-xd-classes-nyc) and [Sketch](/topics/sketch-classes-nyc) classes if you want to design websites, apps, and digital experiences. In this class, you’ll learn to design web layouts for mobile, tablet, desktop, or app screens using text, graphics, styles, and more. With artboards and guides, you can design on popular grid systems (like Bootstrap), making it easier to create responsive webpages. Learn how to use Photoshop to create and optimize graphics for the web, apps, and more. We focus on modern techniques (using the latest Photoshop features) that are specifically relevant to UI and UX Designers. You’ll design on grids, extract image assets, create high-res 2x graphics, and much more. ## 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 ## Instructors ### Dan Rodney — School Director, Instructor, & Senior Course Developer Dan Rodney has been a designer and web developer for over 20 years, creating coursework and leading innovative training initiatives at Noble Desktop. He teaches courses covering Figma, HTML & CSS, Adobe Photoshop, InDesign, Illustrator, and Power BI. Dan has also been at the forefront of integrating AI into design and business workflows, spearheading Noble Desktop’s latest AI course offerings. In addition to teaching and curriculum development, he writes custom scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more) and works with automation and AI-driven tools in his free time. You can find Dan on X (Twitter), LinkedIn, Facebook, and at danrodney.com. Learn more about [Dan Rodney's](/dan-rodney) background and expertise. ### Jerron Smith — Program Director & Senior Instructor Jerron has more than 25 years of experience working with graphics and video and expert-level certifications in Adobe After Effects, Premiere Pro, Photoshop, and Illustrator along with an extensive knowledge of other animation programs like Cinema 4D, Adobe Animate, and 3DS Max. He has authored multiple books and video training series on computer graphics software such as: After Effects, Premiere Pro, Photoshop, Illustrator, and Flash (back when it was a thing). He has taught at the college level for over 20 years at schools such as NYCCT (New York City College of Technology), NYIT (The New York Institute of Technology), and FIT (The Fashion Institute of Technology). Learn more about [Jerron Smith's](/jerron-smith) background and expertise. ### Eugenio Solis de Ovando — Senior Instructor Eugenio Solis de Ovando is a Senior Instructor at Noble Desktop in New York City, specializing in graphic design, web design, and visual communication. With over 20 years of experience in the creative industry, Eugenio is passionate about helping students develop strong technical skills and a solid design foundation across print, digital, and web platforms. Eugenio teaches a wide range of courses, including Photoshop, Illustrator, InDesign, Figma, WordPress, UI Design, and Artificial Intelligence for Graphic Design. His classes are known for their clear, hands-on approach, blending technical mastery with creative exploration to help students bring their ideas to life with confidence and precision. He holds a Ph. D. in Artificial Intelligence with a specialization in Human Performance Technology, where his research focused on integrating emerging AI technologies into adult education and training. As an Adobe Certified Design Master and Licensed Private Career School Teacher in New York State, Eugenio is dedicated to delivering high-quality instruction and sharing best practices in digital design workflows. He brings real-world insights into the classroom, guiding students through professional techniques in layout design, typography, color theory, image editing, and responsive web design. Learn more about [Eugenio Solis de Ovando's](/eugenio-solis-de-ovando) background and expertise. ## 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