The Magic of Blurred Backgrounds


Benefits of a blurred background

Blurring helps your background to load faster because it allows you to discard data.  It also is a lot less distracting when you’re displaying clear images on your site, so your pictures stand out better.  It creates a great depth of field, to compliment your web-site.  Also, a blurred background, is far less distracting from what you’re reading, allowing the reader to feel more relaxed and able to concentrate, through their session.


How do you make them?

These are all set to my screen size: 1920 x 1080.  I’m using a 24″ monitor.  The good thing is, because they’re already blurred, up-sizing them wouldn’t be a problem.  Blurring does some kind of molecular transformation to patterns.  I’m not at liberty to explain; except to say it can change the appearance of the pattern, as if it mutates into an entity of its own, with enough blurring.  In Photoshop CS3, I made a new file, and in the menu, I chose Edit/Fill and fill the entire page with a pattern.  You don’t have to select the page either, it fills the page automatically.  The I go into the Effects menu and chose Blur/Gaussian Blur.  At this stage, you have to use your own judgment to achieve the desired effect.  Each pattern responds differently.  It can show up well at a setting anywhere between 3.3 and 9…  You’ll know when it right by making a compromise between what looks good and how much depth of field you can apply without obliterating the pattern altogether.


The secrets to fast page loading

When you first make your file, set the resolution at 150.  That’s a good compromise between uploading speed and quality of the image.  Also, grayscale contains less information than color, with a pallet of only 256 possible choices between black and white.  Also, it reveals more detail than color images do.  Then, before I save the file, I go into the menu: Effects/noise/reduce noise, and I just turn everything up to remove the most noise.  I also check the box at the bottom of the dialog box that removes jpg artifacts…  

When I finally save the file, I find a setting of 10 is as good as 12, with no appreciable loss of detail, and this compacts the file considerably.  Mine, for instance, weighs in at 349k.  Yet some of these grayscale ones are as low as 215k, so they’ll load almost twice as fast as mine!  For color patterns, I use the sRGB color profile.  The ‘s’ stands for small color palate, used mainly for The Internet.  Don’t let it fool you though, to maintain quality, I tried to keep them down to around 679k, yet a couple of them weighed in at 1 meg.  So check the file size and base your decision on that.


Dazzling, yet not distracting

Some of these are almost magic in appearance!  I have provided something for everybody’s taste, so examine these carefully, and pick out a few you might like to try out.  They’re easy to change.  Just turn off the old one and upload the new one.  Be sure it’s set to “Tile” , Not the horizontal or vertical choices though.  Just “Tile”…  You’ll find the settings in your dashboard under “Background”.  Hehehehehehe!  Be sure and look at the pictures full size in the gallery, to appreciate their full effect.

I hope this post will clear the air some, about how I get my page to load so fast and at the same time, give you some new toys to try out…  Go ahead and check them out.  They won’t kill your blog, and they may even provide a long-awaited back from the same old visuals, and hopefully, increase your traffic.  I DO hope you’ll enjoy using these backgrounds as much as I enjoyed making them for you…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s