3

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.

|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
  • @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
  • By appropriately lined up you mean vertically centered? Or do you need the bottom box to fit to the text, like in Magic the gathering cards? – Yisela Nov 18 '13 at 23:55
  • @Yisela The latter. – Raven Dreamer Nov 19 '13 at 0:32
1

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...)

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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