Create a portfolio/business website layout (Photoshop – Template)

Hello and welcome to another tutorial here at ArtBox7.com
Today I will create a portfolio/presentation or if you’d like a business Photoshop template (psd template)
As you usual, to design this website we will gonna use some vector elements from our Supreme Vector Set

Full Preview:

psd4

Note: Some steps dose require to  have Supreme Set in order to achieve the same result.

Let’s start it.

Step 1

Open Photoshop and create a new document (Ctrl+N) with this dimensions  1024 pixels by 1200pixels. As a background color I have chosen white (#FFFFFF)

1

Creating top header

Step 2

Select rectangle tool and create a similar shape. I have used this color: # 164268. Mine has the following dimensions: 1024px by 84px

2

Step 3

Select rectangle tool and create another shape, below the shape created at step 2. I am using this color: # 08effd. My shape has the following dimensions: 1024px by 185px

3

Step 4

Select again rectangle tool and create another shape on the top of the shape created at step 3. I have used this color: # 266088

When you create this shape, don’t cover the entire shape created on step 3, leave 1px distance between those 2 shape. I have made this to create a nice stroke on the top of this shape. Please see the screenshot below.

Then Select Type Tool (T) and add a text on the shape created on step 2. This will be published latest news from the website or from a social network website.

5

Step 5

Next I will add some links using the Type Tool (T) on the top right side.

7

Step 6

Select Rounded Rectangle Tool, and create a shape above the About link, please see the screenshot. I have used  this color: #315a7d

8

Creating the logo and header

Step 7

For logo- the text -ArtBox7.com -  I have used    “MoolBoran” font – size 48px – with the following layer styles:

9

10

Here’s my result

11

Step 8

From Supreme Vector Set (more exactly from Retro/Funky Tree Vector Pack) I will add a nice tree to use it as a logo.

13

Creating the navigation

Step 9

Select Rectangle Tool and create a similar shape:

14

Step 10

Having Rectangle Tool selected, create another shape below shape created on step 10. I have used this color: #c6ff00

Step 11

Select again rectangle tool and create another shape on the top of the shape created at step 11. I have used this color: # 8dc63f

15

When you create this shape, don’t cover the entire shape created on step 11, leave 1px distance between those 2 shape. I have made this to create a nice stroke.

16

Step 12

Next using the Type Tool (T) I will add some links on the navigation bar. Now If you will analyze a little bit the top header, you will see that is a quite empty. Something needs to be added to make it more attractive.

Going back to the Header

Step 13

From Supreme Vector Set I will select Abstract Curve Vector Pack and I will add an vector element to Photoshop

18

Step 14

Next I will add an image, on the right side, please see the screenshot

19

Step 15

I will select Rectangle Tool and I will create a shape. I will rotate a little bit this shape and I will place it behind the image added on step 14

20

Step 16

I will select again rectangle tool, but this time I will rotate the shape in opposite direction

21

Step 17

Ellipse Tool and create a similar shape. Choose #FFFFFF for background

26

Step 18

Go to Filter>Blur>Gaussian Blur

27

Step 19

Here choose 78.6 for Radios

25

My result:

28

Now the header looks really nice, don’t you think :P ? Let’s get back to navigation now

Step 20

Select rectangle tool and add another shape (below shape created on step 11)

29

Step 21

Apply the following layer styles to the shape created on steep 20

23

24

Step 22

Creating the content area

The content area is quite easy to create. You will need to use Type Tool (T) to add text and some  vectors from our Supreme Vector Set.

Here’s the screenshot:

32

Step 23

Creating the footer

Select Rectangle Tool and create a shape with this color: # bd7327

34

Step 24

Above this shape (created on step 22), create another one using this color # 875725
When you create this shape, don’t cover the entire shape created on step 21, leave 1px distance between those two shapes. I have made this to create a nice stroke on the top of this shape. Please see the screenshot below:

35

Step 25

Now from Supreme Vector Set (more exactly from Retro/Funky Tree Vector Pack) I will add an vector element

36

Step 26

Than using the type tool I will add a copywrite text.
Here’s the final result:

psd4

The tutorial is finished now.  Thanks for watching and don’t forget to bookmark this website!

Next I will add some links using the Type Tool (T) on the top right side.

Download here Download all templates

ABOUT THIS AUTHOR

Hi, my name is Jeff and I'm the man behind ArtBox7.com. This blog was created to share my knowledge and in the same time to demonstrate the value of the Complete Designer Set All of our tutorials listed on this website have been created using our vector packs
  1. thank you this is free simple lesson


  2. zeon
    August 6th, 2009

    you should keep your width to 955, to make sure it fits on smaller screens as well, the reason for the lower width is the scroll bar in the side.

    nothing worse than a scroll bar at the bottom to.


  3. Martin
    August 6th, 2009

    Really nice tutorial, boring outcome though…i mean there is nothing sepcial about this layout…just plain boxes and text. where is the creativity?


  4. Zane Hooper
    August 6th, 2009

    Great job on the tutorial, looks like a really nice layout. :)
    Might try and work out something with it to use myself..


  5. website development services
    August 20th, 2009

    Thanks for sharing this amazing tutorial. very helpful.


  6. ihlas temizlik robotu
    December 21st, 2009

    Thank you pal. i love simple and understandable tutorials


  7. Website Builder
    February 16th, 2010

    I have to say, this is an absolutely awesome tutorial. Imagine creating a website more than 10 years ago, when you had to hardcode html tags on notepad to create a website. And now, it’s so easy it’s unbelievable sometimes! Good job on the tutorial!

    Amy Cameron
    BuildMySiteforFree.com

