Layout for Tutorial Website

So let's start with a new document

Size 760 x 770 pixels

Background color: #253a4f

Now create a new pattern

Create another document:

Click to enlarge

Zoom this document to 1600% and with the Pencil Tool Draw 3 points:

After that go to Edit > Define Pattern...

Choose a name for your pattern and press OK

Then you can close this 3 by 3 pixel document , and go back on our main layout

Create a new layer ( press Ctrl+Shift+Alt+N )

Select Paint Bucket tool,

Use the following settings

Then click one time on your canvas

Then add the following layer style

This is the result

Now create a new layer ( press Ctrl+Alt+Shift+N )

Select Brush Tool ( Use a big grunge brush - You can find a lot of grunge brushes if you search with google )

And make some random drawings with your grunge brush

Change the blending mode for this layer to Linear dodge

Click to enlarge

Then select Rectangle tool , and create a big shape with white. Then change the opacity value to 20 %

Click to enlarge

Rasterize the white shape ( Layer > Rasterize > Shape )

Now Select Eraser Tool, Choose the spatter brush ( 46 pixels )

This brush you have already in your photoshop

Then start to erase some parts of the white shape

After a few minutes this is what i have

Click to enlarge

Basically i want to create a nice border for the shape

Now with the Rectangle Tool create some shapes, and place then like me

Use the following color #252728

Click to enlarge

Now reduce the opacity for this layers to 90 %

Click to enlarge

Grab one more time Rectangle Tool and create another rectangles

This time use this color: #111111

Click to enlarge

Then Add another rectangles , but this time use the following color: # 3e3e3e

You can notice that i have added also some text

Select Type Tool , Choose a random font, and use a small size. with this settings create some dots lines " ........ "

And place this lines like me (you can also merge all the layers with dots - to merge all the layers, select the "dots" layer and press on Ctrl+E )

Now select Rounded Rectangle Tool ( set the radius to 10 pixels ), and make a simple shape

Then rotate the shape to 45 degrees ( to rotate the shape press Ctrl+T ) and you can change the settings very fast.

This is my result

Then create another 5 shapes with Rounded Rectangle Tool,

After you rotate the shapes , place the shapes like me

Click to enlarge

Then for the big shape add the following layer styles

This is the result ( for this layer you can also change the opacity settings to 90 % )

Now apply the following layer styles for the other shapes

This is the result

Click to enlarge

Now add some text

Click to enlarge

Now for the Talk-Mania text i will add the following layer style

This is the result

Click to enlarge

Now add more images and text on your layout

Click to enlarge

Also you can add one more time some dot lines

Now i will add some arrows near the navigation text

Create a new layer ( press Ctrl+Alt+Shift+N )

Zoom your document to 1600 % , and with your pencil tool create ( set the brush to 1 pixel ) something like in the following image

Please use 2 different colors

Then duplicate this small layer as many times you want, and place it near each tutorial category

This is My result. You can leave the layout as it is right now, or you can go further with another method

Click to enlarge

Please select all the layers with black shapes.

Click to enlarge

Then press on Ctrl+E to merge all the files

Select Eraser Tool, Set the brush to Spatter brush 46 pixels, then start erasing the margin of the blacks shapes

This is my final layout

Click to enlarge

I hope you like it