Goth Conversion




A couple of years ago (yes years) someone asked me how to do a digital goth conversion..

I had no idea how to do it digitally or even how to do it in the real world.  Even the overall look escaped me.

Since then the concept has been floating around the back of my mind and when I had the opportunity I would ask someone who was sporting the look what needed to be included.  As luck would have it I found two young gals (Holly and Erin) who became my short term goth consultants.

I've no idea how we started talking about it - after all these were two gals in their early 20's while I'm a guy who is a few years older than that.

Holly and Erin gave me some nice guidelines and encouraged me to write the goth conversion tutorial as soon as possible.

My two friendly "consultants" moved on to other opportunities and I lost track of them so I was at a bit of a loss about where to go next.  A few weeks back I bumped into a young lass named Bethany and she was all decked out in the "look" (a real life goth conversion) - pale skin, dark hair with colorful streaks and some piercings.

We got to talking and she was quite helpful.  She said she had tried to modify her look on her computer but could never get it to look right - her biggest problem was selecting the area she wanted to modify, especially the hair.

So let's look at the challenges and how to get around the challenges so you can do a goth conversion with Photoshop Elements.  Fun all around, right?

Just so you know - this may not be the best tutorial for you if you happen to be a beginner with Photoshop Elements.  If you know layers and layer masks and selecting complex areas and layer merging then you should be fine.

There is also a lot of brush work so a graphics tablet like the Bamboo or Intuos models are a good choice to make the goth conversion work easier and better looking as well.

Goth Conversion
Overall Guidelines


The overall look of a goth conversion seems to be ...
  • Pale skin (moving toward white).
  • Dark hair (perhaps with some streaks).
  • Outlined eyes.
  • Dark red or black lips, and
  • Perhaps a piercing or two. 
There is nothing in this list that cannot be completed quite easily in Photoshop Elements.

There are a variety of different methods you can use to do this conversion which is like most conversions you can do with Photoshop Elements. 

Hue and Saturation Adjustment Layers

When I first started working on the Goth Conversion my method of choice was to select the different aspects of the picture, promote them to their own layers and then use Hue and Saturation layers to apply the colorization.  This method works and the full instructions can be found farther down the page.

Gradient Map Adjustment Layers

One day it occured to me that there is an easier method to achieve the same results  with the goth conversion and that's to use what may be the single most useful, yet under appreciated Adjustment Layer - the Gradient Map Adjustment Layer.

With the Hue and Saturation Adjustment Layer I used extensive selections and with the Gradient Map I used mostly Layer Masks

What took hours to complete with the Selection/Hue and Saturation technique took less than an hour with Gradient Maps and Layer Masks and it seems to me that the results are much better!

When all was said and done it turned out that the two techniques worked best in combination with some parts of the goth conversion looking better with Hue and Saturation adjustmest and other parts of the goth conversion looking better with Gradient Map adjustments.

This just goes to show that there are many different routes to arrive at any point with Elements and this goth conversion is no different.  I suggest you try out both techniques to find the one you like the best and then keep the other one available for future editing.


goth conversion original


Here's a nice, simple shot that will be converted and we will start with the Gradient Map technique.

Goth Conversion
Gradient Map Technique


Are you at all familiar with the Gradient Map Adjustment layer?  If so then you know how useful they are and if you're not familiar with them well you're about to discover one of the real gems in Photoshop Elements!

Gradients vs Gradient Maps

There may be some confusion here as the two sound pretty much the same, but they are not.

A gradient is applied with the Gradient Tool or with a Fill Layer (Gradient) and there are five different types of gradients ...
  1. Linear
  2. Radial
  3. Angle
  4. Reflected
  5. Diamond
They can be very useful and they have a specific beginning and end point.  These types of gradients do not take the underlying image into consideration.

The first two types of gradients are pretty much the same other than one is applied directly to the image and the other is a fill layer.

The Gradient Map is a different thing entirely - it could have been called "A gradient that maps itself to the lightness values of an image adjustment layer" but that seems kinda long so Adobe shortented it to Gradient Map ...

