From PSD to HTML the easy way – Using Ultimate CSS Framework

Download

Or

Join us right now!

Our Members get unlimited access to download everything

Category

Info

Share

From PSD to HTML the easy way – Using Ultimate CSS Framework

This tutorial will teach you how to transform your PSD files to HTML with a very easy method using Ultimate CSS Framework.
This framework will help you first to create your designs using the psd file. Using css classes, you will be able to align your design like a pro.

Things you need:

Download Ultimate CSS Framework

Optional – Vector icons

Please note: we have created over 60,000 premium design items which you will be able to download instantly and use in your own or client designs. Become a member of Ultimate Designer Toolkit before you proceed to get instant access to the Ultimate CSS Framework and more than 60,000 other premium design resources.

View layout option:

Before you start this tutorial it is better to look on the layout option.
Here you can see how many things you can create with this framework using some already made classes

View Layout Option
After you have the framework .zip file, extract it to your hard drive.

The first step is to open the PSD file included in the “PSD Template” folder. The name of the file is “framework-css.psd” After you open this file it will look like in the following image: Please click on the image to see better how it looks.

In case your layout will not look the same try to make the folder with the blue blueprints visible. You can do this if you click on the eye who indicate the layer visibility.

One of the most important part is to enable the Guides.( optional you can enable also the Grid )

After you enable the Guides you will see some vertical blue lines. These lines will help you to align any element you like on your future layouts. The guides are created in a very smart way allowing you to create different types of layouts.

I will create a simple text logo and a horizontal menu.

Now comes the funny part. I will create the first shape from this layout. This will be used to create a slideshow. In this tutorial i will not explain you how to use jQuery or any other slideshow. Make sure you subscribe to our RSS to be the first one who will see our future tutorials.
To create the shape you need to use Rectangle Tool and draw a shape from the left guide to the right one.

For this shape i will add a simple layer style. This layer style it is not important right now. Later the thin line will be made using a css class. It is very good to create also this thin border in Photoshop, because your layout will look better when it is ready.

Bellow you can see the small thin line

In the middle of the layout i will place a nice image with some smileys.

From the first Guide until the last one you will have 940 pixels. As you can see from the following image i have there a small gap between the image with smileys and the border.
It is better to create the image with the following size: 930 pixels wide , and any image height you want. In my case the height of the image is 300 pixels.

Under this slideshow image i will place some other shapes with the same border. Use the same layer styles as above.

I will add some icons. If you don’t have any icons we have a great set of icons for you: Download 512 vector icons

Under the icons i will try to create four columns (1 – 1 – 1 – 1). It is very important to align your text or images over the blue blueprints ( 205 pixels ).
Of course the Guides will help you very much to align any element you want.

Bellow you will see how i placed some titles and text.

I will place another area. This time i will use a two column area but as you can see the full width is divided in three parts and i use only 2 columns ( 1 – 2 ).

I will add some text, and under the text i will add also some lines – made with Line Tool.
As you can see the lines are created with exact values. The left line have 280 pixels, and the right one has 610 pixels. If you try to make the line you will see that the lines will be made very easy. Simply drag the line tool from one guide to another,

I will add more text and images. On the left side i will create a unordered list <ul>, and on the right side i will add some images with another nice smileys, and some text.

On the footer i will create a dark shape , and over it i will add on some text.
Please note how i aligned the text. It is very important to add the text near the guides.
Later in this tutorial i will show you how to align the text very easy, using our css classes.

This is the final result. Please click on the image to see how it looks.

Now we will start to create the html part which is very easy if you learn the css classes.

In this tutorial we have 6 main areas:

1 – Header – Logo and the menu
2 – Slideshow
3 – Icons under the slideshow
4 – Four columns area (full width divided in four)
5 – Two columns area (full width divided in three)
6 – Footer

If you don’t have an account with us you can register for a paid membership and you will be able to download the Ultimate CSS Framework
You can sign up here.

Open the “index.html” file from the “HTML-CSS” folder. If you want you can create another html file with another name, and place it in the same folder.

Place in this new file the following lines of codes.

The head element is a container for all the head elements. Elements inside “head” can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: title, base, link, meta, script, and style

After the head container you need to place the body of the layout

Now let’s start to place the header container. First we will place the header of the website with logo and the menu.

Inside the <body> tags add the following lines of codes.

Recently, we have seen a growing interest in HTML 5. If you’re used to see:

