Web Design Blog | Resources for Web designers and Graphic Designers » Resources

Bokeh Effect in Web Design: Showcase, Tutorials and Resources

Tomas Laurinavičius — Sat, 13 Mar 2010 17:27:37 +0000

Today I would like to present the use of bokeh effect in web design. But what is Bokeh?

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.

In this article you will find inspirational showcase of beautiful and very colorful websites with bokeh effect. Also you’ll be able to learn different bokeh effect techniques by checking listed useful and detailed tutorials. For the conclusion you will find a lot of great bokeh resources.

Showcase of Bokeh Effect in Web Design

Wonderful bokeh effect looks very impressive in web design projects. Colorful and abstract bokeh effect gives beautiful, mystery and memorable look for any web project.

In this showcase you will find over 20 beautiful examples of bokeh effect in web design. Some of the featured designs are for sale, so if you like this effect you can buy a website template or even a wordpress theme.

Hybrid WordPress Theme ($32)

Mintozine WordPress Theme (Free)

Envato

Theme Bokeh ($14)

Lisa Maya

404 error theme ($8)

Traffik

Dark ‘n Clean WordPress Theme ($27)

Unuidesign

Javascript Showcase ($10)

Light is Light

Make Photoshop Faster

Onvo Media

Moi Magazine WordPress Theme (Free)

Webexpedition18

Sebcreation

Bitwork WordPress Theme ($27)

Klar

IconDock

72 thinking

Pristilo WordPress Theme (Free)

Newism

Designed by Dave

Tutorials on Creating Bokeh Effect

Here I’ve collected some useful tutorials on creating bokeh effect in Photoshop, Pixelmator and of course with your camera. Most of tutorials demonstrate how to create basic bokeh effect.

Awesome digital bokeh effect in Photoshop

In this Photoshop tutorial you will learn how to create a digital bokeh effect. The process is very easy and you will see how to use the super powerful Brush Engine, one of the coolest things in Photoshop.

Create a Bokeh inspired Background

In this Tutorial we’ll create a really neat background using simulated focus, learn how to simulate depth in Photoshop, and learn a little bit about the Bokeh design Style so popular in many of today’s Photoshop creations.

Awesome Bokeh Effect Tutorial

In this tutorial you will see how to create custom bokeh effect in Photoshop. This tutorial will also teach you how to make your own brush.

Light Bubbles Effect Photoshop Tutorial

This tutorial explains how to create a bokeh underwater light bubbles effect using Photoshop. This will include blending colours using hue and saturation and creating a really cool custom brush.

Sleek Icon Design

In this tutorial we’re going to be creating a colorful image icon from scratch, the icon features a colorful design in a shiny metal like border the icon also used a bokeh effect.

How to Create a Simple Bokeh Effect

This tutorial shows you how to create beautiful bokeh effect in Photoshop.

Create A Perfect Bokeh Effect

This well explained tutorial will help you to create a nice bokeh effect in Photoshop.

DSLR Bokeh Tutorial

Another great tutorial teaching you how to create bokeh effect, this time it’s tutorial for DSLR camera.

The Best 6 Ways To Create Your Own Bokeh

This guide provides a simple technique to shape the bokeh of the unfocused elements in your picture.

Colorful Bokeh Effect in Pixelmator

This tutorial will teach you how to easily create a bokeh effect in Pixelmator.

Pure CSS3 bokeh effect with some jQuery help

Author of this tutorial wants to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. Learn how to create bokeh effect with CSS3.

Design a Sleek Bokeh Styled Portfolio

Learn how to create and integrate the popular bokeh effect into a sleek, professional website design.

Bokeh Effect Resources

Here you will find a lot of useful resources like textures, backgrounds, photoshop actions and even business cards with bokeh effect. Some of the listed resources are paid, but they are highest quality, unique and worth money.

Bokeh flame card ($6)

This template is a bokeh illustration with fresh colors and gradients. All text layers are editable so you can input your own text.

Bokeh Effect – Deep Sea ($3)

This pack contain 1 Theme with 5 color schemes. Blue Deep Sea (By default), Tropical Blue Sea, Turquoise Sea, Brown Sea and Brown Sea.

Elegant Bokeh Business Card ($5)

Bokeh Business Card – simple & stylish. Easy to modify. This PSD layered files are print ready, CMYK , 300dpi. All text layers are full type and can be easy edited.

Bokeh Photoshop Action ($7)

Unique, custom and never seen before action that throughout smart & studied steps, automatically creates the so beloved BOKEH effect on any photography, any image and any scene.

Circle Of Bokeh ($3)

Fully Layered, Named & Grouped with .PSD File & .JPG Of The Background/Wallpaper. Perfect for all uses! Backgrounds, Wallpapers, Websites, Banners, Headers, Signatures, Badges etc..

Bokeh Effect ($4)

This pack contain 1 Theme with 8 color schemes. Blue (By default), Turquoise , Green, Purple, Gold, Silver, Cooper and Orange.

Blue fiber optic abstract background ($3)

Light on! Backgrounds pack ($4)

Ready to use and changes you can turn off any glow and lines / make a different color by “hue and saturation” tool or add your gradient.

5 Colored Grungy Bokeh Textures (Free)

Free pack with 5 various bokeh textures. Free for personal and commercial use, with no attribution required.

