www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Wild West Wooden Sign Create an awesome old wild west wooden plank interface! Very Cool! 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!



    PixelXS.com - A quality tutorial and render website

    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.
    Header Design



    In this tutorial l will show you a how to create a header for a webpage. This technique will hopefully teach you a few tricks, as well as open your mind to some new ideas when designing your next web layout.
    Lets get started.
    Page 1 of 1

    Step 1.)
    Start a new document that is: 770 x 150 and fill the background layer with: #A7A78B





    Step 2.)
    Create a new layer. With the rectangular marquee tool, make the following selection:


    Fill this selection with: #859B50


    Double click this layer, and apply the following blending options:
    Gradient Overlay:


    Result:






    Step 3.)
    Next set your foreground to #DDE3D5, get out the pencil tool and change the size to 3 pixels:


    and draw the following line all the way across the page:






    Step 4.)
    Create a new layer, and with the rectangular marquee tool make the following selection for the navigation buttons:


    Now go to "Select->modify->smooth" with a setting of: 11 pixels


    Fill this selection with: #DBDAC8


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


    Gradient Overlay:


    Stroke:


    Result:






    Step 5.)
    Next add the text to your buttons. Heres what l used: Verdana Bold, 10 pt, #6F6A64








    Step 6.)
    Next get out the pencil tool again, set it to 2 pixels, and your foreground to white (#FFFFFF)


    And draw small dividers between each of your buttons:






    Step 7.)
    Next set your foreground color to #511424 set the pencil tool to 1 pixel. We're going to make some small arrow icons under the buttons.
    Zoom in real close by pressing the CTRL and the '+' key on your keyboard to zoom in good and close. Using the pencil tool draw this arrow one click at a time.
    There's 1 dot on top, 3 dots in the second line, and 5 dots at the bottom of the arrow.


    Result:






    Step 8.)
    Next I applied the logo and company name in the top left corner of the header.


    At this point the layout is pretty much done, just continue to refine and add some details. Here's how mine ended up looking after adding a little content, and a "techie" image.



    I hope you've enjoyed this tutorial, and that you've learned some new tricks & ideas.





    Related Tutorials:
        View Alien Embryo Alien Embryo
    This tutorial will explain the how the Alien Embryo render was created using pho ...
        View Classy Header Classy Header
    Learn how to create a simple, clean business header that will work great for nea ...
        View Contemporary Layout Contemporary Layout
    In this tutorial l will explain how l created this contemporary layout for a tra ...


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