UI Design with Photoshop from Beginner to Expert in 15 days

Course Curriculum

Chapter 1: Introduction to UI Design and why it matters

Lecture 1: What this course will cover?

Lecture 2: Why UI Design Matters?

Chapter 2: Setting Up Photoshop for UI Design

Lecture 1: Photoshop Preferences for UI Design & better performance – Updated

Lecture 2: Color Proof Settings – Updated

Lecture 3: Color Profile Settings for UI Design- Updated

Lecture 4: Creating Custom Shortcuts for Photoshop – Updated

Lecture 5: Keyboard Shortcut problems on MAC OS → Student Request Lecture

Lecture 6: Photoshop Workspace(Panels) setup for UI Design → Updated

Lecture 7: Which Monitor is best for UI Designers

Lecture 8: Download all resources and psd source files for this course

Chapter 3: Basics of Photoshop for Beginners

Lecture 1: How Photoshop Interface Works

Lecture 2: Customizing Photoshop Toolbar→ Student Request Lecture

Lecture 3: New Document Setup for UI Design

Lecture 4: What are artboards and how to use them?

Lecture 5: How layers works and Basics of Layer panel controls

Lecture 6: Layers Panel → Filtering and finding layers

Lecture 7: Type Tool

Lecture 8: Character Panel

Lecture 9: Paragraph Panel

Lecture 10: Shape Tool for UI Design (Combine and Subtract Shapes)

Lecture 11: How to use Pen Tool for UI Design

Lecture 12: Student Request: How to use pen tool in Icon Design?

Lecture 13: Using Selections in different ways (Selection + Lasso Tool)

Lecture 14: Alignments

Lecture 15: Using Clipping Masks in UI Design

Lecture 16: Exercise Challenge : Clipping Mask

Lecture 17: Layer Masks

Lecture 18: Smart Objects

Lecture 19: Linked Smart Objects

Lecture 20: Layer Comps usage in Photoshop

Lecture 21: MAC users : Shortcut Key Help for Photoshop

Lecture 22: Commonly used Keyboard Shortcuts

Lecture 23: Smart Guides and Smart Snapping in Photoshop

Lecture 24: Installing and Using Action files in Photoshop → Youtube

Lecture 25: Creating your own Action set in Photohsop → Youtube

Lecture 26: Students FAQ Video → Answered common problems

Chapter 4: Layer Styles Basics for UI Design

Lecture 1: Using Multiple Layer Shadow Effects in UI Design (PSD Excercise File Included)

Lecture 2: Using Inner Shadow Effect

Lecture 3: Using Layer Stroke Effect

Lecture 4: Re-using Layer Styles

Chapter 5: Gradients in Web and UI Design

Lecture 1: What are Gradients?

Lecture 2: Examples of Gradients usage in Web and UI Design

Lecture 3: 3 ways to create gradients in Photoshop

Lecture 4: Using Gradient Overlay Layer Style

Lecture 5: Gradient Editor Deep Dive

Chapter 6: Using Patterns in Web and UI Design

Lecture 1: What are Patterns and their Usage in UI Web Design?

Lecture 2: Methods of applying Patterns In Photoshop

Lecture 3: How to create patterns from an image file in Photoshop

Lecture 4: Installing and using .PAT pattern files in Photoshop

Chapter 7: Basics of UI Design | Light, Shadows, Color schemes & Typography

Lecture 1: Light and Shadow (Important Concept)

Lecture 2: Example usage of Light and Shadow in UI Design

Lecture 3: Color Schemes in UI Design for Beginners

Lecture 4: Getting Color Schemes from Logo and using HSL Basics

Lecture 5: Using Online Tools for creating Color Schemes

Lecture 6: Resources : Online Tools for Color Schemes PDF

Lecture 7: Typography or Font Selection for Beginners

Lecture 8: Recourse → Typography & Font Pairing for Beginners

Chapter 8: Using Grids in Web and UI Design

Lecture 1: What are Grids in Web and UI Design and how to use Grids

Lecture 2: How to create Grids in Photoshop (Two methods)

Lecture 3: Using Bootstrap Grid explained in Photoshop → Student Request Video

Chapter 9: Installing and Using Photoshop Plugins and Scripts to automate tasks

Lecture 1: RESOURCES → Photoshop Scripts for UI Designers

Lecture 2: Installing Photoshop Scripts and setting Keyboard Shortcuts for them – Updated

Lecture 3: Installing Photoshop Scripts on MAC OS → Student Request Lecture

Lecture 4: RESOURCES → Photoshop CC Extensions for UI Design

Lecture 5: How to Install Photoshop Extensions in CC2018 & CS6 (MAC and Windows)

Lecture 6: Installing Extensions on MAC OS → Student Request Lecture

Lecture 7: Photoshop Extensions used by UI Designers – Updated

Lecture 8: Super Powers of Photoshop Extensions (Demonstration) – NEW

Lecture 9: Resources CS6 → Scripts & Extensions for Photoshop CS6

Chapter 10: (Optional → Can watch at the end) Color Calibration and Monitors for Designers

Lecture 1: What color calibration is and what tools are there to do calibration

Lecture 2: How to perform Color Calibration on Windows or MAC

Chapter 11: UI Design Exercises & Challanges with Step by Step solutions

Lecture 1: Exercise Challenge : Soft Button

Lecture 2: Challange SOLUTION: Soft Button (Step by Step)

Lecture 3: Exercise Challenge : 3D Button

Lecture 4: Exercise Mastering Pressed or Inset Effect in UI Design

Lecture 5: Exercise Modern Header/Hero area Design (PART 1)

Lecture 6: Exercise Modern Header/Hero area Design (Part 2)

Lecture 7: Exercise Modern Hero Area Design (Variation 2nd)

Lecture 8: Exercise Modern Header/Hero Design with Color Overlay Technique

Lecture 9: Modern Header Design: Masked Gradient Effect

Lecture 10: Tabbed navigation Design Introduction

Lecture 11: Tabbed navigation Design → Part 1

Lecture 12: Tabbed navigation Design → Part 2

Chapter 12: Image Editing 101 for UI Designers