Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Classic Button! Learn how to create a stable button design used all over the net. Simple but effective! read more...
Join our Mailing List to receive:
  • Site Updates
  • Photoshop Tutorials
  • Webmaster Tips
  • Hot Site Reviews
  • & much more...

  • Mailing List: Privacy Policy

    Your Link Here

    www.VidPit.com: Funny, Cool & Sexy videos!

    Kostenloses für den Webmaster

    Link to us
    ( Link to PhotoshopTower.com )

    wholesale computers

    PhotoshopForce.com - Photoshop Tutorials

    Site By: Coastal Web Innovations

    Some web hosting solutions you can find yourself on WHG and a list of
    web hosting companies.
    Contemporary Layout

    In this tutorial l will explain how l created this contemporary layout for a travel agency. What makes this site contemporary? Simply put, the layout is modern. It breaks away from the traditional "header on top, then navigation, then content, then footer" mold that most sites are built around, and makes great use of the space given in the users viewable window area to stuff as much content on the screen as possible. The layout is very different than any other site, while pleasing to the eye, and easy to understand and use.

    click to enlarge
    click to enlarge

    The purpose of this tutorial is to both teach you some techniques used for website design, as well as to give you some ideas about how to break the mold and create a truly unique layout. Let's get started.

    Go To Page: [ 1 2 3 ]
    Page 3 of 3

    Step 13.)
    Next I used the same technique used in step #8 and created a "dashed divider" for my content area.

    Step 14.)
    Next we'll add some "content boxes" for the right sidebar.
    Create a new layer, and using the rectangular marquee tool, make a selection like so:

    Fill this selection with #AAB2BE

    Next I used the elliptical marquee tool to make a selection like so over my content box's corner, and pressed delete to create an inverted curved corner:

    Design Tip: If you hold down the SHIFT key while drawing your circle selection it will ensure that you get a perfect circle.

    Tap delete:

    Next draw a circle the same size over the right corner, and tap delete as well:

    Step 15.)
    Go ahead and get out your marquee selection tool again, and make a selection like so, 1 pixel bellow the content header box we just created.

    Fill this selection with: #DDE0E3

    Step 16.)
    Set your foreground to: #AAB2BE and get out the pencil tool.
    Draw a line 1 pixel bellow the box we just made to give it some depth like so:

    Here's how my content box looks:

    Step 17.)
    Next l added my company name to the page in a few spots, and replicated the logo. This helps drill the name of your company, and your logo into the head of the user sub-consciously. The font used here is called Bitstream Vera Serif it is available for free download here. I also went ahead and added a few buttons to the page that l can use once content is added.
    Here's how the layout looks before being sliced, without any refining.

    Step 18.)
    After spending some time refining, and adding small detail to the page, such as a diagonal background, and a few other small hubs here and there, here's what l've got:
    click to enlarge
    click to enlarge

    So the only thing left to do is slice the layout up, reassemble it in your favorite HTML editor (l'm an old school fan of NotePad myself...).
    In any event, here is how my final page turned out.
    Looks pretty good in my opinion:
    click to enlarge
    click to enlarge
    Good luck, and l hope you've taken away some good techniques, and ideas form this tutorial!

    Home | Tutorials | About Us | Services | Contact Us | Affiliates | Search | SM | Top^