Code a Modern Design Studio from PSD to HTML

Written ByRyan TurkiinCoding


Today we’re going to convert the Modern Design Studio PSD Template created by Tomas Laurinavičius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from <a href="http://webdesig

nfan.com/free-

modern-design-studio-psd-template/”>The Modern Design Studio PSD Template.

The Final Result

If you follow along with the tutorial, you will end up with the following result.

Final

Setting up the files

Start out by creating a new folder on your computer in which we will put all of the site files. I named it ModerndesignStudio. Create another folder in your working folder you just created and call it images, it will contain all the images of the site. Next open up your favorite code editor (I use Dreamweaver) and create a new HTML file titled index.html in the root of the folder, this will be our main page template. Now create a new css file, and name it style.css.

img1

Open up your index.html file. At the top of your document inside the head tags, link to your style sheet (style.css) so that it’s ready to go. You can use the code below.

<link href="style.css" rel="stylesheet" type="text/css" />

So your code will looks like this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modern Design Studio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

Setting up the html structure

Now we will set the structure of our html file. I’m going to set 3 sections (header, content, footer) like I did here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</body>
</html>

Slicing the background

Our psd file includes a lot of textures and splashes so I’m going to slice the psd block by block so we will not loose these beautiful designs. Also, I’m going to add a div in each section which I’ll call container to align our web page contents.

<body>
<div id="header">
  <div id="container">

  </div>
</div>
<div id="content">
  <div id="container">

  </div>
</div>
<div id="footer">
  <div id="container">

  </div>
</div>
</body>

Now let’s begin with opening the psd layout in Photoshop, hide everything except the “Background” and “Background texture”.

img2

Now take the Slice Tool (C), select the background, go to File, Save for Web & Devices (Alt + Shift + Ctrl + S) and change the image’s width to 1600px. Then save it under the name of background.jpg in your images folder.

img3

Coding the template’s body background

Now that we have our background image sliced out of the Photoshop document, we can begin coding. Open up your CSS file (style.css) in your source code editor, and then use the following code.

* {
   margin: 0px;
   padding: 0px;
}
body
{
   background:url(images/background.jpg);
}
#container
{
   margin: auto;
   width: 960px;
}

Let’s go over the styles in more detail.
First, we reset all of our elements margins and paddings to 0 to avoid cross-browser inconsistencies. We do this with the * selector.
Next, we style the body element: we set background.jpg as it’s background property.
Finally, we style the #container margins to auto to center the layout, and set a fixed width of 960px.

Slicing the header

Go back to Photoshop and hide everything in the Header folder except the Header and Header texture layers, pick the slice tool and select the header section and save it for Web & Devices under the name of header.jpg in the images folder.

Coding the header’s background

In your css file add this code:

#header
{
	background:url(images/header.jpg);
	height:124px;
}

In this code I styled the header element. I set header.jpg as it’s background, and I set it’s height to 124px.

Slicing the logo/site name

Now hide all of the Header, Background, Header texture and the Background texture layers. With your slice tool select the logo and the slogan and save them like we did earlier under the name of logo.png.

img4

Adding the logo to the html

Now switch back to your HTML document. Inside #header #container, create a new div with an ID of logo.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
   </div>
</div>

Now, let’s move over to the stylesheet. To style our #logo section elements. Here is the CSS code.

.logo
{
	margin-top:20px;
	border:none;
}

Coding the navigation

Still inside the #header #container, create a simple unordered list containing the navigation links. Here’s the code block for the navigation.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
   </div>
</div>

Styling the navigation

Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:

#header li
{
	color:#959595;
	list-style:none;
	float:left;
	margin-right:20px;
	font-family:"Myriad Pro",arial;
	font-weight:bold;
	font-size:24px;
}
#header li a
{
	color:#959595;
	text-decoration:none;
	padding:10px;
}
#header ul
{
	float:right;
	margin-top:-40px;
}
#header li a:hover
{
	background:#202020;
	color:#d2d2d2;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
}

I added some styles to #header li such as the color (#959595), I removed the list style, changed the font family to Myriad Pro, the font weight to bold, the font size to 24px and floated the li elements without forgetting the marging right to make some space between li elements.
For the hover I used some CSS3 features like the border radius and I changed the background color to #202020.

Creating the featured box

Now we’ve finished with the header section, let’s head over to the content section.

Let’s add two new divs in this section, the first #featured (it will contain the featured section) and the other #paragraphs.

