Line25

How to Convert a Photoshop Mockup to XHTML/CSS

Read the full post

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.

Website layout

In case you missed it, the first part of this tutorial, Create a Clean Modern Website Design in Photoshop went through the stages of producing the visual concept of the Pixel juice website.

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.

Website layout

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.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

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

  1. 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!

    • nick seville says:

      id defo by that book, im trying to learn all this now but its quite complciated it good to have a hard copy you can look over

  2. Hezi says:

    Thanks Chris, very very useful and well written!

  3. Very usefull, thanks !

  4. Luke says:

    Thanks for this, I tend to emply a slightly different technique, coding the main framework and text first and then sticking the images in, but I like this method ;)

  5. The-RockeR says:

    I just read the previous article of making a web design from Photoshop, and I just want to tell you that both articles are amazing!

    Thank you for writting them, are very useful for non designer programers like me :)

  6. Michael says:

    Great stuff, like your writingstyle. Keep it up.

  7. Nikhil says:

    Great follow up Post.
    I have included the previous one in my recent post 8 Great Web Design Tutorials.
    Easy to follow tutorial.

    Thanks,
    Nikhil

  8. Hi, Chris Spooner. What is the name of the code editor that you use on your PC? If possible, is clear!

    Thank you!

  9. Joren Rapini says:

    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!

    • I used to use slices in the olden days of tables, but I find it much quicker to copy out odd snippets, especially with CSS layouts using more background images, rather than clear cut graphics.

      I’m sure there’s a bunch of features in the PS slicing options I’ve not explored, mind!

  10. Daniel says:

    Your tutorials are really great. i have spent a lot of time on both of your pages the last weeks. very nice. thanks a lot

  11. Bas Roding says:

    Nice tutorial for the beginners out here. Love you CSS makeup.

  12. PSD to WP says:

    Nice one Chris! How about you design a subpage, and we’ll take it to WordPress. We can release it as a free theme or stick it on ThemeForest, what do you say?

    Cheers!

  13. hinablue says:

    Awesome~ Could I reprints this article to my blog? :-)

  14. akkis says:

    You are great! Thank you for another tut!!

  15. emerywebster says:

    I love PSD to XHTML tutorials… Always a good opportunity to learn a lot about style and get a fresh development perspective. Plus I dig your conversational approach. Nice work!

  16. Jenny says:

    BEST TUTORIAL EVER! Thanks!

  17. mtgiri says:

    This is an amazing tutorial….
    Really nice..
    Thanks, man.
    Greetings from Argentina.

  18. Nik says:

    Thanks for the good tutorial. Also the overall design is really good :)

  19. Just waw! Good work!

  20. Having a little trouble with the footer. Not sure I understand the last couple of steps, anyone having this problem?

  21. Great article, it´s great to see how designing and programming is so well explained by the same person.

    Congrats!!! It´s true you should write a book.

  22. nugroz says:

    great article..
    i love that..
    thanx…

  23. Brabko says:

    Great tutorial. I would also want to know the name of the code editor you are using.

    • The editor I’m using is the code portion of Dreamweaver, although there are plenty of awesome editors out there including TextMate, Coda and Espresso to name a few.

  24. Om Ipit says:

    cool, i’m wait for this post
    many thank for me

  25. Laptop Inch says:

    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.

    Seems so limiting. Cheers!

  26. Matt Hill says:

    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.

  27. Matt Hill says:

    Tiny comment on the comments ;-) Could do with some slightly expanded leading and better spacing between each paragraph, they’re a little difficult to read. Or indent the first line perhaps?

  28. Adolf says:

    Great!!! That’s awesome and useful. I’m gonna mark up it.

    Aaaand because of this, you won another reader…

    Thanks!

  29. MUSAFAR says:

    haiii….
    this s very useful.
    many many thanks yaarr…

  30. blues says:

    Great article. I needed an article like this a lot.

  31. Great! Bookmarked this for future reference :D

  32. Very well explained.

    I am already educated in that field, but a great post for newbies and others who want to develop there skills.

  33. mydarktime says:

    i love tuts like this! i allways find something new to learn reading this stuff

  34. Neutron says:

    Great tutorial!!! great page, keep the good work :) you are hero of many of us..

    btw, I think I got a bug on the labels, when you focus them and then unfocus, the label wont come back..

    im in firefox 3.0.1 win xp js enable…

  35. Jason says:

    Excellent tutorial! It clearly tells newbies like myself how to convert the photoshop image to a nice web page.

  36. James says:

    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?

  37. Dick says:

    Jesus… that’s some crap code. Don’t quit your dayjob.

  38. StoreCrowd says:

    Great Tutorial Chris, you almost make it look too easy ;) Particularly like the trickery on the login form.

  39. ScoTT says:

    excellent job on the tutorial. seems like you always have something interesting/educational for me to read. haha

  40. dc says:

    Awesome work dude, you know what 100s of people are going to learn how to convert psd to xhtml from this tutorial, and credit goes to you :).

  41. e11world says:

    This tutorial just made me feel better about the way I do things. I guess I can consider myself a pro at the way I work as well. Nice article

  42. Jedd says:

    Awesome tutorial! Have you made the source + graphics available?

  43. muthiulhaq says:

    Hi,
    Thanks, this very useful one

  44. pu says:

    thanks for this! You have teach me some great hints, i’ll try to use this next.

  45. Bilal Ayub says:

    ya pu its really great for learning

  46. Bilal Ayub says:

    its really great article i like it keep it up

  47. Thats right guys. I think i found what i was looking for.nice tute chris… I hope u can keep writing something like this for us that is begining in this owesome industry

  48. Paul M says:

    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.

  49. Chris says:

    Awesome tutorial, great reference material. Thanks.

  50. John says:

    both the design and this the code part are really great but it would be even greater if you could attach all the sources as well.

  51. Semih says:

    Hey. This is great tutorial man. Thanks :)

  52. akkis says:

    Such a nice tut! Thank you chris :)

  53. Very nice Chris, thank you!

  54. Lety says:

    Wonderful tutorial! i’ll try very soon, and i’ll tell you if it works. Thank you very much! :) Lety

  55. Great post with n easy-to-follow how-to guide and process. Though I’m thinking I might have to refresh my portfolio site now!

  56. Sumesh says:

    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.

    • Rio says:

      I agree with Sumesh, we have to know the way of get rid of IE bugs in the beginning prrocess of styling.

      But, I think this tutorial is just to illustrate the basic process of PSD to HTML :)

  57. Scottfoley says:

    Great write up Chris. Must have taken a long time. I’ll be passing this on to my designers who are still learning css. thanks!

  58. Jason says:

    Very Nice tutorial.
    I found on internet very good PSD to HTML Slicing service, you send a design in any of common formats (PSD, PNG, JPG, GIF etc) and you receive a high-quality XHTML-CSS page.
    http://www.seo-semantic-xhtml.com

  59. Bella says:

    I could eat you with a Spoon Spooner ;) ghrrrr

  60. Hey, I love the tutorial Chris, I’m just wondering how you implemented the 960 grid system, as well as what editor you used. Thanks!

  61. Kaplang says:

    really useful tutorial, thanks

  62. Only Me! says:

    Love it! I would just like to point out that the div for the login is missing:

    #footer div.login {
    width: 190px; float: left;
    }

    This should be added to the beginning of the footer otherwise the login area hangs above the rest of the footer content. I was wondering why I couldn’t get mine to look right.

    Great tut though, I’m slowly getting there!

  63. celso Hernandez says:

    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.

  64. Colin says:

    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.

    Keep up the great work!

  65. Leena says:

    Hey that was cool way to show how to do this XHTML conversion

  66. celso hernandez says:

    I must be doing something wrong I just can´t get it to work anyways thanks for kepping me busy lol.

  67. Sam says:

    Great! I am working with it now and it is going smoothly! Your float and clear techniques are brilliant and have solved quite a few of the positioning problems I was having. Many thanks!!

  68. Shahdan says:

    Really great article!!! good job man.. I can say, it’s hard to find article about this..

    Thanks again :-)

  69. manoj says:

    Nice tutorial… thanx man…

  70. Steve Smith says:

    Worth reading for the Ctrl/Cmd-Shift-C shortcut alone! What a time saver! But I will follow the rest too.

    Great quality tut – Many thanks.

  71. Lisa Noble says:

    You are Awesome! This is just what I needed!

  72. Lisa Noble says:

    Question:

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

    Does this take place of slicing? When I do this the image is the same size as the original document. Should it be cropped down to the size of your selection?

    • 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?

  73. cacat says:

    LAMEEEEEEEEEEEEE
    i tryed to change fff to 000 abd as a result i got fff….LOSER

  74. David says:

    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.

    Very nice tutorial.

  75. Jaysen Mel says:

    One of the best tutorial for beginers. Came across this through google, well worth a read.

    thanks

  76. ali says:

    perfect, one of the best tutorials l think

  77. Just what i needed,thank you.

  78. Joe says:

    Hi Chris,

    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).

    Keep up the good work, I am enjoying following your posts.

    Joe

  79. Nice one and got some ideas how to be more advanced with psd to xhtml conversion tactics..

  80. Veezual says:

    That’s a cool one. It’s working, i tried it on my own design, but still, i prefer to code it from scratch.

  81. Adam K. says:

    Amazing! Thanks for sharing these :)

  82. Discovery says:

    Buen tutorial

  83. webpiramit says:

    thankfor all.very nice desing

  84. Very good work. Thank you.

  85. ade fivers says:

    Really good….. Chris……

  86. Jay Patel says:

    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.

    Visit Now- http://provoi.com/

Sorry, comments are now closed