Welcome to Typophile
Please Sign in.

Text in Images

Primary tabs

9 posts / 0 new
Last post
Robert Kidd's picture
Offline
Joined: 8 Jan 2015 - 5:52am
Text in Images
0

I am creating a grammar test online and I want to have the questions in .gif format and the answers in .gif format to help prevent copying (please don't focus on this. I am aware of the difficulties) I have a monitor with screen res. of 1920 x 1080. I selected Arial Black, 16 pt as the text to use because it is clean, clear and bold. I use Fireworks and create a 700px x 72px, 300 DPI canvas and placed the text on this canvas and saved it as a .gif image. I have to create close to 4,000 of these images. All are the exact same dimensions and the same format etc. I have two questions:
1) Can this be automated somehow?
2) How do I manage to make the images readable on all monitors? One of the people I contacted about creating these for me said the font size I chose (Arial Black 16) would not allow even one line of text on a 72px high canvas . So, what looks good on my screen looks bad on his. (I think this only applies to the text and that once the image is created, that issue will not pop up because the image and text will resize proportionately. What is the best way to go about finding out the optimal font size and image size to use for display across varying resolutions. (The images need to all be the same size and the text all needs to be the same size, type etc.)

Nick Curtis's picture
Offline
Joined: 21 Apr 2005 - 8:16am
0

Random thought: have you considered rendering the text as a Scalable Vector Graphic?

James Michaels's picture
Offline
Joined: 6 Mar 2010 - 12:54am
0

One of the inherent problems with designing for computers is that monitors vary in size. A Google search will find statistics on the most common sizes. You'd want to make it readable on the smallest common size monitor.

When you say "image", is it text on a solid color background, or is there an actual image behind the text? GIF is bad format for photos and some other types of images.

Bert Vanderveen's picture
Offline
Joined: 13 Jun 2004 - 8:19am
0

Why not use a pdf-form? Pdf is scalable, so that should solve most of the issues.

Joshua Langman's picture
Offline
Joined: 14 Nov 2010 - 12:22am
0

Or .svg, which is like PDF for the web.

Just make one huge multi-page InDesign document and export the whole thing to your format of choice, all at once. Each page will become a separate image.

Cory Maylett's picture
Offline
Joined: 18 Jan 2007 - 1:11am
0

Will this be web-based?

You know, there are easy ways using Javascript to disable text copying for individual web pages. People could still open the source code and copy the text (along with a bunch of coding), but really, most people wouldn't know how and, anyway, it would likely be more difficult than simply retyping the text from your images.

If you're sure that you want to go the 4,000 images route, I'd do as Joshua Langman suggested and build it all in InDesign using master pages, then export each page as an optimized PNG (I'd use PNGs, not GIFs). SVGs could work too, but my version of InDesign (CS 6) won't export to SVG (not sure about the CC version).

Using the right HTML/CSS coding, the images will get smaller as the display window decreases in size. You can also set up media queries in HTML that will custom format what a user sees based upon the resolution of his or her display.

Of course you need to know how to do all this, but it's doable. The hard part would be the tedious task of preparing 4,000 pages.

James Michaels's picture
Offline
Joined: 6 Mar 2010 - 12:54am
0

Is a grammar test going to be a big target for thieves? I've worked on education materials posted online before and usually they just post a strong message that copiers will be prosecuted.

Reynir Heiðberg Stefánsson's picture
Joined: 19 Nov 2010 - 11:15am
0

If this is browser-based, as it sounds, drawing the text onto a canvas with Javascript might work, too; something like Typeface.js or Cufón. After all, who is saying your would-be thieves wouldn’t just OCR any images?

Also, scrambling the Typeface/Cufón font (like putting the 'A' glyph into the '2' position and the 'a' glyph into the 'j' position) turns it into a substitution cipher, and typing up the text is much quicker than solving that.

Cory Maylett's picture
Offline
Joined: 18 Jan 2007 - 1:11am
0

Speaking of Javascript again, I mentioned previously that it can be used to prevent copying text directly from the browser window. It can also be used to obfuscate the text in the underlying source code, just in case someone thought they'd copy it from there.

For that matter it would be possible to obfuscate the text on the fly using a server-side language, like PHP. Plain text would be entered into the database through whatever CMS was being used, dynamically obfuscated as the data was queried, served, then deobfuscated using Javascript on the client machine. Of course, it wouldn't be 100% secure, but it would be just as difficult and inconvenient to circumvent as grabbing text from a from a bunch of images. I'd also take measures to hide the test itself from being crawled by search engine bots.

It would take a bit of scripting, but it would be easier and a whole lot more flexible than creating 4,000 static images.

Have you considered hiring this out to a developer or UX designer? I'm concerned that you're doing things the hard way and heading in a direction that will produced a cumbersome and less-than-ideal solution to your problem.

Of course this is a typography forum, so back to that... You mentioned Arial Black as your typeface choice. I'd need to see the context in which you're using it, but it likely wouldn't be my first choice. I mean, it's sort of on the thick and bulky side of things.