Convert a 3D Portfolio Dark Layout From PSD to HTML [Very Detailed]

Door globecom op zo, 2014-12-28 14:28

In this article you will learn how to convert a 3D Portfolio Dark Layout 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 into 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 source files from here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system was used for guidelines creation. Well, in this tutorial we will also need the 960gs grid system as a CSS framework. Using CSS frameworks makes layout and styles 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 good code editor of your choice; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

Now in the process of creating 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 results shown in this tutorial will be from Firefox version 3.6 which supports all CSS3 styles used in this tutorial.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory structure to build our layout in. I usually create an /images/ directory to put every image in it and a /styles/ directory which will hold every style sheet (CSS) 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 it 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 file’s with this tutorial and you’ll find the images I created.

Step 3 – Simple Earlier Layout

We need to start by creating a Simple HTML layout to hold all the pieces together. By looking on the Photoshop Layout you should notice a few things:

You’ll notice that the layout has four main sections: header, slider, content and footer.
You’ll also notice that all the header, slider and footer sections has a background that repeats itself in a horizontal direction.
The content background repeats itself in both horizontal and vertical direction.
You should also notice that both the slider and content backgrounds has a highlight overlaid.
Finally, you’ll see that the header, slider and footer sections have fixed heights.

Based on these points we create the following HTML layout.

Dark Web Layout

header content goes here.

slider content goes here.

main content goes here.

footer content goes here.

As you can see in this layout we added a links for the CSS files in the header, created four main

sections each with a unique class name for styling and added a
section inside each main section with class “container_12″ with the exception of the content and the slider we added a class attribute with “container_12″ and a unique highlight class. Each of the four main
sections holds the content and which will be 100% in width to cover the whole browser area with a background image. The
section with the class name “container_12″ is already styled in 960.css file to center the content and gives it a fixed width of 960px. Now let’s add the CSS as follows (all CSS should be added in style.css file):
body {
color: #fff;
background: #000;
font-size: 12px;
}

a {
color: #fff;
}

.header_cotainer {
width: 100%;
height: 70px;
display: block;
background: url(../images/menu_bg.jpg) repeat-x;
overflow: hidden;
}

.slider_container {
width: 100%;
height: 380px;
display: block;
background: url(../images/slider_bg.jpg) repeat-x;
overflow: hidden;
}

.slider_highlight {
background: url(../images/slider_highlight.jpg) no-repeat;
height: 380px;
display: block;
background-position: center top;
}

.content_container {
width: 100%;
min-height: 524px;
display: block;
background: url(../images/content_bg.jpg) repeat;
}

.content_highlight {
background: url(../images/content_highlight.jpg) no-repeat;
min-height: 524px;
display: block;
background-position: center top;
}

.footer_container {
width: 100%;
height: 46px;
display: block;
background: url(../images/footer_bg.jpg) repeat-x;
overflow: hidden;
color: #bebebe;
}

We are setting the body color to white “#fff” the background color to black “#000” because we a have a dark layout and the font size to 12px. We also change the default link color to white (because the default link color is blue). Then we proceed to style the “header_container” section by setting width to scale to 100% of browser area, a fixed height of 70px, a display value of display so the section will generate a block box, then we set the background to have an image menu_bg.jpg and to repeat this image horizontally and finally we set the overflow to hidden so that any overflow is clipped and the rest of the content will be visible. We style the “slider_container“, content_container and “footer_container” in the same way as we did with the “header_container” but using different background images and different height values to match background images, with the exception of the “content_container” which its minimum height value is set to 524px with the background is repeated horizontally and vertically and the overflow value is removed and the default value of visible will be applied. Now we style every section labeled highlight with a highlight image as a background with no repeat. The result should be as the image below.

Step 4 – Adding Logo, Menu and Search to Header

Now let’s add the logo, menu items and the search text input and search button. The HTML for the “header_container” should be like this.

1stwebdesigner

Home
Blog
About
Contact

You’ll notice that I added two more div elements inside the “container_12” div one has a class value “grid_3” and the other “grid_9“, both class values are already styled in the 960.css file. In the 960gs framework the “container_12” class divide’s the layout in 12 equal sections and if for instance we want to fill 2 sections we use class value “grid_2” this leaves us with only 10 sections to use, so the logo will occupy 3 sections, the menu and the search will occupy the rest which is 9 sections. Now you’ll also notice that I used a title attribute in each menu item’s link which I recommend you do this whenever possible this has SEO benefits.
Now let’s style the HTML layout of the header with a some CSS.

