Autoplay
Autocomplete
Previous Lesson
Complete and Continue
UI Design in Photoshop - Start Designing Web & Mobile Apps
Introduction to course and Instructor
What we will cover in this course (2:43)
Meet your Instructor (1:12)
Goal of this course (0:28)
Setting up Photoshop for UI Design
Photoshop preferences for UI Design (6:19)
Color Profile Settings for UI Design (4:29)
Creating custom shortcuts in Photoshop (4:20)
Proof color settings for UI Design (1:11)
Installing Photoshop Scripts on PC (5:40)
Article → Photoshop Shortcuts for MAC Users
Installing Photoshop Scripts on MAC (2:15)
Photoshop Extensions for UI Designers (7:09)
How to Install UI Design Extensions (5:47)
Productive Power of Photoshop Extensions (9:28)
Resources → Photoshop Scripts Links
Resources → Photoshop Extensions
How to use ZXPInstaller to install Photoshop Extensions (6:29)
Installing Extensions on MAC (5:07)
Setting Up Photoshop Panels (7:16)
Quiz → about Photoshop Preferences
Color Calibration & Monitors for Designers
What is Color Calibration? (8:24)
Operating system based color calibration (7:29)
Best monitors (LEDs) for Designers (2:21)
Quiz → Color calibration and monitor
Basics of Photoshop for UI Design
Intro to Photoshop Interface (5:03)
New Document in Photoshop (4:12)
What are artboards and how to use them? (6:22)
Layers Panel Deep Dive (7:53)
Text Panel (4:38)
Using Pen Tool (2:53)
Pen tool to create Icons (15:52)
Shape Tools (6:34)
Alignment (6:02)
Selections (6:21)
Common Photoshop Shortcut Keys for UI Design (14:35)
Clipping Mask in UI Design (2:48)
Clipping Mask Challange (0:50)
What are Layer Masks? (5:26)
Smart Objects (7:40)
Linked Smart Objects (7:00)
Layers Comps (6:27)
Quiz → Photoshop Basics
Layer Styles for UI Design
Multiple Dropshadow Effects with Exercise (3:40)
Using Inner Shadow or Pressed Effect (2:17)
Using Stroke or Outline Effect (2:43)
How to save layer styles and re-use them (2:03)
Gradients in Web & UI Design
What are Gradients? (2:03)
Use of Gradients in Web & UI Design (3:41)
3 methods to create Gradients in Photoshop (4:49)
Using Gradient Overlay Layer Style (5:34)
Gradient Editor Deep dive (7:30)
Using Patterns in Web & UI Design
What are patterns? (2:28)
2 methods of applying Patterns in Photoshop (4:59)
How to create a pattern from an image (2:35)
How to use .PAT Photoshop pattern files (5:11)
Basics of UI Design → Light, Shadow, Color Schemes & Typography
Concept of Light and Shadow in UI Design (4:01)
Example use of Light & Shadow in UI Design (2:22)
Color Schemes for Beginners (1:54)
Creating Color Schemes using Hue Saturation Brightness HSB (1:29)
Online tools for Color Schemes (5:29)
How to select fonts and typography (8:55)
What are Grids in Web and UI Design and how to use Grids? (5:51)
How to create Grids in Photoshop (Two methods) (6:14)
Exercise and Design Challanges with Step by Step solutions
Soft Diffuse Shadow Button → Design Challange (0:25)
Soft Diffuse Shadow Button → Step by Step Solution (12:47)
3D button Challange (1:12)
Inset Pressed Effect in Photoshop (7:09)
Modern Header Design → Part 1 (8:46)
Modern Header Design → Part 2 (8:49)
Modern Header Design → Part 3 (9:02)
Color Overlay Hero Header Design (11:25)
Grandual Transparency Header Design Exercise (13:15)
Image Editing 101 for UI Designers
Removing White Background from image with blending options (3:20)
Using Spot healing to remove small objects from image (4:26)
Making Color pop in an image with Step by step Exercise (6:48)
Magnetic Lasso with Refine Edge → Image Background removal (15:53)
Using Select and Mask to remove background (10:20)
IOS App Design : Exercise Iphone Food Deals App
Getting things ready for IOS App Design (4:00)
Lets start the IOS App Design (4:35)
Adding images to Iphone App Design (5:47)
Adding text to Iphone App Design (5:30)
Adding Buttons and final adjustements to Iphone App Design (11:51)
Using Mockups to present your App (4:12)
Resources → IOS App Design
BONUS → Dribble Styled Dashboard UI Design
Area Graph Base Design (3:32)
Creating Graph Grid (5:07)
Adding Text to Graph Area (8:04)
Drawing Red Graph with Pen tool (3:46)
Adding Extra Dots and Tooltip Buttons (5:49)
Final Adjustments to Area Graph Design (10:04)
Designing Line Graph from Area Graph (3:47)
Circular Bar Graph Base Design (5:31)
Adding Shadows and Gradients to Circular Bar Graph (13:24)
Designing Text Stats (8:41)
Creating Bar Graph (9:12)
Adding Text to Bar Graph (5:29)
Resources → Download Exercise PSD for Dashboard Design Section
Custom Percentage Graph on Student Request (8:26)
Form UI Design
Design Base of Login Form (6:59)
Adding Form Fields (12:08)
Finalizing Form Design (11:30)
Resource → Form Design PSD File
Wifreframes in UI Design + Ultimate Web Design Challange
What Are Wirefreams? (3:45)
Online apps and Softwares to create Wireframes (11:59)
Links and Resources for Creating Wireframes
Ultimate Design Challange for Students → Design a website based on wireframe
Pro Tips for UI Designers
Tips on using Grids (1:30)
How to get CSS code from Photoshop Design (6:18)
Exporting images for Web (6:59)
Photoshop Updates and New Features
Good Features of Photoshop CC2015 (5:18)
Font Match New Features in Photoshop CC2015.5 (2:46)
Clipping Mask in UI Design
Download
exercise-clipping_masks.psd
Complete and Continue