UI Design in Photoshop - Get Started with UI Design Career

Ahsan Idrisi, UI UX Visual Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
84 Videos (8h 37m)
    • What this course is all about?

      4:04
    • How to submit your work for a review

      2:43
    • Lets setup Photoshop CC2017 Preferences for UI Design

      6:19
    • Setting Up Custom Keyboard Shortcuts in Photoshop

      4:19
    • Installing Scripts in Photoshop

      5:40
    • Installing Photoshop Scripts on MAC

      2:15
    • Photoshop Extensions for UI Designers

      7:09
    • Power of Photoshop extensions

      9:28
    • How to Install Photoshop Extensions

      5:46
    • Installing Extensions using ZXP Installer Photoshop CC2017

      6:29
    • Installing Photoshop extensions on MAC

      5:07
    • Setup Panels and Workspace for UI Design

      7:16
    • What is Color Calibration?

      8:24
    • Best Monitors (LED) for Designers

      2:21
    • Operating System Based Color Calibration

      7:29
    • How Photoshop's Interface Works

      5:03
    • Photohsop New Document

      4:12
    • What are Artboards?

      6:22
    • How layers works in Photoshop

      7:53
    • Text Panel in Photsohop

      4:38
    • Shape Tool in Photohsop

      6:34
    • Basics of Pen Tool

      2:53
    • More on using Pen Tool

      15:52
    • Aligningment in Photoshop

      6:02
    • Selections in Photohsop

      6:21
    • Common Shortcuts in Photoshop

      14:35
    • Using Layer Masks in Photoshop

      5:26
    • Using Clipping Mask

      2:48
    • Challange Exercise → Clipping Mask

      0:50
    • Using Smart Objects in Photoshop

      7:40
    • Linked Smart Objects in Photoshop

      7:00
    • Using Layer Comps in Photoshop

      6:27
    • Mastering Drop Shadow Layer Effects

      3:40
    • Using Inner Shadow Layer Effect

      2:17
    • Using Stroke Layer Effect

      2:43
    • Re-using Layer Styles

      2:03
    • What are Gradients?

      2:03
    • Use of Gradients in UI Design

      3:41
    • 3 ways to create Gradients in Photoshop

      4:49
    • Using Gradient Editor in Photoshop

      7:30
    • Using Gradient Overlay Layer Style

      5:34
    • What are Patterns and how we use them in Web Design?

      2:28
    • 2 Methods of applying patterns

      4:59
    • Creating Patterns from an image file

      2:35
    • Installing and using .pat files

      5:11
    • How Light and Shadow works in UI Design

      4:01
    • Examples of Light and Shadow usage

      2:22
    • Color Schemes for Beginners

      1:54
    • Using Hue Saturation and Brightness for Color Schemes

      1:28
    • Online Tools to create Color Schemes

      5:29
    • Selecting Fonts and Typography

      8:55
    • Using Grids in Web Design

      5:51
    • Creating Grids in Photoshop

      6:14
    • Soft Shadow Button Creation Challange

      0:25
    • Soft Shadow Button Design Solution

      12:47
    • 3D Button Design Challange

      1:12
    • Pressed Effect in Photoshop

      7:09
    • Modern Header Design Part 1

      8:46
    • Modern Header Design Part 2

      8:49
    • Modern Header Design variation

      9:02
    • Color Overlay Effects for Hero Area

      11:25
    • Transparent Masking Effect Header Exercise

      13:15
    • Designing Tabs in Photsohop

      0:58
    • Designing Tabs theme 1

      14:14
    • Designing Tabs theme 2

      8:08
    • Gathering Resources for IOS App Design

      4:00
    • Lets start the IOS App Design

      4:35
    • Adding menu items to IOS App

      5:47
    • Adding text to IOS App Screen

      5:30
    • Adding Buttons to IOS App Design

      11:51
    • Using App Mockups to show your designs

      4:12
    • Simple Trick to remove white backgrounds

      3:20
    • Removing small objects from image with Spot Healing

      4:26
    • Making Colors pop in images

      6:48
    • Removing Background with Magnetic Lasso tool

      15:53
    • Using Select and Mask tool to clean up background

      10:20
    • What are wireframes?

      3:45
    • Tools used to create wireframes

      11:59
    • Exercise →Redesign Dribbble Shot Part 1

      15:11
    • Exercise →Redesign Dribbble Shot Part 2

      14:43
    • Converting PSD to Coding Tips

      6:18
    • Exporting Images for Web Design Tips

      6:59
    • Tips on using Grids in Photoshop

      1:30
    • Font Match → New features in Photoshop CC2017

      2:46

About This Class

BEST SELLING Course (ALL IN ONE Adobe Photoshop Course)

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.

What will you 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

Course Structure

  • More than 20 Practice Examples and design Challenges to get you better at UI Designing
  • Quizzes to test your knowledge of Photoshop regarding UI Design

Student Request Lecture Series

A lot of lectures are added on weekly basis on the request of my current students so join in and request any design problem or anything new you want to learn

  • How to Install Photoshop ZXP extensions in CC2017 (Student Request Lecture)

Take This Course Now and Start your career as UI Designer

44c88ead

109

Students

--

Projects

Ahsan Idrisi

UI UX Visual Designer

I started my Freelancing Career just 8 years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 1 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects
I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing Page design contests.

Worked with Clients all over the world mostly from USA, Australia, UK, and United Arab Emirates while learning a lot about how to deal with clients while freelancing and how to present your work to them

Although I started as a UI Designer 6 years ago but I am playing with Photoshop since the year 2002

My ultimate aim is to make more Awesome UI Designers and ease the pain of learning from new comers in this field of UI Design