h1.logo {
background: url(../images/logo.jpg) no-repeat;
display: block;
width: 300px;
height: 70px;
text-indent: -9999px;
}

.menu_items {
float: right;
}

.menu_items a {
display: block;
text-indent: -9999px;
width: 96px;
height: 36px;
margin: 17px 12px 0 0;
float: left;
}

a.home_link {
background: url(../images/home.jpg) no-repeat;
}

a.home_link:hover {
background: url(../images/home_h.jpg) no-repeat;
}

a.blog_link {
background: url(../images/blog.jpg) no-repeat;
}

a.blog_link:hover {
background: url(../images/blog_h.jpg) no-repeat;
}

a.about_link {
background: url(../images/about.jpg) no-repeat;
}

a.about_link:hover {
background: url(../images/about_h.jpg) no-repeat;
}

a.contact_link {
background: url(../images/contact.jpg) no-repeat;
}

a.contact_link:hover {
background: url(../images/contact_h.jpg) no-repeat;
}

.search {
display: block;
float: left;
width: 200px;
height: 36px;
margin: 17px 0 0 0;
background: url(../images/search.jpg) no-repeat;
}

.search input[type=text] {
background: none;
color: #fff;
border: 0px none;
width: 150px;
height: 25px;
margin: 5px 0 0 10px;
}

.search input[type=submit] {
background: none;
border: 0px none;
text-indent: -9999px;
width: 36px;
height: 30px;
padding: 0;
cursor: pointer;
}

Now let’s look on the logo styles. You’ll notice that we added a style for “h1.logo” this style will apply on any

element with a class attribute of “logo“, you’ll also notice that we added a background image which is “logo.jpg” which includes the logo with the highlight behind it, and we also set display to block, width and height. Now you’ll also notice that I used “text-indent: -9999px;” this value makes the text in the

element disappear only when viewed in browsers, this also has SEO benefits.

Now let’s look on menu styles. In “menu_items” class we set the whole
to float to the right, then in “menu_items a” we set width and height, display, margin from top and right and float each menu item to the left. Now for each menu item we have two images one for normal state and one for hover state, we add a style for each menu item depending on its class attribute for normal state (e.g “a.home_link“) and for hover state (e.g “a.home_link:hover“).
Next we style search elements, we set the search image as background for “search” class and we also set display, float, width, height and margins. Now we style search text input using “search input[type=text]” and search button using “search input[type=submit]” and we want to style these both elements so that they have no background or border, then we set the text input text color to white. The result should be as the image below.

Step 5 – Adding Recent Posts & Flickr Thumbnails Content

You probably are wondering why we skipped the slider content. I left the slider content for last so that we create it and then implement Javascript to it all together. Now here’s the HTML for Recent Posts & Flickr Thumbnails.

Recent Posts

Google Nexus One

Iphone 3G

Blackberry bold

Samsung 3G

Nokia

Soney Ericson Aino

Flickr

In this layout there are simply a few things that we created and the rest is just a copy and paste process. First we added

element for Recent Posts header then added unordered list with a link inside each list item. Then we added
element with a class attribute “divider” which will act as the horizontal line divider in between Recent Posts and Flickr sections. Now add

element for Flickr header then
element with a class attribute of “thumbnail” which includes an image inside a link. Our layout should look like this.

Step 6 – Styling Recent Posts & Flickr Thumbnails Content

Now we add CSS to style Recent Posts & Flickr Thumbnails. Here’s the CSS.

.content_highlight .grid_4 {
background: url(../images/divider_ver.jpg) repeat-y;
background-position: right top;
padding: 20px 0 0 0;
min-height: 524px;
}

.content_highlight h2 {
font-family: Arial;
font-size: 18px;
font-weight: bold;
}

.content_highlight ul {
display: block;
padding: 0 2px 0 0;
}

.content_highlight ul li {
background: url(../images/recent_posts_bg.png) repeat;
padding: 5px 0 0 60px;
margin: 0 0 1px 0;
height: 25px;
list-style: none;
}

.content_highlight ul li a {
text-decoration: none;
display: block;
}

.content_highlight .divider {
display: block;
height: 3px;
background: url(../images/divider_hor.jpg) repeat-x;
margin: 0 2px 25px 0;
}

