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

  • Thread starter Jordan
  • 86 comments
  • 4,866 views

Jordan

Site Founder
Administrator
24,294
United States
United States
GTP_Jordan
GTP_Jordan
When the GTP16 update rolled out a few weeks ago, we unfortunately had to say goodbye to our collection of classic smilies. As our forums modernized with support for Unicode emojis, the blurry, low-resolution GIFs that composed our old smilies were too outdated, and I didn't have time to rebuild our old smilies before the new site launched.

Nevertheless, I have really missed those friendly old faces since the site update, and I know many of you have, too. They bring a lot of personality to our community and contribute to the unique look-and-feel of our site.

So, let's bring them back!

...but I need your help. My vector image editing skills are limited, which makes the task of rebuilding all the smilies daunting. If we can leverage the community's talents and work on this project together, perhaps we can make quick work of it and have some fun along the way. How awesome would it be to say our unique smilies were literally hand-made by our own community members?

If you want to get involved, read on...

Why do they need to be updated?

Most of our smilies were created around 2001 or 2002. I stumbled upon an artist's website who published a large collection of unique and highly-polished smilies that were bursting with personality. I was smitten and started using them immediately, and most have been with us ever since. (I bookmarked the source a long time ago, but it has sadly been lost to time, if it's even still online anymore.) Although they served us well for 20 years, in 2021 they were starting to show their age on modern devices, especially when up against contemporary emoji.

The smilies themselves were mostly 16x16 GIF files. This is OK on displays with standard pixel densities, but today over 70% of all traffic to GTPlanet comes from mobiles and tablets with high pixel density — also known as "high-DPI" or "Retina" — screens. Many new computers sold today include high-DPI displays, and Apple has featured Retina screens in all of their devices since 2015. If you aren't familiar with what I'm talking about, one of the simplest explanations of high-DPI screens actually comes from the man himself, Steve Jobs:



Here's how that translated to our old smilies:

IMG_51B04AB64040-1.jpeg


The iPhone's screen has to upscale the image with a lot of anti-aliasing, and the smiley's charming pixelation becomes blurry and muddled. The new smiley is an SVG, a vector-based image that will remain crystal-clear at any pixel density.

Another reason the old smilies don't really work is due to the introduction of Dark Mode. Some of the accent details are lost on a dark background, so the smilies suddenly look weird or don't make as much sense.

Creating SVG Files

Most of you probably don't need me to tell you much about SVGs and you probably know more about them than I do. They can be created with a wide variety of image editing software. However, SVGs for use on the web can be a little different because of the way they are rendered in different browsers. Just because software can export SVG files does not necessarily mean they will be usable.

I don't know which software is the best or worst for this sort of thing. If you want to try rebuilding one of our smilies, share it here and I can take a look at it.

In terms of software, I prefer Figma. Figma is a web-based design tool that outputs "clean" and compatible SVG files. It makes it easy to collaborate and share your work (it's like the Google Docs of vector-based image editors), so we can quickly share and remix what we're working on. As an example, here are the source Figma files for the two smilies I have already rebuilt, :) and :D.



(I included the original bitmap GIFs in the files for reference.)

Clicking on the "Duplicate" button on those pages allows you to open those files in your own Figma editor, explore how they are made, and re-use those elements to build and share your own.

Of course, there is no requirement to use Figma. It's just a tool I like, it works well in this situation, and it's easy to learn.

For best results, I recommend working with the smilies at their native size, with a baseline circle of 15x15 pixels, including the outside black border.

Animations

Animations are a bit more tricky. I would strongly prefer to use SVG animations to bring our animated smilies to life, so we can take full advantage of their smooth framerate and all the other benefits that SVG provides. However, they can be tricky to create. If anyone in the community is more well-versed in SVG animation than I, please chime in — we could use your help.

One simple online-based SVG animation tool that I have used before is SVGator. It includes a simple keyframe-based interface and you can export up to three animated SVG files per month for free.

Smilies To Rebuild

