[Tutorial]Make your own rune icons for Estiah. And more.

[Ventus]

Here is a demostration:
(Those who can read Chinese may find it more `readable' than the original ones...)
  Before/After:
 

It's quite simple.

Know that two images are used for rune icon (as css background):
  Normal-sized ( .rune ):

  Mini ( .minirune ):


Changing them will be enough to make things happen.
(To to that your browser needs the `user styling functionality'.
 If you're using Mozilla Firefox, you can use the extension Stylish or Greasemonkey;
 Otherwise this link might be helpful. )
 
Now it's the details of image editing:
The size of a normal rune icon is 40x40, 4px padding, 1px inner border, 31x31 content image;
The mini rune icons are just 20x20 squares, no border.

The new icon images I made are 32x32 squares, like these:


(Actually it shall be 31x31, I forgot the 1px border at that time. But no matter, I'll change it later.)

Then I use ImageMagick to composite the two mask images I need:
montage icons/*.png -geometry '30x30+5+5' -tile 5x4 -background transparent rune_mask.png
montage icons/*.png -geometry '18x18+1+1' -tile 5x4 -background transparent minirune_mask.png
(The params of the `montage' command above is easy to understand:
 -geometry '30x30+5+5' means that all images will be resized to 30x30 plus 5px borders,
 -tile 5x4 means that we need 5 per row, total 4 rows of these images combined.
  Refer to the ImageMagick manual for more details.
 
  If you're not familiar with the command line, you can always use your favorite image editor to do the job.
  Just remember to make the sizes right.)

Then we get:



Let's make some `modifications' to the original images:



And put them togather:



Now We could use data URI scheme(as in here) or just upload the images to some where and use them, like:

Code: [Select]

.rune { background-image: url(http://bubble-hearth.appspot.com/image/runes/release/rune_comp.png) !important; }
.minirune { background-image: url(http://bubble-hearth.appspot.com/image/runes/release/minirune_comp.png) !important; }
.minirune_null { background-image: none !important; } /* don't forget these two lines, or the default icon will be shown in where no icon shall be shown */
.rune_null { background-image: none !important; }
And load it into our browser (using Stylish, Greasemonkey, etc.).

Thanks for reading. Have fun.

----
Btw, several days ago, I made a `fancy version of estiah's charactor banner', maybe some of you would like to try it.
It's like this:

Just avatar + default banner + hp, sp stats.

To use it, just make sure you have default banner image enabled at here, and than this will be the image:
http://bubble-hearth.appspot.com/estiah/<Your Charactor ID>
(The data of the image will be cached for half a day, so in theory it'll only be 1/2 day outdated.)

----
Sorry for my bad English. Well, you know, I'm new to Earth...

[Nipal]

i'm kinda speechless at this 

(actually the chinese version looks better than the original, the text does look like runes after all ~~)

[Nipal]

btw, if you need raw data for making new banner, you can use http://www.estiah.com/json/character/24509

notice the /json/ param in the url, it allows to export character data in json format which can be easily parsed
and converted in many languages. hope that helps in whatever you want to do lol

[Ventus]

btw, if you need raw data for making new banner, you can use http://www.estiah.com/json/character/24509

notice the /json/ param in the url, it allows to export character data in json format which can be easily parsed
and converted in many languages. hope that helps in whatever you want to do lol

Thanks very much 

However, as Google hasn't added image generation facilities to Google App Engine yet, it will be extremely difficult adding new things to the banner or making a fresh new one.
So I'll just wait...

[Tasak]

json...hmm

Good Job!

[Earendil]

This is very cool.  I'm tempted to break out the old python and do some of this myself...

[Mogul]

Good job.

[Enigma]

Well done! I was just beginning to get used to (and actually understand) how those symbols represent their respective charm classes, but I must say those Chinese characters do look cool too.