by grafpedia.
It is very important today to help our fellow creatures. Every year, plenty of people get help from relief agencies. Today, I want to dedicate my work to them through my “special relief agencies” Photoshop tutorial. This tutorial teaches you how to create it in the way of this subject and useful to generate donations requests. Do not forget that these relief agencies can continue to work with help of your donations. Want to download this PSD layout ? Register for a VIP account
This Template can find its place into a WordPress system, do not hesitate to code it with a psd file oriented WordPress theme!
See below the final result of this Photoshop tutorial :

Clicking here, you can get the .psd file.
Regarding the pictures used in this Template: To create this tutorial, I bought the licences of the pictures from the websites shutterstock.com and fotolia.com. If you have not owner of these licences, you are not agreed to use these pictures. It is the reason I have not include them into the psd file to download.
STEP 1 Create your document
Open your Photoshop software and create a new 1000×1500px document.

Create now a new group (header) and a new layer (background). To create a group or a layer, easy click on the small icons located on the bottom of your layer window. Use the Rectangular Marquee Tool (M) to create an active selection (1000×40px). Fill this selection with the black colour using the Paint Bucket Tool (G). Reduce the layer opacity to 80%.

Open the bird.psd file available from the zip file attached to this tutorial and import it into your document. Use the Text Tool (T) to complete the logo (in my example, I used the Engel font available on this page).

Use again the Text Tool (T) to create a call number on the right.

To finish the first step, create a share line using the Text Tool (T) and the dash from the Verdana font.

Here the result:

STEP 2 The carousel
Make emotions, this method is used by the relief associations to generate a case of conscience which produces a donation. In my example, the website is dedicated to child help, I inserted a picture of a child to illustrate the relief agency auction. Select the picture of your choice and import it into your document.

Use now, once again the Text Tool (T) to add the slogan. Create a donation button, to do it, use the Rounded Rectangle Tool with a radius of minimum 50px (blue #0d9ce0). To finish, add a shadow on the text located in the button.


See here the result of the carousel.

STEP 3 Create the menu
Create a new group (menu) as well as a new layer. Create a black rectangle (1000×40px) on the layer (colour #000000). Put it on the bottom of the picture with the child and reduce the layer opacity to 80%. Use the Text Tool (T) to simulate some links. On the first active link, create a blue (#0d9ce0) rounded rectangle using the Rounded Rectangle Tool (U), with a radius of 3 pixels.


To create the Twitter counter, go to this link to download the icon. Import it into your picture. Add on this layer a colour overlay (menu layer>layer style> colour overlay). Use now the Text Tool (T) to complete the counter.


STEP 4 Add the content
It is now time to add the main content. Create a new group (content) and create after, a title and a share line of dashes using the Text Tool (T). Import a beautiful picture.

Use again the Text Tool (T) to add a small description (I retrieved fake text from lipsum.org). Use the rounded rectangle (U) with a radius of 3px to create the button.

Put all layers (title, sharing, picture, description and button) into a new group (box1). Then right click (mouse) on this group and select “Duplicate the group”. Make it a second time. Use now theMove Tool (V) to place both copies along the page width.

STEP 6 The newsletter
Regarding this type of website, the newsletter is an important tool. This part will be dedicated to register new members. Create a new group (newsletter) then create a blue (#0d9ce0) rectangle (1000×40px).

Use the Text Tool (T).

Use the Rounded Rectangle Tool (U) with a radius of 3px to create the form (input and button).

See now the result:

STEP 7 The footer
Up to the footer close this tutorial. Create a new group (footer). Create a new black (#010101) rectangle on the bottom part of your document.

Create one more time a title (same process used for the main content).

Use the Text Tool (T) to simulate a list of the last donations registered by the charity center. The lines as well as the button are created using the Rounded Rectangle Tool (U) with a radius of 3pixels.

On the right of the footer, there is a drop-down list for the last messages posted by the contributors of the relief agency. Create first a new group (testimonials) and create a new title.

Create a square now using the rounding rectangle (U), then use the Pen Tool (P) to create a profile. Use the Text Tool (T) to insert the message. Group the layers into a new group (message1).

Duplicate the group two times. Use the Move Tool (M) to align the messages on a column.
To finish, select the group message3, then go to menu Layer>Layer mask>Reveal all. Use the Foreground>Transparent and create a black gradient from the bottom to the top.

Use now the Text Tool (T) to create the counter. Duplicate the logo and place it in the background (press Ctrl/Cmd + t keys to activate the free transformation).

Create a blue button using the Rounded Rectangle Tool (U).

STEP 8 The Copyright
To finish the layout, create for the last time, the group Copyright and create a rectangle (1000×60px) with colour #272727. Create the Copyright with the Text Tool (T) on the left and on the right, add the social network icons : WordPress, Twitter, Facebook and RSS (find them on iconfinder.com).


The Template is now finished, see the final result:

Thanks a lot to you reading this tutorial.
Recent Comments