Archive for April, 2008

A common misconception is that you don’t need many tools if you’re using Photoshop or other computer based design applications. While you may not need as many as non-computer based designers, I think a case can be made for keeping an arsenal of art supplies around. Maybe it’s the former SCAD student in me talking but here is a breakdown of the non-software products I use in my workflow.

(more…)

This is the seventh post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 – “Tools For The Task” and “Preparation”
Part 2 – “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 – “Photoshop to XHTML in 24 Hours”
Part 4 – “Cleaning Up Your XHTML”
Part 5 – “Preloading Images with Javascript and CSS”
Part 6 – “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”

• First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
• Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.

(more…)

This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 – “Tools For The Task” and “Preparation”
Part 2 – “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 – “Photoshop to XHTML in 24 Hours”
Part 4 – “Cleaning Up Your XHTML”
Part 5 – “Preloading Images with Javascript and CSS”

Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

(more…)

Today I’m going to take a look at object iteration, most commonly found in the Standard PHP Library, and explore using the Iterator interface to simplify looping.

(more…)

Image heavy websites have one problem: load time. So if you’re designing a Wordpress theme that relies heavily on images like one made in Photoshop, you want to do everything you can to increase speed. a) You want the images to display as shortly after the text does as possible and b) you want to do everything to help users on slower connections.

One way to do this is with javascript, the other way is with CSS.

(more…)

You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

(more…)

We’ve just started our first Wordpress theme! In Part 1 and Part 2 we reviewed some techniques that will allow our design to be marked up to XHTML. In this lesson you’ll learn exactly how to do this and why it isn’t exactly as easy as it seems.

Photoshop to XHTML in 24 Hours

So we’ve all seen those ads for websites that say they can “Photoshop to XHTML/CSS in X Ammount of time” right? No? well here’s 39 of them. What exactly are these service doing that you can’t as the theme designer? Nothing. If you feel so inclined, save yourself the fee (usually around $100 or so dollars) and do it yourself!

(more…)

Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.

Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

(more…)

In this multi-part series I’ll detail how to create and design a Wordpress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. Before you continue you should look over other tutorials “Working with Wordpress Offline Like A Pro and “Color Proofing Photoshop” as some of the topics discussed there will come up in this tutorial like working offline to develop themes, and proofing your colors so that they translate accurately for the web. At the end of the entire series I’ll allow you to download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.

(more…)

With the advent of Web 2.0, social media has become an integral part of daily online life. It has become so powerful with its viral nature that succeeding in this arena may become a make or break deal for your website. If you plan to harness it, you might as well do it properly. Here are just a few tips.

1. Link Bait – The content on your site should be stuff that’s interesting and/or useful, the type that other people would want to link to and share with their friends. There are many ways to do this: having a blog on your site, offering free white papers, gathering breaking news, how-to articles, pictures, videos, statistics, and collections of multiple resources and tools.

2. Others First Policy – A common mistake rookies commit (including myself when I was starting out), is that they submit their own content to social media sites exclusively, right from the start. That’s a no-no. Build your reputation first as a source of great sites within the communities of these sites. Digg or Stumble other people’s content. Only when you get yourself a sizeable following should you start submitting your own.

3. Presentation – Now when you send other people to your site, make sure they’ll like what they see. Great content badly presented will not be terribly effective, negating all your hard work. So, make sure your ads, if any, don’t clutter up your pages. Check for the site design’s compatibility to major browsers and screen sizes. Add life to your pages by including relevant images. To make reading easier for your visitors, break the content down to sections and highlight the titles.

4. Buttons – All the popular social bookmarking sites have their own little buttons you could put at either the top or bottom of your post. If you’re using Wordpress or some other CMS, make them part of your template.

5. Discuss – Social media sites have their own groups and forums. Try to join the discussions on topics related to your site. If there are questions you can answer, by all means offer your take on things. This helps to boost your ranking among the community. In forums that permit it, you can put a link to your site on your signature.

6. Reciprocate – If someone Diggs your article or posts it on a forum, write a thank you note to that person. If he or she has a blog, try to see if you like any of the entries and return the favor. You can also ask if this person wants to exchange links, which is mutually beneficial for climbing the search engine rankings.