Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design Based on Silhouettes (Exclusive Tutorial)

Design Based on Silhouettes (Exclusive Tutorial)


To complete this tutorial you will need a photo of person you want to create a silhouette from. In addition, you will need to select the silhouette of this person on white background. I will not describe how to do that in this tutorial. You can easily do that with standard selection tools and by reading photoshop internal help.

I will use already cropped image of the girl taken from Templatemonster’s free clipart library. You can download the source image from here.

Step 1. Please open the file source.png in Photoshop.

image 1

Step 2. Create a blank layer behind the girl image (Layer – New-Layer or press Shift+Ctrl+N).and name it “Background”.

image 2

Step3. Now select the “Background” layer and go to Select-All (Ctrl+A). Choose a Paint Bucket Tool (press G) and choose red color – check the picture below.

image 3
Click Image to Enlarge

Now you can click in any place of the image and fill the whole space with red color. Finally, you should get the picture like this:

image 4

Step4. Now double click on Layer1 with girl to open Layer Properties.

image 5
Click Image to Enlarge

Select Drop Shadow checkbox. No need to change any parameters for shadow. You can play with them later. Then select Color Overlay checkbox and then click on Color Overlay item to select a color for this effect.

image 6
Click Image to Enlarge

Step5. Choose Black color and press OK. You should get such picture:

image 7
Final Result

You can also open again Layer properties window by double clicking on Layer 1 and select Outer Glow effect. This way you will get the picture below.

image 8
Final Result with Outer Glow Effect

Such effects can be used in creating silhouette compositions in web design or source files for flash animation. Please check a nice example below:

Design Based on Silhouettes (Exclusive Tutorial)



Author's URL: David Braun
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Design Based on Silhouettes (Exclusive Tutorial)"

Captcha