From Psd To HTML

What we will make

In this tutorial I’m going to show you how to take the design created for my
Fundamentals of Interface Design tutorial and turn that into a usable web interface.

What you will need

  • Adobe Photoshop.
  • The PSD File which can be downloaded below
  • A pure text editor. I like Notepad++.

The Source

Download the PSD and HTML files

A Note about WYSIWYG Editors

I don’t use WYSIWG editors like Adobe Dreamweaver. Therefore don’t be surprised if you find yourself doing a bit of coding. Don’t worry though, it won’t hurt too much :)

Part One: Visualizing the CSS and HTML.

Before I begin anything I take an objective look at my interface. What can I create using CSS/HTML? What do I need to slice? This saves me time and often gets me the cleanest results.

11_001

What sections do you see?
This is what I’m thinking to myself as I do this.
The following can be achieved with CSS
  • The interface size and placement.
  • The text and link colors, size, etc.
  • The panel placement, size, border and background color.
  • The borders on the icons.
  • The Horizontel line between sections in the body.
The following will need to be sliced up.
  • The header icons (including the active page icon).
  • The header graphics, including logo and “Part Digital Designs” text.
  • the header background color.
  • The Background gradient.
  • The gradient color of the panel headers.
  • The footer.
  • One of the navigation triangles.

Part Two: Slicing the interface.

I work simultaneously between slicing and CSS/HTML. This is fastest method I’ve found when working on a personal project. However if you are working in a group it’s best to keep each step separate.
Note: For the sake of this tutorial I’m going to stick with Photoshop. However, if you have it, I highly recommend Adobe Image Ready or Adobe Fireworks for slicing up your images.
Ok let’s get started.
Open the file that I’ve included for this tutorial.

Your First Slice

Press K to select the slice tool and draw a box around the logo and title as shown.

11_002

Right click this slice and click Edit Slice Options. Name it header_title and click OK.

11_003

Remember these two steps as we slice up the interface because from now on I’m not going to be as detailed
in my explanations.
Create another slice near the one you just made that is 1 pixel wide and name it header_bg. It should look like the image below.


11_004

Create a slice around the home icon (including the selcted graphic) and name it icon_home. Make sure it has a width of 60 pixels and a height of 54 pixels.

11_006
Repeat the process for the remaining icons.
Create a slice at the home panel header that is 1 pixel wide and 19 pixels high. Name it panel_bg
11_007

Create a slice around one of the triangles and name it triangle-idle. Give it a width and height of 13 pixels.
Quick Tip: Hold down Shift as you draw the slice and it will make a perfect square.
11_008
Create a slice around the entire footer and name it footer

11_009

Go to File > Save for web or devices.

11_010

Click for a larger view
Make sure that the image type is set to GIF
Click Save and make sure your settings match these.

11_011

