Recreating the Terasology Logo with Material Design Principles
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
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:

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:

Guide from Material.io
I also found this color palette called Viximo online that we will use for the colors:

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:

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

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:

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

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

Guide from Material.io
Here's what it looks like in the new Logo:

We will also apply another factor for the finishing layer:

Guide from Material.io
Here's what it looks like in the new Logo:

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:


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