Photoshop web design, learn by doing. Master UX web design with Photoshop.

The goal of this course is to teach you how to create web designs that provide a great user experience through actually 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 awesome web design course, for Photoshop users...

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 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 how to create web designs that provide a great user experience

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

You'll learn how creating great web designs, that help your clients grow, will help you grow your 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 in to the web design projects

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 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 the 6 most important sections that make up websites

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 that will help you work faster

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

Web Design Project 1

Your first web design project will consist of creating a unique, creative homepage for Nike. You’ll learn about my creative design with the design briefing. 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.

Web Design Project 2

This web design project will have you transform an an old, outdated, real estate website into a design that will increase the clients grow their business by including a call-to-action that prospects will not be able to refuse.

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

how to create custom hero sections with custom shapes

how to use layer masks to show/hide different elements

pro tips for using images of people

pro tips for deciding on what type of photos to include

how to use gradients to make your backgrounds more dynamic

how to easily update your clients 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 effective 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 clients standing in the community which also increases the chances more people will do business with your client.

Web Design Project 3

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

Many new tips and web design tricks 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 web design, and much more.

Web Design Project 4

In this web design project the learning continues! Starting off with a large Hero image as the backdrop of the design. This image alone will elevate this companies existing brand and will distinguish it as a leader in it’s 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.

If visitors are not ready to do business through this site, 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 how to sell your client on 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 design tips for quickly, and easily adding multiple listings by using Command/Control J (Photoshop shortcut). This section of the web design project has a lot more pro tips. One of which is arranging, styling and choosing fonts to make it easier to read 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 very little 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.

Web Design Project 5

Your next web design project consists of taking an old, out-dated, 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.

How the right choice of images is important and the wrong choice can be a disaster.

Learn how to create a pop-up Hover state

and much more

Web Design Project 6

Oh boy! You’re in for a treat.

This is my favorite 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 it’s database of 100,000+ fonts and tell you which one was used!

So far, most of our web design projects have had a modern, clean 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 web design tips along the way!

Web Design Project 7

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

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

Once you’ve completed all 7 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 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.

Who is the target audience?

Created for both new users; See the Photoshop crash course section
Advanced users; Dive right into the 7 web design projects
Anyone who wants to be a web designer
Anyone who wants to stand out from the other 10's of thousands of web designers

Requirements

A willingness to learn web design by doing.
Photoshop CC is recommended. Older versions will work too.

PART1
PART2
PART3