# Create Instagram Filters With PHP

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP and ImageMagick. Wait? What? Yes, you can do this very thing with PHP and ImageMagick, and that's just scratching the surface!

## We Made Digital Vintage Photos, Before it Was Cool

Once upon a time - technically 22 years ago (5 years before PHP) - ImageMagick was released. Since then, it has evolved to a platform independent software suite that can create, edit, compose, or convert raster images (over 100 formats supported!). You can use it to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves. It truly has everything you will ever need, when dealing with image manipulation in web development, video processing, panorama generating, etc. Please note, however: it is not a GUI image editor.

ImageMagick is command-line Photoshop for web.

## Image Manipulation With PHP

PHP comes bundled with GD (GIF Draw/Graphics Draw), which is a library for the dynamic creation of images. It can be used for simpler image operation, such as resizing, cropping, adding watermarks, creating thumbnails (Jeffrey wrote about it), applying basic photo filters - you've probably used it before. Unfortunately, if you want to create something more complex with GD, like Instagram effects, you can't. Luckily, though, we have ImageMagick!

## GD vs. ImageMagick

These two can't compare on higher levels, therefore, we will use simple example, like resizing. Let's imagine that we've uploaded a new 1024x768 photo.jpg image, and we want to dynamically resize it to 640x480 pixels.

### GD

In the example below, we have to call six functions, and possibly perform some calculations if we have variable aspect ratio.

## Instagram Filters

We will go over the filters, one by one; I will explain the necessary PHP methods and Imagemagick commands, including examples. Make sure you update your PHP class with these new methods (paste below RESERVED FOR FILTER METHODS comment). The photo frames are provided in the download package; they are just PNG transparent images without extensions. Feel free to make your own! So let's begin...

### Original

Here we simply have a photo of my dogs enjoying the day at the beach. This is straight out of my camera.

### Gotham

The Gotham filter produces a black&white, high contrast image with bluish undertones. In real life, this would be created with a Holga camera and Ilford X2 film.

 1 2 public function gotham()  3 {  4  $this->tempfile();  5 $this->execute("convert $this->_tmp -modulate 120,10,100 -fill '#222b6d' -colorize 20 -gamma 0.5 -contrast -contrast$this->_tmp");  6  $this->border($this->_tmp);  7  $this->output();  8 }  In English: create a working file, load the image into memory, improve brightness a bit, (almost) desaturate, change the remaining colors to deep purple, gamma correction (value below 1 darkens image), add more contrast, add more contrast, and save everything to a file. Add a 20px black border. Simple, eh? ### Toaster The Toaster filter resembles old Polaroid shots; it features vivid colors with pink/orange glow out of the center. By the words of Instagram CEO, it's one of the most difficult effects to create; we'll take his word for it.  1 2 public function toaster()  3 {  4 $this->tempfile();  5  $this->colortone($this->_tmp, '#330000', 100, 0);  6 7  $this->execute("convert$this->_tmp -modulate 150,80,100 -gamma 1.2 -contrast -contrast $this->_tmp");  8   9 $this->vignette($this->_tmp, 'none', 'LavenderBlush3');  10 $this->vignette($this->_tmp, '#ff9966', 'none');  11   12 $this->output();  13 } 

In English: create a working file, load the image into memory, change blacks to dark red, enhance brightness, desaturate by a fifth, perform gamma correction (make image brighter), add more contrast, add more contrast, save. Lastly, add a grayish vignette (desaturates edges a bit), and an "inverted" orange vignette for color burn effect.

Tip: You can even add a white border for a full effect; just add $this->border($this->_tmp, 'white'); before $this->output();. ### Nashville Nashville has a nice washed out 80s fashion photo feel. It produces image with a magenta/peach tint. It additionally adds a frame to get that slide look. It's easily one of the most popular Instagram filters.  1 2 public function nashville()  3 {  4 $this->tempfile();  5   6  $this->colortone($this->_tmp, '#222b6d', 100, 0);  7  $this->colortone($this->_tmp, '#f7daae', 100, 1);  8   9  $this->execute("convert$this->_tmp -contrast -modulate 100,150,100 -auto-gamma $this->_tmp");  10 $this->frame($this->_tmp, __FUNCTION__);  11   12 $this->output();  13 } 

