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).
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:
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
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
Step 7 – Creating navigation buttons for the slideshow:
Next select pen tool (P) and create a triangle on the top of the circle, than fill it with black:
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…. br>
- 50+ cool web layouts photoshop tutorials | OffsetPrint.info
- 16 tutorials using photoshop to build a website | Web and designers | Helping web designers and developers
- 16 tutorials photoshop to design website – ออกแบบเว็บด้วยโพโต้ช็อป |
- Professional web designers and web 2.0 experts » Blog Archive » Best Photoshop Website Layout Tutorials of 2009
- Best Photoshop Website Layout Tutorials of 2009 | JKookServ Hosting Blog
- 60+ Fresh Hot New Tutorials From Around The Web | designrfix.com
- Best Photoshop Website Layout Tutorials of 2009 | iDESIGN
- Stwórz firmowy/biznesowy layout strony wykonany w Photoshop | Evangellion
- Os melhores tutoriais de Layout de 2009 « Upmasters
- 50 tutoriais de layous profissionais
- Những bài hướng dẫn hay nhất về thiết kế giao diện web năm 2009 | Hutek.info
- Best Photoshop Website Layout Tutorials of 2009 : VNS Blog