Scratch-Building WordPress Themes With Photoshop

Geoff Blake, Ten Ton Online

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
105 Videos (13h 24m)
    • Hello And Welcome

      2:05
    • Understanding WordPress And WordPress Themes

      2:23
    • The Workflow Process

      3:06
    • Viewing The Finished Site

      3:58
    • Setting Photoshop's Preferences

      5:57
    • Arranging The Workspace

      9:42
    • Setting Panel Options

      6:51
    • Customizing Menus And Keyboard Shortcuts

      8:52
    • Saving Photoshop’s Workspace

      3:09
    • Photoshop Color Management For Web Design

      5:26
    • Common Photoshop Productivity Techniques

      5:55
    • A Few Final Photoshop Settings

      4:16
    • Understanding Monitor Resolution

      4:02
    • Fixed Versus Flexible Web Layouts

      4:16
    • Introducing The 960 Grid System

      8:58
    • Available Column Widths In The 960 Grid System

      4:14
    • Building A Custom Grid System

      14:01
    • Using Photoshop’s Grid For Layout

      3:17
    • Understanding The Golden Ratio

      4:57
    • Understanding The Areas Of A WordPress Site

      4:06
    • Roughing Out The Design

      4:50
    • Getting Started With Wireframing

      5:53
    • Creating The First Wireframe Object

      6:05
    • Continuing To Wireframe Objects

      7:24
    • Deleting Wireframe Objects

      2:11
    • Faster Methods For Creating Wireframe Objects

      10:31
    • Building Up The Wireframe

      10:06
    • Adding In Horizontal Rules

      4:00
    • Wireframing Additional Objects, Plus Some Extra Techniques

      9:13
    • Continuing The Wireframe Development

      6:34
    • Placing Objects For Loop Post Thumbnails

      5:00
    • Roughing In A Photo Gallery

      5:24
    • Wireframing The Menu Text

      9:44
    • Creating More Wireframe Text

      9:10
    • Adding In Additional Text Objects

      7:54
    • Finishing Up The Text Wireframing

      3:33
    • Getting The Layers Panel Organized

      9:27
    • Additional Layer Group Techniques

      6:36
    • Adding Text Labels To The Wireframe

      7:36
    • Exporting The Wireframe For Review

      7:39
    • Preparing The Wireframe For The Design Phase

      3:18
    • Determining The Design’s Message

      4:50
    • Choosing A Typeface Hierarchy

      13:53
    • Choosing Colour Combinations

      12:25
    • Saving Out Custom Photoshop Color Palettes

      3:26
    • Sourcing Photography And Textures

      8:05
    • Creating The Site Logo (And Using Smart Objects)

      8:46
    • Introducing Layer Style Special Effects

      7:06
    • Finishing Up The Header

      3:11
    • Building The Menu

      8:18
    • Developing The Slideshow And Body Background

      4:11
    • Formatting The New Additions Area

      17:51
    • Blog Loop Formatting

      3:07
    • Developing The Sidebar

      6:24
    • Finishing Up With The Footer & Saving Out Custom Styles

      10:07
    • Adding A Texture To The Header With A Clipping Group

      8:06
    • Including Additional Textures

      4:36
    • Adding A Photo To The Slideshow

      4:01
    • Inserting Photography For The New Additions Area

      4:55
    • Adding Post Thumbnails In The Loop

      5:29
    • Inserting Thumbnails In The Photo Gallery

      3:20
    • Tools Of The Trade

      4:12
    • Understanding Template Hierarchy

      6:08
    • A Look At Geoff’s Setup

      1:44
    • Applying A Blank WordPress Theme

      6:00
    • Reviewing & Adjusting The Style Sheets

      5:13
    • Creating The First Div And CSS Rule

      5:27
    • Roughing In The Layout

      9:09
    • Further Roughing In The Layout

      12:38
    • Adding The Photoshop Colour Palette To The Theme's Style Sheet

      6:44
    • Creating Our Site’s Page Structure And Main Navigation Menu

      8:35
    • Creating Sample Posts For The Loop

      3:30
    • Pulling The Header Graphic Out Of The Layout

      9:46
    • Inserting The Header Graphic Into The Theme

      3:29
    • Extracting The Logo From Photoshop And Inserting It Into The Theme

      8:56
    • Rebuilding The Navigation Menu Using CSS

      20:00
    • Building Up The Main Content Area

      6:22
    • Roughing In The Inner Containers

      18:37
    • Inserting The Positioning Statement

      4:58
    • Creating Button Formatting With CSS

      20:02
    • Building And Formatting The New Additions Area, Part One

      5:52
    • Building And Formatting The New Additions Area, Part Two

      12:13
    • Font Replacement With Google Fonts API

      10:19
    • Consolidating Font Usage And Organizing Typography

      21:11
    • One Giant Leap For Theme Design…

      9:48
    • Formatting The Loop

      9:53
    • Adding Post Thumbnails To The Loop

      21:19
    • Getting The Sidebar Started

      3:39
    • Reviewing How The Footer Was Built

      6:17
    • Formatting Hyperlinks

      5:53
    • Limiting The Number Of Posts Appearing On The Home Page

      6:37
    • Inserting Custom Loop Pagination

      9:05
    • Inserting The Slideshow

      16:24
    • A Better Way For Building WordPress Menus

      8:09
    • Building And Formatting WordPress Subpages

      8:26
    • Applying Formatting To Post Pages

      7:16
    • Completely Customizing The Comments Area

      18:54
    • Adding A Ribbon Graphic To The Comments Area

      15:49
    • Customizing Category And Search Results Pages

      8:07
    • Adding A Search Field To The Header

      8:23
    • Building A Lightbox Photo Gallery

      16:11
    • Finishing Touches

      3:34
    • Addressing Browser Compatibility Issues

      9:42
    • Final Site Checklist

      1:56
    • Thanks For Watching, That Was Fun!

      4:01