by Geoff Blake | Publisher: Ten Ton Books | Release Date: June 2014 | ISBN: 00024BWWPSCC

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.

1. Chapter 1: Introduction
   • Hello and Welcome 00:01:21
   • Here's What We'll Build 00:02:13
   • The Workflow Process 00:03:53
   • Setting Up Photoshop for Web Layout 00:07:05
   • Saving Our Photoshop Customizations 00:04:48
2. Chapter 2: Structuring Layouts with Photoshop
   • Introducing the 960 Grid System 00:03:08
   • Setting Up Our 960 Grid Template 00:05:48
   • Creating the First Wireframe Object 00:04:31
   • Continuing to Wireframe Objects 00:04:44
   • Additional Techniques for Wireframing 00:11:36
   • Finishing Up The Base Wireframe 00:02:58
   • Organizing The Layers And Resetting The Properties Panel 00:06:01
   • Roughing In The Header Content 00:05:34
   • Building Out the Hero Section 00:08:02
   • Wireframing the Introducing Section 00:05:37
   • Creating the Organize Section 00:04:04
   • Building the Get It Now Section 00:03:25
   • Finishing Up The Wireframe 00:03:03
   • Organizing And Colour Coding The Layers Panel 00:04:54
   • Adding Text Labels To The Wireframe 00:03:47
   • Exporting The Wireframe For Approval 00:06:18
3. Chapter 3: Applying Design To The Wireframe
   • Gathering The Design's Resources, Part One 00:10:13
   • Gathering The Design's Resources, Part Two 00:08:14
   • Creating the Site Logo With An Illustrator Smart Object 00:06:38
   • Using Layer Styles To Format Buttons 00:08:00
   • Saving And Using A Custom Style 00:02:17
   • Finishing Up The Header 00:02:25
   • Using Linked Smart Objects 00:10:53
   • Using Layer Masks To Position Content 00:05:26
   • Finishing Up The Hero Section 00:03:51
   • Designing With Clipping Groups And Linked Smart Objects 00:12:44
   • Developing The Organize And Share Sections 00:04:18
   • Finishing Up The Layout's Design 00:03:35
4. Chapter 4: Getting The Layout Out Of Photoshop And Into Code
   • Introducing Photoshop's Asset Generator 00:08:07
   • Going Further With The Asset Generator 00:12:48
   • Getting The Layout's Assets Organized 00:05:05
   • Generating HTML With Photoshop 00:12:34
   • Getting Set Up For The Coding Phase 00:09:22
   • Adjusting The External Style Sheet 00:04:47
   • Setting Up The Structural CSS 00:06:54
5. Chapter 5: Rebuilding The Layout With Code
   • Rebuilding The Header And Copying CSS Directly From Photoshop 00:11:42
   • Creating The App Store Header Button 00:04:59
   • Getting Started On The Hero Section 00:04:48
   • Finishing Up The Hero Area 00:04:58
   • Creating The Introducing Section 00:06:57
   • Odd Behaviour With Photoshop's Copy CSS Command 00:05:46
   • Recreating The Organize And Share Sections 00:05:05
   • Building The Get Section And Footer 00:03:08
   • Wrapping Up The Project 00:02:43
6. Chapter 6: Wrapping Up
   • Where to Go From Here 00:04:06