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.

New Image dialog in Photoshop.

Our settings for the new Photoshop graphic.

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.

creating a new layer in Photoshop.

The “New Layer” dialog, from which we choose “Solid Color”.

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”.

rasterizing our layer

Rasterizing the layer in Photoshop.

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!

The gradient tool.

The Gradient tool in Photoshop.

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.

the gradient tool in Photoshop.

Creating our gradient.

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.

Saving for the Web.

Saving our background image for the Web.

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!

The finished webpage.

Our finished webpage and code.

And here’s a close-up of the CSS code (make sure that image is in your site folder!):

Our CSS code

All of our CSS code.

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!

— Ryan


~ by Ryan Craig on October 30, 2011.

4 Responses to “Creating a Gradient Border with Adobe Photoshop CS5”

  1. the detailed screenshots that allow the reader to really connect with what is going on in your post and what they need to do on theirs to be able to follow your instructions is very helpful. showing the code allows the reader a better understanding of what is going on in the website and what they need to do to be able to change certain parts in the smallest detail. i like this post a lot
    jake sam

  2. This post was great because it clearly stated what problem is was trying to solve and why it is important to solve it. Not only did you explain how to make a boarder in Photoshop, you also went one step further and explained how to make a gradient boarder. This blog also had the perfect ratio of directions and pictures to make the process crystal clear.

  3. You do a very good job of walking the reader through each and every step of this process. The images are great in ensuring that the reader is keeping up every step of the way. Your tone throughout is encouraging and easy to follow, nothing feels to technical or difficult to understand. This is a great post, thank you!
    -Nico Dyll

  4. Not only is this post technically sound, but it is also interesting! Websites I have used in the past had simple backgrounds, but now this is an easy step up from something that at first seemed difficult. I may be referring to this in the near future. Great job!

    -Jarad Kmietowicz

Comments are closed.

%d bloggers like this: