Recently I asked you what you’d like to learn how to do, and one reader asked about the process of taking a mockup of a site into WordPress. There are quite a few good tutorials out there and you’ll want to read several as you’ll pick up different ideas and tips from each one. Anyway, this is my process:
Create your mockup
When mocking up the site, always keep CSS in the back of your mind. Don’t let it stifle your creativity, but do keep in mind you’re going to have to translate your design into code and considering how you’re going to make that happen as you’re creating it is helpful. If you’re new at taking a design into code, then start simple. Once you have some practice, then branch out a little. I have found that just about anything I design, I can find a way to code it effectively, and pushing the limits each time expands my proficiency with CSS and WordPress.
Also consider the size of graphic elements as you’re designing. You want your site to load as quickly as possible. Use repeatable tile graphics where possible, and if you can use them in multiple places all the better. For example, your small gradient that you’re repeating horizontally across your nav bar can also be used as the background for a search button and for sidebar headings.
Print out or sketch your mockup and make notes
This step isn’t always 100% necessary, but depending on the complexity of what I’m trying to accomplish, I often find it helpful to think through where all the divs are going to go on paper and make notes about border and background color codes as well. It makes it much easier to fly through the coding stage having thought through it all on paper first.
Slice your mockup
Do this after you’ve done the above step, as it might impact how you slice your images. Make your images as small as possible to accomplish the design. You only need a 1px wide slice of that nav bar background that repeats horizontally. Be sure you’re using the “Save for Web” option in Photoshop and compare file types to get the smallest size with the best result possible. I save my images as PNGs if possible because they are lossless, but I always compare what the file size is if I were to save in JPG at about 70% and if the JPG is smaller that’s what I go with. If I’m going to use transparency, I’m still erring on the side of caution and going with GIF for the most part because IE6 users will just see grey in the transparent areas of a transparent PNG. If the site is targeted to lower-tech users, this is a no-brainer. (I have a site where still 20% of the visitors are on IE6. Crazy.) But, if it’s mostly going to be a higher tech target, then transparent PNGs are the way to go, or just avoid transparency if possible.
Pick a theme to use as a base
I go back through themes I’ve done in the past and choose the most similar one to the new one and copy it over to use as a starting point. If you’re relatively new to designing themes for Wordpress and don’t have that option, here are a couple of alternatives:
- Start with the default theme that comes pre-installed with WordPress.
- Use a free theme, but be sure to choose one that has easy to modify code. Be sure to leave the attribution in the footer to the original author if you’re not changing the theme much. My DIY Theme can be a good choice as I’ve deliberately made it uncluttered and simple to be easily customized.
- There are some very good “blank” WP themes. There is a list of themes and other resources at DesignMag, and here are three blank themes from Refueled.
- Buy a license for a premium theme. I have found that any of Brian Gardner’s premium themes are very easy to customize. I’ve worked with A LOT of themes and his would be my first choice any day.
- Use a WordPress theme generator and customize the result. The PixoPoint generator looks excellent. I used this one a couple of years ago and it worked well. Here’s another and another.
Code!
Make sure all your sliced images are in the images folder for the theme and dive in. I always code directly in a live WP installation on my test site. You can also set up WP locally on your own computer. I’ve done this, following these instructions (beware, it’s a bit hairy). If you’re still learning CSS you might find my post on playing around with CSS directly in your browser via Firebug helpful. You’ll definitely want to install Firebug either way. It makes it very easy to see what bits of CSS are affecting each element, and when your site goes all wonky because you’ve forgotten to close a div, it makes it much easier to track it down.
Validate and test
This is an important step and one that’s easy to overlook. Use the W3C Validator to find errors in your code. I found diagnosing the problems to be a real challenge at first in some cases, but don’t let that deter you from ensuring your code is valid. Be sure to test your site in every browser you can. You can install multiple versions of IE on your computer with this tool.
Let me know what questions you have. What do you find most difficult about this process? Anywhere you’re getting stuck I can help you with?
![[Post to Twitter]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-twitter.png){kind=icon}
![[Post to Delicious]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-delicious.png){kind=icon}
![[Post to Digg]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-digg.png){kind=icon}
![[Post to StumbleUpon]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-su.png){kind=icon}
V3C Validator always returns mistakes… for some peculiar reasons I cannot get rid of it. I started from 230 and broght the down to 33. Is there any automatic converter or software that makes it all with the touch of a button?
@Matt – not that I know of. It’s frustrating, I know!
But this is quite ridiculous if you think about it. I have great design ideas and I am quite okay with photoshop. And when it comes to the nerdy code… I am loosing it!
@Matt – you could always just pay someone to do the code. Try PSDtoWP.com or Design Enabler.
So this is how its done. I’m not a designer or a coder but I’ve always wondered how you guys do it. I have a designer friend who makes a lot of cash selling designs made through Photoshop. She pays coders to code the design.
This is awesome. I’ve been wanting to customize a theme. Thank for the tips!
Pol
Conference Executive
Great article for those of us who are new to the Word Press world… thanks and keep them coming.
This article is of great help for people like me who are new to photoshop and customizing Wordpress themes.
[...] Photoshop to WordPress: A Basic Guide (tags: photoshop wordpress) [...]
I found this tutorial really helpful. I am working on a new theme for my blog and didn’t know how to even get started. Thanks for writing this sage advice!
Great Post, to use a 1 px wide nav bar slice and repeat the image never occured to me.
I am going to apply that to a photo id card site I have, I am sure that will drop the load time by a fair bit.
Now I’ve just got to get up to speed on Photoshop. (LOL)
Nice work.
Thank you.
Do you know how can I find Photoshop schareware in French?
While I don’t use W3C to validate my websites anymore, the rest is exactly what I tell new website designers to do. I think W3C has a good tool but it is too limiting and time consuming for larger projects (over 500 hours development time).
I’m going to have to brush up on the Photoshop skills now! Great article.
Randa,
This post made me laugh!
You made everything sound so easy… when in fact a lot of these actions take precision, patience, and in some cases a variety of skills (I don’t think every digital artist knows CSS or that the same people who can slice in Photoshop can NECESSARILY chop up a WP template).
I enjoyed it anyway.
-Dermify
@Dermify & Jason – certainly not everyone cares to do all the pieces of this process themselves. Sometimes giving a big picture overview can tend to make parts of the process seem simple, when in reality they can be time consuming and complex. However, if one is interested, it’s possible to learn to do the whole process and be self-sufficient as a web designer. It is very nice for me not to have to sub-contract out pieces of jobs. I can be in complete control of the timeliness and quality of the job that way.
Alot of people don’t validate their code anymore. So you made a good point there. More designers should read this.
I agree with Dermify, I know a few digital artists who have been in the business for several years and have never used CSS.
Either way, I enjoyed the article
I’ve to agree with Matt Coner’s opinion here, as the V3C validator always returns some unknown mistakes, although there’s no any mistakes on the site’s code!
I used the Validome to check up my code and for those that interested, you can try it as well.
I also have designed many different themes in PS but I’ve never coded them. Randa, I saw you say that I could pay someone. Do you know about how much this costs? Thanks
How to Jump Higher
@Wilson – I agree. Sometimes 100% validation is neither possible nor necessary.
@Nathan – I would expect to pay around $400 for someone good. The last thing you want is to go cheap and get a cheap result.
Wordpress is quickly becoming my choice to design not just blogs, but websites as well. It just keeps on getting better and better.
Today i discovered your site. It’s amazing ! Thank you !
Great post! Will have to give it a go sometime.
WordPress is continually growing for both blog use and generally CMS websites. I use a similar process for all web design really. some important points, especially the files sizes and validation.
Look forward to more posts.
In most cases, a few errors in Validator don’t matter , but you should check to see how it shows in different explorers.
In Firefox Mozilla even if you have hundreds of errors it will still show good , but in Internet Explorer just a few errors will screw up your entire page ..
nice tutorial
even if i am not a photoshop expert
Great post! Very informative!
Hey Great Article,I am A complete newbie. I found your article extremely helpful.Very interesting So much to learn
Thanks A Lot
[...] Edit 6/6/09 – Photoshop to WordPress: A Basic Guide [...]
[...] Randa Clay shares her excellent post on the basics of going from a Photoshop Design to a WordPress Layout [...]
[...] Photoshop to WordPress: A Basic Guide | Randa Clay Design [...]