Skip to main content

Tool to generate images in batch processing

14 replies [Last post]
tsinger
Offline
Joined: 2003-06-10

Hi,

Good UI design forces to use the same symbols everywhere.

Simple example: a user manager might need an icon for adding, editing and removing users. Typically these icons have an user-symbol and an badge for adding (e.g. a plus-sign), editing (e.g. a pencil) and removing (e.g. a minus-sign). Around these batches there must be transparent area ("halo") to make the final icons look good.

Now imagine the situation, that the user-symbol needs to be changed. Doing this in all graphics where it is used, can be a very time-consuming task.

Does anybody knows a tool, that can generate icons by batch processing, so only the user-symbol needs to be changed and -- voila -- all icons are generated?

Tom

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
tsinger
Offline
Joined: 2003-06-10

[i]For the result using the images, look here: http://uic.sf.net/images/thomas1.png[/i]

This is simple, but I meant to get a "halo" around the top-image. See http://java.sun.com/products/jlf/ed2/book/images/3new16-24.gif (from http://java.sun.com/products/jlf/ed2/book/HIG.Graphics5.html) for what I mean.

Tom

zander
Offline
Joined: 2003-06-13

> [i]For the result using the images, look here:
> http://uic.sf.net/images/thomas1.png[/i]
>
> This is simple, but I meant to get a "halo" around
> the top-image.

If its in your source image, it will be in your resulting image. The button has a gradient; it shows through in the image for a reason. If the png had a halo based on partial transparancy; that would also be visible.
This has nothing to do with the question you asked; it has to do with the quality of the images you provide. Most painters can create images like that nowadays.

tsinger
Offline
Joined: 2003-06-10

> If its in your source image, it will be in your
> resulting image. The button has a gradient; it shows
> through in the image for a reason. If the png had a
> halo based on partial transparancy; that would also
> be visible.

This will only work with [b]partial[/b] transparency, not with [b]full[/b] transparency as required by the mentioned icon-howto.

Tom

zander
Offline
Joined: 2003-06-13

> > If its in your source image, it will be in your
> > resulting image. The button has a gradient; it
> shows
> > through in the image for a reason. If the png had
> a
> > halo based on partial transparancy; that would
> also
> > be visible.
>
> This will only work with [b]partial[/b] transparency,
> not with [b]full[/b] transparency as required by the
> mentioned icon-howto.

Where did you get that from?
It works quite well with full transparancy; see the screenshot I posted...

Again; the source images state transparancy, if your sourceimages have what you need, so does the end result. But I am repeating myself.

tsinger
Offline
Joined: 2003-06-10

Well, after retrying with Java2d and the embedded png-writer I've found a way to draw my icons. If only the fillPolygon(), fillOval() methods would draw correctly... but this is another topic.

And, yes, I need png-files with semi-transparent areas - looks very cool.

Tom

zander
Offline
Joined: 2003-06-13

Why don't you use png images, they allow transparancy in 256 tints; all you need to do is do multiple paints of the diferent images and you are ready.
If you have a problem with performance; try to use a bufferedImage to store the result.

Hope this helps.

tsinger
Offline
Joined: 2003-06-10

Sorry, but it seems I wasn't clear enough. Whether I use gif or png does not matter, both support transparency. The core problem is, [b]how to generate images in batch process using standard symbols[/b]. It's not that simple to paint the standard symbols (user-symbol, plus- or minus-sign) above each other, because the (in z-order) higher symbols need to have an transparent halo in the resulting image to look good.

Tom

PS: BTW, I've tried to use the built-in png-writer, but it does not support transparency :-(

zander
Offline
Joined: 2003-06-13

> Sorry, but it seems I wasn't clear enough. Whether I
> use gif or png does not matter, both support
> transparency.

You requested a 'halo' this needs transparency [i]levels[/i] which png has.

> The core problem is, [b]how to generate
> images in batch process using standard symbols[/b].

I disagree; that is not the core problem, that is a really easy problem to solve. The core problem is how to join multiple images into one.
Ones you got past that part it does not matter wheather you then want to create a scripted method to create these images on disk, or want to join them just before you put them on a button.

> It's not that simple to paint the standard symbols
> (user-symbol, plus- or minus-sign) above each other,
> because the (in z-order) higher symbols need to have
> an transparent halo in the resulting image to look
> good.

Sure, but we can't help you there; use numbers in your filenames to specify z-order, or hire a professional painter are options, either solve the problem.

