Silhouettes as an art form originates back to as early as 18th century drawing its name from a French minister Étienne de Silhouette who imposed heavy economic cuts on French people. Quite symbolically austere outline portraits which became popular in the same time period started to be referred as Silhouettes.
Silhouettes art had tremendous popularity which has grown over years and is now associated more with images depicting fashion and fitness. Traditional ways of making Silhouettes are somewhat complex which involve cardboard and paints, but thanks to two wonderful inventions of mankind – Photoshop and Wacom things are much simpler now.
In this tutorial I will take you through some beautiful examples for inspiration and then we will proceed to make a silhouette from scratch.
Step 1: Inspiration
Silhouettes in movies
The famous silhouetted image of Elliot and E.T. encircled by the moon depicted in Steven Spielberg’s E.T. It is now a part of the logo of his film and television company Amblin Entertainment.
The second one is of Alfred Hitchcock in American television series Alfred Hitchcock Presents in which he himself appears in a silhouette form in the opening screen and in a number of scenes as well.
Silhouettes as traffic symbols
The first one is a Japanese railroad crossing signal which uses a silhouette of a steam engine. The second one is from Canada which warns drivers for speeding cameras. The third one is a Swedish moose warning signal, portraying silhouette of a moose, a typical encounter you might experience while driving in Sweden!
Silhouettes of public figures
The first one is of English novelist Jane Austen, author of famous titles like Pride and Prejudice (1813) and Sense and Sensibility (1811) . Her silhouette is attributed to 19th century artist Mrs. Collins and is displayed at the National Portrait Gallery, London. The second one is of silhouette depiction of Queen Victoria used as decoration in the London Underground. The third one is artwork of designer Jonathan Mak depicting Steve Jobs on the apple logo, which went viral on the internet few days ago.
Step 2: Sketch
Grab a pencil and a sheet of paper and start sketching your ideas. No need to sketch in detail as we are going to use only the outline for making the silhouette, but make sure that the dimensions and/or anatomy is correct. In my case my client wanted something like a person using a phone. I made a few sketches, and drew a dark outline around them.
The first idea depicts a lady walking a dog, looking at her phone. I imagined a background with neighborhood depiction like houses etc. which I can add to the silhouette later on. The second idea is of a guy standing and looking at his phone. In this case I imagined a park or similar setting with street lights etc. as background.
Step 3: Scan
Draw a thicker outline on your sketch and scan it. After scanning I found that the silhouette of the lady with dog appeared better on-screen, so I went ahead with it.
Step 4: Digitally Enhance
Open up the scanned image in Photoshop (or similar editor) and plug-in your Wacom (or similar device).
Create a new layer, select brush tool 2-3px, and set a contrasting foreground color (like red, so that it visible) and using the Wacom pen outline the image.
b. Fill the outline with the same color.
c. Duplicate the silhouette in a new layer, use the select tool to select the entire silhouette and fill it with #00000. In this step you can zoom into the image and edit minor flaws and smooth the outline with careful movements of the brush.
If your silhouette consists of two or more elements, it’s easier if you handle them one by one. In my case I divided the task into three – the lady, the leash and the dog. So I repeated step a to c two more times and here is what the silhouette looks now.
So now the silhouette is done, you can save it as a vector and then proceed to using it in a banner or an image as required.
d. As I said before, I imagined the entire picture to be some sort of neighborhood, so created an apartment block and duplicated to make a couple of them for the background.
e. Now add the silhouette to the background
f. Once the silhouettes and the background is ready, its time to work on the layout of the banner or the final image as required. Since this project was a banner for website I kept width as 900px and height as 357px. The elements that I added in this stage are speech bubbles which contains a specially designed Facebook button for the app and text.
The final banner looks like this. The banner depicts a Facebook enabled e-commerce app (www.dragdropshop.com), and will be a part of a sliding js carousel on client’s new homepage.