Here's the idea: Make it easy to create a very customized card for our game. Here's an example of one such card.
What did I do to create this card? Well, obviously many areas of the card have been customized, and the whole thing has been colored specifically for Sira. More details after the break - all the images here are from my card setup and templates, but it's pretty easy to customize.
Note that it was a bit tricky to get decent image quality for the web while not making huge files, up until I realized I'd chosen a poor format to use. All of the base stuff is in a vector format, so any low quality images here are just my choice of resolutions, etc.
What did I do to create this card? Well, obviously many areas of the card have been customized, and the whole thing has been colored specifically for Sira. More details after the break - all the images here are from my card setup and templates, but it's pretty easy to customize.
Note that it was a bit tricky to get decent image quality for the web while not making huge files, up until I realized I'd chosen a poor format to use. All of the base stuff is in a vector format, so any low quality images here are just my choice of resolutions, etc.
First, I built a set of templates for different styles of cards. This is just some things to use as a base to create cards off of, here's my current three templates:
Action Card
Skill Card
Stat Card
That's what the templates look like, but the actual important parts are in how they are arranged. Here's a look at all the layers for a single template - the action card:
Each item in the layer has some number of key:value pairs.
| Key | Value |
|---|---|
| Info | Used for extra info about the card. |
| Name | Name of this element. |
| Path | Indicates that this element has important geometry. |
| Guide | This element is a guide, the value indicates type (center, bounding box) |
| Element | Special element: for these templates, RangeIcon, ActionIcon and TextArea are handled specially. |
| SText | Static text element, doesn't get changed. |
| Text | Text element that may get customized by the scripts. |
| Style | List of style 'names' to be applied to this element. The customize step lets us pick what graphics styles these are. |
| Color | Color names to be applied to this element. (S) indicates stroke color, (A) indicates area color, (B) for both. |
Now that we have templates, we need a place to put them. This file is one place we could use them, it's got labelled guide layers (R1C1, e.g. row 1 column 1, etc, and it's placed them so that I can print out 8 cards at once to our printer's usual area.
Now we pick out a template to use for our new card.
Then we pick where we want to place the new card.
And now we have a new blank card in the right spot!
Recap: We now have a new card positioned on our canvas, but it's pretty much had nothing done to it - all those tags from before haven't been used yet (well, except for helping retrieve the template name). So our next step is to actually customize the new card.
1 comment:
One comment re: blog layout and displaying these posts right. It should now show up correctly via RSS (had to adjust a few things), but I have seen one issue with text sizes: If you're viewing with text size zoomed [but not images], it can fail on layout because the text boxes don't get resized well - so they go over/under the images. I first saw this on Firefox (thanks Damien!) and there's an option to toggle it between scale text or entire page. The latter works fine, I'm not sure how to handle a text-only scale. Ideally I use floats and stuff to avoid it, but part of the reason I switched to the Illustrator .css export was to avoid messing with that headache. Anyways, any suggestions are welcome, and if you have problems with how it does layout, let me know - the only exception is if it's a width thing, I know that it won't display some posts well on a mobile device that can't do 900 px width - the normal blog stuff should do fine though [I think?], just image/layout heavy ones should have that problem.
Post a Comment