Create a simple portfolio for your company

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

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

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
Create title

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).
Rounded rectangle

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
Right Click

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
Text for nav
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 329x194pixels.
Create a box

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
Circle Gradient

Now select the custom shape tool and click on one of the arrows.
Custom Shape
Select arrow

Now drag your arrow choice over the featured gallery button.
draw arrow

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

Add all button properties to folder.
group content

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.
drag button

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.
create 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
round rectangle
Small rectangle
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
footer background

Here are the final results

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply