Master Photoshop Web Design With Real World Projects

Learn to harness the power of Photoshop to create stunning website designs
4.3 (31 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.
161 students enrolled
Instructed by Jeff Yeh Design / Web Design
$19
$100
81% off
Take This Course
  • Lectures 58
  • Length 5 hours
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English Closed captions available

Course Description

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.

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
03:02

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

02:16

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

Section 2: The Photoshop Workspace
00:50

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

02:07

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.

02:20

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.

04:38

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

03:13

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.

Section 3: Photoshop 101 / Tools Crash Course
00:56

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

01:42

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.

06:27

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.

06:15

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.

08:34

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.

03:46

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.

04:54

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

02:22

This lecture will cover the different eraser tools in Photoshop.

04:32

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.

01:49

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

02:22

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

03:25

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

02:53

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.

01:09

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.

04:06

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.

01:59

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

00:54

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.

02:31

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.

Section 4: Photoshop for Web Design
01:26

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

02:53

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

01:15

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.

02:11

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.

02:59

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.

14:51

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

07:13

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

07:45

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

02:07

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.

09:05

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.

Section 5: Project 1: Designing Your First Website - TraveLog
01:22

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.

03:02

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.

04:24

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

03:29

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

05:18

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

10:57

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

04:38

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.

07:11

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

Section 6: Project 2: The Hideaway Cafe Website
01:58

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.

02:32

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

08:11

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

10:48

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.

09:13

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.

06:52

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.

09:21

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.

08:54

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

Section 7: Project 3: Ascension Gaming Website
01:53

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.

06:03

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.

10:55

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.

13:41

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.

15:40

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.

11:46

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.

09:21

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Jeff Yeh, 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.

Ready to start learning?
Take This Course