Convert Burnstudio from PSD to HTML [Very Detailed]
In this article you will learn how to convert Personal Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.
Now, let’s get started with this tutorial. Links you will need to complete this tutorial:
Here’s what we’ll be creating (Click on image to view a full working demo).
You can also download this tutorial’s source files here.
Step 1 – Preparation
If you read the Photoshop tutorial for creating this landing page you probably noticed that 960gs grid system was used to create guidelines. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.
You will also need a code editor; you can use a plain text editor such as Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.
During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know, not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.
Step 2 – Getting Your Files Ready
The first thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and the slider JavaScript file. The HTML file goes in the root directory.
Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.
In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.
Step 3 – Simple Starter Layout
We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:
The body has a background image that repeats horizontally and vertically.
The layout has a header section which contains the logo, main menu, search box and latest tweets.
The layout has a two sliders one is the content slider which could be used to display featured items and a portfolio slider which displays portfolio items.
There’s a content section which contains about, what I do and client testimonials sections.
Finally, we have a footer section which will contain footer links, services, latest posts from the blog, social icons and copyright text.
You can follow the notes above by looking at this image.
Now, Based on these notes we create the following HTML layout.
Notice that I added five divisions for the sections we mentioned above each with a unique class name so we can style it later. The “header_container” has a division inside it with class “container_16″ which is already styled in 960.css file (which supports 16 columns) and we added this division inside it because we want the header section to occupy the full width of the browser and “container_16″ is limited to a width of 960px. This is also used in the footer division as well. The content division has an additional class “container_12″ (which supports 12 columns) and in this we want the style of “container_12″ to be applied to the content container.Now let’s add the CSS as follows (all CSS should be added in style.css file):
1
body {
2
color: #5d5d5d;
3
background: #fff url(../images/bg.jpg) repeat;
4
font-family: Arial;
5
font-size: 12px;
6
}
7
8
a, a:link, a:visited {
9
color: #f36622;
10
outline: none 0;
11
}
12
13
h2 {
14
font-family: Segoe UI;
15
font-size: 18px;
16
font-weight: normal;
17
color: #202020;
18
padding: 0 0 12px 0;
19
margin: 0 0 12px 0;
20
border-bottom: 3px solid #000;
21
}
22
23
h2 span.highlight {
24
color: #f36622;
25
}
26
27
h2 span.sub_title {
28
font-size: 13px;
29
color: #5d5d5d;
30
}
31
32
.header_container {
33
width: 100%;
34
height: 168px;
35
background: #000 url(../images/header_bg.jpg) no-repeat top center;
In the above CSS we styled the body with text color, font family and size, and a background image repeating horizontally and vertically with a white background color. Next, I set links color to #f36622 with no outline. Then I styled h2 with font family, font size, font weight to normal, text color, a bottom margin and padding of 12px and a bottom border. Now I added the style for header 2 highlight and subtitle with text color and font size. Next, I styled the “header_container” with full-page width, a fixed height, a centered none repeating background image with black background color and hidden overflow. The “slider_container” style is set with position relative which will be useful when we go later and add the slider script, a fixed height and width, margin set to “0 auto” which will make the division center horizontally in the page, a hidden overflow, a top margin for the space between the slider and the header and a non-repeating background image. Next, I styled the “content” with top margin to make space between the content and the slider, a bottom border and a bottom padding. The “portfolio” style is set with fixed height and width, a margin set to “0 auto” which will make the division center horizontally in the page, a fixed top margin, a hidden overflow and a relative position which will be useful when we go later and add the slider script.
Finally, the footer has a style with full-page width, a fixed height, a top padding, a horizontally repeating background image, hidden overflow and a text shadow which is a CSS3 feature. The “container_16″ inside the footer has a fixed height with hidden overflow, a horizontally repeating background image which will act as a divider between footer headers and content with a vertical background position of 30px. the “copyrights” division style is set to a fixed height and an equal value of line height to align text vertically to center, a transparent background and a text color of #b5b5b5. The result should be the same as the image below.
Step 4 – Adding Content to Header
Now we need to add the logo, menu items, search text box and latest tweets. Here’s the HTML for the header section.
Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
29
Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
30
31
32
I added a division with class “grid_16 top_header” to hold all the links in the top header, then I added a division with class “grid_10 logo” for the logo text contained inside an h1 and a link and a division with class “grid_6 search” to complete the 16 columns and to hold the search text field and submit button. Next, I added a division with class “grid_8 main_menu” to hold the menu items as links with the home link having a class “active”. Finally, I added a division with class “grid_8 tweets” for the latest tweets. Now lets add the CSS for the header content.
The top header division is styled with a fixed height, text alignment to right, a font family and font size, a line height equal to height to center text vertically and a text shadow. Then I styled the top header links both the normal and hover states with text color and no decoration. The logo and search divisions are styled with fixed height. The logo header and link style is set with block display, a fixed height and width, a background image for the logo which is included inside the CSS sprites image and I use background position to show the part I want, a negative text indent of 10000px to make text hidden when viewed in browsers and a top margin of 24px.
Next, I styled the “search_fields” division holding the search text box and submit button with a background image and background position from the CSS sprites image, a fixed height and width, a top margin, a font family and floating to right. The search text field has a left floating with fixed height and width, a line height equal to height to center text vertically, a padding, background set to transparent, no border, a text color and font style set to italic. The search submit button styled with left floating, a fixed height and width, zero padding, transparent background, no border, a negative text indent of 10000px to hide text when viewed in browser, cursor set to pointer and a top margin to position the button correctly. The main menu and tweets division is styled with fixed height.
Now, the main menu links normal state style is set with left floating, a fixed height and an equal line height, text color, a font family and font size, no text decoration, a left and right padding and no top or bottom padding and a top and right margin to make space between menu items. The hover and active state of menu items has a different text color, a box shadow and a gradient background which are both CSS3 features.
Finally, the tweets division is styled to align text to right with a suitable line height, font family and size. The span inside the tweets section style is set with left floating, a block display, a suitable text color, font family and size, and a left margin to position the span correctly. The result should be as the image below.
Step 5 – Adding Slider content, Style and Javascript
Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. I modified the script to make it suit our layout and now here’s the HTML for the slider content.
1
"slides">
2
class="slides_container">
3
4
"images/slide.jpg"alt=""/>
5
6
class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
7
gravida sem at nisi laoreet placerat.
8
9
Aliquam erat volutpat. Vivamus sagittis.
10
11
12
"images/slide.jpg"alt=""/>
13
class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
14
gravida sem at nisi laoreet placerat.
15
16
Aliquam erat volutpat. Vivamus sagittis.
17
18
19
"images/slide.jpg"alt=""/>
20
class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
21
gravida sem at nisi laoreet placerat.
22
23
Aliquam erat volutpat. Vivamus sagittis.
24
25
26
"images/slide.jpg"alt=""/>
27
class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
28
gravida sem at nisi laoreet placerat.
29
30
Aliquam erat volutpat. Vivamus sagittis.
31
32
33
"images/slide.jpg"alt=""/>
34
class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
35
gravida sem at nisi laoreet placerat.
36
37
Aliquam erat volutpat. Vivamus sagittis.
38
39
40
The “slider_container” has two divisions inside it a division with ID “slides” for the script to use and a division with class “slides_container” which will hold all the slides that are represented by a division with the slide content inside it, in this case an image and text contained inside a span element with class “description”. Now let’s add the CSS style for the slider content and script.
1
.slider_container .slides_container {
2
width: 960px;
3
display: none;
4
}
5
6
.slider_container .slides_container div {
7
width: 960px;
8
height: 400px;
9
display: block;
10
overflow: hidden;
11
}
12
13
.slider_container .slides_container div span.description {
The slides container has a fixed width with display set to none. Each slide division style is set with fixed height and width, a block display and hidden overflow. The description inside each slide is set with white text color, a fixed width, a negative top margin for correct positioning, a left margin for spacing, a top padding and overflow content hidden.
Now, the slider pagination style which is auto generated by the JavaScript is set to be positioned absolutely which will be absolute to the containing relatively positioned element, a top and right values to correctly position it with a z-index value of 100 which acts as a layer value making the pagination on top of other default elements that has a default z-index value of auto and works only on positioned elements. The pagination list element is styled to float to left, fixed height and width and text aligned to the center.
The style of normal state of the link inside each list element is set to display like a block, a line height equal to list element height to center text vertically, a custom text color with no text decoration, a fixed font size and a black text shadow. The hover and current state of the link style is set to have a white text color with a background image and background position to show the part we want from the CSS Sprites image.
Finally, the next and previous elements is styled which is also generated by the JavaScript. I hid the previous link with display none, and styled the next link with a background image with a part from the sprites image set by background position, an absolute position, a top and right values to position link correctly, a z-index of 100, a fixed width and height and a negative text indent to hide the text in browsers.
Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this (which will be also used by the portfolio elements slider).
Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body. Here’s the JavaScript.
1
Now our layout should look like this.
Step 6 – Adding Main Content and Style
Now let’s add the content for “About Burnstudio”, “What I do?” and “Client Testimonials”, here’s the HTML.
1
class="container_12 content">
2
class="grid_4 about">
3
About class="highlight">Burnstudios
4
class="sub_title">Donec gravida sem at nisi
5
6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sem at nisi laoreet placerat. Aliquam erat volutpat. Vivamus sagittis, erat eget ornare rhoncus, magna leo lobortis.
Curabitur tristique accumsan urna quis rhoncus. Sed et nisi nec arcu ultricies porttitor. In vehicula ligula a lectus pulvinar aliquet. Mauris vitae leo a sapien malesuada sollicitudin.
Notice that the content section contains three divisions with class “grid_4″ and another unique class name for each division. Each division has an
title with two spans inside one for the highlighted text and one for the sub-title text, a paragraph and a read more link with the exception of the last division which has an image and a link inside the paragraph. Then we have a division with class “clear” and it is used to clear floated elements and make the parent container expand to its content. Now let’s add the CSS style for the content.
I started by styling the “.about”, “.what” and “.testimonials” classes with zero left margin and a 30px right margin with the testimonials set to zero left and right margins. Now, I styled the paragraph inside each “grid_4″ division with justified text alignment, a bottom margin and a line height of 20px. The image inside the paragraph is styled with left floating and a right and bottom margin to make space between image and text. The span inside the paragraph used in the testimonials text is styled to be italic, float and text aligned to right with a custom color. Finally, the read more link is styled with a background image from the CSS sprites image, a fixed height and width, display set to block and a negative text indent of 10000px to hide text in browsers. Now our layout should look like this.
Step 7 – Adding Portfolio Items, Style and Script
Now let’s add the portfolio items. Here’s the HTML.
The portfolio items slider is the similar in construction as the content slider we used earlier with a few things changed, the ID used is “portfolio_slides” which must be a unique identifier so that we can use in the JavaScript. The division that holds each slide contains four divisions with class “item” each with an image some text and links. Now let’s add the CSS style for the portfolio items.
Notice that the header is styled with absolute position so that we can place it any where we want in its container which in this case a zero top and left values, zero border, zero padding and margins. the slides container style is the same as the one in the content slider we implemented above. The division that represents a slide is styled with a fixed height and width and hidden overflow. Now, we style each portfolio item with floating to left, fixed height and width, left and right margins of 15px, a top margin of 36px, a fixed line height and hidden overflow. The image inside each item has a 3px border with a bottom margin. The span has a different color and the links is set to italic. Finally, I added the style for the next and previous links with almost similar styles, different only in right position and background position.
Now we need to make the slider work by adding the JavaScript, we added just after the next script we added above for the content slider. The script block should be like this.
1
Now our layout should look like this.
Step 8 – Adding Footer Content and Style
Now let’s add the content for the footer, here’s the HTML for the footer.
The footer contains four divisions with class names that accumulates to 16 grid each one has an
tag. The first one has an unordered list with links, notice that the first and the last items has a unique class name for later styling. The next one has an unordered list with first and last items having a unique classes. The blog division has paragraphs with the first and last one having a unique classes. The last division has the social links. Finally, the copyrights division has some copyright text with a link inside a “grid_16″ division. Now let’s add the CSS style for the footer content.
background: url(../images/facebook.png) no-repeat left center;
88
}
89
90
.footer .social a[title=Twitter] {
91
background: url(../images/twitter.png) no-repeat left center;
92
}
93
94
.footer .social a[title=Linkedin] {
95
background: url(../images/linkedin.png) no-repeat left center;
96
}
I started by styling the links with no text decoration and text transform set to uppercase. Then I styled header 3 with white text color, font family and size, normal font weight and fixed line height. Notice that I styled the general “.first-child” class with zero top border and the general “.last-child” with zero bottom border, although this can be done with CSS3 but it will not work on Internet Explorer 7 or 8 versions. The paragraph is styled with font family and size, uppercase text, a custom color, a fixed height, a top and bottom border with different colors and zero margins.
The span inside the paragraphs is has a different font family and size, different color, has no text shadow, a floating to the left, a line height equal to paragraphs height to center the text vertically and a right margin. Now the unordered list has zero margins, the list items is styled with no list style, zero margins, custom font family and size, uppercase text, a fixed line height, and a top and bottom border with different colors. The links inside list elements has different color and block display, with a hover different hover state text color. The services list item color is changed to #c3b7a4 with a bottom padding.
Finally, the social links is styled with block display, custom text color, a bottom padding to make space for the background image, a bottom margin for space between links and an equal height and line height values to center text vertically. Now, each social link is styled according to its title text with a convenient background image as an icon.
If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.
Conclusion
So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of JavaScript & CSS3 styles, remove both to validate properly). If there is a part of this tutorial you didn’t understand, or you have a better technique, feel free to share with everyone by commenting below
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.
![Convert Burnstudio from PSD to HTML [Very Detailed]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u7dlxcVUtO8nWzID8w8dcfDt5sCHzlRh47T7UzmsiAjOku2RHfMn9HBSlzD8IeVPkBHJoxnBuZVau4Rg8KUT0Lh7F-Mk56VHdOeE_28CgT9SWIrf4kxvmpkeumz2_KtWTeH6d5wA8ziUQ80fgso53IcoqWFgw=s0-d)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.