The Latest...

A small note about the background image on this page

Posted: October 09, 2010 in Web Design

A few people have asked me how I made the background image of this page. Well, it's basically this image, which I took in Temagami this year:

Temagami at night

The process went like this:

  •  Select the dark area below the tree line, and invert the selection to get the sky.
  •  Delete the sky, and apply a greyscaled gradient to this area.
  •  Re-select the tree area, and make sure it's all black and clean up some various noise.
  •  Apply a blur effect a few times, then re-sharpen it (this gave it a distinct separation between the trees and sky).
  •  Mirror the image to keep the light area out of the blog posts.
  •  Resize it, then crop it at a point that would create a repeating pattern, with no obvious seam.


For the bottom "reflection" half:

  •  Flip the image from the top of the page.
  •  Apply a wave effect to it.
  •  Resize it to make it around 40% shorter for the same width.
  •  Toss in a few CSS tricks to be able to have two background images on the same page.


That's pretty much it, other than repeating the process for the "Light" page scheme. I like the effect, and it resizes perfectly for different size pages.

Add Comment




Click to reload a new image.

< Back to blog