Create a design agency portfolio in Photoshop – Part 2

In this lesson we’ll continue where we left off in Part 1.
To view the template, click this link. You can also directly download The Agency template.

7. About us section

The next step in our design is creating the About us section. This section features 3 accordion style drop-downs and skill-bars used to visually represent the proficiency level with various tools or techniques.

7.1 Accordions

Step 1

Draw a 570px by 166px rectangle. Set the border radius to 5px, the Fill style to no fill and add a blue stroke of 1px. Align the rectangle with the Bootstrap grid.

Accordion unit settings
Accordion unit settings

Step 2

Create a header background for the accordion by drwaing a 575px by 48px rectangle. Fill the rectangle with #2980b9. Place the rectangle layer above de accordion and create a clipping mask.

Accordion header settings
Accordion header settings

Step 3

Let’s add some text to our active accordion. The header text has the following font settings and is placed 24px from the left accordion margin:

  • font: Roboto Regular
  • font size: 16px
  • all caps
  • color: #ffffff

The content text is Open sans Light, 16pt and has a color of: #808080.

Accordion font settings
Accordion font settings

Step 4

Let’s add the inactive accordions. Create a rectangle 6px under the active accordion with a size of 569px by 48px and a border radius of 5 pixels. Set the stroke to 1px #c7cad1 and the fill to #f5f5f5.

Inactive accordion settings
Inactive accordion settings

Step 5

Add the headers using these font settings:

  • font: Roboto Regular
  • font size: 16px
  • all caps
  • color: #808080
Inactive accordion headers
Inactive accordion headers

7.2 Skill bars

Step 1

We need to add the bar header.
In our example it’s “Web Development” and has the following settings:

  • font: Roboto Regular
  • font size: 16px
  • all caps
  • color: #808080

Step 2

With our header ready, it’s time to draw the skill – bar. Start by creating a 570px by 12px rectangle. Set the color to #ededed and the border radius to 5px.

Skill bar background settings
Skill bar background settings

Step 3

Duplicate the rectangle layer by pressing CTRL+J. Double click the layer icon to change the color to #2980b9. Resize the rectangle to an appropriate size. I resized it to approximately 90%.

Web development skill bar
Web development skill bar

Group the heading, bars and percentage together in a group called Web Development.

Step 4

Duplicate this group 3 times and change the text appropriately. The spacing between each bar is 1 baseline (24px).

The Agency about section
The Agency about section

8. Team section

Step 1

Since this is a new section, we have to add a section heading, using the same style and settings as before.
Select the Type Tool by pressing T and write the heading and subheading. Leave 48px (2 baseline grids) from the previous section.
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

Now we have to design the box which will hold the team member picture, name, function and social media icons.
One box will span 3 Bootstrap columns. Start by building a rectangle with the following settings:

  • width: 270px
  • height: 364px
  • border radius: 5px
  • fill color: #f5f5f5
  • stroke width: 1px
  • stroke color: #c7cad1
Team box settings
Team box settings

Step 3

Let’s add the background for the picture that will be placed in our team box. Create a 267px by 264px rectangle and place the layer above the picture box layer, then create a clipping mask by holding the ALT key and clicking between the layers.

Team box with picture bg
Team box with picture bg

Step 4

Adding the person’s name is our next step. I added the name “John Smith” with the following settings:

  • font: Roboto Regular
  • font size: 16px
  • all caps
  • color: white

Now we have to create a background to display the name. Build another rectangle with the settings:

  • width: 146px
  • height: 36px
  • border radius: 5px
  • fill color: #2980b9

Center align the rectangle to the team box and place it 245px from the top.

Add the person’s function using this rules:

  • font: Open Sans italic
  • font size: 16px
  • color: #808080

Place it 12px under the blue rectangle.

Team box text settings
Team box text settings

Step 5

We need a separator, so we have to create a 268px by 1px rectangle with a #c7cad1 color. Place the separator 12px from the previous element.
Finally we need to add the social media icons. Head to FontAwesome and choose the social media icons that you want.
Leave 12px distance from the separator and place the font icons. The settings for the icons are:

  • font: Font Awesome
  • font size: 18px
  • color: #808080

Step 6

There’s only one more thing to add to our team box: a picture of a person. I used a picture from Lorempixel. Place the image above the grey rectangle that serves as a background and create a clipping mask.
Group the layers together and name the new group “Team box 1”.

The final team box
The final team box

Step 7

The last step we have to take before moving to the next section is duplicating the team box 3 times and aligning the resulting boxes with the bootstrap grid.

Our team aligned with the Bootstrap grid
Our team aligned with the Bootstrap grid

9. Testimonials section

In order to build the testimonials section we’ll use the same techniques we practiced to create the Hero area.

Step 1

As usual, draw a rectangle with the size of 1280px by 370px.

Use a picture that you like as a background image. I used a typewriter image from Unsplash.

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.

Step 2

Add the section title. I used as a header “Testimonials” and as a sub header “see what our clients have to say about us”.

Select the Type Tool by pressing T and write the heading and subheading. Leave 48px (2 baseline grids) from the top.

Heading font settings:

  • font: Roboto Bold
  • font-size: 36pt
  • all caps
  • color: white

Sub heading settings

  • font: Roboto italic
  • font-size: 16pt
  • color: white

Place the Sub heading 12px under the Heading.

Step 3

Let’s design an icon for our testimonial. Draw a perfect ellipse with the size of 36px and color #2980b9.

Place a quotation mark inside the ellipse with the font size of 36pt white and the font Georgia. Vertical and horizontal align the font with the ellipse.
Don’t forget to group the font and the ellipse together.

