From PSD to CSS/HTML in Easy Steps – Part 1


This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we encourage you to download and play with what is provided. The design template is licenced under the creative commons licence.

Lets get on with the tutorial!

One of the hardest parts of converting a PSD design into a well structured and semantic CSS/HTML layout is first knowing where to start. Although that may sound simplistic and obvious, it really does matter how you begin and that you build on strong foundations to start with. In this series of articles I will take you step by step through the conversion process and look at decisions that need to made on the way and how those decisions may need to adapt as things progress. The article will not address any specific graphic techniques (e.g. slicing and optimising) as this varies from paint package to package and is not the subject of the article. You will of course need to know how to do these things and I am assuming that you already have this basic knowledge.

For a starting point we are going to assume that you have just been handed a PSD by your clients graphic designer and asked to turn it into valid and workable CSS/HTML. (Obviously it would be better if you had input on the design before the “fait accomplis” was handed to you but for the purposes of the tutorial we will just accept that this is the case.)

Here is a smaller image of the layout we are going to eventually produce.

PSD Layout

Step 1

At first sight the layout looks quite straightforward but before we begin we should take a closer look at the elements and identify possible problem areas. At this early stage you may need to make important design decisions so you must have a clear idea of how the design can be achieved from the very start. If you identify areas that are impossible to create on a living web page or would cause to many browser issues then its best to locate them now and notify the client before you begin.

It is also worth mentioning at this point that you should have already agreed with your client exactly what work you are doing and exactly what they are paying for. If you don’t define the exact parameters of the job in hand you will find that the client will take advantage of this and ask for every possible addition under the sun and expect support forever all for a pittance.(Some clients are not like this but there are a number who will be very sharp.)

Fixed, Fluid or em based

With the disclaimers out of the way we can get on with the job in hand and look at initial issues and then break the layout down into more manageable chunks. The first question that needs to be asked is whether this is a fixed with layout or a fluid width layout where each column can stretch. Of course you should consult with your client on these matters but for the purposes of this first tutorial we will assume that it’s a fixed pixel width layout. Later on in the series we will explore how to convert the example to a fluid layout or an em based layout. But for the first article we will stick with pixels to make the process slightly easier to begin with.

My initial thoughts on looking at the PSD before even coding a line of html is that the designer has provided a lot of gradient and shadow effects in various places and also added rounded corners to some of the design elements. For example the background of the design has a vertical fade that fades from #282f27 – to #000000 over a 880 pixel range. That is no problem in itself in that we can repeat a vertical slice on the x-axis of the body while at the same time setting the body’s background color to the finishing color of the fade (#000). This will allow the layout to extend vertically forever without problem. The complications will arise in that the header elements have a a slight background fade placed around them that varies with the body’s fade.

We have two options here:

1) Create the fade around the element using PNG transparency for the fade so that the body’s faded background can show through the opaque PNG image. Although this is fine for most browsers there are severe issues with IE6 and under that won’t render the transparent PNG properly. We could use the proprietary alpha-image loader filter to compensate for IE5 and 5.5 if we have no other choice but that also comes with a number of associated problems and should only be used when there is no alternative.

2) Slice the elements background with the gradient shadow in place and match it up to the body’s gradient background. As the header elements are a fixed height then this should work fine. Of course should text be resized and the elements allowed to grow then the fade may become mismatched. However, I thinks that’s a small price to pay to keep the code simpler. Therefore this is the approach we will use for this method and if we find out later that its not good enough then we may have to think again.

Wire Frame

To roughly see what elements you need for the whole page you can create a wire-frame view of your site (either in your mind or just draw it on paper). Here is a quick mock up of the basic structure of our page.

Wire Frame

Although I am not going to build this wire frame for real it does give you a good visual clue as to what needs to be done and also provides some logical order to the proceedings. Some people will actually construct the wire frame version but I find this often gets in the way during development so we will do this my way and work our way through the page one element at a time and from the top down to the bottom.

Each area will present its own little problems but the basic structure can be seen to be a centred layout with three full width static horizontal sections followed by three columns that will need to be floated across the screen. The main part of the site will be the three floated columns and the big issues we will need to overcome are the three apparently equalising columns. This can be accommodated quite easily in our fixed with layout by using a repeating background image that creates the three columns automatically when we repeat it on a parent that is holding the 3 columns.