The Gradient Map does take the underlying image into account as the Gradient "MAPS" itself to the lightness values in the image.  So a black to white Gradient Map will apply black to the darkest areas of an image and white to the lightest with varying shades of gray wherever it is needed.

A Gradient Map Adjustment Layer will create a fabulous Goth conversion in a few simple steps. 

The steps are ...
  1. Duplicate the Background Layer just to have a good copy available if you somehow mess up.

  2. Select the Background Copy and add a Gradient Map Adjustment Layer - Layer > New Adjustment Layer > Gradient Map ... or simply click on the little Adjustment Layer icon (it looks like a Yin/Yang symbol) at the bottom of the Layers palette and select Gradient Map.   Make sure the Gradient is Black to White

  3. Adjust the Gradient to taste keeping your eye on the area you are adjusting while ignoring the rest of the image.

  4. Invert the Layer Mask, grab the brush tool and set the foreground and background colors to black and white and paint the gradient back in where you want it to be.

  5. When you're happy with the results then Merge Down the Gradient Map to the Background copy and start over again with the next part you want to work.
Those are the steps so lets see how they work in real editing ...

The Face

Duplicate the Background layer on the off chance that you mess up somehow. If you're not sure how to do Step 1 then this tutorial may be a bit beyond your skill level.

Step 2 - New Gradient Map

Activate the Background Copy layer and then add a Gradient Map Adjustment layer.  If your Gradient Map layer is set to black and white that's what you want!  If it's not then the next step will set that right.

goth conversion layers palette
This is what the layers palette will look like - simple, huh?

This Gradient Map will turn the dark areas of the image black and the light areas white with a complete range of gray tones between them.

Don't get lost admiring the beautiful black and white image that appears when you add the Gradient Map!

Make sure the Layer Mask is selected (like this one with the little white box around the Layer Mask).



Step 3 - Adjust the Gradient


When the new Gradient Map Adjustment Layer is added it includes the Adjustment panel which is quite boring in its simplicity.
goth conversion adjustment panel
Here's the panel - the gradient is what will be applied and if it is not the one you want (black to white) then simply click on the gradient to open up the Gradient
Editor.

Now you can select the correct gradient.

Put a check mark in the Dither box to prevent any banding that may occur.


If you are starting on the skin then take a look at the image to see how the skin looks. 

Being the lightest part of the image (in color) it should also be the lightest part with the gradient. 

If it is too dark or too white (this is all your choice, you know) then click on the gradient to open up the Gradient Editor.







goth conersion gradient editor


The adjustments are done with this part of the editor ...


goth conversion gradient adjustment


Click on either the black stop at the bottom left end of the gradient or the white stop at the bottom right end of the gradient - this will cause the little diamond in the middle of the gradient to appear.

To make everything darker grab the little diamond and move it to the right along the gradient and to make things lighter grab the little diamond and move it to the left along the gradient.  It's a nice simple adjustment.

If you goof and somehow add a new stop on the bottom of the gradient just grab it and drag it down - it will disappear.

Here is how my first adjustment in the goth conversion looks with this image ...


goth conversion first adjustment


That's a nice black and white, isn't it?  Anyway I figured that was a good place to start with the skin so now onto the next step, which is ...

Step 4 - Invert the Layer Mask

By default, Elements applies the adjustment from the Adjustment Layer so you can see how it looks.  In this technique we want to get rid of the adjustment and then paint it back in where we want it to be.

To do that first make sure the Layer Mask is highlighted and then invert it by pressing Ctrl-I (Windows) or Cmd-I (Mac).

The adjustment will disappear (the picture is its normal old colorful self again) and the layer mask will turn from white to black.  

Make sure that white is the foreground color, grab the brush tool and very carefull start painting around the face - it's best to be using a Bamboo or Intuos tablet here just because they are so much more accurate than a mouse or a trackpad.

