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:
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
< Back to blog