Build a Professional Design Agency Layout in Photoshop
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.
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.