.content_highlight .grid_4 .thumbnail {
background: #000;
width: 72px;
height: 72px;
float: left;
display: block;
margin: 0 20px 12px 0;
-webkit-box-shadow: 1px 1px 0px #1f1f1f;
-moz-box-shadow: 1px 1px 0px #1f1f1f;
box-shadow: 1px 1px 0px #1f1f1f;
-moz-border-radius: 4px;
border-radius: 4px;
}

.content_highlight .grid_4 .thumbnail:hover {
background: #333;
-webkit-box-shadow: 2px 2px 1px #000;
-moz-box-shadow: 2px 2px 1px #000;
box-shadow: 2px 2px 1px #000;
}

.content_highlight .grid_4 .thumbnail img {
width: 63px;
height: 63px;
border: 1px solid #272626;
margin: 4px 0 0 4px;
}

.content_highlight .grid_4 .thumbnail img:hover {
border-color: #111;
}

We first start by styling “grid_4” which is the
element containing both Recent Post & Flickr Thumbnails with a background image repeated vertically which is the vertical divider in the Photoshop Layout, we set its position to top right finally we set top padding min-height. Next we style

element by setting font’s family, size and weight. We move now to Recent Posts links list by first styling
element style, then
element style with a repeated transparent PNG background, a top and left padding, a bottom margin of 1px to act as a separator between list items, a height and a list style set to none to remove bullet from list items. Now we set the “block” of the link element inside list elements to “block” to fill the whole item. Now we move to styling the horizontal divider between Recent Posts & Flickr Thumbnails to have a background image repeated horizontally with a bottom and right margin to keep it from getting over the vertical divider.
Now let’s style the thumbnails, first we style the
element holding the thumbnail image with a black background color an equal width and height of 72px, a float left, right and bottom margins and rounded border radius value of 4px which is a CSS3 feature and another CSS3 feature which is an outset box shadow with a shadow color of #1f1f1f, horizontal and vertical length of 1px and blur radius of 0px. Then we style the thumbnail image with a fixed width and height a border and a margin.
Finally, we add some hover effects for the thumbnails by setting the hover state style for the
element holding the thumbnail image to have a lighter background color and an outset box shadow with a black shadow color, 2px horizontal and vertical length and a blur radius of 1px, then we set the image hover state style with a darker border color. Now our layout should look like this.

Step 7 – Adding Posts Content

By taking a look at our Photoshop layout we should notice that we need to add one post with a divider and then duplicate it as many as we want. Here’s the HTML for a single post content with a divider.

Google Nexus One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum nisl fringilla augue convallis egestas. Vestibulum tempor nisi ut felis luctus sed tincidu orci rutrum. Vivamus dapibus fringilla auctor. Quisque eget elit sed purus impe placerat. Vivamus sed neque purus, id dignissim odio.

12 comments

Read more

Now you’ll notice that there’s a main
with a class attribute “grid_8” which contains another
with a class attribute “post“, then there’s a thumbnail same as we did in Flickr thumbnails, a

element to hold post title, a
paragraph element to hold post summery, a
element which holds comments count, share icons and read more link. Then we used
element with class attribute “clear” and it is used to stretch up the floats’ container to accommodate the floats. Then add a divider element same as we did previously.
Finally, we add a clear
(you can try it without a clear element to see the difference). Now our layout should look like this.

Step 8 – Styling Posts Content

You should notice that we already styled the horizontal divider in the previous, all we need to do now is to modify its CSS to match it new position. Here’s the CSS for styling Posts Content.

.content_highlight .grid_8 {
padding: 20px 0 0 0;
}

.content_highlight .grid_8 .divider {
margin: 15px 0 15px 150px;
}

.content_highlight h3 {
font-family: Arial;
font-size: 14px;
font-weight: bold;
margin: 0 0 5px 0;
}

.content_highlight h3 a {
text-decoration: none;
}

.content_highlight .post {
display: block;
clear: both;
}

.content_highlight .post .thumbnail {
background: #000;
width: 130px;
height: 130px;
float: left;
display: block;
margin: 0 23px 12px 0;
-webkit-box-shadow: 1px 1px 0px #3b3b3b;
-moz-box-shadow: 1px 1px 0px #3b3b3b;
box-shadow: 1px 1px 0px #3b3b3b;
-moz-border-radius: 4px;
border-radius: 4px;
}

.content_highlight .post .thumbnail:hover {
background: #333;
-webkit-box-shadow: 2px 2px 1px #000;
-moz-box-shadow: 2px 2px 1px #000;
box-shadow: 2px 2px 1px #000;
}

