Blur Image: 4 Different Ways To Blur Images
In this post I will show you 4 different ways to blur images.
- Blur Image With Your Camera
- Blur Image With Photoshop
- Blur Image Online With MockoFun
- Blur Image With CSS Styles
1. Blur Image With Your Camera
When you take a photo using a camera you have several options to use image blur as a creative tool.
Here are the blur effects you can get in-camera:
- Bokeh image background blur
- Motion blur
- Radial Blur
Bokeh image background blur
This is probably the best known blur effect. But, what is it and how do you control it?
The image background blur is referred to as bokeh. When you focus on a subject and set your camera such that the background is very much out-of-focus, that creates the bokeh effect in the background.
You can control how blurry or how sharp the background of your photo is by setting your f-number lower (more blur) or higher (less blur). Please also note that more expensive camera lenses with higher quality glass will produce more beautiful blurry backgrounds or bokeh than cheaper ones.
Motion blur
Motion blur is so easy to create in-camera.
In fact, if you’ve ever taken a photo when there wasn’t sufficient light, you probably noticed that the resulting photo was blurry. That’s motion blur.
Let’s see how to use motion blur creatively and how to control it.
As general a rule, the shutter speed on your camera should be set around 1/x seconds, where x is the number representing the focal length of the lens you use.
For example, if you use a telephoto lens of 300mm, then you should set a shutter speed of 1/300s or faster to avoid blurry photos caused by camera shake.
But, if you want to produce a nice motion blur effect like the one in the photo above, then you should set a slower shutter speed. Then, set your focus mode on continuous, and make sure to follow the subjects movement when taking the shot.
In theory, the photo should show a sharp subject on a blurry background, giving the feeling of movement and speed.
Radial blur
I took this photo while taking a walk in a park near my house. To get the radial blur effect I set a slow shutter speed and tried spinning the camera around a center while taking the shot.
It took a few tries to get the right effect, but I finally managed to get it and it was fun!
If you’re interested about the subject, read this article for more on how to get the perfect ✨ blurred photo background.
2. Blur Image With Photoshop
Photoshop is a great tool for photo editing. When it comes to blurring an image, Photoshop is probably the best tool available.
The blur image effects in Photoshop are available either under the main menu in Filters > Blur, Filters > Blur Gallery or other Photoshop tools. Here’s how you can use blur image in Photoshop:
- Blur Filters (Gaussian Blur, Motion Blur, Radial Blur, Box Blur, Surface Blur)
- Blur Filter Gallery (Field Blur, Iris Blur, Tilt-Shift, Spin Blur)
- Use automated Photoshop actions for blurring image background or faking depth of field
Photoshop Blur Filters
In the menu, if you go to Filters > Blur you will find a couple of options for blurring an image in Photoshop.
Photoshop Blur Filter Gallery
Photoshop CC and newer versions come with a variety of image blur filters under Filters > Blur Gallery.
I will let you experiment on your own with these blur filters. Basically these tools use the same filters described above with some advanced masking capabilities and some extra options.
My personal favorite is the Tilt-Shift filter, which will transform your photos and give the impression that the subject is a miniature or a toy.
Blur Images Using Photoshop Actions
As you’ve seen, blurring an image as a whole is fairly easy. I like to use Photoshop actions to blur images because it saves me a lot of time. Photoshop actions are entire workflows made by professional graphic designers that automatically apply transformations to your image with just a click.
Download and install the 😎 blur background Photoshop action from PhotoshopSupply. It’s a free Photoshop action that’s packed with features and is very easy to use. Load your photo, run the action and follow the instructions.
3. Blur Image Online With MockoFun
MockoFun is an online graphic design tool that can be used as a quick photo editor. And, it’s free!
Among other things, you can use MockoFun to blur images online.
It’s very easy to blur images online. Create your free MockoFun account and upload your image. Then use the Blur filter and the masking options offered by MockoFun to create blur image effects like:
- blurred background
- blur part of an image
- blur photo edges
- blur face in a picture
- tilt-shift effect
- soft focus or diffusion filter to create a dreamy photo effect
- frosted image background effect
- blur border fill
There’s an extensive tutorial about how to ✨ blur photo online with MockoFun and all the effects mentioned.
4. Blur Image Using CSS Styles
Yes, you can blur an image by applying CSS styles.
Sometimes you only need to blur an image to display it on your site. Instead of using a photo editor to modify your image, it might be easier to just use CSS to apply blur.
For this image I simply added the following CSS code to my stylesheet:
.image-blur{ filter:blur(10px);}
and then add the image-blur CSS class to the image
<img src=”your_image_path” class=”image-blur” />
Or, you can even add this as an inline CSS to your image like this:
<img src=”your_image_path” style=”filter:blur(10px)”/>
In Conclusion
There are many ways to produce image blur and there are many uses for blurring an image.
No matter if you choose to use your camera, use Photoshop, blur images online with MockoFun or use code to add blur to your website’s images, now you know how to control image blur.