I have attached a zip file containing all of our old smilies which you can download for reference, and here is a table containing all of the smilies that need to be rebuilt. I will update this table accordingly as new smilies are finalized and added back into our database.

There are 37 unique smilies and 74 total smilies to be revised, including the Christmas versions (I don't see a need to update the old "thumbs up" and "thumbs down" smilies, as those are better served by the new emojis). It would be great to have these Santa-hat wearing versions updated with SVG as well for use during the holiday season.

Original SmileyUpdated VersionChristmas Version
smile.gif
:) by @Jordan
biggrin.gif
:D by @Jordan
grumpy.gif
:grumpy: by @Drex124
scared.gif
:scared: by @Drex124
nervous.gif
:nervous: by @Seebsma
confused.gif
:confused: by @Seebsma
mad.gif
:mad: by @TheErik
drool.gif
:drool: by @TheErik
guilty.gif
:guilty: by @Jordan
censored.gif
gtpflag.gif
:gtpflag: by @eclipsee
rolleyes.gif
:rolleyes: by @Jordan
boggled.gif
:boggled: by @Drex124
crazy.gif
:crazy: by @Jordan
irked.gif
:irked: by @Jordan
lol.gif
:lol: by @Jordan
tongue.gif
:P by @Drex124
frown.gif
:( by @Jordan and @Seebsma
dunce.gif
:dunce: by @Jordan
mischievous.gif
:mischievous: by @Drex124
yuck.gif
:yuck: by @Jordan
redface.gif
:embarrassed: by @Jordan
eek.gif
:eek: by @Seebsma
odd.gif
:odd: by @Jordan
banghead.gif
:banghead: by @Seebsma
ouch.gif
:ouch: by @Drex124 and @TheErik
dopey.gif
:dopey: by @TB
sly.gif
:sly: by @Seebsma
idea.gif
cheers.gif
:cheers: by @Jordan
cool.gif
:cool: by @Drex124
indifferent.gif
:indiff: by @Seebsma
bowdown.gif
:bowdown: by @Seebsma
wink.gif
;) by @Jordan
ill.gif
:ill: by @Drex124
:gtplanet: by @Jordan

This Probably Won't Work (But That's OK)

As I mentioned, getting SVG files to look good everywhere can be tricky, to say the least. I already know we'll be receiving complaints about the rebuilt smilies because of how specific browsers or various page zoom sizes affect SVG rendering. Until we start rolling these out, I don't know how bad of an issue it will become.

To be honest, it kind of feels like I'm knowingly opening Pandora's box here. However, even if SVGs don't work so well — and I suspect they won't — we can still use the redesigned vector-based smilies to create 2x-sized PNGs or GIFs which will be much more compatible. Better yet, we'll have a library of vector files to reference for use in the future.

So it's worth a shot, right?

:gtpflag:
 

Attachments

  • smilies.zip
    96.5 KB · Views: 27
Last edited:
I've made a few decals for GTS so I'll give this ago, but I can make no guarantee of the quality or if I'll even have enough time to finish them. Apologies in advance if I can't get around to it.
 
I would LOVE to take another crack at Christmasing all the gifs again but even after reading through your post, I'm still not sure where to start. 🤣

I'll have to do some after work studying up!
 
I've made a few decals for GTS so I'll give this ago, but I can make no guarantee of the quality or if I'll even have enough time to finish them. Apologies in advance if I can't get around to it.
TB
I would LOVE to take another crack at Christmasing all the gifs again but even after reading through your post, I'm still not sure where to start. 🤣

I'll have to do some after work studying up!
Cool, I'd love to have both of you helping out. 👍

Hopefully I didn't make it all sound too intimidating. It's not that hard, I promise. :D

You're essentially just tracing the old bitmap smilies with the image editor of your choice and exporting as SVGs. Where it gets tricky is how and where those editors choose to place specific pixels. You can make a smilie that looks great in your editor, but that doesn't always translate very well to SVG. It really makes you appreciate the pixel-perfect efficiency of the original smilies. Their original designers really knew what they were doing and made every pixel count.

