PSD to CSS: A Solution to Lighten Your Website!!!

PSD to CSS (Cascading Style Sheet) conversion is important because web page with CSS design is compatible with all the web browsers. Compare to PSD, CSS makes it easier to format the page and same formatting can be used for several pages as well. Not just that, PSD to CSS conversion offers other distinct features as well, as listed below:

• CSS makes life easier for developers as well as designers because it’s possible to publish content to various web browsers, presentation formats, and Internet devices based on preferences using CSS style.
• Website maintenance also becomes easier because it’s quite easy to move elements and place them wherever designer wants.
• PSD file may look different in different browsers but that’s not the case with CSS as it is compatible with all the web browsers.
• Clean coding methods and it’s worthiness as a search engine friendly style makes it popular choice.
• Simpler markup sheet can be created using CSS.

Web designers use Photoshop to create initial design of any webpage. But, PSD files cannot be used in directly in web pages and hence, it required conversion from PSD file to CSS sheet, which uses Hypertext Markup Language. Converting PSD to CSS can be tough if you don’t know where to begin and the step-to-step procedure for it. While doing this conversion, it is not required that you have knowledge about graphic techniques. Here we are going to mainly focus on the style and structure of this conversion.

At first look, all designs look easy to handle with few horizontal and vertical grids but it’s vital that you have closer look at it to find out the problem areas. There is a possibility that some of the designs are not possible to convert in live page from PSD file. In that case, you need to discuss that with you client and make him understand that how actually this PSD to CSS conversion will come out and what he is paying for. In short, define exact parameters with you clients well before you actually begin this conversion.

How To Start :

Now then, disclaimer with client is out of the way and hence, we can begin with conversation. No PSD design can be directly converted in CSS web page. It requires layout separation in manageable grids. Here there are two possibilities with layout design that it can be fixed width or fluid width. Here our focus will be on fixed width layout because that’s most common design and it’s also initial step for this conversation. We will consider that layout has a lot of shadow and gradient effects because that’s what tough to handle. For example, if shadow fades with higher pixel range, it can be done by repeating a vertical slice on X-axis of the layout body. Now, it’s possible to extend the layout on X-axis without a problem. However, there will be some problem with header extension. But to resolve this issue, we have two different options. First is to use PNG transparency in order to fade around the header element. However, this solution doesn’t work properly with Internet Explorer. Another solution is to play with gradient of the shadow. By slicing the elements of background with the gradient shadow, it’s possible to match them. Here, we have assumed that font size is not altered because if that happens, gradient fade and background face would not match.

Creating A Wire Frame :

Now where does this wire frame come from? Actually a wire frame is an imaginary design with design separated in grids. For example, horizontal bars for logo and header and vertical bars for list and main content of the page. Mind well, we are not actually creating this in real. We are just making a sketch in the mind or on a paper. Why it’s required? Actually we are creating this wire frame in order to know problem areas in all sections. By doing this we are separating the larger problem in smaller ones so that it becomes easier to solve them.  For example, there are three columns in the layout- one for the main content and two for the lists. Three these equalizing columns are hard to handle otherwise but if you repeat background image three times because then columns will be created automatically. This will also give idea about the sections in the layout for which PSD to XHTML conversion is not possible. In such case you can contact you client and discuss the matter. Creating a write frame also helps in making the changes in design before it gets really tough.

Coding And Slicing :

At the end of last step, you have identified the problem areas and design changes. Now it’s time for some coding and slicing. You can do it in easy step-by-step process.

• Identify colors, font styles, and font sizes from your PSD file in order to set up CSS defaults.  You can set up defaults pretty easily by changing few parameters in the template itself.
• Next step is to create a wrapper. It’s important because wrapper wraps all contents in the page. If you don’t want to use inner wrapper then there is an option of using width on the body element. However, that creates an issue in older IEs.
• Breaking a job in smaller sections and completing one at a time without actually worrying about the next one makes it easier for designer. For example, here in this PSD to CSS conversion, if you separate navigation, logo, columns (main content and lists), and any other bars and name them accordingly, it will be easier for you to convert. For instance, name logo section as a #logo and working on that alone before you go below it. This will simplify your job of converting PSD to CSS.

Structure :

Now it’s time to set a basic structure using HTML coding under stylesheets of the page. Here, we will not go deep into HTML coding. However, you can do HTML coding using plain text or by using CSS file with conditional comments.

Examples:

PLAIN TEXT:

<html>

<head>

<title>PSD to CSS</title>

<link href=”main.css” rel=”stylesheet” media=”screen, projection” type=”text/css” />

</head>

</html>

Here we have assumed that CSS file is defined already.

CSS file with conditional comments :

body {font-size:x-small;font-size:small}

Start Construction Now :

We have set a structure for a page by setting text, colors, link, font style, and sizes. It’s time for construction of page now. Separate CSS file is always good because you can direct make changes to whole page rather than some sections. However, you can use CSS in the header part at the time of designing so that you can keep checking modifications. Test at every stage is importance when you are coding to keep away typos and other silly errors.

It’s always advisable to work from top to bottom. Design with too much gradients and shadows is hard to handle as told earlier but you can simplify that by setting the background color close to gradient of shadow.  This will help smoothing the transition. Once you have ensured that transition is completed without damaging the overall design, it’s time for main content now. For main content, it’s essential to create wrapper that can contain all the content. For that, you need to measure the size of the page so that you can center it. It can be done by setting TEXT ALIGN as CENTER. However, this is temporary arrangement in order to create wrapper. Once the final design is done, you need to redefine TEXT ALIGN as LEFT. Navigation and header need to be made horizontal by using “inline-boxes” in place of “block boxes”.

These days, repetition of navigation elements is more common because it offers semantic structure and helps in barring the load of anchors. Font style in the header can be issue here. If exact style is required then you have no option but to use sliced images from PSD file. But then it will hurt SEO prospect of that page. However, there is another option of using near perfect font from available ones. If you are going  for later option then compare original and newly created navigation to check whether they look similar or not. If you are going for exact replacement with sliced images then you will have to use image replacement technique. You can do HTML coding for the same now.

After navigation, it time to work on header and main content. Define all the attributes in CSS file itself and then include that in the header main content of the page. This will directly do PSD to XHTML conversion.

[Pictures purchased from Fotolia.com]

About The Author