Building Websites With Photoshop CC

Course Curriculum

Chapter 1: Introduction

Lecture 1: Hello And Welcome

Lecture 2: Here's What We'll Build

Lecture 3: The Workflow Process

Lecture 4: Setting Up Photoshop For Web Layout

Lecture 5: Saving Our Photoshop Customizations

Chapter 2: Structuring Layouts With Photoshop

Lecture 1: Introducing The 960 Grid System

Lecture 2: Setting Up Our 960 Grid Template

Lecture 3: Creating The First Wireframe Object

Lecture 4: Continuing To Wireframe Objects

Lecture 5: Additional Techniques For Wireframing

Lecture 6: Finishing Up The Base Wireframe

Lecture 7: Organizing The Layers & Resetting The Properties Panel

Lecture 8: Roughing In The Header Content

Lecture 9: Building Out The Hero Section

Lecture 10: Wireframing The Introducing Section

Lecture 11: Creating The Organize Section

Lecture 12: Building The Get It Now Section

Lecture 13: Finishing Up The Wireframe

Lecture 14: Organizing & Colour Coding The Layers Panel

Lecture 15: Adding Text Labels To The Wireframe

Lecture 16: Exporting The Wireframe For Approval

Chapter 3: Applying Design To The Wireframe

Lecture 1: Gathering The Design's Resources, Part One

Lecture 2: Gathering The Design's Resources, Part Two

Lecture 3: Creating The Site Logo With An Illustrator Smart Object

Lecture 4: Using Layer Styles To Format Buttons

Lecture 5: Saving & Using A Custom Style

Lecture 6: Finishing Up The Header

Lecture 7: Using Linked Smart Objects

Lecture 8: Using Layer Masks To Position Content

Lecture 9: Finishing Up The Hero Section

Lecture 10: Designing With Clipping Groups & Linked Smart Objects

Lecture 11: Developing The Organize & Share Sections

Lecture 12: Finishing Up The Layout's Design

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

Lecture 1: Introducing Photoshop's Asset Generator

Lecture 2: Going Further With The Asset Generator

Lecture 3: Getting The Layout's Assets Organized

Lecture 4: Generating HTML With Photoshop

Lecture 5: Getting Set Up For The Coding Phase

Lecture 6: Adjusting The External Style Sheet

Lecture 7: Setting Up The Structural CSS

Chapter 5: Rebuilding The Layout With Code

Lecture 1: Rebuilding The Header & Copying CSS Directly From Photoshop

Lecture 2: Creating The App Store Header Button

Lecture 3: Getting Started On The Hero Section

Lecture 4: Finishing Up The Hero Area

Lecture 5: Creating The Introducing Section

Lecture 6: Odd Behaviour With Photoshop's Copy CSS Command

Lecture 7: Recreating The Organize And Share Sections

Lecture 8: Building The Get Section & Footer

Lecture 9: Wrapping Up The Project

Chapter 6: Wrapping Up

Lecture 1: Where To Go From Here