Project S.O.S. — Save Our Smilies!

[TB]

@Jordan - I know the forum software is editing some things when you switch from the light to dark theme. Black outlines on a black background for the smileys looks alright but is it worthwhile to do two versions of the animated ones like the cheers and GTPlanet flag where the arms and flag are white for the dark background?

Maybe just a bit thicker white outline for the flag would do the trick, too.

Edit: Looking at my dopey on my phone, the outline around the teeth should be changed to a dark purple instead of black.

 

[TB]

I didn't see that @Drex124 had already done ill but it was good practice since I installed Inkscape. It's not quite as easy as Figma but I got the sweat drops figured out, at least. 🤣

The svg looks better than that terrible screen capture, I promise!

 

[SomePlayaDude]

I decided to just go with my first censored draft. Looks fine as is, but I can't say the same with the SVG conversion. It's been upscaled 5 times, because the original size is way too small for me to work and also for detail reasons, I guess.

Anyways, I'll upload the PNG just in case someone wants to improve on it.

 

[Sonygamer455]

Dopey

Figma

Created with Figma

www.figma.com

View attachment 1067975

I have to say, these are quite fun to work on!

Looks great! My only thing with it is, why does it have an outline on the teeth when the original didn't? 🤔

@Jordan - I know the forum software is editing some things when you switch from the light to dark theme. Black outlines on a black background for the smileys looks alright but is it worthwhile to do two versions of the animated ones like the cheers and GTPlanet flag where the arms and flag are white for the dark background?

Yes, this is something I have wondered about as well, particularly with the bow down smiley.

You can just barely see his arms and legs in dark mode. It's kind of hard to know what it's actually doing.

 

[TB]

Looks great! My only thing with it is, why does it have an outline on the teeth when the original didn't?

There is an outline, it's just purple instead of black. I'll redo it later.

 

[TB]

I decided to just go with my first censored draft. Looks fine as is, but I can't say the same with the SVG conversion. It's been upscaled 5 times, because the original size is way too small for me to work and also for detail reasons, I guess.

Anyways, I'll upload the PNG just in case someone wants to improve on it.

The gradient on that svg file is kind of funky.

My take on the censored:

 

[Sonygamer455]

here is an outline, it's just purple instead of black. I'll redo it later.

Well, yea, I suppose what I meant to say was why it had a black outline.

Nice! Maybe I am being a bit nitpicky, but the outline of the text on the left and right is a little too thick compared to the original, which was even on all sides.

Just saying.

I would do my own take on it right now, but it's late here and I won't have time tomorrow since me and my family are leaving for vacation.

 

[TB]

Well, yea, I suppose what I meant to say was why it had a black outline.

On the monitor I was using to make it, it looked like it had an outline. Easy enough to edit, though.

Nice! Maybe I am being a bit nitpicky, but the outline of the text on the left and right is a little too thick compared to the original, which was even on all sides.

Just saying.

I was already working on that. Made the text a little taller, too.

 

[Jordan]

Whoa, you guys are doing awesome with these. I'm really busy at the moment but I should be able to get back to work on this tomorrow night and start adding more into the official line-up. 👍

1. Theirs actually 2 Christmas themed censored smilies, one that says "WHAM" as you included in the zip file and then this one

.

Yeah, I don't think anyone has started on the Christmas versions yet, but we should probably have both. We don't technically do "wham" any more (maybe the new one should say "MARIAH"? 🤣) but it's a nice ode to the original song.

2. Don't know if you saw this in my post I linked earlier, but it's a lot of the extra smilies you used to have. Not saying we should do all of them too (though I would love that 😂), don't know if they matter to you anymore, but I figured I'd share anyways.

I was really glad to see that old link. Lots of familiar old faces on that page. We don't need to bring all of them back but there are a few interesting ones on there for consideration. Let's stick to getting our primary line-up updated first, though. We have a lot of challenges still ahead of us.

@Jordan I'm not sure if you're nitpicky like me, but it looks like some smilies created above have varying stroke-widths. For example: @Drex124's cool compared to my wink (not posted) and your smile. I used a 1px stroke in Inkscape.

Yes, that's a good catch, and it's something that will be difficult as we have so many people contributing from different types of software. SVG consistency is hard! I'll be examining each one before I add them but if you (or anyone else) sees something that doesn't look quite right, please point it out. This is a group effort, for sure.

@Jordan - I know the forum software is editing some things when you switch from the light to dark theme. Black outlines on a black background for the smileys looks alright but is it worthwhile to do two versions of the animated ones like the cheers and GTPlanet flag where the arms and flag are white for the dark background?

Maybe just a bit thicker white outline for the flag would do the trick, too.

Yes, it's possible, though it will require a bit of work on my part. At first glance, I'll need to write some custom code for each smiley that needs to be supported. There are ways to build this into the SVG itself (that's how I built our SVG favicon to react to light and dark modes in browser tabs), but I don't think all of those features work with the way smilies are embedded so they'll need to be handled by the page. We're bumping up against the limits of my SVG knowledge here so I will need to do a bit more research before I can give you a definitive answer on the best approach.

It would be ideal if we found a shade of gray that looked good in both dark and light modes, but I'm not sure that's possible.

 

[SomePlayaDude]

View attachment 1068076

This is a [censored]ing improvement. Especially with the expression. Whichever one the boss chooses, I'm down.

 

[Seebsma]

I'll try sly later.

EDIT: I'm not conviced with the results. Also, I didn't realize that eek has animations, so I'll attach a revision.

 

[Jordan]

Lots of new smilies online!

Here's an overview of everything I've added and any changes I made.

• Cool by @Drex124
  • No modifications needed
• Tongue by @Drex124
  • Line width issues that became visible at native size
  • Added very minor detail to the tongue in the form of a color gradient
  • Made tongue slightly larger (the original was accurate, but it wasn’t showing up well in the SVG for some reason)
• Wink by @Jordan
  • I actually ended up making this one myself so it was more consistent with the existing “smile”. Drex, your version was great but there was a difference in color, the mouth, and I felt like the closed eye could be a bit more elongated.
• Dopey by @TB
  • Edited the outline of the teeth to be purple instead of black
• Ouch by @Drex124 and @TheErik
  • Combined the bright circles from Erik’s version with Drex’s body
  • Adjusted color and placement of emphasis lines to be visible in Dark Mode
• Scared by @Drex124
  • Increased width of black border around the mouth to make it more apparent at a small size
• Ill by @Drex124
  • Adjusted sweat drops to make them a bit more clear at small size
• Mischievous by @Drex124
  • No modifications
• Drool by @TheErik
  • Adjusted viewBox and SVG root element width and height
• Madby @TheErik
  • Adjusted viewBox and SVG root element width and height
• Indifferentby @Seebsma
  • No modifications
• Sly by @Seebsma
  • No modifications
• LOL by @Jordan
  • Our first animated SVG smiley!

On the monitor I was using to make it, it looked like it had an outline. Easy enough to edit, though.

I was already working on that. Made the text a little taller, too.

View attachment 1068076

I think we’ll go with yours because it has a smoother gradient, but the text isn’t perfectly centered on high DPI displays. It’s a little odd because it looks centered on 1x screens, but when viewed at a high-pixel density, it’s off to the left. 🤔

In other news, I think I have found a shade of gray that works for accents in both Light and Dark modes: HEX color #808080. I used it in the accent lines for the new smiley and it seems to work well for that one, at least.

I'm happy with how turned out with the animation. As you can see, it's smoother than the two-frame animated GIF it replaces.

 

[SomePlayaDude]

Great work, guys.

Starting to work on frown and nervous, both using the same base smiley. So I don't know why, the back of my head is whispering to me.. with a desire to redraw most of these smileys than just do conversions. Yeah, it's just more hurdles, but I prefer it this way, dunno really why.

Going to see how the animation part works out later.

 

[kikie]

By the time that I learned how to work with Figma, GTP will be celebrating its 30th birthday.

 

[Jordan]

A quick announcement: I wasn't perfectly happy with how the new smilies were looking in Dark Mode. The black border effectively shrinks their size in Dark Mode and made their expressions a bit more difficult to see.

So, I went in and increased the width and heights of all the new smilies by just one pixel. This is a very subtle change, but it is a noticeable improvement in my opinion. Fortunately, thanks to the declarative nature of the SVG file format, this was a really easy change — we're already reaping the benefits of vector-based smilies!

For everyone contributing smilies, just increase the size of your base smiley "body" to 16x16 pixels now.

Great work, guys.

Starting to work on frown and nervous, both using the same base smiley. So I don't know why, the back of my head is whispering to me.. with a desire to redraw most of these smileys than just do conversions. Yeah, it's just more hurdles, but I prefer it this way, dunno really why.

View attachment 1068330

Going to see how the animation part works out later.

Were you using GIMP for that censored smiley above? I'm not sure if it's a GIMP export setting or what, but it seems to be putting out some rough gradients and edges. The body gradient of the censored smiley, for example, was made up of separate "panels" of color instead of a smooth gradient, which won't work. I don't know anything about GIMP so I can't comment further, but it's worth looking into.

 

[SomePlayaDude]

Were you using GIMP for that censored smiley above? I'm not sure if it's a GIMP export setting or what, but it seems to be putting out some rough gradients and edges. The body gradient of the censored smiley, for example, was made up of separate "panels" of color instead of a smooth gradient, which won't work. I don't know anything about GIMP so I can't comment further, but it's worth looking into.

Yeah, I knew it'll raise some red flags. It's not GIMP doing the exporting, but some old discontinued vector exporting add-on that only functions, but a bit shoddily. GIMP allows the use of external add-ons, but it's something I don't really utilize. Being that my only real use with it is to have more preset filters, and making GIFs before using a dedicated GIF maker.. I think this was 5 years ago.

Due to how things are with that, I'm using Photoshop for SVG conversions from the 'frown' & 'nervous' base onwards. I'm sure it's better, but I think I'll play with that to see how much better it can be 🤔

 

[Jordan]

I just did another animation: cheers!



This was a fun one. You probably can't see it at such a small size but I did add a fun detail as the foam shifts around slightly as the glasses move. It looks so much better than the old one at a smooth 60FPS, too.

However, there does seem to be some "flickering" in the detail of the vertical lines that make up the beer glasses and I'm not sure where that's coming from. It is only visible on my standard-pixel-density monitor, though, as it looks great on higher density displays. 🤔 Do any of you see that on your screens or does it look OK?

Also, the arms and glass outlines are a bit too dark for "Dark Mode" but I had to go with a darker shade than #808080 as it didn't look quite right in Light Mode.

 

[Seebsma]

I'll try sly later.

EDIT: I'm not conviced with the results. Also, I didn't realize that eek has animations, so I'll attach a revision.

The previous eek svg was too large to upload it here. I decided to make another one from scratch, with a jaw-drop variant.
EDIT: Here goes confused (I'm on a tiny streak).

 

[TB]

Do any of you see that on your screens or does it look OK?

Looks alright on my S8.

Shifting over to the light side, I don't see very much difference between the black outline and the dark gray so I think you could lighten it a bit more.

 

[SomePlayaDude]

Animated the nervous smiley, 16 height & 60 FPS, as per the standard we're going.

Just need to see if it's okay with you lot before I move on. I feel something funky going on with the edges of the smiley.

 

[TB]

View attachment 1068460

Animated the nervous smiley, 16 height & 60 FPS, as per the standard we're going.

Just need to see if it's okay with you lot before I move on. I feel something funky going on with the edges of the smiley.

The blue looks pixelated like it's compressed or something.

 

[Jordan]

I just updated the timing function of the cheers smiley, so they are "cheers"-ing a bit more naturally. The glasses speed up as they get closer together:

The previous eek svg was too large to upload it here. I decided to make another one from scratch, with a jaw-drop variant.
EDIT: Here goes confused (I'm on a tiny streak).

Nice work, Seebs.

Confused is in!

I like the jaw-drop variant of eek! My only comment is the jaw-drop itself feels a bit slow and out-of-sync with the eyes. (Of course, it shouldn't open as fast as they do, but the timing feels a bit off-step.) Probably as a result of that, it looks odd when the mouth goes missing. If a semblance of the mouth remains, maybe the tongue could become visible as it reaches its largest point? It could be a good effect.

View attachment 1068460

Animated the nervous smiley, 16 height & 60 FPS, as per the standard we're going.

Just need to see if it's okay with you lot before I move on. I feel something funky going on with the edges of the smiley.

Yeah, as noted by TB, the blue doesn't look quite right, and it's a bit pixelated as well. Those might just be artifacts from the GIF conversion. If you could post the SVG we can get a better look (to see how SVGs will render in your browser, you can just save them like any other image, then open them in your browser of choice).

 

[SomePlayaDude]

Bah, I knew I forgot something. That something being the conversion to SVG.

At least I think this is what's wrong. Maybe it explains the pixels.

EDIT: here be the SVG that I just made from Figma not a minute ago

 

[kikie]

Test!





Test completed.

Ok 👍

 

[Jordan]

Bah, I knew I forgot something. That something being the conversion to SVG.

At least I think this is what's wrong. Maybe it explains the pixels.

EDIT: here be the SVG that I just made from Figma not a minute ago

Ah, OK, so this is actually a non-scalable bitmap embedded inside an SVG file. (I know, it's really confusing and tripped me up a lot when I first started working with SVGs. Basically, SVGs can combine vector drawings and bitmaps inside the same file. It's almost impossible to detect this has happened until you actually try to enlarge or zoom in to the SVG file and the bitmap goes blurry.)

I don't actually know how you could export an embedded bitmap in Figma so I'm not sure what to tell you to do differently. Did you copy it over from GIMP into Figma? Things might have gone wrong there.

From what I can tell the smiley itself looks good, though.

 

[SomePlayaDude]

Did you copy it over from GIMP into Figma? Things might have gone wrong there.

That is precisely what I did.

Was thinking about this, and I feel it's not Figma, but maybe something I did in GIMP. To recall, things I did mess about with is with the scaling (I upscaled to get more detailing in, maybe the downscale messed it up), and also the image color mode (converted from index to RGB).

 

[Jordan]

That is precisely what I did.

Was thinking about this, and I feel it's not Figma, but maybe something I did in GIMP. To recall, things I did mess about with is with the scaling (I upscaled to get more detailing in, maybe the downscale messed it up), and also the image color mode (converted from index to RGB).

After looking into this more, I don't think it's your fault at all.

Your comments made me suspicious so I looked into GIMP and I see it's a raster editing tool. Although it does support importing and manipulating vectors, it can only export bitmaps. Unless someone more experienced with GIMP can chime in, unfortunately I don't think you'll be able to get your work out of GIMP as a true SVG. 😩

For open-source vector editing, I think your best bet would be Inkscape (or Figma).

 

[kikie]

I feel like a little kid who's getting presents for his birthday. In this case, the presents are the old smileys coming back.

 

[kolio]

I've tried to redo a couple, to absolutely no success at all. I'm glad there are more talented people out there than me.

Seriously, these are looking great, guys!

 

[kikie]

I've tried to redo a couple, to absolutely no success at all. I'm glad there are more talented people out there than me.

Seriously, these are looking great, guys!

You're smarter than me. I don't even know how to start (Figma).