Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Mega Tech Tutorial In this massive tutorial l will show you how to build a complete tech site from the ground up. There are several techniques covered in this tutorial... 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!

    Kostenloses für den Webmaster

    HV-DESIGNS.CO.UK :: Version 15 :: Back To Basics

    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.

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