The brush should have a soft edge to prevent hard lines from showing.  Now it's time to carefully paint in the face avoiding the lips and the eyes - this is how the goth conversion looks after painting with white.  It is starting to get "the look" ....


goth conversion first mask


This is a good time to look at the eyebrows and eyelashes because in the goth conversion they should be nice and dark.

Select the Background Copy, zoom in on the eyebrows, select the burn tool with these settings (soft edge brush that changes opacity with pressure, Range:  Shadows, Exposure - very low - I used 5%) and burn in first one eyebrow and then the other.


goth conversion lashes and brows


It's not a good idea to rush this part by increasing the Exposure - go at it slowly so that the lashes and brows slowly become darker.

It's also a good idea at this point to save your work as a .psd file (so the layers will be saved intact).

Step 5 - Merge Down

When you're happy with the look up to now select the Gradient Map layer and Merge it to the Background copy - Layer > Merge Down or simply Ctrl-E (Windows) or Cmd-E (Mac).  The two layers will combine into one layer with all the adjustments you just completed.


goth conversion merge down


Now it's time to move onto the next step - do it all over again, starting at step 2, for the hair.

Hair

Select the Background copy layer and add a second Gradient Map Adjustment Layer. 

Put a check mark in the Dither box, click on the Gradient and make sure the Black,White gradient is selected.

Click on either the Black or White bottom stop to activate the Color Midpoint, click on it and drag it back and forth while watching the hair.  Don't be concerned about anything else but the hair as it will be painted back in while the rest is ignored.

Find that one place where the hair is a nice black color and still retains some details.  When you're satisfied then ...
  1. Click OK.
  2. Ctrl-I or Cmd-I to invert the Layer mask.
  3. Paint the hair back in with white using a nice soft edge brush.
  4. It is likely you'll get some hard edges where the hair and the skin meet.  They can be eliminated with the Smudge Tool on the Gradient Map layer.  I set my Smudge tool to Size - 20 pixels, Mode - Normal, Strength - 80% and yours may need some experimentation to get it right.  Now carefully paint around the areas wherever there are hard edges
Once again save your goth conversion work and make sure there is a check mark in Save as a copy.

Goth conversion black hair

As before, go to Layer > Merge Down.


Lips

The exact same procedure works with the lips as well ...
  1. Add a new Gradient Map Adjustment layer and put a check mark in Dither and in Reverse (if everything looks like a black and white negative).

  2. Click the Gradient and when the editor comes up make sure the black to white gradient is selected and click one of the lower stops to bing up the mid-point slider.

  3. Move the mid-point towards the white end of the gradient to darken everything paying apecial attention to the lips.

  4. Press Ctrl-I (Windows) or Cmd-I (Mac) to remove the effect of the adjustment layer, zoom in on the lips, select the brush tool, set the foreground color to white and paint the lips back in - they will turn a nice black.  Keep at it until you are satisfied with your fabulous goth conversion.
I followed my own instructions and this is how the goth conversion looks with three Gradient Map layers ...


goth eoncersion lips


Piercings, Hair Tint, Darken and Outline Eyes

Adding some piercings and a bit of hair tint are an important part of the goth conversion and they are generally straight forward if you understand a few basic features of Photoshop Elements.

The piercing jewellry was found by doing an internet search for the term piercing jewellry and if you can add a necklace then goth jewelly will yield some amazing pieces.

A tad of hair tint can be added using the same Gradient Map technique used up to this point but very sparingly.

In addition, I didn't feel the face was light enough so I added a Soft Light layer filled with 50% gray, made white the foreground color, lowered the Opacity of the brush tool and dodged the face just a bit (to increase the contrast between the face and the hair).

In most of the Goth pictures I've collected, the area directly below the eyes is darkend with makeup - this was achieved using the Soft Light layer (big, soft brush at very low apacity).

After some additional work on the goth conversion here's where things stand using the Gradient Map technique  ...


goth conversion piercings and hair tint


An alternate method is to use Hue and Saturation Adjustment layers on selections of the important parts of the face and hair for the goth conversion.

