www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Pixel Stretch Sig Learn the pixel stretch technique, and how it's applied to create balanced colors and graphics. Great Read 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!



    graphics, tutorials, softwares, designing, free training, downloads







    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.
    Macro Layout
    Go To Page: [ 1 2 ]
    Create this clean macromedia style layout.

    macromedia has a simple, clean layout that looks real good. Here l'm going to show you how to create a layout that is similar.

    Page 1 of 2

    Step 1.)
    create a new document that is 770 x 300, and fill the background with: #72828B



    Step 2.)
    We'll start with the buttons, Create a new layer, and using the rectangular marquee tool make a selection across the top of the page like so:




    Step 3.)
    Next smooth the corners of the selection by going to:
    select->modify->smooth and smooth the selection by 2.


    and fill the selection with #ACB5BB




    Step 4.)
    Now apply these blending options to the layer.
    Drop Shadow:


    Gradient Overlay:




    Here's what you'll end up with:




    Step 5.)
    Create a new layer, and apply the text to your button. I used #000000 (black) Verdana, with a 10pt Size.






    Step 6.)
    Then l just added a 1 pixel divider between each of the buttons, to separate them a bit. Set your foreground color to: #9DA5AA. And draw 1 pixel lines with the pencil tool, as l've done here.

    I did this all the way across the image.



    Step 7.)
    Next we'll work on the "search box". Set your foreground color to #000000 (black) create a new layer and get out the pencil tool again, and draw a 1 pixel line like so:


    Drop the opacity of this layer to: 33 percent

    Then set your foreground color to #FFFFFF (white) create a new layer, and draw another 1 pixel line right beside that as shown:


    Drop the opacity of this layer to 68 percent. Here's what you should have if you've followed along:




    Step 8.)
    next we'll create a small input box that will serve as our search box. Create a selection like so with the rectangular marquee tool:


    Fill the selection with #FFFFFF (white), and apply the following blending options to the layer:
    Inner Shadow


    Stroke


    Results:




    Step 9.)
    Next add the account links at the top right corner of the page. The font I used is Verdana with a size of 9pt.




    I also threw in a shopping cart icon. You can draw your own, or get an account with: WebsiteIcons.com. It's a great free services with 1,000's of website icons any serious designer shouldn't be without.




    Step 10.)
    Set your foreground color to: #889395 and draw a 1 pixel line with the pencil tool between each of the links like so:


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



    Related Tutorials:
        View Interface Vents Interface Vents
    This tutorial will show you how to add a techno depth to your layouts with the u ...
        View Render Layout Tutorial vol. 5: Content Boxes Render Layout Tutorial vol. 5: Content Boxes
    In this tutorial you will learn how to create an entire layout by using an exsis ...
        View Render Layout Tutorial vol. 4: Button Creation Render Layout Tutorial vol. 4: Button Creation
    In this tutorial you will learn how to create an entire layout by using an exsis ...


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