Brochure
Enquire
- What this course will cover?
- Why UI Design Matters?
UI Design with Photoshop from Beginner to Expert in 15 days
Quick Facts
| particular | details | |||
|---|---|---|---|---|
|
Medium of instructions
English
|
Mode of learning
Self study
|
Mode of Delivery
Video and Text Based
|
Course and certificate fees
Fees information
₹ 549 ₹3,499
certificate availability
Yes
certificate providing authority
Udemy
The syllabus
Introduction to UI Design and why it matters
Setting Up Photoshop for UI Design
- Photoshop Preferences for UI Design & better performance - Updated
- Color Proof Settings - Updated
- Color Profile Settings for UI Design- Updated
- Creating Custom Shortcuts for Photoshop - Updated
- Keyboard Shortcut problems on MAC OS → Student Request Lecture
- Photoshop Workspace(Panels) setup for UI Design → Updated
- Photoshop Settings for UI Design
- Which Monitor is best for UI Designers
- Download all resources and psd source files for this course
Basics of Photoshop for Beginners
- How Photoshop Interface Works
- Customizing Photoshop Toolbar→ Student Request Lecture
- New Document Setup for UI Design
- What are artboards and how to use them?
- How layers works and Basics of Layer panel controls
- Layers Panel → Filtering and finding layers
- Type Tool
- Character Panel
- Paragraph Panel
- Shape Tool for UI Design (Combine and Subtract Shapes)
- How to use Pen Tool for UI Design
- Student Request: How to use pen tool in Icon Design?
- Using Selections in different ways (Selection + Lasso Tool)
- Alignments
- Using Clipping Masks in UI Design
- Exercise Challenge : Clipping Mask
- Clipping Mask Simple Design Challenge
- Layer Masks
- Smart Objects
- Linked Smart Objects
- Layer Comps usage in Photoshop
- MAC users : Shortcut Key Help for Photoshop
- Commonly used Keyboard Shortcuts
- Smart Guides and Smart Snapping in Photoshop
- Installing and Using Action files in Photoshop → Youtube
- Creating your own Action set in Photohsop → Youtube
- Basic Tools Quiz
- Students FAQ Video → Answered common problems
Layer Styles Basics for UI Design
- Using Multiple Layer Shadow Effects in UI Design (PSD Excercise File Included)
- Using Inner Shadow Effect
- Using Layer Stroke Effect
- Re-using Layer Styles
Gradients in Web and UI Design
- What are Gradients?
- Examples of Gradients usage in Web and UI Design
- 3 ways to create gradients in Photoshop
- Using Gradient Overlay Layer Style
- Gradient Editor Deep Dive
Using Patterns in Web and UI Design
- What are Patterns and their Usage in UI Web Design?
- Methods of applying Patterns In Photoshop
- How to create patterns from an image file in Photoshop
- Installing and using .PAT pattern files in Photoshop
- Quiz: What Layer styles are used?
Basics of UI Design | Light, Shadows, Color schemes & Typography
- Light and Shadow (Important Concept)
- Example usage of Light and Shadow in UI Design
- Color Schemes in UI Design for Beginners
- Getting Color Schemes from Logo and using HSL Basics
- Using Online Tools for creating Color Schemes
- Resources : Online Tools for Color Schemes PDF
- Typography or Font Selection for Beginners
- Recourse → Typography & Font Pairing for Beginners
Using Grids in Web and UI Design
- What are Grids in Web and UI Design and how to use Grids
- How to create Grids in Photoshop (Two methods)
- Using Bootstrap Grid explained in Photoshop → Student Request Video
Installing and Using Photoshop Plugins and Scripts to automate tasks
- RESOURCES → Photoshop Scripts for UI Designers
- Installing Photoshop Scripts and setting Keyboard Shortcuts for them - Updated
- Installing Photoshop Scripts on MAC OS → Student Request Lecture
- RESOURCES → Photoshop CC Extensions for UI Design
- How to Install Photoshop Extensions in CC2018 & CS6 (MAC and Windows)
- Installing Extensions on MAC OS → Student Request Lecture
- Photoshop Extensions used by UI Designers - Updated
- Super Powers of Photoshop Extensions (Demonstration) - NEW
- Resources CS6 → Scripts & Extensions for Photoshop CS6
(Optional - Can Watch at the end) Color Calibration and Monitors for Designers
- What color calibration is and what tools are there to do
- How to perform Color Calibration on Windows or
- Quiz: Color Calibration & Monitors for Designers
UI Design Exercises & Challanges with Step by Step solutions
- Exercise Challenge : Soft Button
- Challange SOLUTION: Soft Button (Step by Step)
- Exercise Challenge : 3D Button
- Exercise Mastering Pressed or Inset Effect in UI Design
- Exercise Modern Header/Hero area Design (PART 1)
- Exercise Modern Header/Hero area Design (Part 2)
- Exercise Modern Hero Area Design (Variation 2nd)
- Exercise Modern Header/Hero Design with Color Overlay Technique
- Modern Header Design: Masked Gradient Effect
- Tabbed navigation Design Introduction
- Tabbed navigation Design → Part 1
- Tabbed navigation Design → Part 2
Image Editing 101 for UI Designers
- Removing white background from image with blending options
- Removing any background quickly with Magnetic Lasso and Refine Edge
- UPDATE: Removing background with Select and Mask
- Select Subject New feature Photoshop CC2018
- Removing specific parts of an image using Spot Healing Brush
- Enhancing Pop effect of your images using Adjustment layers
IOS App Design : Exercise Iphone Food Deals App
- Fonts and Images used in Iphone App Design
- Starting Iphone App Design
- Adding Images to Iphone App Screen
- Adding text to Iphone App Screen
- Adding Buttons to Iphone App Screen
- Using Iphone Mockup to show your designs
- App Design Challange - Design and Submit your Mobile App Screen
Bonus: Dribbble styled Dashboard UI Design (Student Request)
- Exercise AREA GRAPH: Design Base
- Exercise AREA GRAPH: Grid Design
- Exercise AREA GRAPH: Adding text and Legends
- Exercsie AREA GRAPH : Design Main Red Graph Shape
- Exercsie AREA GRAPH: Adding Extra Detials
- Exercise AREA GRAPH: Alignment and Balance
- Exercise LINE GRAPH: Desiging Line Graph from Area Graph
- Exercise Circular Graph: Design Base shapes of Circular graph
- Exercise Circular Graph: Adding Styles to Circular graph fills
- Exercise Design Stats with text
- Exercise Bar Graph Design: Part 1
- Exercise Bar Graph Design : Part 2
- Student Request → Custom Percentage Circular Bar Graph
Exercises : Form UI Design with Photoshop
- Exercise Login Form: Base Design
- Exercise Login Form: Designing Input Fields
- Exercise Login Form: Finishing Login Form
- Exercise Login Form: Base Design
- Exercise Login Form: Designing Input Fields
- Exercise Login Form: Finishing Login Form
Exercises: Form UI Design with Photoshop
- Exercise Login Form: Base Design
- Exercise Login Form: Designing Input Fields
- Exercise Login Form: Finishing Login Form
Dribbble Shot Redesign Exercise - Student Request
- Dribbble Realistic Buttons Redesign Part 1
- Dribbble Realistic Buttons Redesign Part 2
Wifreframes in UI Design + Ultimate Web Design Challange
- What are Wireframes ?
- Online Tools & Softwares to to create Wireframes
- Rescources for creating Wireframe
- Convert this Wireframe to an actual Web Design
Student Review Sessions
- Improve your Designs by looking at other designer's mistakes
Pro Secret Tips and Tools for Designers and Developers
- Converting PSD to CSS (Tips, tools and Extensions for Web Designers/Developers)
- Tips for Using Grids while Designing
- Exporting Images for Web and UI Design
Photoshop Features Updates and New Versions
- New Features in Photoshop CC2015 for UI Designers
- Font Match Feature in CC2017
- CC2018 New Features for UI Designers
- What to do NEXT?
- BONUS LECTURE
Articles
Popular Articles
prev
next
Latest Articles
prev
next
