Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

Salutations! I have remarkably little experience in graphic design, and I'm running into a tools problem; I am not sure what I can use to get the effect I want. To wit, I am working on mocking up some cards for use in an RPG. Right now, they look like this:

blank RING card

I would like to place some text in the white areas on this card. However, since there are quite a few different cards I am mocking up, I would like to do so in a consistent manner, preferably one that does not involve me having to count pixels to make sure each line of text is appropriately lined up. (If it was only the one card, I'd just wing it)

I've experience using Windows 7 Paint and Paint.net, but as near as I can determine, neither of these programs has the tools to handle such a case consistently. Can anyone offer some advice or point me in the right direction?

P.S. I am aware that there is a "nuclear option", as it were, which would be to write a program and PDF-creation library to dynamically and generically create each card with the input text / colors (I've done something similar at my job), but I think that's overkill at this point, and I'd rather devote time to other things if I can help it.

share|improve this question
4  
My guess would be that Paint and Paint.net are not the correct tools to use. Things like Indesign, Illustrator, QuarkXPress, are designed to maintain a consistent layout through changes. Freeware/shareware apps such as Inkscape or Scribus would be better suited for layout than any "paint" application. –  Scott Nov 18 '13 at 2:43
    
@Scott I understand that. As I mentioned, I have little experience with graphic design, and I'm interested in knowing what options are out there. –  Raven Dreamer Nov 18 '13 at 2:55
    
Depending on what route you take with this, macros could also be of use. There are many ways to do this but I can't comment on which is best, at least not until you've decided what software you're going to use. –  Dominic Nov 18 '13 at 14:07
    
@Dominic That's just it; I don't know what software is out there! Do you have a suggestion as to what I might use? –  Raven Dreamer Nov 18 '13 at 15:52
    
Well macros would probably help in other programs, but here's a much better option: graphicdesign.stackexchange.com/questions/4866/… - You're trying to do the same thing, just with far more text elements. –  Dominic Nov 18 '13 at 17:37
show 3 more comments

1 Answer

up vote 0 down vote accepted

So I've satisfactorily handled this now, and what I found worked best was to use CSS.

If you already have all the visual elements, it's a simple thing to render your image as a composite of HTML <IMG> and <P> elements. Use CSS to make sure all positions are relative within themselves, and you're good to go!

A little bit of Javascript and CSS can go a long way!

enter image description here enter image description here

(PS: Next step -- figure out how to add black outlines so I don't have white text on a yellow background...)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.