Converting Psd to HTML With Photo Shop Part 2

8/14/2019 Converting Psd to HTML With Photo Shop Part 2

1/10

From PSD to HTMLPublished 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 Im not going to go intoevery little detail but rather highlight the most important aspects of html and css.

Copy the following code and paste it into yourinterface.htm document.

view source01.02.03.

04.05.My Interface

06.07.

08.09.10.11.
http://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/strict.dtdhttp://www.bolducpress.com/tutorials/from-psd-to-html/2/


2/10

12.13.14.

Now with this html code in, its time to think about how the layout is going to work.

Before you do any real CSS, think about the logic that youre going to use. Its best to have a

picture in yourmind before you start rather than begin with little thought as its easy to work yourself into acorner.

helpful tip: When writing CSS, its best to start broad and then become more specific as you goalong. (Just like painting a picture).

Copy and paste this code into your html document between the body tags.

view source01.

05.

09.10.11.

15.16.

20.21.

I cant stress enough how important this first step is. It provides the structure that the rest of yourcomponents will build on. You wouldnt trust a house with a shaky foundation would you? Thesame applies here.

Copy and paste the following code into stylesheet.css

view source01./*==============================02.GLOBALS03.Sets the default document font size, family04.and color05.===============================*/06.body07.{
http://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.bolducpress.com/tutorials/from-psd-to-html/2/


3/10

08.font-family:Arial;09.font-size:12px;10.color:#3f4a4e;11.}12./*==============================13.SITE WRAPPER14.===============================*/15..site-wrapper16.{17.width:800px;

18.19./* min-height lets your site grow vertically20.(like in tables). */21.min-height:600px;

22.23./* By setting these to auto you are centering the24.site */25.margin-left:auto;26.margin-right:auto;

27.28.border:solid1pxblack;29.}30./*==============================31.HEADER WRAPPER32.===============================*/33..header-wrapper34.{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 to41.repeat. Along the x-axis, y-axis or not at all. */42.background-repeat:repeat-x;43.}44./*==============================45.BODY WRAPPER46.===============================*/47..body-wrapper48.{49.margin-top:3px;

50.51./* floats are crucial to the creation of any52.web interface. Every web developer must master53.this concept. Don't worry I'll be writing a54.tutorial about this a little later. */55.float:left;

56.57.width:800px;58.min-height:530px;59.}60./*==============================
http://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gifhttp://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gif


4/10

61.FOOTER62.===============================*/63..footer64.{65./* clears are the sisters to float, it's66.time to meet the whole family */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 onevery 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, lets build the header.

Part Four: Building the HeaderPaste the following code into interface.htm inside the header-wrapper tags.

view source01.

02.03.04.05.

06.07.08.09.
http://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gifhttp://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gifhttp://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gifhttp://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gifhttp://www.bolducpress.com/tutorials/from-psd-to-html/2/


5/10

10.11.12.13.

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 thebrowser before you go to the next step.

In stylesheet.css, underheader-wrapper, copy and paste the following code.

view source01./* this sets the position of the title.02.header.gif goes here here */03..header-title04.{05.float:left;06.}07./* This sets the position of the menu */08..header-menu09.{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 (such17.as ul) all styles that you apply will only affect that element.18.So for instance, in this case you read it as "apply these19.settings to every ul html element inside every div tag named20.header-menu, 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 li33.{34.float:left;35.}

The header menu should look like this.

Now lets move on to the portfolio navigation.

Part Five: Building the portfolio menu.
http://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.bolducpress.com/tutorials/from-psd-to-html/2/


6/10

Copy and paste the following HTML into interface.htm between the body-wrapper div tags.

view source01.02.portfolio03.04.In Progress05.Design06.3D07.Traditional08.09.

Believe it or not thats all the html code you need to make the menu! Now lets do some CSS.

Copy and paste this into stylesheet.css

view source01./*==============================02.PORTFOLIO MENU03.===============================*/

04..portfolio-menu05.{06.float:left;07./*The width of the menu */08.width:140px;09.min-height:530px;

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 ul24.{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, otherwise30.they will default to the browser standard. (which is normally

31.blue with an underline.) */32..portfolio-menu a33.{34.font-size:12px;

35.36./* text-decoration removes the underline */37.text-decoration:none;

38.39.color:#3f4a4e;


7/10

40.}41..portfolio-menu li42.{43.background:url(images/triangle-idle.gif);44.background-repeat:no-repeat;

45.background-position:centerleft;

46.margin-bottom:5px;47.padding-left:15px;

48.border:solidthinblack;49.50.}51./* hover is a pseudo class, you can set styles for when52.the user puts their mouse over an element. No Javascript53.needed! */54..portfolio-menu li:hover55.{56.background:url(images/triangle-active.gif);57.background-repeat:no-repeat;

58.background-position:centerleft;

59.}Save the document and view it in the browser, the menu should look like this.

Ok now lets build the center content area.

Part Six: Building the content areaNote: Im not going to completely recreate the content inside the panels because these sectionsare dynamic and they would be populated at run time. Instead Ill show you have to create thepanel make them ready to handle content.

Copy and paste the following into interface.htm underportfolio-menu make sure that its stillbetween the body-wrapper tags.

view source1.2.3.4.

5.6.home7.8.
http://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.bolducpress.com/tutorials/from-psd-to-html/2/


8/10

Copy and paste the following into stylesheet.css underportfolio-menu

view source01./*==============================02.CONTENT-WRAPPER03.===============================*/04..content-wrapper

05.{06.float:left;07.width:470px;08.margin-right:5px;09.}10./*==============================11.PANEL CONTENT12.===============================*/13..panel14.{15.margin-bottom:5px;

16.border:solid1px#869ca4;17.}

18./*The panel content */19..panel_content20.{21.padding:2px;22.background:#effaff;23.}24./* The panel title */25..panel_title26.{27.height:16px;28.font-size:14px;29.color:#effaff;30.padding:2px;31.padding-left:4px;32.background:url(images/panel_bg.gif);33.background-repeat:repeat-x;

34.background-position:centercenter;35.}

Ok now lets create the two right panels, youll 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 source01.

02.03.news04.Your content for newsgoes here.05.06.

07.08.tutorials


9/10

09.Your content fortutorials goes here.10.

Copy this into stylesheet.css afterpanel_title

view source

01./*==============================02.RIGHT WRAPPER03.===============================*/04..right-wrapper05.{06.float:left;07.width:180px;08.min-height:530px;09.}

Take a look at the interface in the browser. Congratulations! You have all your menus andcontent areas ready for the world wide web!

Click for a larger view

ConclusionIn this tutorial Ive 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.
http://www.bolducpress.com/tutorials/from-psd-to-html/2/http://www.bolducpress.com/wp-content/uploads/2007/07/tutorial-11/interface.htmhttp://www.bolducpress.com/tutorials/from-psd-to-html/2/


10/10

Im accepting requests. If any of you have a question about Photoshop or PHP and would like tosee a tutorial, send me an email here. Make sure that you put request in the subject.
http://www.bolducpress.com/contact/http://www.bolducpress.com/contact/

Documents

Converting Psd to HTML With Photo Shop Part 2