Design a Clean Business Layout

Templates, Tutorials, Web layouts 21 Comments

Design a Clean Business LayoutThis tutorial will teach you how to create a clean portfolio layout, or business layout. A few days ago someone asked me to create a tutorial without so many details. I will show you how you can create a very simple layout in just a few steps. You don’t need to be a pro to create such a layout.

Want to download this PSD layered business layout ? Register for a VIP account, and you can download all resources from this site, and you have 12 months free upgrades.

Things you need to create this layout

Download some great icons
Vector icons

Create a new document in Photoshop with the following size: 1000 px wide, and 1100 px height.
I will set my foreground color to #1e1e1e, and with Rectangle Tool I will create a shape on the top of this business layout.

I will create a new layer ( press on CTRL+SHIFT+ALT+N )
With Brush Tool I will press one time over this new layer.

I will change the Blending mode for this layer to ” Soft light “. You can change the blending mode from the top of your layer palette.
This is my result

I will select both layers in my layer palette, and I will press on CTRL+E ( merge ), then I will go to Filter > noise > Add noise, and I will use the following settings

With Rectangle Tool I will make a navigation bar

I will add the following layer styles

This is my result so far

Under this Navigation bar I will add a shape with Ellipse Tool. Click on the image to see better.

Then I will go to Filter > Blur > Gaussian blur and I will use the following value:

With Horizontal Type Tool I will write some text over my navigation bar

Under the ” Blog ” word I will create a shape with Rounded Rectangle Tool

For this white shape I will add the following layer styles

This is my result

The next step is to fill this layout with text. please click on the following image t see better my result

I will open  the following icons in adobe illustrator: Vector icons

I will select some icons from this set from above, and I will copy them to adobe Photoshop. the process is very simple.

  • 1. Select the icon you want in adobe illustrator.
  • 2. Copy ( CTRL+C )
  • 3. Go to Adobe Photoshop, and paste the icon over the layout ( CTRL+V )

After you repeat these steps you will have the following result

I will select Line Tool, and I will draw some thin lines.

On the bottom of the layout I will add another dark shape , and in the same time I will add also some text with Horizontal Type Tool.
This is my final result. I hope you like it , and if you try to create this simple layout do not forget to leave a comment with your final result

Want to download this PSD layered layout ? Register for a VIP account and download ALL premium downloads from Grafpedia. Please note that you will have 12 month free updates. this means you will be able to download the next items we will release.

Download 642-415 video tutorials with  642-631 free  design  resources to learn how to create web layouts and become expert using 1Y0-A14 photoshop live demos.

Responses to “Design a Clean Business Layout”

Trackbacks

  1. 60 Web Design Photoshop Layout Tutorials From 2010 | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
  2. 60 Web Design Photoshop Layout Tutorials From 2010 « Huy Nguyen's Blog
  3. 30 Fresh Web Layout Design Photoshop Tutorials
  4. 60 Web Design Photoshop Layout Tutorial |
  5. 30 Tutoriales Photoshop para Diseño Web « ——— BLOG ADESIGNS ———
  6. Ultimate Roundup Of Photoshop Web Layouts Tutorials
  7. February’s Fresh Photoshop Web Layout Tutorials
  8. pligg.com
  9. Aprende a Diseñar Web con Photoshop | Fotografía y Diseño

Leave a reply

.