That's why I think we'll probably be better off going with 2x PNGs or GIFs, but I'm really not sure yet having only converted two smilies myself. We'll have to see how difficult this gets as we try the more complex faces.

Well, this is nice to see! Wasn't too long ago I salvaged a bunch of the old ones. I don't know anything about SVG editing, but this thread is really making me want to find out how now and I might try to learn some things about it.
Give it a shot, they are really fun to work on. :)

Quick Question: What about the April Fools day smilies like these?
gtpflag.gif
image.gif
Yeah, we can do those too, but they'll be pretty simple as it's just... that one face.
image-gif.1067844


It's known as the "awesome face" / "epic smiley" and was a really popular meme about ten years ago, so there's plenty of SVG versions of it already floating around.
 
As a curator of about 800 self converted SVGs in GT Sport thanks to experience fiddling about with few image editing tools, I can probably have a go at messing about these little smileys on my spare time, but I'm still unsure what sort of final product is demanded, I mean on the technical side.

Maybe I'm just feeling a bit grouchy now. I'll come back later.
 
As a curator of about 800 self converted SVGs in GT Sport thanks to experience fiddling about with few image editing tools, I can probably have a go at messing about these little smileys on my spare time, but I'm still unsure what sort of final product is demanded, I mean on the technical side.

Maybe I'm just feeling a bit grouchy now. I'll come back later.
Just have a go and share what you come up with — I'll do all of the testing to make sure it works as expected. :)
 
Oh these look great.

I'm currently playing with the OG censored at the moment. Based on my basic efforts just upscaling and converting, looks like a full redraw is in order.

EDIT: first draft, baby. Still not sure about the eyebrows since I feel doesn't express the rage of a swearing little dude that well, but everything else is just [chef kisses].

1626419072897.png
 
Last edited:
Had a go at yuck.

<svg width="96" height="97" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="48" cy="48" r="48" fill="#6BC66B"/><ellipse cx="48" cy="76.5" rx="31" ry="20.5" fill="#0F0F0F"/><path fill="#252525" d="M17 38h28v6H17z"/><path fill="#252525" d="M23.655 25.537l4.803-4.644L45 38.001l-4.803 4.644zM79 38.107H51v6h28z"/><path fill="#252525" d="M72.485 25.78L67.542 21 51 38.108l4.943 4.78z"/><rect x="17" y="56" width="62" height="26.769" rx="8" fill="#0F0F0F"/><path d="M17 64a8 8 0 018-8h46a8 8 0 018 8v4H17v-4z" fill="#1C1C1C"/><path d="M31 63.385h34V84a8 8 0 01-8 8H39a8 8 0 01-8-8V63.385z" fill="#FF8484"/><path d="M36 63.385h23v14.154a8 8 0 01-8 8h-7a8 8 0 01-8-8V63.385z" fill="#FFC6C6"/><path fill="#1C1C1C" d="M45 62.462h6v12h-6z"/></svg>

yuck.png


Dopey

<svg width="92" height="92" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="46" cy="46" r="46" fill="#39B58C"/><circle cx="27" cy="24" r="19" fill="#F4F4F4"/><circle cx="64" cy="24" r="19" fill="#F4F4F4"/><circle cx="36" cy="28" r="7" fill="#101010"/><circle cx="55" cy="28" r="7" fill="#101010"/><path d="M17 46a2 2 0 012-2h54a2 2 0 012 2v11c0 9.941-8.059 18-18 18H35c-9.941 0-18-8.059-18-18V46z" fill="#840084"/><path d="M22 46a2 2 0 012-2h44a2 2 0 012 2v6c0 9.941-8.059 18-18 18H40c-9.941 0-18-8.059-18-18v-6z" fill="#420042"/><path d="M35 44h21v16a2 2 0 01-2 2H37a2 2 0 01-2-2V44z" fill="#FCFCFC"/><path stroke="#230123" stroke-width=".5" d="M45.25 44v18"/></svg>