There will be additional issues to overcome in the main section because there are also vertical gradients and images aligned to the bottom to consider and we may need to adapt our design as we go. But for now it’s good enough to have realised this and considered what the options are. If at this point you believe something to be impossible as not all designs can be transcribed to the web you should contact your client and seek alternative strategies should the design need to be changed, Better to raise issues now rather that have the client say “it must be like this” when you have finished.

After identifying the main issues and ratifying any design changes its time to start on the real work and actually do some coding and slicing.

As mentioned above I like to work on one element at a time in a logical fashion so we tackle each of these issues in turn and the process will look like this.

1) Grab font sizes, font families and basic colors from the PSD and set up up CSS defaults for these including your favourite Reset CSS snippet. Also set up the default font-size structure that will allow for text to be resized in IE6 and under. In fact this is such a common process that you should already have a template set up so that you can start work straight away and allows you just to change the font family and colours and off you go.

2) Measure the layout so that we can create a wrapper for the content as the page needs to be centred so all content can be within the wrapper. However some designers will use a width on the body element instead of using an inner wrapper but this presents problems in older IE browsers and I recommend leaving the body alone. However it is an option if you want to be really minimalist.

I find that I am often giving PSDs of 800px width because the graphic designer has been told that it is for a 800 x 600 page and doesn’t realise that 800px is too wide for an 800px page due to chrome and scrollbar issues. The design would need to be about 760px wide (depending on browser) so as not to trigger a horizontal scrollbar. This is something you will get used to and need to look out for.

3) Start at the top and work down.

Working logically helps you break the job down into sections so that you can work on one thing at a time and plan the work accordingly. You always have to have an eye on what’s coming next but concentrating on one thing at a time will focus your efforts and give you a sense of accomplishment when each element is completed rather that having half finished elements everywhere.

In our PSD we have the navigation at the top followed by the logo and tag line. Then follows a header image with search box. Finally we have three columns and a small footer with copyright message.

I like to use logical names for the sections and although there is some debate about what to use for each element it does help if your naming convention allows for the fact that maybe your html will be arranged at a later date and that your element names still make sense. If for instance your left column is called #leftcol and the at a later date you switch it using CSS to be the right column then it could be very confusing. It’s better to use a more generic but functional name such as #sidebar1 for the left column and #sidebar2 for the right column or even #col1 and #col2. However you could move the sidebar to the middle and then it wouldn’t be a sidebar anymore so think carefully about your names but don’t go overboard with names that are so generic that you don’t know what they refer to.

For our layout we will use the following id’s:

#outer – hold all page content

#header – contains nav and other header elements such as logo and search.

#nav – main top navigation

#tagline – logo and tagline

#search – Search box and background image

#main – This is a wrapper that holds all three columns

#col1 – left column

#maincol – main centre column

#col3 – right column

#footer – Footer

For other internal elements we will use classes. Remember that IDs must be unique and can’t be used more than once per page.

Basic Structure

We now have enough to write our very basic html structure and set up some default stylesheets so that we are ready to roll.

HTML:

[html]

<!–[if IE ]> <![endif]–>

 

[/html]

Main CSS:

[CSS]
/* main CSS Document */
/* general styling first */
/* reset css styles individually instead of universal selector. */
/* based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body{
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
border-left:0;
}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

body {
line-height: 1;
color: black;
background: white;
font-family: Verdana,Arial, Helvetica, sans-serif;
}

ol, ul {list-style: none;}

table {
border-collapse: separate;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

/* end reset styles */
/* clearing technique *
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}
/* mac hide */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/*……….. do not change or amalgamate the above clearfix styles ……*/

p,h1,h2,h3,h4,h5,h6,ul,ol {margin-bottom:.5em}

a img,img{border:none;display:block;}

a{
text-decoration:none;
color:#252e1c;
}

h1,h2,h3,h4,h5,h6{
font-weight:bold;
}

