Oct 17 2009

From Photoshop file to HTML/CSS to WordPress series

Screen shot 2009-10-17 at 4.59.04 PMI miss having the time to read my daily blogs like I used to, but came across this great series from one of my favorites: Chris Coyier, whose one site CSS-Tricks has helped me immensely.

In the series he takes you from the design process of making a webpage layout, to the slicing and coding process - where CSS makes the design come to life. Next he takes you through the process of integrating that code into a CMS (content management system) like WordPress. This way everything (posts, feeds, updates) are dynamic and site wide. I hope you subscribe to his RSS feed, check out his other blogs and enjoy the series.

I commented that I hoped there was a 4th in the series to show us the process in prepping and encoding the photo gallery, contact form, shopping cart and Twitter feed. We'll all have to check back in to see!

Part 1 starts from absolute scratch in Photoshop, with just a few provided resources from the client. We design the homepage and skin for the site.

Screen shot 2009-10-17 at 4.47.42 PM

Part 2 shows how to slice up the design from Photoshop into XHTML/CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Part 3 shows how to convert it into a WordPress template.

Screen shot 2009-10-17 at 4.45.57 PM

Share

Jul 27 2009

WordPress Blog from Your Design Tutorials!

I recently went through a 16 part tutorial on ThemeForest.com and I was enlightened on the process of taking your Photoshop design and integrating it into WordPress. There are endless themes you can choose from to customize your own blog, but for a designer or someone who already has a site branded, it is important to be consistent and merge the two.

It is still continuing, but we are all waiting for author Drew Douglas to hurry up, I can't wait to finish this already!

Anyways, in reading my daily blogroll of incredible writers and informative designers, I came across this list from the site http://www.noupe.com. Many thanks for author Cameron Chapman. Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

WordPress

WordPress is a free blogging platform that can be modified to be used as a CMS.

So you want to create WordPress themes huh?

This is one of the most complete WP theme-building tutorials out there. It consists of 25 separate lessons and covers how the WP templating system works, The Loop, post meta data, search forms, calendars, comment templates and pretty much everything else about themes in WP. If you want to build a theme completely from scratch, this is the tutorial to show you how.

CMS Theming Tutorials

How to create a simple WordPress theme

This tutorial gives instructions for creating a basic, simple WP theme that includes the header.php, index.php, sidebar.php and footer.php template files, in addition to the style sheet. It’s very simple and straight-forward, but a great place to start if you’re new to building WP themes. The basic steps can easily be adapted to building more complex themes.

CMS Theming Tutorials

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Here’s another very complete tutorial, offering up 11 lessons on how to create a WP theme. It focuses on creating a theme with good SEO, valid and logical semantic markup, separated trackbacks and comments, two widget areas, and all the basics you’d expect from a WP theme. The lessons are ordered logically and include theme development tools and information about the WP template and directory structure.

CMS Theming Tutorials

How to convert any web template into a WordPress theme

Sometimes you don’t want to design a theme from scratch. Maybe you’ve found the perfect theme (or designed one), but it’s just a regular web template, not a WP theme. This tutorial will show you how to convert that web template into a WP theme without too much trouble. It also includes a link to a video tutorial showing how one template was converted.

CMS Theming Tutorials

How to Create a WordPress Theme from Scratch

This tutorial shows how to take a basic HTML/CSS template and convert it to a WP theme. It’s incredibly complete, covering every aspect of WP theming. It also explains how themes are structured and how to create the core theme files.

CMS Theming Tutorials

Share