Let's start with a new document with the following size: 960 x 900 pixels. With Gradient Tool, add a simple color over your background layer
Select Rounded Rectangle Tool (set the radius size to 6 pixels) and create 2 shapes. The first one we will use a top navigation and we will add buttons later in this tutorial. And the second one will be our body of the website where we will place our main content
For the top navigation bar add the following layer styles
On the top navigation bar I will create a button
You can create this button with Pen Tool, or you
can create with Rounded
Rectangle Tool, and then apply a warp effect
Load the selection for this button (rasterize the shape first)
You will see a selection around your button
Move the selection with Arrow keys a few pixels to the bottom
Create a new layer (press CTRL+SHIFT+ALT+N) and with Brush
Tool, I will create a few points over my button, then I will move
the selection back to the original position, and I will add more
drawings with the Brush Tool.
Note: I have used a Wacom Table to create this white drawing over my
button. I have full control over the pen pressure, and I can create
smooth drawing like this very easy. If you want to achieve the same
effect, you can use a round smooth brush, and you can lower the opacity
for the brush to 50 %
Please keep in mind this effect, because we will need the same effect
later in this tutorial
I will create a few shapes with Rounded
Rectangle Tool
I will add the same layer style for the black shapes
This is my result
With the same method as above I will add more buttons on different parts of the website
Now I will add some images, and some text
In the middle of the layout I will add another image from a popular game
Over the button I will add some shapes and some text. For the shapes I will lower the opacity of the layer to 15 %
Over the image I will create another rectangle, and I will cut the top part of the shape
I will lower the opacity for this layer to 20 %, and then I will write some text over it
With Rectangle Tool I will create some shapes with different colors
I will add some small avatars and some text. I will also add some triangles made with Pen Tool
Right below this box, I will create a login Box. I will select Rounded Rectangle Tool, and I will create 2 shapes
Under The Login Text I will create 2 circles with different sizes. I will add some layer styles to create like a metallic text
Under this login box I will add some images and a dashed line made with Horizontal Type Tool
On the top navigation bar I will add some text and some flag icons
Between the texts buttons I will add a few lines made with Pencil Tool (set the brush size to 1 pixel) then I will erase the bottom and the top part of the line with a smooth brush
On the header I will add a logo (in a few days I will show you how to create nice 3D Logos in a few seconds)
On the right side of the header I will add 2 shapes, and some nice icons
Optional you can add a stock image right above the background image
To add a nice effect over this layout I will create another layer above all layers and with Brush Tool I will create some random drawings like in the following image
I will change the blending mode for this layer to Overlay. This is my final result
