Creating a Professional Business Layout Using Photoshop
Posted on 01. May, 2008 by Web Design in Photoshop
Designing a Simple but Professional Business Website Design
Well, for this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact!
1. Document & Background
Obviously the first thing we’ll want to do is create a new document in Photoshop! I used a standard document size of 1000 x 900 pixels, but we won’t be using the entire size of the document. Now we want to make a nice, suitable background for the design.
Start with the background by filling the canvas with a dark-ish grey-blue color (or any color you like). For this I used #4c535b. Next, we need to find a simple pattern we can blend into the background. For this you can find some nice patterns over at SquidFingers. Fill a new layer with your chosen pattern then erase away the pattern except for one corner:
Next, lower the opacity for your pattern layer to around 10-20% and change the layer mode if you want something more unique. For the layer mode I usd Luminosity.
That’s a pretty neat effect right there! That’s all we’ll be doing for the background, unless you have a good idea for something more.
2. Navigation Bar
For the navigation area, find and get out the Rounded Rectangle Tool and set the settings for the tool like I’ve shown here:
OK, after you’ve got the settings, draw a rounded rectangle onto the canvas (after you’ve made a new layer). Now cut the bottom part of your rounded rectangle off, so it has a flat surface on the bottom.
Please note: it doesn’t matter what color you used for the navigation bar shape. Next, apply the following layer modes to your newly-made layer:
And now we have a result like this:
I finished off with the navigation bar effects by adding a slight hightlight to the top of the bar (use one pixel) and also a shine kind of thing at the bottom of the bar.
If you’re unable to add these, don’t worry about them, they’re not important. Lastly for the navigation bar we need to add text! Start by getting the text tool and writing out your navigation buttons using the font you like.
You’ll want to make plenty of space between each of your links, so that there’s room for a nice divider. You may also want to apply a Drop Shadow to the text to make it stand out a little bit more.
To finish this part of the tutorial off we’ll add some simple dividers inbetween our links. Start by getting out the Pencil Tool and making a new layer. Using the smallest brush available (1 px) brush a few dots onto the canvas, like I’ve done here:
Duplicate your divider and move it along so it’s inbetween the other links. Do this as many times as it takes then merge them all together. To finish off, apply a simple Drop Shadow to the now-single dividers layer.
3. Base Area
Now this is a really easy part. All you have to do is create another rounded rectangle shape underneath your navigation layers. What you have to do though is hide the top part of your ‘base’ shape underneath the navigation bar, otherwise delete the top part. Like this:
Very easy! Finish off by adding your copyright notice underneath.
The perfect font for this is ‘Arial’ and it comes with Windows. Use a size of 11 pt, all caps.
4. Header / Banner
Find a nice stock photo from a website such as iStockPhoto for the banner image.
Copy your stock photo onto the canvas and crop it to the width of your ‘base’ layer. After you’ve resized it and cropped it (something around 130 pixels in height will do) you might want to make some adjustments to the picture, possibly to make it stand out better.
To finish off with the header, add some text/a logo that you may want to come up with! I just used some basic text for the business name and slogan beneath it:
To make your text stand out better on a photo better you may want to add an outer glow using a dark color from the background. The two fonts that you can see in the above image are NeoSans, and Myriad Pro.
5. Content Area
Alright, we need to add some text and maybe some interesting images inside of the content area, this is to explain ‘what we do’ and some other stuff. Start by making a heading with the text tool.
Alright, add some dummy text below the heading, then a stock photo if you think it will look good!
Obviously, since this is just a dummy text, I’ve added in some random text *cough*
6. Client Login
Every web host website should have a client login area, if not a link that leads to the client login area. Start by getting the Rounded Rectangle Tool out and make a shape onto your canvas, around 220 x 105 pixels is a good size.
The color isn’t particularly important, but use a dark grey for it. Change the fill for this layer to 10%, then apply the following layer styles:
Add the necesary text and all that, including some boxes that you’re meant to put the text in, and this is what I’ve got:
Obviously it would take me a while to explain every detail about adding all of that stuff, so please download the PSD at the end of the tutorial and you can see all of the layers!
7. Special Deal Button
Just for a nice touch we’ll add in a button to the sidebar that will state what sort of hosting deals are going on. Start by making another rounded rectangle, or duplicate the one you used previously.
As you might observe, the shape also has a dark gradient inside of it, the colors used were #3f3f3f and #292929. Now add in some text for your banner.
As you can see, the font used in the above image is Myriad Pro, various weights & sizes. Mess around with some different fonts and sizes and you’ll get something nice.
I thought it was still a little boring, so I added in a few extras:
- Add in a dark star shape, lower the opacity to blend it into the main shape
- Add a nice highlight to the top of the rectangle shape
- Finish off by adding another dark gradient to the bottom of the shape
8. Testimonials
What site would be complete without testimonials? 
Let’s start by making another rounded rectangle in the sidebar area, use the color #c3c3c3 for making this shape.
After you’ve made the shape, copy the layer style from the client login box and paste it onto your new box.
Now, using Arial as your primary font, add in some random filler text, and a name underneath, like so:
Now duplicate all of your testimonial layers and move them down a little bit so you have two.
Complete
Well, we’re done for this tutorial! I hope you enjoyed it, if you have any questions please feel free to leave a comment below, but be sure you’ve checked out the PSD file before you ask a question!
Loading ...
Sahil
24. May, 2008
That was good tutorial but could you make a tutorial on how to make this PSD into an html site. The slicing and other stuff?
Tony
31. May, 2008
Good Tutorial, Thanks!
SIDY
31. May, 2008
hello nice tuto
but how do i proceed to fill new layer with the chosen pattern
Can’t Afford A Landing Page? Try Designing One
02. Jun, 2008
[...] Creating a professional business layout [...]
Luke
03. Jun, 2008
yeah, as Sahil said: awesome tutorial and I just made something I’m really proud of… now how do I add the HTML? Thanks for the help!
Luke’s last blog post..May Income Report
Daniël
11. Jun, 2008
Hey, Great design and great tutorial but i have 1 question
would you be able to upload or give us/me an link to the
NeoSans Bold Font? i would really appreciate it!
Raj
14. Jun, 2008
nice tutorial again. Thanx m8!
Tom - StandOutBlogger.com
16. Jun, 2008
You make it look so quick and easy
nice design as well!
Tom – StandOutBlogger.com’s last blog post..Fixed Problem With RSS Feed
Ann
26. Jun, 2008
Good tutorial but how do you go on to make it live with links etc
Tom
08. Jul, 2008
Thanks, great tutorial but same question for me.
How to make a real site out of it ? Having a great picture is useless now, I checked the other interface template tutorials and still no instructions to make this a functional website.
40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial]
20. Jul, 2008
[...] Creating a Professional Business Layout [...]
Photoshop ile yap?lan en iyi web arayüzleri » Sadece Bir Blog
21. Jul, 2008
[...] Creating a Professional Business Layout [...]
David
21. Jul, 2008
You shouldn’t put up a page of sliced photoshop for a web site. It needs to be coded and elements are placed on that page, not the whole image that you mock up in photoshop.
The best way, if you don’t want to learn, is have someone do it for you. There are plenty of places that turn mockups into valid xhtml pages, just do a google search.
Here are a couple:
http://www.xhtml4u.com/
http://www.xhtmlcoding.com/
David
21. Jul, 2008
Or have a look at another tutorial on doing it yourself:
http://nettuts.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
41+ En muhte?em web arayüz dizay dersleri | Tips & Tricks
23. Jul, 2008
[...] Creating a Professional Business Layout [...]
Githecha
20. Aug, 2008
What a wonderful tutorial i’m hooked to your site now!!!
Marc Norris
01. Sep, 2008
Definitely a great tutorial – I have been wanting to use Photoshop to make templates, but honestly, I have been too overwhelmed.
I will be sitting dowwn one afternoon to try this step by step – thanks again for the info!
Marc Norris’s last blog post..Learning How to Build a Business is a Valuable Skill
Chris
01. Oct, 2008
awesome although i have a photoshop cs3
I don’t know how to build a complete based web using photoshop application
thanks 4 the tutorial ,man
AllTuts
03. Oct, 2008
Designing a Simple but Professional Business Layout…
In this tutorial you will learn how to create business-themed layout using Adobe Photoshop.
……
Sam
14. Oct, 2008
nice tutorial, thanks.
i will try this.
Sacha
09. Nov, 2008
Very good tutorial but how could i open the psd file?
Because when i download it, and i want to read it whith photoshop it tells me that rar file are not supported.
Thanks
Tony
07. Jan, 2009
Very useful tutorial, thanks
Tony’s last blog post..From One Cold To Another
Rajita - Web design
09. Feb, 2009
This is perfect way to show a learner like me to learn to design a web interface
Shravan
09. Feb, 2009
It’s very usefull while anybody are going to build their own
website.
Thanks
design king
04. Mar, 2009
I wanted to comment and thank the author, good stuff
oscommerce
21. Mar, 2009
thanks for this great resource. i barely wait to do it myself.
Michael Podgoetsky
22. Mar, 2009
This is obviously coming from professional.I really would like to ask you about cloning and then changing the webdesigns. Is it just a matter highlighting the website and then paste it into the HTML editor? is it as simple as that? Pure facination of mine. I feel it is like copy your document and paste it into editor. Is it as simple as that?
regards
Michael.
jimmy
21. Apr, 2009
Nice design tutorial, but useless as a website. You don’t want your title, headings, or content displayed as images. You’ll never be recognized in search engines.
Use it as a background, but every word that appears on your website should be coded in html.
sean potter
09. May, 2009
Nice and informative site. Keep up the good work.
marc andrew
09. May, 2009
Normally I don?t comment on sites but your article was good.
lonwabo
07. Jul, 2009
im trying my best with your wonderful tutorial good work guys.
clippingimages
28. Oct, 2009
WoW
Awesome tutorials. Thanks for sharing this nice post.
Gli stili nel web design: le caratteristiche del corporate style | Your Inspiration Web
08. Feb, 2010
[...] Creating a professional business layout [...]