This course is designed for those interested to learn how to design a website using Photoshop. Read more.
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout 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.
Requirements:
- 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 | ||
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.
Requirements:
- 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
4.0
1 RatingsRelated Courses
Are you interested in higher education?
All Rights Reserved
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.