This step by step tutorial will teach you how to create a colorful business layout. If you’re a member, you can download the PSD Layout for this tutorial at the bottom of the page.
Before I begin this tutorial, I want to tell you about our 60,000+ premium design items package, which you will be able to download instantly and use in your own or client designs. Become a member of Ultimate Designer Toolkit before you proceed to get instant access to all of them and design like a pro.
Now to begin this tutorial, we will need to create a new document. I will set the background of the document to #efefef
I will select Rectangle Tool, and i will make a big gray shape.
Then for this shape i will add the following layer styles.
In the middle of the previous shape i will add another one but this time i will use Rounded Rectangle Tool. Over this shape i will add a image with a nice bokeh effect
Also for this image i will add some layer styles.
Under the big image with this nice colorful layout i will create 4 different shapes. Try to use different colors.
Now i will create another layer ( press on CTRL+SHIFT+ALT+N ) and over this layer i will use Brush Tool with a smooth round tip to make the following drawing. It is easier to make a selection of the orange shape before you add the drawing with brush tool.
Then for this layer i will change the blending mode to overlay, and in the same time i will change the opacity to 50%
I will duplicate this layer with this nice lightning effect, and i will place it over the other shapes. Click on the following image to see better what i am talking about.
On top of the web layout i will create a new shape.
I will use the following layer styles.
Then i will create a small circle with Ellipse Tool
For this small circle i will add the following layer styles
Now it is very important to delete the bottom half of the circle. To delete the bottom part first you need to right click on the layer inside your layer palette, and then with Rectangular Marquee Tool make a selection over the bottom part of the circle. After that press on Delete on your keyboard.
Another way is to use the Eraser Tool, after you rasterize the shape.
If you don’t have already a membership with us i recommend you to signup now ( You can find the subscription button on the top of the website ) and you can download the following set of icons: Download 512 Vector icons
Open the .ai files inside illustrator, and then select each icon you want to use.
The steps are very simple:
Go to Adobe illustrator.
Select the icon.
Press on CTRL+C ( Copy )
Return to Adobe Photoshop
Press on CTRL+V ( Paste )
Do the same for all the icons
For all these icons i will add the following layer styles.
Between the buttons, i will add some vertical dividers. I will use Line Tool to add the lines.
Then for each line i will add the following layer styles.
The next step is to add a simple text logo. If you want another logos you can try to use the 3D Creator which helps you to convert each 2D shape into a very nice 3D shape
On the bottom of the slideshow i will add another shape with Rounded Rectangle Tool.
I will add the following layer styles.
Then i will add some circles which are made with Ellipse Tool. I will use the same layer styles i have used for the top vector icons
With Ellipse Tool, i will crate a new shape.
Then i will load the selection for the orange shape.
And then i will make sure the white circle is rasterized, and i will delete the outer part of the white shape. Your result should be the following one.
For this white corner i will add the following layer styles
I will duplicate all the corners, and i will move them over each box.
Then i will add another icons, and some text.
On the bottom of the shapes i will add some lines ( please click on the image to see better ) , and of course some text.
One of my last steps is to add another text with horizontal type tool.
This is my final result. I hope you like it. You can use this web layout not only for a business layout. With slight modifications you can use it also for a wordpress theme.
Download the PSD below.