<div id="content">
  <div id="container">
      <div id="featured">

     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

In the psd file as we did before, select the slice tool and slice the featured box after hiding the more projects button and the little text then save it under the name of featured.jpg.

img5

In your HTML file add this code to the featured div to add the more project link and some dummy text:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

In the PSD file I will take the more project button and duplicate it and reverse the Gradient Overlay, slice both of the more project buttons and slice them(The dimensions are about 124px x 60px) and save the button under png-8 format and name it button.png.

img6

Now we’ve got the images ready let’s head over to the CSS file and add this code.

#featured
{
	background:url(images/featured.jpg) no-repeat;
	height:381px;
	margin-top:30px;
	margin-left:80px;
}
#featured a
{
	background:url(images/button.png);
	height:30px;
	width:124px;
	text-indent:-9999px;
	position:absolute;
	margin-top:330px;
	margin-left:180px;
}
#featured a:hover
{
	background-position:0px 30px;
}

I will begin with explaining #featured: I set it’s background to the featured image that we have sliced, then I positioned it with some margins. For the more projects link I set the background to button.png the height 30px so we could get the top button, I removed the text with text-indent and positioned it with the margins. Don’t forget to set the button’s position to absolute. Now to get a nice hover effect I changed the background position.

Now I’m going to add some style to the dummytext element:

.dummytext
{
	color:#d2d2d2;
	width:245px;
	margin-top:150px;
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:180%;
	margin-left:290px;
}
.dummytext span
{
	font-size:16px;
	color:#191919;
	font-weight:bold;
}

Creating the paragraphs

After we finished with the featured div let’s add some paragraphs to our content section.

<div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
</div>

So our content section will looks like this:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
     </div>
  </div>
</div>

After adding this code to your HTML go to your CSS file and add these styles to the paragraphs.

#paragraphs span
{
	font-family:"Myriad pro", Helvetica, sans-serif;
	font-size:22px;
	font-weight:600;
	letter-spacing:-2px;
}
#paragraphs
{
	margin-left:80px;
	font-family:Arial, Helvetica, sans-serif;
	color:#191919;
	font-size:12px;
	margin-top:15px;
}
.paragraph
{
	width:250px;
	margin-left:15px;
	float:left;
}

Here is what you will end up with:

img7

Slicing the footer

Now we finished with the header and te content sections and we will begin creating the footer section.

First, in your psd file hide every thing in the footer folder except the Footer and Footer texture layers, then slice the footer and save it as footer.jpg. You can take a look at this image below.

img8

Then slice the Follow Us button and the birds image. Name the first one follow.png and the second bird.jpg.

Coding the footer

Our footer section will contain some text, a link to twitter and the birds image.

So here is the HTML code to add these blocks.

<div id="footer">
  <div id="container">
    <p>2010 © Fictional Design Studio. Design by Webdesignfan.</p>
    <a href="#">Follow us on Twitter</a>
    <img src="images/bird.jpg" />
  </div>
</div>

Now, we style our footer section using the following styles (go to your stylesheet and place this code block in there).

#footer
{
	background:url(images/footer.jpg);
	height:71px;
	margin-top:191px;
}
#footer p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#959595;
	position:absolute;
	margin-top:30px;
}
#footer a
{
	background:url(images/follow.png);
	text-indent:-9999px;
	position:absolute;
	height:27px;
	width:124px;
	margin-left:730px;
	margin-top:30px;
}
#footer img
{
	float:right;
	margin-top:10px;
}

I used footer.jpg as the background of the footer, then I added some styles to the text included in the footer (The p element).

For the follow link I used the same techniques that we applyed with the more project link, then for the bird image I floated it to the right and used the margin.

And we’re all finished!

Final1

Live Demo // Download the source files (0,7 MB)

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Join SY0-201 online web designing course to learn how to cod a modern design studio from psd to html. Take advantage of the latest 70-680 tutorials and 642-902 study guide to learn different tips and techniques that you can use to design your web/blog page.
aMember

Format

Today we’re going to convert the Modern Design Studio PSD Template created by Tomas Laurinavičius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from The Modern Design Studio PSD Template.
The Final Result
If you follow along with the tutorial, you will end up with the following result.

Setting up the files
Start out by creating a new folder on your computer in which we will put all of the site files. I named it ModerndesignStudio. Create another folder in your working folder you just created and call it images, it will contain all the images of the site. Next open up your favorite code editor (I use Dreamweaver) and create a new HTML file titled index.html in the root of the folder, this will be our main page template. Now create a new css file, and name it style.css.

Open up your index.html file. At the top of your document inside the head tags, link to your style sheet (style.css) so that it’s ready to go. You can use the code below.

So your code will looks like this one:

Setting up the html structure
Now we will set the structure of our html file. I’m going to set 3 sections (header, content, footer) like I did here:

Slicing the background
Our psd file includes a lot of textures and splashes so I’m going to slice the psd block by block so we will not loose these beautiful designs. Also, I’m going to add a div in each section which I’ll call container to align our web page contents.

Now let’s begin with opening the psd layout in Photoshop, hide everything except the “Background” and “Background texture”.

Now take the Slice Tool (C), select the background, go to File, Save for Web & Devices (Alt + Shift + Ctrl + S) and change the image’s width to 1600px. Then save it under the name of background.jpg in your images folder.

Coding the template’s body background
Now that we have our background image sliced out of the Photoshop document, we can begin coding. Open up your CSS file (style.css) in your source code editor, and then use the following code.
* {
margin: 0px;
padding: 0px;
}
body
{
background:url(images/background.jpg);
}
#container
{
margin: auto;
width: 960px;
}
Let’s go over the styles in more detail.
First, we reset all of our elements margins and paddings to 0 to avoid cross-browser inconsistencies. We do this with the * selector.
Next, we style the body element: we set background.jpg as it’s background property.
Finally, we style the #container margins to auto to center the layout, and set a fixed width of 960px.
Slicing the header
Go back to Photoshop and hide everything in the Header folder except the Header and Header texture layers, pick the slice tool and select the header section and save it for Web & Devices under the name of header.jpg in the images folder.
Coding the header’s background
In your css file add this code:
#header
{
background:url(images/header.jpg);
height:124px;
}
In this code I styled the header element. I set header.jpg as it’s background, and I set it’s height to 124px.
Slicing the logo/site name
Now hide all of the Header, Background, Header texture and the Background texture layers. With your slice tool select the logo and the slogan and save them like we did earlier under the name of logo.png.

Adding the logo to the html
Now switch back to your HTML document. Inside #header #container, create a new div with an ID of logo.

Now, let’s move over to the stylesheet. To style our #logo section elements. Here is the CSS code.
.logo
{
margin-top:20px;
border:none;
}
Coding the navigation
Still inside the #header #container, create a simple unordered list containing the navigation links. Here’s the code block for the navigation.

Styling the navigation
Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:
#header li
{
color:#959595;
list-style:none;
float:left;
margin-right:20px;
font-family:”Myriad Pro”,arial;
font-weight:bold;
font-size:24px;
}
#header li a
{
color:#959595;
text-decoration:none;
padding:10px;
}
#header ul
{
float:right;
margin-top:-40px;
}
#header li a:hover
{
background:#202020;
color:#d2d2d2;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
}
I added some styles to #header li such as the color (#959595), I removed the list style, changed the font family to Myriad Pro, the font weight to bold, the font size to 24px and floated the li elements without forgetting the marging right to make some space between li elements.
For the hover I used some CSS3 features like the border radius and I changed the background color to #202020.
Creating the featured box
Now we’ve finished with the header section, let’s head over to the content section.
Let’s add two new divs in this section, the first #featured (it will contain the featured section) and the other #paragraphs.

In the psd file as we did before, select the slice tool and slice the featured box after hiding the more projects button and the little text then save it under the name of featured.jpg.

In your HTML file add this code to the featured div to add the more project link and some dummy text:

MORE PROJECTS

Portfolio project, Jan 5th, 2010 Have you
ever wanted to create clean and nice portfolio design? In this tutorial I
will show you how to design clean blue portfolio layout. Have you ever wanted
to create clean and nice portfolio design? In this tutorial I will show you how
to design clean blue portfolio layout in Adobe Photoshop.

In the PSD file I will take the more project button and duplicate it and reverse the Gradient Overlay, slice both of the more project buttons and slice them(The dimensions are about 124px x 60px) and save the button under png-8 format and name it button.png.

