Become a Designer! Photoshop MasterClass From Beginner to Pro
Learn Photoshop, Adobe XD, Web Design, Mobile App Design, Graphic Design and much more! 80 hours taught by an Adobe Certified Photoshop Instructor. Unlimited access to learn at your own pace!
Course Features
- Lectures 952
- Quizzes 0
- Duration 90 hours
- Skill level All levels
- Students 20
- Certificate Yes
- Assessments Yes
Check out the free lessons in the “Curriculum” tab.
Get 10 hours of one-on-one training with me! Design techniques, detailed reviews or conversations about anything design related!
- Clickable Facebook Ads;
- Landing pages that convert;
- Instagram Posts that will get you tons of likes;
- Youtube Thumbnails that will get you clicks;
- Newsletters with great open-rates;
- CVs that will get you hired or promoted;
- Website designs that impress;
- Business cards for a lasting impression;
- Image manipulation for that WOW factor;
- Printed materials for increased sales B2C;
- How to do web design freelancing profitably;
The biggest difference between standard and premium is my help through live chat. The Premium Course includes 10 hours of 1-on-1 live chat with me. So the question is – do you want to talk to an Adobe certified instructor and seasoned freelancer through live chat? If not, go with the standard course and you’ll get answers through comments in 24-48 hours.
Standard Course
$97
Live chat | No |
Get answers in | 24-48 hours |
Who replies | Chris Barin |
Screen sharing | No |
Detailed answers | No |
In-depth reviews | No |
New lessons | Paid |
Video quality | 1080p |
Premium Course
$397
Live chat | 10 Hours |
Get answers in | a few minutes |
Who replies | Chris Barin |
Screen sharing | Yes |
Detailed answers | Yes |
In-depth reviews | Yes |
New lessons | Totally free |
Vide quality | 1080p |
Photoshop has changed my life!
I was a door-to-door sales agent living with my parents in a crowded apartment. I tried many ways to make some extra money and I failed every time. I was disappointed and frustrated.
I started learning Photoshop from various tutorials and I began to create website designs on 99designs.com. In short, I was awesome at it. I made over $50,000 by creating websites in Photoshop.
I then started a mobile app design studio. I led a team of 20 people, mostly designers, and we created beautiful personalization apps. Those brought me over 120 million downloads and $750,000.
I’m telling you all this for one reason: you can create value through Photoshop and make a lot of money by designing. Whether it’s Facebook ads, websites, mobile apps, or graphic design in general, YOU CAN DO IT.
Photoshop is not just about hiding wrinkles and editing vacation photos. You can use it to create designs that businesses around the world need! Start right now and gain a life skill that you can depend on. I’ll take you through everything, step by step.
– Chris Barin, read more about me here
I won’t teach you
- digital painting;
- advanced beauty retouching;
- how to draw;
- compositing;
- BS theory;
- outdated design techniques;
- photography;
- useless Photoshop tools;
- Photoshop Elements;
- Photoshop for iPad;
- Lightroom;
“Everything you’ll learn has real world use. It’s all about using Photoshop
to create a living out of it. Start creating valuable content right now!”
Before I got into learning this course, I was intimidated by the idea of learning something so intuitive and intricate as Photoshop. No kidding, I was almost beaten down by the idea that I would never be able to learn this, mostly due to lack of motivation and the wrong approach in the past.
But these particular tutorials not only make it fun and easy to understand the concepts of Photoshop, but also challenge the learner to invest their time in practicing the various tools and methods taught here. I am more that determined to finish this as soon as I can so that I can work on Professional Projects in the Future. Cheers !
Kedar Rao
You’ve been an amazing teacher! Before I started this lecture I had tried to figure out photoshop on my own and with the help of some youtube videos. Needless to say that although I did, in fact, made some kind of progress, I lacked direction, technique and most of all the line of thought behind creating the result I wanted. Thank you for giving me just that. I had an amazing time working on all the exercises.
Athina Stamelou
Congrats for the great way of teaching Chris! I really appreciate that you are doing real life projects in a real time and also how you showed me the real communication with your client! That’s a propper teacher! Thank you indeed and I hope soon to be as skillful as you are! I guess with practicing and patience we will be more faster and precise! All the best to you
Zhivko Dimitrov
This instructor doesn’t leave stones unturned on how to become a freelance web designer. He’s really thorough on strategies and techniques used and it’s fantastic!
Eddy Wiryawan
This is fantastic, anyone who is serious about web design must try this course, he has given various tips and tricks, explore every hooks and corner of web design to shorten your learning curve. Plus the new update – Three pillar of web design part is like cheery on top. Chris is great teacher, thank you.
Amit Saroj
This is a great course that I totally recommend. When I started it I had very little knowledge of Photoshop, I was confusing many notions and I was quite scared of the magnitude of tools, features and things one can do in Photoshop. I followed all the lectures patiently, worked along, did the exercises and after more than 14 hours of content I can say I have a very good basis to move in any direction I want to specialize in: app design, photo retouching, digital painting etc. And finally, I’m not scared of Photoshop anymore; it’s just a tool and I can now easily understand and improve my knowledge of it
Irina Cretu
Amazing course. Cris’ attention to detail, both in his designs and the content of this course, is incredible. The amount of tips and advice given throughout is unbelievably helpful to aspiring web designers and Cris’ mindset is inspiring and provides valuable direction into the mentality needed to succeed in such a competitive space.
Andrew Robinson
The course is 100% online and it starts whenever you want. You have unlimited access and you go through it at your own pace. You’re not allowed to download the videos, but you can watch them from any device that has internet. Learn from anywhere!
You might find free Photoshop courses or cheaper ones, but the main difference here is direct access to me, Chris Barin, certified Photoshop expert, Adobe certified instructor, web & app designer, entrepreneur, successful freelancer, best selling author, and notoriously handsome.
Yes, you will get a certificate after you watch all the lectures, but more importantly you will have a portfolio and skills so you can nail any job interview.
Photoshop is not included. There’s a lecture at the beginning of the course that guides you through the process but here’s the ultra-short version: go to Adobe.com and buy the Photography plan that starts at $10/month (price varies depending on your country). You also have a 7 day trial.
Needing help is totally fine. Use the live chat option that’s always available on this page or email me (you will get my address after you purchase the course). I can also help you through Skype, AnyDesk, Google Hangout or whatever platform you prefer.
Less than $5/hour for the best Photoshop training with instant help via live chat from an Adobe certified instructor & best selling author.
Section 1: Learn Photoshop from Beginner [14 hours]
Section 2: Introduction to Photoshop
2.2 Workbook for Section 1
2.3 Get the Best Photoshop Version2.4 Join Our Photoshop Community
2.5 Massive PSD Giveaway! Over 250 Premium Resources!
2.6 ACTIVITY: Create a Black and White Image
2.7 History Panel
2.8 The New Undo
2.9 Photoshop Search
2.10 OPTIONAL: Speed up Photoshop
2.11 What’s new in Photoshop CC 2020
Section 3: Getting started with Photoshop
3.1 Introduction
3.2 Use Photoshop’s Interface Efficiently
3.3 Customize Your Workspace
3.4 Create a New Project
3.5 Save your Photoshop work
3.6 Optional – Save your work to the cloud
3.7 Get around Photoshop Fast
3.8 ACTIVITY: Crop and Straighten Photos
3.9 Open Images in 6 Ways
3.10 Export Your Work in 5 Ways
3.11 ACTIVITY: Resize an Image
3.12 The Powerful Properties Panel
3.13 Review
Section 4: Layers 101
4.1 Introduction
4.2 OPTIONAL: What Are Layers?
4.3 Start Using Layers
4.4 Use the Layers Panel
4.5 Select Layers
4.6 Move Layers
4.7 EXERCISE: Layer Dexterity
4.8 Solution: Layer Dexterity
4.9 Arrange Images Quickly
4.10 Layer Opacity vs. Fill
4.11 EXERCISE: Fast Alignment
4.12 Solution: Fast Alignment
4.13 Review
Section 5: Layers 102
5.1 Introduction
5.2 Layer Types Explained
5.3 Customize the Layers Panel
5.4 Identify Layers
5.5 Filter Layers
5.6 EXERCISE: Sort Layers
5.7 Solution: Sort Layers
5.8 Manipulate Layers in Photoshop CC 2020
5.9 Manipulate Layers in CS4 – CC 2018
5.10 Rotate layers in CC 2020
5.11 Use Blending Modes
5.12 Lock Layers
5.13 OPTIONAL: Best Layer Hotkeys
5.14 Review
Section 6: Artboards
6.1 Introduction
6.2 Find out how artboards can help you
6.3 The hidden value of artboards
6.4 Creating and resizing artboards
6.5 Duplicate artboards and using guides
6.6 Exporting artboards
6.7 Conclusion
Section 7: Raster Layers
7.1 Introduction
7.2 OPTIONAL: Photoshop vs. Illustrator
7.3 Use the Brush Tool
7.4 ACTIVITY: Soften Skin Imperfections
7.5 Use the Eye Dropper & Swatches
7.6 The Libraries Panel
7.7 OPTIONAL: Fix the Eye Dropper
7.8 Resolution vs. Image Size
7.9 OPTIONAL: Change T-Shirt Color
7.10 Optimize Project Size
7.11 Non-destructive Editing
7.12 Review
Section 8: Selections 101
8.1 Selections Explained
8.2 Modify Selections
8.3 Rectangular Marquee
8.4 Elliptical Marquee
8.5 EXERCISE: Hands On Marquees
8.6 Solution: Hands On Marquees
8.7 Hide Pixels with Layer Masks
8.8 ACTIVITY: Combine 2 Images with Layer Masks
8.9 Quick Selection Tool and Magic Wand
8.10 The Object Selection Tool in CC 2020
8.11 Remove a person from their background in CC 2020
8.12 ACTIVITY: Make an Orange Purple
8.13 Save & Load Selections
8.14 ACTIVITY: Change the Color of T-Shirt v2
8.15 Review
Section 9: Selections 102
9.1 Introduction
9.2 Use Lasso Tools
9.3 Pen Tool Overview
9.4 Use Direct & Path Selection Tools
9.5 ACTIVITY: Pen Tool Selections
9.6 Quick Mask Mode
9.7 Select a Color in a Photo
9.8 ACTIVITY: Remove Background
9.9 Select and Mask Hair
9.10 Channel Selections
9.11 Review
Section 10: Shape Layers
10.1 Introduction
10.2 Create Shapes
10.3 Modify Shapes
10.4 Free Transform (Ctrl+T) in CC 2020 works differently
10.5 ACTIVITY: Design Web Buttons
10.6 New Custom Shapes in CC 2020
10.7 Use Custom Shapes
10.8 ACTIVITY: Design Shapes with the Pen Tool
10.9 Generate Guides from Shapes
10.10 Place Images in Shapes
10.11 ACTIVITY: Create a Website Layout
10.12 Design a Flat Illustration – Part 1
10.13 Design a Flat Illustration – Part 2
10.14 Design a Flat Illustration – Part 3
10.15 Create a Flat Illustration
10.16 Review
Section 11: Creative Layer Styles
11.1 Introduction
11.2 Layer Styles Crash Course
11.3 Download & Scale Layer Styles
11.4 Create Gold Text Effect
11.5 Embed Text in Photos
11.6 Use Global Light
11.7 Create Shiny 3D Text
11.8 Create Neon Effect
11.9 Design an Emoji – Part 1
11.10 Design an Emoji – Part 2
11.11 Animate an Emoji – Part 1
11.12 Animate an Emoji – Part 2
11.13 Assignment: Create & Animate an Emoji
11.14 Create a Fire Text Effect
11.15 Review
Section 12: Work with Smart Objects
12.1 Smart Objects Explained
12.2 ACTIVITY: Design an Android Icon
12.3 Create Your Own App Icon
12.4 Breaking Smart Objects
12.5 Showcase Your Work Professionally
12.6 ACTIVITY: Create a Realistic Mockup
12.7 Unpack Smart Objects in CC 2020
12.8 Linked Smart Objects
12.9 Filters with Smart Objects
12.10 Create a Business Card Part 1
12.11 Create a Business Card Part 2
12.12 Create a Business Card Part 3
12.13 Review
Section 13: Create a Cute Character
13.1 Create the Shape
13.2 Add Layer Styles
13.3 Finishing Touches
13.4 Assignment: Create A Cute Character
Section 14: Work with Text Layers as a Pro
14.1 Text Layers Explained
14.2 Font Types
14.3 Get New Fonts
14.4 Learn Typography Best Practices
14.5 Combine Fonts
14.6 EXERCISE: Hands On Text Layers
14.7 Solution: Hands On Text Layers
14.8 Identify a Font
14.9 Stay Consistent in Your Projects
14.10 Align Text Layers
14.11 Glyphs Explained
14.12 Review
Section 15: Improve Your Photos
15.1 Introduction
15.2 Make Your Teeth White
15.3 Reshape Your Face
15.4 Create a Lens Flare
15.5 Tilt Shift: Miniaturize Objects
15.6 Add Glowing Lines to Photos
15.7 Add Light to an Area
15.8 Reshape Your Body
15.9 Review
Section 16: Repair Your Photos
16.1 Introduction
16.2 Remove Skin Issues
16.3 Remove Watch & Necklace from Photos
16.4 Clean Up Face Imperfections
16.5 Move People in Photos
16.6 Enhance Faded Photos
16.7 Dodge, Burn, Sponge tools
16.8 Remove Red Eyes from Photos
16.9 Create an Action in Photoshop
16.10 Resize Lots of Images Quickly
16.11 Review
Section 17: Learn Graphic Design: Create 40 Practical Projects [14 hours]
Section 18: Introduction
18.1 Welcome & how to use this course
18.3 Download the Course Workbook & Resources
18.4 See the course projects here
18.5 Graphic Design – A Down-to-Earth Explanation
18.6 Create your first Facebook Ad Design
18.7 Using Photoshop for Every Project
18.8 Design Assets Explained
18.9 Best sources for design assets
18.10 Setting up Photoshop
18.11 Mix and Match Design Assets
18.12 What does it take to create beautiful graphics?
Section 19: Facebook Cover Project
19.1 Introduction
19.2 Project Settings & Aspect Ratios
19.3 Creating Text Assets From Scratch
19.4 Selecting Image Assets
19.5 Arranging the Assets on the Canvas
19.6 Designing the Cover
19.7 Typography for the Facebook Cover
19.8 Fine Tuning the Cover
19.9 Conclusion
Section 20: Facebook Cover Project #2
20.1 Introduction
20.2 Analyze your assets and options
20.3 Setting the project’s foundation
20.4 Creating a neutral background with a noise texture
20.5 Sizing up the products correctly
20.6 Creating shadows for the products
20.7 Fine Tuning the Cover
20.8 Using vector graphics to create version 2
20.9 Creative Facebook cover iteration
Section 21: Youtube Thumbnails
21.1 The connection between YouTube thumbnails & Views
21.2 The power of a mockup
21.3 The Absolute best way to design YouTube Thumbnails
21.4 Classic YouTube Thumbnail – Part 1
21.5 Classic YouTube Thumbnail – Part 2
21.6 Abstract YouTube Thumbnail – Part 1
21.7 Abstract YouTube Thumbnail – Part 2
21.8 Choose your own style
21.9 Before and After Thumbnail
21.10 Illustration-based Thumbnail – Part 1
21.11 Illustration-based Thumbnail – Part 2
21.12 Personal Brand Thumbnail
21.13 Text Behind & In Front of you
21.14 Conclusions
Section 22: Instagram
22.1 Introduction
22.2 How to Post on Instagram from your Computer
22.3 Instagram Content Creation Hack
22.4 Clean Product Presentation – Part 1
22.5 Clean Product Presentation – Part 2
22.6 Instagram Mockups – Easy!
22.7 Inspirational Content – Part 1
22.8 Inspirational Content – Part 2
22.9 Black & White Content
22.10 Food Content
22.11 Personal Branding – Part 1
22.12 Personal Branding – Part 2
22.13 Content Striking Colors – Part 1
22.13 Content Striking Colors – Part 2
Section 23: Facebook Ads
23.1 Introduction
23.2 Framing Facebook Ads & Quality Standards
23.3 Colorful Product Ad – Part 1
23.4 Colorful Product Ad – Part 2
23.5 Colorful Product Ad – Part 3
23.6 Colorful Product Ad – Part 4
23.7 The question of stock photos & freebies in FB ads
23.8 Vector Based Ad – Part 1
23.9 Vector Based Ad – Part 2
23.10 Vector Based Ad – Part 3
23.11 Vector Based Ad – Part 4
23.12 The Pros and Cons of People-based Facebook ads
23.13 People-Based Facebook Ad – Part 1
23.14 People-Based Facebook Ad – Part 2
23.15 People-Based Facebook Ad – Part 3
23.16 Best Facebook Ad Template – The Foundation
23.17 Best Facebook Ad Template – The Details
23.18 Conclusions
Section 24: Business Cards
24.1 Introduction
24.2 Colorful Business card for the CEO – The essentials
24.3 Colorful Business card for the CEO – The details
24.4 Colorful Business card for the CEO – Beautiful Icons
24.5 What do ‘simple’ and ‘clean’ mean?
24.6 Personal Branding Business Card
24.7 Business Card Best Design Practices
24.8 Corporate Business Card – Foundation
24.9 Corporate Business Card – Icon Design
Section 25: Level up your career with a beautiful CV (resumé)
25.1 CV (Curriculum Vitae) Designs in Today’s Market
25.2 Deciding on a CV style
25.3 Setting the foundation of the CV
25.4 Choosing a typeface – really important!
25.5 Rocking Typography
25.6 Gorgeous icons for your CV
25.7 Staying consistent in your design
25.8 Negative space in a CV design
25.9 Creating a timeline for your CV
25.10 Final Thoughts for the Clean CV Project
Section 26: CV Project #2
26.1 Creative CV Design
26.2 Modern Typography for a Creative CV
26.3 Use Freepik to make your CV stand out!
26.4 How to adjust vectors and add detailed icons
26.5 Fine-tuning the CV
26.6 The last 10% that makes all the differences!
Section 27: Effective Newsletters
27.1 Newsletters in today’s market
27.2 Newsletter styles
27.3 Colorful Newsletter in Mailchimp & Photoshop
27.4 Create a catchy newsletter hero-element in Photoshop
27.5 Adding extra details
27.6 The most important element: the CTA
27.7 Create effective layouts in Mailchimp
27.8 Inserting new content in Mailchimp
27.9 Balancing graphics with content
27.10 Design overview
Section 28: Animated Newsletter
28.1 Animated Newsletter in Mailchimp & Photoshop
28.2 Create the product presentation in Photoshop
28.3 Animating the product presentation – Method #1
28.4 Animating the product presentation – Method #2
28.5 Create the call to action
28.6 Creating a gift design for the newsletter in Photoshop
28.7 Animating the gift box – the lid
28.8 Animating the gift box – the stars & text
Section 29: Graphic Design Analysis
29.1 Introduction
29.2 Mazda 3 Launch Ad
29.3 Travel Agency Templates – Good or bad?
29.4 Original Design versus Templates
29.5 Hiring People Through Beautiful Ads
29.6 Premium Office Building Ad – Shocking!
29.7 Huge Telecom Company Blunder!
29.8 50% for 5%
29.9 The reason why most designs are cluttered
29.10 Clichés and Stereotypes in Graphic Design
Section 30: Printed Design: Indoor Ad Banner
30.1 Introduction
30.2 Everything’s about the Style Guide
30.3 Indoor Ad Banner: Laying things out
30.4 Indoor Ad Banner: Typography & Layout
30.5 Indoor Ad Banner: Styling
30.6 Indoor Banner: Final touches & Conclusions
30.7 Bonus: Create an indoor ad banner mockup
30.8 Section conclusions
Section 31: Printed Design: Product Catalogue
31.1 Introduction
31.2 Set up the catalogue project in Photoshop
31.3 Styling the cover of the catalogue
31.4 Fine-tuning the cover
31.5 Add something extra to the cover
31.6 Interior page style: Typography
31.7 Interior page style: Layout
31.8 Styling large amounts of text
31.9 Interior pages overview
31.10 Conclusions
Section 32: Logo Design
32.1 The Truth About Logo Design
32.2 Should you design logos as a freelancer?
32.3 Creating logos in Photoshop
32.4 The complexity behind a logo
32.5 Gathering information
32.6 Worst techniques for logo design
32.7 Best techniques for logo design
32.8 Final thoughts
Section 33: Learn Web Design: Design Principles & Case Studies [17 hours]
Section 34: Introduction
34.1 Download all the resources & workbooks
34.2 Quick answers to popular questions
34.3 This section vs “Learn Photoshop, Web Design & Profitable Freelancing”
34.4 Web design – A closer look
34.5 Set up Photoshop for web design
34.6 How to select layers like a pro
34.7 Find out why your designs are supremely important
34.8 Create a website and identify 3 mistakes
34.9 Solving the previous exercise
34.10 The three pillars of a great web designer
Section 35: The First Pillar of Web Design
35.1 The first pillar of web design
35.2 Best settings for a web design project
35.3 Case study: Non-standard layouts
35.4 Create a standard website layout
35.5 How to size your web elements correctly
35.6 My formula for perfect text
35.7 Case study: text layers
35.8 Color Contrast
35.9 Case study: Colors – Part 1
35.10 Case study: Colors – Part 2
35.11 How to align elements in the hero area
35.12 How to align icons with text
35.13 3 rules for web design icons
35.14 Case Study: Visual Balance
35.15 Thoughts on the first pillar of web design
Section 36: The Second Pillar of Web Design
36.1 1. Introduction
36.2 2. What’s the point of the website?
36.3 3. The user versus the business owner
36.4 4. Analytics in Web Design
36.5 5. Templates & Website Builders – The web designer’s death?
36.6 6. Case Study: 4 versions of the same website
36.7 7. E-commerce homepage layout
36.8 8. E-commerce product details
36.9 9. E-commerce checkout
36.10 10. Why aren’t websites pixel perfect?
36.11 11. Landing page vs a website
36.12 12. Case studies: the client’s needs
36.13 13. Lead generation in landing pages
36.14 14. Why landing pages have a bad reputation
36.15 15. Digital product landing page
36.16 16. A/B testing landing pages
36.17 17. Final thoughts about the client’s needs
Section 37: The Third Pillar of Web Design
37.1 1 Introduction
37.2 2 What’s UX?
37.3 3 The best example of good UX and attention to detail
37.4 4 Improve the checkout process to double sales
37.5 5 Improve the mobile version to double sales
37.6 6 7 website tweaks that show attention to detail
37.7 7 Upgrading the mobile product page
37.8 8 Doing 1-on-1 sessions with a coder
37.9 9 Important notice
Section 38: From Photoshop to Working Code
38.1 1 Preparing the design for coding
38.2 2 Getting up and running with Zeplin
38.3 3 From Photoshop to Zeplin
38.4 4 Getting deliverables out of Photoshop
38.5 5 Server-side content and multi-layer graphics
38.6 6 How to handle the handover process
Section 39: The Fundamentals
39.1 1 Photoshop version comparison
39.2 2 Piracy & stealing
39.3 3 Monitors: best panel types, resolution, brand, size
39.4 4 Web design just in Photoshop, no coding
39.5 5 What you need to know about Photoshop
39.6 6 How to monetize the skills you are about to learn
39.7 7 Grid systems
39.8 8 Setting up your workspace
39.9 9 Topics I won’t cover in depth
Section 40: The Principles
40.1 1 Communicate effectively
40.3 3 A website must tell a story and create an atmosphere
40.4 4 Simple & clean or highly detailed?
40.5 5 How to understand the clients’ needs
40.6 6 All about inspiration
40.7 7 Hands on: How I get my inspiration
40.9 9 Step by step approach
40.10 10 Using the step by step approach to create an icon
40.11 11 All about wireframes
40.13 13 The role of imagery, stock photos and free photos
40.14 14 Custom Graphics
40.15 15 Hands-on: Creating custom graphics
40.16 16 Alignment tools
40.17 17 Symmetry, proper spacing and white space
40.18 18 Working with a brief
Section 41: The Principles II
41.1 1 Working on a ‘small project’
41.2 2 What ‘simple, modern, clean’ & other client terms actually mean
41.3 3 Using layer styles the right way
41.4 4 The pitfalls of your imagination
41.5 5 Understanding contrast
41.6 6 Using freebies & the meaning of being a designer
41.7 7 Optimizing your layers panel
41.8 8 Hands on: How to organize a messy project
41.9 9 Dummy content
41.10 10 Logo design
41.11 11 The importance of speed
41.12 12 Choosing the right projects
41.13 13 Pricing guide for your work
41.14 14 How to constantly get better
Section 42: Typography Tips, Tricks, Techniques
42.1 1 Best sources for fonts
42.2 2 The Character Panel
42.3 3 How to identify a font
42.4 4 Mixing fonts
42.5 5 Typography tips, tricks and techniques
Section 43: Project #1
43.1 1 Introduction & project description
43.2 2 Setting the layout
43.3 3 Putting in content
43.4 4 Creating the header
43.5 5 Creating the hero area
43.6 6 Creating the content area
43.7 7 Creating the testimonial and footer areas
43.8 8 Conclusions
Section 45: Flat Web Design Project
45.1 1 Flat design: definition, examples, flat animations, history, skeuomorphism
45.2 2 Avoid these flat design mistakes
45.3 3 Building a flat website – Introduction
45.4 4 Building a flat website – Creating the header
45.5 5 Building a flat website – Creating the central point
45.6 6 Building a flat website – Testimonials and CTAs
45.7 7 Building a flat website – Finishing up with the footer
45.8 8 Final conclusions
Section 46: Organic Web Design Project
46.1 1 About this update
46.2 2 About organic websites and our first case study
46.3 3 Analyzing organic websites
46.4 4 The need for thematic designs
46.5 5 The downside of organic website designs
46.6 6 Presenting the project
46.7 7 Setting up the layout
46.8 8 Researching assets, our mood board, and setting our style
46.9 9 Finding more resources and setting the header
46.10 10 Creating a detailed hero area
46.11 11 Creating the content area with realistic category images
46.12 12 Designing the footer and adding a bit of magic to the site
Section 47: Various Tips & Techniques
47.1 1 Introduction
47.2 2 Character & Paragraph Styles
47.3 3 Smart Objects explained
47.4 4 How to use a Smart Object
47.5 5 How to create a realistic mockup with Smart Objects
47.6 6 How to use Adobe Generator
47.7 7 How to use Layer Comps
47.8 8 Layer Comps with Smart Objects
Section 48: Web Design Feedback & Updates
48.1 1 Content-Aware Crop
48.2 2 4K for web design: is it worth it?
48.3 3 Identify a font with ‘Match Font’
48.4 4 Glyphs – friend or enemy
48.5 5 Adobe CC Portfolio: How to easily create a responsive portfolio
48.6 6 Face Liquify – Magic face editing
48.7 7 Select and Mask replaces Refine Edge
48.8 8 Design Feedback
48.9 9 Design Feedback #1
48.10 10 Design Feedback #2
48.11 11 Struggling with your designs – watch this
48.12 12 Design Feedback #3
48.14 14 What’s my skill level after 10 years?
Section 49: Web Design Freelancing [23 hours]
Section 50: Introduction
50.2 2 A few things you need to know
50.3 3 Workbook for Section 1 & Download All The Course Resources xxx
50.5 5 Photoshop is essential for your future
50.6 6 Your first web design challenge
50.7 7 How to solve the previous exercise
50.8 8 Set up Photoshop for web design
50.9 9 Key areas in Photoshop CC
50.10 10 Best computer for Photoshop
50.11 11 How to set up your workspace
50.12 12 Six career options after my courses
Section 51: Key Photoshop Techniques for Web Design
51.1 1 Understanding and using layers like a pro
51.2 2 25 common mistakes in Photoshop – Part 1
51.3 3 25 common mistakes in Photoshop – Part 2
51.6 5 Section conclusion
Section 52: Photoshop Explained
52.1 1 Section introduction
52.2 2 2 Key concepts about moving layers and the move tool + exercise
52.3 3 How to solve the previous exercise
52.4 4 Raster layers demystified
52.5 5 Understanding shape layers
52.6 6 Adjustment layers and non-destructive editing
52.7 7 How to use text layers effectively
52.8 8 Find out why smart objects are amazing
52.9 9 Layer types exercise
52.10 10 Solving the layer types exercise
52.11 11 How to export your work optimally in CC
52.12 12 How to export your work optimally in CS6
52.13 13 The alignment tools in Photoshop CS6 and CC + exercise
52.14 14 How to solve the previous exercise
52.15 15 Section conclusion
Section 53: Photoshop's Tools
53.1 1 Section introduction
53.2 2 Artboards in Photoshop CC
53.3 3 Gain flexibility with Undo and the History Panel
53.4 4 Unlock the power of the Marquee tool
53.5 5 Crop and eye dropper explained
53.6 6 Eraser, gradient, paint bucket with a big twist
53.7 7 The brush tool and layer masks
53.8 8 The powerful Direct Selection Tool in CS6 and CC
53.9 9 Fantastic selections with The Magic Wand and The Quick Selection Tool
53.10 10 Pen tool comprehensive: create intricate shapes and selections
53.11 11 Important notes about other tools
53.12 12 Section conclusion
Section 54: Web Design - Hands On
54.1 1 Introduction
54.2 2 Must-watch: No coding explained
54.3 3 10 essential tips to get started
54.4 4 The power of a well-written brief
54.5 5 Layer styles in CS6 and CC
54.6 6 Blending modes explained
54.7 7 Hands on navigation – creating modern main menus #1
54.8 8 Hands on navigation – creating modern main menus #2
54.9 9 Hands on navigation – creating modern main menus #3
54.10 10 Hands on navigation – a different main menu
54.11 11 Hands on buttons: creating effective call to actions
54.12 12 Understanding hero areas
54.13 13 Techniques that prepare an image for the hero area
54.14 14 How to get fantastic images for your designs
54.15 15 Hands on typography: 10 rules to handle text like a pro
54.16 16 Hands on clipping masks
54.17 17 Hands on testimonials: creating a modern design #1
54.18 18 Hands on testimonials: creating a modern design #2
54.19 19 Understanding footers
54.20 20 Responsive web design
54.21 21 Conclusions
Section 55: Freelancing
55.1 1 Introduction
55.2 2 Best and worst way to get started as a freelancer
55.3 3 Crowdsourcing explained
55.4 4 Best way to get initial feedback on your design
55.5 5 99designs and Freepik
55.6 6 Should I quit my job to freelance?
55.7 7 3 surprising advantages of being a freelance web designer
55.8 8 Discovering ways to outperform competition
55.9 9 10 tools to improve your performance: fix eye, back, neck pain!
55.10 10 How to improve your mood & concentration
55.11 11 Best places for design projects
55.12 12 15 tips for selecting the best projects
55.13 13 Using speed to your advantage: 10 tips to increase it
55.14 14 The importance of your mindset
55.15 15 Working smart and consistent
55.16 16 Using freebies – more complicated than you think
55.17 17 Using inspiration – the right way
55.18 18 Should you report a similar or stolen design?
55.19 19 Should you reuse designs?
55.20 20 NEW! The level of competition on 99designs
55.21 21 Don’t go on 99designs before you watch this!
55.22 22 Conclusions
Section 56: Into the mind of a contest holder
56.1 1 Introduction
56.2 2 The profile of a contest holder
56.3 3 Setting up a contest and brief
56.4 4 Getting designs and managing feedback
56.5 5 Communicating with designers
56.6 6 Asking other people for feedback
56.7 7 Conclusions
56.8 8 Design a logo for me and get $300!
Section 57: First Web Design Project
57.1 1 Introduction
57.2 2 Exploring the project in depth
57.3 3 Setting up the foundation of the design
57.4 4 Choosing the right fonts for our project
57.5 5 Creating the header
57.6 6 Creating the hero area
57.7 7 Setting the style for the design
57.8 8 Creating the content area
57.9 9 Conclusions
Section 58: Project 1 - Client Budget: $1175
58.2 2 Brief Analysis
58.3 3 Header Content
58.4 4 Header Style Part 1
58.5 5 Header Style Part 2
58.6 6 Left Column Part 1
58.7 7 Left Column Part 2
58.8 8 Feed Filter
58.9 9 Posts Section
58.10 10 Right Column & Wrap Up
58.11 11 Presenting our Design
58.12 12 First Feedback – First Revision
58.13 13 How to Handle Additional Feedback
58.14 14 How Quickly Things Change
58.15 15 The Next Stage of the Project
58.16 16 Project Conclusions
58.17 17 Bonus: When is it time to abandon a project?
Section 59: Project 2 - Client Budget: $500
59.1 1 Brief Analysis
59.2 2 Setting the Style & Getting Inspiration
59.3 3 Header
59.4 4 Hero Area
59.5 5 Services Section
59.6 6 Content Area
59.7 7 Testimonials
59.8 8 Blog Element
59.9 9 Footer
59.10 10 Presenting our Design & A Shocking Update
59.11 11 Getting Feedback
59.12 12 Project Conclusions
59.13 13 Bonus: Analysing Intermediaries
Section 60: Project 3 - Client budget: $300
60.1 1 Brief Analysis & Getting Inspiration
60.2 2 Analyse the Client & Getting Inspiration
60.3 3 Layout & Style
60.4 4 Header
60.5 5 Hero Area
60.6 6 Content Area
60.7 7 Product Section
60.8 8 Footer
60.9 9 Analyse our Competition
60.10 10 Changing the Design Style
60.11 11 New Product Area
60.12 12 New Footer & Sending the Design
60.13 13 Big Updates
60.14 14 Project Conclusions
60.15 15 Bonus: 2 Other Concepts
Section 61: Project 4 - Client budget: $600
61.1 1 Notice
61.2 2 Brief Analysis
61.3 3 Layout
61.4 4 Main Menu & Style
61.5 5 Hero Area
61.6 6 Content Section
61.7 7 Presenting our Design
61.8 8 Project Conclusions
61.9 9 Bonus: Avoid These Projects
61.10 10 Bonus: A New Concept
Section 62: Project 5 - Client budget: $475
62.1 1 Notice
62.2 2 Brief Analysis
62.3 3 Layout
62.4 4 Header
62.5 5 Creating the Hero Elements
62.6 6 Slider
62.7 7 Product Section
62.8 8 Image Gallery
62.9 9 Testimonials
62.10 10 FAQ & Partners
62.11 11 Trouble Sending the Design
62.12 12 Feedback & Revisions
62.13 13 Changing the Background
62.14 14 Client Feedback
62.15 15 Project Conclusions
62.16 16 Winning Design
62.17 17 Bonus: A New Concept
Section 63: Project 6 - Client budget: $595
63.1 1 Notice
63.2 2 Brief Analysis
63.3 3 Layout
63.4 4 Content
63.5 5 Main Menu & Style
63.6 6 Hero Area
63.7 7 Central Section
63.8 8 Product Area
63.9 9 Testimonials
63.10 10 Newsletter
63.11 11 Presenting our Design
63.12 12 Feedback
63.13 13 Revision
63.14 14 Presenting our Updated Design
63.15 15 Feedback & Another Revision
63.16 16 Our Position & Multiple Options
63.17 17 Fine Adjustments
63.18 18 Quick Revision
63.19 19 Small Design Tweaks
63.20 20 Small Design Tweaks 2
63.21 21 Another Revision
63.22 22 Fixing an Error
63.23 23 Final Stage of the Project
63.24 24 Project Wrap Up
63.25 25 Conclusions & Next Steps
63.26 26 Bonus: Avoid These Projects
63.27 27 Bonus: A New Concept
Section 64: Project 7 - Client budget: $1200
64.1 1 Notice
64.2 2 Brief Analysis
64.3 3 Analyzing the Competition
64.4 4 Layout
64.5 5 Central Section
64.6 6 Hero Area
64.7 7 Testimonials & Product Area
64.8 8 Finishing the Design and Presenting it
64.9 9 Design Variation
64.10 10 Finishing the Variation
64.11 11 Presenting our Design
64.12 12 Rating
64.13 13 New Design
64.14 14 Conclusions
64.15 15 Revision
64.16 16 Interior Page
64.17 17 Product Page
64.18 18 Upload
64.19 19 Image Update
64.20 20 PSD Clean Up
64.21 21 Project Conclusions
64.22 22 Bonus: A New Concept
Section 65: Design Feedback
65.1 1 Design Feedback #1
65.2 2 Design Feedback #2
65.3 3 Design Feedback #3
65.4 4 Design Feedback #4
65.5 5 Design Feedback #5
65.6 6 Design Feedback #6
Section 66: Design and prototype mobile apps [15 hours]
Section 67: Getting Started
67.1 1 Introduction and your expectations
67.2 2 Download all resources
67.3 3 Photoshop vs Adobe Experience Design vs Sketch
67.4 4 Don’t design any mobile app without this!
67.5 5 Design your first app layout – Part 1
67.6 6 Design your first app layout – Part 2
67.7 7 How much money can you earn as an app designer?
67.8 8 Preview your designs on your phone
67.9 9 Optional – Computer requirements
67.10 10 Discover the differences between Android and iOS apps
Section 68: Best Photoshop Techniques for App Designing
68.1 1 Introduction
68.2 2 Set up Photoshop for app designing
68.3 3 Best settings for an Android project in Photoshop
68.4 4 Must-know artboard features in Photoshop
68.5 5 10 Tips to efficiently work with vectors in Photoshop
68.6 6 Best tips for layer alignment
68.7 7 Learn to efficiently select layers in artboards
68.8 8 Exercise: Layer selection and repositioning
68.9 9 Solve the previous exercise
68.10 10 Best typography tips for app designing
68.11 11 Learn how to actually use smart objects
Section 69: Material Design and Essential Android Components
69.1 1 Introduction to Material Design
69.2 2 Android interface components overview
69.3 3 Learn to design the action bar
69.4 4 The simple guide to sizing components in pixels
69.5 5 Sizes in pixels & action bar showcase
69.6 6 Everything you need to know about tabs
69.7 7 Displaying content in cards
69.8 8 Beautiful and effective buttons on Android
69.9 9 Text Fields
69.10 10 FREE size guide for Android components
Section 70: Food Delivery App
70.1 1 Introduction to this section
70.2 2 Understanding the brief and the client’s wishes
70.3 3 Analyze the app’s competitors – Part 1
70.4 4 Analyze the app’s competitors – Part 2
70.5 5 Layout for the location (1) and listing (2) screens
70.6 6 Layout for the restaurant details (3) screen
70.7 7 How to make great design choices
70.8 8 Design concepts for the location screen (1)
70.9 9 Design concepts for the restaurant listing (2)
70.10 10 Restaurant listing alternatives (2)
70.11 11 Final restaurant listing variations (2)
70.12 12 Design concepts for the restaurant details (3) screen
70.13 13 Choosing the best typeface
70.14 14 Define and refine our app’s style
70.15 15 Finishing touches screen 1
70.16 16 Finishing touches on screens 2 and 3
70.17 17 Section overview
Section 71: Android Icons & Design Principles
71.1 1 Section introduction
71.2 2 What do you want to be? A designer or a problem-solver?
71.3 3 Discover the one thing that ruins all your designs
71.4 4 UI Icons in Android apps
71.5 5 Hands-on icons: Create a dashboard panel
71.6 6 Android Icons: Case studies
71.7 7 A guide for app design inspiration
71.8 8 Target audience and the app’s story
71.9 9 Create a mood board
71.10 10 Discover what makes an app beautiful
Section 72: The Principles of Color in Android Apps
72.1 1 Android color fundamentals
72.2 2 How to use color appropriately
72.3 3 The principle of color contrast
72.4 4 The best color schemes from top apps
72.5 5 Tools for awesome color schemes
72.6 6 How to implement a color scheme
Section 73: Typography in Android Apps
73.1 1 Android typography fundamentals
73.2 2 7 rules for Android legibility
73.3 3 Guide for perfect font sizing in Android apps
73.4 4 Typography: what the biggest apps are doing
73.5 5 How to make lots of text look great
73.6 6 How to pair fonts correctly
Section 74: Designing iOS Apps
74.1 1 iOS apps – Overview
74.2 2 1x, 2x, 3x, PPI, notch?! iOS artboard size guide
74.3 3 App design comparison: iOS vs Android
74.4 4 My take on the official UI Kit
74.5 5 iOS status bar (with/wo Notch)
74.6 6 iOS Navigation bar
74.7 7 iOS Tab bar
74.8 8 iOS Text Fields
74.9 9 iOS Controls
74.10 10 Running Android apps on Mac OS
74.11 11 The official iOS typeface – should you use it?
74.12 12 iOS conclusions
Section 75: Food Delivery App - Part 2
75.1 1 Section introduction
75.2 2 Preparing the PSD for 20+ screens
75.3 3 Login and registration screens – version 1
75.4 4 Login and registration screens iteration
75.5 5 Design the right menu
75.6 6 Design the left menu
75.7 7 Creating card-based layouts for Addresses and Payments
75.8 8 Add a payment method – Design a credit card
75.9 9 Design the Reviews screens
75.10 10 Create the restaurant’s address and user profile screens
75.11 11 Making the order history screen & success page
75.12 12 Create the order details screen
75.13 13 An overview of our progress
Section 76: Introduction to Adobe XD
76.1 1 Introduction to Adobe XD (Experience Design)
76.2 2 Learning XD and setting your expectations
76.3 3 An overview of XD’s interface
76.4 4 Getting around in Adobe XD
76.5 5 Selecting layers in XD
76.6 6 Shape fundamentals in Adobe XD
76.7 7 Editing shapes in Adobe XD
76.8 8 Text fundamentals in XD
76.9 9 Grid and smart guides
76.10 10 Pen tool
76.11 11 Working with photos and masks
76.12 12 Adobe XD tips & quirks
Section 77: Supercharge your work in Adobe XD
77.1 1 Disable Adobe XD’s Recording Message on Windows
77.2 2 From Photoshop to XD
77.3 3 Create real-life mockups in just a few clicks
77.4 4 Lightning speed with the Assets panel
77.5 5 Linked symbols
77.6 6 Preview and device preview
77.7 7 Prototyping overview and sharing your design
77.8 8 Create interactive prototypes
77.9 9 Prototyping tips and tricks
77.10 10 Make your app prototype seem real
77.11 11 The incredible auto-animate and drag
77.12 12 The Libraries panel
Section 78: How to work with mobile app developers
78.1 1 Introduction to Zeplin
78.2 2 What the coder gets out of Zeplin
78.3 3 From Photoshop to Zeplin to Android Developers
78.4 4 Anything is possible in Android! Make clients & coders love you
78.5 5 Design specs through XD
78.6 6 Exporting from XD
78.7 7 The best way to work with coders in Zeplin
Section 79: Designing & Prototyping in Adobe XD
79.1 1 Introduction
79.2 2 Import and fix the PSD in Adobe XD
79.3 3 Setting up the prototype
79.4 4 Prototyping the login and register screens
79.5 5 Dealing with the City dropdown
79.6 6 Creating the map interaction
79.7 7 Finishing the initial screen interactions
79.8 8 Analyzing our progress
79.9 9 Recover password and create an account
79.10 10 Recreate the restaurant listing in Adobe XD
79.11 11 Creating a search bar
Section 80: Advanced Techniques in Adobe XD
80.1 1 Connecting the left menu
80.2 2 Connecting the filters
80.3 3 Creating an animated tab system for the dish listing
80.4 4 Creating the app’s routes – difficult!
80.5 5 Continuing route 1: user registers at the beginning
80.6 6 Route 2: user registers during checkout
80.7 7 Route 3: user already has an account
80.8 8 Restaurant information and reviews
80.9 9 Fine-tuning and project analysis
80.10 10 Preparing to export to Zeplin
80.11 11 Export to Zeplin
80.12 12 Final Thoughts from Chris
80.13 13 Final Thoughts & What’s Next
Section 81: Adobe XD Masterclass: Learn UI & UX Design from Zero to Hero [8 hours]
Section 82: Getting Started
82.1 Introduction
82.2 How to get the most out of this training
82.3 Download all the resources from the course
82.4 Adobe XD vs Photoshop
82.5 Get started with Adobe XD
82.6 Create your first design in Adobe XD
82.7 How to get around Adobe XD
82.8 Best way to select layers in XD
82.9 Exercise: Practice your selecting
82.10 From Photoshop or Illustrator to Adobe XD!
82.11 Cloud documents and saving your work
82.12 Adobe XD quirks
82.13 Section conclusions
Section 83: Adobe XD's tools and features
83.1 Introduction
83.2 How to work with rectangles like a pro
83.3 Use the ellipse, polygon and line tools
83.4 Editing shapes
83.5 Pen tool
83.6 Let’s have fun – use all the tools
83.7 Work with colors and gradients
83.8 Grids, guides, smart guides – pixel perfect designs
83.9 The alignment tools – Overview
83.10 How to use the alignment tools
83.11 Work with text layers like a pro
83.12 Best way to work with images
83.13 Create a collage
83.14 Section conclusions
Section 84: Saving and exporting your work
84.1 Export our work as PNGs
84.2 Share your work to get feedback
84.3 Optional – Save presentations as PDFs
84.4 Share your work with developers
84.5 Shrink your PNGs and JPEGs without losing quality
Section 85: Adobe XD advanced features
85.1 Introduction
85.2 Fast designing with repeat grid
85.3 Quickly replace content
85.4 Components – a revolutionary feature
85.5 Practice working with components
85.6 Why we need to talk about style guides
85.7 How to supercharge your color use
85.8 How to work with character styles
85.9 Here’s how you actually set up your assets panel
85.10 A smarter way to work with linked assets
85.11 Undecided? Keep multiple versions!
85.12 Working with several designers AT ONCE
85.13 Section conclusion
Section 86: First web design project
86.1 Introduction to our first web design project
86.2 Create the website’s header
86.3 My advice for perfect social media icons
86.4 Setting our typography
86.5 Adding the search bar
86.6 The website’s categories
86.7 Build the content area with repeat grid
86.8 Pagination through XD components
86.9 Create the footer
86.10 Overview of the homepage
86.11 Create the product details page
86.12 Finishing touches on the product details page
Section 87: Responsive design
87.1 What is responsive design?
87.2 Designing without coding: why and how?
87.3 Making the mobile version of the homepage
87.4 Adjusting the design for the mobile version
87.5 Editing the footer for the mobile version
87.6 Create the mobile version for the product details page
87.7 Design variation #1 – color
87.8 Design variation #2 – typography
87.9 Design variation #3 – the layout
87.10 Key things about our design
Section 88: Make the design interactive (prototyping)
88.1 Introduction to prototyping
88.2 The fundamentals of wiring a prototype
88.3 Trigger types in Adobe XD
88.4 Transition Animations and Easing
88.5 Auto-animate – the incredible game changer
88.6 Auto-animate and drag
88.7 Previous artboard – a must in any large project
88.8 How to make menus and pop ups seem real
88.9 Jump to a part of your design with “Scroll To”
88.10 Here’s why your animations don’t matter
Section 89: Advanced Prototyping
89.1 Here’s why we should animate our design
89.2 What you should and shouldn’t animate
89.3 Create hover states for social media & main menu
89.4 Prototyping the search box – hover and down state + drop-down
89.5 Create a hover state for the repeat grid
89.6 Setting up the pagination and footer
89.7 How to quickly change your layout with stacks
89.8 Bonus: Make the navigation work
Section 90: User Experience (UX)
90.1 Introduction
90.2 What’s UI, what’s UX?
90.3 Bad UX is very expensive
90.4 UX case study – icons
90.5 UX case study – buttons
90.6 UX case study – forms
90.7 UX case study – vague actions
90.8 UX case study – hierarchy
90.9 UX case study – fake content
Section 91: What's next?
91.1 Here’s what I suggest you do next
-
Andrew Robinson
Lots of tips, great course content
Amazing course. Cris’ attention to detail, both in his designs and the content of this course, is incredible. The amount of tips and advice given throughout is unbelievably helpful to aspiring web designers and Cris’ mindset is inspiring and provides valuable direction into the mentality needed to succeed in such a competitive space.
-
Irina Cretu
I recommend this
This is a great course that I totally recommend. When I started it I had very little knowledge of Photoshop, I was confusing many notions and I was quite scared of the magnitude of tools, features and things one can do in Photoshop. I followed all the lectures patiently, worked along, did the exercises and after more than 14 hours of content I can say I have a very good basis to move in any direction I want to specialize in: app design, photo retouching, digital painting etc. And finally, I’m not scared of Photoshop anymore; it’s just a tool and I can now easily understand and improve my knowledge of it.
-
Amita Saroj
This is all worth it
This is fantastic, anyone who is serious about web design must try this course, he has given various tips and tricks, explore every hooks and corner of web design to shorten your learning curve. Plus the new update – Three pillar of web design part is like cheery on top. Chris is great teacher, thank you.
-
Eddy Wiryawan
Best choice!
This instructor doesn’t leave stones unturned on how to become a freelance web designer. He’s really thorough on strategies and techniques used and it’s fantastic!
-
Zhivko Dimitrov
A propper teacher!
Congrats for the great way of teaching Chris! I really appreciate that you are doing real life projects in a real time and also how you showed me the real communication with your client! That’s a propper teacher! Thank you indeed and I hope soon to be as skillful as you are! I guess with practicing and patience we will be more faster and precise! All the best to you!