Click Save
OK, we haven’t sliced up everything yet, but we have enough to get started. So minimize Photoshop for now and open up your favorite pure text editor.


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.
11_012

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.
01<!-- this sets the doc type -->
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<!-- linking your stylesheet document -->
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.
01<!--
02Start by blocking out the major sections of the website.
03Create the site wrapper, header, body etc.
04-->
05<!--
06Site Wrapper
07Always create a site wrapper, this helps with the overall size and position of your website.
08-->
09<div class="site-wrapper">
10
11<!--
12Header Wrapper
13This is where the logo, site title and top navigation will go
14-->
15
16<!--
17Body Wrapper
18this section is what holds the left navigation, center content and right panels
19-->
20
21<!--
22Footer
23as you might expect, this is the footer
24--></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
01/*==============================
02GLOBALS
03Sets the default document font size, family
04and color
05===============================*/
06body
07{
08font-family:Arial;
09font-size:12px;
10color:#3f4a4e;
11}
12/*==============================
13SITE WRAPPER
14===============================*/
15.site-wrapper
16{
17width:800px;
18
19/* min-height lets your site grow vertically
20(like in tables). */
21min-height:600px;
22
23/* By setting these to auto you are centering the
24site */
25margin-left:auto;
26margin-right:auto;
27
28border:solid 1px black;
29}
30/*==============================
31HEADER WRAPPER
32===============================*/
33.header-wrapper
34{
35width:800px;
36height:54px;
37
38background:url('images/header_bg.gif');
39
40/* css lets you designate how you want an image to
41repeat. Along the x-axis, y-axis or not at all. */
42background-repeat:repeat-x;
43}
44/*==============================
45BODY WRAPPER
46===============================*/
47.body-wrapper
48{
49margin-top:3px;
50
51/* floats are crucial to the creation of any
52web interface. Every web developer must master
53this concept. Don't worry I'll be writing a
54tutorial about this a little later. <img src="http://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">     */
55float:left;
56
57width:800px;
58min-height:530px;
59}
60/*==============================
61FOOTER
62===============================*/
63.footer
64{
65/* clears are the sisters to float, it's
66time to meet the whole family <img src="http://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">  */
67clear:left;
68height:16px;
69background: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.

11_013
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.
01<div class="header-title"><img src="images/header_title.gif" alt="" /></div>
02<div class="header-menu">
03
04<!-- making an HTML list -->
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.
01/* this sets the position of the title.
02header.gif goes here here */
03.header-title
04{
05float:left;
06}
07/* This sets the position of the menu */
08.header-menu
09{
10float:right;
11width:370px;
12height:54px;
13}
14
15/*  The Menu  */
16/*Whey you follow a class definition with an html element (such
17as ul) all styles that you apply will only affect that element.
18So for instance, in this case you read it as "apply these
19settings to every ul html element inside every div tag named
20<strong>header-menu</strong>, but no other."
21*/
22.header-menu ul
23{
24padding:0;
25
26/* the removes the left margin */
27margin:0;
28
29/* this removes the bullet */
30list-style:none;
31}
32.header-menu li
33{
34float:left;
35}
The header menu should look like this.

11_014

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.
1<div class="portfolio-menu">
2<h2>portfolio</h2>
3<ul>
4<li><a>In Progress</a></li>
5<li><a>Design</a></li>
6<li><a>3D</a></li>
7<li><a>Traditional</a></li>
8</ul>
9</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
01/*==============================
02PORTFOLIO MENU
03===============================*/
04.portfolio-menu
05{
06float:left;
07/*The width of the menu */
08width:140px;
09min-height:530px;
10
11/*The font of all the text in the menu */
12font-family:Arial;
13}
14
15/*The Portfolio Title */
16.portfolio-menu h1
17{
18margin:2px;
19color:#3f4a4e;
20font-size:18px;
21}
22/* Like before we just apply some styles to the list */
23.portfolio-menu ul
24{
25margin:0;
26padding-left:15px;
27list-style:none;
28}
29/* We have to apply a style to the links in the list, otherwise
30they will default to the browser standard. (which is normally
31blue with an underline.) */
32.portfolio-menu a
33{
34font-size:12px;
35
36/* text-decoration removes the underline */
37text-decoration:none;
38
39color:#3f4a4e;
40}
41.portfolio-menu li
42{
43background:url(images/triangle-idle.gif);
44background-repeat:no-repeat;
45background-position:center left;
46margin-bottom:5px;
47padding-left:15px;
48border:solid thin black;
49
50}
51/* hover is a pseudo class, you can set styles for when
52the user puts their mouse over an element. No Javascript
53needed! */
54.portfolio-menu li:hover
55{
56background:url(images/triangle-active.gif);
57background-repeat:no-repeat;
58background-position:center left;
59}
Save the document and view it in the browser, the menu should look like this.

11_015

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.
1<!-- Holds the panel -->
2<div class="content-wrapper">
3
4<!-- The panel -->
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
01/*==============================
02CONTENT-WRAPPER
03===============================*/
04.content-wrapper
05{
06float:left;
07width:470px;
08margin-right:5px;
09}
10/*==============================
11PANEL CONTENT
12===============================*/
13.panel
14{
15margin-bottom:5px;
16border:solid 1px #869ca4;
17}
18/*The panel content */
19.panel_content
20{
21padding:2px;
22background:#effaff;
23}
24/* The panel title */
25.panel_title
26{
27height:16px;
28font-size:14px;
29color:#effaff;
30padding:2px;
31padding-left:4px;
32background:url(images/panel_bg.gif);
33background-repeat:repeat-x;
34background-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.
01<div class="right-wrapper">
02<div class="panel">
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>
07<div class="panel">
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
1/*==============================
2RIGHT WRAPPER
3===============================*/
4.right-wrapper
5{
6float:left;
7width:180px;
8min-height:530px;
9}
Take a look at the interface in the browser. Congratulations! You have all your menus and content areas ready for the world wide web!

11_016
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

No comments:

Post a Comment

Subscribe to: Posts (Atom)