Design a creative portfolio in Photoshop

We love share our passion for graphic and web design through our blog. The objective of our tutorials and articles is not just the explanation of practical techniques to realize nice illustrations or clean web layouts. We’ll be really proud if, after reading the tutorial, you will be able to apply some of our advices in your future works.

You can reproduce perfectly the design in this post following, step by step, the instructions, but you will say “Thanks WeGraphic!” only if our tips will be helpful during the devopment of the next client projects. I know this, and I try to create original tutorials just for this reason.
Today I’ll describe how to create a clean web layout with a nice background illustration.

Below you can take a look to the final result of our efforts.

The Final Result

A gracious portfolio with a clean design and a nice illustration on the header to engage potential clients. Click on the image to see a large preview.

DOWNLOAD PSD TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

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.

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.

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.

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.

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.

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.

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.

Then apply the following style.

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.

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

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.

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.

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”.

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

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.

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

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.

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.

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.

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.

Finally add the text (using Delicious Font).

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 andWapp vol. 1.
Remember: in this case the guides are really useful to fill with icons and text the section.

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

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.”

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 readPhotoshop 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).

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

For the two little triangles we apply the following style:

Finnally add the slogan.

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

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

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.

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.

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.

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.

Ctrl+Shift+I to invert the selection and then apply layer mask to the shape named “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.

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

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

Draw a new circle.

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

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.

Step 7 – Bottom container

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

Step 8 – Credits

Add a string with the credits.

That’s all folks! I hope this tutorial can be useful to improve your skills in designing web layouts.
Stay tuned! Subscribe our RSS Feed or Follow us on Twitter, fresh tutorials and web templates are coming soon.