The magic of freeware available these days online!

You can make all sorts of stuff for free in a few minutes that actually looks cool.

Today I'll share a quick 5 step process to make a pixel-art logo banner, like the one I'm currently using for my blog, COMPLETELY FREE. And the best part? You won't need ANY fancy tool or software other than a browser, an internet connection, and a computer.

What is pixel art?

Pixel art, according to Wikipedia, is a form of digital art, which is:

created through the use of software, where images are edited on the pixel level. The aesthetic for this kind of graphics comes from 8-bit and 16-bit computers and video game consoles

Pixel art was very often used in older computer and console video games, like the iconic Pacman and Super Mario Bros or the alien of space invaders. Icons for operating systems with limited graphics abilities are also considered pixel art, just like favicons and rasteriesed emojis.

Today, after a decline brought about by HD graphics, pixel art lives a revival as a conscious aesthetic creation. Indie games such as Hotline Miami, retro-inspired devices such as the NintendoDS, and modern sprites-makers all contribute to keeping 8-bit, 16-bit and 32-bit inspired graphics alive and kicking!

If you like the idea of an old-school, rough and punchy pixel-art image on your logo banner, then read on. I'll show you how to make one that looks like it's just come straight out of a an 80s or 90s arcade game.

The process

1. Choose the size of your banner

I'd recommend you pick the size based on where you will be using your banner. I host my blog via Hashnode, so their recommended size was 500x125px

2. Choose what the subject of your pixel art is going to be and pick an image of it

In my case I wanted a mixed banner, part pixel-art, part text. For the pixel-art I wanted an old console style character that looked like me, so I chose a head-shot photo of mine

3. Upload your chosen picture (or pictures) to pixel-me.tokyo

Once you've generated a pixel-art version of your image that you like, you can right-click the image generated and save it

Pro Tip: If you want more editing power or you'd like to use your picture for commercial means, you can also get the PixelMe app and get a Pro license If the effect is not what you wanted, maybe try remove the background before uploading the image (see next step)

4. Remove the background from your saved pixel-art image using Background Remover, remove.bg or PhotoScrissor.

Since you're making a logo, you would not need a big resolution, which means most free sites you can find by searching for ("free image background remover") will do the trick.

5. Use a custom-sized Google Slides presentation to make your composition

This might sound super-lame, but it is FAST and simple. Simply make a new presentation, then go to File >> Page Setup, and finally pick a custom size for your slide, which you can define in pixels (in my case it was 500 x 125 px).

Once you have your presentation slide size set, import your pixel art, add any text, background colour, shape or image, and compose your logo banner.

Finally, export the slide as a picture (File >> Download) in whatever format you like, like PNG. ─Note: I chose JPEG because it's lighter and my logo small, BUT be careful because its compression algorithms can smooth out the pixels.

Pro Tip: If you need a picture with a transparent background, you can remove it like you did for your pixel art

Pro tip 2: If you feel too constrained by the simplicity of Google Slides, then maybe you want to try your hand with the free version of either Canva or even Figma. the first being a simple but effective graphic design tool and the latter a UX design software that can be used as a powerful design canvas. Both of them have a stunningly complete free account and are completely browser-based.

Conclusion

See: Making cool pixel-art based logos and banners is easier than you think!

It took me 10 minutes to make mine and you don't even have to leave your browser or install any kind of software.

Use them for your website, linkedin, blog... or maybe even as assets for your app!

The sky is the limit and all credit goes to the amazing free tools now available for free online and that I listed in the steps above.

The biggest part of this credit goes to PixelMe, though, because it is BY FAR the best pixel-art free browser-based and app-based tool available today. What it does is not just a simple downsampling of an image, but a custom processing that really makes input pictures come out as cool pixel characters.

So try it out and have fun! Hope you found this quick guide useful :)

Edit 31/11/2021: I updated the background remover section to include a free tool that reader Janis von Bleichert sent me over to check out, and it's actually really cool!