How to Convert a Photoshop Mockup to XHTML/CSS

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

Now, we’ll go through the stages of building the homepage in XHTML/CSS, starting with exporting the graphics, then producing the structure with the most natural HTML elements through to styling it up with CSS.
As an overview, here’s a diagram of the various divs used in the website structure.

Starting with the layered PSD document, export a strip of the background graphics. With the coloured area containing a subtle texture, make a wide selection to allow the texture to seamlessly tile together. Save the graphic for web at a high quality.

Draw a tight selection around the logo, press CMD+SHIFT+C to Copy Merged, then Save for Web.

Repeat the process for the large introductory title. With the font of this text continuing the branding and using a drop shadow effect, it can’t be reproduced purely with CSS, so we’ll use the popular image replacement technique.

Draw a selection around the MacBook computer, toggle off the layer that contains the featured website.

Toggle off the layers of the sidebar content, then draw a selection around the graphic covering the top curves and the majority of the body.

Paste the copied sidebar graphic into a new document. Use the crop tool to expand the canvas vertically. Draw a selection across the bottom of the graphic, including the vertical borders and grey background colour. Press CMD+T and stretch this graphic to fill the larger canvas area. This will leave plenty of additional space allowing the HTML content to expand.

Back in the main document, take a selection of the remaining sidebar graphic, including just the bottom curves.

Take a copy of the sidebar button and paste into a new document. Expand the canvas by 200% downwards. Adjust the button’s gradient in the opposite direction to give a depressed impression, then paste in the graphic in the new space.

Export a copy of the input graphics, including a blank version in each image.

The final collection of files includes various elements that will be used as background images in the CSS. A group of featured work has also been created to rotate in a slideshow effect on the MacBook screen.

Create a new HTML document in your chosen application. Start the document with a Strict Doctype (Transitional is for pansies!). Enter the page title and attach a stylesheet. Start fleshing out the document structure with a container div, followed by a header containing the website name in a header one tag, and the navigation as an unordered list.
Any divs that include floated elements will need clearing. Add a class of clear to the div, which we’ll add the CSS coding for at a later stage.

Create a div for the large purple feature header, inside this div create a feature text div including the relevant wording. Use a header two tag for the introductory sentence and paragraphs as the smaller text.
Create a second div to house the list of featured work. Each list item should include a screenshot image, complete with a descriptive ALT tag.

Split the next section of the document into a div with an ID of content. Within this draw out a div named main to include the main content. This content area starts with a large paragraph, set this in a header three tag. Each following passage is best suited to the paragraph tag.
The latest news section is split into another two columns, these will need floating so add a div with a class of latest-news, and don’t forget to add the clearing class. Within this area is two lists of the latest news titles, and a snippet of content. The most natural HTML element would be a UL .

The sidebar is then placed with an ID of side. In this area is a div of featured-project to include the sidebar content. This also acts as a handy element to attach one of the two background images that makes up the sidebar graphic.

The footer area is displayed within a grey stripe on the concept, so add a footer-container at the end of the document to accommodate this in the CSS. Within this element create a footer div to contain the content, then write out each of the three sections of the footer within its own div.
The login div contains the fictional control panel login box. This is built using a form. The concept shows a sleek design without the use of separate labels, but these should be included for accessibility reasons.

Let’s get started fleshing out the HTML structure with some CSS coolness. Add a simple reset to the stylesheet to remove any browser defaults. Also add the coding to the clear class to give a cross browser float clearing solution. This example is a lightweight version of the clearfix technique.
Style the body with the universal font family and the repeating background that creates the main stripes. Style the container div with a 960px width and centre with margin: 0 auto;

Lines 20-22 style the very top header with a height and top padding. Following this is the styling of the header one tag, displaying it as the Pixel juice logo using an image replacement technique. The anchor is first changed from its default settings as an inline element to a block element, which allows a width and height to be specified to match the logo image file dimensions. The element is then floated so that the navigation will sit next to it, and the image background file is attached. Finally the original link text is shifted out of the way with a large negative text indent.
The code then fleshes out the navigation list, starting by removing the default bullet points, floating it to the side and shifting into place with a little margin. Each individual list item is then floated to the left and given a bunch of margin and padding to space them out. Finally the links are styled with the specific font size and colour for the normal and hover states.

