How to Make Cool Photoshop Divider Bars for Your Hubs

I like to add interesting visuals to my Hubs. Sometimes I use my own photos; sometimes I use photos I find on-line that are in the public domain or listed under a Creative Commons License. HubPages has a great Photo Capsule that’s very effective, especially if you create your own Photo Divider Bar before uploading.

I didn’t realize I was doing anything special until a few followers commented on my Photo Divider Bars.

Photo Divider Bars are composed of a composite photo created in Photoshop. If you don’t have Photoshop, there are other similar programs that allow you to manipulate and enhance graphics and I’d venture to guess that the method described here can be adapted to your program of choice. The composite photo is uploaded to a full width Photo Capsule.

I use these Dividers to break up a string of Text Capsules that look too wordy. Single photos are still used to punctuate a paragraph, but when I have an unusually long Hub, the Divider Bars work well.

It’s a good idea to use simple photos or illustrations in your Photo Divider Bars since they will be repeated. The best photos are well-defined images that are set against a white background, so when you’re scouring through Flicker, or Google Images or any of the other photo sources out there, look for those qualities, although any clear photo makes a fine Divider.

You’ll probably discover that the perfect photo taken by an aspiring amateur photographer has been designated as being subject to full copyright law. You can’t use it because they think it’s worth protecting, or worth a bunch of cash. Yes, there are a lot of over-inflated egos out there; fledgling photographers who underestimate the power of promotion the Internet can provide via the Creative Commons License. Imagine the exposure one would receive if they allowed their work to be reproduced along with their name! You can’t buy that kind of advertising!  ‘Nuff said…back to Cool Photo Divider Bars.

Once you’ve found (or shot or drawn) that terrific image that’s not subject to copyright law, get it onto your computer and open it in Photoshop or your preferred graphics program.

If your image is in anything other than a Photoshop or Jpeg, or Gif format. save it as one of those. Mac Users - always convert TIF or PNG to Jpegs asap or your friendly blog service will vomit it right back at you. I know this because I am a die-hard Mac user and it has happen to me.

Now that you have your image, make sure it's not too tiny and it looks crisp and easy to define at 100 percent. The resolution of images you get on-line will be at 72, but if you’re using your own photo and it’s really big, (like 6 MB) don’t worry, you’ll reduce it later.

If you’ve grabbed a photo with a Pixel Dimension of less than 200 don’t try to make it bigger by changing the Document Size or it will get fuzzy or pixelated.

If your Pixel Dimension is already high, you can go under Image in the Menu bar and set the Pixel Dimension to about 200 x 200. For irregularly shaped photos, check the Constrain Proportions box and set the larger dimension to 200. Don’t change the Document Size: (Width and Height), but make a note of the Width and Height dimensions.

A Pixel Dimension of 200 x 200 is an image that will lend itself well for a Divider Bar.

Working within the Photoshop document format allows for the highest quality image. Don’t convert your document to a Jpeg until you're finished editing. If you’re working with a Jpeg from the start, that’s ok too.

If you have a photo with a white background, great! But if your photo has just a few distracting elements, erase them with the eraser, or push them away with the smudge tool. If you have an image that’s not against white, it can also work as a divider as shown below

• Select your photo by going under Select/All.

• Copy the image by going under Edit/Copy.

• Now create a New Photoshop document. Go to File/New.

• A window will open that will allow you set the size of your new document.

• Now refer back to the Width and Height of your original photo. Let’s say it’s 2.5 inches by 2.5 inches.

• Determine how many duplicate photos you would like to create for your Divider Bar. Let’s say four would look just dandy.

• Set your new document dimension to 11 inches wide by 3.5 inches high. That will give you room to adjust your photos. Set the background contents to Transparent. The resolution may be set to 75 which is web friendly.
  

• Now Paste your image into the new document – Edit/Paste. Repeat this four times. Photoshop will place all copies in the same position, i.e. on top of one another, so just use your mouse to separate them. Photoshop creates a new layer for each copy of the photo.

• Adjust the photos so they fit side by side within the document. If any of the photos overlap, go under Layer/Arrange/Bring to Front or /Send to Back. That lets you reveal the photo that got clipped as you moved it closer to its neighbor.

• When you are pleased with your Photo Divider Bar, select the crop tool and drag it over all four photos, eliminating the extra canvas background. Double click and there you have your final product. All you have to do is save it for the Web (under the File menu), or simply save it as a high quality Jpeg.

Photoshop CS is really expensive, but the whole Creative Suite includes Illustrator and Image Ready if you’re serious about state-of-the-art on-line internet design and graphics.

If you’re a professional blogger  (as many of us are) you can write off the expense. (check with your accountant first!).

For those who have simpler needs, Photoshop Element is also a powerful product that will enable you to enhance your graphics. It’s been called “Photoshop’s little brother” and it’s cheap by comparison. It’s also makes for a great Christmas gift!

If you want to use ready-made graphic dividers in you Hub and blogs simply Google Clip Art Dividers and you’ll get lots of links to clip art sites that allow you to save the image to your computer. Of course some images may be subject to copyright and most of them are pretty basic. One decent link is here:

http://www.webweaver.nu/clipart/bar1.shtml

Have fun!

© Copyright Green Lotus, 2011. All rights reserved.