www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Shatter Background Learn how to create an abstract shatter background that looks great in signature/banner backgrounds. This is a very quick, and easy technique that anyone can do. 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!



    Pure Photoshop - Adobe Photoshop Center.

    titaniumWG.com .::. SMF Skins | Invision Forum Skins | Free MP3 Ringtones

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



    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.
    Business Header
    Go To Page: [ 1 2 ]


    (Click to enlarge)
    In this tutorial you will learn how to create a clean business header for your website. You will learn a handful of tips and tricks used by the professionals when designing clean business headers for clients. Lets get started.
    Page 2 of 2

    Step 9.)
    Create a new layer, and set your foreground color to: #EEEEEE. Get out the pencil tool and set it up like so:


    Draw a line all the way across the entire canvas about 3 pixels bellow the box we'd just created in the previous step.
    Result:






    Step 10.)
    Now we'll make the buttons. Create a new layer. Make the following seleciton with the rectangular marquee tool somewhere on your canvas were you'd like your button:


    Go to Select->Modify->Smooth with a setting of 3 pixels:


    Fill this selection with #F3F3F3 and press CTRL + D on your keyboard to deselect the area:


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


    Outter Glow:


    Stroke:


    Result:






    Step 11.)
    Next duplicate your button layer by pressing CTRL + J then using the move tool to move your buttons to the lef tor right.
    TIP: Holding SHIFT while you move the button will ensure that it stays in line with the other button(s).
    Result:






    Step 12.)
    Next we'll add the text to our button(s). Set your foreground color to: #575757
    and apply text to your buttons.
    The font used here is an 11pt verdana bolded.






    Step 13.)
    Next we'll create a spot for the company logo to be placed. Create a new layer on top of all other layers:


    Make the following selection with the rectangular marquee tool:
    (notice l decided to spread the buttons out a little bit, l thought they needed more space between them...)

    (Click to enlarge)
    Go to Select->Modify->Smooth with a radius of 4 pixels:


    Fill this selection with an off-white (#FEFEFE) and press CTRL + D on the keyboard to deselect.


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




    Result:






    Step 14.)
    Next apply your company logo, and name in this area. Notice that the logo and company name belongs in the top left corner of the page this is the first thing the user's eye sees when he/she views the page. This is a very important design technique for any business site. Brand that company logo.


    The font used for the comany name is called Alexis it is available for free download here.





    Step 15.)
    At this stage you want to continue to refine the header design, here l've added a few small details to the buttons. Just basic circles on either side with a slight 'inner glow' blending option applied. As well as some orange bars across the top of them to help them stand out a little better. Finally l added the company slogan in the top right in a basic font.

    Here's my final result:

    (Click to enlarge)
    I hope you've learned a few neat tricks while doing this tutorial, thanks for reading.





    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^