Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
WMP Buttons! A fantastic orb that just seems to jump right off the screen. In a few easy to follow steps. 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!

    graphics, tutorials, softwares, designing, free training, downloads

    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. 1:
    Frame Creation
    This is part 1 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 frame-work for our layout design. To see how the final product looks, go here:
    Final product | Another variation.

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

    Step 1.)

    Download and open the 'blue shatter' image, available here. (or open a render of your own, any render will work for this tutorial)

    Step 2.)
    grab the 1 pixel horizontal marquee tool

    Step 3.)
    make a selection on your render anywhere on the photo, l was aiming for a section with a little bit of black

    Step 4.)
    press CNTRL + C to copy the selection of the render and minimize the window (we'll use the render again later...)

    Step 5.)
    open a new document. Width 777 height 500 (777x500) and name it "layout"

    Step 6.)
    Fill the background with: #F1F1F1.

    Step 7.)
    create a new layer, and press CNTRL + V to paste the 1 pixel snippet of our render. place it near the center of the canvas.

    Step 8.)
    next press CNTRL + T, or go to: edit->free transform. to open up the free transform tool. Move the cursor over the center of the pasted 1 pixel render until you see a dual arrow pointing both right, and left. Hold down your mouse and drag it to the right, you'll notice that this will "stretch" the 1 pixel snip from the render. This is known as "pixel stretching" (incase you didn't know that already). Stretch it out until you can get a good look at the design such as l have done here and press "enter" on your keyboard to finalize the "stretch".

    Step 9.)
    Now press 'V' on your keyboard to get out the Move tool. Highlight a section of the stretched image, and move it up and down to get a good look at the whole thing. What we're looking for are sections that we can use for our pages borders.

    Near the bottom l found a good section for the buttons. Get our the rectangular marquee tool and select this area. (or a similar area)
    Pay special attention to make sure that the top and bottom are lined up precise with the section you're going to use.

    Once you've gotten the area selected, press CNTRL + C to copy it, create a new layer, and press CNTRL + V to paste the image.

    Step 10.)
    press V to get our the "move tool" and position the pasted section approximately 220 pixels from the top of the canvas, off to the left, such as l have here.

    Go To Page: [ 1 2 ]
    Page 1 of 2
    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^