.content_highlight .post .thumbnail img {
width: 112px;
height: 112px;
border: 1px solid #272626;
margin: 8px 0 0 8px;
}

.content_highlight .post .thumbnail img:hover {
border-color: #111;
}

.content_highlight .post p {
color: #bebebe;
margin: 0 0 10px 0;
}

.content_highlight .post .post_footer .comments {
float: left;
color: #bebebe;
font-size: 11px;
margin: 0 25px 0 0;
}

.content_highlight .post .post_footer .share {
float: left;
margin: 0 20px 0 0;
}

.content_highlight .post .post_footer .share a {
float: left;
margin: 0 7px 0 0;
}

.content_highlight .post .post_footer .more a {
float: right;
color: #bebebe;
font-size: 11px;
font-style: italic;
margin: 0 25px 0 0;
}

We start by styling “grid_8” inside “content_highlight” with a top padding. Now we modify the already styled divider with a top, bottom and left margins. Now we style

element by setting font’s family, size and weight with a bottom margin and set the link inside it to be with no underline “text-decoration: none”. Now we set post
style to be displayed as block. The thumbnails are exactly the same as the previous one’s we styled with some values changed to suit the new content. We then change the color of the paragraph element and give it bottom margin.
Finally, we style all the elements inside post footer; we set the comments to float to left with a darker color and a font size of 11px and a right margin. Then we style the share icons with float and margins and last we style read more link to float to right and change its color, font size, a right margin and a font style set to “italic“. Now our layout should look like this.

Step 9 – Adding and Styling Footer Content

Now we will add HTML for footer content and CSS style, as you notice that the footer is very simple and straight forward. It has a copyright text on the left and 3 social icons on the right. Here’s the HTML for footer content.

© 1stwebdesigner 2010

Notice that we used “grid_4” for the copyright text and “grid_8” class for the social icons, now we need to style the footer so that the copyright text aligns to left and the icons to the right of the layout. Here’s the CSS for footer content.

.footer_container .container_12 {
margin-top: 14px;
}

.footer_container .grid_4 {
text-align: left;
}

.footer_container .grid_8 {
text-align: right;
}

.footer_container a {
margin: 0 6px 0 0;
}

.footer_container a.last {
margin: 0;
}

We start by setting the footer “container_12” to have a top margin to center footer content vertically. Now we set text alignment for “grid_4” to left and right for “grid_8“. Finally, we style social icons links to have a right margin of 6px and its last element “a.last” to have zero margins. Now our layout should look like this.

Step 10 – Adding Slider Content

Let’s add the HTML for the slider content, I will include here one slide content and then you can duplicate as you wish. Here’s the HTML for slider content.

Google Nexus One

Donec in adipiscing odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod gravida ornare. Phasellus ac ligula mi. Fusce sem purus, rhoncus et volutpat quis, aliq
uam vitae quam. Nulla vestibulum arcu in nisl bibendum ut posuere sapien lacinia.Fusce sed
odio at risus rhoncus consectetur sed ut magna. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.

Notice that we added two
elements with id attributes “slideshow” and “slidesContainer” these two elements is used for the Slider Javascript that we will implement later. Now we add
element with a class attribute “slide” this element is the one that slides and that contains each slide’s content (this is the element you should duplicate to allow multiple slides). Then we add an image with a class “main_image” this will hold the nexus one image. We continue by adding

element and a paragraph, then a
with a class of “extra_content” this should contain the extra buttons and thumbnails. Now our layout should look like this.

Step 11 – Styling Slider Content

You should now have a transparent PNG image of Nexus One, you will probably notice that the thumbnail section is the same as the one’s we did earlier it just needs a little modification to match our layout. Here’s the CSS for styling slider content.

#slideshow #slidesContainer .slide {
margin: 0 auto;
width: 800px;
height: 380px;
}

.slide .main_image {
display: block;
float: left;
width: 216px;
height: 296px;
margin: 45px 0 0 0;
}

.slide h2 {
margin: 45px 0 10px 0;
}

.slide p {

color: #bebebe;
}

.slide .extra_controls {
display: block;
float: left;
margin: 45px 0 0 0;
}

.slide .extra_controls .buttons {
display: block;
float: left;
width: 168px;
margin: 0 25px 0 0;
}

.slide .extra_controls .buttons a {
display: block;
float: left;
width: 168px;
height: 43px;
margin: 0 0 5px 0;
}

