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 I Learn?
- Start your Career as UI Designer
- Learn the settings necessary for UI Design Process
- Learn all the Basic tools of Photoshop for UI Design
- Start using Photoshop with solid foundation in UI Design
- Learn all the Photoshop Shortcuts for UI Design
- How to use Photoshop Extensions to speed up UI Desing Process
- Tips and Techniques for Efficient usage of Photoshop for UI Design
- Learn how to use Custom Scripts in Photoshop for UI Design
- Learn about Color schemes and Typography Online tools
- Learn how to use Gradients and Patterns in UI Design
- Create Wireframes and learn the tools needed to create them
- Learn how to design MODERN DASHBOARD graphs and elements
- Learn how to design MODERN HERO/HEADERS of Websites
Who is the target audience?
- Novice/Beginner Level Designers
- Web Designer
- Graphic Designer
- Web Developers who wants to learn UI Design
- UI Designer who wants more advaced techniques
Requirements
- Passion to become a UI Designer
- Minimum Photoshop CC or Latest version of Photoshop
Course Curriculum
| Introductions | |||
| 1.1) Upload And Review Your Work-1 | 00:03:00 | ||
| Setting Up Photoshop for UI Design | |||
| 2.2) Setting up Photoshop CC Preferences | 00:06:00 | ||
| 2.3) Color Profile Settings for ui design | 00:05:00 | ||
| 2.5) Creating Custom Shortcut Keys | 00:04:00 | ||
| 2.6) Installing scripts in Photoshop | 00:06:00 | ||
| 2.8) What area Photoshop Extensions | 00:07:00 | ||
| 2.9) Power of Photoshop Extensions | 00:09:00 | ||
| 2.10) How to install Extension in mac and win update | 00:16:00 | ||
| (Optional → Can watch at the end) Color Calibration and Monitors for Designers | |||
| 2.5-1 Color Calibration | 00:08:00 | ||
| 2.5-2 Monitor You Need-1 | 00:02:00 | ||
| 2.5 – 3 OS Based clor Calibration | 00:07:00 | ||
| Basics of Photoshop for Beginners | |||
| 00.Customize Toolbar | 00:04:00 | ||
| 01.how Photoshop interface works | 00:05:00 | ||
| 02.creating photoshop new document | 00:04:00 | ||
| 03.what are artboards | 00:06:00 | ||
| 04.Layers Panel Part 1 | 00:06:00 | ||
| 05.Layer Panel Filtering And Finding Part 2 | 00:06:00 | ||
| 07.Type tool | 00:05:00 | ||
| 08.Character Panel | 00:07:00 | ||
| 09.Paragraph Panel | 00:04:00 | ||
| 10.New Shape Tool | 00:08:00 | ||
| 12.Deep dive in Pen Tool | 00:16:00 | ||
| 12.selections april2017 New | 00:07:00 | ||
| 13.pen tool in web design | 00:04:00 | ||
| 14.Alignments | 00:06:00 | ||
| 15.common-shortcuts | 00:15:00 | ||
| 16.Clipping_Masks | 00:02:00 | ||
| 17.exercise clipping mask | 00:01:00 | ||
| 18.Layer Masks HB | 00:05:00 | ||
| 19.smart_objects | 00:08:00 | ||
| 20.linked smart objects_Revised | 00:07:00 | ||
| 21.Layer comps usage | 00:06:00 | ||
| 22 Using Smart Guides In Photoshop-1 | 00:05:00 | ||
| Layer Styles Basics for UI Design | |||
| 1.drop_shadow_layer_effect | 00:04:00 | ||
| 2.inner_shadow_UI_Design | 00:02:00 | ||
| 3.stroke effect | 00:03:00 | ||
| 4. Re-using layer styles | 00:02:00 | ||
| Gradients in Web and UI Design | |||
| 1.what.are.gradients | 00:02:00 | ||
| 2.uses.of.gradients | 00:04:00 | ||
| 3.3ways-to-create-gradients | 00:05:00 | ||
| 4.how to use gradient editor | 00:08:00 | ||
| 5.using-gradient-overlay | 00:06:00 | ||
| Using Patterns in Web and UI Design | |||
| 1.what are patterns | 00:02:00 | ||
| 2. two methods of applying patterns | 00:05:00 | ||
| 3.create Pattern From an Img File | 00:03:00 | ||
| 04. using .pat files in photoshop | 00:05:00 | ||
| Basics of UI Design | Light, Shadows, Color schemes & Typography | |||
| 01. How light and shadow works in UI Design | 00:01:00 | ||
| 2.examples of lightshadow | 00:02:00 | ||
| 3.color schemes for beginners | 00:02:00 | ||
| 4.getting scheme from logo and hsb | 00:01:00 | ||
| 5.online tools for color schemes | 00:06:00 | ||
| 6.how to choose fonts and typography | 00:09:00 | ||
| 7.Using Grids for Web Design | 00:06:00 | ||
| 8.Creating Grids In Photoshop | 00:06:00 | ||
| UI Design Exercises & Challanges with Step by Step solutions | |||
| 1.soft-shadow button challange | 00:01:00 | ||
| 2.soft_button_solution | 00:13:00 | ||
| 3.3d Button Challange | 00:01:00 | ||
| 4.Pressed effect in Photoshop | 00:07:00 | ||
| 5.modern pattern part 1 | 00:09:00 | ||
| 6.modern header design part 2 | 00:09:00 | ||
| 7.moder header design new variation | 00:09:00 | ||
| 8.color overlay header | 00:11:00 | ||
| 09 Gradienteffect Header Design-audiosynced | 00:13:00 | ||
| 9.Actual Exercise Transparent Image Header-1 | 00:13:00 | ||
| 10.tabs intro | 00:01:00 | ||
| 11.tabs-part1 | 00:14:00 | ||
| 12.tabs-part2 | 00:08:00 | ||
| Image Editing 101 for UI Designers | |||
| 1.removing White Bg With Blending Options | 00:03:00 | ||
| 2.Spot Healing brush usage | 00:04:00 | ||
| 3.making Colors Pop in Photohsop | 00:07:00 | ||
| 4.magnetic Lasso Tool to remove background | 00:16:00 | ||
| 5.select And Mask Tool | 00:10:00 | ||
| IOS App Design : Exercise Iphone Food Deals App | |||
| 1.Gathering Resources IOS App-Design | 00:04:00 | ||
| 2.Lets Start The IOS App Design | 00:05:00 | ||
| 3.Adding Images To Design the App design | 00:06:00 | ||
| 4.Adding Text On App Screen | 00:06:00 | ||
| 5.Adding Phone And Book Now Buttons | 00:12:00 | ||
| 6.Using Mobile Mockups | 00:04:00 | ||
| UDEMY ONLY App Design Challane-exercise | 00:06:00 | ||
| BONUS: Dribbble styled Dashboard UI Design (Student Request) | |||
| 1.area graph base design | 00:04:00 | ||
| 2area graph grid | 00:05:00 | ||
| 3.adding text to graph area | 00:08:00 | ||
| 4.drwaing area graph with pen tool | 00:04:00 | ||
| 5.designing extras adding dots and hover info | 00:06:00 | ||
| 7.final Adjustments To Area Graph-1 | 00:10:00 | ||
| 8.area graph to line graph | 00:04:00 | ||
| 9.circular bar graph base shape.mp4 | 00:06:00 | ||
| 10.adding Gradients And Shadows To Circular Graphs-1 | 00:13:00 | ||
| 11.designing stats with text | 00:09:00 | ||
| 12.bar Graph Design In Photoshop Pt | 00:09:00 | ||
| 13.Bar Graph Adding Text | 00:06:00 | ||
| 14.Student-request-ciruclar-percentage graph | 00:08:00 | ||
| Wifreframes in UI Design + Ultimate Web Design Challange | |||
| 1.what Are Wirefreams | 00:00:00 | ||
| 2.Tools Used For Wireframes | 00:12:00 | ||
| Dribbble Shot Redesign Exercise → Student Request | |||
| dribbble redesig part 1 | 00:15:00 | ||
| dribble shot part 2 | 00:15:00 | ||
| Exercises : Form UI Design with Photoshop | |||
| 1.Base Of Login Form | 00:07:00 | ||
| 2.Form Fields Design | 00:12:00 | ||
| 3.Finishing Form Design | 00:12:00 | ||
| Pro Secret Tips and Tools for Designers and Developers | |||
| Converting psd to CSS | 00:07:00 | ||
| Exporting Images from Photoshop | 00:07:00 | ||
| Tips on Using Grids | 00:02:00 | ||
| Photoshop Features Updates and New Versions | |||
| 3.Match Fonts Cc2015.5-1 | 00:03:00 | ||
| Cc2018 Update-1 | 00:04:00 | ||
FAQs
This course is for anyone who's interested in this topic and wants to learn more about it. This course will also help you gain potential professional skills.
No prior qualifications are needed to take this course.
You can study this course from wherever and whenever you want. You can study at your own pace and from any device. Just log in to your account from any device and start learning!
Yes, there is a test at the end of the course. Once you’ve completed all the modules of the course, you will have to give a multiple-choice test. The questions will be based on the topics of the modules you studied. And of course, you can take the test at any time, from any device and from anywhere you want.
Don’t worry if you fail the test, you can retake it as many times as you want.
You don’t have to wait a minute after your payment has been received, you can begin immediately. You will create your login details during the checkout process and we will also send you an email confirming your login details.
We make the payment process easy for you. You can either use your Visa, MasterCard, American Express, Solo cards or PayPal account to pay for the online course. We use the latest SSL encryption for all transactions, so your order is safe and secure.
After you complete the course, you’ll immediately receive a free printable PDF certificate. Hard Copy certificate is also available, and you can get one for just £9! You may have to wait for 3 to 9 days to get the hard copy certificate.
