Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Add some Tech Wires to your website layouts, and application interfaces. 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

    Your Link Here

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

    FREE Photo Shop Tutorial

    FSTutorials.com Photoshop Tutorials - Photoshop Cs Tutorials

    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. 2:
    Header Creation
    This is part 2 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 header for our layout. To see how the final product, go here: Final product | Another variation.

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

    Step 31.)
    wow, okay now that we got that out of the way, create a new layer, and name it "highlight".

    Step 32.)
    while holding CNTRL click on the text layers, this should make a selection of everything on that layer. NOTE: hold down CNTRL + SHIFT if you're going to be selecting multiple layers (such as l am).

    Step 33.)
    Now with the rectangular marquee tool, while holding down the ALT key (to deselect) remove the bottom 3/4 of the selection such as l have here

    Step 34.)
    with the selection still active, go to "select->modify->contract" with a setting of 1 pixel (see photo).

    Step 35.)
    fill this selection with #FFFFFF (white) and set the "highlight" layers opacity to about 75%. Here's how it should look now:

    Step 36.)
    if the Letters are showing up too light, you can adjust the curves, by going to each layer, pressing CNTRL + M and sliding the curve around until it's dark enough for you.
    Here's what l ended up with:

    Step 37.)
    l also added in a small company slogan to tie everything up, and brand the reason for the website. the font l used here is called BM Mini and is available freely for download here: http://www.dafont.com/en/font.php?file=bm_mini
    the font size is 8pt and the color is #000000 (black) with the following layer styles applied:

    Then set the layers opacity down to around 75 percent, here's how it looks:

    Step 38.)
    Next l just splashed it up with some techbrushes a bit, and dropped their transparency way down. There are several 100 tech brush sets available all over the place, but if you can't seem to find any email me and l will be sure to get you some handful of my personal favorites.

    Step 39.)
    l also through in a little bit of micro-text. in a few spots to push the tech appeal home. Here's how it looks:

    This was done by C&P a little snippet of text (anything will do) with a size of 3pt with the BM Mini font. then dropping the layers opacity.

    Step 40.)
    That completes the "header" of our layout, you are now ready to continue on to Vol. 3 of our full layout tutorial, which is where we'll start working on the logo for our website.
    Continue on to vol. 3 Logo Creation.

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