.slide .extra_controls .buttons a.discover_more {
background: url(../images/discover_more.png) no-repeat;
}

.slide .extra_controls .buttons a.discover_more:hover {
background: url(../images/discover_more_h.png) no-repeat;
}

.slide .extra_controls .buttons a.watch_video {
background: url(../images/watch_video.png) no-repeat;
}

.slide .extra_controls .buttons a.watch_video:hover {
background: url(../images/watch_video_h.png) no-repeat;
}

.slide .extra_controls .thumbnails {
display: block;
float: left;
}

.slide .extra_controls .thumbnails .thumbnail {
background: #000;
width: 95px;
height: 95px;
float: left;
display: block;
margin: 0 22px 0px 0;
-webkit-box-shadow: 1px 1px 0px #3b3b3b;
-moz-box-shadow: 1px 1px 0px #3b3b3b;
box-shadow: 1px 1px 0px #3b3b3b;
-moz-border-radius: 4px;
border-radius: 4px;
opacity: 0.3;
}

.slide .extra_controls .thumbnails .thumbnail:hover {
opacity: 1;
}

.slide .extra_controls .thumbnails .thumbnail img {
width: 83px;
height: 83px;
border: 1px solid #272626;
margin: 5px 0 0 5px;
}

First we start by styling “slide” element by setting margin to “0 auto” and what this does is it zero’s top and bottom margins and centers the slide horizontally. Now we style the main image by setting display, float, height & width and top margin. Now we style “extra_controls” element to float left and to have a top margin of 45px. Next we style the buttons to match the images height and width and to float left so that both land above each others, then we style the hover effect with the hover images.

Finally, we modify the thumbnails style by height and width to match its place on the slide, and the new thing we added here is “opacity” which is also a CSS3 feature and what it does is simply make the element it is applied to transparent by the value provided here we used 0.3 for the normal state and 1.0 for hover state, you should also notice that we removed any other styles from the hover states of both the thumbnail and the image with the exception of “opacity”. Now our layout should look like this.

Step 12 – Adding Slider Javascript

This tutorial is made to show you how to create this layout in HTML/CSS version; so for the Javascript I chose an already developed Slider script by Jacob Gube. You can see the tutorial on how to make this Slider and to download the source files from here. Now there are two things we need to do to make this script work we need to add a link for the JQuery and add the Javascript which will make the slider slide! All of this need to be added in our HTML header. So our HTML header should be like this now.

Dark Web Layout
') // Float left to display horizontally, readjust .slides width .css({ 'float': 'left', 'width': slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshow') .prepend('Clicking moves left') .append('Clicking moves right'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.control') .bind('click', function () { // Determine new position currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft': slideWidth * (-currentPosition) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls(position) { // Hide left arrow if position is first slide if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() } // Hide right arrow if position is last slide if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() } } });

Step 13 – Adding Styles from the Original Javascript

Now all I did when I took the Slider Script that I changed some values of width and height to match our template and changed the next and previous images to the one’s we have. Here’s the CSS for the Slider Script.

#slideshow {
margin: 0 auto;
width: 930px;
height: 380px;
background: transparent no-repeat 0 0;
position: relative;
}

#slideshow #slidesContainer {
margin: 0 auto;
width: 820px;
height: 380px;
overflow: auto; /* allow scrollbar */
position: relative;
}
/** * Slideshow controls style rules. */
.control {
display: block;
width: 55px;
height: 380px;
text-indent: -10000px;
position: absolute;
cursor: pointer;
}

#leftControl {
top: 0;
left: 0;
background: transparent url(../images/prev.png) no-repeat left 171px;
}

#rightControl {
top: 0;
right: 0;
background: transparent url(../images/next.png) no-repeat right 171px;
}

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD one that looks exactly like this.

Conclusion

So that’s it in this tutorial you learned how to convert a layout from PSD to fully working HTML/CSS, 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). Now if you think that anything is not clear to you or you have a better technique to create something, please be kind and say something in the comments.

.content_highlight .grid_4 .thumbnail:hover {
background: #333;
-webkit-box-shadow: 2px 2px 1px #000;
-moz-box-shadow: 2px 2px 1px #000;
box-shadow: 2px 2px 1px #000;
}

.content_highlight .grid_4 .thumbnail img {
width: 63px;
height: 63px;
border: 1px solid #272626;
margin: 4px 0 0 4px;
}

.content_highlight .grid_4 .thumbnail img:hover {
border-color: #111;
}