[magick-users] png size (again)

[Anthony Thyssen]

Carl Karsten on  wrote...
| I am making images for a web site, and silly me thought it would be a good idea 
| to use transparency so the image could have a nice shadow. I didn't realize the 
| ramifications of this choice until today.  But here I am, and no one will die, 
| so I am going to try to make the best of it.
| 
| I skimmed the archives, read over
| http://imagemagick.org/Usage/formats/#png_quality, installed pngcrush and 
| optipng, saw the note about pngnq and semi-transparent which scared me away.
| 
| I have been trying this and that for a few hours, currently am using convert ... 
| -quality 90 foo.png; optipng foo.png
| 
| And yet, my images are still 500k to 2mb, and I have about 20 of them, which 
| means someone surfing my site will have to dl about 20mb of images.
| 
| I have not yet started experimenting with things "recommended for small 
| thumbnail images" but will go down that path as soon as I post this.
| 
| What I am hoping for is someone can take a look at the types of images I am 
| working with and give me some "I would use theses options" advice.  I made a 
| page that is just the images, each image being a link to it's master image.
| 
| http://www.chicagomidwestwineshow.com/imgwork/headers/
| 
| Below is the script of convert commands I use.
| 
| Carl
| 
| ps, if you have looked over the page of pictures, you probably get the theme: 
| wine.  I need 5 more.  If anyone has anything I can use on a commercial site, 
| and you or your friends are in Chicago, I can offer up tickets to the event.
| 
| Anthony, if you can make it over here, you have more than earned your admission :)
| 

I am back, and finally had some time to look at your script.

Very well done.  Your script produces some very classy looking logos.


I have few suggestions however.

First...  I would do the rounded corners AFTER creating the gradient
overlay of the two images.

ASIDE: I recently added an example for doing such overlays into IM
examples, though did so before looking at your script.
It should appear in IM examples at
   http://imagemagick.org/Usage/photos/#overlap
in the next day or so.

Second the way you create the overlay involved converting green to
transparent.  This is a bad idea as you essentually create a aliased
on/off masking image to round the corners.  If you look at the corners
of the images you created you can see a distinct staircase type of
effect.

What you want to do is to try and make a smooth aliased mask image.
That is draw either a filled rounded rectangle which is either black on
a white background or white on black.  This you then use to mask the
image using -compose CopyOpacity, so that the smooth looking corners
(involving grey intermediate pixels) are translated into a smooth
corner of the logo (using semi-transparent pixels).

And Third, why you keep the right edge square, I think it make look
nicer of you had rounded corners there too.  This however is optional.


  Anthony Thyssen ( System Programmer )    <A.Thyssen at griffith.edu.au>
 -----------------------------------------------------------------------------
    Millions long for immortality who do not know what to do with
    themselves on a rainy Sunday afternoon.       --- Susan Ertz
 -----------------------------------------------------------------------------
     Anthony's Home is his Castle     http://www.cit.gu.edu.au/~anthony/