How to create a clean and design portfolio layout using Photoshop

creative portfolio

In this Photoshop tutorial I will show you how to build a layout to create a website for a web designer or a little web agency. I don’t think this tutorial will be easy for beginners, so If you have some knowledge in webdesign… there you go!

Step 0 – Start by setting-up the document

Open a new document: dimensions 1200×1640 pixels and resolution 72 pixels/inch.
To keep everything aligned we can use the 960s Grid System from here; it is not essential in this case, because we can use the Photoshop Guides (Ctrl+R to activate rules, View > New Guide to add the guide), but, how you can see in the previous tutorials, sometimes it can help.

Step 1 – Background

We’re going to create the basic layers for the background. In this case I had a precise idea on how to separate the different blocks to create the layout, why? Well, my tutorial, my web designs, ever start from a sketch (or a wireframe), it is useful just to keep in mind what is the final aim; but it’s clear that during the design process we will probably add new elements.

Designing a gracious portfolio with a clean design

So, in this case, we’ll create 5 containers, where we’ll add the content.

Add a first layer, it will be our background, with the color #ededed. Rasterize the layer (color #ededed) and add a subtle noise effect (Filter > Noise > Add Noise… Amount 0,5 – 0,8; check Gaussian and Monochromatic).
Draw a rectangle on the top of the page (using the Rectangle Tool, color #cddcec) and, again, rasterize the shape and add a subtle noise effect (Filter > Noise > Add Noise… Amount 0,5 – 0,8; check Gaussian and Monochromatic). Add a Gradient Overlay (Soft Light, 54%, from black to white, Angle 90% and Scale 75%).

Add, using the Rectangle Tool (U), a new shape (color #608bb6, height around 400 pixels) for the middle container, set Blend Mode to Color Burn and Fill to 75% and, then add a white Stroke of 1 pixel (from Layer Style). Finally the rectangular shape for the credits (the footer), use the same tool and color of the middle container, but now set Blend to Linear Light and Opacity to 70%.
Below the final result.

Designing a gracious portfolio with a clean design

Step 2 – Background details

We want to give more character to our background!
Add a new layer (Ctr+Shift+N) and use the Single Row Marquee Tool to add a 1 pixel white line on the top od the canvas.

Designing a gracious portfolio with a clean design

Now open a new document 12×1 pixels, unlock the background layer and hide it from the Layers Palette. Zoom to 3200%, add a new layer and using the Rectangular Marquee tool add two 1×1 pixel square, fill one with the color #fff and the other one with #000, as shown below. Then go to Edit > Define Pattern.

Designing a gracious portfolio with a clean design

We have a new pattern that we’re going to use, go back to our main document. Create a new layer and (with the Rectangular Marquee Tool) draw a selection that covers the whole canvas, fill it with a random color, set Fill to 0% then add Pattern Overlay from Layer Style.

Designing a gracious portfolio with a clean design

Now it’s time to create the clouds!
You can add 5 guides (84px – 186px – 600px – 1014px – 1118px) in order to limit the work area, then use the Ellipse Tool to add some shapes as shown to create the basic shapes. Select all the layers from the Layers Palette (Ctrl+click on layers) and then Ctr+G to group the shapes.

Designing a gracious portfolio with a clean design

Duplicate the group and convert the copy to a Smart Object – right click on the group in the layer palette, then Convert To A Smart Object – resterize it and add a subtle nois effect. Now you have to hide the excess part of the clouds using a layer mask: Ctrl+click on the “Top-background” layer thumbnail (in the Layer Palette), in order to create a selection which excludes the bottom of the clouds, then select the clouds’ layer and add a vector mask.

Designing a gracious portfolio with a clean design

Then apply the following style.

Designing a gracious portfolio with a clean design

Now we draw a nice shadow for the clouds. Duplicate the clouds’ layer and positionate the copy just below the original layer, set the fill to 0% and apply the following style.

Designing a gracious portfolio with a clean design

At this point use the same techniques to draw other clouds.

Designing a gracious portfolio with a clean design

Step 3 – Header details

Time to add the logo. Use the Pen Tool (color #79a7db) to design a billoboard (doubts on how to use the Pen Tool? Read this fantastic article written by Sebastiano), use the Line Tool to add the two white segments. Then add the following style to the billboard.

Designing a gracious portfolio with a clean design

Apply the same Drop Shadow for the two white lines too.

Add the text using the Horizontal Type Tool (T), using the Ballpark Font, then add a Drop Shadow and a soft Gradient Overlay.

Designing a gracious portfolio with a clean design

After the logo we are going to draw a nice, and simple, robot character using Zoom, Pen Tool, Ellipse Tool and Rounded Rectangle Tool. There isn’t the need to explain step by step how to create the robot, take a look to the image below and, at a glance, you’ll unbderstand how to draw our “friend”.

Designing a gracious portfolio with a clean design

Group all the shapes used to compose the robot and Add a Layer Mask, as previously done, to obtain the following result.

Designing a gracious portfolio with a clean design

Now we have to draw the bird and the badge. We use the Pen Tool, the Brush Tool an the Horizontal Type Tool. Take a look below to understand how to enhance our layout with a sweet and, I repeat, very simple illustration.

Designing a gracious portfolio with a clean design

Step 4 – First container

First of all create the box where we will insert the information of the team’s members. Use the Rectangle Tool to draw a 480×425 white box, add two grey lines as shown (Create Clipping mask to limite the segments within the white box), and add also a text (use Delicious Font).

Designing a gracious portfolio with a clean design

With the help of the Guides and Horizontal Type Tool, add photos and information about the team’s member. In this case we use Lucida Sans.

Designing a gracious portfolio with a clean design

Designing a gracious portfolio with a clean design

Draw a white “arrow” using the same technique seen for the “follow us” ribbon. Create a rectangular shape with the Rectangle Tool and then with the help of Guides, Add Anchor Point Tool and Direct Selection Tool transform it in a nice ribbon.

Designing a gracious portfolio with a clean design

Add the shadow to the ribbon. Duplicate the layer just created (you can temporarily hide the main shape), set color to #000 and opacity to 5%. Right click on the shape and go to Free Trasform Path and activate swarp modes to obtain the following result.

Designing a gracious portfolio with a clean design

Designing a gracious portfolio with a clean design

Use the Horizontal Type Tool to create a “- – – – – – – -” string, you can rasterize and trasform it to create the following effect .Also add a soft drop shadow.

Designing a gracious portfolio with a clean design

Finally add the text (using Delicious Font).

Designing a gracious portfolio with a clean design

Now create three blocks with descriptions of services that the studio provides. In this section we use the awesome icon sets, created by Asher Abbasi for WeGraphics, Wapp vol. 2 and Wapp vol. 1.
Remember: in this case the guides are really useful to fill with icons and text the section.

Designing a gracious portfolio with a clean design

Add three “dots” (with a nice drop shadow) and enhance the text with a 1px white drop shadow as shown below.

Designing a gracious portfolio with a clean design

We create also a nice menu, just below the white box, it should be clear how to realize this menu at this point. We add just a soft Inner Shadow to the “arrows.”

Designing a gracious portfolio with a clean design

Step 5 – The middle ribbon

The middle element of our design is an informative infographic that is introduced by a big ribbon that contains a slogan. In order to realize this ribbon we will create 5 custom shapes using, as usual, the Pen Tool (I remind, again, that if you are a beginner you can read Photoshop For Beginners: The pen tool to learn more about how to use this tool). Take a look below to understand what kind of shapes we need to draw (note: we will use #497287 for the main shapes and #798ea4 for the darker shapes).

Designing a gracious portfolio with a clean design

What about the style? Well, we apply the same style for the “front-shape,” as you can see below (the pattern, that we are going to use, is from Old Paper Patterns on WeGraphics).

Designing a gracious portfolio with a clean design

For the two little triangles we apply the following style:

Designing a gracious portfolio with a clean design

Finnally add the slogan.

Designing a gracious portfolio with a clean design

Step 6 – The infographic

The idea of adding a little infographic borns from the need to synthesize the creative process of our fictionary design studio. Below you can see the finale result (obvious, it’s just a simplistic example of how you can describe a creative process behind the development of a project).

Designing a gracious portfolio with a clean design

Start designing the two circles (hold down Shift to draw a perfect circumference, color #3d3d3d). Set the, for the left shape, Fill to 0%; for the right shape, set Blend Mode to vivid Light and Fill to 35%. Add the style as shown below (it is the same for both the shapes, Pattern Overlay fo the left shape apart).

Designing a gracious portfolio with a clean design

Note that the left circle use a custom pattern, we can create this pattern adopting the same technique of the Step 2.

Use Ellipse Tool (create the little white circle one time and then duplicate it to use again) and the Line Tool (Weight: 3px, color #ffffff) to design the graph on the left. Group all the shapes and the lines created, duplicate the group, convert it to smart object and then rasterize it. Now you can add the style to the layer.

Designing a gracious portfolio with a clean design

Using the Pen Tool to draw some tags (using vibrant colors: #d82f4c, #edcd59, #4d85a2, #598b3b) and then name it using Horizontal Type Tool, you can apply a soft drop shadwo to both, tag and text.

Designing a gracious portfolio with a clean design

Within the right circle add other three circles, set Fill to 20%, add text (you can apply a soft drop shadow to the string) as shown.

Designing a gracious portfolio with a clean design

Now we have to hide the excess parts of the “Design” and “Development” circles. As already seen we’ll use the Layer Mask.
Ctrl+click on the shape of the “Creativity” circle in the Layer Palette, then go to Select > Modify > Expand set the value to 3 pixels.

Designing a gracious portfolio with a clean design

Ctrl+Shift+I to invert the selection and then apply layer mask to the shape named “Design.”

Designing a gracious portfolio with a clean design

Repeat the operation creating a new selection and expanding it as shown. You can use Ctrl+Shift+Click when you need to add two or more selections from vector mask thumbnail; in this case we create the selection by clicking on “Design” and “Creativity” shapes.

Designing a gracious portfolio with a clean design

Ctrl+Shift+I to invert the selection and then apply layer mask to the shape named “Development.”

Designing a gracious portfolio with a clean design

Apply a soft Drop Shadow to the three circles to obtain the following result.

Designing a gracious portfolio with a clean design

Draw a new circle.

Designing a gracious portfolio with a clean design

Set Fill to 0% and add a white stroke (Size 3px).

Designing a gracious portfolio with a clean design

Convert to Smart Object, rasterize it and add a drop shadow (the same drop shadow applied to the graph in this “Step”). Finally, complete the infographic adding other lines and tags as shown in the following image.

Designing a gracious portfolio with a clean design

Step 7 – Bottom container

You can reproduce this section using the same techniques of the Step 4.

Designing a gracious portfolio with a clean design

Step 8 – Credits

Add a string with the credits.

Designing a gracious portfolio with a clean design

0 I like it
0 I don't like it