Make a Professional Business Website Template Using Photoshop

Make a Professional Business Website Template Using Photoshop

Posted on 29. Apr, 2009 by Web Design in Photoshop


In this tutorial you’ll learn how to make a very professional, sleek business web-template in Photoshop. You can then edit the template to your full configuration. Alternatively you can download the template .psd file from us here. Good Luck!

012

Step 1:

Firstly, of course, start by making a new document in Photoshop. I used a nice small size of 760 x 633 pixels. Now fill the background with a nice, light color. The color I used was #f2f3ed.

Step 2:

Create a new layer then make a selection for your navigation bar. The size of my navigation bar will be 720 x 80 pixels. You can fill your navigation bar with any color you want, I just used #000000.

022

After making your navigation bar, apply the following layer styles:

03

041

If you used the correct layer style settings you should have a navigation bar like this:

051

Using a small, sharp font write out a few buttons in the top right above the navigation bar.

061

These are just secondary navigation buttons/links. The font used above is called Tahoma, the size is 12 pt, the color is #5a5d59.

On a new layer drow a straight, 1px vertical line with the pencil tool inside of the navigation bar. After drawing the line, invert your colors and draw another line right next to it the same height.

072

This line will be used as a divider for the text buttons we’ll be putting in shortly. After you’ve drawn your divider line(s), apply Filter > Blur > Motion Blur, using the following settings:

081

091

Lastly you need to change the layer mode to either Overlay or Soft Light, and lower the opacity to about 30-60%.

102

Now you’ll want to duplicate your divider and move it over about 80 or so pixels, repeat this until you have about 6 dividers.

112

Finally, add in some text for the buttons.

12

The font used in the above image is Helvetica Neue, Condensed Oblique, 14 pt, Sharp. Now apply the following layer styles to your text layer:

132

141

151

And now your text should look like this:

161

Looks pretty neat doesn’t it?

Step 3:

Next thing to do is create a header type of logo thing, with the website name and description in. Start by making a new layer then create a selection on top of the navigation bar, the size of my selection was 200 x 120 pixels.

171

You can fill your selection with any old color, as the you’ll be applying Gradient Overlay to it in just a moment. After making your rectangle thing, apply the following layer styles:

18

191

Now your box should look like this:

20

Add in a nice little glossy highlight type of thing to the top left of the rectangle.

21

You can accomplish this effect by following this few simple steps:

  1. Firstly select your rectangle layer, now make a new layer.
  2. Contract your selection by 1-2 pixels by going to Select > Modify > Contract in the Photoshop menus, be sure you’re on a new layer then drag a White to Transparent gradient inside of the selection.
  3. Using the Pen Tool, make a nice, curvy path on the outer edges of your gradient, turn your path into a selection then delete the inside contents.
  4. To make your gradient blend in nicely you might need to change the layer mode to Soft Light, or just lower the opacity.

Now to add in your website’s text.

221

In the above image I used the same font as for the navigation, then I applied the following layer styles:

231

241

221

Looks pretty nice doesn’t it?

Step 4:

Now let’s add in a nice header graphic. Start by making a new layer underneath the logo-header layers. Create a selection the same width as the navigation bar but quite a bit larger in height, make your selection 1 px beneath the navigation bar.

23

Note that my selection was 720 x 140 pixels in size. Fill your selection with any old color, I used #000000. Now you’ll need to find a nice stock photo to go into your header. You can find some nice stock photos on SXC. I used this stock photo, but I colored it green.

Drag your stock photo onto the canvas, make your simple adjustments, resize then crop it to the layer you made earlier.

24

251

I added in a nice ‘glass’ type of effect underneath the logo header, I did this by making a selection the same width as the logo area, then I made a White to Transparent gradient inside of it.

26

I then added in some interesting text.

27

I used Tahoma, 12 pt, #000000 and #FFFFFF. Lastly for this section, the header, write out some text on the right side of the header.

28

I used Helvetica Neue for that text. I also applied this Outer Glow…

29

Step 5:

For this still we’ll add in a sidebar type of thing, with some nice bars and boxes. Start by making a new layer, now make a set-sized selection of about 200 x 30 pixels, make this selection underneath the header/banner.

30

Be sure you’re on a new layer then fill your selection with any old color. After filling your selection, you can deselect, then you can copy/paste the layer styles from your navigation bar. I had to edit the Inner Shadow though so it wasn’t so big.

31