Now we’ve got the images ready let’s head over to the CSS file and add this code.
#featured
{
background:url(images/featured.jpg) no-repeat;
height:381px;
margin-top:30px;
margin-left:80px;
}
#featured a
{
background:url(images/button.png);
height:30px;
width:124px;
text-indent:-9999px;
position:absolute;
margin-top:330px;
margin-left:180px;
}
#featured a:hover
{
background-position:0px 30px;
}
I will begin with explaining #featured: I set it’s background to the featured image that we have sliced, then I positioned it with some margins. For the more projects link I set the background to button.png the height 30px so we could get the top button, I removed the text with text-indent and positioned it with the margins. Don’t forget to set the button’s position to absolute. Now to get a nice hover effect I changed the background position.
Now I’m going to add some style to the dummytext element:
.dummytext
{
color:#d2d2d2;
width:245px;
margin-top:150px;
position:absolute;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:180%;
margin-left:290px;
}
.dummytext span
{
font-size:16px;
color:#191919;
font-weight:bold;
}
Creating the paragraphs
After we finished with the featured div let’s add some paragraphs to our content section.

BEAUTIFULWebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.

propecia no prescription

EFFECTIVEWebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.

FUNCTIONALWebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.

So our content section will looks like this:

MORE PROJECTS

Portfolio project, Jan 5th, 2010 Have you
ever wanted to create clean and nice portfolio design? In this tutorial I
will show you how to design clean blue portfolio layout. Have you ever wanted
to create clean and nice portfolio design? In this tutorial I will show you how
to design clean blue portfolio layout in Adobe Photoshop.

BEAUTIFULWebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.

EFFECTIVEWebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.

FUNCTIONALWebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.

After adding this code to your HTML go to your CSS file and add these styles to the paragraphs.
#paragraphs span
{
font-family:”Myriad pro”, Helvetica, sans-serif;
font-size:22px;
font-weight:600;
letter-spacing:-2px;
}
#paragraphs
{
margin-left:80px;
font-family:Arial, Helvetica, sans-serif;
color:#191919;
font-size:12px;
margin-top:15px;
}
.paragraph
{
width:250px;
margin-left:15px;
float:left;
}
Here is what you will end up with:

Slicing the footer
Now we finished with the header and te content sections and we will begin creating the footer section.
First, in your psd file hide every thing in the footer folder except the Footer and Footer texture layers, then slice the footer and save it as footer.jpg. You can take a look at this image below.

Then slice the Follow Us button and the birds image. Name the first one follow.png and the second bird.jpg.
Coding the footer
Our footer section will contain some text, a link to twitter and the birds image.
So here is the HTML code to add these blocks.

2010 © Fictional Design Studio. Design by Webdesignfan.

Follow us on Twitter
bird

Now, we style our footer section using the following styles (go to your stylesheet and place this code block in there).
#footer
{
background:url(images/footer.jpg);
height:71px;
margin-top:191px;
}
#footer p
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#959595;
position:absolute;
margin-top:30px;
}
#footer a
{
background:url(images/follow.png);
text-indent:-9999px;
position:absolute;
height:27px;
width:124px;
margin-left:730px;
margin-top:30px;
}
#footer img
{
float:right;
margin-top:10px;
}
I used footer.jpg as the background of the footer, then I added some styles to the text included in the footer (The p element).
For the follow link I used the same techniques that we applyed with the more project link, then for the bird image I floated it to the right and used the margin.
And we’re all finished!

Live Demo // Download the source files (0,7 MB)
Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.
Join SY0-201 online web designing course to learn how to cod a modern design studio from psd to html. Take advantage of the latest 70-680 tutorials and 642-902 study guide to learn different tips and techniques that you can use to design your web/blog page.
Path:



Comments
  1. There are broken links to “Live Demo // Download the source files”

  2. You really make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand. It seems too complex and very broad for me. I’m looking forward for your next post, I’ll try to get the hang of it!

  3. nice one i like it

  4. Fantastic website. A lot of helpful information here. I’m sending it to a few buddies ans additionally sharing in delicious. And certainly, thank you in your sweat!

  5. I really like the style of this website.

  6. Very simple guide to follow through and site looks like a pro. Can you fix the link as the link for the source code seems to be broken?

  7. Its a great tu but when I click on demo link there comes a “Error 404 – Not Found” page.

  8. Thank you so much for this…. Yah!!! was able to do a design based on this instruction.

  9. Hi!

    fantastic! but where’s the demo and download link?

  10. Excelente.. buen tutorial, very nice tutorials

  11. I like your blog.Very informative .