From Photoshop to Wordpress – Part I – Design
Part 1 in our series of “From Photoshop to Wordpress” is about DESIGN! Karinne Legault shows us how to create a design in Photoshop that will be used in Part II to create xhtml/css and in Part III to customize a WordPress Blog.
You will never have to pay for a customized design or be limited by what you can download.
By Karinne Legault on December 5th, 2008 in Tutorials | 
Over the coming weeks (months depending on time), we will be releasing a series of tutorials on how to create a website in Wordpress starting from the very beginning: the design phase in Photoshop. This first part will show you how to create a grunge-style blog in Adobe Photoshop. Then a second part will follow that will show you how to slice the site in HTML/CSS. The third and final part will show you how to implement that code in Wordpress.
Let’s begin this series with Part I – Design.
Laying out the grunge
Open up Photoshop and create a new document 1000px X 1300px. This is just to make sure we have ample space for a 920px wide site if we wish. It is very important to remember that Photoshop is just a tool like the Pen & Paper. Width can be changed once we start Part II which is the coding part.
Once that’s open, change the background to #ded6a9
Using the Heavy Scratches brushes from myPhotoshopBrushes.com, create a new layer and take the 2nd brush, change the width of the brush to 1400px and apply it to this new layer. Change the opacity to 7%.
Looking good! But we need more grunge stuff. Grab the Squares and Brackets brushes and let’s add some more. Create 3 new layers and apply 3 brushe. Set the opacity to different levels to get a better effect. This part is really up to you and how you want it to look. Here’s what I did.
In the first layer, I used this brush and set the opacity to 8%
In the second layer, I used this one with opacity 11%
And the last one, this brush was used and the opacity of the layer is set to 21%
The result should be something like this
Creating the header
Next, lets create a navigation bar at the very top that will contain important pages/links such as: Home, About, Archives, Contact and RSS. Use the rectangle tool and create a rectangle 1000 x 55 and place it in the top left corner (0, 0). Apply a gradient overlay with the colors #2c2c2c and #5e5e5e and change the position of the color midpoint to 70%.
Then add the text HOME, ABOUT, ARCHIVES and CONTACT on the left hand side and RSS FEED on the right. To make the RSS link stand out more, I went to pinvoke and downloaded their fugue icons which look really great. Open up the feed.png icon and place it next to the RSS link.
For the title, I went to DaFont.com and downloaded the Times New Yorker font. A great grunge font with style that adds character to our design. The color used is #363636 at 48px.
Now on to a secondary navigation that will contain links to categories. Create a new layer and under the title make a selection 1000×80 and fill it with white (#ffffff). Then change the opacity of that layer to 65%. You should get something like this:
Now on to the fun part. Duplicate the layer you just created so you have a spare copy in case what you do next doesn’t look good so you can just start over. Hide the original and work on this duplicate layer. Grab the eraser tool and use this spatter brush…
… and start “erasing” parts of the box. Try not to go too close to the side edges so that when we cut this up for the XHTML, it will repeat smoothly. Remember that there is no right or wrong here so just have fun with this. Here’s what mine looks like.
Add some dummy text categories using the Verdana font set at 18px with the #363636 color.
On with the content
So now the header section is done. It’s looking great isn’t it? Let’s keep it up! Now we’ll go and get the content section ready. We’ll be creating a 2 column layout so one big column for the actual content and a smaller one as a sidebar.
Let’s start with the content. Create a new layer and make a selection 650px X 900px and fill it with this nice beige – #f4f1e2. Then add a 1px border on the inside with the color #b4b2aa.
Now we can add some dummy content with Lipsum text. All text will have text size of 12px. Titles will be 24px and the Continue Reading link will be 14px with color #b54646. The date is set to 10px with color #777777. To make the new entry in evidence we will put a white background and the content in 14px. The rest will remain the same.
The calendar image I took from the fugue icons from pinvoke. All the icons in the design will come from there so keep them handy.
Now at the bottom of those posts we’ll add some “previous” and “next” text to navigate between archives. Something simple, so let’s put Previous on the left and Next on the right and both with a nice arrow from the fugue set. Let’s use font size of 12px and color #89835a.
A sidebar
Our sidebar will have a series of boxes for the tags, popular posts and latest comments. We will also have ad space at the top. So let’s get cracking.
Creating the ad boxes is fairly simple. We’ll go with 145 x 145 boxes which is usually a pretty standard size. So create a 145×145 square using the rectangle tool (U). Fill it with #cbc189 color and add a 1px border on the inside with the color #a4974d. That will also be the color of the text we will use. Duplicate it 3 times so you have 4 boxes and put them 2 x 2 like so.
We then add some text “Advertising 145×145″ on 2 lines. Font size 12px with color #948532.
Next we add our Search feature. Using the rectangle tool again, create a box that’s 225px X 30px. Make it the same color and border as our big content box so: content color #f4f1e2, border color #b4b2aa. As for the button, since we will be using the browsers default button when creating the page in HTML, just use the rounded rectangle tool with any background color.
Next we’ll add our Tags, Popular Posts and Recent Comments boxes and titles. Since the content in those boxes will be dynamic (meaning long titles, short titles, etc…) we’ll make them all the same size for now just so we can get an idea of what it will look like. Our titles will have a font size of 18px and color #776a23. Our boxes will use the same background and border effect as the search box. Let’s make the boxes all 300px X 120px and we’ll fit content in accordingly.
We’ll go in those boxes now and add some dummy text. As bullets for the Popular posts, we’ll go back to the fugue icons from pinvoke and use the bookmark_document.png. And for the Recent Comments, let’s go with ballon.png. All our links throughtout the future site will be in red (#b54646), so we’ll do that in the sidebar as well.
Finishing off with the footer
For the footer, we will use the same technique as with the secondary navigation above meaning that we will be scrubbing off the background to make it nice and grungy.
Let’s start off by creating a new layer. Using the marquee tool (m), create a rectangle at about 1220px all the way to the bottom right corner of your canvas. Fill it with black and change the opacity of that layer to 15%. You should have something like this:
Now grab your eraser and start erasing the top edge. Remember to make a duplicate just in case and do not go too close to the sides so we can cut it up nicely later. Here’s what I came up with:
All that’s left to do now, is simply add a bottom navigation as well as copyright info.
And that’s it! Next up in this series, we’ll take this same design and turn it into a functional HTML/CSS page. So stay tuned!
Did you like it?
Help us spread the word!
Similar Posts
About The Author
Want more web design and development tips?
Subscribe to The Web Squeeze by Email, or our RSS feed, and you'll have all the latest web design tips coming right to your inbox! Don't be a stranger, join our forum!
Comments
Toggle TrackbacksTrackbacks
- From Photoshop to Wordpress - Part I - Design | bloground.ro - Blogging resources, WordPress themes and plugins for your development
- From PSD to Wordpress - A tutorial series | web non-sense : blog on web design, photography, music and jeeps
- Mistakes you learn from | web non-sense : blog on web design, photography, music and jeeps
- From Photoshop to Wordpress – Part I – Design – The Web Squeeze
- top 10 tutorial sites « Visions Connect Hosting
- 7 Useful PSD to WordPress Tutorials
- Top 10 Photoshop Tutorials to Create Wordpress Themes from Scratch - Shoutpedia
- How To Convert PSD To Wordpress : Top 9 Useful Tutorials | Devils Workshop
- From Photoshop to Wordpress – Part I – Design – The Web Squeeze | WpMash - WordPress News
- From Photoshop to Wordpress – Part II – Coding
- Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog
- uberVU - social comments
December 5th, 2008 at 11:35 am
nice tutorial
thanks mate
December 5th, 2008 at 12:14 pm
Looking forward to following this. Thanks!
December 5th, 2008 at 12:22 pm
Great article K, looking forward to the next one
December 5th, 2008 at 10:07 pm
@Markus – You’re welcome! Thanks for checking it out!
@Josh A. and @Craig – Thank you! Hopefully, I’ll be able to do Part II in a week or 2.
December 6th, 2008 at 2:43 pm
I wish you had done this about 2 months ago, because I learnt myself the hard way.
Look forward to the next read
December 7th, 2008 at 5:18 am
Thanks a lot, this is just what I was looking for, cant wait to read the next 2 parts!
December 9th, 2008 at 10:29 pm
Great blog, I like your style and will check back for updates.
December 10th, 2008 at 4:55 am
I am also following!
As usual there is something I am not sure about. At the point where you say, ‘Now we can add some dummy content’ unless I missed it, there is no explanation on how the right side boxes are done and how the text is wrapped at this point?
Thanks Karinne
December 10th, 2008 at 9:37 am
@Jacob.R – It’s actually in the paragraph before that one. The one that starts with “Next we’ll add our Tags, Popular Posts and Recent Comments boxes and titles.” The last two phrases of that paragraph explain the boxes: “Our boxes will use the same background and border effect as the search box. Let’s make the boxes all 300px X 120px and we’ll fit content in accordingly.” Let me know if you have any more questions.
December 12th, 2008 at 11:41 pm
Great tutorial! I am looking forward to the next couple of parts, especially turning it into a Wordpress template.
December 13th, 2008 at 6:52 pm
@areisdesigns – Thank you!
December 14th, 2008 at 12:16 pm
Great article, hardly waiting the 2nd part.
December 15th, 2008 at 5:36 am
Wow! Thanks for this! I’m anxiously awaiting the part where you explain how to make your design usable with wordpress… I’m able to take someone elses template and modify it, but I would LOVE to know how to do it with my own designs. This will open many doors
December 15th, 2008 at 5:14 pm
Eagerly awaiting the next parts!!!
January 5th, 2009 at 2:38 pm
Thanks Karinne! Great Tutorial
Although its now January and still no part II
no fair!!
Cannot wait for you to publish it.
January 6th, 2009 at 7:49 am
@all – Part II should be coming by the end of this month or early next month.
January 8th, 2009 at 3:28 pm
Thanks… need part 2!
January 20th, 2009 at 7:37 am
I’m waiting for part 2 i need to learn with it.. lol thanks for really nice toturial.
January 21st, 2009 at 11:52 am
Looks great! I am eagerly awaiting part 2…
January 22nd, 2009 at 9:31 am
I’m waiting for part 2. Thanks.
February 14th, 2009 at 5:52 pm
Hey Karinne,
Any plans for part 2?
March 11th, 2009 at 10:56 am
Part 2 any time soon? Great tutorial!
March 12th, 2009 at 4:47 am
10x for your sharing.. but when will you publish Part II ?
again thanx..
March 12th, 2009 at 7:28 am
I’m terribly sorry about the long wait guys! I really just didn’t have the time to write due to personal issues (nothing trivial don’t worry). I’m hoping to start and be done in the next few weeks!
March 27th, 2009 at 9:28 am
Great tutorial!
April 27th, 2009 at 4:50 am
Fabulous tutorial….just what I’ve been looking for!! Can hardly wait for part II…any updates on ETA??
May 2nd, 2009 at 9:38 am
Nice tutorial, but where’s part two and three?
I’m a professional print and web designer, I usually just do front end stuff for web but can also hand code in html and css. I haven’t yet created a blog or even used Wordpress, so I was looking for an online tutorial that explained how to correctly transfer a PSD into a Wordpress theme with the correct coding and then upload it to wordpress on my domain. I already have a website but wanted to create a Wordpress site as well.
Do you know of any other good tutorial?
Cheers,
Marc
May 3rd, 2009 at 12:09 pm
please help me i can’t do it
i want to make a theme for my photoshop blog
http://grafikdersleri.co.cc
May 23rd, 2009 at 2:41 pm
where is the part II ?
May 28th, 2009 at 11:18 pm
Nice tutorial! Hopefully it will help me at work!
Slumberg (aka Turtles Slumberg)
June 8th, 2009 at 12:16 pm
Where is the seccond part of this tutorial?
Thanks for the first one… helped me a lot
June 17th, 2009 at 5:42 am
no part 2?
June 20th, 2009 at 12:38 pm
done in the next few “weeks”??
*years!
July 30th, 2009 at 9:28 am
Excellent tutorial – thanks for putting it up.
One thing I’m not 100% clear on though – should you only make new layers when the tutorial says to? I.E, is every section of text (say Tags, Popular Posts and Recent Comments) on it’s own layer?
Thanks
July 30th, 2009 at 9:33 am
Also looking forward to part 2 of this!
July 30th, 2009 at 9:48 am
@Craig Scott – Yes, everything is in it’s own layer. It’s so much easier to maintain/change that way.
July 30th, 2009 at 11:47 am
Cool – Thanks!
Any idea when part 2 will be up? (As if you’ve not been asked enough already!)
July 30th, 2009 at 1:43 pm
@Craig Scott – HAHA! As I stated here, I really sorry about the wait! We’ve (TWS) got some projects that we are trying to finish off and that’s taking most of my time and I don’t want to give out a date or else I’ll be called again for being late
September 9th, 2009 at 4:33 am
good tute… guess i should have checked to make sure there was a part 2 before i started part 1….got some great brushes and fonts from the links..thank you
October 15th, 2009 at 6:58 pm
Yes. I was wondering when you will be presenting your series on converting PSD into HTML/CSS and publishing to wordpress?
October 15th, 2009 at 10:22 pm
@Trevor: I just need to put the finishing touches on this. Look for it next week!
October 16th, 2009 at 11:55 am
Thanks so much for the tut! I am eagerly waiting for part 2. No formal training, just learning as I go along and it was very easy to follow.
October 18th, 2009 at 2:12 pm
well that seems easy enough, not sure about part 2 though! please bring it soon……
November 3rd, 2009 at 1:57 am
Lookin purdy good there. Just waitin fer the next part. Lets git r done
November 22nd, 2009 at 11:47 pm
Nice write up. I will have to check out the next part. Thanks
December 2nd, 2009 at 3:25 am
Top tutorial, i will tell my friend too.
January 21st, 2010 at 2:02 am
Its a great tutorial.
January 21st, 2010 at 2:04 am
waiting for second series of this tutorial.
January 21st, 2010 at 2:11 am
I have read this tutorial through a couple times now, It is a great read.
1 Question / Comment:
In the on with the content section you have us make the box, then you have us add the lorem ipsum text. You detail the sizes you use for every part of that, but there is absolutely no explanation of where the grey boxes come from what sizes they are, what they are for etc.
I saw that one other user commented on this and you said it was explained in the next section, but I honestly don’t see anything about those boxes, you talk about the ad space boxes in the next section.
So, can you help me out?
Thanks for the otherwise perfect tutorial,
Zach
January 24th, 2010 at 12:29 am
Its a great tutorial.
Thank you so much
February 2nd, 2010 at 10:46 pm
Thanks for an interesting tutorial, Karinne. Interesting application of those brushes.
1000px wide… do you find this to be a good universal size for maximum browser compatibility? I usually try to support 800px displays, and dynamically stretch the theme in the browser for larger display widths.
February 4th, 2010 at 2:05 am
If I had given these excuses for tardiness, I’d be out of a job. Epic FAIL. Given the lapses in posting and a YEAR since you first apologized, you’ve lost all credibility. You had the chance to not only help the greater Wordpress community but to cement increased traffic and readership. If it weren’t for the fact that some people say this little snippet helped them, I’d have taken the post down as an embarrassment.
February 5th, 2010 at 9:14 am
Yeap it is epic fail, I came from google to this page to find out that Miss Lazy didn’t had the time in more than a year to finish this up… LOL UR THE DEFINITION OF EPIC FAIL, quit design lady and go to wash dishes!