Picture2035

PSD to XHTML: Simple & Cloudy Portfolio Layout



Coded Preview

Tutorial Resources

Lets Get Started

1.  The first thing we need to do is set up our folders.  Create a folder called “xhtml”, and then create another folder inside it named “images”.  The xhtml folder is where we will be saving our html and css files.  So next open up Dreamweaver and create a new html document.  Choose XHTML 1.0 Strict.dtd from the doc type option – then save it as index.html.

2.  Next create a CSS file in the same fashion, and save it to your xhtml folder with the name “style.css”.  You could save it to a separate folder, but for this tutorial it will be easiest to keep in the same directory as your html file.

3.  So far your file structure will look something like the following:

4.  We want the CSS file to link to our index file, so we need to add the following link tag in our header before the closing head tag.

5.  Now we need to open up our for reference.

6.  You will have a total of 16 slices that we will be saving as elements in the design.  If you refer to the Sliced PSD, you can see how all elements have been named to go along with this tutorial.  While most of these images can be saved as JPEG’s, we want to save the cloud header background, arrow, and all the content background pieces as PNG’s to allow for transparency.  When you save all of these images, save them to the IMAGES folder we created earlier.

7.  Now that our images are ready, we can start to code.  We want to start by adding the following CSS to our CSS file for the header part of our design:


body {
	font-family: Arial, Helvetica, sans-serif;
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/head_bg.jpg) repeat;
	margin: auto;
	overflow: auto;
}

img {
	border: none;
}

.container {
	width: 930px;
	margin: auto;
}

/* HEADER */

#header {
	margin: auto;
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/cloud_bg.png) repeat-x;
	height: 100px;
	width: auto;
	padding: 35px;
}

#logo {
	width: 260px;
	height: 37px;
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/logo.jpg) no-repeat;
}

#navigation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: right;
	margin-top: -45px;
}

.navlinks li {
	display: inline;
	list-style-type: none;
}

.navlinks li a {
 color: #b64366;
 text-decoration: none;
 padding-top: 8px;
 padding-left: 10px;
 padding-bottom: 8px;
 padding-right: 40px;

}

.navlinks li a:hover {
 color: #FFF;
 width: 68px;
 text-decoration: none;
 background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/nav_hover.jpg) no-repeat;
 padding-top: 8px;
 padding-left: 10px;
 padding-bottom: 8px;
 padding-right:40px;
}

/* TAGLINE */

#tagline {
	width: 700px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #51656a;
	padding-left: 30px;
}

.arrow {
	margin-left: 700px;
	margin-top: -40px;
	width: 26px;
	height: 36px;
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/arrow.png) no-repeat;
}

This should all be fairly straightforward, and by following the naming scheme you can see where things will go.  The container will define how large our site area will be.  For our local navigation menu, we will be using an unordered list to display our links in a clean and easy to update way.

8.  Next we will add our CSS for our content area’s background:


/* CONTENT */

#content {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/content_back_repeat.png) repeat-y;
	height: 100%;
	overflow: hidden;
	margin-top: 0px;
}

#content_top {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/content_back_top.png) no-repeat;
	width: 901px;
	height: 26px;
	margin-top: 20px;
}

#content_bg {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/content_repeat.png) repeat-x;
	height: 100%;
}

#content_footer {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/content_footer.png) no-repeat;
	width: 901px;
	height: 43px;
}

The “overflow:hidden;” tag is essential to allow for the background to repeat all the way, past elements that we will be floating later on.

9.  For the featured content, and the contact and blog cloud, we want to add the following CSS styles.


/* FEATURED CONTENT */

.featured {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/featured.jpg) no-repeat;
	height: 65px;
	width: 885px;
	margin-left: 8px;
}

.featured li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
}

.featured img {
	margin-top: 80px;
}

#feat_descrip {
	float: right;
	margin-top: 90px;
	font-size: 12px;
	color: #494949;
	width: 180px;
}

#feat_descrip img {
	margin-top: 15px;
}

/* BLOG & CONTACT CONTENT */

#blog_head {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/latest_blog_head.jpg) no-repeat;
	height: 61px;
	width: 885px;
	margin-left: 8px;
	margin-top: 190px;
}

#left_side {
	width: 435px;
	font-size:13px;
	margin-left: 50px;
	margin-top:  0px;
	float: left;
}

#blog {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/blog_cloud_bg.jpg) no-repeat;
	width: 406px;
	height: 290px;
}

.blog_list {
	display: block;
	list-style: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/bullet.jpg);
	color: #494949;
	padding: 50px;
	margin-left: 25px;

}

.blog_list li {
	padding-top: 15px;
}

#right_side {
	width: 435px;
	margin-left: -12px;
    margin-top: 10px;
	float: left;
}

.contact li {
	display: block;
	list-style-type: none;
	padding-bottom: 10px;
}

