Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
MP3 Player Interface! Create an awesome interface layout or even to create great looking xp style icons for your website. 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

    Your Link Here

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

    Free online adobe Photoshop tutorials! Learn webdesign easy with our adobe photoshop CS2 and Adobe Photoshop CS tutorials

    esem design - Photoshop Tutorialss

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

    Step 19.)
    Next near the top of the sidebar using the rectangle selection tool, and the polygon lasso tool (to deselect portions) make a selection similar to this.

    Step 20.)
    fill the selection with: # and add the following layer options:

    Step 21.)
    hold CNTRL and click this layer to select everything, then create a new layer. go to select -> modify -> contract, with a setting of 1 pixel.

    Step 22.)
    deselect about half of the area with the rectangular marquee tool. Here's how your selection should look:

    Step 23.)
    fill this selection with #FFFFFF (white) and drop the opacity down to 75 percent.

    Step 24.)
    now duplicate these two layers, go to ''edit -> transform -> flip vertically'' and position them at the bottom of the sidebar as l've done here:

    Step 25.)
    next l used the pencil tool to draw several small 1 pixel "lines" at the top and the bottom of the sidebar.

    Step 26.)
    and the layout is pretty much ready to be sliced up and arranged with HTML. I've gone through and added a few very subtle small details to the content boxes, and the

    header. Remember you don't want to overwhelm your visitors and draw their attention away from your content. Keep it clean, but make it unique.

    Here's how the layout looks before being sliced:

    and here is how it will look after being sliced and reassembled with HTML and having content added:
    Final product

    That completes the creation of our layout, you are now ready to begin slicing your layout and applying the page coding that will bind it together. Thank you for reading and please be sure to check out our other tutorials.

    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^