PSD to HTML Slicing Hack

I believe PSD to HTML is an art rather coding. Great designers always should not think of how to implement there designs in HTML/XHTML. They should think of lucrative designs for the business. If you are new to PSD slicing and HTML coding or even an experienced coder, doesn’t matter. I have seen many experienced HTML coders use big images in HTML coding. May be they find it difficult to put a little effort to make small images due to tough dead lines to meet. Specially this happens with background images and water marks. But if you think a little, you can avoid using big images for HTML layouts, which will enhance the performance of HTML coding.

Using CSS Sprites in PSD to HTML

Most  HTML coders today try to use CSS Sprites. What a great facility provided by CSS. What is CSS Sprites ? What will it give? Let me give a brief idea about it. The Sprites is a process of limit http request to the server by combining small images into one image. A good example would be country flags. If you are to display all the country flags as individual images you will send hundreds of http requests per page to the server which will effect on loading time of the page, in return you will lose response time. Solution to country flags would be make an image with all the country flags and by using the background positioning we can solve the issue. The process is called CSS Sprites.  For more details about CSS Sprites follow this article.

How to Plan PSD to HTML Slices

HTML/CSS coding is time consuming and you need a lot of patience.  Let’s assume you are supposed to slice a PSD shown below.

Generally good designers use layers to build PSD files like this. A lazy coder will hide the text layer and the button layer and will slice the entire image with buildings and clouds as one image and will use as a background of a Div. But if you think a bit more you can avoid it. Let me show how you can do it. Text and the button always gonna be there. But for the clouds we can make sprite image combining all 5 clouds into one and the building block can be another one image. Let’s start building the background for the entire image. As you can see we can have 1px background image to cover entire block like below.

Go to the PSD to HTML example.

Now we can include the building block. You need to slice building image and overlay it with on this Div like shown below.

Go to the PSD to HTML example.

Building CSS Sprite

Now comes the CSS Sprite building part. We need to come up a cloud image shown below.

You can slice the cloud images into small images using Photoshop slicing tool. Once you export them you can start merging them like above and set the background color to the main layer. Once all set, export the full image again to use it with web.

Now comes the PSD to HTML most difficult part. Playing around with absolute positioned Div s. I know it is a nail biting for a beginner. Since we now know what are the widths and heights of each cloud we can make use of css background-position property to set each cloud into each absolute div. Let’s set the first Div.

Go to the PSD to HTML example.

position:absolute;height:115px;width:183px;
background-image:url(images/psd-to-html-css-sprite.jpg);
background-position:0 0;margin-top:70px;

Like shown on above css class I will place each cloud by using separate Div’s.  Lets Look at the style class for the second cloud.

position:absolute;height:59px;width:96px;
background-image:url(images/psd-to-html-css-sprite.jpg);
background-position:-188px -30px;margin-top:150px;margin-left:300px;

As you can see in the above style class, what you need to do is that adjust the horizontal and vertical position of the big image to get the required cloud. In this case it was -188px left and -30px from top. This process is something similar to pull the image right to left using CSS. Let me show the remaining css classes.

position:absolute;height:70px;width:130px;
background-image:url(images/psd-to-html-css-sprite.jpg);
background-position:-285px -22px;margin-top:50px;margin-left:450px;

position:absolute;height:90px;width:160px;
background-image:url(images/psd-to-html-css-sprite.jpg);
background-position:-425px -18px;margin-top:20px;margin-left:750px;

position:absolute;height:93px;width:170px;
background-image:url(images/psd-to-html-css-sprite.jpg);
background-position:-595px -18px;margin-top:170px;margin-left:750px;

Now time to check your layout for browser compatibility before moving forward. That way you are in a good position to track from which html tags the browser issues are causing. Fortunately no errors found yet for all major browers including IE6. Now comes the easy part i.e. overlaying the text and the button. You have to be careful with when you overlay your text, some times it might go behind the clouds. To avoid that you can use CSS z-index property.  Look at how i have used it to avoid it.

position:absolute;height:150px;width:400px;margin-left:50px;
z-index:1000;

Now it is fully completed. You can take a look at the completed PSD to HTML example. This would be one perfect scenario how we can use CSS Sprites for high performance web development.

Happy Coding..!