7 Photoshop Web Design Projects | Master Web Design by Doing

Master Photoshop web design by doing! Create 7 Photoshop web designs from scratch + 7 Photoshop web design assignments

4.50 (240 reviews)
Udemy
platform
English
language
Web Design
category
instructor
12,173
students
15 hours
content
Mar 2023
last update
$79.99
regular price

What you will learn

Create web designs that provide a great UI UX (user experience)

Help your clients grow their business by learning what it takes to design a great user experience

Learn how creating great web designs, that help your clients grow, will help you grow your design business

You'll learn the 7 most popular types of web design styles

You'll learn what type of design styles to avoid (and why)

You'll learn add-on services you can up-sell your web design clients

You'll learn how to re-touch images like a pro

You'll learn how to stand-out among 10's of thousands of other web designers

You'll learn how to remove subjects from a background (non-destructively... just like the pros)

You'll learn how to transform an ordinary image into a piece of artwork

You'll learn how to use gradients for creative backgrounds

You'll learn and master layers and layer masks

You'll learn how to use Smart Objects for keeping your work intact

You'll learn the importance of keeping your layers organized

You'll learn tips on font selections

You'll learn the do's and don'ts of typography

You'll learn why prioritizing typography, with styles, is important for making it easier to read content

You'll learn tips on what type of images you should be using in your web designs

You'll learn where to download commercial free images that don't require a license or an attribution

You'll learn how to use a Grid template to conform your web designs to industry standards for both desktop and mobile devices

You'll learn how to quickly and easily align multiple layers

You'll learn how to evenly distribute the space between layers with one click

You'll learn how to create a mega menu design and organize it for the developer

You'll learn how to design hover states so the developer knows how to code your vision

By the time you've completed all 7 web design projects, and the suggested assignments, you'll have mastered my top 10 keyboard shortcuts

After completing all 7 web design projects and the suggested assignments, you should have 7 web designs for your portfolio

Description

Master Photoshop, web design & profitable freelancing by a pro. This course aims to teach you how to create web designs that provide a great user experience by doing projects (and not watching me design them).

Learn how to create great web designs in Photoshop AND create a great user experience through doing actual web design projects. Learn web design by doing!

What you'll learn in this excellent web design course for Photoshop users...


  • You'll learn add-on services you can up-sell your UX web design clients.

  • You'll learn how to retouch images like a pro.

  • You'll learn how to stand-out among 10's of thousands of other UX web designers.

  • You'll learn how to remove subjects from a background (non-destructively... just like the pros)

  • You'll learn how to transform an ordinary image into a piece of artwork in Photoshop.

  • You'll learn how to use gradients, in Photoshop, for creative backgrounds.

  • You'll learn how to use Smart Objects, in Photoshop, for keeping your work intact.

  • You'll learn the importance of keeping your layers organized.

  • You'll learn tips on font selections in Photoshop.

  • You'll learn the dos and don'ts of typography.

  • You'll learn why prioritizing typography with styles is essential for making it easier to read the content.

  • You'll learn how to create UX web designs that provide a great user experience.

  • You'll learn how to help your clients grow their business by knowing what it takes to design a great user experience.

  • You'll learn how creating great UX web designs that help your clients grow will help you grow your UX design business (and likely will end up with more work than you can handle)

  • Beginners of Photoshop will get a crash course to get you up and running fast.

  • Advanced users of Photoshop can dive right into the UX web design projects.

  • You'll learn the 7 most popular types of UX web design styles.

  • You'll learn what type of UX design styles to avoid (and why)

  • You'll learn tips on what type of images you should be using in your UX web designs.

  • You'll learn where to download commercial-free images that don't require a license or attribution.

  • You'll learn the 6 most important sections that are a part of UX websites.

  • You'll learn how to use a Grid template to conform your UX web designs to industry standards for both desktop and mobile devices.

  • You'll learn how to quickly and easily align multiple layers in Photoshop.

  • You'll learn how to evenly distribute the space between layers with one click in Photoshop.

  • You'll learn how to create a mega menu UX design and organize it for the developer.

  • You'll learn how to UX design hover states so the developer knows how to code your vision.

  • By the time you've completed all 7 UX web design projects and the suggested assignments, you'll have mastered my top 10 keyboard shortcuts.... which will make you more productive.

  • After completing all 7 UX web design projects and the suggested assignments, you should have 7 web designs for your portfolio.


Photoshop - UX - Web Design Project 1

