Professional Web Layouts (Part 2)

Today, were going to find some tricks on making pro layouts. So open photoshop. i suggest a 720 x 500 image.
Make the background a dark grey.Make a new layer. Make a selection from top to bottom, covering almost the full image on the sides and fill that in with a brighter color than your previous. Next, on that layer with the brighter color, go to it's blending options and add a 1 pixel black stroke.



When you got that done, make a new layer and a new selection at the very top, this part is going to be the menu. So make shure the selection is not too small but also not to big. Then, fill that in with a bright grey to a medium grey gradient. also add a black 1px stroke to that layout. Almost forgot, make the selection so it's right next to both black lines, so it's touching the black lines, but it's not over or past them.



Make shure that the gradient is a medium gray at the top, and gets brighter at the bottom.
When you got the 1 pixel stroke, your going to open up the layer styles again. and add a gradient overlay like below.



Ok, this gradient is a bit tricky. Your going to have to make a white transparent color at the left. Then, on the opposite side, your going to make another white color, this time, at 100 % opacity, move it a little to the left until you get something like what i had done. then, to make the white sharper, add some more transparency father to the left of the white part... If you never understand these gradeints your never gonna make cool layouts.

Anyways, when you add a gradient like mine, your image should look a bit shiny or plastic-ish.

When you got that layer style done, save it by clicking on the "new style" button. Now you can add yout text or anything like that.

Unlike my other layout tutorial, this one is more complex, so more things to add. So now, create a new layer, and make a selection at the right of the menu, fill that in with a very dark grey(almost black) to a medium grey gradient. Then, add that same style to that layer.



Then, add a new layer under the 2 menu layers. Fill it in with another medium grey color, this is the logo part so dont make it too small or too big, but whatever you like.



next, add a layer at the top and make a thin selection somewhere at the bottom of your banner. and fill it in with a gradient like your menu, a medium grey to a dark grey. then, use that same style you used for the menu (you might have to change the gradient overlay a bit, if you do, make a new style out of it).



Make shure again that the medium grey is at the top of the selection, and the light grey is at the bottom.

That selection looks to simple doesn't it. Well, make a new layer again. And make a selection at the left of your small bar you just made. Fill in the selection with a very dark grey to a medium grey like the dark spot in your menu, and fill again, use the same style you used for the thin bar.



Make a new layer, make it under the 2 thin bar layers you made. make a new selection a bit thin, and fill it in with a medium grey. Then, add a 1px black stroke.



Now, were going to add space for content and a sub-menu. So create a new layer at the top, and make a selection long enough for content. fill it in with a medium-bright grey. also add a 1 px black stroke to it.



Next, create a new layer and make a selection on the top of that content area. Fill it in with the same gradient you did the menu. also add the same layer style you did the menu (this is the content title area).



Were, almost done. Next, create another layer at the very top again. Make a selection on the right of your content titles area. and add a gradient with that of all the other very dark grey to medium grey sections. also add the same layer style.



And bam! ur done.

A professional layout that also looks cool. But, i doubt all you want is just a content area, so your gonna have to redo these last few steps to create a submenu on the right. Then you can also add a few more things.



And then, you can also slice up the images and stuff.

<< Web Layouts: Part 1 | Web Layouts: Part 3 >>