About This Course

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.

What are the requirements?

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

What am I going to get from this course?

  • 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.

Who is the target audience?

  • 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.

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

30 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
top
Template Design © VibeThemes. All rights reserved.

Setup Menus in Admin Panel