Tech web « Web « Photoshop Tutorials

Home
Photoshop Tutorials
1.3D
2.Animal Creature
3.Animation
4.Background Cover
5.Color
6.Design
7.Effect
8.Hardware
9.Holiday Event
10.Human
11.Image Format
12.Logo
13.Nature
14.Object
15.photography
16.Shapes
17.Text
18.Textures
19.Tools
20.UI Controls
21.Web
Maya Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
Photoshop Tutorials » Web » Tech web 
Now back to the layout document. on the newest layer, (that should have a selection on it still) use the paint bucket tool, and fill the selection with the dot. You do this by changing the "fill" type from "foreground" to "Pattern".

This is final result. i hope you like this layout. if you like it please register and download this layout to see how it's made

Finally we'll add some reflective text to our buttons. Get out a pixel font (if you do not have any, you can download some from the download section of this website). and set the pixel font up like so:

8. Create a new layer, and make another selection with your polygon lasso selection tool on the edges of your list. Fill it with a lighter color, and add another bevel to it:

8. Continue to do this to the rest of your link slices until all of them have rollover states with outerglows. Once you are done, your site is ready to be saved. Save your site in a new folder somewhere, and name it "techlayout".

Now for the final touch of your High Tech Toxic Header select once again the Nuclear Custom Shape, and draw it like this:

9. Practically all I can teach you how to do it. Now use your skills to create the header graphic and other techish things. I used to small graphics to spice up the nav area a bit, nothing big (Click on image for a larger view):

Once you have a nice compliment of tech panels we can add the navigation bar. To do so go ahead and create a new layer on top of everything else, get out the rectangular marquee tool and make a selection along the bottom of the canvas like so:

Cool huh, now this is where I leave you to add some more techish stuff. Here are some small things I added and redid to make it look better:

ww_w.j_a___va__2_s.c___o__m | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.