ArtBox7.com

Create a company/business web layout using Photoshop

Hello and welcome to another tutorial here at ArtBox7.com

Today I will try to create a light psd template and I think this one can fit pretty well for a company website layout, business photoshop template and why not for a portfolio layout…

To obtain the similar photoshop template you will need to have some of our vector icons, but I recommend you Complete Set. With this one you will receive all of our vector packs, photoshop brushes and icon packs. Beside that you will support us to create more photoshop tutorials which will be released for free, of course.

Now let’s start the tutorial. Here’s my final result:

For this tutorial I have used a framework called 960 grid system. You can find more about it and you can download a template, here: http://960.gs.
I have downloaded this file. After you will unzip it look for the “templates” folder. Here open “photoshop” folder and then choose 960_grid_12_col.psd.
Usually I work with the guides turned off  ( in Photoshop – View > Clear Guides).

Step 1

If you think 960 gs is not for you, or you don’t like to use, just fire up photoshop and create a new document (Ctrl+N). I have chosen the following dimensions:

Step 2

Select gradient tool (G), make sure that you have added the following colors to your gradient editor,

and then with the mouse drag from the top to the middle of the document.
Here’s my result:

Step 3 -  The logo

Logo is quite easy to create. Using “Tw Cen MT Condensed” font I have typed artbox7.com

Step 4 – The navigation

For navigation I have used “Helvetica CE” font with the following layer styles:

Next with Rectangle Tool I will add a shape on the top of the Home text.

Here’s my result so far:

Step 5

Below the navigation I will add a line which will make the separation between the navigation and the slideshow.
Grab line tool, and drag a similar line. Mine has this dimension (px): 938 X 1
Here’s my result:

Step 6 – Creating the slideshow

Select rectangle tool and create a rectangle with the following dimensions: 903X318px. As a color I have chosen   # f1f1f1
Next I will add an image for the slideshow. Here’s my result:

Step 7 – Creating navigation buttons for the slideshow:

Select ellipse tool and create a circle (on the left side of slideshow).

Then apply the following layer styles:


Here’s my result:

Next select pen tool (P) and create a triangle on the top of the circle, than fill it with black:

Duplicate this triangle, make it smaller and change the color to white.
My result:

To create the button from the right side, you will need to duplicate this button, link the layers, than with free transform (Ctrl+T) flip it horizontally.The slideshow is done.I will move to content area now.

Step 8 – Creating the content area:

Select rectangle tool (U) and create a similar shape. Mine has the following dimensions: 903X469. As a color I have used: f1f1f1
Having rectangle tool selected, create another shape on the top of the shape created on previous step. This time I have used this color: #b5d6e7
Next I will add a welcome text and I will create an button (so called  “call to action button”). For this button I have used rounded rectangle tool with a radios of 7px and I have applied the following layer styles:

Besides the layer styles I have added an vector icon from my design shop…to make the button look better (to make it eye catching). You can make a great deal if you will buy my Complete Set, but if you’re interested only in icons, you can buy all my packages with Supreme Icon Set. Vector icons are one of the best, because I can increase the resolution or decreasing it without losing the quality (compared to raster images….)
Here’s my result:

Step 9 -  Adding the content.

This is one of the simplest thing. All you have to do is to select type tool (T) and to add your desired text and then, if you have Complete Set, or Supreme Icon Set, you can add some icons to enhance this area and to make it more eye catching.
The final step will be to add some copy write text at the bottom of the template.

Well, our astonishing template is finished now. If you don’t really like to final result, you can polish it by yourself, all you have to do is to download it from our shop. Yes, it’s free!
At the end I would like to remember that in our shop we have some vector packs, vector icons and photoshop brushes packs which are worth every penny.  Every designer should have them, because are very useful, not only for print, but also to create astonishing web templates, banners….

Download here Download all templates