Quick and Satisfying! Make Logos for Games and More in CSP!
Making artwork for an array of different projects is easy in Clip Studio.
For many small-team or solo dev game development studios in particular, this kind of flexibility is a must, and with Clip Studio we can make game assets, UI, promotional art, and even logos all in the same program.
In this guide, I’ll show you the steps I take when I produce logos for my indie game projects!
While I’ll be focusing on logos for games, this guide will also work if you’re trying to make a brand logo for social media or any other presence you might have online.
Let’s get started and try making a logo!
Here are the stages we’ll go through:
1. Make some rough drafts
2. Clean up using the Text tool
3. Add colors and shapes using Figure tools and freehand
4. Final touches and export
To illustrate these steps, I’ll be making a logo for a made-up game called “Pop! Love! Puzzle!” Let’s begin!
1. Make some rough drafts
To find out the direction you want to take with your design, start by collecting information about the game and write it down. Ask these questions: What genre is your game? Action, puzzle, cozy? Who is the intended audience? Adults, casuals, family-friendly? What vibe does your game have? Spooky, bubbly, gritty? What existing game is it similar to?
For our made-up game, let’s say we have an arcade puzzle game with colorful elements and cute characters, plus flower and heart accents. We’ll be aiming for a casual audience that likes cute things, with happy, energetic designs all over the game.
Check the logos of other games in your genre, and browse existing logos online, to gather inspiration and get ideas of what a “good” logo looks like.
Now that you have a rough idea of what it should look like, start sketching! Make at least 3 very rough sketches and add color. Don’t add too much detail though; you just want a general idea of how it looks from far away.
This is what I ended up with.
When in doubt, ask friends, family, or peers to choose between your variants. Write down their opinions and suggestions, and make a new batch of sketches accordingly, until you construct the best possible option!
2. Clean up using the Text tool
Now that you have a good sketch, it’s time to start cleaning it up!
First things first: choose a font to use for your textual elements. Be absolutely sure that the font you use is free for commercial use, since you will be distributing your game or product publicly.
Grab your merged sketch, expand it to a large size and set the drawing color to something light. I recommend light blue, orange, or pink, so that you can see the elements beneath but draw on top without getting confused.
Type out your logo. Since your text is a vector, use the transform tool freely to get it to the size you want without sacrificing quality.
Make sure to check the Tool Property settings for “Character spacing” and “Line Space.” Adjust the distance between characters as necessary to make it nice, but prioritize readability above all.
Select individual letters to change size or capitalization for style, if you wish.
If you have a subtitle, try changing its size or style to reduce its priority and add contrast.
I separated each word into different text boxes so that I could rotate them individually.
When you finish altering your text, clip a raster layer on top of it and add some color!
Airbrushes and gradations work well when used in moderation. Make sure there’s enough contrast so that your logo is readable.
This is where you can use the border function to great effect!
In the Layer Property window, press the circle to enable a “border effect” on the current layer. Change its size by dragging the slider, and change its color by clicking the band of color beside “edge color”.
Remember that your game’s logo will appear in many places: in stores, on promotional images, and on its own. I like to use strong borders to ensure that any logos I make are versatile, but legible.
You can also easily stack borders for a stylish effect that makes letters pop. Rasterize your bordered layer, then press the circle again to add a second border. Duplicate layers as necessary to reduce destructive change on your original text layer.
When you do this, make sure to turn off the border on your base layer, otherwise layers clipped to it will draw over the border.
3. Add colors and shapes using Figure tools and freehand
Now the basic text of your logo is complete. Next we can experiment with adding colors, a background, and symbols.
I try to keep to the style of the game when choosing colors, so I went for energetic colors to begin with. I use an airbrush and gradients to gently add depth to each word.
Stacking clipped layers onto each word’s base layer helps when you want to experiment with different colors without making any destructive changes!
As for the background, I wanted to have some simple shapes behind the words “Pop” and “Love” as well as a large cloud shape to wrap everything together.
As long as the final effect is achieved, you can draw these shapes however you please.
The Figure tool comes in handy for circles, rectangles, and polygons. You might also use the line and curve tools to draw out your shape. Vectors work well if you want a clean logo that can be resized as needed.
I used figure tools for the flowers and hand-drew the rest, transforming them as necessary. The human eye likes balance and symmetry. If you go for something asymmetrical, try to visually balance each half. With that in mind, I pushed Pop and Love around a bit to balance everything out.
As for colors, I picked softer tones that didn’t compete for attention too much with the text. The flowers are so light that they look striking, but they have low-contrast details.
4. Add final touches and export
We’re almost finished! At this point, it’s time to bring back everything we’ve done so far for a second run and add some extra detail for contrast.
Depending on the kind of logo you’re making, you might be adding or reducing detail as necessary, so always refer to the logos you picked out as inspiration to keep yourself on track.
For my logo, I added a few more gradients and halftones to bring more depth to the background. I also added some soft patches of purple and blue to the cloud shape for interest. To make things pop even more, I doubled all the bordered layers and moved them slightly to give a 3D effect.
I clipped yet another layer on top of the words to draw large highlights freehand.
Pop and Love have colored highlights rather than white ones so that they don’t steal the show too much and drag the viewer’s eyes everywhere at once.
I created a new correction layer and reduced saturation to 0. As I added details, I flicked that layer on and off to make sure contrast was maintained and staying where I wanted it: on the text, to grab your attention and keep it legible.
Continue adding and reducing details, taking breaks and checking your reference logos to keep a clear idea of how you want it to come out in mind.
It helps to open the Navigator window and check it periodically to make sure your logo looks good from a distance, too.
With that, my logo is finished! This is the final result. Thanks to an accumulation of small changes, it looks much better when compared to the last step.
At this point, I export it at its largest size, (at least 3000px in length). I also save several copies in reduced sizes so that I can use them in a variety of materials (banners, cover art, etc.).
I also recommend saving the text part of the logo on its own, doing the same with the background panels, in case you need either part separately.
Since I’ve been creating several layers and clipping them, I can also remove any clipped layers and save a simplified version of the logo, which might be used in-game. Here are all the variants I made!
That’s it! Our logo is now ready for use wherever we might need it.
Thanks for reading!
Kommentar