Bokeh effect is the blurred or out of focus part of the image. This effect has become very popular recently, and is normally seen in photography mostly around the light sources. Many designers have made use of this effect in web design to bring the object into sharper focus while making the background visually appealing.
This time we’re going to show you some examples of the very popular Bokeh effect in web design and also share with you some tutorials on how you can create this effect yourself.
What is The Bokeh Effect?
This effect has become very popular over the last few years. The effect itself is something we would usually see in photography, but software like Photoshop can be used to recreate it.
The word “Bokeh” comes from the Japanese word “Boke” meaning blur.
In photography, Bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or “the way the lens renders out-of-focus points of light.” – Wikipedia
Use in Web Design:
Here are some examples of the use of this effect in web design. As you see, the effect itself is quite easy to spot, but it can be used in several ways – making it both easily recognizable and versatile at the same time.
Tutorials
As mentioned earlier, the Bokeh effect is originally an effect in photography that also can be recreated digitally. Here are a few tutorials to help you getting started on making your own designs featuring this simple yet effective look.
The first one is for those of you wanting to make the effect with your own camera, while the rest of them focus on making it digitally.
Awesome digital bokeh effect in Photoshop
How to Create a Simple Bokeh Effect
Colorful Bokeh Effect in Pixelmator
Pure CSS3 bokeh effect with some jQuery help
Bokeh Vector background in Illustrator
Hexagon Bokeh Effect in Photoshop
Design a Sleek Bokeh Styled Portfolio
How To Create A Sweet Bokeh Business Card In Photoshop
How to create abstract colorful background with bokeh effect in Photoshop
Time to Get Started?
We’re hoping that this article has helped you to understand a bit more what this effect is all about, and to see how this can be used. We’d love to hear your feedback. Now it’s time to try it out yourself.