May 17th

PSD to XHTML: Simple & Cloudy Portfolio Layout

PSD to XHTML: Simple & Cloudy Portfolio Layout

In this tutorial you will learn how to convert the Simple & Cloudy Portfolio Layout PSD to XHTML. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the source files are available for download.

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 PSD File in Photoshop and prep the images for our layout with slices.  Use your Slice Tool to slice it up similar to the following.  You can downloaded the sliced PSD here 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(images/head_bg.jpg) repeat;
	margin: auto;
	overflow: auto;

img {
	border: none;

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

/* HEADER */

#header {
	margin: auto;
	background: url(images/cloud_bg.png) repeat-x;
	height: 100px;
	width: auto;
	padding: 35px;

#logo {
	width: 260px;
	height: 37px;
	background: url(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(images/nav_hover.jpg) no-repeat;
 padding-top: 8px;
 padding-left: 10px;
 padding-bottom: 8px;


#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(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 {
	background: url(images/content_back_repeat.png) repeat-y;
	height: 100%;
	overflow: hidden;
	margin-top: 0px;

#content_top {
	background: url(images/content_back_top.png) no-repeat;
	width: 901px;
	height: 26px;
	margin-top: 20px;

#content_bg {
	background: url(images/content_repeat.png) repeat-x;
	height: 100%;

#content_footer {
	background: url(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 {
	background: url(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_head {
	background: url(images/latest_blog_head.jpg) no-repeat;
	height: 61px;
	width: 885px;
	margin-left: 8px;
	margin-top: 190px;

#left_side {
	width: 435px;
	margin-left: 50px;
	margin-top:  0px;
	float: left;

#blog {
	background: url(images/blog_cloud_bg.jpg) no-repeat;
	width: 406px;
	height: 290px;

.blog_list {
	display: block;
	list-style: url(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(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:


		<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>


                 </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">


                    <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>



                    </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>


                </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>


            <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 class="copyright">

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



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

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


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 1z0-051 web designing course and become expert using free 642-566 tutorials and useful JN0-522 Stuff related to web designing.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts33 Comments

  • darrel summers May 17th, 2010 at 2:00 am

    Major errors in firefox and ie

    • Matthew Heidenreich May 17th, 2010 at 7:20 am

      hmm… i had checked it in both. But let me take another look at it and see what is up and then I will update it. Thanks for point it out.

  • Tutorial Lounge May 17th, 2010 at 4:56 am

    really helping tutorial with development techniques. thanks for sharing

  • Prathap May 17th, 2010 at 1:59 pm

    Hi Matthew, nice tutorial good for new learners. There’s a small problem with the main navigation links.

    • Matthew Heidenreich May 17th, 2010 at 2:32 pm

      thanks for the heads up Prathap. Went ahead and updated the theme, and it should be all good now.

  • darrel summers May 18th, 2010 at 3:58 am

    Perfect now

  • adamctemple May 18th, 2010 at 12:16 pm

    I find generally its much easier to create my markup before doing any CSS. This allows you to structure your document much more semantically and build your CSS around your document structure. Otherwise great tutorial!

    • Matthew Heidenreich May 18th, 2010 at 12:26 pm

      This is very true. I have done both ways, and since this is the first tutorial we have for xhtml & css conversion, we will be working out the format throughout the next few tutorials. Thanks for the feedback!

  • clippingimages May 19th, 2010 at 2:48 am

    thanks for the post……

  • VP May 19th, 2010 at 5:29 pm

    I always get stuck on taking my layout to HTML.
    Could you help me with slicing or refer me to anything you have done to clarify how it works and how to do it successfully?
    Also, if I had a website that required a login and password function and search function- how would that change what you ahve done above?


    • Matthew Heidenreich May 19th, 2010 at 6:29 pm

      Thanks for your question. We will be working on better formatting these tutorials in the future to answer your questions within the articles ;-)

      For the slicing, it can be done a number of ways, and no one way is correct. I prefer to actually start from top to bottom, and work my way down. You want to think of your layout as a series of rectangles. So you need to go through and figure out what images you need to cut up.

      Take a look at the header, I only have 3 images being used. We have the logo, the clouds (that will repeat along the top), and then the blue stripped background that will repeat both ways. When slicing you want to keep in mind those elements that will need to expand or repeat. Most everything else can be disregarded (as far as text), as we will be adding that later on with the html. I realize this is very brief, and I think I am going to work on getting a more detailed guide out on doing it. I will also be sure to provide a more in depth description in future tutorials.

      As far as your search question, that all depends on what your back end uses to search. DeviseFunction uses WordPress so we use the default search code used with WordPress.

      Hopefully this helps a little. If you have any other questions, please feel free to ask.

  • سيد محمود June 17th, 2010 at 1:24 pm

    good,i am going to learn this lesson,tnx

  • Asikur Rhaman Reko November 7th, 2010 at 11:05 pm

    this is great …

  • cms website design in Nederland November 7th, 2010 at 11:11 pm

    nice and impressive work you have done…
    thanks for sharing with all of us..

  • kostenlos versandanweisungen November 9th, 2010 at 7:18 am

    This is tremendous post……

  • online winkel in Nederland November 10th, 2010 at 7:00 am

    An Outstanding and great posting here I seen.
    Thanks for doing nice work…

  • DDoMs_YU December 4th, 2010 at 9:35 am

    感谢你的教程 Matthew

  • Xhtmlchamps, Jr. December 17th, 2010 at 5:43 am

    “XHTML Champs” is a business unit of Acedezines, a well-established web designing company with clear business orientation and strong creatives. Ace Dezines has over fifty satisfied clients across the globe from different verticals such as animation, software, pharma, e-learning, construction and nutraceutical companies.

    For More Details Visits to our site:

  • Rob March 1st, 2011 at 4:26 pm

    Nice tutorial!Check out our PSD to XHTML at – fair prices and great support waiting you

  • Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:50 am

    very good tutorial man.please keep them coming……..

  • Trerlylixenna November 6th, 2012 at 7:07 am

    chaussures timberland
    air jordan femme
    canada goose pas cher
    scarpe hogan raszy

  • AInanoRowwex June 23rd, 2013 at 7:18 am

    [url=]дальневосточный завод металлоконструкций[/url] InanoRowwex [url=]изготовление металлоконструкций чебоксары[/url] irorefragma, [url=;u=100703]резка металла водой[/url] lenzipice [url=]завод металлоконструкций новосибирск[/url] Innowinnoth. zxcvbnm

    • Sebastian September 21st, 2014 at 1:06 pm

      I was very pleased to find this web-site.I wtaend to thanks for your time for this wonderful read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you blog post.

  • trurneSet November 26th, 2013 at 5:36 am

    [url=][b]uggs cheap[/b][/url]Yes,going to be the big rain in lots of ways comes day judging by day only a decade ago Chengdu is too. And based all around the going to be the report today,3 peoples were died and a good deal more then 20 peoples were harm on the basis of going to be the large rain. Hoping a multi function good whether not only can they could be purchased asap. [url=][b]discount ugg boots[/b][/url]
    [url=][b]ugg boots clearance[/b][/url]I have was able to find that going to be the a lot more I get back to you going to be the much more kind comments I be capable of geting I’m do not ever completely happy to have each of them is along the lines of them,but take heart I get involved with to understand more about don’t forget that that there will be the all of these a multi functional thing as constructive criticism,because of this I don’t do nothing more than trash them. [url=][b]ugg boots sale[/b][/url]
    [url=][b]ugg boots outlet[/b][/url]I’m hardly ever really bothered about nested words of flattery some form of way or perhaps the a number of other I think they have the desired effect if that is so if going to be the blogger is this : replying to learn more about every comment,but take heart for example then,aspect may get too much of the (For instance, instead including getting all are my very own replies on this page into no less than one comment, I’d be providing some one 4 comments Plus,a few of these novice/lazy users just click the first “reply to learn more about this comment” button they schedule an appointment with and get confusing a resource box all [url=][b]ugg gloves[/b][/url]

  • HaroldZet January 24th, 2014 at 7:47 pm

    [url=][b]michael kors outlet[/b][/url]I think any number of the pressure not only can they be the case transferred for more information about going to be the attending college.a young lad not only can they have to a good deal more and much more homework. and they not only can they face many interest classes that they worry about don’t like at all of them are nowadays going to be the children’s childhood is not at all happy as 70 80. they have don’t you think the length of time for more information regarding appreciate going to be the beautiful starry sky. they have don’t you think for free for more information on running everywhere over the the u s road.most much like their the time they spend time researching play,live at less than their parents’ and their teachers’ eyes. [url=][b]michael kors canada[/b][/url]Hello! We find your on the internet and your online business to ensure they are tremendously choosing. [url=][b]michael kors wallet[/b][/url]Well worded. Thank an all in one lot as well as for posting that. I’ll check to your site in order to discover more and recommend my very own neighbors about your website. [url=][b]michael kors canada[/b][/url]Really want to understand more about come to mind for more information about visit going to be the place,feel a resource box Change going to be the environment,to learn more about precipitate the do you feel and mind. In this noisy society,thus sick and tired,are going to want to learn more about relax both to and from time to understand more about the length of time. [url=][b]michael kors handbags[/b][/url]

  • JosephPi January 28th, 2014 at 9:19 am

    [url=][b]michael kors watches[/b][/url]This article is the fact ach and every interesting,ach and every attractive important, i am going to feel a resource box is that worth reading.This article rarely single purpose brought joy,but also teach us knowledge everyday.You also can be obtained and see. [url=][b]michael kors[/b][/url]Good points everywhere over the how to deal with comment back. I always just thoughtful words of flattery and replies, BUT, I sometimes take too considerably I not only can they take your thoughts all over the replying as as soon as possible as I can to explore heart. [url=][b]michael kors[/b][/url]Unfortunately,going to be the lack of clear communication can be the case an all in one troublesome problem,also it can cause misunderstandings. [url=][b]michael kors[/b][/url]Thanks Warmjaney. Disappointment is the fact that going to be the nurse of wisdom.Ones best successful comes after their greatest disappointments. [url=][b]michael kors outlet canada[/b][/url]

  • Edwardnug February 9th, 2014 at 7:11 pm

    [url=][b]Michael kors outlet[/b][/url]I agree. If you’re going into a multi function discussion,do therefore for going to be the sake along the lines of going to be the discussion. I’ve heard that posting words of flattery makes it possible for one’s search engine rankings,regardless that I have serious doubts about that for those times when compared for additional details on going to be the heart including SEO,content titles, and quality links. Lord knows, I are often times wrong..[url=][b]Michael kors outlet[/b][/url]
    [url=][b]Michael kors outlet[/b][/url]Life is going to be meaningless if all of the things could be the thus easily achieved.What does rarely destroy my hand makes me stronger.[url=][b]Michael kors outlet[/b][/url]
    [url=][b]michael kors outlet[/b][/url]Personally, I a little as though a multi function subtle difference in the design. The comment possibilities needs to be “different.” It doesn’t will want for additional details on stand out at they all are Just as a consequence further as someone reading aspect realizes that it’s going to be the author commenting,not at all a reader, then that’s going to be the fantastic hobby done.[url=][b]michael kors outlet[/b][/url]
    [url=][b]Michael kors outlet[/b][/url]I am now working all around the a custom design as well as for my very own your home business (as a number of us as an all in one totall re-vamp), and this is usually that something that I have been wanting to explore work into going to be the new site.Now I are aware of that how do we Thanks on that basis much in the way![url=][b]Michael kors outlet[/b][/url]

  • Gregoryki February 9th, 2014 at 7:19 pm

    [url=][b]Michael kors outlet[/b][/url]There tends to be that a multi functional an absolute must have reputation everywhere over the going to be the available on the web store and get started.100% customer satisfaction and free of charge shipping.Welcome for additional details on make invest in in the following paragraphs at our outlet in the store available on the internet best information gorgeous honeymoons as well my hand.[url=][b]michael kors outlet[/b][/url]
    [url=][b]Michael kors outlet[/b][/url]I are aware of that a resource box often painful too all your family but take heart about whether or not all your family members really appreciate him,let him come to.[url=][b]Michael kors outlet[/b][/url]
    [url=][b]Michael kors outlet[/b][/url]At last a multi functional craft prize, and what a multi function prize! You certainly know what a number of us want to learn more about win, here’s wishing I’m the lucky winner.[url=][b]Michael kors outlet[/b][/url]
    [url=][b]Michael kors outlet[/b][/url]Then I leave.[url=][b]Michael kors outlet[/b][/url]

  • WilliamCase February 11th, 2014 at 5:59 pm

    [url=][b]michael kors outlet[/b][/url]Personally, I a little as though an all in one subtle difference as part of your design. The comment among the most needs include them as “different.” It doesn’t are going to want for more information on stand on the town at all are Just on that basis a long shot as someone reading a resource box realizes that it’s the author commenting,certainly not an all in one reader, then that’s going to be the flower gardening makes a done.[url=][b]michael kors purses outlet[/b][/url]Thank your family a parcel and for sharing this so that you have they all are along the lines of us your family actually recognise what all your family are speaking about! Bookmarked. Kindly also discuss with my very own website = We will have an all in one link exchange arrangement between us[url=][b]michael kors factory outlet[/b][/url] [url=][b]michael kors outlet[/b][/url]I’ve found this article would be the fact truly relevant to educate yourself regarding my spend some time researching at this tenant Screening day of the week and I am really happy I discovered your website. Thanks[url=][b]michael kors bags outlet[/b][/url][url=][b]michael kors outlet[/b][/url]What wonderful words; magical, charming, enchanting, delightful and stylish. So inspiring, thank you as well as for the opportunity[url=][b]michael kors outlet store[/b][/url]

  • ice lolly holidays March 2nd, 2014 at 9:07 pm

    I’m amazed, I must say. Seldom do I encounter a blog that’s both equally educative and engaging, and without a doubt, you’ve hit the nail on the head. The issue is an issue that not enough men and women are speaking intelligently about. I am very happy I came across this during my hunt for something relating to this.

    • Giacomo September 21st, 2014 at 6:56 am

      Extremely nice post. I just stumbled upon your wlbeog and wished to say that I’ve truly enjoyed surfing around your blog posts. In any case Ie2€™ll be subscribing to your feed and I hope you write once more soon!xrumer

  • GeorgeMl March 24th, 2014 at 3:48 am

    [url=][b]nike free run 2[/b][/url]Really want for more information regarding come to mind to explore make an appointment with the place,what better way aspect Change the environment,to educate yourself regarding precipitate going to be the are you and mind. In this noisy society,on those grounds tired,need to relax back and forth from how long for more information on how long.[url=][b]nike free[/b][/url]OK,in the affirmative the heat is that often a multi functional bit too much in the way especially with your afternoon, but[url=][b]nike free run 2[/b][/url]It feels and looks bad to learn more about go out when there will be the torrential rain. Especially going to be the dirty water all around the going to be the road gets my very own shoes wet.[url=][b]nike free[/b][/url]

  • online advertising March 24th, 2014 at 4:10 am

    Excellent article. I’m facing a few of these issues as well..

Leave Your Response