Basics of Game Logo Design Process and Base Structuring Tutorial


#1

This tutorial is solely from my own experiences and my own thoughts, anything that is not will be credited respectively as well as resources used.


Intro

Hi everyone! In this post, you could learn a thing or two in designing your own game logos from the processes I go through when I design a logo for your games. I’ve been known for mostly designing various kinds of logos for quite a while now and through the years I have experienced and learned so many things about designing branding, so I want to pass on some of my knowledge to you, along with some necessary details you should be aware of when designing a logo and show you my effective process in designing something well-composed.

Branding a game with a logo may have been an issue to some of you. Perhaps some of you couldn’t afford to hire an artist to do the job or perhaps you want to do it yourself but you just don’t know where to start! And it’s definitely a need to mention that a game logo is the most important graphic when it comes to promotional materials. Hopefully after reading this tutorial, you would be able to design your own logo for your own game.

- Tools & Softwares
I recommend using Illustrator and Photoshop just so you know what I’ll be talking about throughout the post. But in a sense of designing the logo, you can pretty much use other softwares if you don’t have either of the two. These are just basics so everything is pretty simple and easily done. Aside from that, you’ll need a pencil and a paper where you’ll be able to draft your logo.


Designing Process For Your Logo

Designing is pretty much more like a cognitive thinking and strategy rather than the physicality and production. I’d like to separate the way you should think when you’re working on the process of creating logos from how the logo is actually made so before we can get to creating the shapes and all, I want to talk about my step-by-step process of how I design a logo starting from nothing to something and how I organized everything accordingly so producing the logo goes smoothly.

1. Drafting


To start, you might already have an idea of your logo and you would want to maintain that idea accurate up until it’s in its physical form. Best way to do it is in the traditional way which is sketching it out with a paper and pencil. Be comfortable! In this step, the only important thing you should achieve here is to compose your idea to something you think what fits for the game as well as shaping up your texts’ style. Take notes of improvements, highlight flaws, make more drafts and compare which of them symbolizes the game best. And until you see a promising draft that you like, it’s ready to move on to it’s layout.

Tip: Bold texts are the best for game logos.

2. Layout and Editing


At this part, you will be having the texts layed out digitally. Scan your sketch or just take a photo of it and pop it in your Illustrator. Make sure to use guidelines, have the spacing of each letter equal, and layout accordingly to what was sketched. Although usually, the layout version isn’t as pretty as the one you sketched. It’s due to your eyes seeing your logo differently from the sketched version to it’s layout version and that’s because you’re now seeing the flaws clearly. Even to the smallest parts, you’ll know something’s off when it bothers you.

This is when you edit those parts. You would want this part to be perfect because when it comes to structuring the logo with the colors, effects, and everything, it will all depend on this vector and you need to make this vector well and fit. Some times it only takes a few tweaks and some times it takes you to so many versions 'til you get the right one. The perfect one is always the right one and you’ll see it for yourself when you got it.

3. Composing the Structure


Remember, the most important part of the logo is emphasizing the texts and maintaining it legible no matter how simple or complex the logo could be. Be careful when adding too much details around the text because it may get too overwhelming comparing from the text and from the logo as a whole. Keep everything balanced. A good composition is what gives the logo an attractive characteristic. This comes from the details you add-in to the logo, the kind of details that symbolizes the game(like a bullet for a shooter game, terrain for an adventure game, or skulls and treasures for a pirate game). But how do you decide what elements of the game to add as a detail and what actually are the things that symbolizes your game that’s unique from other games?

From my perspective as the designer, I simply play the game or ask for some screenshots of what to see in-game when my clients don’t tell me what to add. I get some inspiration and inspiration is the most reliable source you can have when generating ideas for the logos and do better decision making. And to give everyone a perspective when I want to design a logo for my own, you can always throw yourself back to what motivated you on developing the game because that’s the sole inspiration you had and the reason you started all of this(you should know that yourself). These inspirations can be seen as the highlight of the game whether it’s a unique experience of the game or memorable parts of the game. And aside from seeing and experiencing the game, some times you don’t get these elements from the visuals of the game because some times you pay attention to the vibe- what do you feel when you play the game. Vibes may as well add content to the logo like colors and texture. A dark red for something suspense, a bright yellow for a happy neighborhood, or a warm orange from a warm aesthetic.