This will begin with a selection which we'll look at first.

Goth Conversion Selections


Babbling and Blabbing about Selections

From my point of view the best way to select complex areas with Photoshop Elements is to use the Selection Brush Tool and promote the different selections to their own layers.

The first suggestion is to use the Selection Brush Tool to make your selections and the second suggestion is to use a Wacom tablet (Bamboo or Intuos) to do the selection.

You can, of course, use a mouse or a track pad but it's unlikely the quality of the selections made will even be close to what you can achieve with a pen and tablet.

This means the different elements of the conversion can be modified.

If you're not sure about the Selection Brush Tool then check out the tutorial you will find here.

After looking at this image I decided to separate the following areas into their own layers ...
  • Face.
  • Around the eyes.
  • Around the lips
  • Hair
The choice to move the areas around the eyes and around the mouth to their own layer is personal decision.

Goth conversion horizontal vs verticalThe reason I decided to go that way is because I have a terrible time making selections that require horizontal motion but a vertical movement is no problem at all.  Even with my Wacom pen the paint strokes or selections I make using a horizontal motion are really, really bad

See - the horizontal motion is not at all accurate while the vertical motion is nice and tight with good edges and to do that some changes need to be made.

Now if you are great both horizontally and vertically with the Selection Brush tool or you prefer to work with another selection method then forget all of the following and move onto the modifications section further down the page.

goth conversion first conversionWhat I did was work away on the image without getting myself up close and personal with horizontal edges around the eyes and the mouth.

After getting this far, I clicked on one of the other selection tools to get the marching ants, inverted the selection (Shift-Ctrl-I or Cmd-Shift-I) and moved it to a new layer by pressing Ctrl-J (Windows) or Cmd-J (Mac). 

The file was then saved as a Photoshop file (.psd) because it saves the files with the layers intact.  I also make sure that the "Save in Version Set with Original" is checked so that each iteration of the file is saved with a new name.

"Why go to all this trouble" you may be asking because the obvious choice would be to get as much done as possible and then rotate the image to make it easier to finish the overall selection. 

What happens when the image is rotated is that the selection made up to this point disappears - it just kind of goes away so the whole thing has to be started over with the inherent horizontal brush motion challenges there for me once again.

This was quite annoying so I left the project for a day to let my brain mull it over in the background.  As I was driving along today the answer came to me and this is it ...

Make the first selection nice and loose (like the image here) and then save it as described ...
  1. Click on one of the other selection tools.

  2. Invert the Selection.

  3. Promote this selection to a new layer.

  4. Save the image with all of the layers intact as a .psd file, and then ...

  5. Rotate the Image.
Now you can finish the face part of the project.
  1. Zoom in on one eye, do another selection, go to the other eye and do it again.

  2. Get out of the Selection Brush Tool by clicking on any of the other selection tools, Invert the Selections and promote them to a new layer.  Save as a .PSD file - now you've got the Background, the face and the eyes on their own layers.

  3. Do the same thing for the mouth, leaving the lips and the teeth out of the selection.  Get out of the Selection Brush Tool by clicking on any of the other selection tools, Invert the Selections and promote it to a new layer.  Save as a .PSD file - now you've got the Background, the face, the eyes and the area close to the mouth on their own layers.
OK - so why go through all of this because it seems like a waste of time and somewhat annoying?

Well - it may be over the top for you but for me it is really the only way I can get a nice selection when a horizontal area is involved and it is something I've done for most of the tutorials on this site - this is just the first time I've admitted it and demonstrated one way to get around this kind of problem.

Now it is a simple matter of Merging the mouth layer into the eyes layer and then the new layer into the face layer.  Do this by going to the top layer and press Ctrl-E (Windows) or Cmd-E (Mac).

One more layer to add and that is to put the lips on their own layer for some additional adjustments.

Here's the layers palette with the layers from top to bottom being ...
  1. Lips.
  2. Hair.
  3. Face.
  4. Background Copy.
  5. Background.
This gives me nice edges with no holes anywhere in the face layer. 