Your first UX web design project will consist of creating a unique, creative homepage for Nike. You'll start off with a design brief to see what direction we'll take to make the webpage better. Then, you'll learn about the importance of picking images and how to remove subjects from the background… like a pro.

You'll learn how to create a header, a mega menu, a Call-to-Action (CTA), and much more.

Once you've practiced what you learned, by re-doing my web design, you'll use YOUR creative vision to develop a web design for your portfolio.


Photoshop - UX - Web Design Project 2

This UX web design project will have you transform an old, outdated, real estate website into a professional design style. The new design was created for a better UX (user experience). This will help the client grow their business by including a call-to-action that prospects will not refuse.

  • You'll learn about irresistible offers and how to create them through a CTA

  • how to create custom hero sections with custom shapes in Photoshop

  • how to use layer masks to show/hide different elements

  • pro tips for using images of people in Photoshop

  • pro tips for deciding on what type of photos to include

  • how to use gradients to make your backgrounds more dynamic, in Photoshop

  • how to easily update your client's logo for a more up-to-date and modern look

  • how to increase the credibility of your clients

  • pro tips on how to promote your client through persuasive writing (or outsource)

  • pro tips on how to qualify leads through great design

  • and much more…

What you'll learn can easily be applied to any type of company and web design. Plus, I'll share with you one of my little secrets on adding credibility and elevating your client's standing in the community. And how to increase the chances more people will do business with your client.


Photoshop - UX - Web Design Project 3

Our next UX web design project consists of updating another old, outdated website and giving it a new, fresher, modern design.

Many new tips and web design tricks are revealed in this project. Learn why I chose a sticky menu for this website, why I chose a hidden menu (via the Hamburger icon), how I created a seamless gradient background (from header to hero to the footer) for a modern flair, more pro tips on images, how to work with a third party application as part of your UX web design, and much more.


Photoshop - UX - Web Design Project 4

In this UX web design project, the learning continues! Starting off with a large Hero image as the backdrop of the UX design. This image alone will elevate this company's existing brand and distinguish it as a leader in its area. As great as the image is, it could be better. We'll make it better by learning how to remove 2 cars from the foreground… you'll learn how to retouch like a pro.

The next part of this web design involves creating a great (UX) user experience by giving visitors exactly what they are looking for. In this case, a place to rent. You'll achieve this by designing a filter in the Hero section that will allow visitors to narrow down their search.

Suppose visitors are not ready to do business through this site. In that case, they'll be more so after scrolling down to the first section that includes 4 benefit-driven services. You'll learn how to create 4 custom icons from scratch and tips on selling your client to showcasing their benefits. Plus, additional tips throughout for communicating with your client on why you designed the page the way you did.

Then, I'll give you some UX design tips for quickly and easily adding multiple listings using Command/Control J (Photoshop shortcut). This section of the web design project has a lot more pro tips. One is arranging, styling, and choosing fonts to make it easier to read the content.

We're not done with what you'll learn in this project! In fact, I give you 2 services you can up-sell your clients on (you'll put in your design first since it's so easy to do, and then you sell them on it). One of which can put more money in their pocket with minimal effort. Your clients will have a hard time turning down money. The hard part is deciding how much to charge. Which is entirely up to you.


Photoshop - UX - Web Design Project 5

Your next UX web design project consists of taking an old, outdated, government text-based design and creating a more image-based web design. Why the switch? The "government" is trying to sell their location to tourists, and images tell the story better than text. After all, an "image is worth a thousand words."

  • You'll start off with a simple Header and Hero section.

  • Then, you'll learn more about typography choices and styling for Photoshop.

  • How the right choice of images is essential, and the wrong choice can be a disaster.

  • Learn how to create a pop-up Hover state in Photoshop

  • and much more


Photoshop - UX - Web Design Project 6

Oh boy! You're in for a treat.

This is my favorite UX web design project! You'll learn something you didn't know was possible… how to find out what font was used from a (flattened) JPG file! Yep, I'll show you where to upload your file, and a computer will crunch its database of 100,000+ fonts and tell you which one was used!

So far, most of our UX web design projects have had a modern, clean UX web design style applied to them. Not this time. We're going all out on transforming a plain, boring site with a bold, fun retro design style.

You'll start off by creating a retro slider for the Hero section. Then you'll design an e-commerce like body section featuring old-movie posters. All while learning more pro-UX web design tips along the way!

Photoshop - UX - Web Design Project 7

By now, you've learned just about all my UX web design tips. Don't despair. I have a few more pro tips and Photoshop tricks to share with you in this final UX web design project.

Including how to transform an ordinary, boring, plain photo into a work-of-art via a Watercolor (in Photoshop). No worries. No need to buy a canvas, brushes, or watercolor paint. I'll show you how to do it in Photoshop!

Once you've completed all 7 UX web design projects, you'll have mastered over a dozen keyboard shortcuts (that will help you design faster). Plus, if you applied my suggestions, you'll have 7 UX web designs developed from YOUR creative vision and design style for your portfolio. All of which, can be submitted to our Q&A section for feedback or just to show off your new skills.


Content

Web Design: "How to Get The Most From This Photoshop Web Design Course"

All Videos Recorded in 1080HD
How to Get The Most From This Photoshop Web Design Course

Photoshop Crash Course for Web Design

Layers 101
Aligning Layers
Stack, Copy + Delete Layers
Organize Layers
Layer Styles
Type Tool
Shapes 101
5 Essential Tools 101
Gradient Tools 101
Smart Objects 101
History Panel 101
Retouching Tools 101 - Stamp Tool
Retouching Tools 101 - Heal Tool
Retouching Tools 101 - Patch Tool
Retouching Tools 101 - Content Aware Tool

Anatomy of a Website - for Web Designers

Header
Navigation
Hero
Body
Footer
Sidebar

Web Design Styles

Brief History & My Thoughts
7 Popular Web Design Styles
Get Inspired

Grid System + Bonus Tip

Grid System
Bonus: Pixel Perfect

Photoshop Web Design Project 1 - Nike

Briefing of Project
Images
Retouch Images
Retouch Like a Pro - Quick Tip
Header Part 1
Header Part 2
Mega Menu
Hero
Body
Footer
Assignment 1

Photoshop Web Design Project 2 - Manhattan

Briefing of Project
Logo Redesign
Header
Hero Part 1
Hero Part 2
Social Proof - Body Part 1 or Part of Hero?
Body Part 2
Body Part 3
Body Part 4 - Part 1
Body Part 4 - Part 2
Body Part 4 - Contact Section
Footer
Final Tweaks
Assignment 2

Photoshop Web Design Project 3 - Seaside

Briefing of Project
Logo
Header
Hero
Body - Services
Body - Samples Part 1
Body - Samples Part 2
Body - Samples Part 3
Body - Samples Part 4
Body - Contact
Footer
Tweaks
Assignment 3

Photoshop Web Design Project 4 - Real Estate

Briefing of Project
Retouch Hero Image
Header
Hero
Custom Icons Part 1
Custom Icons Part 2
Body - Services
Body - Property Owner Call to Action
Body - Listings
Body - Blog + Sidebar
Footer
Tweaks
Assignment 4

Photoshop Web Design Project 5 - Watkins Glen

Briefing of Project
Header + Hero
Body - Things to do Part 1
Body - Things to do Part 2
Body - Info
Footer
Tweaks
Assignment 5

Photoshop Web Design Project 6 - Retro Gallery

Briefing of Project
Updated URL for Lecture 88
Logo
Header
Hero Part 1 - Custom Retro Slider
Hero Part 2 - Custom Retro Slider
Hero Part 3 - Custom Retro Slider
E-commerce Listings Part 1
E-commerce Listings Part 2
Footer
Assignment 6

Photoshop Web Design Project 7 - Trek Mountain Bike Camp

Briefing of Project
Watercolor
Header + Hero
Body Content
Body Register
Footer
Assignment 7

Bonus 1

Color
Color

Bonus 2 - Top 10 New Updates for Photoshop

Top 10 New Updates for Photoshop CC 2019

BONUS 2

Bonus Lecture: Get Any of my courses for Up to 90% Off!

Screenshots

7 Photoshop Web Design Projects | Master Web Design by Doing - Screenshot_017 Photoshop Web Design Projects | Master Web Design by Doing - Screenshot_027 Photoshop Web Design Projects | Master Web Design by Doing - Screenshot_037 Photoshop Web Design Projects | Master Web Design by Doing - Screenshot_04

Reviews

