Home >> Adobe Photoshop >> Creating a Professional Business Layout Using Photoshop
Creating a Professional Business Layout Using Photoshop

Creating a Professional Business Layout Using Photoshop

Designing a Simple but Professional Business Website Layout

Well, for this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact! By the end of this Photoshop tutorial you will know how to create a professional business layout.

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:

Pattern Blended into Background

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.

Layer Mode and Opacity Changes for Pattern

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:

Rounded Rectangle Tool Settings

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.

Navigation Rounded Rectangle Shape Added

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:

Layer Styles Added to Navigation Bar

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.

Highlights Added to Nav 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.

Navigation Text Links Added

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:

Pencil Tool used to Make Divider

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.

Dividers Duplicated

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:

Base Shape Made

Very easy! Finish off by adding your copyright notice underneath.

Copyright Notice Text

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.

Banner Stock Photo Added

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:

Text and Slogan Added

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.

Text Heading Added

Alright, add some dummy text below the heading, then a stock photo if you think it will look good!

Headings, Dummy Text and Stock Added

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.

Client Area Rounded Shape

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:

Layer Style and Mode Changes

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:

Text and Stuff Added

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.

Deal Shape Created

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.

Myriad Pro Text Added

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:

  1. Add in a dark star shape, lower the opacity to blend it into the main shape
  2. Add a nice highlight to the top of the rectangle shape
  3. Finish off by adding another dark gradient to the bottom of the shape

Deal Button Finished

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.

Box Created

Layer Styles Pasted

Now, using Arial as your primary font, add in some random filler text, and a name underneath, like so:

Testimonial Filler Text

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!

Ultimate Designer Toolkit

About Iggy Ko

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

37 comments

  1. Sahil

    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?

  2. Tony

    Good Tutorial, Thanks!

  3. SIDY

    hello nice tuto
    but how do i proceed to fill new layer with the chosen pattern

  4. Luke

    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

  5. Daniël

    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!

  6. Raj

    nice tutorial again. Thanx m8!

  7. Tom - StandOutBlogger.com

    You make it look so quick and easy :D nice design as well!

    Tom – StandOutBlogger.com’s last blog post..Fixed Problem With RSS Feed

  8. Ann

    Good tutorial but how do you go on to make it live with links etc

  9. Tom

    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.

  10. David

    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/

  11. Githecha

    What a wonderful tutorial i’m hooked to your site now!!!

  12. Marc Norris

    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

  13. Chris

    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

  14. Sam

    nice tutorial, thanks.
    i will try this.

  15. Sacha

    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

  16. Tony

    Very useful tutorial, thanks

    Tony’s last blog post..From One Cold To Another

  17. Rajita - Web design

    This is perfect way to show a learner like me to learn to design a web interface

  18. design king

    I wanted to comment and thank the author, good stuff

  19. oscommerce

    thanks for this great resource. i barely wait to do it myself.

  20. jimmy

    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.

  21. sean potter

    Nice and informative site. Keep up the good work.

  22. marc andrew

    Normally I don?t comment on sites but your article was good.

  23. lonwabo

    im trying my best with your wonderful tutorial good work guys.

  24. clippingimages

    WoW :) Awesome tutorials. Thanks for sharing this nice post.

  25. Colton

    I don’t understand how that if you add text to it now, you can do it after you slice it up in imageready? Then the text wouldn’t be editable.

  26. HelionPrime

    that was awesome, a simple one ^^

  27. HarryAdney

    Excellent tutorial, as usual. It’s true what they say about how an expert makes something difficult look easy.

    I really enjoy this site and I’m using some of the techniques as I rebuild harryadney.com. Thanks again,
    HarryAdney

  28. sushila verma

    good tutorial

  29. sawebdesigns

    This is really a great tutorial thanks a lot

  1. Pingback: Can’t Afford A Landing Page? Try Designing One

  2. Pingback: 40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial]

  3. Pingback: Photoshop ile yap?lan en iyi web arayüzleri » Sadece Bir Blog

  4. Pingback: 41+ En muhte?em web arayüz dizay dersleri | Tips & Tricks

  5. Pingback: AllTuts

  6. Pingback: Gli stili nel web design: le caratteristiche del corporate style | Your Inspiration Web

  7. Pingback: 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | tripwire magazine

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Creating a Professional Business Layout Using Photoshop