UI Design in Photoshop - Start Designing Web & Mobile Apps

Ultimate guide for Beginners to learn Photoshop and start designing awesome Web Designs and Mobile App Designs in a week
4.6 (167 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
3,438 students enrolled
$30
Take This Course
  • Lectures 106
  • Contents Video: 9.5 hours
    Other: 3 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 English

Course Description

Last UPDATED on 15th September 2016---------------------------------------------------------------------

  • Lecture Added: Installing Photoshop Extensions on MAC OS
  • Lecture Added: Installing Photoshop Script on MAC OS

------------------------------------------------------------------------------------------------------------------------

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 Photoshop for UI Design 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?

  • This course will cover in detail about all the basics of Photoshop for UI Design.
  • Course core focus is UI Design so you can apply all this knowledge to Landing Page design, Web App or Mobile App Design
  • This course will cover all the Common Shortcuts, tools and Secret Extensions to increase speed and efficiency in Photoshop
  • Learn about basics of Light and Shadow concepts in UI Design
  • How to use patterns and Gradients in UI Design
  • Learn how User Interface Designers use Photoshop in their daily routines
  • Get to know how to create and use guides using Photoshop Extensions
  • Learn how to install and use Photoshop Extensions for UI Design purpose
  • Learn how to use Gradients and color overlays to create Modern Header designs
  • Know about all the plugins and extensions used by UI Designers use all the time
  • Learn how to create and use GRIDS in Photoshop
  • Learn to design IOS Iphone App using Photoshop
  • Image Editing techniques for removing background
  • Image color adjustment basics for UI Designers
  • What are Wireframes, how to create wireframes & tools to design wireframes?

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 CC2015 (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

What are the requirements?

  • Passion to become a UI Designer
  • Photoshop CC2015 (Latest version)

What am I going to get from this course?

  • 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

What is the target audience?

  • Novice/Beginner Level Designers
  • Website Designer
  • Graphic Designer
  • Web Developers who wants to learn UI Design
  • UI Designer who wants more advaced techniques

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introductions
02:43

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

00:53

I am Ahsan Idrisi, a UI UX Designer, have been working in UI Design field from past 6 years, I have designed Logos, App Icons, Mobile and Web Apps UI, Dashboards, SAAS apps etc...

If you want to see my UI design work, google my name Ahsan Idrisi and see my profiles on behance or dribbble

00:28

Goal of this course is to learn Photoshop for UI design, this course will cover all the problems UI Designers face every day while designing UI for Mobile and Web

05:40

Learn how to use controls and Udemy Interface to get full benefit while you are watching this course

Section 2: Setting Up Photoshop for UI Design
03:56

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

04:28

In this lecture, we will take a look at few New Photoshop preferences for UI Design which have been added in latest 2015.1.2 version of Photoshop

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

01:11

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

Article

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

02:30

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

02:33

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

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.

05:28

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

Article

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

06:29

Photoshop CC2015 don't support ZXP extension files anymore so i will guide you how to install ZXP extension to Photoshop CC2015

05:07

How to install Photoshop Extensions automatically or manually using Photoshop CC 2015 on MAC. If you are a MAC user and having problem installing Photoshop extensions, you need to really see this video

06:04

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
7 questions
Section 3: Color Calibration and Monitors for Designers
08:24

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

07:29

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

02:21

Learn about monitor (LED) screen technologies and which one is best for designers

5 questions

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

Section 4: Basics of Photoshop for Beginners
05: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

07:53

How layers work in Photoshop and how we use new CC layer panel in UI Design to find different kinds of layers etc

03:53

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

04:38

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

06:34

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

02:53

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

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

06:21

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

06:02

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

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

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

05:26

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

07:40

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

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

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

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

10 questions

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

Section 5: Layer Styles Basics for UI Design
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

02:17

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

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

02:03

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

Section 6: Gradients in Web and UI Design
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

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

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

05:34

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

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

Section 7: Using Patterns in Web and UI Design
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

04:59

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

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

05:11

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

5 questions

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

Section 8: Basics of UI Design | Light Shadows Colors Typography
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.

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

01:54

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

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

05:29

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

1 page

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

1 page

All the online tools and font combinations i use in everyday Web, Mobile and UI Design projects

08:55

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

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

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

Section 9: Exercise and Challanges with Step by Step solutions
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

12:47

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

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...

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

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

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

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

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

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

Section 10: Image Editing 101 for UI Designers
03:20

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

15:53

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

04:26

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

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

Section 11: IOS App Design : Exercise Iphone Food Deals App
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

Article

Download source files, fonts and mockups used in designing this Iphone food deals app screen

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
05:47

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

05:30

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

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

04:12

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

Section 12: BONUS: Dribbble styled Dashboard UI Design (Student Request)
03:32

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

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

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

03:46

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

05:49

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Muhammad Ahsan Idrisi, UI/UX Interaction Design Expert

I started my Freelancing Career just 6 years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca Cola.

In just 1 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca Cola and Project Managers from UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wire-frames, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects
I am multi-talented person who have won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing Page design contests.

Worked with Clients all over the world mostly from USA, Australia, UK, and United Arab Emirates while learning a lot on how to deal with clients while freelancing and how to present your work to them

Although I started as a UI Designer 6 years ago but I am playing with Photoshop since year 2002

My ultimate aim is to make more Awesome UI Designers and ease the pain of learning from new comers in this field of UI Design

Ready to start learning?
Take This Course