Learn Photoshop For Ui Design From Scratch

Photoshop Preferences for UI Design & better performance - Updated Preview 06:19

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

Color Proof Settings - Updated Preview 01:11

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

Color Profile Settings for UI Design- Updated Preview 04:29

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

Creating Custom Shortcuts for Photoshop - Updated Preview 04:19

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

Keyboard Shortcut problems on MAC OS → Student Request Lecture Preview 02:09

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

Photoshop Workspace(Panels) setup for UI Design → Updated Preview 07:16

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 Settings for UI Design

Which Monitor is best for UI Designers Preview 00:04

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

Download all resources and psd source files for this course Preview 00:03

Download all PSD files and resources from this link

How Photoshop Interface Works Preview 05:03

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

Customizing Photoshop Toolbar→ Student Request Lecture Preview 04:11

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

New Document Setup for UI Design Preview 04:12

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

What are artboards and how to use them? Preview 06:22

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.

How layers works and Basics of Layer panel controls Preview 05:45

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

Layers Panel → Filtering and finding layers Preview 05:32

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

Type Tool Preview 04:47

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

Character Panel Preview 07:25

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

Paragraph Panel Preview 04:14

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

Shape Tool for UI Design (Combine and Subtract Shapes) Preview 07:41

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

How to use Pen Tool for UI Design Preview 03:43

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

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

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

Using Selections in different ways (Selection + Lasso Tool) Preview 07:15

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

Alignments Preview 06:02

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

Using Clipping Masks in UI Design Preview 02:48

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

Exercise Challenge : Clipping Mask Preview 00:50

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

Clipping Mask Simple Design Challenge

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.

Layer Masks Preview 05:26

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

Smart Objects Preview 07:40

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

Linked Smart Objects Preview 07:00

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

Layer Comps usage in Photoshop Preview 06:27

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

MAC users : Shortcut Key Help for Photoshop Preview 00:19

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

Commonly used Keyboard Shortcuts Preview 14:35

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

Smart Guides and Smart Snapping in Photoshop Preview 05:18

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

Installing and Using Action files in Photoshop → Youtube Preview 00:10

Creating your own Action set in Photohsop → Youtube Preview 00:08

Basic Tools Quiz

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

Students FAQ Video → Answered common problems Preview 00:07

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

Using Multiple Layer Shadow Effects in UI Design (PSD Excercise File Included) Preview 03:40

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

Using Inner Shadow Effect Preview 02:17

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

Using Layer Stroke Effect Preview 02:43

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

Re-using Layer Styles Preview 02:03

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

What are Gradients? Preview 02:04

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

Examples of Gradients usage in Web and UI Design Preview 03:41

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

3 ways to create gradients in Photoshop Preview 04:49

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

Using Gradient Overlay Layer Style Preview 05:34

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

Gradient Editor Deep Dive Preview 07:30

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

What are Patterns and their Usage in UI Web Design? Preview 02:28

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

Methods of applying Patterns In Photoshop Preview 04:59

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

How to create patterns from an image file in Photoshop Preview 02:35

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

Installing and using .PAT pattern files in Photoshop Preview 05:11

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

Quiz: What Layer styles are used?

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

Light and Shadow (Important Concept) Preview 04:01

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.

Example usage of Light and Shadow in UI Design Preview 02:22

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

Color Schemes in UI Design for Beginners Preview 01:54

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

Getting Color Schemes from Logo and using HSL Basics Preview 01:29

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

Using Online Tools for creating Color Schemes Preview 05:29

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

Resources : Online Tools for Color Schemes PDF Preview 1 page

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

Typography or Font Selection for Beginners Preview 08:55

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

Recourse → Typography & Font Pairing for Beginners Preview 00:05

Ready Made Typography Resources for all the beginners out there

What are Grids in Web and UI Design and how to use Grids Preview 05:51

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

How to create Grids in Photoshop (Two methods) Preview 06:14

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

Using Bootstrap Grid explained in Photoshop → Student Request Video Preview 00:07

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

RESOURCES → Photoshop Scripts for UI Designers Preview 00:31

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

Installing Photoshop Scripts and setting Keyboard Shortcuts for them - Updated Preview 05:40

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

Installing Photoshop Scripts on MAC OS → Student Request Lecture Preview 02:15

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.

RESOURCES → Photoshop CC Extensions for UI Design Preview 00:35

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

How to Install Photoshop Extensions in CC2018 & CS6 (MAC and Windows) Preview 15:55

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

Installing Extensions on MAC OS → Student Request Lecture Preview 00:04

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

Photoshop Extensions used by UI Designers - Updated Preview 07:09

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

Super Powers of Photoshop Extensions (Demonstration) - NEW Preview 09:28

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

Resources CS6 → Scripts & Extensions for Photoshop CS6 Preview 00:09

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

What color calibration is and what tools are there to do calibration Preview 08:24

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

