www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Inferno Text Check out this hot looking text effect tutorial today! 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!



    Webmaster Tutorials, Resources, Webmaster Forums - Viper Creations

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





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

    Step 1.)
    Create a new document 778 x 550 filled with: #616161. Make a new layer

    Make a selection about 100 pixels tall, that spans the entire width of the document using the rectangle marquee




    Step 2.)
    with the selection still active get out your polygon lasso tool, hold down the ALT key (you should notice a small - or minus sign near the lasso) and remove a section of your selection.






    Step 3.)
    Fill the selection with black, press CTRL+D to deselect the selection

    Double click the layer to pull up the "layer options" window
    gradient overlay:
    Colors:
    #454545
    #575757




    Stroke:
    Color: # 757575


    Drop Shadow:


    Click okay, the layer styles for this layer are complete.





    Step 4.)
    Make a new layer with the rectangle marquee tool make a square selection


    With the polygon lasso tool, again hold down the ALT key, and deselect some of the area until you end up with a similar selection


    Fill the selection with black (#000000).

    Double click the layer and enter the following layer styles:

    Gradient Overlay:
    Colors:
    #616161
    #8E8E8E


    Stroke:
    Color: #3A3A3A


    Outter Glow:
    Color: #212121


    Click okay, the layer styles for this layer are complete.






    Step 5.)
    Make a new layer with the new layer active, hold down the CTRL and click on the previous layer. This will make a selection duplicating everything within the previous layer.

    we're going to fill this area with a "dotted" pattern. Lets create the pattern.

    Press CTRL + N to create a new document.
    make the document:
    height: 3
    width: 3
    with a transparent background




    Press "D" to reset your colors.
    In the very center of the document, make a 1 pixel dot with the pencil, or the paintbrush tool
    as shown:


    go to Edit->Define Pattern


    Name it "dot".
    This will save the pattern for you, so you'll never have to repeat this process and you'll always be able to use and reuse this pattern

    Now back to the layout document. on the newest layer, (that should have a selection on it still) use the paint bucket tool, and fill the selection with the dot. You do this by changing the "fill" type from "foreground" to "Pattern".


    Fill in the selection


    drop the layer's opacity to 20 percent





    Step 6.)
    Make a new layer and make a selection all the way along the top


    Fill it with:#6A6A6A



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