CODEWITHSUNDEEP
ios7imagemagick
Jonathan de M.
Jonathan de M.

Reputation: 9818

ImageMagick copy the iOS 7 blur effect

I have an image that I want to blur like on the iOS 7, see image below:

enter image description here

I'm not sure what combination of transformations I need to execute to get the same result. I tried something very basic so far (not sure what I'm doing), but the result isn't here:

convert {$filename} -filter Gaussian -define filter:sigma=2.5 \
        -blur 0x40 {$newFilename}

The above code gets executed by php exec function.

Upvotes: 1

Views: 389

Answers (1)

Mark Setchell
Mark Setchell

Reputation: 207670

If I take this as background.png

enter image description here

and a plain grey rgb(200,200,200) image with a couple of black and white bits and pieces on it, as foreground.png since I don't have any iPhone grabs of the slide-up menu thingy

enter image description here

convert background.png                                                   \
   \( +clone -gravity south -crop 360x450+0+0                            \
      -filter Gaussian -define filter:sigma-2.5 -blur 0x40 \)            \
   -composite                                                            \
   \( foreground.png -matte -channel a -fx "(u.r<0.1||u.r>0.9)?1:0.3" \) \
   -composite result.png

So, I basically clone the background, and select the bottom part with the -crop and blur it, then composite it onto the real background. Then I take the foregound and anywhere it is not black or white, I set it to 30% transparent (so as not to fade the black and white aspects). Then I composite that ontop of the background which by now already has the lower part blurred.

It's probably not 100% but you can diddle around with the numbers and techniques till you achieve Apple-y perfection :-)

enter image description here

Upvotes: 2

Related Questions