Feature
Post

Category
Design


Jazz Up Your Web Images With Fancy Borders

Are you sick and tired of the old square or rectangle that your beautiful web images are surrounded by? It’s easy to make your square edged old jpgs and gifs look exciting and new if you’ll just follow these quick instructions for creating fancy borders around your photos in no time at all! You can use this easy Photoshop technique to spiff up your graphics for your own home page or blog, or for an outstanding banner or intro photograph. There are so many uses for doing this to your images, and you will come up with many yourselves after just trying this once! It is so easy! Okay, ready?

Fancy Borders Using Photoshop

Save this new version of your image as something else, that way you still have your “untouched” original intact.

Open any one of your images in Photoshop and resize the original image to something manageable. Save this new version of your image as something else, that way you still have your “untouched” original intact. My rule of thumb on sizing graphics is as follows: If I plan to use the photo on my web sites or blogs, I usually size them down to about 450 pixels wide by 338 pixels tall. For web, make your image resolution 72 ppi. If I you are not using your image for the web, then I suggest you make your image 200 to 300 ppi in size so it can be used in print media or whatever else. Anyway, enough of this resizing – that’s a whole other blog subject!

Once you have saved this new version of your image in Photoshop, immediately move over to the right of your screen with your mouse pointer and locate the Layers palette that is usually docked in the right side of your Photoshop work space. You will see the little icon that represents your open photo, which is usually named “background.” Put your mouse on that little square representation of your photo and drag it down over the New Layer icon at the bottom of the layers palette (it is the little square next to the trash bin). This will duplicate your background layer and create a new one called “background copy.”

Next, move your mouse pointer down to the New Layer icon again and just click on it once. It will create a new blank layer. Click on the new blank layer and drag it between the other two background layers. Make sure your default color picker colors are set to black and white (type the letter “d” to reset to your default color scheme in Photoshop). With the new blank layer active (it will show as highlighted), click Alt+Backspace (on Windows), this fills that empty new layer with the color white. Your layers palette should look like the example below if you’ve done these steps correctly:

Now, while you are still in the layers palette, click on the background copy layer to target that layer and make it “active”. Click the rectangle marquee tool (the tool on your vertical toolbar that is at the very top left) and click and drag a selection area that is just inside the edge of your image, probably around 1/8″ in size thereabouts. See example:

Click on the Layer Mask button at the bottom of the layer palette menu (third button from the left – a grey square with a white circle in the center). If you have done this correctly, you should now see a little white border appear all around your photo as in the example below:

Next, click the Filter menu at the top of your document work space, then click Brush Strokes from the drop down menu that appears, and choose Sprayed Strokes from that menu. The filter gallery will open up and show you a blank, white photo image area with that particular effect you just chose applied to it as a black, jagged looking border. To adjust the effect in the filter gallery, make the stroke length about 6 and the spray radius around 15, this looks really neat. Experiment with what amount of effect you like best. Next, just click OK to approve of the effect and close the filter gallery. Voila, looks cool doesn’t it? Also, while you are being creative, go to the Layer Palette again and click on the effects icon (black circle with a script ‘f’ in the center of it) and choose Drop Shadow just for fun! That’s what I did in my example here:

To finish out your border, just click the Image menu and choose Flatten Image (or Save For Web in the File menu) so that you can save your file as a .jpg, and you are ready to go! Easy wasn’t it? Experiment on your own by using a black background fill next time, or some other color… it’s all up to you and your own creativity!

Finished image example:


  1. By Stefan posted on April 3, 2008 at 4:42 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    There are a few mistakes in your article: At first, press ‘x’ to change background and foreground color. To reset it to b/w, press ‘d’. Second, you forgot to mention that you’ve to click the mask button in the layer palette between screenshot two and screenshot three. Without you wouldn’t get any further.

  2. By Troy posted on April 3, 2008 at 5:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Opening Photoshop to make fancy borders seems a bit much. I’d rather use one of the online services such as Picnick or Fauxto. If you feel the need to use a local application, ImageWell or Picturesque for Mac are more than adequate.

  3. By Sepi A. posted on April 6, 2008 at 6:56 am
    Want an avatar? Get a gravatar! • You can link to this comment

    phffft…
    Like the 2 million+ (according to Google) Photoshop border tutorials wasn’t enough. Sheesh… No site redesign will save you if the content is this bad.

  4. By ZoeMarlowe posted on April 7, 2008 at 2:20 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    To Stefan: Thank you so much for calling my attention to the omission of a very important line of text regarding the clicking of the ‘layer mask’ which is a key component in this brief tutorial. I have since updated this, and do appreciate you mentioning it, and apologize for missing this when I proofed the copy. I also revised the part about default colors being obtained by typing ‘d’ – although if you had read what I wrote there, I was suggesting the ‘x’ as it puts white on the top. However, that is a bit clumsy, so I appreciate your comments and revised it to reflect what you were saying. Thank you for bearing with me, I am a bit new to this blogging software.

  5. By ZoeMarlowe posted on April 7, 2008 at 2:23 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    To Troy: Point well taken, although some of the online image editing programs don’t give you as much flexibility as I would probably enjoy, and can be twitchy and cumbersome to operate. However, in the spirit of the online image editor surge over the last few years, I am currently trying out 30 or so of these programs, and will be posting some personal opinions on different features of each, and whether or not they are worth the time of day to check out or not! Thanks for your post about this!

  6. By Fubiz posted on April 8, 2008 at 11:48 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good tips!

  7. By ty (tzmedia) posted on April 14, 2008 at 10:54 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the tutorial Zoe, it’s amazing what little things make life easier. I hadn’t realized that a selection automatically becomes a mask when clicking the mask button. I’ve been thinking I had to paint black on the selected area.
    Still working through the tutorial, cool thanks.

  8. By ty (tzmedia) posted on April 14, 2008 at 10:56 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hey worked great, creating an action of this would be super duper…
    click click pull.
    Thanks again.

  9. TrackbackAdobe Photoshop Tutorials - Rainbows, Glows and Light Effects25 inspirational design and creativity blogs :: Aaron RussellBilderrahmen gestalten mit Photoshop | Bitte mit Rahmen!