Recreating Instagram filters
In summary, filters do:
- change color curves (for each channel), balance and levels
- change original image's contrast/brightness and hue/saturation
- multiply original image with a tint layer
- apply a vignette
- apply some noise/random path to simulate old photos and scratches
All the original Instagram filters:
(from the original CC BY 2.0. By Flickr user whologwhy)
Instagram:
noflo-image/canvas (just color curves adj.):
Instagram:
(v2) noflo-image/canvas (+contrast, vignette, brightness):
(v1) noflo-image/canvas:
Instagram:
(v2) noflo-image/canvas v2 (+ contrast/brightness/vignette):
(v1) noflo-image/canvas (just color adj. curves):
Instagram:
(v2) noflo-image/canvas (-brightness)
(v1) noflo-image/canvas:
Instagram:
(v2) noflo-image/canvas (+saturation):
(v1) noflo-image/canvas:
Instagram:
(v3) noflo-image/canvas (better color curve):
(v2) noflo-image/canvas:
(v1) noflo-image/canvas:
To simulate a vignette in GEGL, create a black layer, crop an ellipse and apply a gaussian blur.
To simulate Nashville in GEGL:
- Apply GEGL:brightness-contrast on original. Contrast: 1.60. Brightness: 0.12
- Create new layer. Tint: #f4eabd
- Apply GEGL:multiply on original and new layer.
- Change color levels of original. Green: 33. Blue: 143.
To simulate Lord Kelvin in GEGL:
- Adjust color curves to:
- http://mashable.com/2013/10/20/photoshop-instagram-filters/
- http://webdesign.tutsplus.com/articles/recreating-instagrams-retro-filter-effects--webdesign-10440
- http://www.howtogeek.com/68431/create-instagram-style-photo-effects-with-gimp-or-photoshop/
- http://dbox.tumblr.com/post/5426249009/instagram-filters-as-photoshop-actions
- Nice "when to use" and "effects" sections: http://mashable.com/2012/07/19/instagram-filters/
- As Lightroom presets: http://reallyniceimages.com/index.php/instagram-presets-for-lightroom-the-ultimate-collection/
- Tips to reverse engineer in Photoshop: http://www.dpmag.com/how-to/tip-of-the-week/reverse-engineering-instagram-3-17-14.html#.VCRYkitdVOE
- Lots of filters we can port from CalmanJS to noflo-image and imgflo+GEGL: http://techslides.com/demos/canvas/instagram.html
- Cubic curve interpolation in CoffeeScript, nice to import curves (with just some points) from PS/Gimp: http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/