If you’re a skilled designer with a long list of clients and a full schedule, you’ll rarely have time to work on your own website. Despite the importance of your flagship website (and the chance to show off your skills and creativity), nobody will pay you to build it… not directly, at least. But, there are benefits beyond immediate payment to building and refining your own portfolio site. With a little initiative and a helpful guide, you can be well on your way to having an impressive online presence.

Today, we will design a clean, professional design agency layout in Photoshop. I’ll walk you through the process of creating this layout from scratch. We will use different techniques and styles, which you can apply later to your own designing projects. For me, the most important aspect of design is maintaining the balance between every element. So, we’ll keep that in mind while creating this layout within this tutorial. Let’s get started.

Resources:

Icons:

Clean Web Icons

Images :

Peter Jaworowski, Sara strand, Jan Vranovský, Stuart McQuarrie

Before we start, let’s have a look ahead at our final product:

Step 1: Create a New File

Open Photoshop and create a new file with an 1100px width and a 1700px height.

Step 2: Build the background

Select the bucket tool, and fill the background with color #fffbfb.

Step 3: Start the Top Navigation Area

Create a new layer and select the topmost area with the rectangular marquee tool. Fill it with color #36212c.

Select a small area under the new line and fill it with #da5904.

Further down the canvas, build another line using color #36212c. This will sit under our navigation area.

Step 4: Add a Logo and Menu

Now, add a logo on the left side and add navigation elements on the right. Look below for guidance.

For the hover effect, create a new layer and place it under the menu text layer. Then, select an area using the rectangular marquee tool and fill it with color #f1f0f0. Now, change the color of the “Home” text to #da5904.

Select the pen tool and create a small rectangle using color #da5904.

Now, select the line tool and add small lines in between the navigation text with a 2px weight and #d6d6d6 as your color.

Step 5: Create the Slider

Paste the featured image and click on “Layer” > “Layer style” > “Stroke.” Add a 2px stroke with color #d2d2d2.

Step 6: Add Navigation arrows

Select the ellipse tool and create a small circle with color #181818. Then, add the arrow in the center using color #ffffff.

Repeat the same process and create an equivalent arrow for the left side.

Step 7: Add a Separator

We will add a dotted line, so simply select the hard round brush with a 1px width and color #181818. Now, adjust the spacing to 385% and draw a straight line.

Step 8: Add Services

Select the text tool and add the title with color #333333. Then, paste the icon next to the title.

Now, add rest of the text using colors #989797 and #353535.

Step 9: Add Remaining Services

Repeat the same process as above to add three similar service selling points along the bottom edge of the main image.

Step 10: Build Recent Projects

Using the same approach from the last two steps, add the title and icon on the left and arrows on the right. Then, repeat the dotted line.

Step 11: Create the Frame

Select the rectangle tool and create a rectangle with color #ebebeb. Then, click on layer styles and add a 1px stroke and a drop shadow using the following settings.

Step 12: Add Thumbnail Images

Simply paste the images in the center of the above frame. Repeat the same process and create the rest of your portfolio projects.

Step 13: Create the Footer Area

Select a rectangle using the rectangular marquee tool and fill it with color #301e27. Now, we will select small strips at the top and bottom and fill these with colors #da5904 and #20161b. Then, add a small rectangle in the middle with color # da5904.

Step 14: Add Footer Content

Let’s add some widgets using the text tool. For the titles, we will use color #a9a9a9. For the rest of the content, it will be #636363.

Step 15: Add a Copyright

Select the text tool again and add the copyright text with color #4c4b4b. Place it on the darker strip.

Our clean and professional layout is all done. I hope you guys got some good practice and achieved a great result.

Related posts:

1. Create an Awesome Portfolio Layout in Photoshop
2. Create a Clean and Stylish Layout in Photoshop
3. Build a Sleek Threefold Login Form in Photoshop
4. How to Create an Interesting Media Player in Photoshop
5. Create a Stylish Transparent Pricing Table in Photoshop

Anum

Anum is Web and Graphic designer and tutorial writer. She is also an active blogger, providing valuable and exciting information in her own witty style. You can also catch her on her wicked Blog Websoulz. Cheers

Visit Site →