h1{font-size:197%}/* 26px */
h2{font-size:182%}/* 24px */
h3{font-size:167%}/* 22px */
h4{font-size:152%}/* 20px */
h5{font-size:136%}/* 18px */
h6{font-size:122%}/* 16px */
body{
font-size: 13px;
text-align:center; /* for ie5.+*/
}
[/CSS]

IE only CSS served from CSS file via conditional comments:

[CSS]
/* IE CSS Document */
body {font-size:x-small;font-size:small}/*ie5 and 5.5. that are one size out*/
body table{font-size:x-small;font-size:small}
[/CSS]

This will be served as follows:

[HTML]

[/HTML]

I have used Eric Meyers Reset CSS method to give uniform defaults to all elements and then used a font sizing method similar to the one used on Yahoo YUI. I am also going to use the :after method of clearing floats as documented on PIE as this allows floats to be cleared without structural mark-up and works nicely without too many side effects. All this will give a consistent base to work from and provides a good template for any page. Having this all set up to start with means that you can more or less get on with the job of converting the PSD without further ado.

You can copy the base files from here and get ready to roll.
base.htm
main.css
ie.css

Step 2

Assuming you have set up some reasonable defaults for text, link colors and font styles etc we can now get on with the job of construction. I have set the main font family to verdana in the body element because most of the page is in that font and that will save us from specifying it everywhere.

When I’m constructing a site for the first time I always work with the CSS in the head of the document (apart from the default sheets we already set up of course) because this makes it so much quicker to review and edit while working on the same page. Once the page is fully working and tested then the CSS can be added to the main external CSS file. It is also worth getting into the habit of checking your work at each stage in the browsers you want to support especially when you are learning. I more or less know what will or won’t work but checking in 3 or 4 browsers at each stage makes sure that there are no discrepancies and things can be fixed easily at this stage rather than waiting until the whole thing is finished when indeed it may be impossible to fix.

You should also take these testing opportunities to quickly validate your HTML and CSS so that typos can be kept out of the code and ensure that the code you are using is legitimate.

I won’t mention testing again (until the end) but you can assume that at each stage the above tests will take place.

From top to bottom

Working from the top down we will start with the body element itself and apply the gradient background as a repeating slice to the background of the body and repeat it along the x-axis. The background-color of the body will be set to the closing gradient color which happens in this case to be black. This will effect a seamless transition as the page goes from gradient to solid color.

The gradient is 800px high and therefore we have no choice but to slice the whole height of the gradient. Don’t be tempted at this point to make the image 1px by 880px high because that means the browser will have to repeat that image 1024 times for a 1024px wide page and that takes a lot of effort on the browsers behalf. I would use at least a 5px wide slice or even 10px wide slice to save the browser working too hard and for the page to be drawn quickly. If the slice is 10px wide then the browser will only need to repeat the image 102.4 times rather that 1024 times which is a considerable difference.

There is always a trade-off between image file size and the time it takes to repeatedly draw it on the screen so don’t be tempted to use 1px images everywhere or the page will slow to a crawl.

Slice the background of the PSD to create an image that is 5px x 880px and save it as bodybg.jpg.

This will give us the following CSS to add inside the head of our page (inside the appropriate style tags of course):
[CSS]
body{
background:#000 url(images/bodybg.jpg) repeat-x 0 0;
}
[/CSS]

Now we move to the main content and need to create the page wrapper that holds all the content. Measure the page and then centre it. I have added a fix for ie5 already in the defaults that I set up earlier and have applied text-align:center to the body which will make ie5.x centre nested block elements such as our main wrapper #outer. We must however remember to set text-align back to left on #outer otherwise the text will be centred also.

Here is the resulting code from measuring the page and centering it using auto margins.
[CSS]
#outer{
width:975px;
margin:auto;/* center the page*/
text-align:left;/* reset text back to left due to ie5.x fix */
}
[/CSS]

Header and Nav

