4

I'm looking for online resources, image libraries, Photoshop actions, tools, or any other means of getting or designing bokeh images (those highly blurred pictures, with colorful circles) for use as backgrounds in web design.

Here are some relevant use cases for the aesthetics I want to recreate. One example from that site:

enter image description here

I tried searching these bokeh-like pictures on Google, Flickr, Dribble, Stock Image, but most of them have very low resolutions. I'm looking for pictures that share the same attributes as those relevant cases I linked above: not too bright (just so I can use any kind of text on top of that layer and still manage to make it readable) and with people on it, although highly blurred.

8
  • 1
    Thank you for making me look up "bokeh." en.wikipedia.org/wiki/Bokeh Dec 13, 2012 at 11:50
  • 2
    Me too Lauren, me too. Downvoted as you haven't said anything about where you've looked or what you've tried.
    – Ryan
    Dec 13, 2012 at 12:41
  • Are you looking for anything more than photographs with out-of-focus areas? Bokeh is about the detailed characteristics of the blurring effect.
    – e100
    Dec 13, 2012 at 12:43
  • 2
    What a supportive community. First, you don't know what a bokeh image is (which is fine, even though it's a massive trend in graphic design), so you proudly brag about it; then, you downvote before I can actually follow any suggestions for improvement. Anyway, I'm glad at least you guys learned something today ;)
    – João
    Dec 13, 2012 at 14:10
  • Very good point there. I'll check my other questions on this forum, as I usually only hang around on Stack Overflow, WordPress, and a few others. Thanks for the edit/update on my question as well.
    – João
    Dec 13, 2012 at 14:48

4 Answers 4

7

Make them yourself!

I don't know what your strengths are or what kind of software you use, so this answer might not be what you're looking for. I dabble in photography and I do graphic design for a living, and I don't typically purchase stock photography. So when I look at that gallery of blurred backgrounds, I start to look at how I can make it myself.

So, if you have access to a DSLR, this site shows how you can create custom bokeh shapes. Bokeh light tends to be round or polygonal because of the shape of the aperture mechanism (thanks, Wikipedia), but you can change it by fashioning a lens cover in the shape of something like a heart. This site links to Flickr images of some custom bokeh, as well as a gallery of people who experimented with this. There's even a kit for sale!

Taking good photos is much better than taking mediocre photos and making them work in Photoshop. But some of us are mediocre photographers or can't find exactly the right photo we want to work with, so why not find an image you like and try to get the effect you want? There are lots of blurs to work with (Lens blur is probably what you want), and if you study good bokeh, you can work to duplicate the effects. Stock photography tends to be a one-size-fits-all solution anyways, so it's good to customize.

1
  • I have to admit making these images myself, either by taking the pictures or by Photoshopping existing ones, was always on the bottom of my list of options. I did some pretty miserable, demotivating experiments a few months ago, but I guess I'll follow your suggestion and do it myself.
    – João
    Dec 13, 2012 at 16:42
4

If you're a photographer here's a great article on how to accomplish bokeh backgrounds:

http://www.photoble.com/photography-tips-tricks/how-to-7-quick-tips-to-create-bokeh-with-digital-camera

If you want to take an existing photo and make it have a bokeh like background here's a tutorial:

http://alfoart.com/bokeh_effect_1.html

...and here's a bunch more:

http://www.photoshopwebsite.com/photoshop-tutorials/15-bokeh-effects-photoshop-tutorials-100bokeh-brushes-for-free-download/

0
  • DIY with a long and "fast" lens; that is, one with a wide aperture. If your friend has an SLR with a big lens; that's the one you want. Set it to portrait mode and shoot.
  • Load Photoshop and run "Lens Blur" on an existing picture, but you'll have to make a selection first. I suggest going the other route, since this takes more time and finesse to look convincing.
0

If you don't want or cannot create such images on your own, here are a few resources where you may find free bokeh images:

Bokeh images on Flickr with Creative Commons CC-By license:

https://www.flickr.com/search/?q=bokeh&l=commderiv&ct=0&mt=all&adv=1

These image require attribution, so they may not be suited for your templates ... depending on if you find a way to give credits.

Public domain bokeh images on Pixabay:

http://pixabay.com/en/photos/?q=bokeh

These images are completely free - also for commercial use. But you don't have such a huge choice as on Flickr. I'm one of the founders of Pixabay.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.