Today we will be creating a simple business/personal portfolio like the one below.

Final Results

Open Photoshop then File>New> and create a new document 800×600 pixels.

Note: Don’t forget to save work

First we will create a new background #000 then select type tool and create your website title ex.webdevtuts

Now we want to add a navigation bar to our design. Select the rounded rectangle tool and create a rounded rectangle across the top (#008dc8).

Right click on the layer with your nav bg and select Gradient Overlay >

set the foreground color #008dc8 and background #004f70. Now lets add a stroke to our navigation background. Select>stroke

Next we will add some text to our navigation. Select the type tool and create the following: Home, About, Services, Portfolio, and Contact. Font: 14pt, Arial

Note: All text is within 1 text box (after every word hit the spacebar 4x)
Example(This is what your layout should like so far)

Ok now lets add a featured image gallery. Select the rectangle marquee tool and create a box #fff width 329×194pixels.

Now create another rectangle within the featured image gallery.

All right lets add some buttons to our feature gallery. Set the foreground color #fff and background #eaeaea. Select the ellipse tool and create a circle outside of the featured gallery.

Then right click on the circle layer>Blending Options>Gradient Overlay> then select the silver/white gradient

Now select the custom shape tool and click on one of the arrows.

Now drag your arrow choice over the featured gallery button.

Ok so lets create a new group and name it feat-button.

Add all button properties to folder.

Now duplicate the folder. Right click on folder and select duplicate Group.

Now go to Edit>Transform>Flip Horizontal

Now drag button to other side of featured gallery.

Ok lets add some Heading’s and paragraph’s to our portfolio. Create a heading font: 30pt, bold, #fefb00. Now for our paragraph we will add some dummy text. Google search lorem ispum. And add a paragraph under the heading.

Ok so now that the hard stuff is completed we will add 3 subheadings (Who are we, Our services, Why choose us) and 3 Paragraphs.

To complete our portfolio we will add 3 read more buttons and a simple footer.
Select the rounded rectangle tool, foreground #cec900 background# cdac00. Then create a small rounded rectangle. Next right click on the small rounded rectangle layer>Blending Options>Gradient overlay


Now select the type tool and add the following text “read more”(create a new group and add button and read more inside folder). Duplicate group.

For the final step we will add a simple footer. Select the rectangle marquee tool #008dc7 and create a rectangle with the same width as the navigation. The last step of this tutorial is to add copyright information

Here are the final results

Author: Marcell Purham

Hey there! My name is Marcell Purham and I am a 17 year old web developer/ designer from Chicago IL. When I'm not designing or coding things up I'm probably skateboarding, or gaming, or just being the average human. If you would like to stalk me just follow me @marcellpurham

Related Post

• Create a nice clean blog Layout in photoshop

• Create an awesome user friendly button in photoshop

• 4 quick tips to help you create a better mockup/design in photoshop

• Create a Retro Design Poster in Photoshop

• 15 photoshop website tutorials that will improve your design skills

• Create a fancy neon text effect

• How to make webpage scroll to top of page using jquery

• Create a clean Navigation menu

Share