Aug 03

Design a Modern Portfolio Layout

Tue, 08/03/2010 - 01:27 — julie

psdfanmembersbut Design a Modern Portfolio Layout

Final Image

As always, this is the final image that we’ll be creating:

cloudport11 Design a Modern Portfolio Layout

Step 1

Create a new document (1000X1000px).

Create a new layer called clouds, and download this great clouds brush. Then apply it (color: 8fc6ce) to the top of your canvas. Then reduce this layer’s opacity to 25%.

cloudport1 Design a Modern Portfolio Layout

Step 2

Add a logo to the top left of your design. For my logo text I went with Ubuntu Tilting, 342d5b, 48pt, -50 kerning.

For my logo icon I used the icon that I’d made for the FanExtra coming network logo.

cloudport2 Design a Modern Portfolio Layout

Step 3

Now add some menu text to the top right of your canvas. I used Ubuntu Tilting, 18pt, -50 kerning.

cloudport3 Design a Modern Portfolio Layout

Step 4

Now type out a large, central headline under your logo. I used Ubuntu Tilting, 72pt, -50 kerning. It doesn’t matter what color you use.

cloudport4 Design a Modern Portfolio Layout

Step 5

Now create a layer just above your heading layer called ‘text color’.

Firstly use a large, soft paintbrush with bright colors sampled from your logo icon to paint over your heading text.

Then use a ‘lines’ brush (you can find some of these at Brusheezy) and paint in white over your soft paintbrush areas.

You should end up with something that looks like this:

cloudport5 Design a Modern Portfolio Layout

Step 6

Now with your ‘text colors’ layer selected, go to layer>create clipping mask. This will make sure that only the colors covering your heading text will show, effectively making your heading text bright and colorful.

cloudport6 Design a Modern Portfolio Layout

Step 7

Now create a layer called ‘main background’. Use your marquee tool to create a selection to fill the bottom part of your canvas. Fill it with a linear gradient ranging from 8cc3cc to b0e2e9. Then apply a blending option (inner shadow) using the settings shown below:

cloudport7a Design a Modern Portfolio Layout

cloudport7b Design a Modern Portfolio Layout

Step 8

Paste in a screengrab of your featured design. I went with our new network page: FanExtra.

Then apply a stroke blending option (settings below):

cloudport8a Design a Modern Portfolio Layout

cloudport8b Design a Modern Portfolio Layout

Step 9

Use the custom shapes tool to create an arrow to the left and right of your featured design. I created white arrows and then reduced their opacity to 40%.

cloudport9 Design a Modern Portfolio Layout

Step 10

Create a rounded rectangle (radius: 10px) to act as a button beneath your featured design. Then apply a gradient overlay ranging from 993a92 to 8d4ec5. Add some text to your button:

cloudport10a Design a Modern Portfolio Layout

cloudport10b Design a Modern Portfolio Layout

Step 11

Now paste a couple of icons into the bottom of your design. I used the following icons:

Calendar Icon

Support Woman Icon

Fill in the relevant text, and add a copyright notice.

cloudport11 Design a Modern Portfolio Layout

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

cloudport11 Design a Modern Portfolio Layout

psdfanmembersbut Design a Modern Portfolio Layout

 Design a Modern Portfolio Layout

Copyright 2009. E-mail Me
Auto Spare Parts