Moving on to the purple feature header, the div is given a background image of the MacBook graphic and positioned to the right. The feature text is then set using CSS image replacement for the header, and normal font styling for the paragraphs. The ‘Work with us’ link is then given styling of a background color, that changes on hover.
The featured work list currently displays five items, but we only want them to display one at a time on the MacBook screen. First the UL is moved into place with relative positioning, then the width of height of the screenshots is added. Overflow hidden then simply hides the remaining four images until they are brought to life with Javascript later.

The general text styling is then added under the content div, giving paragraphs and links their desired colours and sizing. The main content div is then floated to the left and given the width from the Photoshop grid design.
The latest news lists are also floated to the left to allow them to display side by side. They are each given a width of half the parent container, minus the amount of padding on the right to accommodate the box model.

The sidebar is then styled to float next to the main content, and is given the background image we exported earlier. The child featured-project div then comes in handy to attach the lower segment of this graphic.
The content of the sidebar is then styled with the relevant colours and sizes. The ‘See more work’ link is then replaced with the button graphic using the image replacement technique. To give visual feedback the background image is set to bottom on hover, to display the adjusted version of the sprite image that contains the depressed effect.

The grey footer strip can easily be created by adding a background colour to the footer container. Because this element is outside of the container div it automatically spans the full width of the page. Although, because the content is no longer within the container, the footer needs styling with the same width and margin auto to centre it up. The shadow graphic then fits nicely as the background image of this div.

The footer areas are then fleshed out with a bunch of styles to adjust the font styling and colours.

With the concept using a login form that displays the labels as part of the inputs it calls for a little CSS trickery, along with a bit of help from captain jQuery. This little bit of coding styles up the form labels for users who don’t have Javascript enabled, then hides them with a little jQuery command. When the user focuses on an input, an additional class is added which reverts the background image to the blank version. Unlike a good old CSS technique using the :focus selector, this styling remains when the user deselects the element, avoiding any values in the input being made illegible against the input background text.
If the user doesn’t have Javascript enabled, the form displays along with good old fashioned labels so there’s no confusion to what each of the inputs is for. Win! (I’m sure there are other, simpler techniques out there, but that’s my little solution to this mini accessibility issue!)

The concept is then complete in terms of HTML and CSS coding, but we’ve still got the slideshow functionality to add to the MacBook in the feature header. Add the jQuery framework, the Cycle plugin and a blank Javascript file to the head of the document.

To activate the slideshow, target the featured work UL in the jQuery command, and add the fade effect with a pause of 2 seconds. This will toggle through each of the five images with a smooth fading transition, displaying each one in turn on the MacBook screen.

So that’s it, the concept is nicely coded up. Validation of the HTML goes a treat, and testing in various browsers shows no layout bugs, even IE6 isn’t bad.

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

97 Comments

Wow, excellent tutorial! You should think about writing a book! Same kind of thing as designing a layout, and then coding it up, but more detailed (as in, over a few hundred pages!). I think it’d be a great seller!

Thanks for the tutorial, it’s always interesting to see how another designer works – no one does things the same. I definitely prefer using slices in photoshop, since it saves all the optimization parameters you set for each slice as well as their names and everything to the PSD, so it’s really quick and easy if you have to go back and make changes to the original PSD later. We all know how clients love to make changes at in-opportune times!

Absolutely fabulous post! For years I’ve struggled with this as I’m not really a photoshop guy. I think I need to get me a copy now and run through this tut to see if I can perhaps help some of the graphics guys get to a point where they can understand a developer and the developers understand the graphics guys.

Every time I ask a graphic guy if they can provide html and css files of their completed work and they say they don’t know html and css, I cringe.

Excellent tutorial Chris. Really nicely written and presented, I think it’s going to be a popular one for people unfamiliar with the process.

I liked the way you solved the issues of labels vs. no labels for the form fields so that it remains accessible with and without jquery, though personally I’d always keep a label as a separate element on screen; I find it’s a better accessibility consideration all round and keeps the form usable for everyone without having to do extra work.

