Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Complete Render Layout Massive tutorial that shows you how to make a render layout from start to finish.. HUGE! A must see! 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!

    PSD HOUSE / Photoshop Tutorials

    Windows GUI MODS

    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:


    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:



    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.


    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^