Or just my unpopular opinion for game logos, you don’t need the extra details and backgrounds because those are actually unnecessary and the text is all that you need for a game logo.

There are a lot to consider for a logo to be well-composed. Just keep your vision straight and keep in touch with what you planned in the drafts. Don’t forget to get feedbacks from people time to time because they may pinpoint what looks good and not when you’re too drowned looking at your logo for too long- you might be unaware of the whole image anymore.

4. (Extra) Provide Different Variations


I just wanted to mention this because it can be useful and I always provide different versions of the logo to my clients for different purposes. This can be useful for yours as well! Perhaps at the least you should have a version of the vector and the structured version. The kinds of purposes is pretty self-explanatory because you decide how and where you would apply them.

~

There are a lot more in to designing and the way you think through all this than its actual production. That’s what you generally need to learn and study. Because even when you know how certain effects and details are made, you still would not be able to create a fitting logo for your game because you’ve ineffectively applied your skills and resources.

But if you do have an idea how to design a game logo but you don’t know how the basic structures and details are made, then the following will be an actual tutorial of doing just those! Will be discussing from the texts’ typography, to making them 3D, up until you finish it up with a background plate so you can have yourself a quality 3D game logo. Could be a start and I hope you learn a lot from here.


Structuring Tips and Tricks

This might be what you’re expecting to see haha. These are some initial techniques I do to compose my texts properly and make them look 3D when I start composing the logo, complete with backgrounds and extra details for a basic structure. Some of these techniques were not made by me and I studied them off from other artists as they were a useful detail for certain designs.

Note: Remember, just doing any of these techniques will not make your logo look good right away. These are just the basic parts of composing the structure of the logo. It’s important to know which of these base structures will fit your design best.

And just to mention a few dimension settings I always ready for my editing softwares. Both of Ai and Ps have the dimensions 20"x13" at 300dpi(6000x3900pixels) by default. That is so I would be able to apply even the most smallest details necessary. Other than that, the size will as well be 4k resolution ready for my clients and would be able to print physically in high quality.

Typography


We’re talking about composing a good structure here and typography is really important when it comes to that! Typography refers to the arrangement of the texts, not the texts’ style. And when this is done properly, your texts will create details of its own that would as well compliment the logo’s design as a whole. Even better, the texts may as well be separated from all the additional details and effects, and will still look as good.

There are many kinds of arrangements and the possibilities are limitless. But for this tutorial, I’ll only be discussing a few and these are the usual arrangements designers use for their game logos. More about it, these are guidelines designers visualize to know their typography is proper for the design. These tips explained will help guide you through with your arrangements.

1. Symmetrical Typography


It’s simple. Just align your text in the center and that should do the trick. I included this factor because having a symmetrical alignment also means having your texts contain equal visual mass on both sides of it. Everything is balanced. Meaning you won’t notice any misalignment because doing so already creates a good sense of arrangement as a game logo.

2. Shapes as Guidelines


This is something I usually think of when arranging my texts. More so, thinking about shape guidelines can also guide you when structuring your logo as a whole. Using shapes as guidelines are more like preset arrangements for your texts and this is how you would know that your texts are properly arranged. The shape itself is the structure of your type and doing so accordingly will create an uncanny impression of the shape you intend to achieve. The shapes and their examples may be seen below:


You can use these as references when you are composing your type. And speaking of balanced mass from the symmetrical typography, these are more of its kinds which having both sides as balanced and as equal as the other. The parallelogram however is not quite that balanced although it’s still commonly used a lot when it comes to game logos.

3. Which Words to Emphasize


