Create a new document with a white background.the size should
be 760 x 700 px.
Create a new layer by pressing Ctrl+Shift+Alt+N in the same time.
Then select Rounded Rectangle Tool ( be sure you have the radius = 5 px )
And draw a rectangle like mine.
I have used this color to fill it: #535353
You can see a small image of my first step:
Then you have to rasterize this layer: Go to Layer > Rasterize > Shape
After you have rasterized you have to duplicate this layer.
To duplicate the current layer using the Layer menu, choose Layer > Duplicate Layer
Select the first layer:
Now go to Edit > Transform > Perspective and set this value:
You will notice that the top of the rectangle will go to left.
Do not forget to press on Enter.
This will be the shadow for the second rectangle.
Now with the same layer selected go to Filter > Blur > Gaussian Blur and set the radius to 7 px.
After you press ok change the opacity for this layer to 25%.
Now select the top Layer ( Shape 1 Copy ) and let's change the layer style.
Please use this settings:
For Inner Glow settings use the color #003399
Set the Gradient color for the left #66CCFF and for the right #0066CC
Now we have to add another Rectangle. Select the Round Rectangle Tool ( radius 5 px ) and Draw a rectangle like mine:
On this Rectangle we will create the buttons and we will have also place for logo.
But first of all we have to create one more time a shadow. i will not explain one more time. please follow the steps from above.
After you have created the shadow we will add a layer style for this rectangle.
And for the gradient use this colors:
Left = #fcfcfc Middle = #d1d2d5 Right = #9c9ea5
Now select the Rectangular Marquee Tool ( be sure you have selected the rectangle you have already applied this layer style )
With Rectangular Marquee Tool make a selection like this:
Now press on Delete.
You can do this as many times you want. After you press delete you can move this selection with your arrow keys and when you are happy with the distance press one more time delete.
Repeat this steps as many times you need. I will create 4 buttons.
After you have created this buttons press Ctrl+D to deselect
You will notice that the selection is gone
This is my result:
Now we will add another details for this buttons. With rounded rectangle tool create small rectangles and place them like me:
For this small rectangles use the same layer style as the big blue rectangle.
Now you can add your logo on the remaining place.
Now let's come back to our layout. here is the image with the logo.
We have finished the buttons and the logo. Now let's start to work on the other part of the website.
Now create a new layer ( Press Ctrl+Shift+Alt+N ) and with the
Rectangular Marquee Tool make a selection like this:
Create a new transparent document (3x 3 pixels) Zoom
it by 1600 %.With the Pencil tool create something like this:
Then go to Edit > Define Pattern . Choose a name and press Ok.
Now let's come back to our template. Select Paint Bucket Tool.
On your top side of the window select the pattern you just made.
Use this settings:
Now press on time with the Paint Bucket tool inside the selection on our layout.
this is the result.
You can change the color if you want. Go to Layer > Layer style > Color overlay
I will choose a white color. now please add as many details as you want.
I have duplicated this line and with my arrows keys i have placed under the first one.
Now it is your choice. You can add as many as you want. first think about the content you will have on this website.
Select the Rounded Rectangle Tool and create something like me:
You can notice that the rectangle is bigger on the bottom part. you will see in my next steps why i have created this.
Rasterize this Layer: Layer > Rasterize > Shape
Select the Rectangular Marquee Tool and make a selection like mine. ( be sure you have this rectangle selected )
Then go to Layer > New > Layer via Cut
Photoshop will select automatically this layer. Now please select this layer and drag it on Layer palette above the Background layer:
After that the image will look like mine:
Now press D on your keyboard. ( this will reset your colors )
Select one more time the Rounded rectangle Tool and create a small rectangle.
please see the next image:
Place this rectangle like in my next image. be sure you drag the layer on second place :
Then with the arrow keys place it like me:
Let's add a layer style for this small black rounded rectangle
. now we will add another details.
The most important think is to add one more time shadow on the grey rounded rectangle. Please follow the first steps from this tutorial.
Now create another document 30 x 30 pixels with a green
background (it is not important the color but it should be
something different from white so you can see better what i am doing)
Zoom this document at 1600 %
Then with the Pencil Tool and with an white color create
something like this:
The image from above is resized at 50 %
Now with the Rectangular Marquee Tool select the white
line and with the Gradient Tool make something like this:
Then Make another selection:
With this selection press Ctrl+C and then Ctrl+V .Then
press on Move Tool,
then go to Edit > Transform > Rotate 90 CW.
Then place the new layer like me:
You can notice that i have used the blue color instead of the black one.
When you drag this document to our layout it will look very good, and this document will blend very good on our layout.
With the Magic Eraser Tool delete the green color. Select the Move Tool and drag this on the template.Now place the new layer like on the
following photo (I have duplicated a few times the layer (the one we have just made before) and i have rotate to fit with my template)
If you have question please register and ask me . i will answer to all your question.
If you want to download the PSD file view Attachments
this is my final image:






More Photoshop: