Hi. This is my first tutorial here on www.insanelyaret.com. I really like this
website for the great platform. I think it will be a great website very soon.
implementing the points system will allow webmasters to share their knowledge, and
downloads. I think it is a very useful website.
Also i like the way people will be able to download. using the points. In this way
you will force the users to contribute
I hope this tutorial will be accepted By admins here at insanelyart.com
I will create a tutorial for a wordpress or for a company layout. you can use this
layout in different ways if you modify it a little
For start i will open a new document with the following size: 980x1000 pixels
I will use the following color for the background #f7f7df
with Rounded rectangle tool 
I will create 3 shapes
I will select the big rectangle ( placed on the bottom ) and i will right click on the layer ( inside your layer palette ( then i will choose Rasterize
Then i will Hold the CTRL key down, and with my mouse i will click on the red thumbnail 
You will see a surrounding selection around the red shape. Press on Delete keystroke from your keyboard 
This is the remaining image. What i tried to do is to create some smooth corners
After i have deselected the selection i have the following result
( press on CTRL+D to deselect )
I will change the color for both shapes to #19110f, then i will select both layers
in my layer palette, and i will press on CTRL+E ( merge )
I will select the merged layer in my layer palette, then i will press on CTR+J ( duplicate )
With this shortcut you can duplicate any layer you want. The most important part
is that you need to select one layer, before pressing CTRL+J
With Move tool, or right arrow key i will place the duplicated shape like in the
following image 
Then i will choose Edit > Transform > Flip horizontal 
This is the result
With Rectangle tool 
I will create another rectangle, and i will place it in the following way. I am
trying to create a continue shape
After that i will select all the brown shape, and i will merge them one more time
into a single layer
I will duplicate one more time the layer, and i will go to Edit > Transform > Flip Vertically
This is what i have so far
With Rectangle Tool and with the following color #332623 i will create a rectangle
Then i will right click on the layer palette on this layer and i will choose
Rasterize layer
With Ellipse Tool
I will create a small circle. I will use this circle shape to delete the corner
from the previous shape 
I will load the selection. You can do it in 2 different ways. The first method is to go to Select > load selection please note that this option will be available only if the layer is rasterized
The second method is to hold down the CTRL key, and with the left mouse button you have to click on the layer thumbnail
After the selection is ready, click in the same time on ctrl+shift+i ( inverse selection )
Grab ERASER TOOL
then select the rectangular shape, and delete the top right corner of the shape
This is my result
I will create another rectangles above the last one 
On the last big shape, i will delete one more time the left corner with the same
method
First you have to rasterize the shape
With Ellipse Tool
Create a circle 
Load the selection one more time ( by clicking on the layer thumbnail )
Inverse the selection ctrl+shift+i
And one more time with ERASER tool
I will delete the left corner of the brown shape, until i get this result
Again with Rounded rectangle Tool i will create a new shape with a different color #e8e7d3
With PEN Tool 
I will create some sort of corner with the following color #c4c4a8
I want to delete the right corner from the big shape. please notice that you have to rasterize the shape, then follow the steps from above
This is my result
i will duplicate both of them and i will place them like in the following image
With rectangle tool and with the following color #4d3d39 i will create another shape 
I will duplicate it a few times, and with the move tool ( press on V ) i will place it like in the following image

With Rounded rectangle tool and the following color #c4c4a8 i will create a few shape. We will place some buttons in that area
I will select one more time Rasterize Layer, then with pen tool i will create one more time the same corner as a few steps ago.
After i will delete the corner one more time ( i will not repeat the steps one more time )
I will show you only the end result
After that i will create another rectangle wit the same size, and with the following color #1a1b1d
For this rectangle i will use the following layer styles
Gradient overlay:
Stroke:
This is my result
I will duplicate the button a few times, and with move tool i will arrange them like in the following screen shot
i will create a search form, and a button right above the menu buttons
Again with Rectangle Tool i will create a simple shape.
i will add some layer styles
Stroke:
and this is my final result
The next step and one of the most important is to add text on your layout.
With Horizontal type Tool

I will write some dummy text
Then with Line Tool 
i will create a line with this color #c4c4aa
I will make a duplicate (ctrl+j) and with opacity 40% i placed the line right above the last one
it will give you a light effect, but believe me this small details will let you sign wonderful layouts. the more details you create the better will look your template or any design you try to create.
I will create another line with the following color #968c80
And i will place this line on the bottom of the layout
I will rasterize this line, then i will grab Eraser Tool. In the brush presets i will choose a brush with smooth edges
Again i will create another line with the following color #c4c4a8
And i will place it like in the following image
i will add some images from my stock photos collection, and with Move tool, i will place them like in the following image
Thank you very much for watching this tutorial. i hope this tutorial will be accepted by admins, because i have worked almost one day to write it.
Download Resource
4 Responses to this Post!
-
bubu says:Not bad as a designer.. Speaking about sharing knowledge i will think about starting to write some programming tutorials and see if the admins here at insanelyart.com will allow me to increase my budget so i cand download resources or maybe even promote myself that way.
Who knows...
Anyway, great layout, nice job!






Do you know you can leave comments, and you will earn credits. for each approved comment you will earn 1 credit. Short comments will be deleted.
On Insanelyart.com you can promote your products or services. You can even promote another products via affiliate links.
Do not forget to update your signature. Your signature can bring you thousands of visits to your website.
Write a tutorial and you can earn between 100-300 credits. Your tutorial will be visible to thousand of users
Upload resources and help other members. For each upload we will add 5-20 credits to your account
Resolve our simple tasks, and you can earn up to 300 credits.
For each approved comment you will earn 1 Credit. Short comments will be deleted.
I really like this tutorial and is great