Web Design Tutorials Made Easy

As a web designer often times I run into a stock photo that has one element that I’d really like to utilize. The problem is that it is usually surrounded with some kind of background and/or other elements I’d rather not be part of my image. You can use a variety of tools to remove them including the Eraser, Magic Wand, the Lasso Tool, and many other combinations.

Each of those tools have their uses, but I have a new found favorite I’ll share with you today. The extract tool/filter is my newest obsession. It is easy to use and gives great results if correctly wielded.

Enough with the chatter, on with the tutorial.

Step 1:
Begin with your image, in my case its the firefox logo on white. (yes I know its simpler with a solid background color to use the Magic Wand but this is just a sample)

Step 2:
Under the Filter menu in the toolbar you are going to want to select Extract. You can also use Alt+Ctrl+X (or Alt+Cmd+X on a mac).

Step 3:
With the Extract filter window open you are going to want to make sure you the following settings:

• selected the Highlighter tool (top of the left menubar in the Extract filter window)
• brush size is set to an appropriate size (varies on image resolution)
• your highlight color is set to a contrasting color (so you can see where you have highlighted)
• and most importantly you are going to want to have the Smart Highlighting checkbox checked.

Step 4:
Now comes the tracing. All you have to do after your settings from step 3 are set is draw around your image. Your smart highlighting will follow the edges as best as it can based on how well you trace. Keep in mind the larger the brush size the less accurate the smart highlighting will be. Also notice how I am tracing zoomed in very close, this will help make sure you are truly following the edges better. Your end result will be determined based on how well you did this step.

Step 5:
Once your image is fully traced around, being very careful that you have a fully enclosed spread of color. Change your tool to the Fill Tool (second tool from the top on the left side menubar in the Extract filter window)

Step 6:
Click inside the area you just traced. If you have no gaps in your highlighting from step 4, you should have a “selection” similar to below.

Step 7:
If everything looks correctly highlighted/selected, then choose the ok button to make it final. If it doesn’t look correct and you want to fill in some more gaps, then just hit Ctrl+Z (or Cmd+Z on the mac) to undo your last action and fill in the necessary gaps before accepting your highlighting. This may save you from having to trace all over again. Once you click on OK your image should no longer have any of the background and should be on a transparent one like below.

Final Step:
Now comes the fun part. Use your now transparent image in any fashion you’d like. Below is my final image, which I quickly did using some other filters (clouds, blur, motion blur) adding a drop shadow, and adding some text to finish it off. Give this tutorial a whirl and don’t be shy in sharing your results, we’d all love to see them (please do not post elicit or obscene material as it will be immediately removed).