> Tom
>
> PS: BTW, I've tried to use the built-in png-writer,
> but it does not support transparency :-(

Hmm, I think you did something wrong then. If you have 1.4 you can just put try this code, if you have KDE you will find these images as well; otherwise you have to search for them on the net.

[code]
public class Buttons extends JPanel {
private ImageIcon a, b, c;
public Buttons() {
try {
Image planet = ImageIO.read(new URL("file:/usr/local/kde/share/icons/crystalsvg/64x64/filesystems/network.png"));
Image overLay = ImageIO.read(new URL("file:/usr/local/kde/share/icons/crystalsvg/64x64/filesystems/lockoverlay.png"));

BufferedImage bi = new BufferedImage(planet.getWidth(null), planet.getHeight(null), BufferedImage.TYPE_4BYTE_ABGR);
Graphics g = bi.getGraphics();
g.drawImage(planet, 0, 0, null);
g.drawImage(overLay, 0, 0, null);

a = new ImageIcon(planet);
b = new ImageIcon(overLay);
c = new ImageIcon(bi);
} catch (Exception e) {
e.printStackTrace();
}
JButton pushButton3 = new JButton();
pushButton3.setIcon(c);
JButton pushButton2 = new JButton();
pushButton2.setIcon(b);
JButton pushButton1 = new JButton();
pushButton1.setIcon(a);

add(pushButton1);
add(pushButton2);
add(pushButton3);
}
}
[/code]

For the result using the images, look here: http://uic.sf.net/images/thomas1.png

tsinger
Offline
Joined: 2003-06-10

[i]Hmm, I think you did something wrong then. If you have 1.4 you can just put try this code, if you have KDE you will find these images as well; otherwise you have to search for them on the net.[/i]

IIRC I've said, that the png-[b]writer[/b] seems not to support transparency. I believe, that the reader does.

zander
Offline
Joined: 2003-06-13

> [i]Hmm, I think you did something wrong then. If you
> have 1.4 you can just put try this code, if you have
> KDE you will find these images as well; otherwise you
> have to search for them on the net.[/i]
>
> IIRC I've said, that the png-[b]writer[/b] seems not
> to support transparency. I believe, that the reader
> does.

Then don't write them, just use resuling image.

tsinger
Offline
Joined: 2003-06-10

> Then don't write them, just use resuling image.

Why the application should waste time to build some dozen icons at start time, when it (at least theoretically) could be done at application-build-time? (You know, Swing application's startup time is very frustrating for most users - still with JRE 1.4.2.)

Tom

zander
Offline
Joined: 2003-06-13

> > Then don't write them, just use resuling image.
>
> Why the application should waste time to build some
> dozen icons at start time, when it (at least
> theoretically) could be done at
> application-build-time? (You know, Swing
> application's startup time is very frustrating for
> most users - still with JRE 1.4.2.)

Did you try it? If so, what is the actual delay? (in procent and seconds, if you can)

I dare to bet you have not tried, and I put a beer on it that reading all those extra images from your jar takes just as long, or even longer then painting them in core yourself at program startup!

And to answer your question on "why?", because that is the only solution you have, right now!

kris
Offline
Joined: 2003-06-10

Its a while since someone posted here so I may be a little late with this....

This isn't efficient, but you could do the following to get the halo effect.

[code]
Image background = (new ImageIcon("conf/document.png")).getImage();
Image overlay = (new ImageIcon("conf/arrow.png")).getImage();

BufferedImage image = new BufferedImage(background.getWidth(null),
background.getHeight(null), BufferedImage.TYPE_4BYTE_ABGR);
Graphics2D g2 = image.createGraphics();

g2.drawImage(background, 0, 0, null);

//use dst out to clip to transparent
g2.setComposite(AlphaComposite.DstOut);
g2.drawImage(overlay, -1, -1, null);
g2.drawImage(overlay, 0, -1, null);
g2.drawImage(overlay, 1, -1, null);
g2.drawImage(overlay, -1, 0, null);
g2.drawImage(overlay, 0, 0, null);
g2.drawImage(overlay, 1, 0, null);
g2.drawImage(overlay, -1, 1, null);
g2.drawImage(overlay, 0, 1, null);
g2.drawImage(overlay, 1, 1, null);

g2.setComposite(AlphaComposite.SrcOver);
g2.drawImage(overlay, 0, 0, null);
[/code]

there are other ways to clip the background back to transparent rather than drawing the overlay 8 times to do so - however if this is something that is batched then it should be ok.

zander
Offline
Joined: 2003-06-13

> This isn't efficient, but you could do the following to get the halo effect.

Ehh, the reason I pointed you to use png's above is that the artist can put a 'fade' of transparancy in the image. Software like FireWorks (from MacroMedia) allows your artist to do 'effects' like a gradient shadow, or, like you wanted, a gradient halo.
It will always look better then the one you get like that, assuming the artist is a moderately good one :)