The header is given a width to avoid “haslayout” issues in IE and ensure that we don’t suffer from the myriad of associated bugs.
[CSS]
#header{
width:975px;
}
[/CSS]
The navigation can be made horizontal by setting the list elements to generate “inline boxes” instead of “block boxes” and allow then to line up horizontally. Using lists for repeated navigation elements is now the accepted way of coding these elements and adds semantic structure to the page rather than a load of bare anchors that can cause accessibility problems with assisted technologies like screen readers. Adding padding to the ul allows the navigation to be spaced out correctly from the right edge and allow room for the overlapping graphic.

What font is is?

We run into out first problem in that the designer has to decided to use a non standard font for the navigation. Therefore you have to make choices (the first of many) on how to proceed.

If the design must have that exact font then there would be no alternative but to use images for the navigation as the font specified is unlikely to be present on 99.9% of systems. Using images for navigation can hurt your SEO (Search Engine Optimisation) prospects ins some cases so its worth avoiding doing this unless absolutely necessary. The main font used in the content of the page is Verdana so that would be the first font to try and see how close it looks. Unfortunately it didn’t look too good but on testing further it seems that Arial is a close match especially when made italic and sized to match.

Here is a screenshot of the original navigation taken from the PSD compared to our layout in Firefox 2 using Arial.

Figure 1

Navigation comparison

The top line is the original and as far as I’m concerned that’s pretty close. We can never match the anti aliasing and partial bolding that Photoshop offers anyway. If your client wants it exact then you will have to replace the text with images instead and use a suitable image replacement technique instead.

We can assume from the PSD that the word in green is the current page and can probably also assume that each word will rollover with the green color also so we will build that into the nav from the start. We simply apply a class of current to our list structure so that we can target that specific anchor and then also effect a change on hover for other elements. You may think that it would be better to add the class to the anchor instead but I find that putting the class on the list allows me to target the list element uniquely if needed and to also target the anchor uniquely therefore possibly saving using an extra class at a later date.

The full styles for the above are as follows.
CSS:
[CSS]
ul#nav{
font-size:92%;
padding:18px 115px 5px 0;
text-align:right;
}

ul#nav li{
display:inline;
padding:0 13px 0 0;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

ul#nav li a{
color:#fff;
}

ul#nav li a:hover,
ul#nav li.current a{color:#8bbd25}
[/CSS]
HTML:
[HTML]

[/HTML]
Note that I have used text-transform:uppercase to make the navigation in uppercase rather than typing in uppercase. There are a number of reasons for this. First ITS RUDE TO SHOUT as we all know but more importantly the effect is really decoration and should be carried out via CSS and not the html and thirdly it makes the HTML look neater.

The navigation is more or less finished but we may need to tweak its positions later on so we will leave it as it is form now and come back later if we need to move it around.

That concludes part 1 of the Tutorial, Part 2 should be ready in a few days and will go more indepth into getting the page looking like the original PSD.

Blogging

{ 109 comments… add one }

