How to create a clean business layout in a few steps
Hello my friends. Today i will show you how easy is to create a clean business layout. This layout can be used for any CMS you like, and if you really want to convert this PSD Layout into a valid css/xhtml layout, then i suggest you to try to convert this PSD layout into a Drupal theme.
Step 1 – create a new document
So let’s start working. Of course you will need to create a new document. Go to File > New, and create a new document with a white background. The size of the layout should be more than 960 pixels wide. I am sure most of you are curious why i am using this value a lot. The answer is very simple:
- Your layout will fit on 99 % from monitor
- You can divide this layout in 1, 2, 3 , 4, 6, 12 columns.
Step 2 – Add a background color on this drupal layout
Set your foreground color to #e2e2e2 and with Paint Bucket Tool, press on time on your canvas.
With Rectangle Tool i will make a horizontal shape like in the following image
Step 3 – Add some layer styles for this horizontal shape
If you need over 11.000 gradients then i recommend you to register for a premium account, and you will be able to download all our resources, including some nice sets of Gradients
Step 4 – Create the body of the layout
With Rectangle Tool, i will create a big white shape like in the following screen shot.
Step 5 – Make a trapezoid shape
Select the big white shape, and go to Edit > Transform > Perspective. With your mouse pointer, drag the right corner of the shape to the right while you hold down the SHIFT key. You will notice that your straight shape will change to a trapezoidal shape.After you are happy with your shape do not forget to hit on Enter ( return )
For this shape please add the following layer styles
Step 6 – Create the navigation bar
I will select pen tool and i will make a nice navigation bar like in the following image. As you can see the navigation bar has an unusual shape. Here we will place some text buttons later in this tutorial. If you know some css, you can create also a nice looking drop down menu.
I will add some layer styles for this navigation bar.
This is my result so far
Step 7 – Add some thin lines for a nicer effect
Select line tool, and create 2 white thin lines. The best looking lines are 1 pixel lines like in the following example.
Step 8 – Add your own logo
For this tutorial i will use a simple logo which was made with Type Tool
Here are the layer styles used to create this logo. This effect will be used later on this tutorial when i will create a search box.
Step 9 – Add a jquery powered slide show
In this tutorial i will not show you how to code this layout to a valid css/xhtml website, and neither i will show you how to create a ajax slide show, but it is very important to place the main parts of the website in this layout. I will show you only how to design a layout for a content management system like Drupal, and it will be nice if you will create a nice slide show right under the navigation area. This area is one of the most visible area of the website. As you can see i have placed under my navigation bar a big image with grass.
Step 10 – Always use icons to create gorgeous layouts
I will use one of our vector icons. If you want you can register for a Premium Account, and you will be able to download the following vector icons : Download Vector Icons
In the pack from above you have each icon in 7 different sizes ( 16×16 px , 24×24 px, 32×32 px, 48×48 px, 128×128 px, 256×256 px, and 512×512 px ). For this tutorial i have used the 128×128 pixels icons, and i have resized the icons to around 100 pixels. To place the icons on the layout is very simple. Go to File > Place. Browse your computer and choose any icon you want and then with Move Tool you can place it where you want.
Step 11 – Add text on your Drupal theme
With Horizontal type tool i will add text on my web layout.
Step 12 – Add details on your layout
I will use Horizontal type tool to write some minus signs, to create a nice looking horizontal divider. Small things like this will change the overall look of your website. maybe you will not believe, but these small things will make the difference between a pro and a newbie
Step 13 – Create a search box
I will use Rectangle Tool to create a nice looking search bar. I have used the same layer styles i have on my text logo with graphstock
Final result
This is my final result. As you can see from a few steps you created a nice looking layout ready to be converted to a Drupal theme
Want to Download this PSD layout?
We have a Premium membership which allows you to download all our premium resources, including this PSD layout. Please note that each account will allow you to download also the next releases. Register for a premium account.
If you are a premium member please download this PSD layout from here
great layout, thanks!
Great tutorial.
Looks just perfect and awesome.
Thank you.
How to slice and code?
where is the DRUPAL part to this tutorial?!
Thank you Tirath. Your comments makes me write even better tutorials
Excellent tutorial
Thanks so much for your valuable post
I learn so much for you
Keep doing good work
God bless you
Might be difficult for content enlargement… :/