Pro Edges pg 2: Production Graphics with Wendy Peck at webreference.com

Pro Edges 2: What's in a line?

Let's start with a simple line. I use them all the time to help anchor an area of the page or a graphic element to the page. Watch when you are surfing sites. Sites with no linear elements are hard to navigate. You probably work design elements into your site at the planning stage. You identify the colors, the mood, the structure and usually what you will use for dividers, whether lines, color blocks, navigation graphics. But do you include your photo treatment at this stage? You should!

This is the caption for this photo. It does not form a tight group with the photo.

This is the caption for this photo. Notice how the simple addition of a line unifies the caption and photo.

Images provided courtesy of EyeWire.

Images © Eyewire and Internet.com and may not be reproduced in any way without prior written notice.

Look at the photos at the left. The first one has not been changed. The second has a design line that matches the caption divider. Note how the line makes the two pieces a unit. You still get a feeling of depth even though the shadow is just on the line.

This effect take about 5 minutes to do in Photoshop. Create a new layer, choose your color, set your line width, draw a line and add a drop shadow to the lines layer. Once you have your style and color determined, set up an Action so you can accomplish the same effect with a few keystrokes. (See the Dingbats article for a step-by step description to create PhotoShop Actions).

If you start using lines with your photos, you will probably also want graphic lines to call on for rest of your document. I often make two or three template lines at the beginning of a project.

Quick lines
Create a new document with the dimensions of the largest line you are likely to use—don't worry about making it too large, since this file is minuscule anyway. I usually create a line 200px wide by 2px high. Fill it with a Web safe color to match your design. Convert it to Indexed Color, set it to 1 color and save it as a gif file. Quick tip: If you are creating several lines with different colors, name the files lnxxx (xxx tells you the color) so that all the lines will appear together in the folder.

This line can be reduced to any size in your document by specifying the image size. The orange line below the caption was created as a 200px by 2px image and is featured here as 100px by 2px. A waste perhaps, but this file is only 50 bytes. As a comparison, the same line saved as 100px by 2px is 45 bytes. A savings yes, but to use a variety of line sizes, you could fill a directory very quickly. I will trade off the few bytes for faster production time and design in the size I most often use.

You can also increase the size beyond original dimensions since there is only one color and no aliasing (straight lines), so if you are a serious byte counter you can create a very small original file and increase the size on every line.

Next page

Pro Edges Tutorial Index

Pro Edges Start
What's in a Line?
Why Frame?
PhotoShop Frames
Fade Away PhotoShop
Quick PhotoShop 3D Frame
CorelDraw Frames
CorelDraw Ragged Edges
Flash with an Edge
Photo Resources