Drop shadow image frames
|
slacy
Joined: 2004-12-17
Posts: 21 |
Posted: Fri, 2004-12-17 08:35
|
|||
|
Hello. I've done some design on a nice "Drop Shadow" image frame, as well as an "Image Stack" version of the same thing to represent albums. You can see my example gallery here: Be sure to drill down to a single photo to see the standard "Drop Shadow" image frame. I have attached a .tar file of the directories "drop_shadow" and "drop_shadow_stack". Just untar this in .../gallery2/modules/imageframe/frames to try them out. I also have the original gimp .xcf files that I chopped up to make the frames, but they are too large to attach. Let me know if you'd like to see them. Steve
|
||||
Posts: 808
I like how it looks in Firefox, but Unfortunately in IE it adds a white frame where the transparent portions of the frame are. This is my biggest complaint about IE. Unfortunately it doesn't look like Microsoft is going to fix it anytime soon.
Posts: 21
Yes, last time I experimented with transparent .PNG files, I got the same result. As I don't have an IE-capable box any more, I didn't test these images.
NB: I thought this may have been fixed, because the "Shadow" frameset that ships with Gallery2 uses transparent .PNG files as well.
It would be fairly easy to provide a shell script that would composite the transparent PNG files with a specified background color, and/or to tailor the blending to a specific background color.
Is there any other per-pixel transparency capable file format that will work in both IE and FireFox?
BTW, if you tried my gallery previously, and there were no albums, sorry about that. I have added one back in, so give it another go.
Posts: 113
Well actually, 8-bit indexed transparency should work great in Internet Explorer, with both .gif and .png.
32-bit + alpha, though, is where the problems are. And only with IE on Windows. Which is really strange, because IE on Mac was one of the first to support it, well before IE 6 was even made.
What we're doing now with the themes, means that we should soon be able to create or customize ImageFrames and other modules, directly in the Theme. Since the Theme knows what the background is, we won't even need alpha transparency, to avoid nasty anti aliasing on the shadow edges. Eventually.
Posts: 113
Ooh. I just saw the effect now. (Last I'd checked, there weren't any images)
I like how you layered photographs to give the impression of there being a "stack" of photos. It wouldn't be too difficult to do that with real photos from the album itself, I figure. Again, eventually. ;)
Posts: 21
I'll try converting them all to 8-bit PNG with alpha this evening (I think I can create that with the GIMP) and you guys can let me know if they work in IE.
Steve
Posts: 113
No, no, no - it's 8-bit with *indexed* or 32-bit with *alpha* ;)
The difference? Indexed is based on solid colours, alpha can ... well, it can "fade" the transparency, providing different "levels" of translucency.
For a quick tutorial about it all in GIMP, see http://kimihia.org.nz/how/gimpalpha/
Posts: 25
all transparent pngs work with IE with the IE7 hack, but that has been taken out of G2. AFAIK thats the only way to get them to work.
Posts: 113
Actually, the way to get them to work (and what IE7 uses) is AlphaImageLoader: http://support.microsoft.com/default.aspx?scid=kb;en-us;294714
It can be enabled from a separate .js script, but only on images from <img> tags, and not background-image, which is what is currently used for Image Frames. The only solution we've come up with so far, is to have theme-specific indexed-transparency .png/.gif files, through the proposed Themed Modules RFE, elsewhere in the UI forum. But we'll come up with something, don't worry ;)
Posts: 21
The PNG spec supports an 8-bit indexed mode where each color in the colormap is represented as 32 bit RGBA. I'm not certain that the Gimp can write that format, but I know it can read it in, and there are other tools that can convert 32-bit per pixel PNGs to 8-bit indexed into RGBA. That is what I was thinking of converting to, but given IE's seeming lack of support for alpha-blended graphics at all, I think that would be fruitless.
It would really be a shame to have to author all the image frames separately for each frame (and what if my theme has a textured background image?)
Can you really make IE support 32-bit graphics by using javascript? That seems fairly odd, and it would be a shame to put FireFox through those convulsions just because IE is lacking.
Maybe image frame support needs some sort of browser detection?
Man, I hate Microsoft.
Posts: 113
You wouldn't have to re-do every image frame, necessarily. If you have a light background, then a light off-white blend to a transparent background should work for your theme. Same with a dark background and an almost-black anti aliasing. That would cover most themes. If your theme has a texture, you could pick one of the major colours, or blend them together, then fade to that.
And with the new system, nothing would stop you from using the AlphaImageLoader ActiveX plugin in IE/Win on your own 32-bit PNG shadow and use that everywhere. In fact, the only reason why we haven't used it now is because the current ImageFrame module uses background-image to insert the images, and right now there's no way to apply the AlphaImageLoader to the background-image using JavaScript, or at least not easily.
And don't worry about Firefox, we can make sure the JavaScript only runs on IE through either JavaScript Conditional Compilation, or using IE's Conditional Comments.
Posts: 21
Sorry, this was a duplicate post that I just nuked.
Posts: 21
Ugh. I really hope it doesn't come down to that. The Microsoft websites seem to imply that the 8-bit indexed to RGBA PNG modes work. I've converted my graphics using pngquant (http://public.planetmirror.com/pub/png/apps/pngquant.html) to 8-bit indexed to RGBA. It looks great in FireFox, and I'd love it if you guys could check it out in IE.
As far as I can tell, its not possible to author this style image in the Gimp, but pngquant does a fine job, especially since these small images don't need dithering.
Attached is a new copy of the above .tar file with both the original (.png) and quantized (-fs8.png) files. The frames.inc currently reference the -fs8.png files, which are the indexed versions with alpha.
Here is an okay test page for PNG transparency support:
http://public.planetmirror.com/pub/png/pngs-img.html
Steve
Posts: 8601
just out of curiosity, what's the drawback of using gif images? gif transparency is supported by all the browsers, right?
Posts: 113
Uh. No, the Microsoft website doesn't imply that 32-bit RBGA (Red+Blue+Green+Alpha) images work in IE/Win. In fact, it's the opposite. 8-bit PNG images work in IE/Win, but RBGA images "only" work in Firefox, IE/Mac, Opera, Safari, and KHTML-based browsers - the only browser that doesn't support 32-bit PNGs is IE on Windows. The Microsoft suggests a *workaround* using AlphaImageLoader, which as I already mentioned above, is what we would use from the JavaScript, and which doesn't (afaik) work on background images.
.GIF transparency is the same as 8-bit indexed .PNG transparency.
32-bit PNG translucent effects are what allow shadows to look nice on any bakground/pattern, because they "fade" the transparency. An image with indexed transparency has only two types of pixels ... transparent ones, and opaque ones. There's no "fading" or translucency with them. So you have to know what the background colour is before you try to fade a shadow in to a background colour. If you use a white background to create the shadow, then save it as an indexed transparent image and load it on a red background, the shadow would appear over a box of white, not over the red background.
Posts: 808
With the new IE 6 with XP SP2 doesn't it give a warning about when sites use Active X or am I thinking of something else.
Posts: 113
Erm, you're right. I meant to say DirectX - specifically a built-in DXImageTransform style filter. See http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp
Posts: 21
No, its not. I'm getting tired of this discussion and what I'm interpreting as your condescending attitude. PNG files *do* support 8-bit indexed color modes with alpha, and they are NOT RGBA 32-bit files. Yes, this is different than single-color transparency, and yes, I know the difference, and no I don't need a lesson in graphics file formats.
After reading this post (http://support.microsoft.com/default.aspx?scid=kb;en-us;265221) I had a small amount of hope than IE would support the 8-bit indexed mode with alpha. The attachment from my last post contains those files for someone with IE to try out, or you can visit my gallery directly.
Anyway, thanks for your time. I'm just going to wait for whatever new theme system you guys come up with, and I'll just make my own graphics in that system.
I just hope that its not polluted with lots of MS-specific Javascript that will be obsoleted when MS finally adds real support for alpha-blended images.
Steve
Posts: 7994
Hey Steve, please don't give up on us just yet! CSpotKill is new to our community and we're still teaching him how to be a grown-up. He's got a ways go to yet on that front.
One of the biggest problems with Gallery2 development is that we have not had enough user interface oriented people involved with the project. I'm good at building frameworks, but I don't have the talent or inclination to do good user interface design, nor have I invested the time into learning about all the different browser issues and pitfalls. We need all the help that we can get in making the best possible theming system for Gallery 2 and from the level of expertise that you've demonstrated in your last few posts I am sure that you can help us out by continuing to give us good advice.
From the PNG test page that you linked earlier, I see that IE6 supports 255/alpha and 256/alpha PNG images (although the test images have lots of speckles so maybe they won't look as nice as other rendering techniques).
I, too would like to avoid doing crappy hacks as much as possible. I'm pretty sure that CSpotKill would like to avoid it also. Let's see if we can work together to come up with the best solution. I have to rely on you guys to keep discussing it and come to a decision (and hopefully educate me in the process
)
P.S. Munch's Oddysee was a blast!
Posts: 2
I run into an interesting browser issue with Slacy's frames (and a design I'm working on, and several of the default frames). When using Safari or OmniWeb (Mac OS X, both based on the WebKit engine), designs that utilize the LLT, LLB, RRT, RRB graphics don't draw the LL or RR graphics at all, or (I'm fairly sure) the LLB or RRB. With Firefox or Camino (both Mozilla), the frames show up perfectly.
If you have a chance to try one of these browsers, point it to Slacy's gallery or www.r-blog.com/gallery2/ . I'm trying to replicate the appearance of www.r-blog.com/gallery/ .
Thanks, guys.
Ryan
www.r-blog.com
Posts: 8601
yes, i've noticed this in safari but i spent so much time on getting imageframe to work as well as it does i gave up. if anyone knows why safari doesn't like imageframe let us know.
[url=http://cvs.sourceforge.net/viewcvs.py/*checkout*/gallery/docs/dev/g20_imageframe.html?rev=1.3]here[/url] is a document about how imageframes are constructed.. i designed it so the sides of the frame aren't rendered at a specific size.. ie, if any page used javascript to resize the image inside the frame, or change it to a different image with a different size, the imageframe will resize with the content.
i'm sure we could make it work with safari it we dropped that ability..
Posts: 33
so what's the word here? how can I get png transparencies to work with ie? I'd like to use the shadows frame but don't know how to get it to display correctly in ie.
Posts: 378
Wait for IE 7. I've read somewhere that this feature is in the list of enhancements for the next major release of IE... ;-)
Posts: 32509
even if IE7 supports it (and they announced better css2 and png transperency support), we can't rely on it. it will take another 2 years until the majority of IE 4/5/6 users will have upgraded to IE7.
Posts: 33
agreed. I know the color of the background that these images will be displayed on. I think that I will just change these transparent PNGs to GIFs and hack Gallery to work correctly in IE......the most popular browser on the planet for some reason.......
Posts: 21
I've finally switched to G2RC2, and the above link is now broken, because I've put my gallery here:
http://slacy.com/gallery
Drop Shadow and Drop Shadow Stack are still going strong, and look acceptable from both IE and Firefox. IE just doesn't actually show the shadows, while Firefox does.
Posts: 1
Doesn't work at all on Opera 8.51.
Posts: 808
Since your using solid background colors why don't you just use jpg and have the background color the same as the site like I did on my site.
Posts: 21
Well, because the backgrounds actually aren't all the same -- the top page has a grey background from the Classic theme, and others have a grey background from Matrix, but the actual pictures themselves are on a white background.
Also, because if I decide to re-color or have per-gallery colors on my site, I don't want to have to reauthor all the images. Oh, and this is the "elegant and correct" solution.
Posts: 21
Oh, and also, because I can provide DropShadowStack to anyone who wants to use it, irrespective of what background colors, texture, or configuration they're using. This is very useful for people who don't own PhotoShop, or don't want to learn The Gimp.
Posts: 6
Beautiful Work!!!
Posts: 19
I've got an "alternative" version of the drop shadow/stacked shadow type of frame on my website... built with Photoshop layers/Imageready slices. It doesn't support transparent alpha-channels (since IE doesn't anyway). It really couldn't be easier to change the background to match your application, however. 4 Steps:
1. Open in Adobe Photoshop
2. Change the background layer color
3. Open in Adobe ImageReady (slices are already defined in PSD file)
4. Save as HTML
This gives you a directory with all of the slices you need to drop into the imageframe folder. Same goes for the stacked frame. I can provide the two PSD files, if desired.
In action:
http://gallery.waun.net
Posts: 21
Every once in a while, someone finds this thread and asks where they can download the frames, so here ya go:
Download this file: http://kleinlacy.com/dropzone/drop_shadow_frames.tar.gz
It contains 2 directories: drop_shadow and drop_shadow_stack. Put these in gallery2/modules/imageframe/frames and they should appear in the UI automatically.
I'm on gallery 2.2, so I'm not sure if this works with more recent versions or not.
Steve