Flickr Creative Commons + Photoshop = Easy Silhouette Images

16 Feb 2009
Posted by m1mic

For a recent web design that I was creating, I wanted to spice up the look and feel a little bit by having a silhouette background image. The site that I was working on is an information portal about working and jobs, so I wanted to have something that conveyed team work. Also, to speed up development time, I wanted to convert an existing photo into my silhouette. Enter Flickr Creative Commons search (part of their advanced search http://www.flickr.com/search/advanced/).

Why Creative Commons? Simply enough, because the copyright holder expressly sets the permission for what you can do with their work beforehand. I typically look for content that can be added to or enhanced by me (Creative Commons Remix) and content that can be used Commercially. After a little bit of searching, I found this photo:

Team Building by Flickr User a4gpa.  Accessed from flickr.com/photos/a4gpa/2312527906. Creative Commons Attribution-Share Alike 2.0 Generic License
Accessed from http://flickr.com/photos/a4gpa/2312527906 - Flickr Username: a4gpa.
Image is licensed under the Attribution-Share Alike 2.0 Generic license.

Now that I have the photo that I want to use, it is time to fire up Photoshop and separate the people from the background. Using a combination of the Freeform Pen Tool, the Magnetic Lasso Tool, and a solid color background, I traced the outline I wanted to use and came up with the following:

Photoshoped outline of 4 gentleman standing shoulder to shoulder

Now that I have my outline, I need to separate the outline from the background. Since I used a solid background color when I was using the Freeform Pen Tool, I can simply use the Magic Wand to select the background, and then do a Select >> Inverse to get just the shape I want to use for the silhouette. Since I want to use a different background color, while the cutout was still selected, I created a new layer from the background.

Next, I need to create my silhouette by using the Gradient Tool. I decided to start with a black at the top and to fade it out to white. I set my Foreground color as #000000 and my background color as #ffffff and applied the Gradient Tool to my layer (while the shape was still selected).

Photoshoped Silhouette of 4 gentleman standing shoulder to shoulder

Now that I have my silhouette, I can now plug it into the color scheme/design that I was working on. Have fun!

Photoshoped Silhouette applied to a blue background gradient of 4 gentleman standing shoulder to shoulder