Part 2 – Below the Fold

Below the fold technically includes everything under the fold. But for the sake of this tutorial – it includes all BUT the footer section. The reason is – this will be the only part that will need to grow. If there was additional content to be made – it will be inside this section. The fold and the footer remain static in height.

We start by creating a new layer. With the selection tool, select everything below the red feature section below. Fill this selection with #f3f2ed using the paint bucket tool. *Note that the large image layer should be placed on top of all the other layers.

We then create a new horizontal guide. This guide should be right below our feature image (allow a few pixels extra for the added shadow effect). This guide’s main purpose is to know where we will slice our divs (which I will cover once we start coding) and where our gradient ends. Grab the selection tool once more and start from where the red area ends – down to the new guide. Using the gradient tool, select #e1decf primary color and #f3f2ed and fill with a straight line (hold shift).

We then add that same “etched” look where the two layers meet. The same technique is used – create two lines with one darker and one lighter. In this case the upper line has #670600 fill and the second #faf9f3.

Next step is to create the sub heading. With the type tool, choose the Rockwell font at 24 pixels in #292929 color and type the word “TESTIMONIALS”. Directly to the left of the text – I imported the “users_two_48” icon from WeFunction and scaled the image down to 60 percent and desaturize (Ctrl + U, slide the saturation all the way to the left). Add two horizontal 1 pixel lines (#e5e5e2 and #FFFFFF) directly underneath (by this point of the tutorial, I’m going to assume you have this technique down already).

*Tip – Create a group called “sub headings” and add all the above elements in it. We will be duplicating this sub heading in following sections.

Directly below the Testimonial subheading – we create 3 text boxes with some dummy text. I used Verdana at 14 pt, 20 pt leading. Make sure you allow enough padding and margin around each surrounding box. Align according to the grid. Note that this part of the design acts only as a marker. We will use actual text for these boxes.

Duplicate the two horizontal lines from the sub headings section. Move these 2 lines right below the 3 text boxes that you have created. Create a new layer, select 124 pixels (width) x 25 pixels (height) and fill with #FFFFFF with the paint bucket tool. Move this layer right below the two horizontal lines. Using the text tool, use 10 pt Verdana, color # 6b6b6b and type the words “more testimonials” – move this directly on top of the new layer we’ve just created. This acts as end marker for the testimonials section with a button that displays more testimonials.

*Tip – create a new group for the above elements and name it “end marker”.

Next, we add a “Previous Work” section. Remember that we created a group called “sub headings” a little while back? Duplicate this group and name it “sub headings 2”. Using the down cursor in your keyboard, move the new group approximately 560 pixels downwards. Change the text to say “PREVIOUS WORK” and use another icon, scale it down and desaturate.

An image gallery will showcase our portfolio’s “Previous Work” section. Similar to the testimonials area, we are dropping some dummy thumbnails in our photoshop file, just for mock purposes. We are going to span 4 thumbnails across at 210 pixels each in width. Make sure the thumbnails align to the grid, taking 3 columns each with enough paddings in between each other. Add the following effects for each thumbnail: Drop Shadow (settings shown in below screenshot) and an inside stroke of 6 pixels and #FFFFFF fill color.

To complete the “Below the Fold” section – we create an end marker for the “Previous Work” area. Duplicate the group “end marker” and name it “end marker 2”. Move this newly created group approximately 380 pixels downwards. Change the text in the button to say “more previous work”. Our next quest is the Footer.