Hello. This is our first tutorial here on Free-stock-graphics.com. If you don’t know already we will create a premium website only with free premium downloads.
Soon you will find here on our website one of the best resources: vectors, icons, templates, wordpress themes, PSD files, so please bookmark our website and come back often to download some very good resources.
If you need different types of resources, please leave a comment at the end of the post.
Now let’s start with the tutorial. In this tutorial i will show you how to create a clean business layout. You can use this layout also for a wordpress theme, or for a portfolio layout. This is the final result.
For start open a new document with the following size: 1200×1200 pixels. Fill the background layer with the following color: #e8e8e8, and then with Rectangle Tool create a new shape. use the same colors i have used.
With Rounded rectangle tool create a dark shape
On the bottom create a new shape with Rectangle Tool. here we will place some links later in this tutorial.
On the top of the layout i will create another shape.
I will use a colorful image, which will be placed on the top of the layout.
With pen tool create a shape like in the following image
Then go to Filter > Blur > Gaussian Blur, and use a value between 10-15 pixels. The previous shape will look blurry. This shape will be used as a shadow for a big shape which will be created in the following step..
With Rounded Rectangle Tool create the following shape, and place it like in the following image.
The layer styles i have used for this are shown bellow
I will select Horizontal Type Tool, and i will add some text over this layout.
With Line tool i will create 4 lines
Then i will place some icons like in the following image. To add another images, or icons on your document go to File > Place.
On the footer of the layout i will create a shape
Then i will use the following layer styles, which are very important, and you need to follow exactly the same settings if you want to have the same result as mine.
This is the result so far
On the right side i will create another shape, and of course i have used the same layer styles as above.
I will create a new document with the following size: 15 x 7 pixels, and after i will zoom it to 3200 % i will create a triangle like in the following image.
I will go to Edit > Define Pattern. i will choose a name for my pattern, and i will click on OK. Then i will close the document because i will don’t need it anymore.
I will come back to my business layout, and i will make a new layer on top of all layers ( the shortcut is CRL+ALT+SHIFT+N ), and then with Rectangular Marquee Tool i will make the following selection.
Select paint Bucket Tool, and select the pattern you just created a few seconds ago, then click inside your selection.
This is how it will look the pattern over your layout.
Do not forget to add the following layer styles on for this layer
Do the same on the bottom part, but this time please be careful when you choose the settings for your layer styles.
On the footer of the layout, i will create a dark line with Line Tool
Then right above this line i will create another line with a lighter color.
Add as many lines as you need
This is how my website will look like so far.
On the top of the layout i will create some circles. These circles will be used for the jQuery slideshow. Later you will learn also how to create such a slideshow.
For all these layers i will use the same layer styles.
Then on the top i will add a new shape with Rounded Rectangle Tool. This shape will be used to create a search form. Please use the same layer styles i have used for the small circles.
One of the last steps is to add some bullets on the footer, near each link.
This is the final result.
If you like this layout please download it , and use it as you like, but please try to link back to us or at least share this tutorial via the social bookmarks networks.
Want this freebie? Enter your email and get it now!
Simply enter you're email address and the download link will be sent right to you're inbox.