It’s obvious but it’s important. I still see a lot of which some words are unnecessary to give attention to and they care less about it. I’ve separated a game’s title into three parts which are the Main Title, Subtitle, and the Determiners and Prepositions.

  • Main Titles are the one’s that should attract all the attention when you first glance on a game logo. Of course because the main title is also the name of the game itself. These are usually the biggest word/s that you would be able to see on a game logo because you should emphasize the title more than the rest. Although in some cases, the only time you can change that is if the subtitle means something more to the game than the title itself and that is worth reasoning in doing so.
  • Subtitles, as I mentioned, are the one’s who give meaning to the game. May it be telling something about the game, a sequel/prequel, a subtle context of what’s about to happen, or something to name for another version of the game. Emphasize the subtitles just enough for it’s meaning- a little less than the title so the viewer could see it after the main title and just enough to show it’s intended message.
  • Lastly, the Determiners and Prepositions. Usually the words: “a, an, of, the, of the. . . etc.”. Don’t give much attention to this. Usually these words comes within the main title and they disturb spacing too much when arranging the texts. They don’t give meaning that much to a phrase, even as its own and they are too commonly used.

3D Shapes

Basically, creating these 3D shapes has two parts. The front layer or face which is usually the lighter part or the initial vector, and behind that is the other part which what makes the vector 3D which is usually the darker part or the body of the shape. These are usually done on texts and I have a couple of approaches on the styles of the body.

1. Isometric Body
There are actually a couple ways of me doing isometric shapes in photoshop. See them below:



If you want the whole logo facing just upwards, you can do this trick. This trick is done the easiest among the others. Step by step process goes like so:

  • Duplicate the face layer then place the duplicate layer below the face
  • Select the duplicate layer, use the Move Toolimage
  • Hold Alt button then hold the Down Arrow until you’re satisfied with the length of the body
  • Shift-select all the body layers then merge them
  • Vise versa when you want it to face downwards



This next trick only applies to a 45 degree angle facing. It’s a bit more complicated than the last one, but it’s still clean and accurate when done. I’m not aware if there’s an easier way to do this and I think there is, if you know how it is please do share! My step by step process for this goes like so:

  • Duplicate the face layer then place the duplicate layer below the face
  • Select the duplicate layer, use the Move Toolimage
  • Hold Alt button then alternately press the Down Arrow and the Right Arrow
  • Repeat until you’re satisfied with the length of the body
  • Shift-select all the body layers then merge them
  • Do the same procedure for the other angles

2. One-Point Perspective Body



These are the ones that look more natural because they show the perspective of the shape as well as the depth of it. This was actually the first trick I learned in making bodies and I got this from THEM Magazines, somewhere in one of their first issues and this was pretty useful. The process goes like so:

  • Duplicate the face layer then place the duplicate layer below the face
  • Move the duplicate layer away from the face layer downwards
  • Hold Shift+Alt then resize the duplicate layer smaller
  • Select the duplicate layer and use the Polygonal Lasso Toolimage
  • Connect the edges using the Polygonal Lasso Tool
  • Do the same procedure on other angles

Tip: You can also do this trick on isometric shapes!

Shape Faces

The faces can also have their own 3D effect to compliment the body. And I have a couple to share with you!

1. Smooth Bevel



I studied this trick from another logo designer, ZiggiousZaggious, when I needed something to look like candy and it has become really handy since then. You guys should look up his works, his works are neat, clean, and professional :ok_hand:. Anyways, process goes like so:

  • Duplicate the face layer, make sure the duplicate is above the face layer
  • Recolor the duplicate layer lighter than the face layer
  • Select the duplicate layer, right click and open Blending Options/Layer Style
  • Add a Stroke and edit
  • Change the Position into Inside and change the Opacity to 0%
  • Mess around with the stroke size but don’t get too big. It’ll look not as good
  • When you’re done, apply the changes and select the duplicate layer again and use the Move Toolimage
  • Move the duplicate layer opposite from the direction of the body

2. Chisel Hard Bevel



