How do you... (I don't even know what to call it)?

[cjordan]

Sorry for the lame subject of this post, but I'm not an imaging guru by any stretch. I just figured that someone here would know how to do what it is that I'm trying to do.

I'm looking at a website that has a custom design tool (http://www.brownjordan.com/econfig/inde ... cutta%20II). It shows a piece of furnature (a chair in the case of the link above) and the manufacturer has all sorts of fabrics that can be used for the cushion of the chair and several colors or textures that can be used for the frame of the chair.

Now, it's not too difficult to see that they've got an image for each possible combination of cushion fabric and frame color, and how they know which image to show.

My question is about creating ALL of those images (in the case of the link above 2,457 images). They're not being generated on the fly I'm pretty sure, but I don't know *how* they were generated.

Is this something that PDN could do? is it just a careful selection and bucket fill? If it's a bucket fill, how exactly do you fill something that isn't a solid color, but is rather a pattern (for the sake of argument let's say paisley or something) that matches exactly a specific textile that my client can apply to the cushion of a chair.

Can anyone help me on how this sort of image is created? Can PDN do the job? Would I *really* have to create each and every image by hand?

Thanks.

[Simon Brown]

You could probably achieve the same effect with transparent PNGs. Create a series of PNGs for each chair frame and another series of overlay PNGs for the fabric with the parts for the frame transparent and have a JS script that changes the images according to the user's selection. Not only will this save work, but also bandwidth.

[atypicalcarl]

Simon's advice is good. (of course)

That's pretty much what the website you mentioned is doing. They're running a program called magiczoom which displays the different pics via jscript and css.

[cjordan]

Okay, so after re-reading Simon's post and Carl's response. I think I had an Ah-ha moment about what he's talking about. I decided to edit my last post rather than create another one.

NOW, I think you guys are telling me that I would have a single image for each chair with the frame filled in appropriately, and the cushion as the transparent bit. Then I would show an image that matched the frame they chose over the top of an image of the fabric they chose.

Sound about right?

Thanks heaps again...

----- original response -----

Simon,

Thanks for taking the time to respond.

I'm thinking about what you said, but I'm not sure how that would work (not the JS part, that I can do), but how to create the image such that this scheme would work.

Do you think you could explain your idea a bit further, and assume I'm an idiot when it comes to the graphical stuff -- which isn't quite true, but it's close :wink:

I understand the concept of making part of an image transparent such that whatever is behind it would show through, but how would that work in this case? I mean, to keep using the chair as an example, the entire thing would be transparent. The frame and the cushion. How would I keep part of the cushion overlay from "bleeding" into the frame bit? Damn, that's not coming out right. I don't think I'm explaining my confusion effectively, but maybe if you can just expand on your idea for me, my confusion will go away. :?

Also, to anyone else reading this, I'm open to other ideas of how to get these images made. I'm not adverse to the idea of having to have a separate image for each possible combination, but want to know how I would *most easily* go about creating those images.

I just saw atypicalcarl's post while I was writing this one. My problem is *not* with the JavaScript and CSS, or with how to display the images or with the zooming. My problem is how to create the images in the first place. That's why I'm posting this question to a group of graphically inclined folks who probably know lots more about image manipulation than I do.

Thanks, heaps!

[Simon Brown]

Does this help.

[cjordan]

It does kinda. Thanks! But I think I'd had my ah-ha moment a bit ago, when I realized that you weren't talking about having both the frame and the cushion be transparent, but just the bit that has the most choice options.

So in the case of the example site I posted, they've got only 21 "chair images" and each one has the frame filled in already, but the cushion is transparent. Then they just have to have a single image for each cushion fabric. Put the chosen frame image on top of the chosen fabric image, and the cushion is the only bit that allows the fabric image to show through.

Right?

I actually, don't think that's what the site I pointed to as an example is doing, because when I use the Firefox Web Developer extension to view all the images I get a single jpg that shows the frame/cushion combination I chose, and not a frame image with the cushion transparent, etc. etc.

But I don't see why this idea wouldn't work.

Thoughts?

[Simon Brown]

Right.