Creating a Gradient Border with Adobe Photoshop CS5
Borders can always be a pain in web design, but they’re a necessary evil to keep your website looking clean and refined. I thought I’d spice my site up a little bit by creating a gradient in Photoshop that can be used as a border.
First, we’re going to start by creating a new Photoshop image. Since this tutorial will focus on a vertical border, we don’t really need it to be too big, because it will repeat. So, all you really need is an image big enough to get the detail you want and not much bigger.
Now, we’re going to set up the background color. The easiest way to do this in Photoshop is by creating a new “Solid Color” layer via the “new fill/adjustment layer” tool.
After this layer is set up in Photoshop, we have to rasterize it for the gradient tool to work properly. We do this by right-clicking on the new color fill layer and selecting “Rasterize”.
After this, we go to our gradient tool, which is located over in the left toolbar of Photoshop. Make sure your newly rasterized layer is selected first!
Of all of the tools in Photoshop, this one is the easiest. Select your primary color in Photoshop, click on the edge of the picture where you want the gradient to start (in this case it’s the left), and drag over to where you want it to end (here, about halfway to the right of the image.
To clarify that, the pink circle is showing your primary and secondary colors in Photoshop (primary on top, secondary on bottom). The blue arrow indicates where we started with our click and where we dragged it to. Just like that, you have a nice gradient background image in Photoshop!
Right now, though, that’s kind of useless to us, so we need to move it over into our webpage to really make it shine. To start, go to File > Save for Web & Devices. I’ve had the best luck with JPEG for image clarity and small file size (this is really important in your background image), so let’s go with that.
Now, for this next part, i’m just going to give a quick overview, so this isn’t a functional webpage in any sense. All the information still applies to any other webpage, though!
And here’s a close-up of the CSS code (make sure that image is in your site folder!):
Here’s a quick rundown of all that code: Basically, we inserted the background image into the body of the HTML document, and then had it repeat across the Y axis only (if you don’t specify this, it will repeat over both the X and Y axes, making an impossible-to-read webpage). Then, we inserted another background color matching that of the end of the image (this saves a lot on file size and looks no different). Finally, we changed the color of all elements defined as <h1> and then indented them over by 65 pixels for readability. (As a side note, you should do this for all of the elements on your webpages so that they don’t run into the border.)
And just like that — voilà! Your website now has its own gradient background!