UI Design With Photoshop From Beginner To Expert In 15 Days Online Course

UI Design with Photoshop from Beginner to Expert in 15 days

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

All levels
English

Course Description

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.

See more less

What you’ll 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

Covering Topics

Section 1 : Introductions

Section 2 : Setting Up Photoshop for UI Design

Section 3 : (Optional ? Can watch at the end) Color Calibration and Monitors for Designers

Section 4 : Basics of Photoshop for Beginners

Section 5 : Layer Styles Basics for UI Design

Section 6 : Gradients in Web and UI Design

Section 7 : Using Patterns in Web and UI Design

Section 5 : Layer Styles Basics for UI Design

Section 8 : Basics of UI Design | Light, Shadows, Color schemes & Typography

Section 9 : UI Design Exercises & Challanges with Step by Step solutions

Section 10 : Image Editing 101 for UI Designers

Curriculum

  Section 1 : Introductions
1
What this course will cover?

  Section 2 : Setting Up Photoshop for UI Design
2
Photoshop Preferences for UI Design & better performance - Updated
3
Color Proof Settings - Updated
4
Color Profile Settings for UI Design- Updated
5
Creating Custom Shortcuts for Photoshop - Updated Preview
6
Installing Photoshop Scripts and setting Keyboard Shortcuts for them - Updated
7
Installing Photoshop Scripts on MAC OS ? Student Request Lecture
8
Photoshop Extensions used by UI Designers - Updated
9
Super Powers of Photoshop Extensions (Demonstration) - NEW
10
How to Install Photoshop Extensions in CC2018 & CS6 (MAC and Windows)
11
Photoshop Workspace(Panels) setup for UI Design ? Updated

  Section 3 : (Optional ? Can watch at the end) Color Calibration and Monitors for Designers
12
What color calibration is and what tools are there to do calibration
13
How to perform Color Calibration on Windows or MAC Preview
14
Which monitor is good for designers (TFT, TN, IPS or PLS)

  Section 4 : Basics of Photoshop for Beginners
15
How Photoshop Interface Works
16
Customizing Photoshop Toolbar? Student Request Lecture
17
New Document Setup for UI Design
18
What are artboards and how to use them? Preview
19
How layers works and Basics of Layer panel controls
20
Layers Panel ? Filtering and finding layers
21
Type Tool
22
Character Panel
23
Paragraph Panel
24
Shape Tool for UI Design (Combine and Subtract Shapes)
25
How to use Pen Tool for UI Design
26
Student Request: How to use pen tool in Icon Design?
27
Using Selections in different ways (Selection + Lasso Tool)
28
Alignments Preview
29
Using Clipping Masks in UI Design
30
Exercise Challenge : Clipping Mask
31
Layer Masks
32
Smart Objects
33
Linked Smart Objects
34
Layer Comps usage in Photoshop
35
Commonly used Keyboard Shortcuts Preview
36
Smart Guides and Smart Snapping in Photoshop

  Section 5 : Layer Styles Basics for UI Design
37
Using Multiple Layer Shadow Effects in UI Design (PSD Excercise File Included)
38
Using Inner Shadow Effect
39
Using Layer Stroke Effect
40
Re-using Layer Styles

  Section 6 : Gradients in Web and UI Design
41
What are Gradients? Preview
42
Examples of Gradients usage in Web and UI Design
43
3 ways to create gradients in Photoshop
44
Using Gradient Overlay Layer Style
45
Gradient Editor Deep Dive

  Section 7 : Using Patterns in Web and UI Design
46
What are Patterns and their Usage in UI Web Design?
47
Methods of applying Patterns In Photoshop
48
How to create patterns from an image file in Photoshop
49
Installing and using .PAT pattern files in Photoshop

  Section 8 : Basics of UI Design | Light, Shadows, Color schemes & Typography
50
Light and Shadow (Important Concept) Preview
51
Example usage of Light and Shadow in UI Design
52
Color Schemes in UI Design for Beginners
53
Getting Color Schemes from Logo and using HSL Basics
54
Using Online Tools for creating Color Schemes
55
Typography or Font Selection for Beginners
56
What are Grids in Web and UI Design and how to use Grids
57
How to create Grids in Photoshop (Two methods)

  Section 9 : UI Design Exercises & Challanges with Step by Step solutions
58
Exercise Challenge : Soft Button Preview
59
Challange SOLUTION: Soft Button (Step by Step)
60
Exercise Challenge : 3D Button
61
Exercise Mastering Pressed or Inset Effect in UI Design
62
Exercise Modern Header/Hero area Design (PART 1)
63
Exercise Modern Header/Hero area Design (Part 2)
64
Exercise Modern Hero Area Design (Variation 2nd)
65
Exercise Modern Header/Hero Design with Color Overlay Technique
66
Modern Header Design: Masked Gradient Effect
67
Tabbed navigation Design Introduction
68
Tabbed navigation Design ? Part 1 Preview
69
Tabbed navigation Design ? Part 2

  Section 10 : Image Editing 101 for UI Designers
70
Removing white background from image with blending options
71
Removing any background quickly with Magnetic Lasso and Refine Edge
72
UPDATE: Removing background with Select and Mask
73
Removing specific parts of an image using Spot Healing Brush
74
Enhancing Pop effect of your images using Adjustment layers

Frequently Asked Questions

It is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.