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.
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.
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
.
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
.
Step 5
Add the headers using these font settings:
- font: Roboto Regular
- font size: 16px
- all caps
- color:
#808080
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.
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%.
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).
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
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.
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.
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”.
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.
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.
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.
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.
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
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
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.
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
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
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.
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.
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
.
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.