Scratch-Building WordPress Themes With Photoshop

  • Scratch-Building WordPress Themes With Photoshop, Singapore SKillsFuture elarning online course
  • Scratch-Building WordPress Themes With Photoshop, Singapore SKillsFuture elarning online course
  • Scratch-Building WordPress Themes With Photoshop, Singapore SKillsFuture elarning online course
  • Scratch-Building WordPress Themes With Photoshop, Singapore SKillsFuture elarning online course
  • Scratch-Building WordPress Themes With Photoshop, Singapore SKillsFuture elarning online course
  • Scratch-Building WordPress Themes With Photoshop, Singapore SKillsFuture elarning online course

Course 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, wire framing 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.

See your effort take shape and deliver an astounding theme using Photoshop.

- Learn how WordPress and Photoshop work together
- Learn different techniques for building themes from scratch
- Know how you can turn your mock-up into real designs
- Realize your mock-up designs into actual themes in WordPress

This course is Skillsfuture Credit Eligible.

Course Objectives

1. Understand the introduction to Photoshop and WordPress
2. Be able to set up Photoshop for web layout and familiar with user interface
3. Know how to transform wireframe into designs
4. Be able to build WordPress themes from scratch
5. Be able to work with photographs and textures
6. Know how to push your theme design even further 

Related Courses

  • Adobe Audition CS5.5

    Adobe Audition CS5.5

    SGD $49.00

    Course Description

    This VTC course introduces you to Adobe's recently released Audition CS5.5 which now integrates into their creative suite. Author Mark Struthers will give you a background in digital audio as he illustrates both the benefits of working on individual files in the waveform editor and the way the multitrack view allows audio file manipulation over many tracks simultaneously. Additionally, owing to Audition's tightly integrated video editing facility, he will touch on working with Adobe's Premiere Pro. As the course progresses, effect processing is considered to help improve, repair, and optimize your audio files. You will be able to follow techniques throughout the course that not only introduce you to new and existing features but also allow you to pick up tips and tricks along the way. Click on the movie links below to get started now!Discover how to optimize your audio quality with Adobe Audition.- Learn the tools and techniques to create quality audio- Know different editing methods using Adobe Audition- Know why Adobe Audition is used to create optimal audio files- Master these skills and apply to your projectsThis course is SkillsFuture Credit Eligible.


  • Video Editing: Adobe Premiere Pro CS6, After Effects & More

    Video Editing: Adobe Premiere Pro CS6, After Effects & More

    SGD $99.00

    Course Description

    Adobe Premiere Pro is a timeline-based video editing software application. It is part of the Adobe Creative Cloud, which includes video editing, graphic design, and web development programs. Premiere Pro is used by broadcasters such as the BBC and CNN. It has been used to edit feature films, such as Gone Girl,Captain Abu Raed, and Monsters, and other venues such as Madonna's Confessions Tour. Adobe After Effects is a digital visual effects, motion graphics, and compositing application developed by Adobe Systems and used in the post-production process of filmmaking and television production. Among other things, After Effects can be used for keying, tracking, compositing and animation. It also functions as a very basic non-linear editor, audio editor and media transcoder. Work natively with the video formats you want and accelerate production from scriptwriting to editing, encoding, and final delivery to create groundbreaking motion graphics and blockbuster visual effects.Create exciting video magic and turn your person videos into blockbuster level hits- Master editing techniques using Premiere Pro CS6- Understand how to manage and manipulate your projects to create stunning visuals- Learn about the latest features of Premiere Pro CS6 like Lumetri Color- Be able to produce satisfactory videos to wow your audience - Impress your friends, bosses and yourself with your new video editing skillsThis course is SkillsFuture Credit Eligible.


  • Adobe Illustrator CS6

    Adobe Illustrator CS6

    SGD $45.00

    Course Description

    Adobe Illustrator CS6 is the industry standard in vector art illustration. From the creation of logos to posters to menus and more, Illustrator has the tools to help bring your creativity to life. In this VTC course, you will learn how to use the new interface, panels, and tools, as well as the new features like pattern creation, improved image trace, save for web, gradients on strokes, and Gaussian blur enhancements. Professional illustrator, television animation art director, and writer Dwayne Ferguson gives you an in-depth look at Illustrator CS6, taking you through the tools and features you will need to master to take your creativity to the next level.Take your creativity to the next level with Adobe Illustrator!- Learn ways to create logos, posters from your own imagination- Discover the different ways you can create projects in Adobe Illustrator - Know how you can add your own spin to your designs - Make use of the newly-added features to Adobe Illustrator CS6This course is SkillsFuture Credit Eligible.




