www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Hypno Tunnel Effect Use this awesome tutorial to create 3D backgrounds for your next project! Awesome Effect 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!



    LearnIt2 | Adobe Photoshop, Adobe Illustrator and Adobe ImageReady Tutorials

    LooseMoose52





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

    Step 7.)
    Next make a new layer, get out the rectangular marquee tool and make a selection like this, and once again go to "selection->modify->smooth" with a setting of 3


    Fill this selection with #FFFFFF/white:


    Double click this layer, and apply the following blending options:
    Outer Glow:


    Gradient Overlay:




    Stroke:




    Step 8.)
    Next using the pencil tool, set your foreground color to #000000 / Black, and draw a dashed line down the content box like so:


    Drop the opacity of this layer to 17 percent.


    Press CTRL + J on your keyboard to duplicate this layer.
    Then press CTRL + I to invert the color. This should change the color from black, to white.
    Press 'V' on your keyboard to get out the "move tool" and tap the Right arrow -> key on your keyboard once to nudge this line over to the right 1 pixel.

    Finally change the opacity of this layer to 68 percent


    Here's what you should have:




    Step 9.)
    Next l found a stock photo of a lounge chair to add a little depth, and positioned it like so:


    Design Tip: Notice that l have the chair facing inward toward the center of the page, as apposed to outward? Try to position images and elements in your layouts so that they drive the readers eye into your content, and not away from it.



    Step 10.)
    Next we'll add a button to this area, create a new layer and using the polygon marquee tool make a selection like so:


    Fill this selection with: #FFAB14


    Double click this layer, and apply the following blending options:
    Outer Glow:


    Gradient Overlay:




    Stroke:/note>


    Here's what you should end up with:




    Step 11.)
    Next l'm going to add a logo to the mix.

    Here is a simple logo (simple is good when it comes to logo's... look at nike if you don't believe me.)


    Design Tip: You want to place your logo & company name as close to the TOP LEFT corner of the page as possible. This is the very first thing that the human eye looks at when viewing a webpage. And what's more important than your logo and company name? That's right, nothing is.

    Next l added a simple drop shadow to the logo, via the "blending options":


    result:


    Next l held CTRL and clicked on the layer with my logo to make a circular selection of it, created a new layer and filled it with a black to white gradient, and then drop the opacity of the layer to around 20 percent.





    result:


    Finally l created a new layer got out the eclipse marquee tool and made a selection as shown, and filled it with a white to transparent gradient. The opacity of this layer was also dropped to around 75 percent.


    Result:




    Step 12.)
    Okay, we're getting there. Next create a new layer, and make a selection like so with the rectangular marquee tool, and just like before go to "selection->modify->smooth" with a setting of around 4 pixels.


    Fill this selection with white #FFFFFF / white.


    Double click this layer, and apply the following blending options:
    Outer Glow:


    Gradient Overlay:




    Stroke:


    Result:


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



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