- 24,313
- 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:
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 .
(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.
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?
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:
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 .
Big Grin | Figma
www.figma.com
Smile | Figma
www.figma.com
(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 Smiley | Updated Version | Christmas Version |
by @Jordan | ❌ | |
by @Jordan | ❌ | |
by @Drex124 | ❌ | |
by @Drex124 | ❌ | |
by @Seebsma | ❌ | |
by @Seebsma | ❌ | |
by @TheErik | ❌ | |
by @TheErik | ❌ | |
by @Jordan | ❌ | |
❌ | ❌ | |
by @eclipsee | ❌ | |
by @Jordan | ❌ | |
by @Drex124 | ❌ | |
by @Jordan | ❌ | |
by @Jordan | ❌ | |
by @Jordan | ❌ | |
by @Drex124 | ❌ | |
by @Jordan and @Seebsma | ❌ | |
by @Jordan | ❌ | |
by @Drex124 | ❌ | |
by @Jordan | ❌ | |
by @Jordan | ❌ | |
by @Seebsma | ❌ | |
by @Jordan | ❌ | |
by @Seebsma | ❌ | |
by @Drex124 and @TheErik | ❌ | |
by @TB | ❌ | |
by @Seebsma | ❌ | |
❌ | ❌ | |
by @Jordan | ❌ | |
by @Drex124 | ❌ | |
by @Seebsma | ❌ | |
by @Seebsma | ❌ | |
by @Jordan | ❌ | |
by @Drex124 | ❌ | |
— | 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?
Attachments
Last edited: