UI Design with Photoshop from Beginner to Expert in 15 days
4.4 (940 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,115 students enrolled

UI Design with Photoshop from Beginner to Expert in 15 days

Ultimate guide for Beginners to learn Photoshop & User Interface Design for Web Design & Mobile App Design in two week
4.4 (940 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,115 students enrolled
Last updated 3/2019
English [Auto-generated], Portuguese [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11.5 hours on-demand video
  • 17 articles
  • 11 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Start your Career as UI Designer
  • Learn the settings necessary for UI Design Process
  • Learn all the Basic tools of Photoshop for UI Design
  • Start using Photoshop with solid foundation in UI Design
  • Learn all the Photoshop Shortcuts for UI Design
  • How to use Photoshop Extensions to speed up UI Desing Process
  • Tips and Techniques for Efficient usage of Photoshop for UI Design
  • Learn how to use Custom Scripts in Photoshop for UI Design
  • Learn about Color schemes and Typography Online tools
  • Learn how to use Gradients and Patterns in UI Design
  • Create Wireframes and learn the tools needed to create them
  • Learn how to design MODERN DASHBOARD graphs and elements
  • Learn how to design MODERN HERO/HEADERS of Websites
  • Passion to become a UI Designer
  • Minimum Photoshop CC or Latest version of Photoshop
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 you will 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 CC2018 (Student Request Lecture)
  • Dribbble Styled Dashboard Graphs and Stats Design Exercises (Student Request Lectures)

Take This Course Now and Start your career as a UI Designer

Who this course is for:
  • Novice/Beginner Level Designers
  • Web Designer
  • Graphic Designer
  • Web Developers who wants to learn UI Design
  • UI Designer who wants more advaced techniques
Course content
Expand all 126 lectures 11:38:36
+ Introduction to UI Design and why it matters
2 lectures 06:41

Become a UI Designer from scratch. Learn the secret tips, techniques, methods used to create awesome User Interfaces for Mobile and Web App

Start with a solid foundation in UI Design and Learn the tool part of UI Design Process

Preview 02:43

In this video, you will learn why User Interface Design matters and why you should never devalue it

Preview 03:58
+ Setting Up Photoshop for UI Design
7 lectures 25:47

This lesson focuses on tweaking Photoshop performance and settings for UI Design

Preview 06:19

In this lecture, we will learn how to set our color proof photoshop settings for less color mismatch problems

Color Proof Settings - Updated

Updated: Color profile settings are crucial so your designs colors are rendered same across all the devices. A lot of new designers make this mistake and regret in the end when they need to create the whole design again

Color Profile Settings for UI Design- Updated

Custom made shortcuts make your design life so easy...Don't miss out this lesson. We will create shortcuts only for the tasks we are going to do over and over again. And we are free to set whatever shortcut key we like for Photoshop

Creating Custom Shortcuts for Photoshop - Updated

Students who are having problems setting up keyboard shortcuts on MAC OS, this video is for you

Keyboard Shortcut problems on MAC OS → Student Request Lecture

Learn how to setup your Photoshop Workspace and Panels for UI Design. We
will create custom panel and remove the extra panels we don't need

Photoshop Workspace(Panels) setup for UI Design → Updated
Photoshop Settings for UI Design
7 questions

Watch this video to learn which Monitor is best for Web Design and UI Design work

Which Monitor is best for UI Designers
+ Basics of Photoshop for Beginners
26 lectures 02:18:53

How Photoshop controls and interface work. We will cover how to access the options of any tool we use in Photoshop

How Photoshop Interface Works

Photoshop CC2017 has option to customize the toolbar and also its shortcut keys. In this lesson, i will show you how to customize your toolbar

Preview 04:11

How to create New Document for UI Design purpose, what resolution should it be, what tools and extensions should be around in your workspace

Preview 04:12

In this lesson, you will learn all about Photoshop's art-boards. How to create them and how to use them, how to arrange or move them or edit their sizes.

What are artboards and how to use them?

In this lesson, you will learn about How Layers works, what is their stacking order. How to use Transparency in layers and how to use Layer Fill property

How layers works and Basics of Layer panel controls

In this lesson, i will show you how to filter and find different types of layers using Photoshop's filter options in Layers Panel

Preview 05:32

What settings are necessary for Text and Paragraph Tool in Photoshop for UI Design and what options they have for a UI Designer

Type Tool

You will learn how to use kerning, tracking, leading and all the options available in Character panel.

Character Panel

In this lesson, you will learn all the options available in Paragraph Panel like Hyphenate, Indentations and alignements

Paragraph Panel

Learn the powerful shape tool, we will cover how to combine different shapes to create new ones and how to subtract one shape from another

Preview 07:41

Pen tools is used in combination of Direct Selection tool and Shapes tool. So i will cover few tips on how to use all these tools combined in UI Design

How to use Pen Tool for UI Design

It is a student request lecture. In this lesson, i explained in detail that how pen tools works and how to stroke its path and how to create basic icons with it. We will do two basic exercises to create a profile icon and an eye icon

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

How many kinds of selection UI Designers use while working in Photoshop. What are the shortcuts and ways to create, add or subtract selections

Preview 07:15

How to align multiple objects in Photoshop and how to horizontally and vertically space them with custom shortcut keys


Clipping masks are used a lot of in UI Design process. This lecture will cover how to create clipping masks and how to apply them to UI Design

Preview 02:48

Try to create this simple UI by using only clipping masks and shapes. If you can't then download my PSD exercise file to investigate

Preview 00:50
Use your image or any other image as your avatar. Write your favorite quote after that image in one line. Then create a button underneath it. Just create this Design using 800px wide and 1000px high Photoshop document and submit the design.
Clipping Mask Simple Design Challenge
1 question

Layer masks are also used to hide portions of layers, we will see how to do that in this lecture

Layer Masks

Learn the use of Smart Objects in UI design. Smart Objects is one of the latest Photoshop featuers

Preview 07:40

Learn how we can use linked smart objects to save time and create Headers and Footers across multiple Designs and can edit them from one place and it will be changed on all others

Linked Smart Objects

In this lesson, we are are going to use layer comps to show different states of a single button and in the end we will export different layers comps to PSD files

Layer Comps usage in Photoshop

In this lecture, i will show you the difference of shortcut keys of Photoshop for MAC and Windows users so MAC users gets what my shortcuts are actually as i am using Windows OS in my lectures

MAC users : Shortcut Key Help for Photoshop

We will learn all the daily routine Photoshop keyboard shortcuts along with some custom keyboard shortcuts we created in previous lecture. These Photoshop keyboard shortcuts help a lot in speeding up your work

Commonly used Keyboard Shortcuts

Smart guides and snapping helps us a lot in placing your elements on your Photoshop canvas. This feature is available in latest releases of Photoshop CC2017 and CC2018

Smart Guides and Smart Snapping in Photoshop
Installing and Using Action files in Photoshop → Youtube
Creating your own Action set in Photohsop → Youtube

Lets check the knoweldge of Photoshop Basic Tools we use in UI Design

Basic Tools Quiz
10 questions

This video solves the problem of how to access Toolbar Dropdown menu. And why your layers and artboards sizing are mis-matching. And the problem "Why my Layer Effects are not visible"?

All these questions were asked by Alexandra Velez

Students FAQ Video → Answered common problems
+ Layer Styles Basics for UI Design
4 lectures 10:43

We will create a rounded button with Multiple drop shadows to understand how light and shadow works while using Drop Shadow layer style in Photoshop

Preview 03:40

In this lesson we will learn how to apply inner shadow which we normally see in a lot of BUTTONS

Using Inner Shadow Effect

Stroke effect have multiple uses in UI Design, it can be used as border or used in Ghost Buttons...We will see all that in this lecture

Using Layer Stroke Effect

We will learn how to save layer styles in Photoshop and use them further in any other UI design elements

Preview 02:03
+ Gradients in Web and UI Design
5 lectures 23:38

Gradients are basically blend of two or more than 2 colors in a continuous way, i will disucss one online tool to blend Material and Flat UI Design colors

What are Gradients?

In this lecture, we will look at various examples of using gradients in web and UI designs and i will also give tips for starters on which colors to use for gradients

Preview 03:41

I will talk about 3 ways to create gradients in Photoshop and few tips on which one to use and which one to avoid

3 ways to create gradients in Photoshop

In this lecture, we will deep dive into Photoshop Gradient Overlay Layer effect and understand its settings

Using Gradient Overlay Layer Style

We look deep dive into Gradient Editor and will learn how to create and edit new gradients, how to save them and how to save your whole gradient library

Gradient Editor Deep Dive
+ Using Patterns in Web and UI Design
4 lectures 15:13

We will have a quick look at different examples where patterns have been used, i will give few tips on how to use patterns and what patterns are

Preview 02:28

In this lecture, we will learn pattern overlay layer style and pattern fill methods to apply patterns in Photoshop

Methods of applying Patterns In Photoshop

In this lesson we will download an image pattern file and will create a pattern from it using Photoshop and will apply it to some shape or layer

How to create patterns from an image file in Photoshop

In this lecture, we will learn how to download, install and use ready made .PAT pattern files in Photoshop

Preview 05:11

In this quiz, i will give your an image and you need to tell me what layer style i have used in each situation.

Quiz: What Layer styles are used?
5 questions
+ Basics of UI Design | Light, Shadows, Color schemes & Typography
8 lectures 24:15

In this lecture, we will look at the use of light and shadow in UI Design to create elevated or Pressed effects mostly seen in many User Interfaces, websites and apps.

Light and Shadow (Important Concept)

I will show you some of the examples from Dribbble so you can get more grip on the usage of light and shadows in UI Design

Example usage of Light and Shadow in UI Design

In this lecture we will learn, how many colors to use in a UI Design effectively

Preview 01:54

We will learn how to get color schemes from logo or branding and basics of getting more colors using Hue bar in Photoshop

Getting Color Schemes from Logo and using HSL Basics

I will talk about few tools i use the most for creating color schemes or getting all the shades of any color

Preview 05:29

This list contains all the tools i use for creating color schemes, download the PDF for all the resources

Resources : Online Tools for Color Schemes PDF
1 page

In this lecture, i will show you online tools to combine and pair typography and how to choose fonts for Beginners

Preview 08:55

Ready Made Typography Resources for all the beginners out there

Recourse → Typography & Font Pairing for Beginners
+ Using Grids in Web and UI Design
3 lectures 12:12

In this lecture, i will teach you the basics of Grids, gutters and margins and how to use grids while you are designing in Photoshop

What are Grids in Web and UI Design and how to use Grids

In this lecture, i will discuss two ways to create Grids in Photoshop, one is Photoshop's default grid layout system and other is a plugin called GuideGuide

Preview 06:14

This video about using Bootstrap Grids in Photoshop was an answer to a question a student asked me inside a course. So please watch it on my YouTube channel

Using Bootstrap Grid explained in Photoshop → Student Request Video
+ Installing and Using Photoshop Plugins and Scripts to automate tasks
9 lectures 41:47

All the links to Helpful Scripts for Web and Mobile App Designers to speed up workflow in Photoshop

RESOURCES → Photoshop Scripts for UI Designers

Learn how to install Photoshop Scripts and set keyboard shortcuts to them, Download the resources file for some Script Resources

Preview 05:40

In this lesson, i will show you how to find Photoshop's Preset folder to install Scripts, patterns, gradients, color swatches using MAC Operating System.

A lot of my students were having problems using MAC OS to install scripts so here is a little help for MAC users.

Installing Photoshop Scripts on MAC OS → Student Request Lecture

Download all the Free Extensions used by UI Designers, along with the ZXPInstaller to install some of the extensions and plugins that use ZXP installer

Preview 00:35

You will learn how many file formats these Photoshop extension comes in and how to install each type of extension in Photoshop. Also learn how to install these extension manually

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

How to install manually and using ZXP Installer on MAC OS using Photoshop CC2018

Installing Extensions on MAC OS → Student Request Lecture

We will talk about Photoshop Free and Premium extensions and how they help us in speeding up the Web or Mobile UI Design process

Preview 07:09

In this lesson, i am going to show you how these extensions help you speed up your workflow. You will see how these Photoshop Extension works like a Super Power and saves time and efforts. See me using some of the extensions for UI Design work

Preview 09:28

For those students who are using CS6 version of Photoshop, they can't use rounded corners and few plugins so here are a list of links and plugins they can use in CS6

Resources CS6 → Scripts & Extensions for Photoshop CS6
+ (Optional → Can watch at the end) Color Calibration and Monitors for Designers
2 lectures 15:53

We will learn about color calibration tools available and how to use online tools to calibrate your monitor colors

What color calibration is and what tools are there to do calibration

We will perform color calibration on Windows and Mac using only operating system based software or drivers

How to perform Color Calibration on Windows or MAC

This quiz is related to color calibration and monitors a web designer or a UI Designer needs

Quiz: Color Calibration & Monitors for Designers
5 questions