Converting PSD To HTML With Photo Shop Part 2

From PSD to HTML
Published on July 6th, 2007 by Joshua Bolduc

Learn how to slice up your design and then use CSS and HTML to turn it into a powerful web
interface.
Part Three: Setting the foundation.
Create two new files and name them interface.htm and stylesheet.css respectively.
Your project folder should look like this.
Note: Given the nature of operating systems, your icon graphics may not resemble mine.
Note: Creating web interfaces is a rather complicated process, therefore I’m not going to go into
every little detail but rather highlight the most important aspects of html and css.
Copy the following code and paste it into your interface.htm document.
view source
01.
02.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
03.<html>
04.<head>
05.<title>My Interface</title>
06.
07.
08.<link rel="stylesheet" type="text/css" href = "stylesheet.css"
media="screen" />
09.
10.</head>
11.<body>
12.
13.</body>
14.</html>
Now with this html code in, it’s time to think about how the layout is going to work.
Before you do any real CSS, think about the logic that you’re going to use. It’s best to have a
picture in your
mind before you start rather than begin with little thought as it’s easy to work yourself into a
corner.
helpful tip: When writing CSS, it’s best to start broad and then become more specific as you go
along. (Just like painting a picture).
Copy and paste this code into your html document between the body tags.
view source
01.
05.
09.<div class="site-wrapper">
10.
11.
15.
16.
20.
21.</div>
I can’t stress enough how important this first step is. It provides the structure that the rest of your
components will build on. You wouldn’t trust a house with a shaky foundation would you? The
same applies here.
Copy and paste the following code into stylesheet.css
view source
01./*==============================
02.GLOBALS
03.Sets the default document font size, family
04.and color
05.===============================*/
06.body
07.{
08.font-family:Arial;
09.font-size:12px;
10.color:#3f4a4e;
11.}
12./*==============================
13.SITE WRAPPER
14.===============================*/
15..site-wrapper
16.{
17.width:800px;
18.
19./* min-height lets your site grow vertically
20.(like in tables). */
21.min-height:600px;
22.
23./* By setting these to auto you are centering the
24.site */
25.margin-left:auto;
26.margin-right:auto;
27.
28.border:solid 1px black;
29.}
30./*==============================
31.HEADER WRAPPER
32.===============================*/
33..header-wrapper
34.{
35.width:800px;
36.height:54px;
37.
38.background:url('images/header_bg.gif');
39.
40./* css lets you designate how you want an image to
41.repeat. Along the x-axis, y-axis or not at all. */
42.background-repeat:repeat-x;
43.}
44./*==============================
45.BODY WRAPPER
46.===============================*/
47..body-wrapper
48.{
49.margin-top:3px;
50.
51./* floats are crucial to the creation of any
52.web interface. Every web developer must master
53.this concept. Don't worry I'll be writing a
54.tutorial about this a little later. <img
src="http://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gif"
alt=":)" class="wp-smiley"> */
55.float:left;
56.
57.width:800px;
59.}
60./*==============================
61.FOOTER
62.===============================*/
63..footer
64.{
65./* clears are the sisters to float, it's
66.time to meet the whole family <img src="http://www.bolducpress.com/wp-
includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> */
67.clear:left;
68.height:16px;
69.background:url(images/footer.gif);
70.}
Note: In the early stages of production like this, I highly recommend that you put a border on
every block element (div, table, h1, h2 etc. . ) that you create. It is much easier to visualize.
Open interface.htm in your browser, it should look something like this.
Now that we have a good base, let’s build the header.

Part Four: Building the Header
Paste the following code into interface.htm inside the header-wrapper tags.
view source
01.<div class="header-title"><img src="images/header_title.gif" alt="" /></div>
02.<div class="header-menu">
03.
04.
05.<ul>
06.<li><img src="images/icon_home.gif" alt="home" /></li>
07.<li><img src="images/icon_tutorials.gif" alt="tutorials" /></li>
08.<li><img src="images/icon_downloads.gif" alt="downloads" /></li>
09.<li><img src="images/icon_resume.gif" alt="resume" /></li>
10.<li><img src="images/icon_links.gif" alt="links" /></li>
11.<li><img src="images/icon_contact.gif" alt="contact" /></li>
12.</ul>
13.</div>
Above I created a list of images. Normally lists are displayed as vertical, bulleted entries but with
a little CSS magic we can turn it into a nice horizontel menu. Take a look at it now in the
browser before you go to the next step.
In stylesheet.css, under header-wrapper, copy and paste the following code.
view source
01./* this sets the position of the title.
02.header.gif goes here here */
03..header-title
04.{
05.float:left;
06.}
07./* This sets the position of the menu */
08..header-menu
09.{
10.float:right;
11.width:370px;
12.height:54px;
13.}
14.
15./* The Menu */
16./*Whey you follow a class definition with an html element (such
17.as ul) all styles that you apply will only affect that element.
18.So for instance, in this case you read it as "apply these
19.settings to every ul html element inside every div tag named
20.<strong>header-menu</strong>, but no other."
21.*/
22..header-menu ul
23.{
24.padding:0;
25.
26./* the removes the left margin */
27.margin:0;
28.
29./* this removes the bullet */
30.list-style:none;
31.}
32..header-menu li
33.{
34.float:left;
35.}
The header menu should look like this.
Now let’s move on to the portfolio navigation.

