UI Design with Photoshop – From Beginner to Expert

$49.99

UI Design with Photoshop – From Beginner to Expert is the ultimate guide for beginners to learn Photoshop & User Interface Design for Web Design & Mobile App Design! Master basic tools of Photoshop that are specific to UI Design, like Color Profiles, the Pen Tool, Artboards, Layer Styles, and so much more! Project Files included.

Length: 11 hrs 41 min

This title is available in the Total Training All-Access library.

Subscribe Now

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

 

Sample clip

 

 

 

CHAPTER 01: INTRODUCTION
Course Intro
Upload and Review Your Work
 
CHAPTER 02: SETTING UP ADOBE® PHOTOSHOP® FOR UI DESIGN
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
What is Color Calibration?
OS-Based Color Calibration
Which Monitor is Good for Designers?
 
CHAPTER 04: BASICS OF PHOTOSHOP
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
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
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
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
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
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
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
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
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
Login Form Exercise: Base Design
Login Form Exercise: Input Fields Design
Login Form Exercise: Finishing Up
 
CHAPTER 14: DRIBBBLE SHOT REDESIGN EXERCISE
Dribbble Realistic Buttons Redesign, Part 1
Dribbble Realistic Buttons Redesign, Part 2
 
CHAPTER 15: WIREFRAMES IN UI DESIGN
What are Wireframes?
Tools Used for Wireframes
 
CHAPTER 16: PRO TIPS FOR DESIGNERS AND DEVELOPERS
Converting PSD to CSS
Exporting Images from Photoshop
Tips for Using Grids
 
CHAPTER 17: PHOTOSHOP FEATURES UPDATES
Font Matching
New Features in Photoshop CC 2018

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.

You may also like…