Web Design: UI Design & Photoshop for Websites & Mobile Apps
OfCourse
Summary
- Certificate of completion - Free
- Tutor is available to students
Add to basket or enquire
Overview
This course acts as an ultimate guide for Beginners to learn Photoshop & User Interface Design for Websites and Mobile Apps. You can apply the knowledge you learn to Landing Page design, Web App or Mobile App Design. It will cover all the Common Shortcuts, tools and Secret Extensions to increase speed and efficiency in Photoshop.
Certificates
Certificate of completion
Digital certificate - Included
Course media
Description
Course Highlights
- Includes 120 lectures and 11 hours of content.
- Tips and Techniques for Efficient usage of Photoshop for UI Design.
- Will cover all the Common Shortcuts, tools and Secret Extensions to increase speed and efficiency in Photoshop.
- Learn all the Photoshop Shortcuts for UI Design and all the Basic tools of Photoshop.
Course Overview
This course is ideal for any Novice/Beginner Level Designers, Website or Graphic Designers. It is also suited to Web Developers that want to learn UI Design and those looking for advanced photoshop techniques.
Instructor Bio
Muhammad Ahsan Pervaiz has worked for companies like INTEL, PANASONIC and Coca Cola. In just 1 year of Serious UI Designing, Muhammad made my place on DRIBBBLE. He has worked from App Icon Design to App UI Design, from wire-frames, prototypes and Mockups Design and won many Landing Page design contests.
Course Curriculum
Introduction
- What this course will cover?
- Share your new course with friends and family!
- Say hi to your fellow students!
- Meet your Instructor
- Goal of this course
- How to upload your design assignments
- PTSD Files to be used within the course
Setting Up Photoshop for UI Design
- Photoshop Preferences for UI Design & better performance
- Color Proof Settings
- Color Profile Settings for ui design
- Creating Custom Shortcuts for Photoshop
- Installing Photoshop Scripts and setting Keyboard Shortcuts for them
- Installing Photoshop Scripts on MAC OS
- Photoshop Extensions used by UI Designers
- Super Powers of Photoshop Extensions
- How To Install Extensions
- How to Install ZXP Extension in Photoshop CC2015
- Download ZXP Installer for CC2015
- Installing Photoshop Extensions on MAC OS
- Photoshop Workspace(Panels) setup for UI Design
- Quiz - Photoshop Settings for UI Design
Colour Calibration and Monitors for Designers
- What color calibration is and what tools are there to do calibration
- How to perform Color Calibration on Windows or MAC
- Which monitor is good for designers (TFT, TN, IPS or PLS)
- LCD Test Website (Colour Calibration)
Basics of Photoshop for Beginners
- How Photoshop Interface Works
- New Document Setup for UI Design
- What are artboards and how to use them?
- Concept of Layers and Layers Panel Deep Dive
- Type Tool (Character and Paragraph Panel)
- Shape Tool for UI Design (Combine and Subtract Shapes)
- How to use Pen Tool for UI Design
- Shape Tool for UI Design (Combine and Subtract Shapes)
- Alignments
- Selections we use in UI Design
- Using Clipping Masks in UI Design
- Exercise Clipping Mask
- Exercise Challenge : Clipping Mask
- Layer Masks
- Smart objects
- Linked Smart Objects
- Layer Comps usage in Photoshop
- Commonly used Keyboard Shortcuts
- Quiz 3: Basic Tools Quiz
Layer Styles Basics for UI Design
- Using Multiple Layer Shadow Effects in UI Design
- Drop Shadow Exercise File
- Using Inner Shadow Effect
- Using Layer Stroke Effect
- Re-using Layer Styles
Gradients in Web and UI Design
- What are Gradients?
- Blend Gradient Creator Online
- 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
- MAC Photoshop Presets folder path.png
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
- Resources : PDF Typography and Font pairing
- Typography or Font Selection for Beginners
- What are Grids in Web and UI Design and how to use Grids
- How to create Grids in Photoshop (Two methods)
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 Options-1
- Removing any background quickly with Magnetic Lasso and Refine Edge
- UPDATE: Removing background with Select and Mask
- 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
- Resources: Download PSD and Fonts for IOS App Design
- Starting Iphone App Design
- Adding text to Iphone App Screen
- Adding Buttons to Iphone App Screen
- Using Iphone Mockup to show your designs
BONUS: Dribbble styled Dashboard UI Design
- 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 - PSD Resources
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
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 Comparison for CC2014 and CC2015
- New Features in Photoshop CC2015 for UI Designers
- New Feature: Font Match in Photoshop CC2015.5
- Few Bugs and Problems with Photoshop CC2015
Why Choose OfCourse Learning?
- All courses are taught by verified experts
- Students enjoy 24/7 access to their courses
- Courses can be accessed on any device
- Students get lifetime access to their courses so they can work at their own pace
- On completion, students receive a course certificate from a recognised educational institution
- Become a part of a global learning community where you can talk with teachers and students about the course
Who is this course for?
Suitable for any Novice/Beginner Level Designers, Website Designers or Graphic Designers.
Requirements
This course has no prerequisites
Career path
Become a Web Designer & Developer
Reviews
Currently there are no reviews for this course. Be the first to leave a review.
Add to basket or enquire
Course provided by
Legal information
This course is advertised on reed.co.uk by the Course Provider, whose terms and conditions apply. Purchases are made directly from the Course Provider, and as such, content and materials are supplied by the Course Provider directly. Reed is acting as agent and not reseller in relation to this course. Reed's only responsibility is to facilitate your payment for the course. It is your responsibility to review and agree to the Course Provider's terms and conditions and satisfy yourself as to the suitability of the course you intend to purchase. Reed will not have any responsibility for the content of the course and/or associated materials.
