www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
XP People Logo! Learn how to create those stylized XP Logos you see all over the place these days! Great Tutorial! read more...
Join our Mailing List to receive:
  • Site Updates
  • Photoshop Tutorials
  • Webmaster Tips
  • Hot Site Reviews
  • & much more...

  • Mailing List: Privacy Policy


    Affiliates
    Your Link Here

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



    IconzWorld - The best free icons on the net

    Pixel-EFX.net :: Where The Web & Mind Combine

    FSTutorials.com Photoshop Tutorials - Photoshop Cs Tutorials



    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 1 of 3

    Step 1.)
    Create a new document that is 778x440 in size. This is pretty much the maximum viewable window area of a computer set to 800x600. (which is what you should design most of your sites for, unless you're using "liquid css" techniques on your page). Fill the background with: #E9E9E9



    Step 2.)
    Create a new layer, and while using the rectangular marquee tool, make a selection like so:

    Go to "selection->modify->smooth" with a setting of: 10 pixels


    fill this selection with: #FF9A12




    Step 3.)
    Now with the rectangular marquee tool, make a selection like so:


    and tap "DELETE" on your keyboard to delete this portion of the box.
    This will give us a box with rounded corners on the left side, and perfect 90 degree angles on the right.




    Step 4.)
    Double click on this layer, and apply these layer settings:
    Inner Shadow


    Outer Glow


    Stroke:


    Here's what you should end up with:




    Step 5.)
    Next l found a nice "vacation" type photo (this one is a beach in Hawaii), and placed it on a new layer above this box. I also clipped the top right corner of the picture off with the polygon marquee tool just to add a little detail.


    I then applied these blending options to the photo:
    Inner Shadow:


    Stroke:




    Step 6.)
    Lets create an area to add a "special of the month" content box. Create a new layer, now using the rectangular marquee tool, make a selection like so, and go to: selection->modify->smooth with a setting of 3 pixels:


    Fill this selection with white:


    Next double click this layer, and apply the following blending options:
    Drop Shadow:


    Gradient Overlay:


    Stroke:


    Here's what you should end up with:


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



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