Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Trendy Bevels In this tutorial l will explain how to create those trendy bevel buttons that you see popping up all over the net. 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

    Your Link Here

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

    Step 19.)
    Create a new layer. we're going to make a simple "more" button. Make the following selection with the rectangle marquee tool and clip off the top right corner with the polygon lasso tool while holding down ALT, such as l did in the image:

    Fill the selection with: #383838

    Now get the pencil tool out again, make your foreground color: #818181
    Change the opacity of the pencil tool back to 100 percent
    and draw a small corner, such as l have done here:

    Next select the Text tool set the size to 8 px
    make the text color: #818181
    and get a good pixel font, l'm using: 04b_21 which you can download freely at http://www.dafont.com/en/font.php?file=04b_21.
    And add the following text to your more button:

    Next select the custom shape tool, and set use the following settings:

    And make a small "arrow" such as l have here:

    Now get the pointer tool, and hold down SHIFT and ALT at the same time, and drag the arrow to the right slightly, and release the buttons (you'll notice this duplicated the layer, and the shape). Here's what you should have:

    And do it again, so you have three arrows like this:

    Step 20.)
    Now make a new layer on the very top of your layers pallet (this layer will be on top of EVERYTHING else).
    Lets put some text on the buttons.
    Get out your text tool
    I used these settings:

    Font: Tahoma (this should be standard on most window's systems)
    Size: 12px (not PT!)

    Then l just went through and added a blending option to each layer with "stroke" of 2px with opacity set to 23 percent with black (#000000) to give the text more depth.

    Step 21.)
    Using the same text settings and blending options, l also added the text for the "search" feature. see image.

    Step 22.)
    Make a new layer, and at the bottom with the rectangle marquee tool make a selection similar to this:

    Fill this selection with: #636363

    Double click this layer, and add the following blending options to the layer:
    Gradient Overlay


    make a new layer, and get out the pencil tool
    set your foreground color to# 2B2B2B, and the size of the pencil to 2 px

    Now draw a line all the way across the top of the "footer" we just made, so it looks like this:

    Step 23.)
    Next get out the pointer tool. hold down the ALT key and press up ONE TIME, and then release the ALT key.
    Next press up one more time. This will duplicate the line, and move it up two pixels. Do this process one more time, and you'll have three evenly spaced lines, like this:

    Step 24.)
    Next we'll add a diagonal grid to the background just to break it up a bit. On the layers panel, create a new layer above the grey background all the way at the bottom. Press CTRL + A to select the entire canvas

    Now with the rectangular selection tool, deselect the "header" area as shown:

    Now press CTRL + N to make a new document.
    Make it 5px by 5px with a transparent background.

    Set your foreground color to black (#000000) and get the pencil tool out (set it to 1px in size).
    and draw a diagonal line, such as l have here:

    Then go to Edit -> Define Pattern (like we did earlier with the dot pattern).

    Go To Page: [ 1 2 3 4 5 ]
    Page 4 of 5
    Tutorial Index

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