Please ensure Javascript is enabled for purposes of website accessibility
Photoshop: How To Design A Website In Photoshop
4.0( 1 REVIEWS )
2h 49m

This course is designed for those interested to learn how to design a website using Photoshop.

Read more.
Course Skill Level
Time Estimate
2h 49m


Access all courses in our library for only $9/month with All Access Pass

Get Started with All Access PassBuy Only This Course

About This Course

Who this course is for:

  • This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary.
  • This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

What you’ll learn: 

  • Learn all the techniques used by professional website designers.
  • Ways to preview your designs straight to your mobile device.
  • Firm understanding of responsive web design.
  • Learn professional workflows and shortcuts.
  • A wealth of other resources and websites to help your new career path.


  • You’ll need a copy of Photoshop CC 2015 or above.
  • No previous Photoshop or web design experience is necessary.

Software version used in the course:

  • Photoshop CC 2015

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Our Promise to You
By the end of this course, you will have the knowledge on how to design a website using Photoshop.

10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today and learn more about designing a website using Photoshop.

Course Curriculum

Section 1 - Overview
Introduction 00:00:00
What Do We Need To Deliver At The End Of Our Project? 00:00:00
What Is Photoshop’s Role When Designing A Website 00:00:00
What Are The Production Videos? 00:00:00
Section 2 - Before You Get Started
Getting Your Workspace Ready For UI Work 00:00:00
Adjusting The Photoshop Preferences 00:00:00
Section 3 - Mobile Friendly Web Design
Understanding Responsive Mobile And Tablet Design 00:00:00
Understanding Grid Systems And Bootstrap 00:00:00
Section 4 - The Tools You’ll Need
Tips For Zooming And Navigating Your Document 00:00:00
Measuring And Spacing Tools 00:00:00
Layer Shortcuts You Need To Know 00:00:00
The Eye Dropper Tool 00:00:00
The Transform Tool 00:00:00
The ‘F’ Key 00:00:00
Section 5 - Triple Check It Works!
Testing On iPhone And iPad Using Adobe Device Preview 00:00:00
What Is Technically Possible In Web Design 00:00:00
Screen Sizes For Desktop, Tablet, And Mobile 00:00:00
Section 6 - Your Pages
Using Artboards 00:00:00
What About Page Heights? 00:00:00
Page Guides, Columns And Rulers 00:00:00
Make Your Own Grid 00:00:00
Section 7 - Color
Picking Website Colors 00:00:00
Section 8 - Adding Structure
Adding Structure To Your Site With The Vector Shapes 00:00:00
Production Video – Adding Structure 00:00:00
Section 9 - Using Text
Expanding And Fixed Width Text Boxes 00:00:00
How To Design Using Web Safe Fonts Via Google Fonts 00:00:00
Place Holder Text With Lorem Ipsum 00:00:00
Production Video – Adding All Of Our Text 00:00:00
Section 10 - Page Adjustments
Adjusting Your Page Edges 00:00:00
Section 11 - Adding Images
Where To Get Commercial Use Free Images 00:00:00
Embedding And Linking Images 00:00:00
How To Mask Your Images Using A Clipping Mask 00:00:00
Masking Images For Rounded Courses And Circles 00:00:00
How To Create Large Background Images 00:00:00
Production Video – Adding Images 00:00:00
Section 12 - Using Icons
Where To Get Commercial Use, Free Icons For Your Design 00:00:00
Production Video – Adding Your Icons 00:00:00
Section 13 - Mastering Layers
Layers – How To Tidy Up With Grouping 00:00:00
Layers – Speed Up With Layer Searchlayers – Find What You Need Quickly With Layer Search 00:00:00
Layers – Naming Your Layers Quickly 00:00:00
Section 14 - Forms And Footers
Designing A Form For Your Website 00:00:00
Designing A Footer For Your Website 00:00:00
Production Video – Finishing Up Our Desktop View 00:00:00
Section 15 - Creating Mobile Websites
Design The Mobile Website 00:00:00
Production Video – Completing Our Mobile View 00:00:00
Section 16 - Exporting Your Photoshop File
Using Adobe Generate To Make Image Export Amazing 00:00:00
Exporting Your Web Images 00:00:00
Exporting CSS From Photoshop 00:00:00
Section 17 - Conclusion
Conclusion – I Don’t Want This To Be Over. What Next Dan? 00:00:00

Course Review


1 Ratings
  1. Anonymous

    Interesting Approach


    About to rebuild my company website. I’m hoping to use this lesson to get the layout done and will probably outsource the build.


Join our newsletter and get your first course free!


Join our newsletter and get your first course free!

Congratulations! You get one free course of your choice. Please check your email now for the redemption code

Are you interested in higher education?