From PSD to HTML (Convert template * .psd to HTML site design)

What you need:

• Adobe Photoshop .
  
• PSD lesson file Fundamentals of Interface Design . In case you did not complete this lesson, then the PSD file you can download any other picture
  
• Poor text editor. I love Notepad ++
  

Note : I do not use dreamweaver . Although this is an excellent application, I prefer to write code from scratch, manually.

Part one: Visualization of CSS and HTML.

Before I start doing anything, I'm looking at the interface. What can I do using CSS / HTML ? What do I need to cut? This saves time and very often leads to excellent results.

What sections do you see?

That's what I think about when I do this:

The following can be achieved using CSS

• The size of the interface and its placement.
  
• The color of text and links, their size, etc.
  
• Placing the panels, their size, frames and background color.
  
• Frames around the icons.
  
• The horizontal line between the sections in the body.
  

I need to cut the following

• Icons in the cap (including the icons of the active page).
  
• Graph of the cap, including the logo and the inscription "Part Digital Designs" .
  
• Background hats.
  
• The background of the whole site.
  
• Gentle background of the caps of panels.
  
• Footer (bottom of site)
  
• One of the triangles of navigation.
  

Part two: Cutting the interface.

I'm working in parallel, cutting and composing CSS / HTML code. This is the fastest method I've tried, working on my projects. However, if you work in a group, it is best to do each procedure separately.

Note : I will use Photoshop throughout this tutorial. However, for cutting, I recommend that you use Adobe Image Ready or Adobe Fireworks , unless you have these programs.

Well, let's get started!

Open the PSD that I posted at the beginning of this tutorial.

The first fragment of your cutting.

Press K to select the Slice Tool and draw a selection around the logo and site name, as shown in the figure.

Right-click the fragment and select Edit Slice Options . Name this fragment header_title , then click OK .

Remember these two steps, since from now on I will be less detailed in my explanations.

Create another slice-wide 1px width near what you just did and name it header_bg . You should get it as in the picture below.

Create a circle around the home icon (including the picture of the house) and name it icon_home . Make sure that the selection is 60X54px .

Repeat this process for the remaining icons.

Create a selection near the label on the home panel, 1px wide and 19px high . Name it panel_bg .

Create a selection around one of the triangles and name it triangle-idle . Make sure the length and height of this selection is 13px .

A small clue: Hold down the Shift key while drawing a selection and you get the right square.

Create a selection around the entire footer and name it footer .

Save for the web ( File > Save for web or devices ).

Make sure the type of the image is set to GIF .

Make sure the settings are the same as those in the picture and click Save .

Click Save .

Well, we have not cut everything yet, but we already have enough graphics to start. Fold the photoshop and open your favorite poor text editor.

Part Three: Laying the foundation.

Create two new files and name them interface.htm and stylesheet.css respectively

The folder with your project should look something like this.

Note : Do not forget about the difference in operating systems, you can have completely different icons.

Note : Creating a web interface is not an easy process, I can not go into all the details, since this is a whole book, but I'll try to tell you about the most important aspects of html and css .

Copy and paste the following code into the interface.htm file.

Before writing CSS code, think about the logic that you will use. It is best to have a picture in your head before you start, than start with a small idea of ​​what and how it should look, since you can very easily get yourself into a dead end.

Useful tip : When writing CSS , it's best to start from the framework and then gradually approach more difficult tasks, like drawing pictures. First, weak boundaries are applied, and then more and more detailed.

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

Copy and paste the following code into stylesheet.css