Converting a Photoshop Mock-Up to Headway

A lot of people have been wondering how you would go about taking a mock-up of a design and transforming it into a Headway template.

So, let’s take a look at my mock-up! (Click to enlarge)

This might look a bit overwhelming, however, it’s really just a background image from Graphic River and some white text. You’ll see how easy it is to implement in later parts of this tutorial. For now, let’s move on to the first step:

The first step to creating your website in Headway is simple: identify the core elements.

Breaking Up the Design

For this tutorial, I created an extra layer in my photoshop document called “headway sections.” Then I outlined and annotated what each part of the design to see what it would look like to the Headway framework. Let’s take a look (click to enlarge):

Element Breakdown

• Large Background Image – load in that awesome spacey background with a black color behind it.
• Transparent Wrapper – get rid of the wrapper and leaf backgrounds to make everything float.
• Transparent Header Image – use a .png logo to make it float above everything
• Navigation Menu with Hook – make a pretty translucent navigation menu and add my email address to the end.
• Content Leaf - put all of my main page content inside the content leaf. Use a table layout for the services to allow for easy alteration.
• Text Leaf – add a text leaf so it floats below everything.
• Widgetized Footer – put a widgetized footer on the bottom and add four widgets to fill up the space.

Once you’ve figured out how your design is supposed to look, let’s move on to the technical part. The next step is to prepare your Headway installation and map out your layout.

Frameworking Your Website with Headway

Once you’ve gotten your divisions laid out, it’s time to organize things in Headway. First, you’ll need to ensure that Headway is up and running on your server. Here’s what I’m starting with on minusthepie.com:

Basically what I’m going to do is use the visual editor and wordpress to arrange all of the elements that I can arrange without custom coding, then add in my background image and widgetized footer.

First, let’s make a static homepage with the appropriate content…

1. Create a new page called “Home.” This will become your static homepage. Fill this page with the content you want to appear when somebody first visits your page. Make sure you go to the Miscellaneous tab under the write panel and hide the page title.
2. Create a new page called “Blog.” This will call all of your posts onto the page and act as your regular blog. Hide the page title for this page as well.
3. Go to Settings–>General and setup your static homepage.

After all is said and done, mine looks like this:

Not very attractive, huh? That’s okay, because we’re going to add in some visual stuff.

To recap, I just copied the text from my photoshop document into wordpress. Make sure to copy it in HTML mode or the auto-formatting will mess everything up. The layout with the “boxes” is just a simple table with some formatting.

Using the Visual Editor

Now that the content is in place, we can use the visual editor to setup most of the design stylings. Here’s what the site looks like after taking out the backgrounds:

To get rid of backgrounds, enter “none” into the background field and hit save. Make sure you don’t reset the field to 000000. What I did was:

• Remove all of the backgrounds
• Modify the font and font styles

The last thing to do is “enable header re-arranging” to move the home tab to the left of the about tab. Pretty simple, huh? Now it’s time to get into the fun part – translating the images into the design.

Spicing Up the Design

The first thing to do is hide all of your elements in photoshop so that only the background shows. Then, export it as an image and upload it to headway-1xx/custom/images. Then we’ll head into the theme editor.

Go to Wp-Admin/Appearance/Editor and select custom.css like this (click to enlarge):

To add your background image, use the following code:

body.custom {background: url(custom/images/background.png);}

You can repeat this process for all background images, like this:

body.custom div#navigation { padding: 5px; background: url(custom/images/nav.png); 

Once you’ve got your background images sorted out, let’s add some code for the link hover effects. This is a simple website so I just want to make them white on highlight without any underlines. You can use the following code to accomplish this:

body.custom .entry-content a:hover, body.custom li.page_item a:hover {color: #fff; text-decoration: none;}

Adding a Widgetized Footer

I also added a widgetized footer to the website using Paul Cunningham’s tutorial on Headway Tips. Check it out for more information! For legal reasons I’ve chosen not to reproduce the code, but I can show you the CSS styling I’ve used to make the MTPM footer look nice:

/* footer-block */
body.custom div#footer-block {width:100%;}
body.custom div#footer-block div.footer-item {float:left; width:30%; margin:15px;}
body.custom div.footer-item h2 {font-weight:bold;font-size:13px;line-height:25px; margin-bottom:10px;padding-bottom:4px;}
body.custom div.footer-item ul {padding:0px; margin:10px 0 0px;}
body.custom div.footer-item ul li {list-style-type:none; margin: 0 0 2px; padding: 0 0 2px;}
body.custom div.footer-item ul li a {text-decoration:none;}
body.custom div.footer-item ul li a:hover {text-decoration:underline;}
body.custom div#footer {padding-bottom:25px;}
/* end footer */</p>

The Final Result

Here’s what a little CSS and a large background image will earn you at the end:

Any Questions?

What questions do you have for moving from photoshop to Headway? Share your thoughts and opinions below.