Web-based icon generator (can it be done??)

GirlCalledBlu

Out of curiosity, has anyone tried to create a web-based generator for icons for wiki consumption? I'm flirting with the idea, but wondering if it is an reasonable project to tackle. Up to this point, I have just had Staff responsible for creating icons, but I'm designing wiki's for games where I'm a player, and am curious about how to streamline the process of creating icons with multiple layers and unique fonts.

surreality

@GirlCalledBlu There are some web pages that will crop/resize and similar, but I'm not sure if they can do that kind of compositing. I haven't checked for that specifically.

You might be able to do something with the formatting for the icon css-wise, though, if you're willing to tinker some or crop some icons to a specific size?

I ended up doing a few things that are a little quirky for a recent design, but it required a few hoops to jump through on the initial setup. It doesn't create a single image like the wikidot icons tend to be, but the end result is similar. Mediawiki can be smacked into handling the over all formatting to transplant it elsewhere in the way an icon would or in the places an icon would be; wikidot should be able to do something similar. The initial setup is a pain in the arse, but once that's done, it's only a matter of 'crop the image to a specific proportion', which can be done from the various crop/resize websites in a pinch?

Will PM the link to an example, since the site isn't ready for prime time yet.

Karmageddon

Are you looking for something like Pixlr Editor?

GirlCalledBlu

@surreality said in Web-based icon generator (can it be done??):

I ended up doing a few things that are a little quirky for a recent design, but it required a few hoops to jump through on the initial setup. It doesn't create a single image like the wikidot icons tend to be, but the end result is similar. Mediawiki can be smacked into handling the over all formatting to transplant it elsewhere in the way an icon would or in the places an icon would be; wikidot should be able to do something similar. The initial setup is a pain in the arse, but once that's done, it's only a matter of 'crop the image to a specific proportion', which can be done from the various crop/resize websites in a pinch?

I secretly hope Wikidot can do this. This would solve my problem with some character pictures being too oddly shaped for the character information box (i.e. the ideal shape is a 300x300 pixel square).

I'll take a peek at what you sent me.

Lotherio

@GirlCalledBlu

Tried tying the image snippet on an include, formatting the snippet size on the include, with players defining the file location?

Or putting image box snippet on a template somehow?

Bobotron

@GirlCalledBlu

You can use CSS to manipulate the pictures, so if they have some base size that's default (you can link to a clipper if necessary), people can upload and layer via CSS. I am testing some of the CSS picture layering and finding it to be difficult, but not impossible.

http://hotbmush.com/wiki/Riley_Kauffman, the main pic on the infobox is two pictures layered.

GirlCalledBlu

@Bobotron, I love what you did with the wax seal. That is a real neat idea. I didn't look at the code, but did you use like a div layer?

Bobotron

@GirlCalledBlu
I'm glad you like it. I wanted to do it at the bottom-right of the image, but it wouldn't work reliably. It took forever to get it to line up, and it uses/requires two pieces of code.

First is a div which defines the position; in this instance,

<div style="left: 90%; top: 10px; position: absolute">[[File:House {{{house| }}}.png|130px]]</div>

And the other is a neat little bit of CSS code on the template, which forces images to resize to the container, based on the screen's information. It has prevented a LOT of overflow/overlap issues on the infoboxes.

{{#css:
  img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
}}

That last bit goes at the top of the template, it populates to any page using the template, and forces the automatic resizing. It works well, I tested it on my big laptop screen and my smaller tablet screen and it worked nicely.