Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
In this tutorial I'm going to be taking a look at exactly how Instagram's filters work, before recreating similar effects in Photoshop. I'll also be introducing you to some interesting new CSS properties that will allow us to create Instagram style filters directly in the browser.
There's a whole host of vintage photo apps available on the market from Hipstamatic to camera+ but by far the most well known of all these apps is Instagram; one of the original players which launched in September 2010. Three months later in December it had signed up over 1 million users.
This surge in popularity later led it to be acquired by Facebook for a reported $1 billion. Not bad for a small startup of 13 people.
How Instagram Filters Work
Instagram has a variety of different filters to choose from, ranging from 'Lumo-fi' to 'Nashville'. All of which are created using a variety of methods, filters and effects. Kevin Systrom, Instagram's co-founder adds to this:
It's really a combination of a bunch of different methods. In some cases we draw on top of images, in others we do pixel math. It really depends on the effect we're going for. For instance, Lomo-fi really isn't much more than the image with boosted contrast.
The image below shows the various filter effects used by Instagram:
Image by Jessica Zollman/Creative Commons
Although Each filter has different adjustments, depending on the type of effect the actual process for the majority of them can be broken down into six steps:
The adjustment of color and tone is probably one of the most important steps which differentiates each filter. A lot of the characteristics of each filter can be achieved by setting different adjustment levels.
2. Depth of Field
Depth of field can be defined as "the distance between the nearest and farthest objects in a scene that appear acceptably sharp in an image". If you're most used to working in graphic design as opposed to photography you'll probably recognize it as the bit in the foreground that appears sharp and crisp and the bit in the background that appears blurry.
By focussing the crisp/sharp bit on the subject that you are photographing and having the surrounding areas blurry, it helps draw the attention to the area you want to highlight.
Image courtesy of SXU free stock photography
The above image illustrates a good example of depth of field. The plant in the foreground appears in focus whilst the background is out of focus and appears blurry.
3. Lens Flare/Film Burn
On some filters Instagram adds an extra layer that is usually a lens flare or film blur. Adding these can add a bit of added wow factor to the image. However, these should be used sensibly as too much emphasis on the lens flare/film burn can sometimes make the overall effect tacky and amateurish.
Take a look at this selection of lens flares, all of which add to the vintage style effect:
Image by CG Arena
4. Old Film Effect Scratches
To add a vintage style graininess to an image and give it an antiquated feel, an overlay texture is used. These can range from actual film scratches to generated noise. Noise occurs when you get pixel level variation in color values that reduce the clarity of an image. Computer generated static noise is an extreme example of noise.
Once the adjustments, depth of field and noise have been added to the image, a vignette is placed on top of it, once again to focus the attention on the main content of the image. A vignette is a technique used in photography which reduces an image's brightness or saturation towards the edges of the image.
Image courtesy of Wikipedia
6. Adding a Frame
Finally, a frame is added to add that extra retro-ness to the image. The frames are often what might have been seen on old frame reels or the original polaroid style images. They can also act as eroded or torn edges which all add to that feeling of the image being an authentic vintage photo.
Instagram's filters usually begin life in Photoshop. From there they are then programmed into objective C as part of the native iPhone app. Instragrams' co-founder expands on this:.
Our filters are a combination of effects – curve profiles, blending modes, color hues, etc. In fact, I usually create them in Photoshop before creating the algorithms to do them on the phone.
Recreating Instagram Filters in Photoshop
This is what we'll be creating - you can see the before and after effects of adding our Instagram style filters:
Step 1: Create the Canvas
Start by creating a 600x600px square canvas and give it a background color. I've chosen to use the native Instagram blue for my background. Paste in your chosen image to your canvas, then resize and crop your image if necessary.
Step 2: Adjust the Color
Now it's time to make the color and tonal adjustment to the image. Do this by going to 'Image' in the top menu and selecting Adjustments > Curves. You will then be presented with a pop up box where you can change these values.
Start by increasing the green levels. Change the output to '30', for example. Your image should now look a little more green. We'll also increase the blues in the image. Change the blue output to '100'. Your image should now look quite washed.
Please note that when changing these adjustments you can play around until you get the desired effect for your photo. Once you have done this, duplicate the image you have just created. You can do this by right clicking on the image layer and selecting 'Duplicate layer'.
Step 3: Creating the Depth of Field
With your duplicated layer selected go to Filter > Blur > Gaussian Blur, increase the 'Radius' to 5px and click 'OK'. Now take the circular marquee tool and draw a circle around the area of your photograph that you want to be in focus.
Once you have done that go to Layer > Layer Mask > Hide Selection. It should now have created a layer mask circle out of the blurred image.
In the layers panel, go to the layer mask, press 'alt' and click on the layer mask. Your canvas should now change to the layer mask. Go to Filter > Blur > Gaussian blur and blur the mask by 30px. Now this should create the effect of depth of field with the subject of your photo in focus and the background out of focus.
Step 4: Film Burn and Lens Flare
Take a look on Google images or other stock image sites for a selection of lens flare and film burns. Having chosen the flare/burn or both then you can overlay them on top of the original, setting the blend mode of the film burn to 'Overlay' or another mode such as 'Screen'. Again, experiment with these to see which best suits your photo..
Lens flares can also be acheived natively within Photoshop by going to Filters > Render > Len flare... and specifying your desired effect.
Step 5: Creating the Film Scratches
Add some stock film scratches, or create your own noise by going to Filter > Noise > Add Noise then playing around with the blending modes to get the desired effect.
In this case I've chosen to set my stock image to 'Multiply' and have lowered the opacity to 14%
Step 6: Creating the Vignette
We're almost at the end of creating the Instagram style filter effect. Before that happens we just need to add the finishing touches. To create the vignette, add a new layer and fill it with a solid black. Then take the circular marquee tool and draw a large oval shape in the center of the image with the edges of the oval almost touching the sides of the image.
Cut the marquee selection out of the black by pressing the 'delete' key on your keyboard. Then, once again go to Filter > Blur > Gaussian blur and blur the vignette layer. Retouch the vignette to make sure that the sides of it are fully black and not a transparent blur. Once this has been done, reduce the opacity accordingly. I've lowered mine to 63%
Step 8: Add the Frame
The final part is to add the frame. I've chosen to add an old film roll look using a combination of creating a rectangular perimeter of the image and incorporating it with some numbers, letters and arrows from some stock footage of old film reels.
You can also create some interesting torn effects by downloading some torn photoshop brushes and using the layer mask tool with these.
...And that is how you can recreate Instagram style filters in Photoshop. Now let's move on to creating them with CSS.
Translating Instagram Filters for the Web
Although I wouldn't say that recreating Instagram's native filters in CSS is currently possible, there have been some introductions to the world of CSS recently that are making it almost possible. By playing around with these properties it is achievable to create similar effects with a little bit of experimentation.
I'm going to introduce you to a few of them that will hopefully help you get started and on your way.
At the moment only webkit based browsers support this property, although with a little bit of luck it will be implemented in all major modern browsers soon. Filters give the ability to add Photoshop style effects to any image through the power of CSS. The filters are as follows:
- Gray scale
- Hue Rotate
Although any of the above effects could come in useful for this type of thing, I'm going to look at two that will be most effective when emulating Instagram style images. For full details on the markup for using these properties you can check out this CSS3 filters blog post.
Contrast is the difference in color and light between parts of an image. Increasing this can often lead to a brighter, more vibrant image, whereas reducing it can lead to a more faded image.
The blur filter comes in really handy when recreating depth of field in an image. Overlay two copies of the same image and then add a blur of around 5 or 6 pixels to the forefront image. We can then use CSS masking to mask out the bit that we want more in focus, by revealing the underlying sharp image.
CSS Masking makes it possible to specify another graphics element, shape or file to be used as a clipping region. Used in conjunction with the blur filter you can create some really interesting depth of field effects.
Back in 2012 I saw a tweet that mentioned how it would be awesome if you could implement Photoshop style color modes to images using CSS. Well, now, thanks to a proposal put forward by Adobe, it may soon be possible! The proposal is for 'CSS compositing' and is described as 'Blending and compositing for the web'.
It's not yet implemented in any browsers, but Adobe have put together a sample browser which implements it and allows you to play around with their proposal. You can find out more at Adobe Compositing. With these come all familiar Adobe blending modes, such as screen, overlay and multiply.
CSS gradients can be used to create some really nice overlay tones for your Instagram style photo. Using a gradient such as yellow to transparent to pink and then changing the opacity of these can sometimes give a nice tint, making it feel retro and acting in a similar way to film burn.
It seems like everyone at the moment is using apps such as Instagram to give their photos that retro magic. There's no doubt about it; they do make your photos feel warmer and add more character to what might otherwise be pretty dull images.
As popularity continues to rise, more effects and filters will be introduced. By understanding the basic concepts of how these effects are achieved you should now be able to create them for your website or app using Photoshop. In time, I should imagine CSS will have a whole range of properties that will let us manipulate images in a similar way. The good news is that by using some of the properties I've mentioned today you can certainly start to play around with some interesting Instagram style effects right now.
Do you know of any other CSS properties that might come in useful for creating Instagram effects? Let me know in the comments below!