Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.


UI Design in Photoshop - Get Started with UI Design Career

via Skillshare


BEST SELLING Course (ALL IN ONE Adobe Photoshop Course)

Do you think that UI Designers use Photoshop in the same way as other Designers?

Do you know what are the basic concepts, settings and tools UI Designers know and you don’t?

So if you want to learn UI Design with Photoshop and upgrade your confidence and Skill levels in Photoshop; this course is for YOU. This course is equally good for Beginners and Experts so don’t worry if you haven’t used Photoshop before.

Most of us don’t know the basic settings, shortcuts, tools and extension we need in Photoshop to become a UI Designer, we make same mistakes and keep on wasting time online searching for different settings and answers to common UI Design issues and problems.

What will you learn?

  • Master basic tools of Photoshop specific to UI Design.
  • Apply your knowledge to Landing Page design, Web App or Mobile App Design
  • Use Common Shortcuts, tools and Secret Extensions to speed up your web design workflow
  • Learn about basics of Light and Shadow concepts in UI Design
  • How to use patterns and Gradients to improve your designs
  • Learn how User Interface Designers use Photoshop in their daily routines
  • Using & Creating Guides and Grids with Photoshop Extensions
  • Installing and using Photoshop Extensions for UI Design purpose
  • Using Gradients and Color overlays to create Modern Designs
  • Know about all the plugins and extensions used by UI Designers use all the time
  • Learn how to create and use GRIDS in Web Design
  • Designing Mobile app in Photoshop (Step by Step Exercise)
  • Image Editing techniques in Photoshop for removing background
  • Image color adjustment basics for UI Designers
  • What are Wireframes, how to create wireframes & tools to design wireframes?
  • Dribbble Shot re-design step by step exercises

Course Structure

  • More than 20 Practice Examples and design Challenges to get you better at UI Designing
  • Quizzes to test your knowledge of Photoshop regarding UI Design

Student Request Lecture Series

A lot of lectures are added on weekly basis on the request of my current students so join in and request any design problem or anything new you want to learn

  • How to Install Photoshop ZXP extensions in CC2017 (Student Request Lecture)

Take This Course Now and Start your career as UI Designer


  • What this course is all about?
  • Lets setup Photoshop CC2017 Preferences for UI Design
  • Setting Up Custom Keyboard Shortcuts in Photoshop
  • Installing Scripts in Photoshop
  • Installing Photoshop Scripts on MAC
  • Photoshop Extensions for UI Designers
  • Power of Photoshop extensions
  • How to Install Photoshop Extensions
  • Installing Extensions using ZXP Installer Photoshop CC2017
  • Installing Photoshop extensions on MAC
  • Setup Panels and Workspace for UI Design
  • What is Color Calibration?
  • Best Monitors (LED) for Designers
  • Operating System Based Color Calibration
  • How Photoshop's Interface Works
  • Photohsop New Document
  • What are Artboards?
  • How layers works in Photoshop
  • Text Panel in Photsohop
  • Shape Tool in Photohsop
  • Basics of Pen Tool
  • More on using Pen Tool
  • Aligningment in Photoshop
  • Selections in Photohsop
  • Common Shortcuts in Photoshop
  • Using Layer Masks in Photoshop
  • Using Clipping Mask
  • Challange Exercise → Clipping Mask
  • Using Smart Objects in Photoshop
  • Linked Smart Objects in Photoshop
  • Using Layer Comps in Photoshop
  • Mastering Drop Shadow Layer Effects
  • Using Inner Shadow Layer Effect
  • Using Stroke Layer Effect
  • Re-using Layer Styles
  • What are Gradients?
  • Use of Gradients in UI Design
  • 3 ways to create Gradients in Photoshop
  • Using Gradient Editor in Photoshop
  • Using Gradient Overlay Layer Style
  • What are Patterns and how we use them in Web Design?
  • 2 Methods of applying patterns
  • Creating Patterns from an image file
  • Installing and using .pat files
  • How Light and Shadow works in UI Design
  • Examples of Light and Shadow usage
  • Color Schemes for Beginners
  • Using Hue Saturation and Brightness for Color Schemes
  • Online Tools to create Color Schemes
  • Selecting Fonts and Typography
  • Using Grids in Web Design
  • Creating Grids in Photoshop
  • Soft Shadow Button Creation Challange
  • Soft Shadow Button Design Solution
  • 3D Button Design Challange
  • Pressed Effect in Photoshop
  • Modern Header Design Part 1
  • Modern Header Design Part 2
  • Modern Header Design variation
  • Color Overlay Effects for Hero Area
  • Transparent Masking Effect Header Exercise
  • Designing Tabs in Photsohop
  • Designing Tabs theme 1
  • Designing Tabs theme 2
  • Gathering Resources for IOS App Design
  • Lets start the IOS App Design
  • Adding menu items to IOS App
  • Adding text to IOS App Screen
  • Adding Buttons to IOS App Design
  • Using App Mockups to show your designs
  • Simple Trick to remove white backgrounds
  • Removing small objects from image with Spot Healing
  • Making Colors pop in images
  • Removing Background with Magnetic Lasso tool
  • Using Select and Mask tool to clean up background
  • What are wireframes?
  • Tools used to create wireframes
  • Exercise →Redesign Dribbble Shot Part 1
  • Exercise →Redesign Dribbble Shot Part 2
  • Converting PSD to Coding Tips
  • Exporting Images for Web Design Tips
  • Tips on using Grids in Photoshop
  • Font Match → New features in Photoshop CC2017

Taught by

Muhammad Ahsan

Related Courses


Start your review of UI Design in Photoshop - Get Started with UI Design Career

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free