Recreating the Terasology Logo with Material Design Principles

banner.png

What is Terasology?

The Terasology project was born from a Minecraft-inspired tech demo & is becoming a stable platform for various types of game-play settings in a Voxel world.

The creators & maintainers are a diverse mix of designers, software developers, game testers, musicians, & graphic artists. We encourage others to join!

Terasology is fully open source and licensed Apache 2.0 for code and CC BY 4.0 for artwork (unless indicated otherwise - see credits for minor exceptions) .

We encourage contributions from anybody and try to keep a warm and friendly community and maintain a code of conduct.
Source: Terasology.org

Github Link: Moving Blocks - Terasology
Website Link: Terasology.org


Here is Terasology's current icon/logo from their website:


Logo from Terasology

Here's what Terasology looks like in-game:

image.png
View full images here

The design of their logo is pretty far off from how the game itself looks like. You wouldn't expect it's that good because the logo doesn't really represent the 'look' of the game. So, I wanted to contribute a new Logo for this Open Source game.

I'm going to try and use Principes of Material Design to make this contribution happen.

We're using this Grid as a guide in making the Logo:

image.png
Guide from Material.io

I also found this color palette called Viximo online that we will use for the colors:

image.png
Palette from D Telepathy

We will use the Second (which is a purple hue), Third (blue green hue), and the Fifth (a green hue) as main colors for this Logo.


Let's Start

We started with making the Base of the Logo. We've chosen the Circle shape from the template earlier that I filled up with a light grey background color:

image.png

I've added lines in Red to remind me to confine the Logo inside these spaces:

image.png

Afterwards I added circular globes to be like the design of Terasology's mascot:

Then I drew the rest of the cube. Now, can you see the resemblance from the original Logo?

After that step, I added a face to the Terosology Mascot, just using simple shape tool. I made him 2 circular eyes and an elongated horizontal rectangle:

gif1.gif

I have added the highlights and shadows which is a key component in designing Material Logos. YOu can see it pulsating in this gif:

gif2.gif

Now, we will apply this guide in adding a shadow to the Logo:

image.png
Guide from Material.io

Here's what it looks like in the new Logo:

We will also apply another factor for the finishing layer:

image.png
Guide from Material.io

Here's what it looks like in the new Logo:

image.png

In order to match the color palette that I am using, I decided to change the background from Light Grey into another color:


Here's the Finished Logo:

terasology logo.png

Here's the .PSD file for your reference: View on Google Drive.

mockup.png

Here's a mock-up of their website using the Logo I made plus material design principles at work on some of its elements.


Open Source Contribution posted via Utopian.io