: How is this coffee stained design done? I'm a programmer doing a client project, and I'm trying to write an app that will do this (the photograph of the woman) to user-uploaded images. I

@Vandalay110

The real trick here is the source photo: it has been vignetted and selected for suitability.

That said, you can provide the user with a way to create an alpha mask in order to isolate the portion they want to feature. The effect allows for finger-painting level accuracy.

In Photoshop, you can get the source ready by doing something like the following. (layers, in bottom to top order):


Base Photo
very light grey layer (such as 245,245,245) with a layer mask to isolate the portion you want
black & white adjustment layer with colors tweaked brighter (suit to taste)
color fill adjustment layer with a dark brown/purple light similar to the darkest colors in sample. Set the layer mode to "color"
brightness contrast adjustment layer with contrast ramped near 100 and brightness tweaked brighter
levels adjustment layer with darkest level nearer to mid-point and mid point near 80%
photo filter adjustment layer with a color set to the "paper color" in sample, do not preserve luminosity, density 100%


The overlay and scale of the coffee mug stains and watercolor spreading are just icing.

I am sure you can reduce or combine steps. The mask is the only user interaction needed, but some course control over contrast etc might be required to really polish it..

Vote Up Vote Down

@Debbie163

Print photo
Place coffee cup on it a few times - create stains
Scan photo


DONE! ;-)

Vote Up Vote Down

@Kevin459

I'm not sure what the effects would be in ImageMagick, but I'd start by trying to create the following steps:


Increase contrast quite a lot
Slightly blur
Add a transparent texture for the paper
Overlay coffee rings and misc stains (random placement if possible)
Overlay a lighter texture to give the mottled effect on the darker areas
Sepia tint/filter

Vote Up Vote Down