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