Badges

[DeltaAro]

On 9/13/2022 at 8:46 PM, roboticanary said:

also invision seems to like images ending up as png, so for something that will only be used as one tiny size i dont think it will need to be vectorised.

I don't know the Invision admin area. But the the shield / hand icons are FontAwesome glyphs (this font is loaded into the browser). So they're definitely vectorised. Don't know how easily they can be replaced.

Also on the Invision board, you can check that they use SVG badges there. So it seems possible without Invision converting them to PNGs.

Of course, the SVG files I upload are Inkscape SVGs with some peculiarities and should preferably be opened with Inkscape and exported again as a plain SVG.

PS: This board is now overflowing with frogs... I'm slowly starting to doubt that this was a good idea... 😉

Edited September 17, 2022 by DeltaAro

[roboticanary]

1 hour ago, DeltaAro said:

I don't know the Invision admin area. But the the shield / hand icons are FontAwesome glyphs (this font is loaded into the browser). So they're definitely vectorised. Don't know how easily they can be replaced.

Also on the Invision board, you can check that they use SVG badges there. So it seems possible without Invision converting them to SVGs.

Of course, the SVG files I upload are Inkscape SVGs with some peculiarities and should preferably be opened with Inkscape and exported again as a plain SVG.

ok, thank you. i think ive worked it out and might take a look at using svgs again tomorrow. what happened is that the badges still needed to be equal dimentions and i messed that up with the vector images then for some reason my brain went 'oh, that must not work'. so instead i sized them as vectors as close as i could to how they show on the forum then converted. still looks a lot better than it would if they hadnt been vectorised but now i know i can i reckon i could do better.

the only thing that cant be vectors are the emoji ones.

[DeltaAro]

10 minutes ago, roboticanary said:

So it seems possible without Invision converting them to SVGs.

ooops, I meant "without Invision converting them to PNGs", of course. 🙃

[Nix]

21 hours ago, DeltaAro said:

This board is now overflowing with frogs... I'm slowly starting to doubt that this was a good idea... 😉

 

What frogs?

Anyway, I made some hand and shield designs. What are your thoughts? 

[DeltaAro]

3 hours ago, Nix said:

Anyway, I made some hand and shield designs. What are your thoughts? 

I like the middle shield in the lower row the most. It will probably still look good as a small icon.

I also did one, already SVG.

so in smaller sizes:

 

I got a bit carried away and the SVG ended up too complex. I can simplify it a bit and at least remove the wood grain.

The frog hands IMHO should look like this:

[DeltaAro]

PS: simplified version (removed grain + removed some nails + removed transparency of the paint):

124 x 135 px (no anti-aliasing):

531 x 571 px (with anti-aliasing):

[Nix]

1 hour ago, DeltaAro said:

PS: simplified version (removed grain + removed some nails + removed transparency of the paint):

124 x 135 px (no anti-aliasing):

531 x 571 px (with anti-aliasing):

I really like this one, at first glance I thought there was a small face at the top and it looks so dapper :)

1 hour ago, DeltaAro said:

The frog hands IMHO should look like this:

Those read a lot better then mine, let me see if I can work that in

[Nix]

Alright, I used Photoshop to make an SVG. Bit choppy but you get the idea.

[The Gray Warlock]

[roboticanary]

hmm, what do people think about adding some of these to the site.

I'm thinking @Nix 's frog hand for new members and @DeltaAro's simplified shield for the moderator symbol and i could get that sorted this weekend.

[DeltaAro]

15 hours ago, roboticanary said:

I'm thinking @Nix 's frog hand for new members and @DeltaAro's simplified shield for the moderator symbol and i could get that sorted this weekend.

Well, this was just a first attempt, so if you have any ideas...?

Otherwise I probably would want to simplify the shield even further. I mean the space for the icon is really tiny.

[roboticanary]

2 hours ago, DeltaAro said:

Well, this was just a first attempt, so if you have any ideas...?

 

sounds good, what i can do is try each one and get a screenshot of what it looks like, then we can see if anything wants changing. I'll try that out

[roboticanary]

well that was fuckin fantastic

i may need some time to work out what i actually need to change

[Nix]

1 hour ago, roboticanary said:

well that was fuckin fantastic

i may need some time to work out what i actually need to change

Wel at least it is REALLY clear whenever a moderator responds 😅 (And no rush, take your time)

[DeltaAro]

On 9/24/2022 at 11:15 PM, roboticanary said:

i may need some time to work out what i actually need to change

Again, the shield is embedded via a :before CSS rule, which then links to the Font Awesome Unicode char f132.