Place the ellipse 48px from the previous element.

Step 4

Add a testimonial text and testimonial author, with the font settings:

Testimonial text:

  • font: Open Sans italic
  • font-size: 16pt
  • color: #ffffff

Testimonial author:

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

Don’t forget to center align the elements on the page.

Testimonials section aligned with the grid
Testimonials section aligned with the grid

10. Blog section

Step 1

Add a new section header: “Our Blog” as a main heading and “read our latest news” as a sub heading.
Place the header 48px from the testimonials area.

The Agency blog heading
The Agency blog heading

Step 2

Maintaining the general style of the site, we’ll create 3 boxes to display our blog content using the same techniques we used to build the team member boxes.
One box will span 4 Bootstrap grid columns:

  • width: 370px
  • height: 460px
  • 5px border radius
  • no fill
  • 1px stroke #c7cad1

Step 3

Now we need a background to contain our featured image. Draw a 363px by 189px rectangle and place above the blog content box and Create a clipping mask by holding the ALT key and clicking between the layers.

Blog Box base
Blog Box base

Step 4

The next step is adding the content.
As a blog heading we’ll use Roboto Regular, 16px, all caps and color: #2980b9.
The content will be centered, Open Sans Light, 16px, color: #808080.

Step 5

With the content added, we need a button to read our blog.
This button is a secondary button and has the same font style like the Portfolio filter buttons:

  • 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
  • padding (distance between button’s text and button’s borders): 12px

 

Blog box content aligned with the grid
Blog box content aligned with the grid

Step 6

An interesting touch is the meta box. It’s placed in the top left corner of the blog box and has the following settings:
The top blue box:

  • width: 62px
  • height: 70px
  • color: #2980b9

The data is split in two lines: first line – the day, second line – the month.
First line:

  • font: Open Sans Regular
  • font-size: 24pt
  • color: #ffffff

Second line:

  • font: Open Sans Regular
  • font-size: 14pt
  • color: #ffffff
  • all caps

Bottom dark blue box:

  • width: 62px
  • height: 25px
  • color: #34495e

This box displays the number of comments.
Icon font:

  • font: Font Awesome
  • font-size: 12pt
  • color: #ffffff

Comment number:

  • font: Open Sans Light
  • font-size: 12pt
  • all caps
  • color: #ffffff
Final blog box design
Final blog box design

Step 7

To finish this section, we need to add a featured image, group the related blog content together and then duplicate the blog item 2 times and aligin it with the Bootstrap grid.

The final blog section
The final blog section

11. Contact section

Step 1

Start by creating a background for the contact section. Make a rectangle with the width of 1280px and the height of 480px. Fill it with color: #f1f5f8.

Step 2

It’s a new section, so we need a new heading: “Contact us” and the sub header “keep in touch”.

Step 3

We’ll split the contact area in two big columns. The left column we’ll be used to display general contact information and the right column will display the form.
Head to Font Awesome and copy & paste icons: mobile, share, social icons, mail, location pin.

Font icons settings:

  • font: Font awesome
  • font-size: 18pt
  • color: #2980b9

Content font settings:

  • font: Open Sans Light
  • font-size: 16pt
  • color: #5f5e5e
Contact us section first column
Contact us section first column

Step 4

Let’s build the contact form. The input box label is Roboto Regular, 16pt, all caps, color: #808080.
The text inside the input boxes is Open Sans Light Italic, 16px, color: #808080.

The name and email input boxes have the following settings:

  • width: 370px
  • height: 36px
  • 5px border radius
  • fill color: #f5f5f5
  • 1px stroke
  • stroke color: #c7cad1

The message input box is placed 24px from the top and has the following settings:

  • width: 770px
  • height: 85px
  • 5px border radius
  • fill color: #f5f5f5
  • 1px stroke
  • stroke color: #c7cad1
Contact form aligned with the grid
Contact form aligned with the grid

Step 5

Our contact form is almost complete.
We just need a submit button. The button style we’ll use is the ghost button one, only a little bit smaller:

  • width: 110px
  • height: 36px
  • 5px border radius
  • fill color: no fill
  • 2px stroke
  • stroke color: #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.

The Agency contact section
The Agency contact section

Step 6

If you want, you can add a map with your location. I screencaptured a random map from Google Earth.
As always, create a rectangle with a size of 1280px and a heigth of 288px. Drag and drop the image from Google earth in you document and place it on top of the rectangle layer. Create a Clipping mask and adjust the size and location accordingly.

The Agency map location
The Agency map location

12. Footer section

We’re almost done. Now we just need to create the footer and then we can call it a day.

Step 1

Create the last rectangle in this tutorial with a size of 1280px by 168px and a color of #34495e.

Step 2

Add some social icons from Font Awesome. You could directly copy & paste them from the Top Header Area. To do that, go to the Top Header Area, select the Social icons group and duplicate it by hitting CTRL/CMD+J or right clicking the group and selecting Duplicate Group.

Place them 48px from the top and center align the icons with the rectangle.

Step 3

Finally, add the copyright information. As font settings, I used Open Sans Bold, 14pt, white and for the AcasA Programming link the color: #2980b9.

The Agency footer section
The Agency footer section

Congratulations!

You’ve completed this tutorial and created a clean, modern and awesome site design.
In the next part of this series, we’ll convert this PSD design into a HTML5/CSS3 template.

If you have any questions or suggestion or you just want to show us your design, feel free to use the contact form bellow.
Don’t forget to subscribe to receive the latest tutorials and articles and get notified when I publish the next part.

Tags: , , , ,

Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *