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