How to Create a Dynamic iOS 7 Style Background Blur in Photoshop

How to Create a Dynamic iOS 7 Style Background Blur in Photoshop

In this Photoshop tutorial I will demonstrate how to quickly and easily create a live background blur effect, like the one that is used in iOS 7. It only takes a few steps and once you know how to do it, you can use it any of your designs!

Step 1

Begin by placing an image into your document. Ideally let your image exceed the dimensions of the document, as this will give you the freedom to move it around the document without the edges becoming visible. For this tutorial I chose this image by Vinoth Chandar.

ios7 background blur in photoshop

Step 2

Right click on your image in the layers panel and select ‘Convert to Smart Object’.

ios7 background blur in photoshop

Step 3

Next we want to draw the foreground shape, this can be any shape you want, for example to emulate the iOS 7 toolbar draw a rectangle 640 x 98 pixels. For this example however I just went with a simple circle using the Ellipse Tool in Photoshop.

ios7 background blur in photoshop

Step 4

Duplicate both of the layers you have just created.

ios7 background blur in photoshop

Step 5

Select the newly duplicated top foreground shape, and set the Fill value in the Layers panel to 50%. You should now be able to see the (duplicated) background image through the foreground shape.

ios7 background blur in photoshop

Step 6

Right click the topmost background image layer and select ‘Create Clipping Mask’. This should create a mask using the original foreground shape.

ios7 background blur in photoshop

Step 7

We can now apply our Gaussian Blur effect (from the Filter menu) to the duplicated background image layer. The value you enter for the radius will depend on the overall resolution of the document, and the strength of the effect required. For this example I used 25 pixels.

ios7 background blur in photoshop

Step 8

The effect is now complete, however if we move one of the blurred or unblurred background image layers then the effect would be compromised. To resolve this simply select both background layers and right click them, then select ‘Link Layers’. Now whenever you move either layer, they will both move.

ios7 background blur in photoshop

Conclusion &Download

Here is the final result of the effect, with a little added text to the foreground:

ios7 background blur in photoshop

It is now possible to move the background image around freely and watch the effect update live dynamically. And if you want to try out a different background image, that is possible too! Just double click the Smart Object, paste a new image, then save and close the Smart Object:

ios7 background blur in photoshop
ios7 background blur in photoshop


Rather just dissect the source file? No problem, Here is the download link for the .psd file used in this tutorial.


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    kevin

    kevin

    Thanks for the amazing tutorial but I’m having a problem with the text.

    You didn’t explain how to make the text see-through.

    By the way, I don’t see any layer for the text in the PSD file.

    Please Please fully explain what you did to text.

    Thanks again.

    Jul 23, 2014 at 6:13 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      Hi kevin, glad you liked the tutorial

      The text is kind of an optional final step, it isn’t integral to the effect.

      You need to right click a text layer and choose Convert to Shape. Then combine that shape with the semi-transparent white shape using the Subtract mode.

      Here is a handy tutorial on combining shapes in Photoshop:
      http://www.photoshopessentials.com/basics/shapes/add-subtract/

      Jul 24, 2014 at 5:20 am
      • Reply »
        Kevin

        Kevin

        Thanks Tony. You saved my life :)

        Jul 24, 2014 at 12:12 pm
  • Reply »
    Michael

    Michael

    Sorry, I’m super lost…
    Is there any way you could provide a tutorial (with screenshots) showing how to do the transparent text?

    Oct 27, 2014 at 12:26 pm
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Michael, sorry I don’t have screenshots right now but perhaps this step by step process will help. After Step 8:

      - Add your text layer using the regular text tool
      - Right click on the text layer and click Convert To Shape
      - Select both the top circle layer and the new text shape layer
      - Right click and select Merge Shapes
      - Select the Path Selection Tool (A) and click on each letter. Hold down shift to select more than one letter
      - Once all of your letters are selected, find the Path Operations button in your top toolbar, and click Subtract Front Shape

      Your circle should now be updated.

      Give it a shot and let me know how it goes!

      Oct 28, 2014 at 8:52 am
      • Reply »
        Mia

        Mia

        Jenn Coyle
        your way isn`t working!

        Jan 23, 2015 at 11:12 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Michael, you may also need to reset the Fill value to 50% after you subtract the text shape.

      Oct 28, 2014 at 9:25 am
  • Reply »
    Kailash

    Kailash

    What should be done after converting the text into shape?
    What you said is difficult to understand. I am using CS2

    Aug 13, 2015 at 1:44 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      After you convert the text to a shape you can treat it like any other shape layer and subtract it from the circle.

      This link might be useful if you are new to add, subtract, intersect and exclude shape options http://www.photoshopessentials.com/basics/shapes/add-subtract/

      Aug 14, 2015 at 4:54 am
  • Reply »
    Aamir

    Aamir

    useless, waste of time and incomplete tutorial, i did same steps as mentioned and also used that image, really disappointed

    Jul 28, 2016 at 6:44 am
    • Reply »
      Tony Thomas

      Tony Thomas

      Download the source file to see what you did wrong

      Jul 28, 2016 at 6:47 am
  • Reply »
    learner

    learner

    Thanks so much,great tutorial that i’ve looking for long time.

    Aug 29, 2016 at 7:56 pm

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all