Mar
Design a dark business layout
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
- This awesome set with 200 pixel patterns
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
- 135+ Simply Fresh and Useful Articles for Designers and Developers | tripwire magazine
- March’s Fresh Photoshop Web Layout Tutorials
- De beste Photoshop webdesign tutorials « Robbert over WordPress
- 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!
- 60 Web Design Photoshop Layout Tutorials From 2010 « Huy Nguyen's Blog
- 60 Web Design Photoshop Layout Tutorials From 2010 – Design Today
- 60 bài hướng dẫn thiết kế weblayout cực hay « Vietxitin's Blog
- 60 Web Design Photoshop Layout Tutorials « moemir
- 30 Fresh Web Layout Design Photoshop Tutorials
- 60 Web Design Photoshop Layout Tutorial |
- 30 Fresh Web Layout Design Photoshop Tutorials « Design Invader
- 30 Tutoriales Photoshop para Diseño Web « ——— BLOG ADESIGNS ———
- 80 Fresh Photoshop Tutorials For Creating Awesome Websites | Creative Nerds
- 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
- Ultimate Roundup Of Photoshop Web Layouts Tutorials
- 82 Resources to learn Web Design, Bulgarite.ca.
- Best Web Design Tutorials to Take Your Creativity to the Next Level - Part 1
- Aprende a Diseñar Web con Photoshop | Fotografía y Diseño
- Web Design Tutorial: 30 Awesome Layouts In Photoshop | webaligns





















































Excellent tutorial with Brilliant web layout
Thanks so much for posting & sharing it
I learn a lot
Keep up good work
God bless you
Another great tutorial. I’d really love to see one on how you make the grafpedia logos that you drop in. Did you have to type each character out individually and then style them? I’ve been hoping there is an easier way.
perfect
very nice tutorial, I would say great one.
Very slick tutorial.
I’m a fat fan of short easy to follow tutorials; this hit home as one of the best.
Nice work and great tutorial. Thanks.
Nice layout and good tutorial.
I like it!
I think this whole webdesigning with photoshop is amazing, ive made something similar with Illustrator but it was way more complicated and the web stuff was made with a different program. I have a question and was wondering if someone could answer, If a web layout like this is made, how would i add the links to each section or each one of the tabs? Is that made when ever the domain is bought? Thank you!
awesome