109 comments on “From PSD to CSS/HTML in Easy Steps – Part 1

  1. Hawkar on said:

    Thanks for tutorial. It is a great.
    I will waiting for part 2.

    Regards
    Hawkar

  2. Tutorials Room on said:

    Hi , Good Tutorial! It was chosen for the main page of http://www.tutorialsroom.com and under web development tutorials. Please feel free to submit more of your good tutorials using this link: http://www.tutorialsroom.com/tutorials/submit_tutorials.html

    Waiting for part 2 :)

  3. Gian on said:

    Wow very nice tutorial thanks

  4. eNclave on said:

    Hey,

    Great tutorial.
    Will you upload Part2 at www.good-tutorials.com ?
    I can’t wait to be honous =O..

    Great tutorial (Y)

  5. CSSHowTo.com on said:

    Part 2 is just around the corner so dont worry. Yes we may be submitting it to the tutorial sites, if not part 2 then definitely part 3 or 4, so people are aware when its finished.

    Alternatively you can sign upto our RSS feed ;)

  6. eNclave on said:

    Okay great ;)
    Can’t wait, been waiting to learn this CSS style for ages.
    Never understood how to place my designed website into a real goodlooking page.

    And I’ll be checking daily :D

  7. mathias on said:

    Thx, this is just what I was looking for. very nice tuto, waiting for Part 2.

  8. Thanks, well written: covers the basics as well as the tricky parts. Looks a lot better than simple chopping the image and using it as it is.
    Like others i’m waiting for the part two to come :-)

  9. eNclave on said:

    Still haven’t heard anything about part 2 ? :(

  10. CSSHowTo.com on said:

    Thanks for the nice comments guys. Part 2 has been written and I will hopefully be posting it on Monday to the site, its getting all the links and downloads and images working right which take a bit of time. Plus we have been working flat out on this site our wales which has taken some serious CSS work to get completed.
    Dont worry part two is on its way :)

  11. eNclave on said:

    Great :) Can’t wait

  12. the tutorial sucks a lot thnks u for makeit hard an dificult for beginers

  13. CSSHowTo.com on said:

    Thanks for the feedback on the tutorial.
    If you could expand a little on your comments and say what you found difficult or didnt understand then maybe we could help you understand a little.
    Unfortunately to create a tutorial that provides all the background would actually be a book and this tutorial is already quite indepth. We have tried to provide some links to resources to help you get an understanding of some of the aspects. But this is a learning tutorial and we hope that by providing all the code, and pointing out which bits of code affect which parts of the page, you would take it further and play with it and experiment and learn.
    We didnt make it purposely hard for beginners but at the same time we never said it was a begginners tutorial.

  14. LisaI on said:

    Could you recommend other tutorials on CSS/HTML based web site design for beginners. I want to start doing this right. Your explanation is wonderful but I am too new and a lot went over my head, i.e., slicing, measuring a page, etc. Thanks and I hope to quickly come back and do this learning tutorial.

  15. CSSHowTo.com on said:

    Slicing and Measuring are both things you do in Photoshop with the Photoshop file your working on (PSD). When you ‘slice’ you take a layer or combination of layers and export them as images. When you measure, well you just measure how wide that part is using photoshop. A good PSD will have all the right sizes that the designer envisioned. Really it sounds like you need some basic photoshop guides, of which there are loads on the web. But I dont use any to offer any links. Maybe a google search for photoshop basics? Or photoshop for web design might help. As might this site www.sitepoint.com

    good luck

  16. Frederick Townes on said:

    Hey, this is a pretty good tutorial. You should keep going and make a site like psdtuts.com or the like.

  17. selvasekhar on said:

    hi dude

    ths tutorial method is very simply superb

  18. Andy Ford on said:

    Just a head’s up…
    There is a newer version of the Eric Meyer reset that he released back in February.
    link

    I highly recommend using the most current version as it is much more reliable

  19. Marj Wyatt on said:

    It bothered me to read the complaint from June 18th. This is a great tutorial!

    Thank you for taking your personal time to lay things out so clearly and help those of us willing to apply some of our own personal time to learn some basics first.

    I’ve read the second part and I’m looking forward to the next installment!

  20. Umm am I been thick but I can’t find the PSD file to download. I see the jpg file but you reference getting the fonts etc from the psd file which you cannot from the jog so…um where is the psd…

    Ta
    Jim

  21. EXCELLENT TUTORIAL!!! Yeah, helps quite abit if you’ve got some previous CSS grounding, especially with all of the ie hack explanations and the like. If you’re a total beginner yeah this is tough… but you really covered what you covered well!!!

    I’m a hand-coder myself and already visualize everything from a code first angle, but I love hearing how the whole site originates from a graphic and goes to code. Great overall INSIGHT with the kinda CONVERSATIONAL — “thoughts in your head” necessary to walk through the conversion.

    Thanks for sharing.

  22. CSSHowTo.com on said:

    Good point Jim, must have missed that. Part 3 is out soon so I will make sure I upload it with all the files for that part. Thanks for pointing it out. If I get time I will add it here too.

  23. Ryan Battles on said:

    Thanks for the great tutorial. It is nice to go through the process at a high level.

  24. photshop free tutorials on said:

    very useful tutorial

  25. Phil on said:

    great tutorial.

    Maybe I’m blind or something, but I don’t see where I should be downloading the psd file. The only thing I’ve been able to download is the jpeg image of the site. Could you help me out? Thanks.

    Keep up the good work

  26. Phil on said:

    oops. I just saw where that issue was addressed. Nevermind!

  27. Nathan on said:

    Good tutorial, although I take issue with how you handled making changes to what the designer supplied. Sure they used specific fonts for the navigation, and specified 800px – but they did so for a reason. Rather than making your own assumptions on what can and cannot change, why not engage some discussion with the designer? Fire up the IM, or make a phone call, and discuss with them about the trade-offs of some of their approaches, and then confirm what they want to do.

  28. thanks for sharing, very great resource for a beginner

  29. CSSHowTo.com on said:

    acms, Thanks for the nice comments.

    Nathan, your 100% correct. The tutorial is aimed at people learning the css rather than the business side of things, so a few things I may not have covered in depth. But you are correct when we work with our clients we first take a look at the PSD and all think through those issues and then go back to the designer and the client and discuss what’s achievable. What we suggested is just one way, and the way that helps with SEO and useability a little, but we did also suggest that there were other image replacement techniques that could be used to get a better match. At the end of the day there is no perfect answer, we are just showing one way, and your right talking with the designer and end client is always important before and during the work.
    Hire us and find out ;)

  30. Dianne on said:

    The tutorial is great. Can you also please demonstrate how to make the menu bar with dropdowns in CSS only (no javascript) that is compatable with all browsers. I find most menu bars today work this way.

  31. good insightful article

  32. Recorded on said:

    awesome article .. ty

  33. Dianne

    There are a few tutorials for making css drop downs (expanding menu’s)
    Check the tutorial sites (good-tutorials ect)

    I learned it from a book called “stylin’ with css”
    I’m sure other books should have it covered.

    Thanks for spending time making this tutorial. Really is useful and perfect depth.

    Look forward to other parts.

  34. Jason Dean on said:

    Great tutorial (and great template by the way). I liked the fact that you described things in detail rather than letting people “guess” stuff.

  35. very nice and useful tutorial i would like to see more great tutorials from your site

  36. very nice article can i see second part of this article

  37. Thanks you very much.

  38. Avn Rocky on said:

    Gud Tutorial, i learned alot :) keep posting
    avn

  39. This is a great tutorial! Thanks for posting it. I have been using services from psd2html and htmlblender. But I think it is time for me to give it a shot. I just did this entire lesson and I actually feel like I know what doing now! This is a well written how-to!

  40. Nice one, well done, this is very neat summary about PSD to XHTML.

  41. Awesome turoial, will definately recoomend it to friends.
    I like the fact that you applied it to a real commission and also you took everythign step by step and kept it all easy to understand hope the next parts are as good. :)

  42. Thank you for the tutorial. Very well written, and really helped me get the basics down!

  43. Eric Shafer on said:

    Tracked back to from here: http://www.presidiacreative.com/the-most-helpful-psd-to-xhtml-and-css-tutorials/

  44. Sajesh P on said:

    Good article! Thanks!

  45. noohoo on said:

    This is what I’ve been searching for (for forever, it seems). Thanks for a great tutorial. I had resisted using photoshop for a long time for design, now I’ve no excuses.
    Making PSD layouts is easy, it’s turning it into a nicely coded website that I was having difficulty with.
    Thank you again.

  46. nice tutorial…short and straight to the point. the part2 should be out by now can u send its link to my mail? thanks

  47. CSSHowTo.com on said:

    @Gg you can reach part 2 (and 3,4) by using the links under the comments box, and also on the home page, or select step by step tutorials from the side box.

  48. This is awesome. I had a really complex PDS to convert and felt really overwhelmed by it and had no idea where to start. This got me focused gave me baby steps to follow. it’s really so simple when you break it down into tiny pieces! thx!

  49. This is really good tutorial for new css user because of basic concept.

  50. Pedro Diaz on said:

    This excellent tutorial! Simple form transform PSD to XHTML/CSS! Thank you!

  51. PSD to HTML on said:

    nice tutorial, where’s part 2 ?

    • CSSHowTo.com on said:

      There is a link at the bottom of this article to the next one. Or click on the step by step or layout category links in the left to find all 4 sections.

  52. Midas on said:

    Great tutorial!

    Can someone tell me how to grab font sizes, font families and basic colors from the PSD and set up up CSS defaults for these including Reset CSS snippet? Also how to set up the default font-size structure?

    Thanks in advance.

  53. ufc gifs on said:

    aj you can’t type in english, there is no wonder you found this tutorial hard. I am a beginner and I find it perfectly clear.

  54. C.Nagamallika Ram on said:

    html to css

  55. cynthia on said:

    Thanks so much for this! It’s been about 4 years since I’ve had to convert my PSD files to a real working site! (So long, in fact, that I have to learn the basics of XHTML and CSS all over. The good thing about this is that, I know longer have the handicap coding HTML in tables any longer!)

    Thanks so much!

  56. jive on said:

    ummm. Where do we download the .psd from?

  57. jabga on said:

    awesome article, please let us see the next one.

  58. h2spot.net on said:

    very nice article..

  59. manidip on said:

    really good work..
    thanx a lot dude.

  60. Andrew Jhonson on said:

    Thanks for this great tutorial, this is really helpful. We have also collected a resource of 20 best PSD to XHTML/CSS tutorials. You can check the list at http://www.bestpsdtohtml.com/20-best-psd-to-xhtml-css-tutorials/

  61. Vince_M on said:

    Just wondering where one can download the files to work along with the tutorial?

  62. steven B on said:

    Just completed the header area.

    thinking about the logo.jpg and tagline.jpg which are used in image replacement.

    for logo.jpg we have an img tag inside a em tag…
    for the tagline.jpg we have it as a background for an empty em, though I found that putting an img tag in that empty em works as well.

    How does the use of em as a “container” fit in with semantic mark up thinking?

    Great Tut by the way!

  63. Sandeep on said:

    thanks for sharing boss..

  64. Thanks for the tutorials. Just finished reading them all. Nice work.

  65. Hi
    Its really great for me.
    waiting 4 part2

  66. paingsis on said:

    thanks very much.

  67. nice one but where is other pages to this post ?

  68. I too am wondering where I can find the PSD for this tutorial? It’s exactly what I was looking for, but need the final piece.

  69. Toko Komputer Online Surabaya on said:

    An awesome tutorial for a new user like me :P
    Thanks anyway..

  70. Hi there,

    Thanks for the thorough tutorial. For WordPress, I’ve just written a tutorial on marking up a design for the popular blogging platform:

    http://zorinweb.com/2009/12/17/converting-a-design-to-a-wordpress-website/

    Thanks

  71. Jignesh Parmar on said:

    Very Very Nice tutorials for Beginners….
    Thanx a lot for providing such a good tutorials…

    Hope in future U’ll be also providing more attractive tutor

  72. Diseno Web on said:

    thanks or the tutorial, it was very useful for me.

  73. thank u ver much

  74. Aimee on said:

    Am really excited to start working the front end of the design process..ive been a dev for some time, and though I’m pretty well versed at HTML/CSS, however typically am the recipient of the design turned into HTML.

    Where can I get all the supporting files for this tutorial?

    Thanks!

  75. 3TurtleStudios on said:

    Very nice work. This tutorial would be very handy for a lot of new web designers out there. Great job. Keep it going….

    All the best,
    3TurtleStudios

  76. 3TurtleStudios on said:

    very logical and easy to understand. Good work.

    -
    3TurtleStudios

  77. Mehedi on said:

    Very Very Nice tutorials for me….
    Thanx a lot for providing such a good tutorials…

    Hope in future U’ll be also providing more attractive tutor

  78. sanal şirket on said:

    its a very cool tutorial, perfect and thanks for sharing

  79. Revewpsdtohtml on said:

    HI

    Good one. Liked and so added to out blog http://www.reviewpsdtohtml.com/best-tutorials-to-convert-psd-to-html-xhtml-css.html

  80. Linda on said:

    thx for the great post. learned alot

  81. Oyun İnceleme on said:

    Very Very Nice tutorials for Beginners….

  82. Jevon on said:

    I really enjoyed the tutorial. Very good insight and suggestions for things I didn’t think of. However, I did get a little confused with the slicing thing as well. One, because I am using my own template while reading this tutorial, and two, because I went with a bigger size image as well as no gradient.

    If you have any suggestions on how I would go about accomplishing the same result while using no gradient, that would be wonderful (even though I probably don’t need to splice it since there is not gradient).

  83. Thanks a lot. I learned lot of new things specially about wireframes of the website. Now, I have a key to do further study in website designing.

  84. Santhoshshiva on said:

    Hi,

    I can’t understand this tutorial page , i think it is quite complicated for beginners. So this page to simple one and explain the basics needs.

    Thank YOu

  85. Reply SMS hindi on said:

    This is twice now i’ve landed on your blog in the last 3 days searching for completely unrelated things. Spooky or what? If you wantto swap the links with us please let me know.

    Thank you so much

  86. creativeshooter on said:

    Very Good tutorial for basic PSD to HTML, thanks.

  87. rafha studio on said:

    i am very like this tutorial. thanks for share it.

  88. Montreal Web Design on said:

    Thank you . Great tutorial

  89. Psd to CSS. Turn a PSD to HTML with this series of articles…

    First in a 4 part series tutorial on how to take a PSD file and convert it into a fully CSS based html page.

  90. Steve Warrick on said:

    I find that I am often giving PSDs of 800px width because the graphic designer has been told that it is for a 800 x 600 page and doesn’t realise that 800px is too wide for an 800px page due to chrome and scrollbar issues. The design would need to be about 760px wide (depending on browser) so as not to trigger a horizontal scrollbar. This is something you will get used to and need to look out for.

    What on earth are you talking about????

    76% of surfers have a screen resolution larger than 1024×768.. That is LARGER THAN.. So were talking at least 1280 or 1440 widths on average. Sites should be a minimum of 980px but I do them ALL at 1000px which fits perfectly on somebodies screen who has 1024X768 which is hardly anybody whatsoever.

  91. Steve Warrick on said:

    Oh yeah, I thought I should add.. There’s only 1% of surfers with 800X600 resolution.

    http://www.w3schools.com/browsers/browsers_display.asp

  92. Steve Warrick on said:

    Only 1% of surfers have a resolution of 800X600.. Click on my name and you will be taken to the W3Schools browser stats.

    Your site csshowto doesn’t even take up half of my screen, it only takes up 40% of the width of it and it looks awful because of that.

  93. Web Designer on said:

    Very nice article.

    Thanks for provide us such valuable information for same.. its really help to convert my website www.eteafromindia.com to html..

  94. andrew on said:

    where are they psd files?

  95. suman on said:

    Oh yes, it is that which I was searching from long days ago and fortunately today I found it. Thanks for this.

  96. facebook invites on said:

    Hi, great tutorial! Thanks for guide!

  97. Lisa Austin on said:

    This is the most simple tutorial I have come across the web. I was browsing through the net to find a tutorial for CSS/HTML, but they showed use of automated coding using Photoshop. I want to make search engine friendly website, for which I needed plain HTML text and markups that help improve my ranking in search. I finally your’s and it was really helpful. Great job.

  98. Mark taylor on said:

    Thank you for writing comprehensive tutorial. This is good starting point for new web developers and students.

  99. e-ürün on said:

    awesome..thanks for sharing…

  100. İnşaat Firmaları on said:

    thanks for the tutorial…

  101. duck_prince on said:

    Your posts really helpful for me as a newbie
    Many thanks.

  102. Website Development on said:

    Thanks for sharing…

    James

  103. This is a great example of what people have to do when they are converting their PSD’s!

  104. This is a great advice.
    Thanks a lot.

  105. Pintoo on said:

    this is exact what I was looking for!!
    Great tut, well explained.
    Thanks for the share! :)

  106. Web Design Suffolk on said:

    The more that you practice building websites, the better you will get. Each time you build a site you learn new things which you can apply to your next project. Very good tutorial for beginners.

  107. Vidrios on said:

    Great tutorial, thanks for sharing!

  108. david on said:

    Good stuff for serving the knowledge with the appropriate manner & easy to understandable nice work keep it on..
    I hope i will get this type off perfect knowledge from this site.
    Thanks from viaviweb developer team.

    http://www.viaviweb.com/web_design.php

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment