LOADING

Type to search

Design web Design

7 Photoshop Web Design Projects. Learn Web Design by Doing

Education Eyl 11

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

Chris Parker

Hello I’m Chris Parker and I’ve been a pro graphic designer for 30 years.

And I remember my first website design all the way back in 2002.

It was horrible I had no idea what I was doing.

And after 16 years and hundreds of web site designs later I’ve learned what to do and what not to do.

So in this course it’s more than just about web design it’s about designing a web site with the end
user and mind and it’s actually even better than that.

It’s about doing because you’re not just going to watch me design.

I encourage you to take what you learn and design exactly what I created.

Then it’s time to take what I designed and make it better to make it your own.

When you’ve completed this web design course you will have seven unique web designs for your portfolio.

Now in addition to designing seven unique web sites I’ll share with you my 16 years of experience and
provide real world advice on creating better web sites than the average designer.

Tips on selling additional services to your clients and much more.
So this course was designed for both beginners and advanced users of Photoshop in the beginning of the

course we’re going to go over all the basic tools in Photoshop that you need as a web designer.
Now if you’re already familiar with Photoshop you can skip that section and dive right into the anatomy
of a Web site.

So that section we will dissect each section of a website to help you keep your PTSD files organized.

You will then discover the most popular web design styles.

The grid system.

And then you’ll be able to begin on the seben web design projects.

I’ll show you step by step how to create a web site from the header to the hero section.

The different elements that make up the body and then finally the footer.

Now in every project you will learn something new and each project builds on the last.

So here are just some of the things you’re going to learn in this web design course you’re going to
learn how to create web designs that provide a great user experience and why you need to create a great
user experience.

You will also learn how creating a great user experience will help your clients grow their business
and in turn will help you get more business yourself.

You’re also going to learn additional add on services that you can upscale your clients on besides just
web design and then you’re going to learn the tools to make creative backgrounds that will help grab
people’s attention through using gradients layer masks and more.

You’re also going to learn what it takes to succeed as a web designer and stand out among the tens of
thousands of other web designers out there.

And this is going to help ensure that you are successful and your web design career.

You’re going to learn the importance of choosing the right fonts and other typography prototypes.

You’re also going to learn additional protests not just about designing but the business end of design
as well and much more.

Now if you’re still unsure if this course is right for you here’s a recent testimonial So we have four
moons writes Chris Parker is a conscientious detailed organized and meticulous instructor who takes
you by the hand in the construction of the different web projects.

You get useful tips and practical step by step instructions that make you feel that in a short time
one will be able to tackle any web design project in spite of being in the online course one has the
feeling that Chris is right by your side to show you all his wisdom and experience.

So with over 10000 students and more joining every month you too can overcome your fears of being a
web designer and master it once and for all.

In fact you have 30 days to try out this class.

Love it and it’s yours forever.

If it’s not for you that’s OK.

Just ask for a no questions asked refund within the first 30 days.

I’m looking forward to sharing my 16 years of web design experience with you and look forward to seeing
your creative work.

Thanks for listening.

Have an awesome day and I’ll see you on the inside.

What is this course teaching

  • 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 (and likely will end up with more work than you can handle)
  • 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 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

Course Details

Photoshop web design, learn by doing. Master UX web design with Photoshop. Web design is all about the user experience.

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 UX 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 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 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 UX 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 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 in to 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 an attribution
  • You’ll learn the 6 most important sections that make up 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 that will help you work faster
  • 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 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.


Photoshop – UX – Web Design Project 2

This UX web design project will have you transform an an old, outdated, real estate website into a professional design style.  The new design was created for a better UX (user experience).  Which will help the client 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, 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 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.


Photoshop – UX – Web Design Project 3

Our next UX 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 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 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 UX 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.

Photoshop – UX – Web Design Project 5

Your next UX 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, for Photoshop.
  • 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, 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 it’s 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; a Watercolor (in Photoshop).  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 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.

Bu kurs kimler için uygun:
  • Updated for new (and advanced) 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

What's ın Course 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!

Student Reviews

I am text block. Click edit button to change this text.

Tags:

You Might also Like

Leave a Comment

Your email address will not be published. Required fields are marked *