30 Free Bokeh Textures (Free)

30 free bokeh textures for you. Free for personal and commercial use, with no attribution required.

11 Fresh HQ Bokeh Textures with Commercial License (Free)

11 beautiful high quality and free bokeh textures. For licence check author page.

Bokeh Texture Pack 001 (Free)

Another great pack of bokeh textures. For licence information check author website.

13 Graphic Bokeh Textures (Free)

13 253X813 graphic bokeh/light textures can be uses for icons, designs etc. If you use them you must agree with following rules. Do not claim as your own. Please credit if you use any: Coralulu with link to DA. Not for websites or stock, do not redistribute.

Bokeh Effects Pack – 42 Free Images (Free)

The pack includes 42 images, all weighing in around 3500 pixels wide at 300 dpi. They look outstanding by themselves, as a background or even a texture overlay in your design. Personal and commercial use is welcomed and encouraged!

Pass your 350-030 exam in easy going way with world class online training by test-king experts. Get all the required knowledge in single package and pass your 642-901 as well as 70-642 on first attempt guaranteed.

25 Beautiful Free Valentine Fonts

Peter Olexa — Sat, 06 Feb 2010 19:43:44 +0000

Valentine’s Day is around the corner, and seems my timing is just right publishing this selection of beautiful free Valentine fonts. You can’t go wrong with using these when designing personal Valentines for your friends. In this collection you’ll find 25 beautiful free Valentine fonts for your works. Enjoy!

Luvable

Words of love

Fiolex Girls

JulesLove

DJ Candy Heart

Hearts of Lime

KR Be Mine Forever

KR Heartfelt

Hearts Galore

KR Valentines 2006 Ten

VTKS News Label

VTKS Dear Love

Love Letters

Loverboy

Lovesexy

KR Valentines 2006 Six

KR Valentines 2006 Three

KR Valentines 2006 Four

KR Valentines 2006 Two

KR Valentines 2006

Heart emboss

Be My Valentine

Lieb Mütterlein

Young Love ES

Lovesick AOE

Become an author

If you want to become an author of WebDesignFan.com please check Contribute page and contact us!

Daily DesignTweets #8

Tomas Laurinavičius — Wed, 25 Nov 2009 19:18:22 +0000

Daily DesignTweets is a series of daily design and development related tweets useful for every active designer. Today’s tweets will share useful A lot of Cheat Sheets, Illustrations and a bit of freebies and inspiration.

All here mentioned links discovered via Twitter. If you’re interested in Photoshop/Design/WordPress follow WebDesignFan on Twitter @webdesignfan.

34 cheat sheets for web designers and developers

41 Free Insanely High Quality Icon Sets Every Designer Should Own

Dealing With Your Mistakes

The Best Free WordPress Themes of 2009

Black and white social icons

What an Animal – Illustrations of Turkeys

17 Essential Cheat Sheets for Web Developers

31 Mascots And How They Help The Brand

Worth following designers/developers/bloggers:

Louis Gubitosi
@iBlend
We specialize in web design, development and blending the traditional creative agency with new media. (Please also follow @TheWebBlend to keep you updated).

*********

Nicholas Patten
@nicholaspatten
Video Editor, Graphic/Web Designer, Architecture, Tutorials, Social Media, Red Camera, I’m a Mac. (@RedLifeintl – Red Camera) (@IRGnews – IR/PR) (@Spatik).

*********

Design Informer
@designinformer
Informing you about the latest in web design and graphic design.

Daily DesignTweets #7

Tomas Laurinavičius — Mon, 23 Nov 2009 19:40:03 +0000

Daily DesignTweets is a series of daily design and development related tweets useful for every active designer. Today’s tweets will share useful WordPress tips, jQuery Plugins and a bit of freebies and inspiration.

All here mentioned links discovered via Twitter. If you’re interested in Photoshop/Design/WordPress follow WebDesignFan on Twitter @webdesignfan.

25 Crazy Cool Icon Packs for General Use

40 Beautiful Dark Website Designs

5 Useful Coding Solutions For Designers And Developers

12 Useful jQuery Plugins for Working with Tables

Creating Helpful and Effective WordPress Archives

65 Stunning Dual-Monitor Wallpapers

70+ Creative and Inspirational Website Designs

Free Texture Pack: NYC

25 Web Layout Tutorials

Worth following designers/developers/bloggers:

Francesco Mugnai
@francescomugnai
I’m italian, or better, i’m Florentine. I’m and Adobe Certified Expert in Photoshop CS4, i work as Teacher, Graphic Designer and Web Designer.

*********

Kawsar Ali
@DesiznTech
Web Designer, Techy, Wannabe Photographer, Texture addict. I am active on digg and Twitter. Give me a shout.

*********

Cristian Vasile
@cristianvasile
SEO, Tech Geek, Webdesign, CSS, Typography #LoveHelvetica.

30 Best Free Handwritten Fonts for Designers

Tomas Laurinavičius — Thu, 19 Nov 2009 18:11:48 +0000

Handwritten fonts aren’t the best choice for web design, but you can use them in your headers, wallpapers, short notes etc. Handwritten fonts may be useful when you are trying to achieve unique look for your design work.

In this compilation you will find 30 useful free handwritten style fonts. This is not a big collection but here is only the best, clean and most beautiful handwritten fonts.