Table of Contents

1. Chapter 1: Introduction
   • Hello and Welcome 00:02:05
   • Understanding WordPress and WordPress Themes 00:02:24
   • The Workflow Process 00:03:06
   • Viewing the Finished Site 00:03:59
2. Chapter 2: Setting Up Photoshop for Web Layout!
   • Setting Photoshop's Preferences 00:06:07
   • Arranging The Workspace 00:09:43
   • Setting Panel Options 00:06:52
   • Customizing Menus And Keyboard Shortcuts 00:08:53
   • Saving Photoshop's Workspace 00:03:10
   • Photoshop Color Management For Web Design 00:05:27
   • Common Photoshop Productivity Techniques 00:05:55
   • A Few Final Photoshop Settings 00:04:16
3. Chapter 3: Getting Set Up for User Interface Design!
   • Understanding Monitor Resolution 00:04:13
   • Fixed Versus Flexible Web Layouts 00:04:17
   • Introducing the 960 Grid System 00:08:59
   • Available Column Widths in the 960 Grid System 00:04:15
   • Building A Custom Grid System 00:14:01
   • Using Photoshop's Grid for Layout 00:03:18
   • Understanding the Golden Ratio 00:04:58
   • Understanding the Areas of A WordPress Site 00:04:06
   • Roughing Out The Design 00:04:50
4. Chapter 4: Developing A Wireframe UI in Photoshop!
   • Getting Started with Wireframing 00:06:03
   • Creating the First Wireframe Object 00:06:05
   • Continuing to Wireframe Objects 00:07:24
   • Deleting Wireframe Objects 00:02:12
   • Faster Methods for Creating Wireframe Objects 00:10:32
   • Building Up the Wireframe 00:10:06
   • Adding in Horizontal Rules 00:04:01
   • Wireframing Additional Objects, Plus Some Extra Techniques 00:09:13
   • Continuing the Wireframe Development 00:06:34
   • Placing Objects for Loop Post Thumbnails 00:05:01
   • Roughing in A Photo Gallery 00:05:25
5. Chapter 5: Finishing Up the Wireframe!
   • Wireframing the Menu Text 00:09:54
   • Creating More Wireframe Text 00:09:11
   • Adding in Additional Text Objects 00:07:55
   • Finishing Up the Text Wireframing 00:03:33
   • Getting the Layers Panel Organized 00:09:28
   • Additional Layer Group Techniques 00:06:36
   • Adding Text Labels to the Wireframe 00:07:36
   • Exporting the Wireframe for Review 00:07:39
6. Chapter 6: From Wireframe to Design!
   • Determining the Design's Message 00:03:28
   • Choosing A Typeface Hierarchy 00:04:50
   • Choosing Colour Combinations 00:13:54
   • Saving Out Custom Photoshop Color Palettes 00:12:25
   • Sourcing Photography and Textures 00:03:26
   • Creating the Site Logo (And Using Smart Objects) 00:08:05
   • Introducing Layer Style Special Effects 00:08:47
   • Finishing Up the Header 00:07:06
   • Building the Menu 00:03:12
   • Developing the Slideshow and Body Background 00:08:18
   • Formatting the New Additions Area 00:04:11
   • Blog Loop Formatting 00:17:52
   • Developing the Sidebar 00:03:07
   • Finishing Up with the Footer And Saving Out Custom Styles 00:06:24
7. Chapter 7: Applying Photography and Textures!
   • Adding A Texture to the Header with A Clipping Group 00:08:16
   • Including Additional Textures 00:04:37
   • Adding A Photo to the Slideshow 00:04:02
   • Inserting Photography for the New Additions Area 00:04:55
   • Adding Post Thumbnails in the Loop 00:05:30
   • Finalizing the Design and Exporting for Review 00:03:20
8. Chapter 8: Preparing A Blank WordPress Theme for Design!
   • Tools of the Trade 00:04:23
   • Understanding Template Hierarchy 00:06:08
   • A Look At Geoff's Setup 00:01:44
   • Applying A Blank WordPress Theme 00:06:00
   • Reviewing And Adjusting the Style Sheets 00:05:14
   • Creating the First Div And CSS Rule 00:05:28
   • Roughing in the Layout 00:09:09
   • Further Roughing in the Layout 00:12:38
   • Adding the Photoshop Colour Palette to the Theme's Style Sheet 00:06:45
   • Creating Our Site's Page Structure and Main Navigation Menu 00:08:54
   • Creating Sample Posts for the Loop 00:03:31
9. Chapter 9: Building The WordPress Theme From Complete Scratch!
   • Pulling the Header Graphic Out of the Layout 00:09:57
   • Inserting the Header Graphic Into the Theme 00:03:30
   • Extracting the Logo From Photoshop and Inserting it Into the Theme 00:08:56
   • Rebuilding the Navigation Menu Using CSS 00:20:00
   • Building up the Main Content Area 00:06:23
   • Roughing in the Inner Containers 00:18:38
   • Inserting the Positioning Statement 00:04:59
   • Creating Button Formatting with CSS 00:20:14
   • Building and Formatting the New Additions Area, Part One 00:05:53
   • Building and Formatting the New Additions Area, Part Two 00:12:14
   • Font Replacement with Google Fonts API 00:10:20
   • Consolidating Font Usage and Organizing Typography 00:21:12
   • One Giant Leap for Theme Design... 00:09:48
   • Formatting the Loop 00:09:54
   • Adding Post Thumbnails to the Loop 00:21:20
   • Getting the Sidebar Started 00:03:39
10. Chapter 10: Pushing the Theme Design Further!
    • Reviewing How the Footer was Built 00:06:27
    • Formatting Hyperlinks 00:05:53
    • Limiting the Number of Posts Appearing on the Home Page 00:06:37
    • Inserting Custom Loop Pagination 00:09:05
    • Inserting the Slideshow 00:16:25
    • A Better Way for Building WordPress Menus 00:08:09
    • Building and Formatting WordPress Subpages 00:08:26
    • Applying Formatting to Post Pages 00:07:16
    • Completely Customizing the Comments Area 00:18:54
    • Adding A Ribbon Graphic to the Comments Area 00:15:49
    • Customizing Category and Search Results Pages 00:08:07
    • Adding A Search Field to the Header 00:08:23
    • Building A Lightbox Photo Gallery 00:16:11
    • Finishing Touches 00:03:34
    • Addressing Browser Compatibility Issues 00:09:42
11. Chapter 11: Wrapping Things Up!
    • Final Site Checklist 00:02:07
    • Thanks for Watching, That Was Fun! 00:04:02
    • Closing Credits 00:00:36