Sopov.com freelancer, html and css tips and tricks

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

In this tutorial i'll show how to create simple PSD design in Photoshop cs3 and code into HTML. This is simple design for beginners.

Download PSD

Download HTML/CSS

View Demo

Introduction:

Difficulty type: Easy

In this lesson we will make simple blog template with:

1. Flexible centered layout;
2. With site width: 950px (this means people with 15" monitors don't have to scroll sidewards);
3. And right sidebar;

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:

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;

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;

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

• 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

• 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

Conclusion:

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