How to Use Photoshop to Deep-Etch an Image
Deep-etching is a graphic design term used to describe the process of removing a specific section of a photograph or image from its background so that it stands alone. This means that you can use just that part in a different way or on a different background.
When I'm designing websites I usually have an image in my head of what the final product is going to look like. I have one problem though ... it is exceptionally rare that I find a finished photograph that has the elements I'm looking for, arranged in a pleasing pattern that I'm happy to work with. Invariably, the background is cluttered or I only want to use one sunflower (for example) not an entire field of them in my final design.
Enter the art of Deep-Etching.
By making use of deep-etching in Photoshop, I have saved myself countless hours of frustration and hair-pulling melancholy. Once you've mastered the art of deep-etching, you can let your imagination have free reign and create that amazing header graphic for your new website or publication in a matter of a couple of hours (not days).
Let's take this maple leaf as an example:
Before and after results of deep-etching the maple leaf.
Methods of Deep-Etching
There are three methods of deep-etching used in Photoshop, each with its own little tricks of the trade.
Method 1: Using the eraser tool to manually erase the sections of the photograph or image that you don't want. The main problem with this is that it's not particularly precise and you end up with jagged edges and an image that looks as if it's been touched up. As with the maple leaf above, it has really detailed edges that give it its yummy look - were I to use this method, I'd either be spending 6 hours zoomed in to the max with a 1 pixel eraser or I'd lose the detailed edging.
Method 2: Making use of the Colour Selection option of Photoshop to select and delete specific colours from the image, hopefully leaving the bits you want behind. The problem here is that your standard photograph has millions of different coloured pixels and if you don't know what you're doing, you'll end up deleting too much or too little, and you have to manually go and erase the ghost pixels anyway ala method 1. If you look at the background on the maple leaf, you'll see there are at least 30 shades of brown there.
My preferred method?
Method 3: Making use of the Pen Tool in Photoshop to deep-etch the part of the image that I want to use. The advantages of using this method:
- You don't delete anything on the original picture during the process, which means that you can tinker with it until you're 100% happy with the result.
- You have very fine control over the tool, so you can adjust and edit it to your heart's content The final result of your deep-etching looks professional.
- Once mastered, no one would be able to see that the image has been touched up. (A personal bugbear of mine ... image touch-ups looking contrived and badly executed.)
It takes a bit of practice to master, but once you have it ... the sky's the limit.
It took me just an hour to deep-etch the maple leaf in the above photograph out of the background. So, let's get stuck into using the pen tool in Photoshop. A couple of things to bear in mind:
- For your first deep-etching adventure, choose an image with a high contrast between the section you want and the bits you want to remove. This gives you a precise edge with which to play and makes it much, much easier to know where you are, even when zoomed in.
- The Pen Tool creates a separate layer in your Photoshop document called a shape layer. This is overlaid on your image which means you're not tinkering with the original.
- The Pen Tool creates a path - a dynamic vector outline that allows you to edit it even after you've completed it. This is what makes the Pen Tool so powerful in deep-etching.
The icon on your Photoshop interface for the pen tool looks like the tip of a fountain pen.
Step 1: Starting out
Select the pen tool and click on your image on the border between the bit you want and the background; in my case, where the stem of the maple leaf starts. You will see that it creates a point on the image.
Step 2: Adding additional points along the outline
Now, click on another part of the image to create a second point. While you still have the mouse button depressed, drag the mouse a little to the left or right. You'll see that you've now created a point with two handles and a line connects this point to the next one. Move the mouse around until the line sort of follows the contour of the image. Don't worry about the handles too much at this stage, we'll be using them to fine tune our outline later.
Continue to add points outlining the entire image that you want.
As you can see, I now have a rough shape outline of the maple leaf. It's not perfect, but the basics are there. Just an aside: the black you see in the image above is just a masking layer - the maple leaf is still there, but this masking layer (automatically created when you use the pen tool) helps you to visualise where your outline is going.
For the next couple of steps to fine tune the outline, I set the opacity of the shape layer to 50% - I can still see where my outline is, but I can also see the maple leaf underneath. Now, I can go and perfect my outline.
To see the points that I've put down, I make use of the Direct Selection tool - the icon looks like this:
Click-click on my outline and voila ... I can see all the points or nodes that my outline contains.
Step 3: Fine tuning the outline
I've zoomed in quite close to my outline so that you can see the individual points and that it needs some work to get it to align perfectly with the maple leaf.
With the Direct Selection tool selected, click on the specific point that you want to edit. You'll see the little handles appear. By selecting one of the handle ‘knobs' you can move them around until the line conforms to the outline of the image.
Now, just as it is, if you move one handle, the other handle will move as well because the two are connected. Here's a little trick: If you only want to move one of the handles, hold down the ‘alt' key on your keyboard while moving it. This effectively ‘breaks' the connection and you can move the handles independently of each other. This is particularly useful when you have a sharp corner or edge - such as where the stem meets the leaf in the image below.
Looking at the image, I notice that I'll need additional points to make the outline exactly the way I like it. All you do to add additional points is to click and hold the Pen Tool Icon to see a pop-out contextual menu with additional options for the Pen tool.
To add a point: Use the Add Anchor Point tool.
To delete a point: Use the Delete Anchor Point tool.
Here you can see that I've added an additional point at the bottom right.
Continue working around your entire image, adding points and manipulating the outline until it looks the way you want it to. I usually work zoomed in on my image so that I can get it to match exactly. Work in a zoom level that feels comfortable for you. Me, being the perfectionist I am, I tend to work zoomed in at least 400-800%.
And here you go. If you compare the outline below with the one we started with, you can see that I've added in quite a couple of additional nodes and manipulated the outline to fit the maple leaf exactly.
This is the step that will probably take you the longest to master. Don't despair, a little practice and you'll be deep-etching like a pro in no time.
Step 4: Deleting the unwanted bits
Here comes the fun part - removing the unwanted bits from your picture. You have your outline, you've made it perfect ... now, let's make it work!
On your layers tab, you'll see the Shape Layer created with the previous steps. Make sure it's selected (highlighted blue). Now click on the Paths tab. You'll see a layer called Shape 1 Vector Mask or similar.
Double click this layer - it will give you a pop-up box allowing you to name your path. Choose a name and click OK. You've now saved your outline, so even if you delete that shape layer by mistake, you still have your outline safe and sound.
I called my outline ‘mapleleaf'. You could use a generic name, but when you're deep-etching multiple sections of an image, it helps to name your path layers something meaningful so that you can find them again quickly if you need them.
Select the path you've just saved (highlighted blue) - in my case, mapleleaf. At the bottom of the panel, you'll see several options that allow you to manipulate the layer. We're going to use ‘Load path as selection' - the third icon from the left that looks like a circle with a dashed outline.
Click on the icon and then go back to your ‘Layers' tab.
Here you can see that it's converted your path outline into a selection - the ‘marching ants' you can see around the maple leaf above.
At this stage of the process, I'd strongly recommend that you duplicate your original image layer, so that you have two copies of it - one for back-up just in case something goes wrong.
On the top grey bar, go to Select > Inverse Selection. This will change the marching ants outline from the bit you want (maple leaf here) to the background that you want to delete.
Now simply hit ‘delete' and there you have it. One deep-etched image that you can use in any way that you heart desires.