Photoshop CC – Building Websites

$49.99 $27.00

Looking to design websites, either professionally or for your own use? With this Photoshop CC – Building Websites course, you will learn the process of building an entire web page from scratch using Photoshop! 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.

Length: 5 hrs

This title is available in the
Total Training All-Access library.

Subscribe Now


Learn to use Photoshop CC to design awesome looking websites with this Photoshop CC – Building Websites training course!

You’ll 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.

Sample clip

Chapter 1: Introduction
Hello and Welcome
Here’s What We’ll Build
The Workflow Process
Setting Up Photoshop for Web Layout
Saving Our Photoshop Customizations

Chapter 2: Structuring Layouts with Photoshop
Introducing the 960 Grid System
Setting Up Our 960 Grid Template
Creating the First Wireframe Object
Continuing to Wireframe Objects
Additional Techniques for Wireframing
Finishing Up The Base Wireframe
Organizing The Layers & Resetting The Properties Panel
Roughing In The Header Content
Building Out the Hero Section
Wireframing the Introducing Section
Creating the Organize Section
Building the Get It Now Section
Finishing Up The Wireframe
Organizing & Colour Coding The Layers Panel
Adding Text Labels To The Wireframe
Exporting The Wireframe For Approval

Chapter 3: Applying Design To The Wireframe
Gathering The Design’s Resources, Part One
Gathering The Design’s Resources, Part Two
Creating the Site Logo With An Illustrator Smart Object
Using Layer Styles To Format Buttons
Saving & Using A Custom Style
Finishing Up The Header
Using Linked Smart Objects
Using Layer Masks To Position Content
Finishing Up The Hero Section
Designing With Clipping Groups & Linked Smart Objects
Developing The Organize & Share Sections
Finishing Up The Layout’s Design

Chapter 4: Getting The Layout Out Of Photoshop & Into Code
Introducing Photoshop’s Asset Generator
Going Further With The Asset Generator
Getting The Layout’s Assets Organized
Generating HTML With Photoshop
Getting Set Up For The Coding Phase
Adjusting The External Style Sheet
Setting Up The Structural CSS

Chapter 5: Rebuilding The Layout With Code
Rebuilding The Header & Copying CSS Directly From Photoshop
Creating The App Store Header Button
Getting Started On The Hero Section
Finishing Up The Hero Area
Creating The Introducing Section
Odd Behaviour With Photoshop’s Copy CSS Command
Recreating The Organize And Share Sections
Building The Get Section & Footer
Wrapping Up The Project

Chapter 6: Wrapping Up
Where to Go From Here

Geoff BlakeGeoff Blake is an award-winning instructor with nearly 20 years of experience creating online video courses. His goal is to help people gain serious web skills, helping them to expand their business, develop their projects, and yeah – make more money!

Geoff is a published author, having written ‘Ten Ton Dreamweaver’ with Peachpit Press. He also held a professorship at Seneca college, and ran graphics workshops at George Brown, and Humber colleges in Toronto.

You may also like…