www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Classy Header! Learn how to create a classy header that works great for any layout. 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!



    Desktop Deck - Desktop wallpapers and graphic design 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.
    Mega Tech Layout
    Go To Page: [ 1 2 3 4 5 ]

    In this massive tutorial l will show you how to build a soft tech site from the ground up. There are several techniques covered in this tutorial that you will definitely have to master if you plan on designing web layouts as a profession, or just as a weekend web warrior. In any event, this tutorial should get you off the ground on the road to utilizing photoshops built in utilities for designing web layouts.

    Page 2 of 5

    Step 7.)
    Create a new layer
    press and hold CTRL and click on the previous layer (to make a selection of it), and fill the selection in with the "dot" pattern just like we did in step 6.

    Now drop the opacity down to 20 percent just like before





    Step 8.)
    Create a new layer and make your foreground color: #414141

    Next with the pencil tool, set at 1 pixel (px)
    draw a line directly underneath this rectangle
    tip: holding shift down while you draw your line ensures that you'll get a perfectly straight line.


    Duplicate this new layer by right clicking on it, and selecting "duplicate layer", and bump it down two pixels with the arrow tool as shown.


    Duplicate the top layer again by right clicking on it, and selecting "duplicate layer", and bump this one down two pixels with the arrow tool as shown.


    Now lets merge those top five layers, we're done playing with them.
    With the top layer active, press CNTRL + E, four times to merge those top three layers into 1.





    Step 9.)
    Make a new layer and with the eclipse marquee tool make a circular selection similar to above.
    Tip: holding the shift key while you select will make a perfect circle.


    Fill the selection with black

    Double click the layer to pull up the "blending options" panel, and add the following settings:

    Stroke:
    Color: #000000


    Gradient Overlay
    Colors:
    #565656
    #AFAFAF


    Outter Glow:
    Color: #ACACAC


    Click okay, we're done with the blending options. You should now have something similar too:






    Step 10.)
    Make a new layer. Hold CTRL and click on the previous layer, to make an identical circular selection, now with the elliptical marquee tool, while holding ALT deselect the

    bottom half the the selection until you have something similar too:


    goto select -> modify -> contract and contract the selection by 1 pixel

    Press 'D' and then 'X' on your keyboard, to reset the colors to black and white, and then to swap the two of them around, so that white is your foreground color.

    Select the gradient fill tool, and select "foreground to transparent" (which should be white).


    And fill the selection with a similar fill from the top to the bottom.


    press CTRL + D to deselect the area.
    Change the layer's blending mode to "overlay"
    and drop the opacity down to 60 percent


    This should give us nice circular plastic looking "button":
    (this will be for the pages search feature incase you were wondering)
    Here's what l've got so far:






    Step 11.)
    Lets make the rest of the buttons, Create a new layer grab the rounded rectangle tool and select the "paths" selection set the radius to 5px


    With the rounded rectangle tool make a shape similar to bellow


    Right click on this shape, and choose:
    Make Selection




    Now fill the selection with black and press CTRL+D to deselect the selection.

    Double click on the layer to pull up the blending options panel and use the following settings:
    Gradient Overlay:
    Colors:
    #3a3a3a
    #6b6b6b




    Stroke:
    Color: #a7a7a7


    Drop shadow:
    Color: #000000


    Result:






    Step 12.)
    Create a new layer and hold CTRL and click on the previous layer to make a selection identical to the previous. With the elliptical marquee tool, while holding the ALT

    key, deselect the bottom half the the selection, with a slight curve as shown bellow:


    Set the foreground color to "white", get out the gradient tool and fill it with a white to transparent gradient like we did in step 10.


    Set the layers blending mode to "overlay" and set the opacity to: 85 percent


    Here's what you should have.


    Now lets duplicate both the button, and the button's gloss for our other buttons.

    First lets put the two layers into a layer set to make this easy.
    click the small "folder" icon at the bottom of the layers window this will create a new layer set.
    Name it button.


    Next drag both the button, and the button's gloss layer into the folder one at a time, and this will place them into the set.


    Now with the arrow tool, while holding the ALT key (to copy/duplicate), and the SHIFT key (to keep it on a straight line while moving it) left-click your mouse and hold, and slide the button to the right, and release when you've got your button copy similar to bellow:


    Repeat this process until you've got a set of buttons (EQUALLY SPACED) such as this:


    Now let's merge all of the buttons together into one layer.
    Go down the line click each "folder" layer, and press CTRL + E to create a merged layer out of the set.

    Then go down the line and pressing CTRL + E again on each layer to merge all of the buttons into one layer.

    Once this is done, you can center them a little better such as l have done here:
    Remember: if you hold down the SHIFT key while moving the line, it will stay perfectly straight for you.

    Result:




    Go To Page: [ 1 2 3 4 5 ]
    Page 2 of 5
    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^