Look at my first sample (4 sceneries with transparent jpg menu)
drag the menu over the images which can represent changing masthead images on a webpage
the menu always blends nicely into the background - because the rollover menu images are PNGs! (a photographic image that can have transparent areas via mask/alphachannel)
now you can make e.g. drop shadowed and photographical menuitems independent from the underlying image also display fine in all Internet Explorers
(for those not familiar with the golive actions: the dragging effect was achieved by putting the menu in a layer and put the multimedia action 'drag layer' into the page header)
What does that mean for my webpages?
when you have to add or change a menuitem you don't need to make all buttons again against the background image
and you can use varying background images, e.g. for each section on your website a different without having to create multiple menu sets
you don't have to make the menu a fixed width anymore to match the background perfectly, but can rearrange the menu or let it adjust in a liquid way according to window width.
see my second sample with the small road at a lake scenery and click the red part of the car.
the car drives along the road ...
apart from menues it means that you can use PNG images without quality loss and with transparent effects, no need anymore to create picture collages in PS and save as one image - put them into individual layers and arrange them on the page in GoLive
you can finally use nice smoothing picture edges blending against the background without having to save the image together with the background and at redesigns with different bg colour don't need to create them all again...
in the car sample … apart from that the (DHTML) animation which is done with layers and the timeline editor – I wanted to show you the car which is a PNG image.
out of interest and for comparison I have compared the car picture quality/filesize
as PNG-24 - 52kb
as PNG-8 with dithering - 10kb - but that one gives you similar edges as with .gifs, so for very smooth and fine picture blendings it would be probably not accurate enough. for menubuttons with dropshadows PNG-8 gives you perfect quality not larger than .gif. there are tools/plugins available that give you choices of PNG-16 or smaller to make filesizes tinier. as always have a try with your buttons/pictures to see what is best.
my third sample is more a basic need on web pages, some nice headline or cut photo should blend against a varying colourful background. zoom the text and you can see that the photo will move and always blend correctly with the background. again: it is not a transparnet .gif, but a again .png, an image in .jpg quality, but transparent.
the fourth sample shows two .png images with alpha channel transparencies that overlay eachother.
and for demo reasons do also overlay this text now ;-)
when you resize the browser window you can see one images floats at the left, the other at the right edge and they blend nicely in the middle. (this can be used e.g. for top header images at a 100% page width (liquid design).
Why will I need this PNG action?
because any Internet Explorer 5.5 or higher does not support PNG format! (only mac ox IE5.2 does) instead of transparent areas you will see only opaque grey.
this action by OUTactions.com forces IE to display PNGs correctly. (you simply put the action into the header of the pages)
see my instruction screenshot to get an idea of how it works
one has to cheat IE by presenting him a .gif first and then forcing him to exchange this .gif immediately against the desired .png ... ;-)
visit www.outactions.com for a thoroughly explanation/download/purchase
and, please, don't complain about the loading time of this page. I tried to put all samples on large page rather than letting you open new windows.
----------------
beate de nijs
18th June 2004, revised Dec 2004
1
3
This is a sample to show when PNGs are the perfect choice. This layer here has a background image that is a normal jpg but has a complicated gradient ... Now I want to let some headline or logo or whatever flow with the text.
It would be a nightmare to save this image against that gradient background and position it accurate on the page. not to speak of what would happen at textzoom or at liquid layouts with varying textlength?
And here another daily practice example, some cut shape, image part or body shall sit against a varying background ... try textzoom and see that the image always blends perfectly.
and a bit OT, to fill this layer some other thing regarding colour effects and optical illusions you can see here: the text is pure white - FFFFFF. but against the yellow parts of the gradients it adopts some yellow (or better the eye continues the yellow on the white letters which gives them a light yellow shade)
