ArtBox7.com

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:

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)

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

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

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.

Step 5

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

Step 6

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

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:

Here’s my result

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.

Creating the navigation

Step 9

Select Rectangle Tool and create a similar shape:

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

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.

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

Step 14

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

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

Step 16

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

Step 17

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

Step 18

Go to Filter>Blur>Gaussian Blur

Step 19

Here choose 78.6 for Radios

My result:

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

Step 20

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

Step 21

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

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:

Step 23

Creating the footer

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

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:

Step 25

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

Step 26

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

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

Download here Download all templates