Pouët logos with transparency issues
category: gfx [glöplog]
elend.jpg, daxx_pouet2009.jpg, bu_crap.jpg
->
Yep, colour to alpha is the key here. Still I wanted to get closer to a perfect result and did the following:
* duplicate layer
* erase the top layer
* use the colour-to-alpha tool on the bottom layer
* since the previous step often makes parts transparent that aren't meant to be, manually un-erase those bits on the topmost layer that shouldn't be transparent
* merge the topmost layer down, and done!
Or this variant of above method:
* duplicate layer
* use the colour-to-alpha tool on the bottom layer
* copy the alpha channel from the bottom layer to a separate image
* create a black layer on top in the separate image, set blend mode to "screen", paint those bits white (in the transparent layer!) that should be opaque while they aren't really in the bottom layer
* once that's done, copy the topmost layer of the separate image to the alpha channel of the topmost layer
* merge the topmost layer down, and done!
* duplicate layer
* erase the top layer
* use the colour-to-alpha tool on the bottom layer
* since the previous step often makes parts transparent that aren't meant to be, manually un-erase those bits on the topmost layer that shouldn't be transparent
* merge the topmost layer down, and done!
Or this variant of above method:
* duplicate layer
* use the colour-to-alpha tool on the bottom layer
* copy the alpha channel from the bottom layer to a separate image
* create a black layer on top in the separate image, set blend mode to "screen", paint those bits white (in the transparent layer!) that should be opaque while they aren't really in the bottom layer
* once that's done, copy the topmost layer of the separate image to the alpha channel of the topmost layer
* merge the topmost layer down, and done!
btw that big pink one is called "bull_crap_wip_inprogress_bad.jpg". I dunno who made it but i like it.
Heh, easy one :P
Tough one :/
pouetlogo02.gif
pouet_ja.jpg; its looks depend very much on the #396ba6 background. ;)
if you post the original image as well you can see when i replaced it
Oh and of course I'm taking backups.
Not really a perfect job. It only looks correctly on blue backgrounds.
Works fine on most backgrounds, except very dark ones.
Gimp: Colour-to-alpha + a copy of the original image on top, first erasing everything on that (delete key), then selectively un-erasing with alt+eraser. The channels dialog is nice too - disabling all channels but opacity makes it easier to preview the opacity itself.
I hope the logos are also pushed through PNGGauntlet or some comparable tool before they are being replaced.
Another one to fix:
(dbrn.gif)
(dbrn.gif)
Saga: nah but I can do that later manually.
Quote:
I hope the logos are also pushed through PNGGauntlet or some comparable tool before they are being replaced.
Ran mine through PSP's internal "optimizer" (which is not doing that much) and the overall effect of those PNG crunchers is borderline negligible. Some quick testing revealed way over 90% of the original size.
(then again, some of what people post here is in the ~50% range, so you could indeed save a bit of bandwidth here and there...)
tomaes: More often than not, they can shave off up to 10%, which is a whole lot of traffic if you consider how many logos per second are being served on pouet.
What saga said
There's 42MB of logos vs 1.3GB of screenshots :)
rto20132.png
pouet.jpg
How about converting to BPG to save bandwidth?
See http://bellard.org/bpg/
Doesn't need any browserplugins, decoding is done using JavaScript (gziped decoder is 72kB)
See comparison PNG and BPG with alpha channel
See http://bellard.org/bpg/
Doesn't need any browserplugins, decoding is done using JavaScript (gziped decoder is 72kB)
See comparison PNG and BPG with alpha channel
Might be cool to serve up logos as inline SVG or external SVGZ every once in a while.
jazz tip: You can inline embed SVG with bbcode. animations work. scripting or sound does not.
jazz tip: You can inline embed SVG with bbcode. animations work. scripting or sound does not.
Code:
[img ]data:image/svg+xml,<svg here>[/img ]
Flash.