www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Wild West Wooden Sign Create an awesome old wild west wooden plank interface! Very Cool! 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!



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

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

    Learn Web Design Online .com



    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 3 of 5

    Step 13.)
    Next make a selection with the rectangle marquee tool similar to what l have done here. This selection is about 10 pixels form the right wall, and maybe 70 pixels from the top.


    Goto select -> modify -> smooth


    Select a radius of 5px


    Go down to the bottom layer, and ad a new layer under everything else (other than our grey background).


    Next get out the polygon lasso tool, and deselect some of the selection, by holding the ALT key.

    Until the selection is similar to the image


    Fill this selection with black (#000000).

    Double click on the layer and enter the following blending options:
    Color Overlay
    Color: #7a7a7a


    Stroke:
    Color: #494949


    Inner Glow:
    Color: #6B6A6A


    Result:






    Step 14.)
    Create a new layer directly above this one. make a selection as pictured with the rectangle selection tool


    Now go to select -> modify -> smooth
    with a radius of 5px (just like we did in the previous step)

    Using the polygon lasso tool, while holding ALT deselect the bottom portion of the selection just like before.


    Fill the selection with black. Right click on the previous layer, and choose "copy layer style"


    Now right click on the layer we'd just created, and choose "paste layer style".


    Now this layer should look exactly like the previous layer.






    Step 15.)
    Make a new layer with the rectangle selection tool, make a selection similar to mine


    Get out the polygon lasso tool, and while holding the ALT key, deselect the bottom portion of the rectangle, such as l have done.


    Using the flood fill tool, fill this selection with: #717171

    Double click on the layer to add a blending option.
    Stroke:
    Color: #3a3a3a






    Step 16.)
    Make a new layer with the rectangle selection tool, make the following selection


    Now with the polygon lasso tool while holding ALT make the following de selections


    Fill the selection with: #717171

    press CTRL + E to merge with layer with the previous. Doing so should apply the blending options to this shape as well.






    Step 17.)
    Make a new layer with the rectangle selection tool, make the following selection.


    Fill it with black (#000000).

    Double click on the row, and add the following blending options to the layer:
    Stroke:
    Color: #3a3a3a


    Gradient Overlay:
    Colors:
    #575757
    #959595


    Inner Shadow:
    Color: #000000


    Result:






    Step 18.)
    Make a new layer while holding down the CTRL key, click on the previous layer, to make a duplicate selection of it.
    Next with your rectangle tool while holding ALT remove most of the rectangle, until you have a similar selection.


    Fill the layer with black and drop the opacity down to 13 percent.
    So you end up with something similar





    Create a new layer get out the pencil tool, and set FFFFFF (white) as your foreground color. Set the brush size of the pencil to 1 pixel

    Set the opacity of the pencil tool to 20 percent

    Now draw two vertical lines on the right side of each of the "boxes" we just made.


    Set your foreground color to black, and add similar vertical lines to the left side of the "boxes".
    These will serve as our reusable, scalable content box


    You should have something similar to:




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