Design a Layout for a Non-Profit Organization in Photoshop

In this tutorial we will be creating a homepage layout for a fictional non-profit organization. Many non-profits and charitable organizations share similar needs for a website, including information about the organization’s history, purpose, and what they do, as well as a way to stay in contact with supporters and donors, and to provide the organization with a face to new visitors.

Here is the end result of what we will be creating (click the image to see it full size)

Step 1: Creating a new document

Go to File > New, and create a new document 1600 pixels wide and 1200 pixels high. The site will use a 960 pixel width, but we’re going to use the extra space on the sides to blend a textured are into a solid color.

Step 2: Setting the background

In the background layer, set a horizontal guide (View > New Guide) at 520 pixels, select everything above that line, and use the paint bucket tool to give it a color of #b48c61. Then use the paint bucket tool to make everything below the guide a darker brown color, I’m using #312517.

The draw another horizontal guide at 80 pixels and fill everything above that line with #312517. You should now have a background that looks like this:

Step 3: Add some texture

The middle area that has a lighter color is going to be given a texture, and I’m simply going to be using two photographs to achieve the texture. The first one was part of the concrete and pavement texture pack that was released here about a month ago. You can also get that image from Flickr. The second photo that I’m using is a ground texture photo that I took a while ago. You can get that photo here.

Here’s a preview of the two images used for texture:

The area that we are filling with texture is 1600 pixels wide and 440 pixels high, so I choose to cut out a section that size of each photo before pasting it into the document. Once you have the textures the right size, copy the first one, highlight the area between the guides at 80 pixels and 520 pixels by using the rectangular marquee tool, and paste the texture into the selected area.

Then bring up the layer styles options by double clicking on the layer in the layers palette so we can adjust the blending options (or, with the layer selected, go to Layer > Layer Style > Blending Options). Set the blending mode to “overlay” and adjust the opacity to 60%.

Then repeat the process to paste the second texture in the same area. Pull up the layer style options on this layer, set the blending mode to “overlay” and this time use 40% opacity. You should now have something that looks like this:

Now, the texture is set, but it will abruptly end at the sides on any wide screen monitors with a width greater than 1600 pixels. I’m going to use a gradient to blend the texture to a solid color so that wide screen users will see the horizontal bands, but the texture will only be in the middle. Create a new layer on top of the others and set the foreground color to #b48c61 (the lighter brown color used on the background layer). The select the gradient tool, and choose the liner gradient. Then, choose the gradient that goes from the foreground color to transparency.

To apply the gradient, use the rectangular marquee to select the textured area (if it’s not already selected), click on the left edge, hold shift and drag in to about the 300 pixels mark (if you don’t have the rulers turned on, go to View > Rulers) and release the mouse button.

Then, create another layer and do the same thing on the right side, coming in to about the 1300 pixel mark.

Step 4: The header

Our site will have a simple header with the made-up organization’s name and an example tagline. To start with, add the text for the title and align it to the 340 pixel mark using a vertical guide. I’m using the font Bebas at 24 pts, a color of #fdebd7 and a drop shadow effect set #000000, 75% opacity, and 2 pixels for both the distance and size.

Then, I’ll enter the tagline to the right of the title in 14 pt Arial with a color of #886f4f. At this point, it looks like this:

Step 5: The navigation menu

I’ll be using a vertical navigation menu just below the title that will sit on top of the textured area. The menu will use opacity so that the texture shows through the menu. You can set vertical guides at 320 pixels and 660 pixels to control the width of the menu. Use the rectangular marquee tool to select the area. Then, set the foreground color to #312517 (the dark brown used for the background) and select the paint bucket tool. Then set the opacity to 40% (you can experiment with some different levels of opacity and see what you like).

You can now add side borders to the nav area using the color #675138. To do this, I selected the pencil tool, chose a square brush, and set the width to 1 pixel. Click once where you want to start the border. Then move to where it should end, hold shift and click the mouse. This will make a straight line between the two points. I also set horizontal borders to separate the navigation items. To do this I set horizontal guides at 130, 215, 300, 385 and 470 pixels, and used those guides to draw the borders with the pencil tool.

Now we can add the text for the navigation menu. To get things lined up evenly you can set a vertical guide at 340 pixels (which will align the menu vertically with the start of the organization’s name in the header), and horizontal guides at 150, 195, 235, 280, 320, 365, 405 and 450. Use these guides to align the text both vertically and horizontally. For the larger text, which will not be links, I’m using 18 pt Bebas with a color of #312517. And for the text that will be links, I’m using 14 pt Arial with a color of #7b0900.

Here is what we have so far:

Step 5: The main photo area

We’re going to use a large featured photo with two other photos behind it. I think the easiest approach is to start with the image that will be in the front. The photo is one that I purchased from iStockphoto, it can be found here. The photo is 425 pixels wide and 282 pixels high, and in the final design it will have a border of 10 pixels all the way around. For me, the easiest way to do this is to create a new document 445 by 302 (adding to pixels to each side for the border) and use the paint bucket tool to fill it with #fdead8. Then paste the photo into the new document.

