Introduction to UI Design and why it matters
  • What this course will cover?
  • Why UI Design Matters?
Setting Up Photoshop for UI Design
  • Photoshop Preferences for UI Design & better performance - Updated
  • Color Proof Settings - Updated
  • Color Profile Settings for UI Design- Updated
  • Creating Custom Shortcuts for Photoshop - Updated
  • Keyboard Shortcut problems on MAC OS → Student Request Lecture
  • Photoshop Workspace(Panels) setup for UI Design → Updated
  • Photoshop Settings for UI Design
  • Which Monitor is best for UI Designers
Basics of Photoshop for Beginners
  • How Photoshop Interface Works
  • Customizing Photoshop Toolbar→ Student Request Lecture
  • New Document Setup for UI Design
  • What are artboards and how to use them?
  • How layers works and Basics of Layer panel controls
  • Layers Panel → Filtering and finding layers
  • Type Tool
  • Character Panel
  • Paragraph Panel
  • Shape Tool for UI Design (Combine and Subtract Shapes)
  • How to use Pen Tool for UI Design
  • Student Request: How to use pen tool in Icon Design?
  • Using Selections in different ways (Selection + Lasso Tool)
  • Alignments
  • Using Clipping Masks in UI Design
  • Exercise Challenge : Clipping Mask
  • Clipping Mask Simple Design Challenge
  • Layer Masks
  • Smart Objects
  • Linked Smart Objects
  • Layer Comps usage in Photoshop
  • MAC users : Shortcut Key Help for Photoshop
  • Commonly used Keyboard Shortcuts
  • Smart Guides and Smart Snapping in Photoshop
  • Installing and Using Action files in Photoshop → Youtube
  • Creating your own Action set in Photohsop → Youtube
  • Basic Tools Quiz
  • Students FAQ Video → Answered common problems
Layer Styles Basics for UI Design
  • Using Multiple Layer Shadow Effects in UI Design (PSD Excercise File Included)
  • Using Inner Shadow Effect
  • Using Layer Stroke Effect
  • Re-using Layer Styles
Gradients in Web and UI Design
  • What are Gradients?
  • Examples of Gradients usage in Web and UI Design
  • 3 ways to create gradients in Photoshop
  • Using Gradient Overlay Layer Style
  • Gradient Editor Deep Dive
Using Patterns in Web and UI Design
  • What are Patterns and their Usage in UI Web Design?
  • Methods of applying Patterns In Photoshop
  • How to create patterns from an image file in Photoshop
  • Installing and using .PAT pattern files in Photoshop
  • Quiz: What Layer styles are used?
Basics of UI Design | Light, Shadows, Color schemes & Typography
  • Light and Shadow (Important Concept)
  • Example usage of Light and Shadow in UI Design
  • Color Schemes in UI Design for Beginners
  • Getting Color Schemes from Logo and using HSL Basics
  • Using Online Tools for creating Color Schemes
  • Resources : Online Tools for Color Schemes PDF
  • Typography or Font Selection for Beginners
  • Recourse → Typography & Font Pairing for Beginners
Using Grids in Web and UI Design
  • What are Grids in Web and UI Design and how to use Grids
  • How to create Grids in Photoshop (Two methods)
  • Using Bootstrap Grid explained in Photoshop → Student Request Video
Installing and Using Photoshop Plugins and Scripts to automate tasks
  • RESOURCES → Photoshop Scripts for UI Designers
  • Installing Photoshop Scripts and setting Keyboard Shortcuts for them - Updated
  • Installing Photoshop Scripts on MAC OS → Student Request Lecture
  • RESOURCES → Photoshop CC Extensions for UI Design
  • How to Install Photoshop Extensions in CC2018 & CS6 (MAC and Windows)
  • Installing Extensions on MAC OS → Student Request Lecture
  • Photoshop Extensions used by UI Designers - Updated
  • Super Powers of Photoshop Extensions (Demonstration) - NEW
  • Resources CS6 → Scripts & Extensions for Photoshop CS6
(Optional → Can watch at the end) Color Calibration and Monitors for Designers
  • What color calibration is and what tools are there to do calibration
  • How to perform Color Calibration on Windows or MAC
  • Quiz: Color Calibration & Monitors for Designers
UI Design Exercises & Challanges with Step by Step solutions
  • Exercise Challenge : Soft Button
  • Challange SOLUTION: Soft Button (Step by Step)
  • Exercise Challenge : 3D Button
  • Exercise Mastering Pressed or Inset Effect in UI Design
  • Exercise Modern Header/Hero area Design (PART 1)
  • Exercise Modern Header/Hero area Design (Part 2)
  • Exercise Modern Hero Area Design (Variation 2nd)
  • Exercise Modern Header/Hero Design with Color Overlay Technique
  • Modern Header Design: Masked Gradient Effect
  • Tabbed navigation Design Introduction
  • Tabbed navigation Design → Part 1
  • Tabbed navigation Design → Part 2
Image Editing 101 for UI Designers
  • Removing white background from image with blending options