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!

    Windows GUI MODS

    BladeWorkz - Photoshop 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. 5:
    Content Boxes
    This is part 5 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 finishing up our layout design and create the content boxes and sidebar. To see how the final product, go here:
    Final product | Another variation.

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

    Step 1.)
    This layout is going to be a 2 column layout. We'll have a sidebar on the left side that is about 175 pixels in width, for advertisements, affiliates, shout boxes, new features

    ect ect ect... and then a large content box to the right of that that will span the rest of the layout for articles/tutorials/blog entires .. whatever. Lets start with the main content box. Do your best not to get overly detailed and draw away from the real meat and potato's of your website... which is THE CONTENT.

    Start with a rectangular selection about this size:
    NOTE: place it near the center of the canvas... we don't want this thing ANYWHERE near the drop shadow from our header/navigation bar

    Step 2.)
    next get out the polygon lasso tool, and deselect the following area form the rectangle. You do this by holding down the ALT key when making the selection.
    TIP: holding the SHIFT key along with the ALT key will ensure a perfectly straight selection.

    Step 3.)
    fill the selection with #2C54C7 and add the following blending options to the layer:

    The result should look like so:

    Step 4.)
    create a new layer, and make a selection like so:

    Step 5.)
    90.) and fill this selection with: #082E9F

    Step 6.)
    create a new layer, and draw a small rectangle with the rectangular marquee tool

    Step 7.)
    fill this selection with: #F7FF1C and apply the following blending options:

    Step 8.)
    Now duplicate this layer two times, so you have three blocks, and position them like so:

    Step 9.)
    next hold the CNTRL key, and click on each layer with a yellow box to select them all. Then go to "select -> modify -> expand" by 1 pixel.

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

    Related Tutorials:
        View Glossy Buttons Glossy Buttons
    In this tutorial you will learn how to make quick and effective looking round gl ...
        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 ...

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