Mega Tech Layout

Step 19.

Create a new layer. we're going to make a simple "more" button. Make the following selection with the rectangle marquee tool and clip off the top right corner with the polygon lasso tool while holding down ALT, such as l did in the image:

Fill the selection with: #383838

Now get the pencil tool out again, make your foreground color: #818181

Change the opacity of the pencil tool back to 100 percent and draw a small corner, such as l have done here:

Next select the Text tool set the size to 8 px

Make the text color: #818181 and get a good pixel font, l'm using: 04b_21.

And add the following text to your more button:

Next select the custom shape tool, and set use the following settings:

And make a small "arrow" such as l have here:

Now get the pointer tool, and hold down SHIFT and ALT at the same time, and drag the arrow to the right slightly, and release the buttons (you'll notice this duplicated the layer, and the shape). Here's what you should have:

And do it again, so you have three arrows like this:

Step 20.

Now make a new layer on the very top of your layers pallet (this layer will be on top of EVERYTHING else).

Lets put some text on the buttons.

Get out your text tool

I used these settings:

Font: Tahoma (this should be standard on most window's systems)
Bold
Size: 12px (not px!)

Then l just went through and added a blending option to each layer with "stroke" of 2px with opacity set to 23 percent with black (#000000) to give the text more depth.

Step 21.

Using the same text settings and blending options, l also added the text for the "search" feature. see image.

Step 22.

Make a new layer, and at the bottom with the rectangle marquee tool make a selection similar to this:

Fill this selection with: #636363

Double click this layer, and add the following blending options to the layer:

Gradient Overlay

Result:

Make a new layer, and get out the pencil tool

Set your foreground color to# 2B2B2B, and the size of the pencil to 2 px

Now draw a line all the way across the top of the "footer" we just made, so it looks like this:

Step 23.

Next get out the pointer tool. hold down the ALT key and press up ONE TIME, and then release the ALT key.

Next press up one more time. This will duplicate the line, and move it up two pixels. Do this process one more time, and you'll have three evenly spaced lines, like this:

Step 24.

Next we'll add a diagonal grid to the background just to break it up a bit. On the layers panel, create a new layer above the grey background all the way at the bottom. Press CTRL + A to select the entire canvas

Now with the rectangular selection tool, deselect the "header" area as shown:

Now press CTRL + N to make a new document.

Make it 5px by 5px with a transparent background.

Set your foreground color to black (#000000) and get the pencil tool out (set it to 1px in size).

And draw a diagonal line, such as l have here:

Then go to Edit -> Define Pattern (like we did earlier with the dot pattern).

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:

Click to enlarge

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!