Create a design agency portfolio in Photoshop – Part 1

In the first part of this series I’ll show you how to set-up the document and how to design The Agency’s Header, Hero area, Services and Portfolio sections and we’ll also create a call to action banner using Adobe Photoshop CC.

To keep the design consistent, we’ll use a grid system. The grid contains 12 columns and is based on the popular Bootstrap framework. For the vertical alignment, I’m using a 24px baseline grid, ideally for the content text, since the default font size of the content is 16pt.
Using the baseline grid is easier to align elements on the page, since you simply have to keep the distance consistent between the elements. I’m usually using 2 baselines (48 pixels) distance between sections.

To learn more about Grid systems, please refer to our tutorial about Creating your own grid system in Photoshop.

Download Template

Resources used

• Roboto font from Google Fonts
• Open Sans font from Google Fonts
• Icon fonts from Font Awesome
• Pictures from Picjumbo
• Pictures from Unsplash
• Pictures from Lorempixel
• Geometric background from Onextrapixel

General site guidelines

To keep a consistent look throughout the design we have to follow some guidelines.

• headings and buttons are using the Roboto font
• text content uses the Open Sans Light font with a size of 16px and a color of #808080 and the line height of 24pt
• The site’s color is #2980b9 and is used for the links, primary buttons and headings
• To break the monotony, some sections have a very light blue color: #f1f5f8
• The elements border color is #c7cad1
• The spacing and padding between the elements are based on the baseline grid:
  half a baseline (12px), 1 baseline (24px), 2 baseline (48px).

1. Setting up the document

Step 1

Begin by creating a new file (“CTRL + N” or File > New) and set the document width to 1280px, the height to 5150px and the name to “The Agency Template by AcasA Programming.” Feel free to use other name or settings.

Step 2

In order to keep our document tidy and readable, we’ll use groups and color-code them, like in the screen bellow. Create 10 groups, named as follows: HEADER, HERO, SERVICES, PORTFOLIO, CTA, ABOUT US, TESTIMONIALS, BLOG, CONTACT, FOOTER.

2. The Header Area

The header area consists of 2 parts: Top header area and Main header. The Top header is used to display some contact information and the social media icons and the Main header shows the logo and navigation menu.

2.1 Top Header Area

Step 1

The top part of the header will be used to display contact information and the social icons.
Draw a 1280px by 48px rectangle. Fill with the color #2980b9. It should be placed at the top of the document. Note that 48px are exactly 2 baseline grids.

Step 2

Press T to select the text tool and write the contact information.
For the icons:

• font awesome font
• 16pt
• color: #ffffff

For the contact information:

• Open sans light font
• 16pt
• color: #ffffff

Align the Envelope icon with the Bootstrap grid and place the contact information 12px after the icon.

Step 3

Let’s create the social icons. Using Font Awesome’s cheatsheet, simply copy and paste the desired social icons. I chose Twitter, Facebook, G+, Dribble, GitHub. Feel free to add other icons.
Font icons settings:

• font awesome font
• size: 16pt
• 24px spacing between the icons

Step 4

Group the social icons by selecting them in the Layers Panel and pressing CTRL/CMD + G. Rename the group to Social Icons.
Repeat this step and group contact information together.

To vertical align items, select a folder, for example Social Icons folder, CTRL+Click the Top BG icon in the Layer Panel, and press Align Vertical Centers, located in the top toolbar.

2.2 Main Header

Step 1

Inside the Header Group, create a new group and rename it to Logo.
Press U and select ellipse tool. Create a 48px by 48px ellipse and fill it with #2980b9. From the Font awesome cheatsheet select any icon that you find appropriate. I chose a cog icon.
The icon size should be 24pt. Vertical and horizontal align the icon with the ellipse.
Place the logo 24px under the Top Header Part. Exactly 1 baseline.

If you want to make the cog “see-through”, you can rasterize the ellipse. To do this right-click the ellipse layer and select rasterize layer. With the ellipse layer selected, CTRL+Click your font awesome icon layer’s icon and simply hit delete. Now your logo is transparent and if you choose a different background color, the new color will be visible through you logo.

Step 2

For the font of The Agency logo, I used Roboto Bold, with the following settings:

• Font: Roboto Bold
• font-size: 18pt
• color: #2980b9
• 12px margin left from the logo

Step 3 – The menu

Write you menu items and apply the following settings:

• font-size: 14pt
• font-weight: bold
• all caps
• color: #808080
• active menu item color: #2980b9
• spacing between items: 24px

If you want to add another detail to the active navigation item, you can add a blue #2980b9 56px by 3px rectangle under the home link.

3. Hero Area

The hero presents a welcome message to the user and has 2 primary buttons.

3.1 Hero background image

Step 1

Let’s create the hero area. Inside the Hero group draw a 1280px by 555px (23baselines) sized rectangle and fill it with any color.

Step 2

Add any picture you like. I used an office desk picture from Picjumbo.
Drag and drop the image in your Photoshop document and place the image above the Hero BG layer. Right click the image layer and select Create Clipping Mask. Alternatively, you can create a clipping mask, by holding the ALT button and click between the image and bg layer.

Step 3

To darken the image so that the intro text will be more visible, create a new layer, and fill it with black, using the paint bucket (G button). Then reduce the layer’s opacity to 70%. Create a clipping mask from this layer.

3.2 Intro text and Call to action buttons

Now we’re going to add an introductory message about the site.

Step 1

Press T to select the Type Tool and enter the introductory message using the settings bellow:
First line of text:

• font: Roboto Regular
• font-size: 48px
• color: #ffffff
• accent color: #2980b9

