Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Building Wordpress Themes From Scratch with Photoshop
Introduction
Hello and Welcome (1:51)
Understanding WordPress and WordPress Themes (2:23)
The Workflow Process (3:06)
Viewing the Finished Site (3:58)
Setting Up Photoshop for Web Layout
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)
Getting Set Up for User Interface Design
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:58)
Understanding the Areas of A WordPress Site (4:06)
Roughing Out The Design (4:50)
Developing A Wireframe UI in Photoshop
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)
Finishing Up the Wireframe
Wireframing the Menu Text (9:44)
Creating More Wireframe Text (8:54)
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)
From Wireframe to Design
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)
Applying Photography and Textures
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)
Finalizing the Design and Exporting for Review (3:20)
Preparing A Blank WordPress Theme for Design
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)
Building The WordPress Theme From Complete Scratch
Pulling the Header Graphic Out of the Layout (9:46)
Inserting the Header Graphic Into the Theme (3:30)
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:12)
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)
Pushing the Theme Design Further
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)
Wrapping Things Up
Final Site Checklist (1:56)
Thanks for Watching, That Was Fun (3:42)
Setting Photoshop's Preferences
Complete and Continue