On a large majority of sites that you visit, well now with HTML 5 that isn’t required anymore we can add some more semantic value with the <header> element.

So instead of using the normal html element we can use the new one.

I will add a <div class=”center”>

This div will help us to place the logo and the menu in the center of the website. When you use our framework and when you want to center your layout you need to use this div.

Then i will add a logo and the navigation bar. The beauty of this framework is that you don’t need to write the css if you want to create simple websites like this one. In a future tutorial i will show you also how you can convert any design using our framework.

I will move to the footer of the layout now.

Place the following code after the header container

After you save the html file you will have something like that.

Demo 1

Now we will start creating our content.

As i have told you before you need 6 areas

1 – Header – Logo on the menu
2 – Slideshow
3 – Icons under the slideshow
4 – Four columns area (full width divided in four)
5 – Two columns area (full width divided in three)
6 – Footer

You have the header and the footer and you will need to create only the

2 – Slideshow
3 – Icons under the slideshow
4 – Four columns area (columns divided in four)
5 – Two columns area (coumns divided in three)

Are you curios how to place the slideshow?

It is very simple. First let’s add a new div to center all other areas.

So if you want to add the slideshow area your code will look like

To see a live preview please click the following link

Demo 2

As you can see when you use the class=”fullwidth” any elements you will place there will fill all that area. In my case i have used a image right now, so you can learn better the class.

Inside this div i will place a similar div. Here we will add the icons.

Demo 3

The next step is to add the container with the four columns

In this way the layout will be split in four columns.  ( 1 – 1 – 1 – 1 )
Please note that you can use also another versions. For example if you want to split only in 3 areas you can use ( 1 – 2 – 1 )

For ( 1 – 2 – 1 ) you will use:

class=”one_fourth”
class=”two_fourth”
class=”one_fourth last”

Or you can use the following scheme ( 2 – 1 – 1 ). For this scheme you will need to use:

class=”two_fourth”
class=”one_fourth”
class=”one_fourth last”

To see the live result so far, please click on the following link

Demo 4

Under this area i will need to split the layout in 3 parts. I will use the following scheme: ( 1 – 2 )

My layout will look like in the following live preview:

Demo 5

We have so far all the containers we need in place. Now we will add the content. I will start with the 4 column area. I will add there some text. Here you can see the code:

As you can see i have removed the blue images, and i have replaced them with some h2 tags with titles. here you can see the live preview.

Demo 6

I will add also some paragraphs. please click on the following image to see the code.

Here is my result

Demo 7

The next step is to add a read more link under each column.

And here is the result

Demo 8

Now i will add a divider between the two areas

To see the result please click on the following link

Demo 9

I will create now the code for the bottom area. The area with 3 columns ( 1 – 2 ). Click on the image to see the full size image.

Here it is important how i placed the images. If you want to align the images to the left you will need the following class: class=”img-border-left”

And if you want to align the images to the right you will need: class=”img-border-right”

If you don’t want to use the border you will need to use: class=”img-left”

This framework will help you very much if you learn each class.

Here is the live result so far:

Demo 10

Now i will take care of the left bottom area.

Here is what you need to add on your html document

Now your layout will look like this one

Demo 11

We need to create only the slideshow and the icons under the slideshow.

I will add the following code:

Bellow you can see the result

Demo 12

Now i will add some text, and some custom images. A lot of designer use slice tool. I personally don’t use it so much. Here is my work flow when i want to extract the images from a layered PSD layout.

1. I will open a new document with a transparent background ( make sure you have a big
2. From my PSD layout i will drag each image on my empty document.
3. I will go to Image > Trim
4. I make sure i have ( Top , Bottom , Left , Right ) checked, and i press on OK
5. Then  i save the image in the .png format ( File > Save for Web and Devices )

In this way i do for all my images.

After i saved all the images here is my result

Final Result

Using Ultimate CSS framework you will be able to create css/xhtml websites extremely fast if you learn the css classes.
Download PSD File

Download Ultimate CSS Framework

Please don’t forget about our  60,000 premium design itemsBecome a member of Ultimate Designer Toolkit to use the Ultimate CSS Framework and 60,000+ other premium design resources.

[bar_info_box_2 buttontext="Get Instant Access!" buttonurl="http://www.ultimatedesignertoolkit.com/member/signup.php?product_id=16&paysys_id=paypal_r&promo=0" text="Not a member?" /]

More Resources in Tutorials

How does Ultimate Designer Toolkit work?
Next »