Second line of text:

• font: Open Sans Semibold
• font-size: 24px;
• color: #ffffff
• accent color: #2980b9

If you want to add a nice detail, you can add a background to the second line. Draw a black 483px by 48px rectangle. Reduce the opacity to 30%. Place the rectangle 24px under the first line of text.

Step 2 – Call to Action Buttons

To add interest to the site, let’s create 2 CTA Buttons.

Let’s create a ghost button.
Draw a rectangle with the height of 48px and width of 194px. Set the Shape fill type to No fill and add a 2px border with the color of #2980b9. The border radius is 5px. To set the border radius simply input the desired radius in the radius section of the Shape properties panel.

Now add the button’s text, and don’t forget to vertical align centers and to add padding. My left and right button padding is set to 24px.
The text settings are as follows:

• font: Roboto Bold
• font-size: 14pt
• color: #2980b9
• all caps

The second button is placed 12px to the right of the ghost button. The Shape fill type is set to solid color, and the font color is white.
The Ghost button acts as the site’s primary button style, and the second button style also represents the active state of the Ghost button.

4. Services section

Step 1

Select the Type Tool by pressing T and write the heading and subheading. Leave 48px (2 baseline grids) from the hero area.
Heading font settings:

• font: Roboto Bold
• font-size: 36pt
• all caps
• color: #2980b9

Subheading settings:

• font: Roboto italic
• font-size: 16pt
• color: #808080

Place the Subheading 12px under the Heading.

Step 2

Let’s create the intro boxes.

One intro box will span 4 Bootstrap columns.
Create an ellipse with width and height of 120px or 5 baselines grids. Set the Fill type to No fill and add a 2px blue #2980b9 border. Add a Font Awesome Icon with the font-size of 36pt and the color set the color to blue #2980b9.

Step 3

Add service title and description.
Title font settings:

• font: Roboto Regular
• font-size: 24pt
• color: #808080

Description font settings:

• font: Open Sans Light
• font-size: 16pt
• color: #808080
• paragraph: center text

The finished intro box spanning 4 Bootstrap columns.

Group all the box related layers together and name the new group Intro Box 1.

Step 4

Duplicate the intro box 2 times. You can duplicate a group by right-clicking the group and selecting Duplicate group, or selecting the group and then pressing CTRL/CMD+J.
Change the icons and the header texts to something of your liking.
To show the active state of an intro box, simply change the header and ellipse fill color to #2980b9.

5. Portfolio section

Step 1

Inside the Portfolio group, create a section background. To do this, draw a rectangle with the dimensions of 1280px by 919px. Change rectangle’s background color to a very light blue: #f1f5f8.

Step 2

Create portfolio section header using the same font settings used in the Services heading section. I used as a header title “Portfolio” and as a subheading “Our best works”. Don’t forget to leave 2 baselines (48 pixels) margins before and after the header section.

Step 3

Let’s create the portfolio’s filter buttons. Let’s assume that we have 3 categories to filter the portfolio items: All, Web Design and App Design. Place the buttons 48px under the Subheading.
This is also the style for the site’s secondary buttons.

Filter text font settings:

• font: Roboto regular
• font-size: 14pt
• all caps
• color: #808080
• active color: #ffffff

Button settings:

• height: 36px (1 baseline and a half)
• no fill
• 1px stroke #c7cad1
• border radius: 5px
• left and right margins: 12px
• padding (distance between button’s text and button’s borders): 12px

Step 4

Now we’re going to create a portfolio item. One item will span 3 Bootstrap columns. Create a 267px by 267px rectangle with a corner radius of 5px. Place the portfolio item 48px under the filter buttons.

Duplicate the portfolio item 3 times and align the items to the grid. Now duplicate the entire row (4 items) and place them 30 pixels under the first row. 30 pixels is larger than our baseline grid, but 30px is the gutter distance between Bootstrap columns and it will even out. Symmetry and vertical rhythm are important in design.

Step 5

Now we can populate the portfolio items with pictures.
Add any picture you like. I used pictures from Lorempixel.
Drag and drop the image in your Photoshop document and place the image above the Hero Background layer. Right click the image layer and select Create Clipping Mask. Alternatively, you can create a clipping mask, by holding the ALT button and click between the image and bg layer.
Repeat this process until you populate the portfolio items with pictures.

Step 6

Add a button to view more portfolio items. This button will have a similar style to the ghost button, but it will be slightly smaller:

• width: 170px
• height: 36px
• no fill
• stroke: 2px #2980b9

Add the text inside the button using the Roboto Bold font, with a size of 14pt, all caps and the blue color #2980b9. Margins between the text and the borders should be set to 12px.

Place the button 48px under the portfolio items. Center align the button with the document.

6. Call to action banner

Step 1

Next item we’ll create is a banner that will serve as a call to action.
Draw a blue rectangle with the width of 1280px and height of 96px. If you prefer you can add a background image or leave the banner with the blue color. I added a Geometric pattern from Onextrapixel.

Add some text using the following font settings:

• font: Open sans semibold
• font-size: 24px
• all caps
• color: #ffffff

Align the text with the bootstrap grid.

Step 2

Create a primary ghost button with the border and text color set to white.

Here is the finished banner:

End of Part 1

This concludes the first part of our tutorial. Until now we created the first part of our site design. We learned how to set-up our Photoshop document and we designed The Agency’s Header, Hero area, Services and Portfolio section and the CTA Banner.
In Part 2 we’ll continue to design the next sections of our site: About us, Testimonials, Blog section, Contact area and Footer.

Click here to read the next part in our design series or head back to our series index.