Step-By-Step Photoshop Tutorial
John Falke
September/October 2008 Are You a Leader Worth Following?
click for a printer-friendly version of this page


for a complete list of this issue's Web extras, click here

About two years ago I was asked to create a graphic for a sermon series on the topic of faith. It's a commonly used word, but challenging to depict with visual elements. After brainstorming with several others, I came up with the idea of a boat in stormy weather. I wanted to portray Jesus sleeping on the boat during a storm and the disciples panicking. A more modern scenario might be the Titanic sinking in treacherous waters. In both cases, the people onboard faced extreme circumstances. Some responded in faith, but most didn't. In this tutorial, using Photoshop and very simple techniques, I'll teach you how to re-create a thematic graphic about "Faith" that leaves a lasting impression. If you don't have Adobe Photoshop, you can download a trial version from http://www.adobe.com/downloads/. Select Photoshop or Photoshop Extended and follow the installation instructions.

1) Open Photoshop and Create a New File
Start a new file by pressing Command-N (PC: Control-N) from within Photoshop. Set the width and height to 1600 and 900 pixels respectively and make sure the resolution is 72 pixels per inch. Because this will be displayed in widescreen format, the aspect ratio is 16:9. If you are working in standard definition, you should use a 4:3 aspect ratio and choose to make your document 1600x1200 pixels. See figure 1 for my settings.

figure 1

I always recommend creating your graphic at least 50% larger than it will be displayed on the projection screens. That way you have a larger file to work with if other promotional ideas come up after the fact. I typically work in RGB color mode and convert a copy of the file to CMYK if any four-color processed printing is required.

2) Find a Boat
Find a picture of an unassuming boat, one that looks typical, perhaps even a sailboat, but nothing special. I selected a photo by Justin Horrocks from www.istockphoto.com (Photo #104258 featured in figure 2) because it had plenty of water and clouds around the boat, and the sun was directly behind the boat's sails.

figure 2 click the image to download a full-size version

boat

Using the Move Tool (V) click and drag the photo to your blank canvas. You can name the layer "sailboat" by double-clicking the layer name in the Layer's palette. If you want to re-size the image, press Command-T (PC: Control-T) to display the transform handles and drag in the corners while holding the Shift key to maintain the image proportions. I reduced the sailboat to about 80% and positioned it on the right side of the canvas.

3) Find a Compass
People on a boat want to know where they're heading. So a compass is a natural image to include in this boating montage. I chose this ancient and worn-looking compass from Istock by Jesse Bennett-Chamberlain (shown in figure 3).

figure 3 click the image to download a full-size version

Place the compass image in your file. Since this particular compass is cut off on the right side and it would be more helpful in the empty space on the left, flip the image horizontally (Edit>Transform>Flip Horizontally). You can also resize the compass as necessary. To cut out the compass, let's use the Pen Tool.

The Pen Tool
Initially, I was slow to see the importance of the Pen Tool. I resisted mastering this powerful tool for years. In fact, one day I was convinced that Photoshop was missing a tool to accomplish some of the things I wanted to do. Then someone reminded me about the Pen Tool.

Since then I've been working on mastering this amazing tool. At first it comes across as a bit complex and difficult to use. However, conquering it could be one of the best things you do in Photoshop because it's the most flexible and powerful selection tool in the application.

To trace out the compass, press P to switch to the Pen Tool. First use the pen to create an oval that is approximately the same shape as the compass (see figure 4 for the Pen Tool settings). Then press A to switch to the Direct Selection Tool, and adjust the individual points on the path to match the compass exactly.

figure 4

Once you're satisfied with the points on the path, drag the Working Path on the Path's palette down to a new path icon and name the path "compass." Then click on the Load Selection button on the Path's palette to make the selection active. Back on the Layer's palette, click on the compass layer, and then add a layer mask by clicking the Add Layer Mask icon (see figure 5 for results).

figure 5 click the image to download a full-size version

4) Add a Photo of Waves Hitting Rocks
Next find an image with rough waves hitting against rocks (I chose this image from Istock by John Christian Lonningdal, shown in figure 6). Place the rock layer below the compass layer and line up the rocks with those in the sailboat photo.

figure 6 click the image to download a full-size version

Add a Layer mask. Then use the Brush tool (B) with a large soft brush and the foreground color set to black to erase the hard edges of the photo and reveal the sailboat again.

5) Insert Large Tidal Wave
Locate a large wave that looks like it could be crashing into the boat. Using the same techniques as above, add a layer mask and remove the hard edges of the wave photo. Place the tidal wave just to the right of the sailboat.

6) More Action
If you want to create more action, you could find a photo of whitewater rafting and mix it into the montage. To make the photo subtle, place it in the top right corner and blend it into the water/sky. Add a Layer Mask to fade out the edges of the photo just enough so the sailboat is visible. You can also try different Blend modes or lower the layer opacity to make the whitewater raft blend in even more (results shown in figure 7).

figure 7 click the image to download a full-size version

7) Final Touches
Repeat the previous step to fill the void in the bottom of the montage with a photo of rocks and water. Now the sermon graphic is nearly complete, but this particular montage lacks good color. Hand tinting is a method that allows you to manually colorize an image and works best with B&W images. Because this is a color graphic and we don't want to lose the color information, create a Hue/Saturation Adjustment Layer (Layer>Adjustment Layer>Hue/Saturation). By sliding the saturation slider all the way to the left, it effectively makes the image B&W without losing the color. Then create a new layer on top of the adjustment layer, and change the blending mode to color. That way any color applied to this new layer will change the color of the image.

Set your background and foreground colors to #B3787D and #7C3977, two shades of purple, and begin coloring the layer on the left side. Press the X key to alternate between the two colors. Then pick two shades of yellow (I chose #E4BC54 and #796128), and brush the right side of the graphic. You can use black to remove the color of the rocks in the foreground of my graphic (results shown in figures 8 & 9). Experiment with different color combinations to add your own flair.

figure 8 click the image to download a full-size version


figure 9

8) Add Title Text and Save Multiple Versions
Type the word "FAITH" in black using "SavedByFaith" (or a font of your choice) at a very large size. Lower the opacity to 62%, and change the blend mode to Overlay. Then duplicate the text by pressing Command-J (PC: Control-J). On the top copy, change the text color to white and reduce it's size to about 256 pt. Add a stroke layer style with the Hue blend mode and choose a purple color. Then add a large black outer glow using the Overlay blend mode. Finally, add a purple inner glow to make the text stand out (see figure 10 for the final graphic with text).

figure 10 click the image to download a full-size version

For your worship service, I recommend saving at least three versions of the graphic. I usually save one with the words, one without the words, and one with the words small in the corner. This will give you a variety of options as you organize the content for your worship service.


John Falke is the graphics and communication director at Fairfax Community Church in Fairfax, Virginia, and author of the Photoshop For Ministry seminar tour (www.photoshop4ministry.com).

copyright © 2009 Group Publishing Inc.
 
current issue
back issues
REV! staff
extras here
September/October 2009
God Space Heart Check (pdf)

Online Seminaries (pdf)

Do You Really Need a Doctor of Ministry? (pdf)
  all REV! Web Extras here

+  Small Group Ministry
From Facebook to face-time
+  Men's Ministry
How to rev up men's discipleship process
+  Youth Ministry
Warning signs of suicide
+  Children's Ministry
Lesson in love
+  Worship
CHOIRS: The original worship band
+  Volunteer Coordination
EQUIPPING: Not my job!
+  Church Biz
First impressions
+  Office Administration
Order in the office