Scratch-Building WordPress Themes With Photoshop Premium class

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

About This Class

Ready for an adventure into WordPress Theme Design? Join award-winning veteran trainer Geoff Blake as he takes you through the entire workflow process of scratch-building a WordPress theme using Photoshop! The training begins in Photoshop, where you’ll be introduced to some setup options and settings to optimize Photoshop for web design. Then, learn about building and using various grid systems, which will serve as the template for the theme layout. Next, it’s on to the next phase in the workflow process, wireframing and UI design in Photoshop. Learn how to stay organized and work quickly and efficiently. Once the wireframe structure is complete, you’ll see how to apply design to the wireframe, and then move the entire layout from Photoshop into the world of code. You’ll discover how to construct a WordPress theme from the ground up, starting with a completely blank canvas! You’ll see a variety of techniques for working between Photoshop, WordPress’s architecture, and the HTML, PHP, and CSS code that pulls it all together. CSS code that pulls it all together.

Download the class project files here.

79

Students

--

Projects

Geoff Blake

Ten Ton Online

Geoff Blake is an award-winning veteran software trainer, author, and designer. A professional public speaker since 1997, Geoff has taught desktop publishing, web design and graphics courses for a wide range of clients and organizations, from Fortune 500 companies and colleges, to small and medium-sized businesses; and to individuals just like  you. In 2009 he launched his video-based training site, Ten Ton Online, allowing him to reach learners worldwide. With his humorous, non-jargonny approach, Geoff's style of teaching revolves around dissolving learner's anxiety, and presenting otherwise technical subjects in a relaxed, easily understandable way. He regularly contributes to top industry magazines and web sites, and continues sharing his knowledge in his casual, off-beat style through his website, tentononline.com.