One think I disagree with “Start the document with a Strict Doctype (Transitional is for pansies!).” That’s not necessarily good advice. The DTD should be relevant to the project, and you need to take into consideration what other tech you’re working with. If you’re plugging this template into a CMS with a WYSIWYG editor that generates transitional HTML attributes for example, using a strict doctype will mean all your pages won’t validate. I think it’s important not to get hung up on the idea that strict Doctypes are “best”; it’s not a question of best, but what’s appropriate.

Last point: Why images for code samples? I think text code blocks would be better, so people can copy and paste. :-)

Thorough comment, Matt!
RE: Form labels, it’s one of those where it depends whether it’s a prominent feature that requires extra care, or something that can be experimented with a little on the design side.
RE: Strict doctype, for sure. Use a transitional if you’re working on some ultra complex app that spits out random code, but for a static homepage like this example Strict is good practice.
RE: Code samples, other than it being a little easier to create the post, I find its sometimes more digestable seeing blocks of code in a nice colour co-ordinated image as opposed to a huge code block, especially if scrollbars start to come into play. Also, the code in this example isn’t really meant for straight copying and pasting, more so to pick up some tips from how others go about coding up a layout.

Hey
nice tutorial. Though i think would just make the code blocks selectable. This slice method is great for repeating graphics but what if the template is using more complicated non repeating imagery?

Chris,
Thankyou for the time and trouble taken to present a neat and tidy PSD layup conversion.
It has helped me to understand how my web designer is going to convert our new business site from the mockups he presented to win the contract.

As for those offering unnecessary advice(Matt) about how and why and if you do this, it is obvious they are missing the point of this tutorial.
Keep up the great work it is greatly appreciated.

That’s a detailed tutorial, I’ll point to this if anyone asks for a PS->HTML tutorial.

I do have a request for follow up to this: how to find and fix bugs in various browsers like IE and Opera.

I’m pretty confident about my PS to xHTML skills, just that I see everyone writing only PS-xHTML tutorials, not the IE bugfixing ones. I realize this design had few bugs, I hope you will write a post regarding common IE bugs, how to get around them in the coding stage itself (instead of discovering them in the bugfixing stage) etc.

Hey man, thanks for the tutorial its great, i´m doing it right now but somehow my css doesn´t reflect the styles on the html but I guess it´ll take me some time to figure it out anyway thanks for the tut.

Hey Spooner – this is a fantastic tutorial (as well as the previous design one). I’ve been trying to work out a decent workflow for this kind of operation for a while, and this has given me some extra idea’s. It’s been really helpful to see your process from wireframe to finished CSS.

As per my understanding of this step, it must be ‘press CMD+SHIFT+C to copy merged, CMD+N to create a new image(it would create the same size of the copied area), CMD+v to past the merged content, THEN do the ‘save for web’ thing. Is that correct Chris?

I’m going to give this one a try. The Mac slider is what I’m most interested on. I need a way to display previous work and I’d like to see if I can incorporate just that slider/code into my existing design.

You should have a look at the slice tool; it will let you divide the PSD up into chunks that you can export multiple times all at once, as you tweak. This saves all the copy merged, save for web steps which you would have to do each time on here. It lives under the crop tool in the Photoshop controls (in CS4, anyway).

Also, if you want pages to load really fast, I recommend making your repeating sections 1px wide/high; you can’t preview it after the export properly but it looks fine in the browser and will load quicker on slow connections (especially if there are many of them on the different bits of the page).

Provoi Web Solution has an impressive array of website development
projects within our portfolio, which highlights our confidence and
competence with complex and unique online business ideas.
The standard of our website development is second-to-none, and we employ the
most rigorous and reliable testing practices possible. All of our
website development work is performed in-house and we outsource nothing,
and never will. British made, reliable and dependable website
development is the key to the success of your project.

Sorry, comments are now closed

Subscribe for email updates

Don't miss a post! Sign up for email notifications of new content on Line25. Every subscriber gets a free handy pack of web shadows.

About Line25

Line25 was built in March 2009 by Chris Spooner as a place to share his web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.