Next, we’ll add a 1 pixel border to the image with a color of #9b7853. To do this, select the pencil tool and a square 1 pixel brush and add a line at the edge of each side. Then we’ll copy this image, paste it into our layout and position it in the textured area. You can use vertical guides at 660 pixels and 1280 pixels to show the width of the area that you have to work with, and place it in the middle.

We’ll then go through the same process to create two other photos of the same dimensions to lay behind that photo. I just choose two photos that were available at sxc.hu, added the border and pasted them into the layout. Only a few pixels of these photos will be showing, so it really doesn’t matter what you use.

When you paste these photos in they’ll be laying on top of the main photo. Hit control + T (transform) and you’ll be able to tilt the photos so the lay a little bit crooked beneath the main photo.

Use the mouse and/or the arrow keys to get them slightly turned and moved just a bit to the left and to the right of the main photo so that the edges will be visible. Then drag the layer containing the main photo to the top of the other layers and it will look like this:

I’ve also added a drop shadow to each of the three layers containing the photos. Use the color #555353, with 75% opacity, at 90 degrees, with a distance and size of 3.

Step 6: The dark border

Below the navigation and the main photo area, create a 10 pixel high border using a dark brown color (#21190f). Then, at the bottom of the border, use the pencil tool with a 1 pixels wide square brush and create a line with the color #433320.

Step 7: The sidebar

The sidebar is going to contain a call for newsletter signups and a list of upcoming events. We’ll start with the newsletter area. I’m using vertical guides at 320 and 660 pixels and horizontal guides at 540 and 715 pixels to create the box the will hold the newsletter information. The color of the box will be #fdebd8, with 5 pixels of #e5d4c1 all the way around (those 5 pixels are inside the guides mentioned above, not outside). I’ve used the rectangular marquee tool to select the area and the paint bucket to fill it with color.

For the mail icon I’ll be using an item from the Practika icon set released by Smashing Magazine. Set the icon to the upper left with the text “newsletter” in 14 pt Bebas and #312517. Below that, I’m using a line of text in 12 pt Arial with the same color.

Then I’ve set horizontal guides to create the two form fields and the submit button. The guides are set at 625, 645, 655, 675, 685, and 705. Vertical guides are also set at 380 and 550, and the form fields can be created using the rectangular marquee tool and the paint bucket.

You can then give the form fields a 1 pixel border with the pencil tool and a color of #e5d4c1. After you’ve created the form fields and then button, create the text for “Name”, “Email” and “Subscribe” using 12 pt Arial.

Step 8: The events list

Below the newsletter area we’ll create a space that will highlight upcoming events. This box will use the same colors, the same 5 pixel border and the same width (320 pixels to 660). The height will be set by using horizontal guides at 735 and 1035.

In this section I’ll be using a calendar icon that is part of the Flavours icon set, again released by Smashing Magazine. Set the icon and the text “Upcoming Events” (14 pt Bebas, #312517) into place.

I’ve created a text box with 5 pixels to either side that will contain the links for upcoming event and their dates. The event items are 14 pt bold Arial, #7b0900. The dates and times are 12 pt regular Arial, #312517. And the link at the bottom to the full calendar is 12 pt regular Arial, #7b0900.

Step 9: The main text area

Now we can move on to the main text. Set a vertical guide at 680 and a horizontal guide at 540, and use these guides to align a text box in a new layer. In that text box create a headline using 18 pt bold Arial, with a color of #fdebd8. Below the headline, paste a few paragraphs of filler text (I use Lorem Ipsum). The body text is 12 point Arial, with the same color as the headline.

Step 10: The footer

You can now create the footer by creating a new layer and using the rectangular marquee tool to select the area, and the paint bucker tool to fill it with #21190f. Use the pencil tool to create a 1 pixel border of #433320.

Below the sidebar, create a textbox to hold the links that will go in the footer. For this text I’ve used the same setting as the body copy, 12 pt Arial, #fdebd8.

The last thing to do is to add a photo area to the footer. I’ll be using a photo size of 100 pixels by 100 pixels, and you can line things up by setting vertical guides at 680, 780, 800, 900, 920, 1020, 1040, 1140, 1160 and 1260. And horizontal guides at 1075 and 1175. This will create five 100 x 100 boxes where the photos will go, with 20 pixels between each of them.

I used photos that I found at sxc.hu, but you can use anything here or just fill it with a solid color to hold the place for a photo.

After pasting in the images, my final action was to draw a 1 pixel border around each photo with the pencil tool and the color #433320.

The Final Result:

Here is the final result of the tutorial (click on the image to see it full size):

The original Photoshop file used for this tutorial is available for download if you would like to use it: Download the zip file.

If you’re looking for web design inspiration for creating a non-profit website, see the new post at Vandelay Design, 40 of the Best Non-Profit Websites.