Extreme Template

Part 3: The Body

Covers how to design the body and structure of the template.

1. Now make a new layer and get your rounded rectangle tool, set your color to #6b757e. And leaving about 1-3px of space away from your banner, make a rounded rectangle that is the same width as your 2 vertical guidelines but with the height all the way to the bottom rounded rectangle shape that we had created in part 1. But remember to leave about 1-3px of space. Note that the measurements are at a perspective of 100%.

Click to enlarge

2. Next, with a new layer, we are going to make another rounded rectangle. So get your rounded rectangle tool and set the color to #4d545e. But before you do so, set a guideline at the top and bottom of the rounded rectangle you created in step 1. And also place a guideline about 410px to the right of the left vertical guideline."

Click to enlarge

3. Once you've placed your guidelines, get your rounded rectangle tool and set your color to #4d545e. Then starting from the top left corner of your square [marked in red in the previous screenshot] and leave space [down] of 20-25px. Also leave some space of about 5-10px to the left and then start your rectangle. Make sure to end the width of it all the way to the left guideline that you had created in the previous step. And you should also leave some space of 5-10px at the bottom, please take a look at the following screenshot for a clearer approach.

Click to enlarge

4. Next, we are going to work on the news bar and the search bar, so first let's put a guideline at the top and bottom of the content background that we just made. Next get your rounded rectangle tool, set your color to #4d545e. Make a rounded rectangle that is about 10px away from the vertical guideline that is on the right side of the content BG. It should also be about 5px away from the far right guideline. The width of the rounded rectangle should be around 175px on a zoom of 100%. Its height should be 235px.

Click to enlarge

5. Next we are going to create another rounded rectangle under the previous one. So it should be the same width and same spacing, just the height of it is 70px. Make sure to leave 20px of space from the bottom of the previous rectangle to the top of the rectangle that we are just making.

Click to enlarge

6. Now we are done, add some text. And that will conclude this part!

Click to enlarge