This one is cool and I use it a lot. This style is perfect for themes like medieval, adventure, fantasy, you name it. You can’t pretty much adjust the angle of this to compliment the body because of how photoshop generates it. Of course it doesn’t recognize where it’s facing and thus looks at anything as a 2D shape like how it’s supposed to be. It still looks cool tho so here’s how it’s done.

  • Right click the face layer and open Blending Options/Layer Style
  • Add Bevel & Embross
  • Edit its settings. Change Technique into Chisel Hard, change Size to its max, change Highlight Mode to Multiply
  • Then you can mess around the lightness, darkness, angle, and depth of the bevels to your satisfaction

Background Plates


It’s all coming together now! We started out with typography, learned how to create 3D shapes that applies for the text. All we need now is the statue’s stand. Or in this case, I call it the background plate of a logo. With all these three components you can generate yourself your own quality 3D game logo.

These plates can be used to create contrast within the logo opposing from the color values of the texts as well as the colors outside the logo. Aside from that, it helps shape the form of the logo more accordingly to what you visualized. These can also contain the extra details and textures you planned in adding that symbolizes the game. And speaking from experience, plates contain everything and can contain what you thought would be applicable to add on a text, whilst placing that certain detail in the plate alternatively can get the job done as well.

The shape of the plate depends on your texts, really, and I can’t generate pre made shapes for you to reference from because from here, it’s starting to get a little more custom and it will depend more on your design. I’ll just be showing you how to create these plates the easiest way. Here’s how the usual plates are done:

  • Make yourself aware of the bottom parts of the text because that’s where you’re placing your plate. Keep everything in perspectiveimage
  • Use the Pen Toolimage
  • Make sure the plate we’re making is below the Body layer
  • Proceed to create the plate around the bottom part of the bodyimage
  • Add an inside stroke to create the color edge of the plateimage
  • Then lastly, just create a body for that shape on a darker color of the strokeimage

~

At last! You are now able to design your own good quality 3D game logo. Hopefully you’ll be able to consider all these aspects in a much more complicated designs of your own and hopefully this tutorial could help a big part to our community. Let me know if you have any questions or concerns below and feel free to talk to me privately! Just contact me in my twitter and I’ll try to respond as soon as possible.

I may still have some things to discuss about designing game logos and I’m sure everything doesn’t end here so I’ll be sure to add more content to this post or maybe create a new one about a new topic.

Thank you for reading!
-Tristan
MiniTristanAverionSignature


#2

Amazing tutorial, I’ll be sure to keep these things in mind whenever I attempt to design logos!


#3

I love you


#4

Where have you been all these year?


#5

Really amazing designs and tips, thanks for the tutorial!


#6

Was not expecting this much work being put in a tutorial. Excellent job.


#7

Outstanding tutorial! I’ve been waiting ever since you announced that you were going to make one! I’m very impressed by the content you gave.


#8

This is super helpful! Now I’m able to make good usage of my adobe illustrator license!


#9

After a tutorial like this, you loose the right to include the word “amateur” in your DevForum profile blurb.


#10

Houston, we have a problem. I can’t draw.

Anyways, really informative!


#11

@Tor_Laws It doesn’t have to look good when doing the drafts. Perhaps I didn’t mention properly that the objective of drafting is just drawing out your thoughts. If you have any ideas and concepts in mind, see if it looks good by doing just this so you can easily alter when something looks off.


#12

Amazing tutorial. I’ve been doing flat design in illustrator for a decent amount of time, but I really want to branch out; this is definitely a starting point.

Love Adobe Illustrator, but was an expensive subscription because I also have the Photography package (one of my many hobbies). So I’ve recently switched to Affinity Designer. It’s pretty good, it’s missing a couple functions that I found easy in Illustrator, like Shape Maker.

However, if anyone reading this tutorial wants software and doesn’t want a monthly payment, I definitely suggest affinity designer, it’s a one time purchase.

Thank you for the great tutorial!


#13

Awesome tutorial!


#14

Useful tutorial, and amazing artwork! :+1:


#15

I love this alot.


#16

Thanks for the sweet tutorial! Will be bookmarking for future references!