UI Design with Photoshop - From Beginner to Expert

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 level in Photoshop, this UI Design with Photoshop - From Beginner to Expert course is for YOU.

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

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

Take This Course Now and Start Your Career as a UI Designer!

Instructor: Muhammad Ahsan Pervaiz
Muhammad Ahsan Pervaiz is an award-winning, multi-talented designer. His hunger for perfecting the User Interface from all aspects has led him to work with clients all over the world, including the USA, Australia, UK, and United Arab Emirates. With a career spanning over 10 years, his work includes projects for FORTUNE 500 companies such as INTEL, PANASONIC and Coca Cola.

Muhammad’s experience includes improving the User Experience of the UK GP Tools Mobile App, games and e-commerce websites, and creating new design patterns for showing passwords safely in password fields. He’s worked from App Icon Design to App UI Design, and from wireframes and prototypes to mockup design.

His ultimate goal is to make more awesome UI Designers, and ease the pain of learning for newcomers in this field of UI Design.

Chapters
CHAPTER 01: INTRODUCTION 0:09:35

1.  Course Intro
2.  Upload and Review Your Work

CHAPTER 02: SETTING UP ADOBE® PHOTOSHOP® FOR UI DESIGN 1:05:41

•  Setting Photoshop Preferences
•  Color Profile Settings
•  Color Proof Settings
•  Creating Custom Shortcuts
•  Installing Photoshop Scripts
•  Installing Scripts on Mac
•  Photoshop Extensions for UI Design
•  The Power of Extensions
•  Installing Extensions
•  Setting Up Panels for UI Design work

CHAPTER 03: COLOR CALIBRATION 0:18:14

•  What is Color Calibration?
•  OS-Based Color Calibration
•  Which Monitor is Good for Designers?

CHAPTER 04: BASICS OF PHOTOSHOP 2:19:00

•  Customizing the Photoshop Toolbar
•  How the Photoshop Interface Works
•  Creating a New Document
•  What are Artboards?
•  Using the Layers Panel
•  Filtering and Finding in the Layers Panel
•  Using the Type Tool
•  Using the Character Panel
•  Using the Paragraph Panel
•  Using the New Shape Tool
•  Pen Tool Basics
•  The Pen Tool in Depth
•  Making Selections
•  Alignments
•  Common Shortcuts
•  Clipping Masks
•  Clipping Mask Exercise
•  Layer Masks
•  Smart Objects
•  Linked Smart Objects
•  Using Layer Comps
•  Using Smart Guides

CHAPTER 05: LAYER STYLES IN UI DESIGN 0:10:43

•  Creating a Drop Shadow Layer Effect
•  Creating an Inner Shadow Effect
•  Creating a Stroke Effect
•  Re-using Layer Styles

CHAPTER 06: GRADIENTS IN WEB AND UI DESIGN 0:23:38

•  What are Gradients?
•  Examples of Using Gradients
•  Ways to Create Gradients in Photoshop
•  Using a Gradient Overlay
•  Using the Gradient Editor

CHAPTER 07: PATTERNS IN WEB AND UI DESIGN 0:15:13

•  What are Patterns and How to Use Them
•  Applying Patterns
•  Creating a Pattern from an Image File
•  Using .PAT files in Photoshop

CHAPTER 08: BASICS OF UI DESIGN 0:36:25

•  How Light and Shadow Work in UI Design
•  Examples of Light and Shadow
•  Color Schemes for Beginners
•  Getting Color Schemes from Logo and Using HSL
•  Online Tools for Color Schemes
•  Choosing Fonts and Typography
•  Using Grids for Web Design
•  Creating Grids in Photoshop

CHAPTER 09: UI DESIGN EXERCISES WITH SOLUTIONS 1:36:10

•  Soft Button Challenge
•  Soft Button Solution
•  3D Button Challenge
•  Pressed Effect in Photoshop
•  Modern Header Design Exercise, Part 1
•  Modern Header Design Exercise, Part 2
•  Modern Header Design, New Variation
•  Color Overlay Header
•  Transparency - Gradient Effect
•  Introduction to Tabs
•  Tabbed Navigation, Part 1
•  Tabbed Navigation, Part 2

CHAPTER 10: IMAGE EDITING 101 FOR UI DESIGNERS 0:40:57

•  Removing a White Background from an Image with Blending Options
•  Using the Magnetic Lasso to Quickly Remove a Background
•  Using Select and Mask to Remove a Background
•  Using the Spot Healing Brush
•  Using Adjustment Layers to Make Colors Pop

CHAPTER 11: IOS APP DESIGN EXERCISE 0:36:10

•  Gathering Resources
•  Starting the iOS App Design
•  Adding Images
•  Adding Text
•  Adding Buttons to iPhone® App Screen
•  Using Mobile Mockups

CHAPTER 12: DRIBBBLE STYLED DASHBOARD DESIGN EXERCISES 1:30:58

•  Area Graph Exercise: Design Base
•  Area Graph Exercise: Grid Design
•  Area Graph Exercise: Adding Text and Legends
•  Area Graph Exercise: Design Main Red Graph Shape
•  Area Graph Exercise: Adding Extra Details
•  Area Graph Exercise: Alignment and Balance
•  Line Graph Exercise: Design Line Graph from Area Graph
•  Circular Graph Exercise: Design Base Shapes
•  Circular Graph Exercise: Add Gradients and Shadows
•  Design Stats Exercise: Stats with Text
•  Bar Graph Exercise: Design a Bar Graph in Photoshop
•  Bar Graph Exercise: Adding Text
•  Creating a Circular Percentage Graph

CHAPTER 13: FORM DESIGN EXERCISES 0:30:37

•  Login Form Exercise: Base Design
•  Login Form Exercise: Input Fields Design
•  Login Form Exercise: Finishing Up

CHAPTER 14: DRIBBBLE SHOT REDESIGN EXERCISE 0:29:54

•  Dribbble Realistic Buttons Redesign, Part 1
•  Dribbble Realistic Buttons Redesign, Part 2

CHAPTER 15: WIREFRAMES IN UI DESIGN 0:15:57

•  What are Wireframes?
•  Tools Used for Wireframes

CHAPTER 16: PRO TIPS FOR DESIGNERS AND DEVELOPERS 0:14:47

•  Converting PSD to CSS
•  Exporting Images from Photoshop
•  Tips for Using Grids

CHAPTER 17: PHOTOSHOP FEATURES UPDATES 0:12:59

•  Font Matching
•  New Features in Photoshop CC 2018