Create a Meet the Team Page in Photoshop

Gabrielle Gosha
Tweet

When you are looking to generate interest in your products and services on a large platform you know that the best way to do this is by creating a website. Not only must you have a website to accomplish such but you must also have a great design that is not only cohesive but user friendly.

Basic knowledge tells us that a website generally features a Home, About and Contact page but that doesn’t mean it has to stop there. If you are a creative agency trying to market your service you know that your site must appeal to potential customers and certain pages are key.

One page that you will definitely want to have is a page showcasing your team. The ‘Meet the Team’ page is not a new concept by any means. A lot of agencies tend to have one to give a little insight into the people who help make the agency a reality.

Your ‘Meet the Team’ page can be composed of different elements and can essentially be your ‘About’ page. You can showcase not only thee workers and founders but you can also offer links to the social networks of these members. Adding a little about each person is up to your own discretion but for the most part your page should consist of each team member’s photo and their title.

In today’s tutorial I am going to walk you through creating your own mockup design for a ‘Meet the Team’ page, so power up your Photoshop and let’s get started.

Resources Needed

City
Building
Office #1
Office #2
Woman #1
Woman # 2
Man #1
Man #2

Step 1 New Canvas

Start by opening up Photoshop and creating a new canvas. Give your canvas the dimensions of 1360 x 2000px and press OK for your canvas to appear.
mt1

Step 2 Background Color

For this design I am going for a more business approach for the design agency so will be using clean colors. Create a new layer and call this “background” fill this layer with the color #e1e1e1.
mt2

Step 3 Guidelines

We want to make sure our elements are given enough space so we will create guidelines. To create guidelines you go to View > New Guide and then input the correct dimensions. Make sure that you put in “px” for pixels and not “in” Follow the dimensions below to place your guidelines in the right directions:

Header: Horizontal; 150px
Image Box: Horizontal; 600px
Members: Horizontal; 1215px
Banner: Horizontal; 1455px
Images: Horizontal; 1895px

Your image should look like this.
mt3

Step 4 Header

Now that we have our guidelines in place we can start with our header. Create a new layer and name it “header”. Use the Rectangular Marquee Tool to select the designated section and ill it in with #ffffff.
mt4

Select the typeface “Estrangelo Edessa” and make the font size 6pts. Make sure your caps lock is on before you switch to the color #282828 and type out your navigation. Set your navigation on the right side of your header.
mt4-1

Create a new layer called “nav marker” and with #982e2e create a skinny rectangle under the word TEAM.
mt4-2

Step 5 Logo

With the same color that you used to make the navigation marker make a square in the left portion of the header.
mt5

Use the Rectangular Marquee Tool to remove sections out of the square by selecting and deleting.
mt5-1

Add your desired letters into your box to create your logo. In this case I am using a lowercase “c” and capital “b”.
mt5-2

Finish your logo by writing out the agency’s name beside the logo image.
mt5-3

Step 6 City Image

Open up the photo of the city so that you can copy and paste it into the area just under the header. Notice that you will need to crop the image for it to fit inside.
mt6

Go to Image > Adjustments > Variations and click More Red before pressing OK.
mt6-1

Create a black rectangle in the bottom right hand corner of your image. Change the layer mode to Soft Light and add 4px white stroke with 45% opacity around it by accessing the Blending Options menu.
mt6-2

Once that is done you can type in your desired text on top op of the black box.
mt6-3

Step 7 Member Box

We are going to keep the member section the same color as our background but we want to add a design. To create a design first make a white circle the height of the section and change the layer mode to Soft Light and drop the opacity to 50%.
mt7

Now duplicate the layer three times and overlap the circles like you would a Venn-Diagram.
mt7-1

Under the image of the city you want to add your “Meet the Team” text just like I have done.
mt7-2

Add in the images of your team members by either using the Rectangular or Circular Tool to cut out a cropped portion of their heads and shoulders. The images used are Man #1, Man 2, Woman #1 and Woman #2.
mt7-3

Finish by adding in the name of each member and their title.
mt7-4

Step 8 Banner

Open up the building image and select the middle portion of it excluding the tree. Copy your selection and paste it in the area that is designated for your banner. Resize as necessary.
mt8

Go to Image > Adjustments > Variations and click More Red before pressing OK.
mt8-1

Step 9 Banner Text

Duplicate the black box that you created for your city image. Place it in the lower right hand corner of your new banner and make it smaller. Duplicate the layer so that the box appears slightly darker.
mt9

Now that your box is in place, type in your text, in this case “THE OFFICE” in white.
mt9-1

Step 10 Office Images

Open up your office images and the building image and copy them to your canvas. Scale them down as needed so that they are evenly spaced apart.
mt10

You can now add any information about the office just above your images just as I have done.
mt10-1

Step 11 Footer

Create a new layer and name it “footer”. Change your foreground color to #444444 and with the Rectangular Marquee Tool create your footer and fill it in.
mt11

Add your navigation menu to the footer but change the color to #ffffff.
mt11-1

Finish your footer by adding your copyright information and any other desired images and text.
mt-finish

Download the PSD file

Conclusion

There are many ways in which you can design your Meet the Team page, there is no one solution. When you’re designing your Meet the Team page remember that you want to create an eye-catching design. Make sure that you allow yourself enough breathing room so that your images and text do not appear cramped and of course experiment with layout possibilities.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • David

    How do I then take this Photoshop file and publish it for the Web?

    • Anonymous

      you have to slice the images you want and use HTML and CSS to markit up and layout it out and style it

  • mojo

    Hi Gabrielle

    I always find the structure of your tutorials a bit annoying. You should consider following Anum K’s example—showing the final result with the opening paragraph—then I could decide if I wanted to read any further. It’s a nice example of a ‘meet the team’ page though.

  • Doug Robb

    Good question. In my opinion although Photoshop is great tool for designing web sites it is not a good tool to be using to implement them. There are just too many functional issues to consider (links, javascript, responsive design, css to name a few). You do see various converters advertised on the net but really it is worth the effort to find a web development tool that fits your needs. If you are a designer wanting to produce sites as well as design them then track down a designer friendly developer and see what tools they use. For example I often work with designers who send me designs in Photoshop files. I decompose the design into the assets (logo, content, backgrounds) and then built them into a functional web site. I used to do this using Dreamweaver and css but these days I use WordPress, either creating a theme or modifying an existing theme using the supplied assets. Lots of ways of producing web sites so pick something that makes sense for your design and experience/background.

  • Anonymous

    why did you use 300 px/inch resolution when you create a new canvas?