Create a Charity Website Layout in Photoshop

In this tutorial we will be creating a minimal, yet very elegant, layout in Adobe Photoshop. The main purpose of the template will be for charity and NGOs who needs a specific kind of design, with more call-to-action buttons which would increase the number of contributions to their charity/organization.

This tutorial is an exception because you will not be getting the final PSD file for download, because this page, along with the others is part of a template available for sale at ThemeForest. If you would like to grab the full template, which consists of 5 layered designs then you should click the final product image to be redirected to the ThemeForest item page.

Charity Website Final Product

Click for full resolution and other pages.

Note: this tutorial covers the home page of Charity, a PSD template for a full website that you can check out on ThemeForest if you want the whole package.
Step 1 

We will start our layout by creating a pretty large canvas in height. Set the width at 1020 pixels and the height at 1725 pixels. We will be working with a 960 Grid System. I recommend Nathan Smith’s 960 grid system, which you can grab for free, right here.
Step 2 

 

We’ll be adding a really subtle pattern so we won’t have to work on a white, plain canvas. The best source for free subtle patterns is SubtlePatterns.com, where you’ll find hundreds of awesome textures. Grab any light texture you think will be suitable, and apply it to our background, so it would cover all the canvas space. We don’t want it to be really visible that is why we will give it an opacity of 15 percent.
Leave 70 pixels in height (count from the beginning of the header) for our navigation, and then create a gray shape, which is 500 pixels in height and will be the base for our slider section.
Step 3 

Fill the space we left blank with a dark-gray, almost black color: #272727.
For this layout, i chose 2 font families. Helvetica in Regular and Bold and League Gothic are the fonts we will be using. If you do not have Helvetica, you can always use Arial, which is pre-installed on windows computers, and barely differs from Helvetica Neue. The font for our logotype is Coffee Script Italic, 36pt. The font for navigation is Helvetica Neue Bold, 12pt. The color used for the font and navigation text is white. We’ll add an almost visible black slash sign, between each navigation link.
Step 4

At the right side of the navigation we will place 2 small “Call to Action” buttons. By using the Rounded Rectangle Tool (U) create an orange-colored shape (#e26424). Apply a soft light gradient overlay effect, with an opacity of 30 percent.
Step 5

We continue our button by adding an inner shadow effect, the blend mode being soft light as well, and the opacity: 75%.
Step 6

One more touch for our button will be a drop shadow effect. Set the size to 2 pixels, the distance to 1px and give it a gray color: #a3a3a3.
Step 7

Finish the button by applying a gradient stroke effect. Start with a very dark red (#491803) and finish with a brighter one (#8a2800)
Step 8

Grab the IconSweets2 free icon set, and grab the “cloud-download” icon and then input some random text near the icon.
Step 9

Result So Far:

Repeat the same exact steps, the only exception is the color of the button base shape, which is now a dark-gray:  (#4d4d4d).
Step 10

Grab the Rounded Rectangle Tool (U) and create a shape of about 340 pixels in height, and 700 pixels in width. Give it the usual dark-gray color: #282828.
Step 11

The rounded corners shape looks plain and too simple, that is why we will be adding a nice ribbon to it. Creating a ribbon similar to the one you can see on the screenshot above is pretty easy, but we will not cover it’s creation as it is beyond the scope of our main tutorial. Webdesign.Tutsplus have published a very good and detailed tutorial on how to create such a ribbon.
Use the Helvetica Neue Bold font in 14pt and add some random text. Find the “globe” icon in the IconSweets2 icon set, give it a gray color, and place it near the left border.
Step 12

Grab any image or picture of 430 pixels in width and 240 px in height. I personally prefer Flickr for images licensed under the Creative Commons licence.  We will write some text near the image, by using League Gothic (24pt) and Helvetica Neue Regular (12pt). Copy the orange button we created in the header, remove the icon and change the text to “Read More” and align it with the text.
Step 13

By using the League Gothic font (72pt), input some text. In my case, it’s a donation-related message. The color of the font must be #272727 and give it a white drop shadow effect.
Step 14

Create 3 rectangles.  Let them be 250×150 pixels and position them accordingly. By using a nice orange color (#dc561d) and the rectangle tool create a simple bar which would connect those 3 boxes. Use the same color to create three vertical bars with triangles, which would cover the left part of boxes.
Step 15

Now start inputting text in the boxes. First box would have some simple text in it. The second would contain a list of items. By using the Elipse Tool (U), create a few dark circles and apply the Gradient Overlay effect you see in the image.
Step 16

Find any payment icon set you would like and grab 4 random icons and place them in the bottom part of the box.
Step 17

Take the Rounded Rectangle Tool (U) and create a shape. Apply a Gradient Overlay effect with an opacity of 20 percent. Give it the same inner shadow and drop shadow effects we have applied to other buttons during the creation of this layout.
Step 18

Grab the “finance” icon from the IconSweets 2 set and then input some text. I used Helvetica in two weights(bold/regular) and 2 sizes (18/12px). Apply the drop shadow effect you see on the image.
Step 19

Create 2 buttons and position them under the second box. By this time, you will be able to create them on your own. If not, refer to previous steps.
Result so Far:

Step 20

We move on to creating another section. It will be really simple and basic. Will consist of a text block, one image and a button. By using the “League Gothic” font, 36px, input “Browse All Charities” and center it.
Step 21

Use the Elipse Tool (U) to create an orange circle. Apply a stroke effect with a darker orange color. Use “League Gothic” to input the date.
Step 22

Duplicate the circle two times so you would get “3 upcoming events”. Use Helvetica to input event names and locations.
Step 23

Grab the “pin” and the “phone” icon from the IconSweets set and give them a really nice, subtle gray color. We’ll be creating four small widgets. For the first two, we’ll be using Helvetica (uppercase/lowercase) of 14 and 12 pixels accordingly.
Step 24

Use the Rounded Rectangle Tool (U) to create a white shape. Apply a gray stroke (#c6c6c6) and then take and cut a screenshot of any google maps location. Place it accordingly.
Step 25

The last thing would be a “box” with social icons. By using the Elipse Tool (U) create 6 equal circles. Five of them must be gray, #c6c6c6 will work perfectly. One circle must be orange, it will represent the “hover/clicked” state.  Finish it by adding a gray button (refer to previous steps for details).
Result so Far:

Step 26

Let’s finish our layout by adding a “footer bar”. It’s nothing complicated. Just a simple, dark gray (#272727) bar which is supposed to contain some copyright information or something similar.