How to perform Color Calibration on Windows or MAC Preview 07:29

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

Quiz: Color Calibration & Monitors for Designers

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

Exercise Challenge : Soft Button Preview 00:25

Try to create a soft Button in Photoshop using dropshadows and stroke effect or Download PSD file to check how i created it

Challange SOLUTION: Soft Button (Step by Step) Preview 12:47

Step by step guide on how to use Stroke, clipping masks and drop shadows to create soft button in Photoshop

Exercise Challenge : 3D Button Preview 01:12

In this lesson, i will show you a 3D button made with Photoshop and will give you some hints...Try to make this button without seeing the PSD file attached

Then open my PSD file and checkout what i had done to create this button...

Exercise Mastering Pressed or Inset Effect in UI Design Preview 07:09

Pressed or Inset effect is used a lot in UI Design for showing state of pressed button. In this lecture, we will master creating this Pressed or Inset effect in Photoshop

Exercise Modern Header/Hero area Design (PART 1) Preview 08:46

In this lecture we are going to create awesome and Modern Hero (Header) area which are very trendy these days. I will be using Griddify and Quick Guides Photoshop plugins during the lecture...

This is the first part of the lecture, watch the second part to complete this exercise

Exercise Modern Header/Hero area Design (Part 2) Preview 08:49

In this lecture we are going to create awesome and Modern Hero (Header) area which are very trendy these days. I will be using Griddify and Quick Guides Photoshop plugins during the lecture...

Using images wisely and creating less content heavy Hero areas is the essence of popular websites these days

This is the second part of the lecture, watch the second part to complete this exercise

Exercise Modern Hero Area Design (Variation 2nd) Preview 09:02

We will create another variation of the previous Modern Hero Area Design with rounded elevated button and few more edits. Its a bit more airy design for the same header

Exercise Modern Header/Hero Design with Color Overlay Technique Preview 11:25

In this lesson we are going to create a very Modern looking Hero Header area using some grids, margins and Color overlay adjustment layer. This technique is very popular among web designers or even used in UI and App designs

Modern Header Design: Masked Gradient Effect Preview 13:15

In this lecture, we will use a masked black to white gradient to create a gradually image hiding effect. We are going to design a great and Modern header with this technique

Tabbed navigation Design Introduction Preview 00:58

This is the intro lecture in which i will show you what we will be designing in the next two lessons.

Tabbed navigation Design → Part 1 Preview 14:14

In this lesson, you will learn how to design the naked tabs interface in Photoshop

Tabbed navigation Design → Part 2 Preview 08:08

In this lesson, you will learn how to design the filled tabbed navigation using Photoshop

Removing white background from image with blending options Preview 03:20

In this lecture, i will tell you about simple and neat trick to remove white background from image is use blending options

Removing any background quickly with Magnetic Lasso and Refine Edge Preview 15:53

In this lecture, we are going to remove any image background by using Magnetic Lasso tool and refine edge in Photoshop

UPDATE: Removing background with Select and Mask Preview 10:20

In this lesson, i will use Photoshop's new and enhanced Select and Mask tool to remove the background of a photo in just few minutes. You don't need to make a perfect selection in Photoshop to remove background of a portrait image. Also i will tell a technique to create fake shadows.

Select Subject New feature Photoshop CC2018 Preview 00:08

Watch this new feature of CC2018 to select subject in any image instantly with Photoshop

Removing specific parts of an image using Spot Healing Brush Preview 04:26

We will use spot healing brush and content aware to remove parts of image we don't want using Photoshop

Enhancing Pop effect of your images using Adjustment layers Preview 06:48

I will combine a lot of basic techniques curves and adjustment layers to create dramatic effect in images using Photoshop. Don't forget to download the sample PSD file

Fonts and Images used in Iphone App Design Preview 04:00

In this lecture, i will explain all the fonts and images i have used and how to get great images for your UI and Mobile app Designs

Starting Iphone App Design Preview 04:35

• We will see how to setup artboard for iphone app design
• I will add images and make them fit with the screen size of our Iphone app

Adding Images to Iphone App Screen Preview 05:47

In this lecture, we will add all the images needed for this food IOS/iPhone app and align them properly

Adding text to Iphone App Screen Preview 05:30

In this lecture, we will add all the different text styles and sizes to this iphone app screen

Adding Buttons to Iphone App Screen Preview 11:51

In this lecture, we will add phone and book now button to our daily food deal app screen and will add the final touches to this IOS App UI Design

Using Iphone Mockup to show your designs Preview 04:12

In this lecture, we will use FREE Iphone mockup PSDs and use them to show our designs to clients

App Design Challange - Design and Submit your Mobile App Screen

Just use any pre-made Mobile App template of iPhone6 or iPhone6 plus and Design any App idea or copy some other App you want to re-create. Then use an iPhone Mock-up to display your design inside a mock-up to make it feel and look better You can submit 1 or 2 or any number of screens

