GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

18
Mar

Design a dark business layout

Psd Themes, Templates, Tutorials, Web layouts
28 Comments

In this tutorial I will use only a few colors to create a dark business layout.With small modifications this layout can be used also as an wordpress blog.

It is very important to use patterns in your layouts. We have a set with 200 seamless pixel patterns, and this little piece of graphics can change the look of the website very much.

All downloads are available for VIP members only.

For this tutorial you need the following

Create a new document in Photoshop with the following size: 1000×1100 pixels. Change your foreground color to #2c2c2c, and then with Paint Bucket Tool press one time over your document.
Download the following set with 200 Photoshop seamless pixel patterns

Load the patterns inside Photoshop, and then create a shape with Rectangle Tool , at the top of the website.

Add the following layer style

You will find the pattern here

You can try to use also another patterns if you don’t like this one.
Here is my result so far

With Pen Tool I will create a button on the top side of the layout.

I will add some layer styles

Here is my button so far, and as you can see I will add there also some text

I will create another shape with Rectangle Tool ( I will use the following color #131313 )

With Pen Tool I will create another shape under this black shape. ( I will use a red color for this shape to see it better, what I am doing) Anyway I recommend you to use the same color as above ( #131313 )

To create this type of shape it is very easy if you turn the grid on ( CTRL+” )
I will select both layers in my layer palette, and then I will press on CTRL+E to merge them into a  single one.
I will add the following layer styles

This is my result. please press on the following image to see the details better.

With Rounded Rectangle Tool I will create some shapes like in the following image

Select all the grey shapes in your layer palette, and press on CTRL+E to merge them into a single one, then add the following layer styles

Here is my result so far.

With Rounded Rectangle Tool I will create another two shapes. The top one will be used as a search box, and the one from middle of the layout will be used to place there some news

For both shapes I have used the same layer styles

With Pen Tool I will create another shape on the bottom of the website

I have used the same layer style I have used for the slideshow.
I will create two small circles, and I will place them right above the background layer.

Now it is time to add some images. I will use a bokeh effect. You can see how I made the effect in this tutorial.

My final step is to add also some text.

Want to download this layered PSD layout? Register for a VIP account and get unlimited access to our huge collection with over 70.000 items + you will have also 12 months free updates.

Download 646-671 tutorials to learn how to create business web site layouts. Become expert using 642-691 resources and 642-262 video tutorials.

Responses to “Design a dark business layout”

Trackbacks

  1. 135+ Simply Fresh and Useful Articles for Designers and Developers | tripwire magazine
  2. March’s Fresh Photoshop Web Layout Tutorials
  3. De beste Photoshop webdesign tutorials « Robbert over WordPress
  4. 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!
  5. 60 Web Design Photoshop Layout Tutorials From 2010 « Huy Nguyen's Blog
  6. 60 Web Design Photoshop Layout Tutorials From 2010 – Design Today
  7. 60 bài hướng dẫn thiết kế weblayout cực hay « Vietxitin's Blog
  8. 60 Web Design Photoshop Layout Tutorials « moemir
  9. 30 Fresh Web Layout Design Photoshop Tutorials
  10. 60 Web Design Photoshop Layout Tutorial |
  11. 30 Fresh Web Layout Design Photoshop Tutorials « Design Invader
  12. 30 Tutoriales Photoshop para Diseño Web « ——— BLOG ADESIGNS ———
  13. 80 Fresh Photoshop Tutorials For Creating Awesome Websites | Creative Nerds
  14. 60 Web Design Photoshop Layout Tutorials From 2010 | My Free Design Area - A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, Html template
  15. Ultimate Roundup Of Photoshop Web Layouts Tutorials
  16. 82 Resources to learn Web Design, Bulgarite.ca.
  17. Best Web Design Tutorials to Take Your Creativity to the Next Level - Part 1
  18. Aprende a Diseñar Web con Photoshop | Fotografía y Diseño
  19. Web Design Tutorial: 30 Awesome Layouts In Photoshop | webaligns

Leave a reply

.