Part Five: Building the portfolio menu.
Copy and paste the following HTML into interface.htm between the body-wrapper div tags.
view source
01.<div class="portfolio-menu">
02.<h2>portfolio</h2>
03.<ul>
04.<li><a>In Progress</a></li>
05.<li><a>Design</a></li>
06.<li><a>3D</a></li>
07.<li><a>Traditional</a></li>
08.</ul>
09.</div>
Believe it or not that’s all the html code you need to make the menu! Now let’s do some CSS.
Copy and paste this into stylesheet.css
view source
01./*==============================
02.PORTFOLIO MENU
03.===============================*/
04..portfolio-menu
05.{
06.float:left;
07./*The width of the menu */
08.width:140px;
10.
11./*The font of all the text in the menu */
12.font-family:Arial;
13.}
14.
15./*The Portfolio Title */
16..portfolio-menu h1
17.{
18.margin:2px;
19.color:#3f4a4e;
20.font-size:18px;
21.}
22./* Like before we just apply some styles to the list */
23..portfolio-menu ul
24.{
25.margin:0;
26.padding-left:15px;
27.list-style:none;
28.}
29./* We have to apply a style to the links in the list, otherwise
30.they will default to the browser standard. (which is normally
31.blue with an underline.) */
32..portfolio-menu a
33.{
34.font-size:12px;
35.
36./* text-decoration removes the underline */
37.text-decoration:none;
38.
39.color:#3f4a4e;
40.}
41..portfolio-menu li
42.{
43.background:url(images/triangle-idle.gif);
44.background-repeat:no-repeat;
45.background-position:center left;
46.margin-bottom:5px;
48.border:solid thin black;
49.
50.}
51./* hover is a pseudo class, you can set styles for when
52.the user puts their mouse over an element. No Javascript
53.needed! */
54..portfolio-menu li:hover
55.{
56.background:url(images/triangle-active.gif);
57.background-repeat:no-repeat;
58.background-position:center left;
59.}
Save the document and view it in the browser, the menu should look like this.
Ok now let’s build the center content area.

Part Six: Building the content area
Note: I’m not going to completely recreate the content inside the panels because these sections
are dynamic and they would be populated at run time. Instead I’ll show you have to create the
panel make them ready to handle content.
Copy and paste the following into interface.htm under portfolio-menu make sure that it’s still
between the body-wrapper tags.
view source
1.
2.<div class="content-wrapper">
3.
4.
5.<div class="panel">
6.<div class="panel_title">home</div>
7.</div>
8.</div>
Copy and paste the following into stylesheet.css under portfolio-menu
view source
01./*==============================
02.CONTENT-WRAPPER
03.===============================*/
04..content-wrapper
05.{
06.float:left;
07.width:470px;
08.margin-right:5px;
09.}
10./*==============================
11.PANEL CONTENT
12.===============================*/
13..panel
14.{
15.margin-bottom:5px;
16.border:solid 1px #869ca4;
17.}
18./*The panel content */
19..panel_content
20.{
21.padding:2px;
22.background:#effaff;
23.}
24./* The panel title */
25..panel_title
26.{
27.height:16px;
28.font-size:14px;
29.color:#effaff;
30.padding:2px;
32.background:url(images/panel_bg.gif);
33.background-repeat:repeat-x;
34.background-position:center center;
35.}
Ok now let’s create the two right panels, you’ll find that this step is very easy.
Part Seven: Creating the right panels.
Copy and paste the following into interface.htm right after the content-wrapper div tag.
view source
01.<div class="right-wrapper">
03.<div class="panel_title">news</div>
04.<div class="panel_content" style="height: 210px;">Your content for news
goes here.</div>
05.</div>
06.</div>
08.<div class="panel_title">tutorials</div>
09.<div class="panel_content" style="min-height: 210px;">Your content for
tutorials goes here.</div>
10.</div>
Copy this into stylesheet.css after panel_title
view source
01./*==============================
02.RIGHT WRAPPER
03.===============================*/
04..right-wrapper
05.{
06.float:left;
07.width:180px;
09.}
Take a look at the interface in the browser. Congratulations! You have all your menus and
content areas ready for the world wide web!
Click for a larger view

Conclusion
In this tutorial I’ve introduced you to some very useful and important concepts.
• Separating your layout from your styles.
• Using div tags to block out your layout.
• Using wrappers to hold your sections.
• Using lists to create menus
These are constantly recurring techniques, use them, become comfortable with them.
I hope this was helpful, if you have any questions or suggestions feel free to contact me.
I’m accepting requests. If any of you have a question about Photoshop or PHP and would like to
see a tutorial, send me an email here. Make sure that you put “request” in the subject.

Converting PSD To HTML With Photo Shop Part 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Converting PSD To HTML With Photo Shop Part 2

Uploaded by

Copyright:

Available Formats

From PSD to HTML

Published on July 6th, 2007 by Joshua Bolduc

Now that we have a good base, let’s build the header.

Now let’s move on to the portfolio navigation.

Ok now let’s build the center content area.

Click for a larger view

You might also like