Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Carbon Fiber Pattern Create a carbon fiber texture for use on your next layout, or interface! 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!

    BladeWorkz - Photoshop Tutorials

Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily.

    Learn Web Design Online .com

    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.
    Mega Tech Layout
    Go To Page: [ 1 2 3 4 5 ]

    In this massive tutorial l will show you how to build a soft tech site from the ground up. There are several techniques covered in this tutorial that you will definitely have to master if you plan on designing web layouts as a profession, or just as a weekend web warrior. In any event, this tutorial should get you off the ground on the road to utilizing photoshops built in utilities for designing web layouts.

    Page 5 of 5

    Step 25.)
    Now go back to our layout, and get out the flood fill tool change the mode to "pattern" and choose the new diagonal pattern we just created.

    Fill in the selection with the pattern.

    Drop the opacity of this layer down to 15 percent:

    Now for the creative part, start to make the header for the page and you're done. This is just like making a sig, but it should tie into your theme pretty well. I'm sure l'll write a

    more indepth tutorial on this type of thing in the very near future. But here are some of the steps involved.

    Open up a render for the background of our header, either one you've made or one that you've downloaded.
    After opening up my render, l changed it to greyscale (this is a good idea, that way you can change the color(s) if you need to). Change the image to greyscale by going to

    Image -> Mode -> greyscale. This will allow you to adjust the color(s) to your needs.
    Then l pasted it onto the layer l was working with on the layout, and cropped everything but the portion that l wanted, which is near the top of the layout. Then l dropped the

    opacity down to 39 percent.

    Next l added color back into the render by pressing CTRL + U
    checking colorize, and adjusting the settings.

    Here's what l've got so far:

    Creating the header for this type of a page, is similar to creating a signature. There are literally 100's of tutorials out there, but this is where you need to spend most of your

    time when designing a webpage. Notice l've saved this part for last? Well l do this because the header should be a nice balance to the rest of the layout, and also add a

    little contrast.

    As you'll notice l've introduced a new color with my header, an electric blue looking color.

    This header was made by just cropping out different pieces of pictures/renders that l've made myself, and that l've downloaded off of the net.

    After l'd finished getting the basic look of my header, l imported it into flash, and added a few bells and whistles to draw the user's attention to the title of the webpage. More

    on this in a future tutorial (if l receive any requests/emails). Because, obviously you'll want visitors to remember your site's name, and come back for more, right? At this

    point, just continue to refine and add small details w/out going overboard. If you've made it this far, congratulations I hope you've picked up some useful photoshop

    techniques and are prepared to being utilizing the power of photoshop to design your own layouts and websites.

    Here's the final result:

    As you can see l've added some interface vents to the layout. Here's a tutorial that covers that topic.
    Also, if you'd like to have a little more detail on the glossy stock button I've written a tutorial covering that as well.
    Thanks for reading, and good luck!

    Related Tutorials:
        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 ...
        View Render Layout Tutorial vol. 4: Button Creation Render Layout Tutorial vol. 4: Button Creation
    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^