You would know I have regularly started to post tutorials related to web design on every Friday, here’s the dose for today. This is a Photoshop tutorial for creating a Portfolio web design layout. It can be very useful for photographers and designers who need a stylish portfolio.

One thing special in this portfolio is that you can create is very very quickly, it’s really very simple and hence quick to create.  As usual, I’ll be making a follow-up tutorial for converting it into HTML CSS. I think this time I’ll convert it in HTML5.

Final Result

Photoshop Template Tutorial

Step 1: Blank Document

A blank document, size of your choice, resolution 72. We do this every time.

Elegant Template Tutorial

Step 2: Gradient for Background

Let’s put a Gradient on Background.

Template Tutorial of Photoshop

Step 3: Background Pattern

Over that gradient background, I placed a pattern from here on our background.


Step 4: Logo

Use this shape from here for logo. You can create such a design yourself easily using Paths. If you have been following Waseem’s tutorials, you should have a good grip on Paths now.


Step 5: Header Result

Now I added twitter and facebook links on the right end side. I’m not including a step for this thing because you can create it using any simple method of a Brush Stroke or you can use Rounded Rectangle Tool for creating these black boxes. Over them I wrote the text and we got ourselves a minimalistic header.

Tutorial of Photoshop layout

Step 6: Featured Area Background

I selected Rounded Rectangular Tool and draw this shape for featured area in the center of the page.


Step 7: Content Holder

Select Rounded Rectangular Tool once again and draw this shape over the shape we just created but this time we’ll fill White color in it.


Step 8: Featured Image

Now just place an image over the content holder, then Alt + Click>Hover to Content Holder Layer> Create Clip Mask. As you can see I have drawn Arrows on the both sides of the image. I used Custom Shapes Tool to find the arrows and just placed them over a round circle filled with solid black color and 80% opacity.


Step 9: Navigation Bar

Let’s use Ellipse tool and draw a circle.


Step 10: Nav Bar Button

After this use the Drop Shadow on this shape.


Step 11: Button Styling

Use Gradient on this Shape.


Step 12: Button Final Touches

After Gradient and Drop Shadow time for a little Stroke.


Step 13: Menu Final Result

There you go, a beautiful stylish navigation bar.


Step 14: Footer Notice

Portfolio sites don’t need big footers, I selected an image from here and added some text.



Final Result

Photoshop Template Tutorial

Tell me what do you think of it and please don’t forget to make your requests and guide me for my forthcoming tutorials in the comments section. 


Pin It