Building Websites with Photoshop CC

Learn step-by-step how to build web layouts and extract code with Photoshop CC…the right way!

This course includes…

  • Unlimited lifetime access
  • Downloadable project files
  • 30 day money-back guarantee

Start right now!


Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

“I love Geoff’s training courses. It’s like he’s sitting right beside me, taking me through everything step-by-step!”


Easily apply designs to your Photoshop wireframes

See how to build modern, clean web wireframes in Photoshop, and how to apply beautiful designs on top of them.

Export Photoshop content to web-ready graphics

Discover how to extract your designs and layouts from Photoshop, piece by piece — automatically!

Extract code directly from Photoshop

Learn a variety of methods for pulling accurate, browser-ready code from Photoshop and into your favourite coding application.

Free course included!

Enrollment includes Foundations In Web Design, a free bonus course, at no extra cost!

  • Worksheets
  • Hands-on lessons
  • Other extras and goodies!

Let’s make sure this is a good fit

Before going further, let’s make sure you’re in the right spot. The info below will help…

Who is this course for?

Those wanting a solid understanding of web design, including…

  • People who want to become full or part-time web designers.
  • Print designers who want to expand their skills into web design.
  • Employees who want to add to their skills, advance their careers, and become more marketable.
  • Small business owners who want complete control over their website.
  • Those wanting to save the cost and headache of hiring an expensive web designer.
  • People with ideas for side-projects, small businesses, and creative online ventures.
  • Hobbyists and those interested in doing web design on the side.

Sound like a good fit? Then let’s get started! If not, then let’s find the right course for you.

Course description

Looking to design websites, either professionally or for your own use? Award-winning veteran trainer Geoff Blake will guide you through the process of building an entire web page from scratch using Photoshop! You’ll learn how to best organize the Photoshop interface to streamline your workspace for web design, eliminating the clutter and making creating web pages fast and easy. Explore the various grid systems that can be used as templates to build professional looking web pages. Next, it’s on to wireframing and UI design, where you’ll learn how to create a mockup that can be sent to clients for approval, or simply kept for personal reference. You’ll also discover how to build upon a wireframe to design a beautiful, and functional web page. Once you’re satisfied with your design, this course will show you how to extract the HTML and CSS that will bring your design to life, and how to customize the code to suit your needs. So if you’re interested in web design for fun or profit, this course will set you up with everything you will need.

Course prerequisites

It’s a good idea to be familiar with the following before enrolling in this course:

  • General computer skills (comfortable copying and pasting, navigating through folders…the basics).
  • Comfortable using a web browser, navigating web pages, etc.
  • A working copy of Photoshop CS4 or above (the free trial version is fine).
  • No prior experience with coding or web design is required.
  • A basic understanding of Photoshop is helpful (my Getting Started With Photoshop CC course or equivalent), but not required.
  • A familiarity with web design fundamentals is helpful, but not required.

Sound like a good fit? Then let’s get started! If not, then let’s find the right course for you.

“From the web layout’s header, down to the footer, Geoff literally walks us through each section of the design, including graphics, code and so much more. Plus, after learning all his helpful Photoshop hints, tips and tricks, all I can say is that I wish I found this course sooner!”


Let a friend show you how

Hey, I’m Geoff. I help graphic designers, small business owners, and creative people just like you learn about web design, develop valuable, in-demand skills, launch online businesses and creative projects…and yeah, make more money! Learn more about me here.

Learning how to build websites is no different than figuring out perspective drawing, how to weave literary prose, or how to combine chords to make beautiful music. It’s like cooking or woodworking or learning how to fix your car…But for whatever reason, web design’s made out to be highly technical and overly complicated. Let’s change that.

Whatcha waitin’ for?!

Start right now!


Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

What others are saying

People just like you are building dream web projects every day. A few would love to tell you how Ten Ton helped them get there.

“With Geoff’s excellent training, I graduated at the top of my 3-year college program in just 2 years.”

Ian’s story

“I fired my web designer and saved tons of money, thanks to Geoff’s videos.”

Bridgette’s story

“It’s because of Geoff that I can now call myself a web designer and can get paid for it.”

Patrick’s story

Start right now!


Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

Course outline

Here’s a complete outline of all of the topics covered in this course

Chapter 1: Introduction

  1. Hello and Welcome (Free Lesson!)
  2. Here's What We'll Build (Free Lesson!)
  3. The Workflow Process (Free Lesson!)
  4. Setting Up Photoshop for Web Layout (Free Lesson!)
  5. Saving Our Photoshop Customizations (Free Lesson!)

Chapter 2: Structuring Layouts with Photoshop

  1. Introducing the 960 Grid System
  2. Setting Up Our 960 Grid Template
  3. Creating the First Wireframe Object
  4. Continuing to Wireframe Objects
  5. Additional Techniques for Wireframing
  6. Finishing Up The Base Wireframe
  7. Organizing The Layers & Resetting The Properties Panel
  8. Roughing In The Header Content
  9. Building Out the Hero Section
  10. Wireframing the Introducing Section
  11. Creating the Organize Section
  12. Building the Get It Now Section
  13. Finishing Up The Wireframe
  14. Organizing & Colour Coding The Layers Panel
  15. Adding Text Labels To The Wireframe
  16. Exporting The Wireframe For Approval

Chapter 3: Applying Design To The Wireframe

  1. Gathering The Design's Resources, Part One
  2. Gathering The Design's Resources, Part Two
  3. Creating the Site Logo With An Illustrator Smart Object
  4. Using Layer Styles To Format Buttons
  5. Saving & Using A Custom Style
  6. Finishing Up The Header
  7. Using Linked Smart Objects
  8. Using Layer Masks To Position Content
  9. Finishing Up The Hero Section
  10. Designing With Clipping Groups & Linked Smart Objects
  11. Developing The Organize & Share Sections
  12. Finishing Up The Layout's Design

Chapter 4: Getting The Layout Out Of Photoshop & Into Code

  1. Introducing Photoshop's Asset Generator
  2. Going Further With The Asset Generator
  3. Getting The Layout's Assets Organized
  4. Generating HTML With Photoshop
  5. Getting Set Up For The Coding Phase
  6. Adjusting The External Style Sheet
  7. Setting Up The Structural CSS

Chapter 5: Rebuilding The Layout With Code

  1. Rebuilding The Header & Copying CSS Directly From Photoshop
  2. Creating The App Store Header Button
  3. Getting Started On The Hero Section
  4. Finishing Up The Hero Area
  5. Creating The Introducing Section
  6. Odd Behaviour With Photoshop's Copy CSS Command
  7. Recreating The Organize And Share Sections
  8. Building The Get Section & Footer
  9. Wrapping Up The Project

Chapter 6: Wrapping Up

  1. Where to Go From Here

Frequently Asked Questions

Got questions? We’ve got answers!

What is Ten Ton?

Hey, I’m Geoff, an award-winning teacher, artist, and designer. Ten Ton Online is my premium online training platform to help graphic designers, small business owners, hobbyists, and other creative rabble-rousers learn about web design. If you want to discover how to build beautiful looking websites, how you can develop valuable, in-demand skills, or how to launch and market online businesses and creative projects, you’re in the right spot! You can view the full list of courses here.

Can I sign up any time?

Yes. All courses are completely self-paced. This means you can enroll now, and start your course whenever you like.

How do I watch the videos?

After enrolling, you’ll be able to stream your course lessons on the web, to your computer, tablet, or smartphone.

Can I download the video lessons?

To best serve the community, lessons are provided as streaming video only. This is because courses are sometimes updated to provide users with the latest information and content.

How long will I have access to my courses?

All courses come with unlimited, lifetime access. This means you can access your course as often as you’d like, without any limitations.

Are there recurring monthly costs?

Nope. There’s just a single one-time enrollment fee for your course.

Are courses self-paced or scheduled?

Courses are completely self-paced, allowing you to work through lessons at your own speed. You can skip ahead or go back, and otherwise move through your courses as quickly or slowly as you’d like. You can find out more about how it all works right here.

Are project files included?

You bet! Courses come with downloadable project files, allowing you to get the most out of your learning experience. You’re encouraged to follow along, step-by-step, so you can gain real-world, hands-on skills.

What is your refund policy?

All courses come with a 30-day money back guarantee. If you’re not satisfied with your course within 30 days of purchase, let us know. We’re here to help.

Where should I start?

Start with my free Foundations In Web Design course. It’ll give you a solid foundation in web design, and help you determine which direction you should head in based on your interests and goals.

I have more questions, how can I contact you?

You can contact me right here.

Start right now!


Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

“A big thank you for your amazing, easy to understand videos. I love your easy going style, it makes them so much easier to follow and have a good laugh as well. You have the uncanny knack of getting inside our heads and knowing what we find confusing. Amazing! Many thanks!”


Hello and Welcome (Free Lesson!)

Here's What We'll Build (Free Lesson!)

The Workflow Process (Free Lesson!)

Setting Up Photoshop for Web Layout (Free Lesson!)

Saving Our Photoshop Customizations (Free Lesson!)