Creating a Minimalist Portfolio Web Design Layout

FINAL RESULT

Step 1: Blank Document

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

Step 2: Gradient for Background

Let’s put a Gradient on Background.

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 followingWaseem’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.

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