Transform your graphical site designs into fully-fledged web templates

 

 

 

The purpose of this tutorial is to transform a Photoshop document into a working web interface. We are going to focus on exporting ready-made imagery and working it into a structured HTML document with additional CSS styling. Photoshop plays a very important role in web design and is favoured by most web designers. Although with CSS3 now in the mix people are under the assumption that we don‘t need to rely on Photoshop as much as we did in the past, this is not the case since CSS3 is not fully supported in all browsers as of yet, which means we won‘t be putting Photoshop to bed for a while. It will have its role in web design for a long time to come as it is such a great tool for creating graphics. The more conident you become at transforming your Photoshop documents to HTML the easier you’ll ind it and realise the two go hand-in-hand in the world of web design.

 

Author: Lee Grant | Tutorial Files

 

01. Getting started

 

 

To start you’re going to need to create a new folder and give it a name, something like ‘website’ will do. Now inside this folder create two more, named ‘images’ and ‘css’. This is where you will be saving all of your files and assets which you will eventually create from this tutorial.

 

 

02. Cut the logo

 

 Open up your Photoshop document and set each group and any layers not contained in a group to invisible by clicking the eye icon beside the layer. Be sure to leave the ‘logo’ group visible. Click Image>Trim then trim away any transparent pixels and save your image as logo.png to your images directory.

 

 

03. Background image

 

 

 

 The next step will be to crop the background image down to size, so set all groups to invisible (done using the eye icon which can be found next to the folder) except the background image. You then need to crop from the top of the page to about 300 pixels down and roughly 10-15 pixels wide, and then save this as a .png.

 

04. Some XHTML

 Now you have the structure for your folders set up, move on to some xhtml to prepare the header section so you can place your images in once ready. So next open up Dreamweaver (or your favourite text editor) and copy the following code into a new index. html and save this to your ‘website’ directory. The full code for this step can be found on the disc.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=utf-8” />
<link rel=”stylesheet” href=”css/style.css” media=”all” />
<title>PSD to XHTML</title>

 

 05. Welcome box image

  

 

 Back in Photoshop, extend your ‘welcome box’ layer by clicking the arrow icon, you need to set the dummy paragraph to invisible by clicking the eye icon. Now crop from the top left all the way to the right and leave about 5px from the bottom and save this image as welcome-bg.png.

 

 

 

06. Welcome box small image

 

 

 

Follow the same process as step five, but this time you will need to crop from the bottom of your welcome box upwards. So select the Crop tool and crop from the bottom of the box up to around four or five pixels high. You can then save this image as welcomebg- bottom.png.

 

 

07. Let’s style

The markup and images are all set up now for the heading section of the page so all you need to do is add some styling to add some colour and position your elements properly. Open up Dreamweaver and create a new .css file and insert the following code (which is included in full on the disc). Once done save the file as ‘style.css’ and place it in the ‘css’ folder.

 

body { margin:0; padding:0; font-family:
Arial, Helvetica, sans-serif;
font size:12px;
color:#959595;
background: #ececec url(../ images/bg.png) repeat-x; }

 

/***** NAVIGATION *****/
#nav_container { backgroundcolor:#373737;
width:100%; }
#nav { width:950px;
height:40px;

 

 

08. More html

 

Next you need to add some more html to the index.html document, this will essentially place all of the different elements on the page to which you will then

need to slice up your thumbnails in Photoshop and add CSS styles to position the new divs. The full code for this step is included on the disc.

 
<div id=”services_holder”>
<div id=”services”>
<div class=”services-block”>
<img src=”images/social.png”alt=” Socialmarketing” />
<h2><a href=”#”>Social marketing</a></h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s

09. Slicing the thumbnails

 

 


Open up your Photoshop document again and select the Crop tool. You now need to crop down the first thumbnail image being extra careful to not crop out any of the drop shadow, so it is best to allow roughly five pixels around the edges and considerably more at the bottom.

10. Service block styling
With all of your images and markup in place, the page isn’t much to look at. You can fix all of this with the help of some CSS. You can float each containing div to the left which will position your divs side-by-side. Full code for this step can be found on the disc.

/***** ABOUT *****/
#about_container { background:#ececec url(../images/about-line.png) repeat-x; ~
width:100%;
padding-bottom:25px; }
#about { width:950px;
margin:0 auto;
padding:25px 0 0 0; }
#about_me_box { width:479px;
background:#000 url(../images/aboutbg.png);
padding:60px 10px 0 10px;
float:left;
position: relative; }

11. HTML  divs

Again you can insert your markup into your html document with all of your image tags in place ready to crop down the images afterwards. Notice that
we use empty divs with the class “clear” in our markup, these are essential as they play a part in keeping divs in position.

<div id=”about_container”>
<div id=”about”>
<div id=”about_me_box”>
<p>Lorem Ipsum is simply dummy text of
the printing and typesetting industry.
Lorem Ipsum has been the industry’s
standard dummytext ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a type
specimen book.</p>
<p><span><a href=”#”>Go on … read more</
a></span></p>
<img src=”images/about-bg-bottom.png”
alt=”About bottom” /> </div>
<div id=”blog”>
<img src=”images/thoughts.png” alt=”My
thoughts” />

12. About box background

 

 


You can use the same technique here as you did for cropping the background for the welcome box. Switch over to Photoshop and select the “About me
box” group, crop from the top left to five pixels from the bottom, save this image then hold Ctrl/Cmd+Z to go back, this time crop the bottom of the image and save as a new image.

13. Blue button

For the button you need to create two images, so in Photoshop hide the layer over the button which contains text. Crop from the left of the button to the
right, leaving about ten pixels to the right. Save this image and press Ctrl/Cmd+Z to undo, and crop from the right to the left leaving ten pixels and save this image.

14. Blog title image

 

 

You have a little bit more cropping to do before you can close up the Photoshop document. In Photoshop select Crop from the Tools palette, and crop
out the text which says “My thoughts…” and save this to the images folder as thoughts.png.

15. Social networking buttons

 

 

All you have left now is to crop the social networking buttons and you’re all done, so select the Crop tool again and crop around each of the buttons
individually and save them to the images folder.

You can see in the illustration how to do this.

More Photoshop Web Tutorials

UBlogger
Latest posts by UBlogger (see all)

About The Author

UBlogger

This blog and my writing skills dedicated to all youth of Pakistan. To improve their national awareness to build Pakistan.

See author's posts