Hello my friends

In this tutorial i will show you how to create a new layout

This is the Tutorial Number 89 from our 100 Tutorial Marathon
Soon this marathon will end, and i will start another one. I will not tell you how many tutorials i will create in my future marathon

This is what we gone do today
If you are a VIP member you can download the following xhtml / css template ( here is a demo LINK )
This template is CSS validated and Valid XHTML



Open a new photo shop document
Size 760 X 770 pixels
background color : #242424

Now with Rounded Rectangle Tool Create the following rectangle
Set the radius to 20 pixels



Then rasterize the layer. To rasterize the layer go to Layer > rasterize > Shape

Select Rectangular marquee tool, and make a selection like this



Then hit delete on your keyboard. With the same tool, create another selection



Hit one more time the Delete key , then press CTRL+D to hide to deselect

This is the result



Select Rectangle tool, and make a shape like this



Duplicate the first shape ( the layer with the rounded corner )
To duplicate you have to select the layer with that corner and press CTRL+J

Then go to Edit > Transform > rotate 180

With the move tool place this layer like me



Now apply the following layer style for the top and the bottom shape





This is the result



Now for the middle shape apply the following layer style





This is the result



Now select Rounded Rectangle Tool, Set the radius to 2 pixels and start creating some simple buttons



Then apply the following layer styles







This is the result.



You can add also some text with Type tool. Then press CTRL+T and change the radius to -90 ( i think this step is very easy )



create a new layer ( press CTRL+ALT+SHIFT+N )
Select pencil Tool, choose a square brush ( 5 or 6 pixels ) and make 4 points on the button

Then duplicate this layer 4 times, and place it on each button ( in the same time you need to change the blending mode to Overlay for each layer



Duplicate all the button layers, text layers , and the small squares layers
To duplicate all the layers, the best way is to select each layer ( hold CTRL down and click on each layer to make multiple selection )
then when all the layers are selected , drag them to the " create new layer " button from the bottom of the layer palette

Now press CTRL+E ( this will merge all the duplicated layers into a single one )

Bow go to edit > transform > flip Vertical



Select move tool, place the merged layer under the real buttons,



with this layer selected press on " Add layer mask " button



Select Gradient Tool . Use the following settings



And make a vertical line ( the same size with the red arrow )
In the following image you can see also the result



now find a photo with a city
I will use the next image



Open this image in photoshop, then drag on our layout
be sure you place the image above the background layer



Select Eraser Tool, and start deleting the background of the image
This is my result



Create a new layer above the background layer, and with the Pen Tool , Create some ray lights



Now you have to create this rays alone. this is what i have



Press On the "Add layer mask" button , Select Gradient Tool, and use the following settings



Then drag a line like the following blue arrow



Now you can reduce the opacity for this layer with green rays
I will reduce to 30 %, you can use what value you want



Now i will add some text on the layout, and one simple image with a small talk-mania banner



now you can add some arrows on your layout, To add some arrows create a new layer, Zoom the documet to 1600 pixels, and with the Pencil tool ( set the brush size to 1 pixel) , and make some pixel art drawing



Then with the same technique , add also some points between the text
This is my result



If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
I hope yo like the layout, and i am waiting for you tomorrow for another tutorial. Thanks

Attached Files

layout89.zip (710.7 KB, 1097 views)

__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )

Very nice. I thought the background looked weird at first but I figured it out.

Yaaaaaaaaaaaaaay!!!! A CSS Template!!! Oh But wheres the Link?????

love the colors

very, very nice, love the layout, love the colors...you guys are talented...keep up the great job...This is one of the things I love the most about Talk-Mania..Your tutorials are easy to follow..so easy even a caveman can do it, lol...nice job.

woooooowwW!!! Awesome CSS template!!! very nice job friend!

http://www.talk-mania.com/tutorials/...ced/index.html

Very nice, this is what I been trying to learn.

cant wait to apply it in my next design. Just worryin that it may slow down the site down if it uses several images with large dimensions. any tips to maximize design yet minimize file size?

Very helpful techniques

beautifull!