Step 1: Create a Seamless Background
In Photoshop, I created a document wide enough to fill a browser, and I filled it with a sky blue color.
Step 2: Choose a Gradient
For added effect, I added a new layer on top and chose white as my foreground color.
Step 3: Subtlety is Key
I selected the gradient tool, selected the foreground to transparent
option, drew a reflected gradient in the center of my canvas and lowered
the opacity of this layer to 15 – 20%.
Step 4: Merge and Crop
I merged both layers together. Then, I chose the single row marquee tool and made a selection.
Step 5: Save Your Repeating Image
I went to Image> Crop to create a wide image that is 1px tall. I saved this for web as a .jpg file named “sky.jpg.”
Step 6: Find Your Imagery
I went online and found an image of grass.
Step 7: Creatively Crop What You Need
I brought this image into Photoshop and cropped it so that it wasn’t too tall.
Step 8: Blend Your Image With a Mask
I added a layer mask and used the gradient tool to fade the top of the grass to transparency.
Step 9: Apply Your Mask
I right-clicked the mask icon and chose “apply mask” to merge it with the image.
Step 10: Save For Transparency
I saved for the web again, but this time I chose png-24 with transparency, so that the top could fade away.
Step 11: Set a Contrasting Background
For my last image, I created a new Photoshop document, made it around
200px tall and filled the background layer with a sky blue (just for
visual reference).
Step 12: Use Custom Brushes
There are many places online where you can download custom brushes,
so I found some custom cloud brushes, chose white as my foreground
color, created a new layer and began painting clouds on the new layer.
Step 13: Stay Away From Edges
I made sure not to get too close to the bottom edge so that there
would be no harsh lines breaking the effect of the clouds. I deleted the
background layer, only leaving the clouds on a transparent background. I
chose File > Save for the Web and Devices, and I saved this file as a
png-24 with transparency as well.
I left the blue background layer on so you could see the clouds, but be sure to delete the blue background layer.
Step 14: Putting it All Together
Now, with a little CSS magic, I can use these images to create a
grassy, cloud-capped background that fits every one of my pages
perfectly. I have created a dummy site for a lawn care company to show
you how to apply this technique. We can call all three background images
using CSS: the grass centered at the bottom, the clouds centered at the
top and the blue sky filling the varying height in between them. Use
the background method to set the background attributes of your site as
you normally would, but in this case, pay close attention to order. The
way you order these three background images will feel similar to layers
in Photoshop. The first item you call will be the image closest to you,
and the last image that you define will be farthest back. In the case
of this project, I defined the grass first and the clouds second,
because in a real scene, the clouds would disappear over the horizon,
which for our purposes is represented by the grass. In other words,
clouds shouldn’t have the opportunity to go in front of the grass,
because that wouldn’t look realistic. Both images are set not to repeat,
and the grass is aligned to the bottom, while the clouds are aligned to
the top and they are both centered.
Step 15: Order is Essential
2 | background: url(images/grass.png) center bottom no-repeat, url(images/clouds.png) center top no-repeat, url(images/sky.jpg) center top repeat; |
3 | font-family: Arial, Helvetica, sans-serif; |
Step 16: Stack Your Images Correctly
The third and last image defined is the “sky.jpg” file, which is
centered and repeated on its y-axis. This ensures that no matter how
tall a content page is, “sky.jpg” will bridge the gap, while the clouds
and grass decorate the top and bottom respectively. The result is a
seamless, dynamic background design that fits every page.
Important Things to Keep in Mind
I can’t show you this without talking about the downsides of this
method. It gives you another creative option for your web design
projects, but one major downside to this method is that you are using
three seperate images to create your background, which can lower your
site speed due to the addition of multiple large graphics. You are
likely using a .jpg and two .png files, or perhaps three .png files,
which tend to be larger than .jpg files. Another factor to consider is
the height of your three images, because if they overlap on an
unexpectedly short page, they can ruin the look of your site. Getting
the image heights right might take time and multiple trials and errors,
but if your clients or colleagues insist on a complex, scalable
background, they should expect it to take a little longer than a
standard, simple one.
No comments: