A gaming clan is basically a group of people who enjoy to play together. And every clan basically has a logo to identify themselves. The logo of SkyLord Gaming is basically a very nice looking symbol. It is minimal, yet it looks professional. One of the best things is that this symbol can be easily combined with nearly every background and is still recognizeable.
That lead to the question of many members, to get the original symbol and just put a random background behind it. But that again brought up a little problem, since after a quick test with some members, it quickly came out that the choice of the background image was not always the best, and to prevent further possible arguments, the leaders decided to better not allow full customization of the logo. However, this whole topic shouldn’t be closed just because of that decision, but instead we tried to find a solution for this issue.
So the Avatarizer was born. A simple web tool which allows to choose from pre-selected backgrounds (150+), and offers some customization options, just enough that members like to use it and are satisfied with the amount of customizeability, and enough for the leadership to not run too much into the issue of having bad looking logos.
From a technical viewpoint, this whole thing is just a simple HTML Website enhanced with CSS and JS. It makes heavy use of modern web standards and specifically of the Canvas Element and CSS3. It even has an uploader included which is only accessible by entering the correct combination of a specified URL parameter and its value. The uploader just doesn’t really “upload” by saving the image file on the webspace, but just uploads it into the app for a realtime viewing experience in order to choose further customize it a bit with the given tools and to straight download it.
All in all it was much of fun working on that little side-project. Since I had a clear vision and the whole project brief was clear from the beginning I only needed a few hours to get everything together quickly. Not to mention that this was actually the goal from the beginning: solving a simple issue with a simple “app-like website” without spending days/weeks/months with discussions or similar.
In case you want to play around a bit or even dig deeper by checking the source code, feel free to check out the links below.