Convert Photoshop themes into HTML pages
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 con ident 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. The code for this step is on the disc.
<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.
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
High quality and real life tutorial. Thanks, for this excellent tutorial about Photoshop and web design.
nice tutorial. always good to see some people sharing their knowledge.
Very good tutorial, some handy tips in there.
Thanks for sharing!
High efficient works! Really the work is excellent.
Really good piece of writing. Really simple… I’ve bookmarked this to give it a try when I buy the CS5 suite!
Thank you.
Hello, thanx for sharing this very good looking design but why are you croping 5 pixels from the bottom from the “welcome box image” and the “about box”?
What do I have to add make the My Thoughts blog work? Can I just link it to my blog?
If I were using SiteGrinder where would I put that style.css ?
Why use the crop tool? I find slices a much better way of getting my images ready for webpages.
I have the same queries, I’m not sure why we’re cropping 5 pixels from the bottom and could someone explain the difference between cropping and slicing? Cropping seems to me a slower, more painful way of getting to the same goal?
Great tutorial describing how to convert photoshop theme in HTML. Pages. The great thing about the article is the visual image presentation given with some coding. Thanks for the tips.
Thank you! Marvelous job. Towards full integration of brain capacity … :0)
Almost the exact topic I was searching for. Maybe even more than I expected. Thanks again.
Very good tutorial
Hello would you mind sharing which blog platform you’re working with? I’m going to start my own blog in the near future but I’m having a tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking
for something unique. P.S My apologies for getting off-topic but I had to ask!
by Dawn see my site Poppy
Ahaa, its good conversation regarding this piece of
writing here at this weblog, I have read all that, so now me also commenting here.
by Sherry see my site Chelsey