Exercise AREA GRAPH: Design Base Preview 03:32

In this lecture, we will design the base containers for your graph widget in Photoshop

Exercise AREA GRAPH: Grid Design Preview 05:07

In this lecture, we will design the Grid of the graph and we will use Photoshop Extensions to quickly create the grid for Area Graph

Exercise AREA GRAPH: Adding text and Legends Preview 08:04

In this lecture, we will add text and legend area to our graph widget design. We will be using two fonts Open Sans Light and Lato bold. Please download these from Google Fonts if you don't have them

Exercsie AREA GRAPH : Design Main Red Graph Shape Preview 03:46

In this lecture, You will learn to design the main graph portion of the area graph and clip it inside the container

Exercsie AREA GRAPH: Adding Extra Detials Preview 05:49

In this exercise, we will add few extra details to our area graph like hover state and dots

Exercise AREA GRAPH: Alignment and Balance Preview 10:04

In this lecture, we will finalize our Area Graph design in Photoshop and add balance and alignments to the design

Exercise LINE GRAPH: Desiging Line Graph from Area Graph Preview 03:47

In this exercise, i will give you an incredible neat trick to convert your previously designed Area graph to a Line Graph with another color scheme using Photoshop

Exercise Circular Graph: Design Base shapes of Circular graph Preview 05:31

In this lecture, we will use ONLY Photoshop to create rounded circular bar graph and i will share with you my new secret technique to create those using only Photoshop

Exercise Circular Graph: Adding Styles to Circular graph fills Preview 13:24

In this lesson, we will add Gradient fill using stroke and drop shadows to the shapes to create more drama and attraction in our Circular bar graph base shapes using Photoshop

Exercise Design Stats with text Preview 08:41

In this lecture, we will use only text and one shape to design modern styled Stats content block

Exercise Bar Graph Design: Part 1 Preview 09:12

In this lecture we are going to design a bar graph in Photoshop, will add colors and styles to it

Exercise Bar Graph Design : Part 2 Preview 05:29

In this lecture, we will add some text layers to our Bar graph using Photoshop

Student Request → Custom Percentage Circular Bar Graph Preview 08:26

In this lesson, you will learn another technique to create custom circular bar graphs with masking. Its a student request lecture

Exercise Login Form: Base Design Preview 06:59

In this lecture, we are going to design the stacked paper style form base and will add diffuse shadows to its container

Exercise Login Form: Designing Input Fields Preview 12:08

In this lecture, we will add some input fields and their focus or active styles which will be similar to Safari form UI

Exercise Login Form: Finishing Login Form Preview 11:30

In this lesson, we will design the bottom part which is button and checkbox and will make few final adjustments to the login form UI

Dribbble Realistic Buttons Redesign Part 1 Preview 15:11

In this lesson, we will create the two elevated buttons of a Dribbble shot. You will learn the advanced techniques of using multiple shadows and glow effects

Dribbble Realistic Buttons Redesign Part 2 Preview 14:43

In this lesson, you will learn to create the realistic pressed effect of a dribbble shot

What are Wireframes ? Preview 03:45

Online Tools & Softwares to to create Wireframes Preview 11:59

Rescources for creating Wireframe Preview 00:09

Link to software and Online tools (free and paid) for creating low-fidelity Mockups (Wireframes)

Convert this Wireframe to an actual Web Design

Please convert the Wireframe to a real Web page Design

Improve your Designs by looking at other designer's mistakes Preview 00:05

In this lesson, i will show you the designs submitted by one of my students Darryl Haynesworth. I will review his design, point out the areas he need to improve his designs and also what were his design powers

Converting PSD to CSS (Tips, tools and Extensions for Web Designers/Developers) Preview 06:18

In this lesson, i will discuss latest tools, tips and extensions UI Designers and Web Designers use to get CSS styles from any PSD layer or PSD file

Tips for Using Grids while Designing Preview 01:30

In this lecture, I will share few tips on how to use grids and keep them in your view while designing web design or any other ui design project

Exporting Images for Web and UI Design Preview 06:59

In this lecture, i will discuss all about how to export images for web design and ui design and keep all the colors as you designed them. I will also discuss few other things you need to keep in mind so you don't mess up when you export you images and assets

New Features in Photoshop CC2015 for UI Designers Preview 05:18

We will learn about the new features added in Photoshop CC2015 version which are good news for UI Designers

Font Match Feature in CC2017 Preview 02:46

How to find and match fonts in Photoshop CC2017 a new feature. Lets have a look

CC2018 New Features for UI Designers Preview 03:35

In this lesson i have shown two new features of Photoshop recent release of CC2018 which is copy paste layer or groups and copy paste text styles

What to do NEXT? Preview 00:37

Let's see what should we both do next

BONUS LECTURE Preview 01:33