Make a Professional Business Website Template Using Photoshop

By | 26 comments | Photoshop | Tags: , , , , , , , , , , , , , , ,

Free Website Builder

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.

create a free website

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

Article Review 9 out of 10 based on 24 ratings.

READY TO TAKE WEB DESIGN SERIOUSLY?

Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.

26 Comments

  1. Matt (2 years ago)

    Nice!
    Cheers man.

  2. beachrain (2 years ago)

    very nice, thanks

  3. Adam (2 years ago)

    Quality mate love it.

    ~ Adam

  4. Chaitanya (2 years ago)

    Very good tutorial, many thanks..

  5. hema nandini (2 years ago)

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

    • Andy (2 years ago)

      You can always download the free .psd file?

  6. ritesh kumar (2 years ago)

    thank this tutorial helps me a lot

  7. huwaw69 (2 years ago)

    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

  8. Matt (2 years ago)

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

  9. bertrand5290 (2 years ago)

    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

  10. Richard (2 years ago)

    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?

  11. preethi (2 years ago)

    “Simple & useful” THANKS…..

  12. Wallpapers (2 years ago)

    Thanks for sharing PSDs file !

  13. rajesh (2 years ago)

    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

  14. kaxa (2 years ago)

    help me

  15. raihan (2 years ago)

    this tutorials very helpful to me,thanks

  16. sid rizvi (2 years ago)

    good work I like this web template, thanks

  17. Osama (2 years ago)

    Awesome i like your template ! thank u very much !

  18. Mec (2 years ago)

    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

  19. Web Design Barnsley (1 year ago)

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

    Thanks again.

  20. tawatchanan (1 year ago)

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

  21. kadir avci (1 year ago)

    Very good tutorial. Thank you.

  22. Erick Trezza (1 year ago)

    Interesting investigation!

  23. charlie (1 year ago)

    Cool manual! thank you. Do you have similar about the flash?

  24. Endyst (10 months ago)

    Good work! Very helpful. Thank you.

  25. tom costa (1 month ago)

    nice tutorial, good for startup

Comments