Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Master Photoshop Web Design With Real World Projects to your Wishlist.

Add to Wishlist

Master Photoshop Web Design With Real World Projects

Learn to harness the power of Photoshop to create stunning website designs
4.2 (37 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
178 students enrolled
Created by Jeff Yeh
Last updated 2/2016
English English
$10 $100 90% off
2 days left at this price!
30-Day Money-Back Guarantee
  • 5 hours on-demand video
  • 14 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Create stunning website designs in Photoshop
Design professional and beautiful web elements
Build a strong foundation in working with Photoshop
Understand principles of web design
View Curriculum
  • No prior knowledge required; this is a progressive course that will cater to anyone wanting to learn Photoshop web design
  • At least Photoshop CS4 is required
  • The will to learn
  • A passion for design

In the ever growing sector of tech companies and startups, the demand for a legitimate web presences is at an all time high. This course, intended for beginners and experienced designers alike, will show you step-by-step the ins and outs of Photoshop, and how to harness its power to create stunning website designs and web elements.

In this comprehensive course, I’ll equip you with the skills and knowledge you need to be a world class web designer

  • Learn how and when to use every tool in Photoshop
  • Design sleek and professional web elements
  • Create stunning website designs from scratch
  • Master web design principles

There is no better time to become a web designer than right now

In this day and age with the trend of everything shifting to be online based, small businesses, startups and big cooporations are scrambling to find web designers who can secure, build and improve their brand and web presence.

This course will teach you the skills and knowledge necessary to create beautiful website designs using Photoshop, while in the process also teach you principles of design, as well as useful techniques, tips and tricks to streamline and increase your workflow efficiency.

You only get better by doing, and with that in mind, this course focuses heavily on practical projects, rather than the traditional theory-based approach. I will show you step-by-step how to design real world website projects and web elements, so you can see the design process and follow along.

Course Structure and Overview

  • Learn the ins and outs of Photoshop - We're going to start off by covering the fundamentals of Photoshop. We'll go over the basics of working within Photoshop, before moving on to learn all tools in Photoshop. We'll go over what these tools are, what they do, and how to use them practically. After these sections you will be confident in using various tools to create and manipulate objects within Photoshop
  • Specialize in Web Design - When working in Photoshop you have a large arsenal of tools at your disposal, but there are particular tools that are crucial to web design. In this section you're going to learn more about these tools with practical exercises so you can increase your skill and fluency in harnessing these tools. To have a look at the exercises, check out the preview videos below.
  • Web Design Projects - After you've learned the fundamentals and mastered the tools of the trade, it's time to dive right into real world design projects. We'll start off with a simple and straightforward project that will get your feet wet and give you a good introduction to creating complete website designs. We will then move onto more challenging projects that will test your skills and knowledge of Photoshop. For a detailed look at what projects you will be working on, check out the free preview videos below.

Course Features

  • Crystal clear videos at full HD with a resolution of 1920 x 1080
  • Clear and concise audio that is easy to understand
  • Over 5 hours of content
  • All lecture material included
  • Bonus project assets are available so you can follow along all lectures.
  • Compatible with Photoshop CS4+

After completing this course, you'll be equipped with the necessary skills and knowledge to confidently create stunning website designs and graphics in Photoshop, as well as having a solid understanding of the principles of web design.

With your newfound skills, you'll be in a good position to become a web designer, or a freelancer earning side income by creating web designs in Photoshop.

Who is the target audience?
  • This course is great for anyone looking to learn Photoshop web design
  • Anyone who is wanting to become a web designer, or earn side income freelancing
  • Anyone who is looking to learn Photoshop
  • Suitable for beginners to advanced designers as this course will cover topics and projects ranging in difficulty
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 58 Lectures Collapse All 58 Lectures 04:58:16
2 Lectures 05:18

Welcome to Master Photoshop Web Design With Real World Projects, check out this promo video to learn more.

Preview 03:02

In this video you'll be able to get an overview of what this course is, and what it covers.

Preview 02:16
The Photoshop Workspace
5 Lectures 13:08

Find out what this section is about and what you'll learn.

Preview 00:50

In this lecture we're going to go over the Photoshop interface, introducing you to different parts of the interface, and where to find various features and settings.

Workspace Overview

Knowing how to navigate the canvas is paramount to maximizing efficiency; in this lecture I'm going to show you different ways to navigate your canvas.

Navigating the Canvas

Rulers and guides help us produce pixel perfect designs, learn how they work in this lecture.

Rulers and Guides

There may come a time when you find having a particular section of the Photoshop interface at its location sub-optimal; in this lecture I will show you how to re-arrange the interface to fit your needs.

Customizing Your Workspace
Photoshop 101 / Tools Crash Course
18 Lectures 01:00:36

Find out what this Photoshop 101/Tools Crash Course is about, and what it covers.

Preview 00:56

We'll start this section off by covering how to create a new document in Photoshop; we'll also cover the various settings that come with the creation of a new document.

Creating a New Document

Photoshop is a layer-centric software, meaning everything you do will be revolved around layers. You'll learn the concept and principles of working with layers in this lecture.

Working With Layers

We start the "Tools Crash Course" by covering the Move Tool. Learn what it is, how to use it, and examples of this tool in use.

Move and Transformation Tools

When working in Photoshop, selections is one of, if not the most important task that you will constantly be performing. Learn how to use selection tools in this lecture.

Selection Tools

We'll cover the Crop, Eyedropper and Ruler tools in this lecture. Learn what they are, how to use them, and examples of these tools in use.

Crop, Eyedropper, and Ruler Tools

In this lecture we'll cover the brush tool, including how to use it, and various types and settings that come with this tool.

Brush Tools

This lecture will cover the different eraser tools in Photoshop.

Eraser Tools

The paint bucket is one of the staple colour tools in Photoshop, we'll be covering how to use it, the different settings that come with it, as well as covering the gradient tool.

Paint Bucket and Gradient Tools

In this lecture we'll cover the Blur, Sharpen, and Smudge tools as well as any accompanying parameters and settings.

Blur, Sharpen and Smudge Tools

We'll go over the Dodge, Burn and Sponge tool and relevant settings in this lecture.

Dodge, Burn and Sponge Tools

In this lecture we'll cover the Pen tool, as well as the different operation modes and settings that accompany this tool.

Pen Tool

Type tool, or also known as the text tool, is used to enter text in Photoshop. In this lecture you'll learn how to use it, as well as the various settings that come with it. We'll also be covering the character panel.

Type Tool

When transforming shapes with rounded corners, it's important to keep the corners in proportion, in this lecture you're going to learn how to achieve this using the Direct Selection Tool.

Direct Selection Tools

The shape tool is one of the staple tools in Photoshop, and even more so in web design, so in this lecture we're going to go over how to use the shape tool, as well as the different variations, settings, and parameters.

Shape Tools

Everyone makes mistakes, and in this lecture you're going to learn how to reverse those mistakes with the help of the History Panel.

History Panel

Blending modes in Photoshop refers to how an element interacts with another, in this lecture you're going to learn what blendings modes are, as well as the various options.

Blending Modes

Layer Styles enables you to add flair and make elements more dynamic, in this lecture we'll be covering how to use layer styles as well as the different options.

Layer Styles
Photoshop for Web Design
10 Lectures 51:45

Find out what we'll be covering in this section, as well as the practical exercises we're going to be doing.

Preview 01:26

Learn what Photoshop Etiquette is and how you can increase your desirability as a designer by following these 10 quick guidelines from me.

Photoshop Etiquette

Hotkeys are essentially keyboard shortcuts in Photoshop. Learning these are essential in order for you to speed up workflow and become a better designer. Learn the most common shortcuts in this lecture.

Photoshop Hotkeys

In web design, we often use grid systems to keep our designs well-coordinated, well aligned, as well as standard-compliant. Learn what these grid systems are, as well as how to use them in this lecture.


Alignment is crucial in keeping your designs looking professional; in this lecture we're going to go over how to align, as well as various ways of aligning elements in Photoshop.


In this lecture we're going to put all the skills and knowledge you have to use by designing a professional navigation menu.

Designing a Main Navigation Menu

Building on the navigation we created in the last lecture, we're now going to design a searchbox, complete with Ajax search results.

Designing a Search Box

In this lecture we're going to design a sleek and professional download button.

Designing a Download Button

Clipping masks is used extremely often in Photoshop. In this lecture we're going to go over what they are, and how to use them.

Clipping Masks

Now that you've done a few exercises, we're going to put that skill to good use by creating a hero area, complete with a logo text, call to action message and buttons.

Designing a Hero Area
Project 1: Designing Your First Website - TraveLog
8 Lectures 40:21

This video will cover the first project you're going to be working on. This project is designed to be straight-forward so you can get a good understanding of designing full web sites before moving onto more difficult projects.

Preview 01:22

In this lecture we're going to set up our Photoshop document so it's ready for design. We'll also be create guides to form a custom grid system.

Workspace Set Up

In this lecture you're going to design the hero area for this website, as well as the call to action message and button.

Designing the Hero Area

We're going to design a navigation menu in this lecture, complete with the logo text and navigation items.

Designing a Navigation Menu

Learn how to design a call to action section in this lecture, including a ghost button.

Call to Action Section

In this lecture we're going to be designing a value proposition section, complete with 3 customer testimonial modules.

Value Proposition and Testimonials Section

The famous saying "The money is in the list" exists for a reason. It's important to capture email addresses whenever possible, and in this lecture we're going to create an email capture section.

Email Capture Form

To finish off this project, we're going to design the footer and copyright bar for our website.

Footer and Copyright Bar
Project 2: The Hideaway Cafe Website
8 Lectures 57:49

In this video I'm going to cover what the second project in this course involves. We're going to be working on designing a website for a cafe.

Preview 01:58

We're going to design the hero area and navigation in this lecture.

Designing the Hero Area and Navigation Menu

In this lecture we'll be learning advanced shape manipulation by creating a logo badge for our cafe website.

Designing the Logo Badge

We're going to step up the challenge in this lecture. We're going to be creating an "About Us" section on the left side, which includes text blocks and a call to action button. On the right we're going to create a gallery complete with thumbnail previews and a selection border.

About Us Section and Gallery

In this lecture we're going to create a dining menu for our cafe website. You're going to learn how to streamline and speed up repetitive tasks, as well as getting a whole heap of practice in with the text tool.

Designing the Dining Menu

Content boxes with gradient overlays and tinted content boxes are seen everywhere and is definitely a trend. In this lecture you're going to learn how to create tinted content boxes in the "Exciting Events" section of our website.

Exciting Events Section

Forms and dropdown menus are an important part of any website, whether it's a contact form or a sign up form. In this lecture we're going to create a "Barista Training" section that will include drop down menus and buttons, as well as a disclaimer text block.

Barista Training

We'll finish off this project by designing the footer and copyright bar. We'll be incorporating additional elements into our footer.

Footer and Copyright Bar
Project 3: Ascension Gaming Website
7 Lectures 01:09:19

In this video I'm going to cover what the Ascension project involves. This project will be a big leap in terms of difficulty and complexity, so make sure you've completed all exercises and projects before attempting this project.

Preview 01:53

In this lecture we're going to design the hero area and the main navigation menu. We will be incorporating additional elements into our navigation menu, such as separators, logo, and an icon.

Designing the Hero Area and Navigation Menu

In this lecture you'll learn advanced uses of the shape tool as well as advanced applications of layer styles by designing a beta sign up form that will reside on the right side of the hero area.

Designing a Beta Sign Up Form

In this lecture we are going to create a "What is Ascension" section that tells visitors more about the game. You will learn to design video players and call to action buttons.

What is Ascension

We will be creating a section that delve deeper into the game and introduces a game mechanic called "Paths." You will be learning to design a section that comprises of shapes, icons, and text, and making it beautiful.

Forge Your Path

A forum is a necessity if you want to create a community. In this lecture we're going to design a forum overview section that will be a part of the Ascension website.

Designing a Community Forum

We'll finish off this project by designing the footer and copyright bar, you will also be learning new footer alignment techniques in this lecture.

Footer and Copyright Bar
About the Instructor
4.5 Average rating
45 Reviews
1,281 Students
2 Courses
Web & UI/UX Designer

Jeff has been a web designer for over 10 years.

Jeff designed his first website back in 1998 for a local cafe out of pure curiosity, and after getting some excellent feedback, he became obsessed with web design.

During university he worked as a freelancer, taking on web design projects from time to time, as well as tutoring individuals on how to utilize WordPress as a platform.

Since finishing university Jeff has been involved in numerous projects involving web design, web consultation and SEO.

Nowadays he's a full time entrepreneur focusing on wen design for various clients, as well as building niche websites to generate passive income.

Report Abuse