www.PhotoshopTower.com
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


    Affiliates
    Your Link Here

    www.VidPit.com: Funny, Cool & Sexy videos!



    PSD HOUSE / Photoshop Tutorials

    
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily.





    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.
    Render Layout Tutorial vol. 3:
    Logo Creation
    This is part 4 in a 5 part tutorial to easily create a render layout out of a simple render in about 20 minutes. This is by

    far the fastest way to develop a layout for a website and equally as easy to accomplish.
    In this installment we will be creating the buttons for our layout design. To see how the final product, go here:
    Final product | Another variation.

    Page 1 of 1

    Step 1.)
    next we'll start adding the text for our buttons. I'm using a font size of 8pt, a color of #FFFFFF (white) and the BM Mini font.

    Then added these blending options to each of the text layers:


    Notice l left a good amount of room to the right of "search" for the input box that will end up there. For now l just drew a 1 pixel black box to fill the space, this will be filled in with a real input box when the layout finally gets sliced up.



    Step 2.)
    for the "GO" button of the search feature, l drew a small rectangle with the marquee tool, and filled it with: #3B7CA0
    then added these layer blending options:



    and here's how it looks:




    Step 3.)
    Now we'll add some dividers between each of our buttons to separate them a bit.
    Get out the pencil tool, set your foreground color to #000000 (black) and draw a 1 pixel line from the top of the button to the bottom such as l have here:
    Tip: Holding the SHIFT key while you draw your line will ensure that it stay perfectly vertical.




    Step 4.)
    Next press 'V' to get out the movement tool.hold down the ALT key, and press the -> (right arrow) on your keyboard one time.
    This will duplicate the black line, and move the duplicate 1 pixel to the right. Once that's done press CNTRL + ALT + i to invert the color from black to white.




    Step 5.)
    Drop the opacity of the Black line to: 25 percent, and the opacity of the white line to: 30 percent. Highlight the layer with white line, and press CNTRL + E to merge these two layers together.




    Step 6.)
    name this merged layer "divider". right click on it and choose "duplicate". Move this copy between the next set of buttons.




    Step 7.)
    repeat this process until you have a divider separating all of the buttons.


    That completes the button creation of our layout, you are now ready to continue on to Vol. 5 the final installment of our full layout tutorial, which is where we'll

    start working on the content boxes and sidebar for our layout.
    Continue on to vol. 5 Content boxes and sidebar.



    Related Tutorials:
        View Glossy Buttons Glossy Buttons
    In this tutorial you will learn how to make quick and effective looking round gl ...
        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 ...


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