PSD to HTML. How to design my own website and add it to HTML

Posted on: March 29th, 2010 by admin No Comments

Step 1. How it looks:

So our example web page is going to be based on a simple blog theme, with a WordPress blog-like structure similar to that of the default WP themes. It’s going to look something like this:

PSD to HTML

The idea here is not for you to reproduce my example, but for you to be able to follow along and apply the techniques to your own designs, hopefully learning a thing or two about the underlying concepts.

Step 2. Photoshop

We’re going to keep the Photoshop use here to a bare minimum, Usually I mockup an entire design in Photoshop before coding, but here I’m just going to generate a basic layout, and worry about the content later. This is an example of a different workflow, it will make more sense as we go along.

Page Layout

As I wrote above, i decide to make website 950px wide, with right sidebar’s 250px wide and main content 700px wide. I think its optimal size for our web blog.

So, create new PSD document with Width: 1100px and Height: 1000px, with background color: # 556666

Create body background with gradient color from # 8aa295 to # 556666;

PSD to HTML

Create Header with width: 950px – gradient color from # ff8d00 to # d80e00;

Main Menu with width: 950px – background color # 000000;

Side bar – background color # edeeee

Bottom Menu with width: 950px – background color # b8fafd;

Copyright with width: 950px – background color # 000000;

PSD to HTML

Font Character

Login/Logout
- Welcome text:
  - Font: Verdana
  - Font Size: 12pt
  - Color: # FFFFFF (White)
  - Link color: # 333333
  - Text decoration: underline
Header
- My Blog Name:
  - Font: Verdana
  - Font Size: 30pt
  - Color: # FFFFFF (White)
- My Blog description:
  - Font: Verdana
  - Font Size: 14pt
  - Color: # 000000 (Black)
Main Menu
- Menu Links
  - Font: Verdana
  - Font Size: 18pt
  - Color: # cccccc
  - Link color: # cccccc
  - Text decoration: underline-none

PSD to HTML

Content
- Article Title
  - Font: Verdana
  - Font Size: 24pt
  - Color: # 000000 (Black)
- Autor
  - Font: Verdana
  - Font Size: 11pt
  - Color: # 666666
  - Link color: # ff3300
  - Text decoration: underline-none
- Publish Date
  - Font: Verdana
  - Font Size: 11pt
  - Color: # 666666
- Content
  - Font: Verdana
  - Font Size: 14pt
  - Color: # 333333
  - Link color: # ff3300
  - Text decoration: underline-none
- Blockquote
  - Font: Verdana
  - Font Size: 14pt
  - Color: # 333333
  - Font style: italic
- Tags
  - Font: Verdana
  - Font Size: 12pt
  - Color: # 666666
  - Link color: # cccccc
  - Text decoration: underline
Sidebar
- Sidebar Titles
  - Font: Verdana
  - Font Size: 14pt
  - Color: # 666666
- Sidebar Text/Links
  - Font: Verdana
  - Font Size: 12pt
  - Color: # ff3300
  - Link color: # ff3300
  - Text decoration: underline-none

PSD to HTML

Bottom Menu
- Bottom Titles
  - Font: Verdana
  - Font Size: 14pt
  - Color: # 333333
- Bottom Text/Links
  - Font: Verdana
  - Font Size: 12pt
  - Color: # 339999
  - Link color: # 339999
  - Text decoration: underline-none
Copyright
- Copyright text
  - Font: Verdana
  - Font Size: 11pt
  - Color: # cccccc

PSD to HTML

Conclusion:

In this tutorial we made simple design for our new blog site, next lesson we well add PSD design to HTML code.

Front-end Web Developer | Tampa, FL