Started adding drop-shadows to my images. A subtle addition to our fine line of rad webware. To see these shadows drop .. you must visit their intended destination, which is my » Movable Type "professional publishing platform" .. where I maintain a traditional white background.
[ Note: you are here now. The home page with its infamous black background is » here. ]
Myself I prefer to read text set on a black background, which I find easier on the eyes. More soothing .. than staring at a hundred-watt light bulb.
I even tone down the lettering, so it's not too bright. More silver-gray than white. Enough contrast for easy readability, but not much more.
The BEST thing about white backgrounds -- other than the lovely searing effect they have on your retina -- is » the ability to drop shadows. (Seems like a small price to pay, no?)
Drop-shadows produce a pleasant visual effect because they're so subtle. Dash of 3-D class .. for very little extra weight. They help lift those images off pages that are otherwise flat. Of course, it's really just an optical illusion. No such lifting actually occurs. It's all in your mind.
» Editing Web Graphics with Adobe Fireworks
I use Fireworks to drop my shadows, a program Im really starting to dig .. compared to Photoshop, I mean.
Fireworks was designed specifically for web graphics. Photoshop never focused primarily on the web. Editing web graphics is what I do. Most of the time, anyway. Representative graphics that complement the various entries .. for the visually-oriented reader.
Learning Fireworks was one of the more rewarding things Ive done. That and the Linux shell. (Mad power there.)
[ Speaking of design changes, I also changed the roll-over color of the black buttons located in the blue-green sidebars of the home page .. from bright-white to a softer shade of silverish-gray.
Originally thought the white roll-over would play off the (white) top title bar. But the roll-over effect was just too strong. Ouch. Sometimes it takes a while before I realize some aspect of site design isnt working. ]
Drop shadows can be accomplished in CSS (snuck in as a background image under the foreground image), which is a neat trick, but it requires you muck-up your mark-up by adding non-semantic divs, which have no meaning. They're added for purely presentational reasons (styling). Something about that doesnt sit right with me.
[ In Fireworks, to add a drop-shadow, you simply click the little square '+' plus sign next to the word 'Filters' on the right side of the Property menu. Sometimes you have to select the black-arrow tool first .. in order for the 'Filters' button to appear. From there » Shadow and Glow » Drop Shadow. Voila! ]
A minor glitch Im running into » after CROPPING an image, I first need to Modify » Canvas » Canvas Size... to make room for the drop shadow.
••• today's entry continues here below •••
Not a big problem, but if any of you wizards know how I can crop just the image (not the canvas) .. lemme know. I already have to crop (trim) the canvas after I add the drop-shadow.
» Drop Shadows on Black Backgrounds
A bigger problem tho, is that jpegs do not support a transparent alpha channel (.. like PNG-8 does, which I use for non-photo graphics & non-gradients).
So .. the white drop-shadow shows up on black pages. Looks kinda stupid, no? Looks like I'm gonna have to make 2 copies of all jpegs. One with, and another without the drop-shadow.
That means the images will be two different sizes, which will make it more difficult to work with them as a corresponding set. Each image/graphic will require a different height & width attribute, so a simple copy-n-paste into Movable Type wont work.
The dropped one will go to » Ye Olde Rad Blog v4 (powered by Movable Type). The sans-shadow version will stay on the home page (.. where I feel more at home). I'll have to develop a system that streamlines that part of the work-flow.
Drop-shadows look good on white backgrounds, but stupid on black ones (.. stupid as white shadows on a moonless night) .. which is why I havent been using them.
» Drop Shadows with Alpha Transparency via PNG
This graphic image also has a drop-shadow. But you cant see it on a black background, cuz I used an alpha transparency, which PNG supports.
So I can see right away how any toss-up graphics will easily fall to the side of selecting PNG over jpegs, cuz I'll only need to create *one* of those .. cuz they dont look stupid on a black background.
If I want to use PNG for images that should really be encoded with jpeg, such as photographs & gradients, like the one used here, then I need to use PNG-32 .. seeing that PNG-24 doesnt seem to support alpha transparency.
When I use PNG-24, I get an ugly solid black color where the drop shadow should be. Not sure why. See here »
So drop shadows encoded with PNG-24 on a page with a white background seems to be the opposite of an image that uses a drop shadow encoded with jpeg encoding set on a black background.
The jpeg-encoded version of the graphic used in today's entry (a gradient) = 7-KB, while the PNG-32 version = 10-KB, a 50% increase in weight.
PNG-8 comes in with the LEAST weight .. even less than jpeg, at a measly 4-KB, but the quality suks. Notice the banding. Cuz PNG-8 isnt good at encoding photographs or gradients.
On second thought, the banding isnt really that bad, is it?
Just to be clear, the last graphic used here is a PNG-8 (banding visible, 4-KB). The next-to-last graphic = PNG-24 (with the ugly black drop-shadow, 9-KB), and the one above that = PNG-32 (.. which looks great but comes in heavy at 10-KB).
I named the PNG files such that you can view the file's name and see exactly which image encoding / compression format was used.
For more along these lines, here's a Google search preconfigured for the query » drop shadows adobe fireworks alpha transparency png-8