dopey.png
 
Last edited:
Give it a shot, they are really fun to work on. :)
I will eventually, but unfortunately, me and my family will be going on vacation and I won't be near my PC for almost a week.
Yeah, we can do those too, but they'll be pretty simple as it's just... that one face.
image-gif.1067844


It's known as the "awesome face" / "epic smiley" and was a really popular meme about ten years ago, so there's plenty of SVG versions of it already floating around.
That might be the first one I start on then.

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

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 :lol:), don't know if they matter to you anymore, but I figured I'd share anyways.
.Had a go at yuck.

<svg width="96" height="97" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="48" cy="48" r="48" fill="#6BC66B"/><ellipse cx="48" cy="76.5" rx="31" ry="20.5" fill="#0F0F0F"/><path fill="#252525" d="M17 38h28v6H17z"/><path fill="#252525" d="M23.655 25.537l4.803-4.644L45 38.001l-4.803 4.644zM79 38.107H51v6h28z"/><path fill="#252525" d="M72.485 25.78L67.542 21 51 38.108l4.943 4.78z"/><rect x="17" y="56" width="62" height="26.769" rx="8" fill="#0F0F0F"/><path d="M17 64a8 8 0 018-8h46a8 8 0 018 8v4H17v-4z" fill="#1C1C1C"/><path d="M31 63.385h34V84a8 8 0 01-8 8H39a8 8 0 01-8-8V63.385z" fill="#FF8484"/><path d="M36 63.385h23v14.154a8 8 0 01-8 8h-7a8 8 0 01-8-8V63.385z" fill="#FFC6C6"/><path fill="#1C1C1C" d="M45 62.462h6v12h-6z"/></svg>

View attachment 1067900

Dopey

<svg width="92" height="92" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="46" cy="46" r="46" fill="#39B58C"/><circle cx="27" cy="24" r="19" fill="#F4F4F4"/><circle cx="64" cy="24" r="19" fill="#F4F4F4"/><circle cx="36" cy="28" r="7" fill="#101010"/><circle cx="55" cy="28" r="7" fill="#101010"/><path d="M17 46a2 2 0 012-2h54a2 2 0 012 2v11c0 9.941-8.059 18-18 18H35c-9.941 0-18-8.059-18-18V46z" fill="#840084"/><path d="M22 46a2 2 0 012-2h44a2 2 0 012 2v6c0 9.941-8.059 18-18 18H40c-9.941 0-18-8.059-18-18v-6z" fill="#420042"/><path d="M35 44h21v16a2 2 0 01-2 2H37a2 2 0 01-2-2V44z" fill="#FCFCFC"/><path stroke="#230123" stroke-width=".5" d="M45.25 44v18"/></svg>

View attachment 1067901
Those look really good, but they'd be a lot better if they had an outline on them. They look kind off without it especially since the others have one.
 
Last edited:
I will eventually, but unfortunately, me and my family will be going on vacation and I won't be near my PC for almost a week.

That might be the first one I start on then.

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

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.

Those look really good, but they'd be a lot better if they had an outline on them. They look kind off without it especially since the others have one.
Ah yeah I forgot the outline, didn't notice because I was working on a black BG. These versions have an outline @Jordan

