Member Avatar for ronaldpaul

Hi,
What kind of effect is used in this following picture http://d2o0t5hpnwv4c1.cloudfront.net/2138_SimpleParallax/images/only_background_2.jpg? It is normal blurring using photoshop or any other effect? How can I apply this effect to my pictures? I've seen this kind of image effect used in the lasted iOS as well.

Thanks in advance

  • 3 Contributors
  • 2 Replies
  • 458 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by ss125

Dani AI

Generated

Quick summary for : the image is the common “frosted”/out‑of‑focus background treatment used in UI design (the replies from and the link shared point in the right direction). Designers don’t just blur the photo — they usually combine a moderate blur with tonal tweaks (lower saturation, reduced contrast), a subtle tint or translucent overlay, and a tiny amount of grain. That mix keeps the scene readable but de‑emphasized behind foreground UI or content.

A reliable, non‑destructive Photoshop workflow:

  • Convert the background to a Smart Object and duplicate it.
  • Apply a Blur Gallery blur (gives nicer depth cue than a flat filter).
  • Use a feathered layer mask to preserve any subject or focal area sharpness with a soft transition.
  • Add a low‑opacity Color Fill (Overlay or Soft Light) to introduce the frosted tint, then tweak Levels/Curves to drop contrast slightly.
  • Finalise with 1–3% noise to reduce banding and export at the device pixel ratio you need.

For implementation (web / apps): use native blur APIs where available (hardware accelerated) and fallback to pre‑rendered blurred assets for older browsers/devices. For a live web example, a simple CSS approach looks like:

.frosted {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(12px) saturate(80%);
  -webkit-backdrop-filter: blur(12px) saturate(80%);
}

Practical tips: avoid over‑blurring (loses context), prefer gradual masks over hard cuts, test on target screens to catch banding, and keep a pre‑blurred asset handy for performance‑sensitive pages or parallax layers.

Recommended Answers

All 2 Replies

Member Avatar for ss125

Its the Blur effect.It can be done in Photoshop also.

TO do that follow these steps.Its simple.

1) Open the image.
2) Select the particular part or the entire image which u need to blur.
3) Go to filter menu and select any kind of blur(i.e., Guassian blur,Motin Blur,etc)
4) The angle and ratio selection window will appear with a zoomed preview.Adjust it based on your necessity.
5)Press ok.

And save the image.

Your Blurred image is ready.

Happie Photoediting...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.