Converting Wooden PSD Template to HTML

First here is the basic structure of the layout.

Put Your images and CSS in a separate folders.


Now here is how the HTML structure of the layout. Inside the content we have the slideshow, text and contact option. In the footer there is three column.

<div id="wrapper">
    <div id="logo"></div>
      <!--  menu  -->
            <div id="navcontainer">
          <ul id="navlist">
            <li> <a href="#"> Home</a></li>
             <li> <a href="#"> Portfolio</a></li>
             <li> <a  href="#"> Contact</a></li>
        </ul>
            </div>
          <!--  end menu  -->
            <!--  content  -->
        <div id="content">
            <div id="slideshow">
            </div>
            <!-- end slideshow -->
                <div id ="options">
                </div>
                <!-- end options -->
                <div id="rest_info">
                 <div class="left">
                    </div> <!-- end left-->
                    <div class="right">
                    <div>
                     <!-- end right -->
                        </div>
                         <!-- end rest info -->
            </div> <!-- end content-->
             <!-- footer vertical box -->
            <div id="vertical_list_box">
                <ul>
                    <li></li>
                    <li> </li>
                    <li></li>
 
                </ul>
            </div>  <!-- end vertical box -->
 
    </div> <!-- end wrapper-->

To get started first hide all the layers except the background and export it as JPEG. and put it in the images folder. We put a  global CSS reset in the beginning. You can use any other reset you want to use.

*{
    margin:0;
    padding:0;
}
body{
    background: #62563e url('../images/bg.jpg') center no-repeat;
    margin:0 auto;
    color:#f8fbee;
 
}
a img {border:none;}
h2{
    color:#f8fbee;
    font-size:25px;
    font-weight:200;
}
#wrapper{
        width:900px;
                margin:0 auto;
                overflow:hidden;
}

Next merge the images in the logo folder in the PSD layout and copy the image to a new PSD file with blank background and save is as PNG. Now, we need to export the content area image. Copy only background layer a new file. You can select that layer by right clicking on the layer and choose the Select PIxel options. Then just open and new file and paste it. You will see the background is different because we still have to apply the same layer styles. Copy the layer styles from Layer > Layer Styles > Copy Layer Style or shortcut is just right click on the layer on the layer window and choose Copy Layer Styles. Then we use CSS to apply them in the HTML.

#logo {
        background: url('../images/logo.png') no-repeat;
        width:306px;
        height:156px;
        position:relative;
        left:530px;
        top:-10px;
 
}
#content{
        background: url('../images/content.png') no-repeat;
        font-family: Rockwell, Georgia, Serif;
        width:820px;
        height:546px;
        margin:0 auto;
 
}

Keep in mind we are using Rockwell  for font through out the layout, It should fairly web safe. Now lets move on to the menu. The menu and content border have the same transparent background. So, we will just crop it from the the new PSD file that you created for the menu. Select the edges of the content background copy to new file and save it as PNG.

Now we position the menu. You can see the full CSS  code in the files, but here something you should note. We are using CSS3 text shadow and also on menu hover padding-top is 10px. So it looks like the menu item is moving upward  and it gives a realistic feeling.

#navlist li a{
    background: url(../images/menu_bg.png) center repeat;
    color: #000;
    font-family: Rockwell, Georgia, Serif;
    font-size: 16px;
    color:#f8fbee;
    padding:4px 18px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 0 6px 1px 6px;
}
 
#navlist li a:hover{
    color: #aac159;
    border-top:#aec451 4px solid !important;
    padding-top:14px;
}

To get the background for slideshow image use color overlay in the Layer style for the image layer the PSD Layout.

After that we can just use CSS to position the this image for the slideshow background. We put the image inside a div and add a class to the image itself to position it.

#slideshow{
        background: url('../images/slideshowbg.png') no-repeat;
        width:343px;
        height:244px;
        margin-top:40px;
        margin-left:40px;
        float:left;
 
}
#slideshow .slide_images{
    position:relative;
    left:14px;
    top:6px;
 
}

The other text and in the content are pretty simple. We exported all the image and saved them as PNG and positioned using CSS. The footer box are created using CSS float property. However, lets look at the first column. We are using span to create list. Here is the HTML :

<div id="vertical_list_box">
  <ul>
    <li>
          <img class="title"  src="images/links.png"  height="110" width="186" alt="Call us" />
      <span> Link item 1</span>
     <span> Link Item 2</span>
     <span> Link Item 3</span>
     <span> Link Item 4</span>
    </li>

And here is the CSS:

#vertical_list_box ul li span{
    background: url('../images/list.png') no-repeat;
     background-position: -10px 0px;
     padding: 10px 0px 10px 30px;
     display:block !important;
    width:auto;
}

As you can see we are using background-position property to have list like image. That’s all . You can see all the detailed CSS in files there are well commented.  The layout is tested on latest version of Firefox, Safari and Internet Explorer . If you do not understand any step feel free to ask questions it in the comment.

(Source)


Comments (0)add comment

Write comment
smaller | bigger

busy
< Prev   Next >