Last Updated on
Getting custom Mixer or Twitch logos designed for your channel is an important step for establishing your brand recognition. But avoid PNG & JPG formats.
This is a short, but important article for every single streamer out there.
Actually, scratch that. It is important for anybody using a logo or other digital assets of any kind.
Why PNG & JPG formats are awful as your source formats for Mixer & Twitch Logos
Many artists offer very cheap rates for the design of your logos in PNG & JPG formats. The reason for this is very simple: Scalability.
See, with a digital image file, one of its biggest flaws is the fact that you are not able to scale up the design without a significant loss of quality. Mind you, this is the source image being PNG ort JPG. ultimately, you will serve the image as one of these two formats.
At least until .webp is supported by the streaming platforms… Smaller image sizes, and better quality! Faster load times for visitors!
Here is an example.
As you can see, this image is extremely blurry and is the reason you do not want your source files to be Non-Vector.
Here is the same image, rendered to the exact max-width on our site. This is made from the original vector image:
So how did we do that?
Vector Graphics. In our case, a .SVG file.
Understanding Vector Graphics, and why you want them over all others.
SVG is not the only vector graphic format. There is also .ai, and .eps. It is, however, the one that is the most compatible with free vector image editors, like Inkscape. Fun fact: Inkscape is the program that we used to design our logo.
You might be thinking, “But why would I need to buy a more expensive vector image as my Twitch logo? Don’t I only need the one size to fit on Twitch’s site?”
Well, If you plan to make some merch out of your logo, you’ll quickly realize why this idea is pure folly.
Merch needs ultra-high-resolution Twitch Logos to look good.
See, Images for print generally need extremely high resolutions for the lines to not show pixels. We are talking in the neighborhood of around 8192×8192, with 300 PPI. From a 256×256 image (Twitch’s recommended size), you’ll end up with the above example if that is the only size you have. Only, much worse, as our image is only being served at 1102×742.
A vector image is infinitely scalable. This means you can export any size you need, at any time. This allows you to accommodate people based on their size constraints, if say, you were appearing on a podcast. Or perhaps featured on a website. Maybe you have a community partnered with another influencer, and they would like to include your logo on their site as a reference?
Which, by the way, you should totally do that where possible, it adds validity to both communities in question. The more common term is “Networking” among the streaming community at large.
All assets, not just Mixer & Twitch Logos, should be vector
Let’s face it. Emotes on all major streaming platforms are tiny. What if you wanted to plop your emotes on a mug in all its glory? Well, if you had it designed in its 112x, 56x, 28x as a PNG or JPG, then the quality…would suck when scaled up. (Unless you littered the mug with a bunch of mini emotes…which is also a cool design…) But then you could have a “Mega Emote” as the focal point on there as well.
If you are concerned at the cost of converting existing things to SVG, then simply take it slow.
- Start with your Logo. This is easily the most important asset to have as a vector. Monetize it to pay for your first emote conversion.
- Convert your most popular Emote to Vector, and monetize it.
- Repeat until all 50 emotes are converted. (If Partner)
An extra benefit of designing emotes as a vector image is that you can simply export the vector image to their respective sizes. This results in no loss of quality from the normal scaling process.
So pay the extra Dollar and get yourself a scalable Vector image as your logo, and even emotes! Trust us when we say there is nothing more frustrating than having to pay again for the design to be scaled up.
Or make your own!
A quick crash course for making your own vector logos using Inkscape
There are a number of considerations to be aware of when making your logo or other assets into a vector image. The first is how they work. In short, this is accomplished by defining logical “Paths”, which are shaped into the logo itself. You are using math; magnitude and direction, in art, essentially.
Each time a vector image is read, those paths define the relative shape of the asset. Then, once you define a width and height to export to, the computer simply scales up the paths to the desired shape and fills them with the colors defined when designing the asset. The exported product is a high detail image of whatever dimensions you tell it to export to.
It is also important to remember to include text in there as paths as well. Otherwise, the contrasting quality between the actual asset itself will become apparent to anyone who examines it closer.
Need a step by step guide on how to do it on Inkscape? No problem; Logos By Nick on YouTube has you covered! Just be aware, he is not using Windows, so the exact layout may differ from his setup!