O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Scratch-Building WordPress Themes with Photoshop

Video Description

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. You’ll master amazing techniques for streamlining your code, working with font replacement API’s, and understanding WordPress’s template structure. Then, you’ll see some fantastic options for adding in lightbox galleries, self-running slideshows, hyperlink formatting, and more! And in the end, you’ll wind up with a fully finished and functional website, complete with feature pages, posts, a commenting system, and more! C’mon along for the ride, you’ll learn a lot, and have a heap of fun along the way!

Table of Contents

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