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)

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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:

Tutorial for creating a non-profit website layout in Photoshop

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:

Tutorial for creating a non-profit website layout in Photoshop

Tutorial for creating a non-profit website layout in Photoshop

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%.

Tutorial for creating a non-profit website layout in Photoshop

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:

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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:

Tutorial for creating a non-profit website layout in Photoshop

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).

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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:

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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:

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

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.

Tutorial for creating a non-profit website layout in Photoshop

The Final Result:

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

Tutorial for creating a non-profit website layout in Photoshop

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.

0 shares
Stephen Snell is the owner and editor of Vandelay Design, a popular design blog.
  1. June 2, 2009

    The text line in the text body is too long. The maximum appropriate length is 60-70 characters. You could add some margin to the left of the main text body and in that way you will get some air for the text and a shorter text line.

  2. Good use of a simple texture. Alignment could be improved. I do agree with Elio on the line length of the body text. Using the left margin Elio mentioned as well as a little on the right, you could align the body text with the edges of the featured photos. Nice design overall.

  3. June 2, 2009

    Thanks for the feedback. I personally don’t find the body text area to be too wide, but if other people do then it probably should be narrower. Adding some more padding to each side won’t be difficult. Thanks.

  4. Pingback: The Best Links Of The Day 02/06/09 | D-Lists

  5. Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  6. June 3, 2009

    There is a really nice use of texture, that reflects the subject for the website, making it grainy and almost a cardboard effect, like the sign the homeless man is holding.

  7. June 3, 2009

    Instead of making the content are more narrow, consider using a larger font size. On a high-dpi screen such as a lot of laptop screens, or for someone sitting at the proper distance form the screen (2 feet or more), 14 or 16px is definitely more comfortable to read.

  8. Pingback: visualisierte | media design - Weblog about the life of a digital media designer : links for 2009-06-03

  9. Pingback: Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog

  10. Pingback: 20 lehrreiche Web Design Tutorials | hpvorlagen24 Webdesign Magazin

  11. Pingback: » Blog Archive » Design a Layout for a Non-profit Organization

  12. June 23, 2009

    really great tutorial, keep them coming! I think there is a lot of room for modification to individual design style, this is a great basis tho

  13. June 29, 2009

    This is a great tutorial! I really appreciate how you included every single step, and all of your directions were really easy to follow. Thanks a lot!

  14. Pingback: 30+ Easy To Follow Photoshop Layout Design Tutorials

  15. Pingback: 30 Web Design Tutorials from Scratch in Photoshop | DESIGNwalker max

  16. July 23, 2009

    Even an advanced Photoshop user can benefit from going through these step-by-step tutorials. I like to see the way other designers move through a project and the tools they implement. I always pick up a few tips that make me more productive.

  17. Pingback: More Than 30 Photoshop Templates Tutorials (Easy Design Tutorials) | Best of Blogger

  18. Pingback: 30+ Easy To Follow Photoshop Layout Design Tutorials @ A Genius Blog

  19. Pingback: Geek Sucks » Blog Archive » 60 Exclusive Photoshop Tutorials to make you a master of Website Layout Design

  20. Pingback: 60 Exclusive Photoshop Tutorials to make you a master of Website Layout Design | Joshua Krull

  21. Pingback: 15 photoshop website tutorials that will improve your design skills | Webdevtuts

  22. david
    November 10, 2009

    Okay. This is great. But now how do you turn this into an actual website?

  23. November 11, 2009

    I took the basic idea, picked a couple of colors with the help of kuler.adobe.com, decided on a different texture (mostly because one was broken above), then before I put any content into, I used the http://960.gs (the fact that this was 960px anyway was a plus) and then got a copy of Joomla! from joomla.org, plus the 960forJ! template helper and made a website using Joomla! with a custom template. Thanks for the inspiration, I just needed an idea to go with for a project that I promised for a non-profit.

  24. November 11, 2009

    Rob,
    That’s awesome, I’m glad to know that it had some real-world impact.

  25. March 24, 2010

    Hi,
    Excellent post. Keep up the working and looking forward to more great articles in the future.

  26. August 14, 2010

    thanks itโ€™s awsome!

  27. August 20, 2010

    I totally agree with Roger – we often know how to do the same thing, but in a different way and tips can always speed it up and crank it to 11. ๐Ÿ™‚

  28. September 14, 2010

    Intend to know a lot more regarding the same. Do you have additional details?

  29. October 27, 2010

    i only buy my pc parts on very reputable computer stores both online and offline:~;

Leave a Reply

Your email address will not be published. Required fields are marked *

Design Inspiration: Watercolors