Today i will show you how to create another layout for a Tutorial website :)
This PSD is available only for VIP members
This is the Tutorial Number 93 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

So let's start with a new document
Size 760 x 770 pixels
Background color: #253a4f
Now create a new pattern
Create another document:
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
To learn more about patterns , please visit the following link.
talk-mania
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

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

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

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

Now reduce the opacity for this layers to 90 %

Grab one more time Rectangle Tool and create another rectangles
This time use this color: #111111

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

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

Now add some text

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





This is the result

Now add more images and text on your layout

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

Please select all the layers with black shapes.

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

No comments:
Post a Comment