How to create a custom download-able image for my customers?

July 1, 2009 11:20 AM

How to I create a free download of an image with text on it? The text is a poem and I would like people to be able to enter a name to it then download the whole thing so they can print it as an image.

I want to offer my customers a free image that they can use on their desktop or print out at hi res for free. It is going to be a poem about their pet on a background image. I want them to be able to enter their pet's name into the text then print out (or download as wallpaper) so that the final outcome is a hi res, frame-able, image with a poem about 'their' pet superimposed on top. (if I have to leave out the customization, so be it, but I think it would be wonderful.)

I don't know:

1: How to create a link to a hi res downloadable image

2: Zip or PDF? Something else?

3: How to have it so that they can add their own pet's name to the poem?

I do know: photoshop, html, can copy and paste javascript a bit. I understand that the printable photo and wallpaper may be two different things, I can go with either or both. Just leaving options open. I am on a mac.

If there is anything prefabbed that I could use, that would be wonderful. Even suggestions on terms to google are welcome.

(at minimum, I would like to know how to just have the image as a free download)

posted by Vaike to computers & internet (4 comments total)

Do you have a website where you can host the image?
posted by ocherdraco at 11:29 AM on July 1

This looks like a job for inkscape and imagemagick - these are programs that can be used from the command line on a server (this means they are 100% automatable). Inkscape can render an svg document into a png with a transparent background - an svg is just an xml file, so you can easily use your scripting language of choice to fill in the pet's name in the template, with the font and color and size pre-selected. I would put the entire poem into the svg, and then substitute in the pet's name, inkscape will take care of the text flow. Once you have the png with the transparent background, you can use imagemagick to composite it on top of the base image.
posted by idiopath at 11:29 AM on July 1

As to making it a free download, my original answer presumed that you would have to have your own hosting with the ability to use cgi and server side scripting (in order to make the image manipulations happen). Once you have hosting, making a free download is easy, charging for a download is the tricky thing. It may be possible to have the rendering done client side with some DOM manipulation and the javascript canvas object, but the quality would probably suffer.
posted by idiopath at 11:33 AM on July 1

Hey, sorry to be doing so much thinking out loud in your thread, but this is really my final answer: inkscape can do the compositing, so there is no need to use imagemagick, here is the step by step:

The image will not be part of the svg file, but rather a seperate file referenced by it (kind of like an image on a web page), so make sure you put it in an easy to find predictable place (probably the same directory as the svg is best).

Using the inkscape application, import your background image using the File->import bitmap menu item, use the text tool to set up your font, size, outline, flow area, etc. and put your poem on the image.

If you open up the svg file in a text editor, you will see it is xml, which will be very familiar if you know html. You will want to scan the file for the part where the poem's text is stored.

The next part I cannot tell you how to do in as detailed a way: you will need to
a) generate a modified version of the svg file with the pet's name altered
b) do a system call to turn the svg into a png, the command line will be inkscape -f <svg-filename.svg> -e <png-filename.png>
c) generate a web page providing a link to, or embedding, the generated image

You could do this last part with java, php, ruby, any server side language that can do cgi and do shell command system calls (ie. pretty much every programming language people actually use these days). The decision will pretty much come down to what language the programmer willing to do a couple of hours work for you is familiar with, or which language you want to spend a week or to learning.

For testing this, you will most likely want to install apache, which is free and open source and what most of the web is using anyway. The details of integrating the dynamic server side part of what you are doing and apache vary between the different languages, but is not hard. If you get a programmer to do a couple hours of work to set this up for you, she will probably already have apache.

Once you have everything working, you purchase hosting, and upload all the necessary files, and hope that people do not download so many images that you go broke on your bandwidth bills.
posted by idiopath at 11:58 AM on July 1 [1 favorite]