.contact input {
	background: #3F3F3F;
	color: #FFFFFF;
	padding: 3px;
	border-weight: 2px;
	border-color: #5a5959;
	border-style: solid;
	height: 22px;
	width: 300px;
}

.contact textarea {
	font-family: Arial, Helvetica, sans-serif;
	background: #3F3F3F;
	color: #FFFFFF;
	padding: 3px;
	border-weight: 2px;
	border-color: #5a5959;
	border-style: solid;
	height: 80px;
	width: 300px;
}

#send_email {
	padding-left: 40px;
}

10.  And finally, the last thing we need to do is add the styling for our footer.  This will be fairly basic since we just have text to display.


/* FOOTER */

#footer {
	background: url(/2010/04/13/2010/05/17/psd_to_xhtml_simple_cloudy_portfolio_layout/images/footer_bg.jpg) repeat-x;
	height: 69px;
	width: 100%;
	margin-top: 15px;
	font-size: 12px;
	color: #F1F1F1;
}

.footlinks {
	margin: auto;
	padding-top: 25px;
}

.footlinks li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
	padding-left: 10px;

}

.footlinks li a {
	color: #c2ecf9;
	margin: auto;
	text-decoration: none;

}
.copyright li {
	display: inline;
	float: right;
	overflow: hidden;
	list-style-type: none;
	padding-right: 50px;
	margin-top: -29px;
}

.copyright li a {
	color: #c2ecf9;
	margin: auto;
	text-decoration: none;

}

11.  Moving back to your index.html document, we now want to arrange it in the following way:


<body>

		<div id="header">

        	<div class="container">

            <div id="logo"><a href=""><img src="images/logo.jpg" /></a></div>

	            <div id="navigation">

          		 <ul class="navlinks">

          		 <li><a href="">Home</a></li>
          		 <li><a href="">About</a></li>
          		 <li><a href="">Portfolio</a></li>
          		 <li><a href="">Contact</a></li>

                 </ul>

                 </div> <!--Navgation Ends -->

    	</div><!--container Ends -->

	</div><!--header Ends -->

	<div class="container">

		<div id="tagline">

    Hello!  My name is Matthew Heidenreich and I create beautiful interface designs for small and large businesses.  If you are interested, please visit my contact page.  What are you waiting for?

		<div class="arrow"></div>

		</div><!--tagline end-->

        	</div><!--Container Ends -->

	 <div id="content_bg">

 		<div class="container">

        <div id="content_top"></div>

        	<div id="content">

            		<div class="featured">

                    <ul>

                    <li><a href=""><img src="images/portfolio_image_1.jpg" /></a></li>
                    <li><a href=""><img src="images/portfolio_image_2.jpg" /></a></li>
                    <li><a href=""><img src="images/portfolio_image_3.jpg" /></a></li>

                    <li id="feat_descrip">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum, lacus ac vulputate consectetur, ante nisi tempor.

                    <a href=""><img src="images/view_all_btn.jpg" /></a>

                    </li>

                    </ul>

                    </div><!--featured end-->

        	<div id="blog_head"></div>

            <div id="left_side">

            	<div id="blog">

                <ul class="blog_list">

                	<li>25 Creative and Artistic T-Shirt Designs</li>
                    <li>Redesign: DeviseFunction Gets a Facelift</li>
                    <li>Create a Chalkboard Style WordPress Layout</li>
                    <li>Stunning use of Transparency in Web Design</li>
                    <li>Underwater Content Box Design in Photoshop</li>

                </ul>

                </div><!--Blog  End-->

            </div><!--Left Side Ends-->

            <div id="right_side">

            <ul class="contact">

            	<li><input type="text" value="Name"  /></li>
                <li><input type="text" value="Email"  /></li>
                <li><input type="text" value="subject"  /></li>
                <li><textarea></textarea></li>

            </ul>

            <input type="image" src="images/send_email_btn.jpg" alt="send email" id="send_email" />

            </div><!--Right Side End-->

    		</div><!--Content End-->

            <div id="content_footer"></div>

       	</div><!-- Container End -->

        <div id="footer">

        <div class="container">

          <ul class="footlinks">

              <li><a href="">home</a></li>/
              <li><a href="">about</a></li>/
              <li><a href="">portfolio</a></li>/
              <li><a href="">contact</a></li>

          </ul>

          <ul class="copyright">

          	<li>Copyright © 2010 Cloudy Studios.  Designed by <a href="http://devisefunction.com/">Matthew Heidenreich.</a></li>

          </ul>

         </div>

        </div><!--footer end-->

    </div><!--content bg end-->

</body>

That is it! If you have any questions, please do not hesitate to ask. All constructive feedback is welcome.

Live Demo

**Note :: only tested in latest version of each browser

If new to web designing and want to learn photoshop then join online Stuff related to web designing.

This was written by Matthew Heidenreich