Can someone please tell me how they do this?

[noahgelman]

I have no idea how they do this. Can someone explain?

http://www.redbubble.com/products/configure/4730711-poster

Click on the different categories, greeting card, matted print, poster, etc. They seem to be warping the original image in a certain way, adding it to another image, and then generating a new image on the fly. What kind of system do they use to do this kind of thing? Is it purely from scratch or is there something else like this?

[TheDoc]

There are lots of things like this available – certainly doesn’t need to be from scratch, although this most certainly could be.

I don’t know how to word it though to help you in search, but JQuery is certainly usable here.

[noahgelman]

Well, how do they warp/stretch the images? I supposed that would be the biggest thing. The rest I think I can mimic

[jfreehill]

Something like that could be done with a combination of CSS transforms and height/width properties and/or JavaScript, as you can explicitly set the height and width of images and they’ll stretch however necessary for example: or using classes/ID on the image tag: img { height: 500px; width: 9050px; }
But, being that the images appear to actually be saved with the art overlaid, I’m willing to bet that they’re using some kind of server side technology that automatically does this for each uploaded piece of art. Well that or they do them all by hand, which is certainly possible.

[noahgelman]

@jfreehill, yes, stretching the images is easy, what I was asking is how they warped them. On the Cards and Poster options, the images aren’t rectangular.

[cpj238]

Looks like to me that they have a cut out, and just overlay it on top of the rectangle image, and it “appears” wrapped when it is smooshed into one image. We do something close to that here in ColdFusion, so my guess is they are using PHP or something of that nature.

[noahgelman]

Ah, I see. Looking closer it’s not actually warped at all. You’re right, its just a cut out put on top of the image and smushed together. Browsing a couple images, I did some measurements, and they’re not warped at all, it just looks like that.

Thanks a lot everyone!

[Author]

Posts