Preview Available

Download Project Files

Hello and Welcome

Understanding WordPress and WordPress Themes

The Workflow Process

Viewing the Finished Site

Setting Up Photoshop for Web Layout

Preview Available


Setting Photoshop's PreferencesPeview

Arranging The WorkspacePeview

Setting Panel Options

Customizing Menus And Keyboard ShortcutsPeview

Saving Photoshop's Workspace

Photoshop Color Management For Web Design

Common Photoshop Productivity Techniques

A Few Final Photoshop Settings

Getting Set Up for User Interface Design


Understanding Monitor Resolution

Fixed Versus Flexible Web Layouts

Introducing the 960 Grid System

Available Column Widths in the 960 Grid System

Building A Custom Grid System

Using Photoshop's Grid for Layout

Understanding the Golden Ratio

Understanding the Areas of A WordPress Site

Roughing Out The Design

Developing A Wireframe UI in Photoshop


Getting Started with Wireframing

Creating the First Wireframe Object

Continuing to Wireframe Objects

Deleting Wireframe Objects

Faster Methods for Creating Wireframe Objects

Building Up the Wireframe

Adding in Horizontal Rules

Wireframing Additional Objects, Plus Some Extra Techniques

Continuing the Wireframe Development

Placing Objects for Loop Post Thumbnails

Roughing in A Photo Gallery

Finishing Up the Wireframe


Wireframing the Menu Text

Creating More Wireframe Text

Adding in Additional Text Objects

Finishing Up the Text Wireframing

Getting the Layers Panel Organized

Additional Layer Group Techniques

Adding Text Labels to the Wireframe

Exporting the Wireframe for Review

From Wireframe to Design


Preparing the Wireframe for the Design Phase

Determining the Design's Message

Choosing A Typeface Hierarchy

Choosing Colour Combinations

Saving Out Custom Photoshop Color Palettes

Sourcing Photography and Textures

Creating the Site Logo (And Using Smart Objects)

Introducing Layer Style Special Effects

Finishing Up the Header

Building the Menu

Developing the Slideshow and Body Background

Formatting the New Additions Area

Blog Loop Formatting

Developing the Sidebar

Finishing Up with the Footer & Saving Out Custom Styles

Applying Photography and Textures


Finalizing the Design and Exporting for Review

Adding A Texture to the Header with A Clipping Group

Including Additional Textures

Adding A Photo to the Slideshow

Inserting Photography for the New Additions Area

Adding Post Thumbnails in the Loop

Preparing A Blank WordPress Theme for Design


Tools of the Trade

Understanding Template Hierarchy

A Look At Geoff's Setup

Applying A Blank WordPress Theme

Reviewing & Adjusting the Style Sheets

Creating the First Div and CSS Rule

Roughing in the Layout

Further Roughing in the Layout

Adding the Photoshop Colour Palette to the Theme's Style Sheet

Creating Our Site's Page Structure and Main Navigation Menu

Creating Sample Posts for the Loop

Building The WordPress Theme From Complete Scratch


Pulling the Header Graphic Out of the Layout

Inserting the Header Graphic Into the Theme

Extracting the Logo From Photoshop and Inserting it Into the Theme

Rebuilding the Navigation Menu Using CSS

Building up the Main Content Area

Roughing in the Inner Containers

Inserting the Positioning Statement

Creating Button Formatting with CSS

Building and Formatting the New Additions Area, Part One

Building and Formatting the New Additions Area, Part Two

Font Replacement with Google Fonts API

Consolidating Font Usage and Organizing Typography

One Giant Leap for Theme Design...

Formatting the Loop

Adding Post Thumbnails to the Loop

Getting the Sidebar Started

Pushing the Theme Design Further


Reviewing How the Footer was Built

Formatting Hyperlinks

Limiting the Number of Posts Appearing on the Home Page

Inserting Custom Loop Pagination

Inserting the Slideshow

A Better Way for Building WordPress Menus

Building and Formatting WordPress Subpages

Applying Formatting to Post Pages

Completely Customizing the Comments Area

Adding A Ribbon Graphic to the Comments Area

Customizing Category and Search Results Pages

Adding A Search Field to the Header

Building A Lightbox Photo Gallery

Finishing Touches

Addressing Browser Compatibility Issues



Final Site Checklist

Thanks for Watching, That Was Fun!

SkillsFuture Credit Eligible
SGD $99.00
(Price excludes GST)
Convince your boss email
This site is best viewed using the latest versions of Google Chrome, Apple Safari, Mozilla FireFox, Microsoft Internet Explorer 11 and Edge which supports HTML5/Webkit technologies.