In English: create a working file, load the image into memory, change blacks to indigo, change whites to peach color, enhance contrast, enhance saturation by half, gamma auto-correction. Add a frame from a PNG file.

### Lomo

Lomography is all about making high contrast photos with vignettes and soft focus (everywhere you go). In real life, they are mostly made with Holga, LOMO LC-A or so called toy cameras (cameras with plastic lens). This effect is pretty easy to recreate; we will simply enhance the red and green channels' contrast by a third, and add a vignette. Feel free to experiment as you wish.

 1 2 public function lomo()  3 {  4  $this->tempfile();  5   6 $command = "convert {$this->_tmp} -channel R -level 33% -channel G -level 33%$this->_tmp";  7   8  $this->execute($command);  9  $this->vignette($this->_tmp);  10   11  $this->output();  12 }  Create a working file, load the image into memory, enhance red channel contrast by a third, enhance red channel again, apply a vignette. Tip: If you prefer lomo effect without vignette, just comment or remove that section of code. ### Kelvin Named after Lord Kelvin, this effect applies a strong peach/orange overlay, and adds a washed out photo frame.  1 2 public function kelvin()  3 {  4 $this->tempfile();  5   6  $this->execute("convert  7  ($this->_tmp -auto-gamma -modulate 120,50,100 )  8  ( -size {$this->_width}x{$this->_height} -fill 'rgba(255,153,0,0.5)' -draw 'rectangle 0,0 {$this->_width},{$this->_height}' )  9  -compose multiply  10  $this->_tmp");  11 $this->frame($this->_tmp, __FUNCTION__);  12 13 $this->output();  14 } 

In English: create a working file, load the image into memory, normalize, enhance brightness by a fifth, desaturate by half, create an peach/orange color overlay, and apply the multiply blending mode. Lastly, add a frame, using the PNG file.

## How to Use

It's easy to use these effects! I'll assume that you saved all the code within instagraph.php file. Now, create a file, called filter.php and copy the code below that suits you.

If you want to apply only one filter on an image, you can do it this way:

 1 2 require 'instagraph.php';  3 4 try  5 {  6  $instagraph = Instagraph::factory('input.jpg', 'output.jpg');  7 }  8 catch (Exception$e)  9 {  10  echo $e->getMessage();  11  die;  12 }  13 14 $instagraph->toaster(); // name of the filter 

That's it! Now, if you want to apply all filters to one image, use this code:

 1 2 require 'instagraph.php';  3 4 try  5 {  6 $instagraph = Instagraph::factory('input.jpg', 'output.jpg');  7 }  8 catch (Exception$e)  9 {  10  echo $e->getMessage();  11  die;  12 }  13 14 // loop through all filters  15 16 foreach(array('gotham', 'toaster', 'nashville', 'lomo', 'kelvin') as$method)  17 {  18  $instagraph->_output =$method.'.jpg'; // we have to change output file to prevent overwrite  19  $instagraph->$method(); // apply current filter (from array)  20 } 

Now, just open it in your browser and enjoy the results!

### Performance

Performance is certainly an important part of every application. Because the average time to apply a filter to an image is roughly 1 second, we can safely say it is pretty fast!

## ImageMagick Resources

To learn more about ImageMagick, here's a list of links to all the commands and options that were used in these filter methods:

• convert:
• modulate: vary the brightness, saturation, and hue
• contrast: enhance or reduce the image contrast
• size: width and height of image
• fill: color to use when filling a graphic primitive
• draw: annotate the image with a graphic primitive
• compose: set image composite operator
• channel: apply option to select image channels
• level: adjust the level of image contrast
• auto-gamma: automagically adjust gamma level of image
• gamma: level of gamma correction

Additionally, here's a list of ImageMagick scripts, tutorials and examples:

## Summary

In this tutorial, we learned a bit about Imagemagick, and demonstrated the power of it by creating filters that are similar to the ones generated by Instagram. We created Instagraph!

If you need any help, or need assistance creating additional filters, such as Tilt Shift or Earlybird, let me know within the comments, and I'll do my best to assist!