Create another selection underneath this layer, but a bit larger this time, fill the selection with black then change the layer mode to Overlay.

32

Add in texts for both areas, I used the concept of “Testimonials.”

33

Duplicate. Add minor details if needed.

34

Step 6:

Duplicate the layers you made previously and move them downwars, rename, resize, etc.

35

Looking pretty good so far, huh? Duplicate the Testimonials section and move it over to the right so theres 1 pixel space inbetween them. Stretch the bar and box layer over to the edge. Now change your text so it suits.

36

Step 7:

Finally and lastly, add a footer and any other details/fillers you might want to add. This was just a tutorial on how to make a nice template in Photoshop, you’ll need to learn how to slice or code to get this thing onto the interweb.

Thanks for reading, we hope you enjoyed the tutorial, and of course, if you need to you can download the PSD file from here.

012

22 Responses to “Make a Professional Business Website Template Using Photoshop”

  1. Matt

    29. Apr, 2009

    Nice!
    Cheers man.

    Reply to this comment
  2. beachrain

    29. Apr, 2009

    very nice, thanks

    Reply to this comment
  3. Adam

    29. Apr, 2009

    Quality mate love it.

    ~ Adam

    Reply to this comment
  4. Chaitanya

    01. May, 2009

    Very good tutorial, many thanks..

    Reply to this comment
  5. hema nandini

    01. May, 2009

    its too hard to learn……. bt i want to learn……..

    Reply to this comment
  6. ritesh kumar

    02. May, 2009

    thank this tutorial helps me a lot

    Reply to this comment
  7. huwaw69

    22. May, 2009

    love the color and the layout, anyways what font did you use for the buttons?

    huwaw69’s last blog post..20 Hand Picked photography and Art Inspirations # 17

    Reply to this comment
  8. Matt

    25. May, 2009

    I think the font is Segoe UI, with character spacing at -50, and in Italics. That’s pretty close, anyway.

    Reply to this comment
  9. bertrand5290

    02. Jun, 2009

    thats really cool stuf mate but i`d like to know how to make it become active in a web site because its and image and id like to know how to make it became active button

    Reply to this comment
  10. Richard

    04. Jul, 2009

    Hi, I have my own printing business and im looking at designing my own website.
    I have a questions, If i design a website using Photoshop, can you add pages where by people can order online, submit request for printing etc…
    Or is it just a basic website designing program?

    Reply to this comment
  11. preethi

    15. Jul, 2009

    “Simple & useful” THANKS…..

    Reply to this comment
  12. Wallpapers

    16. Jul, 2009

    Thanks for sharing PSDs file !

    Reply to this comment
  13. rajesh

    29. Jul, 2009

    Simply superb man,, wow with this i had a idea about the web site creation .. if u have any other steps like this send it to my email buddy ,,
    bye

    Reply to this comment
  14. kaxa

    14. Aug, 2009

    help me

    Reply to this comment
  15. raihan

    15. Aug, 2009

    this tutorials very helpful to me,thanks

    Reply to this comment
  16. sid rizvi

    12. Sep, 2009

    good work I like this web template, thanks

    Reply to this comment
  17. Osama

    16. Sep, 2009

    Awesome i like your template ! thank u very much !

    Reply to this comment
  18. Mec

    23. Nov, 2009

    I cant get through this step

    ”You can accomplish this effect by following this few simple steps:

    1. Firstly select your rectangle layer, now make a new layer.
    2. Contract your selection by 1-2 pixels by going to Select > Modify > Contract in the Photoshop menus, be sure you’re on a new layer then drag a White to Transparent gradient inside of the selection.
    3. Using the Pen Tool, make a nice, curvy path on the outer edges of your gradient, turn your path into a selection then delete the inside contents.
    4. To make your gradient blend in nicely you might need to change the layer mode to Soft Light, or just lower the opacity.”

    i can make some glossy using the sircle,

    using the pen is really hard to get up., but thank you very much

    Reply to this comment
  19. Web Design Barnsley

    09. Jun, 2010

    Great tutorial, thanks for this I now know how to create glossy things.

    Thanks again.

    Reply to this comment
  20. tawatchanan

    30. Jul, 2010

    Cool! tutorial. “Look and think then apply to” that will be the best for this tutorial.

    Reply to this comment
  21. kadir avci

    05. Aug, 2010

    Very good tutorial. Thank you.

    Reply to this comment

Leave a Reply