Trackbacks

  1. 90 New And High Quality Photoshop Web Layout Tutorials | Graphic and Web Design Blog - Inspiration, Resources and Tools
  2. Trackbacks

    1. Sosyal İm - Teknoloji haberleri » 90 Yeni ve Yüksek Kaliteli Photoshop İle Web Şablonu Oluşturma Dersi » Blog Arşivi » 90 Yeni ve Yüksek Kaliteli Photoshop İle Web Şablonu Oluşturma Dersi
    2. Trackbacks

      1. 90 New And High Quality Photoshop Web Layout Tutorials - Programming Blog
      2. Trackbacks

        1. 90 New And High Quality Photoshop Web Layout Tutorials « Neha Kapoor Blog :: Letz Do it
        2. Trackbacks

          1. Create a portfolio/business website layout (Photoshop – Template) | ArtBox7.com
          2. Trackbacks

            1. 90 New And High Quality Photoshop Web Layout Tutorials | huibit05.com
            2. Trackbacks

              1. Olur Olmaz Herşey
              2. Trackbacks

                1. 90 Yeni ve Yüksek Kaliteli Photoshop İle Web Şablonu Oluşturma Dersi « NeYeni.Net - [ yeni olan ne varsa ]
                2. Trackbacks

                  1. лучшие исходники сайтов для фотошоп, photoshop. туториалы создания красивых макетов. psd layout
                  2. Trackbacks

                    1. Create a portfolio/business website layout (Photoshop – Template) « AnaConda 4 Photoshop Blog
                    2. Trackbacks

                      1. 50+ cool web layouts photoshop tutorials | OffsetPrint.info
                      2. Trackbacks

                        1. 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | tripwire magazine
                        2. Trackbacks

                          1. 25 Photoshop Tutorials for Designing Portfolio Sites | Vandelay Design Blog
                          2. Trackbacks

                            1. 25 Beispiele für Seiten Design mit Photoshop
                            2. Trackbacks

                              1. 25 Photoshop Tutorials for Designing Portfolio Sites | JKookServ Hosting Blog
                              2. Trackbacks

                                1. 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | Afif Fattouh - Web Specialist
                                2. Trackbacks

                                  1. Dizzy Blog » 66 מדריכים להכנת אתרים בפוטושופ
                                  2. Trackbacks

                                    1. » 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. DidI
                                    2. Trackbacks

                                      1. Professional web designers and web 2.0 experts » Blog Archive » 25 Photoshop Tutorials for Designing Portfolio Sites
                                      2. Trackbacks

                                        1. 25 Photoshop Tutorials for Designing Portfolio Sites | iDESIGN
                                        2. Trackbacks

                                          1. 90 New And High Quality Photoshop Web Layout Tutorials « FED视野

Leave a Reply