The only thing to do now is to check the outside edges of the face layer to make sure that it does, in fact, conform to the outline of the skin.  If there is a problem then grab tGoth Conversion layers palettehe eraser, give it a nice soft edge and slowly erase the areas that need fixing.

Now do something similar to the hair (paint the hair with the Selection Brush Tool, select another selection tool, invert the selection and then promote the hair to its own layer) - by now you know what I'm doing this for.

The advantage of all this work is that the important bits are now isolated on their own layers and they can be modified and adjusted independent of the rest of the image as you complete the goth conversion.

Having the important bits on their own layer is useful whether you are doing a goth conversion, emo conversion, making your friend or yourself into a vampire or even a glamor touch up.

As the saying goes - "the devil is in the details" and moving the important parts gives you access to the details.


Goth Conversion
Adjustments


Now that the heavy lifting is over and done with in this portion of the goth conversion, it's time to have some fun with these different layers.  For the most part, the following adjustments were completed with a Hue and Saturation layer over each selection, however you can also try out a Gradient Map Adjustment layer - this worked particularly well with the Lips.

Face Layer

Fgoth conversion face layerrom my observations and from the comments of my friendly goth conversion "consultants"  the first order of business is to make the skin much lighter.

This can be done using a variety of different techniques.

A couple of features need some additional work ...

In the first place the skin needs to be lightened towards a white cast, and

The eyebrows and eyelashes could stand to be darker to conform with the overall goth look, and finally ...

The area around the eyes may need some work as a bit of the color in the eye has been picked up in the selection.



Lighten The Skin

The first thing I did was add a Hue and Saturation adjustment layer immediately above the skin layer and then clip the Hue and Saturation adjustment layer to the skin layer.

There are two ways to clip an adjustment layer to - one is to got to Layers > Create Clipping Mask ... (Ctrl+G) and the second is to press and hold the Alt key then hover the cursor immediately below the Hue and Saturation adjustment layer until it changes into a little black thingy and then left click.

In either case the Adjustment Layer will jump a bit to the right and at that point any adjustment applied to the Hue and Saturation layer will only be applied to the skin layer.

Now simply desaturate the skin layer just a bit by moving the Saturation slider slightly to the left.

