First impressions do count! Stunning our viewers with a visually compelling portfolio is one of the most important things that a designer can do to court a new client. Today we will demonstrate how to use photos, brushes, and textures, and 3D objects to design a creative multimedia website layout in Photoshop. Let’s get started!

Resources

The following resources were used in the production of this tutorial:

• Classical camera
• Director’s chair
• TV camera
• Laptop
• Microphone
• Hotair baloon 1
• Hotair baloon 2
• Small Tree
• Cityscape Brushes by Terf
• Clouds brushes by JavierZhx
• Abstract glow brushes by Ro-stock
• Rust Textures by Princess of Shadows
• Armored Metal Textures by Wen Jr
• Render Pack Textures 1 by Angelus Hellion
• Render Pack Textures 2 by Xcellcior

Step 1

Create a 960px by 620px canvas in Photoshop. This is a good resolution for websites as most screens can accommodate it.

Press Cmd + R to add the ruler and draw some guides to mark the limits for the main content area. These will be useful to center your design.

Step 2

Now that the main content area is properly delimited, let’s resize the canvas to 1224px by 620px (Image > Canvas Size) to create a bigger background. This spill-over area will be useful for visitors with large screens and create a ‘borderless’ look.

Step 3

The last step in preparing our document is to add a guide in the center. This guide will be handy when you have to center the design elements. A quick way to find the center is to create a new layer and press the Cmd + T shortcut keys to activate "Free Transform".

Step 4

Let’s make the cloud platform on which the main design will sit. Make a grey gradient background. Layer > Layer Style > Gradient Overlay. Gradient #434344 to #EAECEC. Leave all the other settings as default.

Step 5

Create a new layer “Clouds”. Load your Clouds brushes and paint in white a few clouds of various shapes, sizes and opacity until you’ve achieved a similar result as shown below.

Step 6

Create a second layer “clouds 2″, add a few clouds in the center.

Step 7

Create a third layer “clouds 3″. This time use the Abstract glow brushes, the 2nd brush, size 420px. Flip it, press Cmd + T > Flip Horizontal. This will help in giving the clouds a more wispy and ethereal look.