Tips, Tricks & Hacks I
The Fine Art of the Drop Shadow in Photoshop 3.0by Heather Champ
I will confess that I have a true weakness when it comes to drop
shadows. They introduce new spatial relationships between elements as the
shadowed elements appear to be elevated above the surface of the page.
They are simple, easy to create, and can add a dash of panache.
How to:
Step 1: In Photoshop 3.0 create a new document. Make sure
that your "layers" palette is on the desktop, then create a new layer. I want to
end up with a red circle with a black drop shadow so I've created a red
circle on this new layer. [If you forget and start on the background you
won't be able to arrange the shadow layer beneath the original
element.]
Step 2: Copy your object and paste it into a second layer
beneath the first. Select the color that you want for the shadow and fill the
selected element with that color.
Step 3: After you've changed the color of the element,
"de-select" the image. [Double check that you are working on the correct
layer.] From the filters menus select "gaussian blur" from within the "blur"
option. A window will pop up with a slider for the percentage of blur
desired. I find that 2.0% to 2.5% works well--the illustration is
2.5%. Once the image has been blurred, move it directly under the top
element, then move the "shadow" the desired number of pixels, offsetting it
from the top element. I've moved mine four pixels to the right and four pixels
down. You can switch around the blurring and arrangement sequences
within this step.
Step 4: You can also lighten the shadow so it's not as dark,
which will give a slightly softer look. Play with the pixel offset. The
more offset the image, the more the element will jump off the page, but
if the offset becomes too large the allusion will not be as
strong.
Pros: Drop shadows simply add a new
dimension to an otherwise flat page.
Cons: Because of the gradation of
color within the gaussian blur, the image can appears speckled if an
individual has a reduced number of colors.
The Text Wraparound Hack
I have joked in the past that it used to be that the only women's sites on the Web were, you know, "Winona Rider sites." I had lunch recently with Eric Harshbarger, creator of one of the earliest Winona sites (he's now moved on to become one of SunSoft's Java Gurus). He had printouts of his site, and one of the pages included an intriguing HTML hack. By splicing up an image, specifying the height, width, and align=left within the image tag attributes, it's possible to achieve a rather elegant text wraparound.
The image on the right gives you and idea of what's happening in the left.
Here is Eric's code:
<img src="gif" align=left hspace=0 vspace=0 width=116 height=330>Pros: Adds a bit of pizzazz, which can be missing in the typical right or left justified text.
<img src="gif" align=left hspace=0 vspace=0 width=11 height=220>
<img src="gif" align=left hspace=0 vspace=0 width=13 height=197>
<img src="gif" align=left hspace=0 vspace=0 width=19 height=182>
<img src="gif" align=left hspace=0 vspace=0 width=41 height=170>
Cons: If any one image fails to load it's going to be rather nasty.