If you haven't found a switch anywhere, this behavior is probably hard coded. So realistically you can only use a different Font Awesome char (by editing the CSS, which should most likely be possible):

Edited on the fly with browser developer tools.

But .... for a reason I don't understand, Invision doesn't have the full Font Awesome. The full FA set has at least some nice frog-related icons we could use, e. g. a pompebled. 🙁

 

[roboticanary]

5 minutes ago, DeltaAro said:

Again, the shield is embedded via a :before CSS rule, which then links to the Font Awesome Unicode char f132.

If you haven't found a switch anywhere, this behavior is probably hard coded. So realistically you can only use a different Font Awesome char (by editing the CSS, which should most likely be possible):

I think you are right.

what i can do though is hide that symbol for mods and use the mod icon underneath the word moderator, but resize that to ~ the size of the shield icon so it doesn't look silly

cant seem to do anything for the newbie symbol though. may be hard coded but i could probably hide that too even though i couldnt add a new frog hand.

[DeltaAro]

22 hours ago, roboticanary said:

what i can do though is hide that symbol for mods and use the mod icon underneath the word moderator, but resize that to ~ the size of the shield icon so it doesn't look silly

Would it be better to use a broad badge with an aspect ratio of like 5:1 for moderator / newbie instead of a 1:1 icon like the shield?

[roboticanary]

2 hours ago, DeltaAro said:

Would it be better to use a broad badge with an aspect ratio of like 5:1 for moderator / newbie instead of a 1:1 icon like the shield?

ok, thats a really good idea.

[DeltaAro]

20 hours ago, roboticanary said:

ok, thats a really good idea.

I try to create something this weekend!

[Maryland]

how about a badge for @Arocalypse? or like old old accounts which are no active? 

[roboticanary]

2 hours ago, ArrowAce said:

how about a badge for @Arocalypse? or like old old accounts which are no active? 

arocalypse badge could be done, i can see how to manually award a badge to a particular member, not sure if we should though. i have no idea who even has the details to get into that account, it was well before my time here.

as for other no longer active accounts, i don't know how i'd do that beyond manual awarding which i cant be arsed to do given the number of accounts. its a nice idea but nothing i can see when it comes to options would allow that unfortunately. there might be some other way to show when someone last posted/went online than on their member page which i could have a look at.

[DeltaAro]

On 9/28/2022 at 8:45 PM, DeltaAro said:

I try to create something this weekend!

Yeah... or not, I sadly reached something of a creative roadblock. Honestly, I don't think the shield works or is even recognizable; gonna try the turtle shield again perhaps.

But first I was tempted to create one with a frog:

So this is 50 x 250 pixels. Now Invision seems to upscale this in posts. But you can't get much smaller or you won't recognize anything.

The font uses is the heavy version of Inter, the main font on this website.

Here the hi-res version:

 

[Nix]

8 hours ago, DeltaAro said:

Yeah... or not, I sadly reached something of a creative roadblock. Honestly, I don't think the shield works or is even recognizable; gonna try the turtle shield again perhaps.

But first I was tempted to create one with a frog:

So this is 50 x 250 pixels. Now Invision seems to upscale this in posts. But you can't get much smaller or you won't recognize anything.

The font uses is the heavy version of Inter, the main font on this website.

Here the hi-res version:

 

 

I like it! Maybe if you just write  ‘MOD’ you get more space for the frog? He could be sticking out his tongue to fill the wide 250 space…

I’ll see if I can come up with something too 🤔

[roboticanary]

ok, so this is what that would look like.

There doesn't seem to be a way to remove the white space where the word moderator would sit previously. if i dont do it like that it still has the green moderator text above the word moderator.

but this is roughly what we would be getting.

on the good side, hiding the blue shield icon was dead easy.

[DeltaAro]

11 minutes ago, roboticanary said:

There doesn't seem to be a way to remove the white space where the word moderator would sit previously. if i dont do it like that it still has the green moderator text above the word moderator.

mmh... so first I suppose when we get to such a low resolution, this is pixel art level. We gonna need that precision, because it honestly does not look good anymore when you create it as vector and let Inkscape render it. Even with highest quality anti-aliasing.

If you like the overall idea / design of the frog lord, I can try that. Though I'm also for removing "MODERATOR" from the badge and instead keep "Moderator" as plain text, since the white space looks weird. And maybe I can come up with some idea to make the badge a bit longer.

What do you think would a good max pixel height be? 50 px seems too high, probably 30 px? On the Invision board the badges are 20 x 90 px.