Photoshop Design, WordPress Custom Theme | spelhouseLove

Photoshop Design, WordPress Custom Theme

(The best instructions for creating a custom designed wordpress theme from photoshop here.)

Since web design has become more than a hobby, when I decided to begin blogging, I just couldn’t use someone else’s theme. I had to create my own. I have named the custom theme for this site, spelhouseLove, “nandos,” after the hand drawn design of nandos.com (which was designed by Cross Colours in South Africa). Nandos is a dining establishment, but upon visiting their website, I thought it was the coolest design since… since, GE’s Smart Grid site.

Nandos is special to me because this was my ABSOLUTE FAVORITE food in Australia. I could only take so many sausages and kangaroo off the barbie, so when I found this fast casual spot on Swanston street, I headed there as often as I could. My favorite thing off their menu is the roasted chicken pita, which includes light mayo lined on whole wheat pita bread, stuffed with cucumbers, tomatoes and chicken dashed in their special peri-peri sauce. Okay, enough about the sandwich.

This is how I created my custom wordpress theme. I started with by converting my photoshop design into a custom wordpress theme, I created four slices in the design: the header (slice 1), the main content (slice 2), the sidebar (slice 3) and the footer (slice 4). I then cropped the design into the four separate slices and saved each one accordingly: header.psd, content.psd, sidebar.psd and footer.psd.

The next step is to make more slices of your special content. For example, in the my header I created a navigation bar within the picture frame, and I created slices for each link.

Finally, save the photoshop files in a special format. Disclaimer, I am using Photoshop CS because I have not been able to upgrade to the glorious CS4 (since writing this I have finally upgraded!), so bear with me if the options have changed a bit.

Select File > Save for Web. Click “Save,” and then on the following screen under Settings, select the arrow in the drop down menu and select “Other.” Then select next, and change the Slices settings to ‘Generate CSS’ by ID. Then click ‘OK’ and then click ‘Save.’

Next, we will separate the XHTML file into a CSS file and an HTML file. The best instructions for this are here. The link has all of the detailed instructions about how to do this the proper way. Maybe in the future I will write a post about CSS, because you must be familiar with it in order to do anything custom in wordpress. Happy custom designing!! Oh, and I added delicious.days to my blogroll, not because I am that interested in the recipes, but because I absolutely love how she made her custom design and changes it monthly.

Keep Reading

Subscribe to Comments





Leave a Reply

Hi. I live in North Texas with God, my man, my boys, and a sweet baby girl.
Read more.
Copyright © 2008-2017 • eli arlen joseph, LLC. All rights reserved. • Advertise
Hosted by ICD Soft • Powered by Wordpress