<svg width="98" height="98" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_i)"><circle cx="49" cy="49" r="48" fill="#6BC66B"/></g><circle cx="49" cy="49" r="48.5" stroke="#0F0F0F"/><ellipse cx="49" cy="77.5" rx="31" ry="20.5" fill="#0F0F0F"/><path fill="#252525" d="M18 39h28v6H18z"/><path fill="#252525" d="M24.655 26.537l4.803-4.644L46 39.001l-4.803 4.644zM80 39.107H52v6h28z"/><path fill="#252525" d="M73.485 26.78L68.542 22 52 39.108l4.943 4.78z"/><rect x="18" y="57" width="62" height="26.769" rx="8" fill="#0F0F0F"/><path d="M18 65a8 8 0 018-8h46a8 8 0 018 8v4l-9.941 7.555a13 13 0 01-5.73 2.473l-12.822 2.138a13 13 0 01-4.02.04l-14.74-2.157a13 13 0 01-6.614-3.025L18 69v-4z" fill="#1C1C1C"/><path d="M32 64.385h34V85a8 8 0 01-8 8H40a8 8 0 01-8-8V64.385z" fill="#FF8484"/><path d="M37 64.385h23v14.153a8 8 0 01-8 8h-7a8 8 0 01-8-8V64.385z" fill="#FFC6C6"/><path fill="#1C1C1C" d="M46 63.462h6v12h-6z"/><defs><filter id="filter0_i" x="0" y="0" width="116" height="106" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="33" dy="8"/><feGaussianBlur stdDeviation="9"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow"/></filter></defs></svg>

<svg width="94" height="94" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="47" cy="47" r="46.5" fill="#39B58C" stroke="#000"/><circle cx="28" cy="25" r="19" fill="#F4F4F4"/><circle cx="65" cy="25" r="19" fill="#F4F4F4"/><circle cx="37" cy="29" r="7" fill="#101010"/><circle cx="56" cy="29" r="7" fill="#101010"/><path d="M18 47a2 2 0 012-2h54a2 2 0 012 2v11c0 9.941-8.059 18-18 18H36c-9.941 0-18-8.059-18-18V47z" fill="#840084"/><path d="M23 47a2 2 0 012-2h44a2 2 0 012 2v6c0 9.941-8.059 18-18 18H41c-9.941 0-18-8.059-18-18v-6z" fill="#420042"/><path d="M36 45h21v16a2 2 0 01-2 2H38a2 2 0 01-2-2V45z" fill="#FCFCFC"/><path stroke="#230123" stroke-width=".5" d="M46.25 45v18"/></svg>
 
I have zero clue on how to do this, and probably not the talent. But to see how quickly a few have been turned around I certainly want to give it a try when I have some time. Nice to see the community effort! :D
 
I have zero clue on how to do this, and probably not the talent. But to see how quickly a few have been turned around I certainly want to give it a try when I have some time. Nice to see the community effort! :D
I'd never used Figma before today, either. It took a bit of nosing around to figure some things out but these are pretty straightforward.

You should absolutely give one a shot. Maybe start with something a little easier than
irked-gif.1067812
. 😂
 
TB
I'd never used Figma before today, either. It took a bit of nosing around to figure some things out but these are pretty straightforward.

You should absolutely give one a shot. Maybe start with something a little easier than
irked-gif.1067812
. 😂
My two favorites are :lol: and :odd:. Trust me, I'm not starting with crap that moves either. 😅

EDIT: The classic : lol : and : odd : are my favorites.
 
Last edited:
@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.

1626464242823.png



Also, the part where the mouth ends do differ a bit between mine and yours.

1626464619037.png


I like things to be consistent, but honestly this is just me being really nitpicky. 😆 I do like the effort by the community though. 👍
 
Three more, and the issue with Cool mentioned above should be fixed. It shouldn't have had a stroke at all since I've been using the same base of one coloured circle laid over a black one so I don't end up with any scaling issues, but I must have miss clicked somewhere.

Edit: Had time for two more.
 

Attachments

  • Cool.svg
    5 KB · Views: 13
  • Ouch.svg
    10.7 KB · Views: 14
  • Wink.svg
    3.4 KB · Views: 12
  • Scared.svg
    8.8 KB · Views: 11
  • Ill.svg
    8.6 KB · Views: 13
  • Mischievous.svg
    4.7 KB · Views: 11
Last edited:
At this rate, we might as well call dibs on which one you wanna work with, before anyone else gets to steal bases.

I'm going to see if I can just make an excuse to get myself back to using Adobe Animate by having a look at the popular cheers, and the not so popular banghead for basics. If it works out, I might go if I can TRY to work out gtpflag.
 
Back