Firdousi
March 10, 2020
A good course for beginners in Photoshop and Web Design. Chris gives a good insight into both software and Web Design with hands-on practice which make you feel very confident at the end of the course.
Alex
July 29, 2019
There is some useful information but I doubt that the author any time recently did a single real world UI design project and got paid for it. The designs that are created here are mostly unrealistic, sometimes outdated, sometimes plain ugly, sometimes all at once. This is a Photoshop course alright, but not very much a web design one.
Stephen
March 19, 2019
The content is clean and easy to understand. It Leaves me wanting to watch more. As someone who can find it hard to concentrate, this is a good thing.
Chris
February 10, 2019
While I was familiar with most of these features, I learned a few new things and would be very beneficial for nubes. Thx!
Vanessa
January 25, 2019
explainations are visually supported, it is learning while we doing! that great because I am a visual learner
Panagiotis
December 31, 2018
Ok this is not a really bad course but this is nothing more than the average and I will explain why I give 2.5/5 The pros 1) Detailed explanations about what Chris is doing on photoshop 2) Many web design examples 3) He explains some really valuable theoretical aspects of web design and UX thinking approach process. The cons 1) The main problem is that all the designs tend to be outdated. And they are hardly not considered outdated on 2018 they will be for sure by 2019. ADVICE: So a good advice is to make some updates with more modern designs. 2) There is not something new to learn between the web design exercises. This is another serious problem. Even if you are totally beginner in photoshop you will be able to create all the basic elements by the 2nd or 3d exercise. But after that there is nothing new to learn You do not learn how to interact with a client for example wich is different every time. How to handle revisions and how to understand him. A circle testimonial with a stroke and a drop shadow will always be the same. You do not even learn to create new features. Like a custom shape/icon or how to use the brash to make the end of section not a straight line ( I liked the idea of the putting a gradient though shown in an exercise(2nd I think). So as I told in the beginning there are some good ideas and tips to learn) ADVICE: An advice to the instructor would be to try sho the whole process of one of his jobs and he handled revisions that his customer might asked for. If that revisions where too many or if the customer could not make his mind what was his method to handle 3) Poor material. From a photoshop web design course the minimum I expect are the psd files. SO as to be able to compare the 2 versions (instructor's and mine) and see what he did in a different way without having to run always on the video. All in all I believe that this is not a bad course but for sure nothing more than the average
Shaikh
October 25, 2018
Up till now, I am really enjoying the entire Web Design experience since the Instructor tackles every aspect of the Web Design and shows how critical thinking is involved as well. Chris is indeed a talented instructor!
Ibrahim
October 19, 2018
Great course! Started slow and moved on at a good pace, with 7 different nice projects. It is great that the instructor describes what he does in real word because this is what we need as a novice. It would be better, however, if he explains more and in details what each setting does when he uses it rather than just applying, for example, the much settings in the layer styles. But anyway, it was a great course and I have learned a lot. Thanks Chris and keep the amazing work up :)
Pilar
October 1, 2018
the best course about web site, I highly recommended, I learn much thing about to do better web sites
Jenny
October 1, 2018
Too fast and i don't have the background. It should go one step at the time, but I expect I'll catch up as the course developes
NiuNiu
September 18, 2018
Before the classes,I have known the PS.But I learn more something I dont't know of PS after the lessons!
Richard
September 18, 2018
There is a lot to learn and I'm happy that I'm taking this course, I would like it if the videos something I can jot down instead of writing everything I hear verbatim.
FourMoons
September 14, 2018
I'm just going through the second project and can't wait to give my opinion about the Course. Chris Parker is a conscientious, detailed, organized and meticulous instructor who takes you by the hand in the construction of the different web environments. Infinity of useful tips and practical step by step that make you feel that in a short time one is able to tackle any Web Design project. I would like to get more courses on Web Design and thereby establish a learning curve from less to more. In spite of being a video conference one has the feeling that Chris is right by your side to show you all his wisdom and experience. I give him Five Stars.
Thanh
September 11, 2018
The course is understandable and very interesting. I recommend this course to everyone who want to become a designer. Thank you Chris!
Bojan
September 9, 2018
Very helpful. I had some basics in web design but now i'm way more skilled that before. The course is amazing

Coupons

DateDiscountStatus
12/26/202178% OFF
expired

Charts

Price

7 Photoshop Web Design Projects | Master Web Design by Doing - Price chart

Rating

7 Photoshop Web Design Projects | Master Web Design by Doing - Ratings chart

Enrollment distribution

7 Photoshop Web Design Projects | Master Web Design by Doing - Distribution chart
1795968
udemy ID
7/12/2018
course created date
11/11/2019
course indexed date
Bot
course submited by