Now add a Levels Adjustment Layer above the Hue and Saturation adjustment layer and clip it to the Hue and Saturation adjustment layer ( Layers > Create Clipping Mask ... (Ctrl+G).  Firstly - set the Layer Blend Mode to Screen by dropping down the little menu at the top of the layers palette, and secondly adjust the sliders to lighten the over look of the face layer to taste.

Here's the layers palette and the skin layer after these adjustments ...


goth conversion skin layer
goth conversion skin layer lightened
Layers
Levels layer set to Screen Blend
Skin layer lightened


And here's our project so far ...


goth conversion sling lightened
  

Eyebrows and Eyelashes

Typically it seems that goth eyebrows and eyelashes are much darker than they would normally be for any given person.

To darken the eyebrows and eyelashes I used the Burn Tool set at a very small size, shadows and low exposure. 

goth conversion eye
goth conversion eyebrow burned
Eyebrow as shot
Eyebrow and Eyelashes
Burned in

This created a large difference - as stated earlier - the devil is in the details ...  The lighter skin contrasted with the darker eyebrows and eyelashes make the face more dramatic.

Now normally I would use a soft light layer filled with 50% gray and paint black over the eyebrow which is probably the best dodge and burn technique.  The problem with this method is that the burn tends to darken the skin under the eyebrow as well - unless - the brush is set to Overlay.  This works well because it darkens the eyebrows and eyelashes (the dark area) and leaves the light areas alone.

So Far ...

goth conversion after face


Here's our goth conversion to this point.  It's looking OK with a couple of problems with the worst being the sharp and somewhat uneven lip line which is a function of my ability to draw  a decent horizontal line.

The Hair

The typical goth conversion seems to have dark to black hair no matter what the original hair color.  Some  have added a tint or streak to the hair which is a relatively easy thing to do after the hard work is done and the hard work is darkening the hair.

Here are the two layers involved in darkening the hair - the bottom layer is the selection promoted in the first series of steps with the Hue and Saturation Adjustment layer directly above the hair layer.

goth conversion hue saturation layersAs you can see the Hue and Saturation Adjustment layer is clipped to the Hair layer by selecting the Hue and Saturation layer and then Layer > Create Clipping Mask ... so that only the hair is modified when the adjustment is done.


goth conversion hue and sautation adjustment hairHere's the Hue and Saturation Adjustment  layer adjustment panel to darken the hair.

Every image will be different so don't take these adjustments as the perfect ones.  It will likely take a bit of messing around to get the hair exactly the way you want it to look.

You can also play around with either the opacity of the Adjustment Layer and/ or the Blend Mode to the Adjustment Layer.

Here's the image as it stands at this point ...


goth conversion hair darkened


Lips

goth conversion lipsBack to spinning the image ninety degrees, zooming in really close and using the Selection Brush Tool with a soft edge brush to make a selection of the lips.

When the selection is complete and inverted then the lips can be promoted to their own layer and than moved to the top of the layers stack.  The selection has a much softer look and when they are at the top of the stack and this is how thing look now ...



This selection sure makes the overall appearance look better ...


Goth conversion new lips


The next thing to do with the lips in the goth conversion is to recolor them and they can be any color you want because they're on their own layer at the top of the layer stack.  Add a Hue and Saturation Adjustment Layer or a Levels Adjustment Layer above the Lips layer and clip whatever you have chosen to the lips layer (as we did earlier).

Now have some fun with this new layer!  There are lots of thing you can modify, such as ....
  • Modify the black, mid-point and white sliders with a Levels Adjustment Layer.

  • Try a different Layer Blend Mode - multiply will darken things nicely.

  • Modify one or all of the sliders (Hue, Saturation and/or Lightness) with a Hue And Saturation Adjustment layer.

  • Try out a different Blend Mode with the Hue And Saturation Adjustment layer.

  • Not surprisingly the lips seem to look much better (at least to me) when they are darkened with a Gradient Map Adjustment layer rather than a Hue and Saturation |Adjustment layer.

goth conversion jue and saturation layer
Hue and Saturation Layer

The lips are flat and somewhat lifeless.
goth conversion gradient map
Gradient Map Layer

Much more life and sparke with the Gradient Map layer.



Embellishments

The embellishments include the goth conversion piercings and the dark outliines around the eyes.  Be as creative or as conservative as you like (although with a goth conversion it seems likely that being creative will prevail).

Like every Photoshop Elements technique, there are a variety of different routes to get where you want to be.  The two goth conversion techniques offered here both work well but for me the Gradient Map techniqe is clearly superior.

Summary

There you go - two different methods of taking a normal portrait image and doing a goth conversion.  Both methods work well and perhaps combining the two is the best way to work.

I admit to not being an expert on the look and if you have any suggestions or recommendations please let me know.  This page is a good start and just maybe a bit of collaboration with some other experts would be very useful.

And just for your viewing pleasure here is the final image ...


Goth Conversion final image


Comments and Suggestions

Goth Conversion Suggestions and Comments

This tutorial was a lot of fun - both researching and completing.

A lot of the time I felt overwhelmed by the subject matter but did manage to muddle through.

If you've any comments or suggestions about the look or the technique please use this section to let me know.





Goth Conversion
Page Links

Guidelines

Gradient Map Technique
The Hair

Lips

Piercings, Hair Tint and Outlines

Hue and Saturation Technique

Selections

Adjustments
Summary

Comments and Suggestions









Enjoy This Site?
Then why not use the button below, to add us to your favorite bookmarking service?



Return to top

Site build It!

Use the Contact Form to ask questions, provide feedback or comments.

Questions are good - so are comments - or requests!

Return to Photoshop Elements from Goth Conversion
Copyright© 2009-2013.