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