In this article I’ll show you how it’s possible to use Clip Studio Paint to create graphics (sprites) for games.

 

This will be a three part series.

 

[ Part 1 ] I’ll explain my process to create animation-ready sprites for a mobile game prototype using Clip Studio Paint only.

 

[ Part 2 ] I will be focusing on Animation - offering a solid workflow to animate sequences using the cutout style method and introducing the new Interpolation feature now available in the software.

 

[ Part 3 ] will be dedicated to Exporting and some tips&tricks you can use to speed up the creation of different assets.

 

 

Let’s do it.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Planning your Steps

First and foremost: when creating assets for Game Development, it’s very important that you take the final display output in consideration.

 

I strongly recommend that you spend some time researching or simply talking with your team (Lead Artist, Producer, or Programmer) about the best screen ratio and resolution to create the graphics.

 

[ As a rule of thumb: ]

 

• Vector art is always preferred, but it’s a slower process.

If the style of your game supports this method of creation, create most of your graphics in vector mode.

 

 

• Raster/Bitmap graphics are faster to make, but you may have scaling problems if you need to increase the resolution after your art is done.

 

Try to create your assets at minimum double the size of your final resolution; always have a higher resolution of your produced sprites.

 

For this project I’ll be creating the assets in bitmap/raster mode.

 

To have a point of reference for what image size is best to create the artwork, I made a quick research about common screen resolutions of the platforms I expect the game could be published for.

 

I got two key information from my research:

 

a. The maximum screen resolution is 2224 pixels (blue area);

 

b. To make sure the game could work on Mobile and Tablet devices I need to center my important graphics close to 1080 pixels (red area).

Creating the Artboard

With the previous information in mind, I created an Art Board with all the graphics for this game mockup. Doing this way I can have a better idea of the game AND it’s easier to maintain consistency during production (since you can work on batches).

//About this image: I imported the concepts from my sketchbook to the Art Board and and start the rough drawings right away. Putting all graphics together in the same file helps to check their relationships (size and colors).

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Later on this Series I'll use the cut-out method of animation on these sprites - not the usual hand drawn, frame-by-frame method that is common in Clip Studio Paint.

 

For this to work, I have to draw and isolate each part that is going to move.

At this stage, your process will become very cumbersome if you have to deal with all the different layers (Line, Color, Shading) for every object.

 

A suggestion here is to [focus on the creation/making and leave the organization for later].

 

In the example, below all the graphics were created like it was a single drawing: a layer for lines, others for flat colors, shading, etc...

 

//About this Image: In my Art Board, all my graphics share the same layer structure - my creative process would be broken if I try to create and organize at the same time.

Organizing and Exporting Pieces

Clip Studio Paint has a very intelligent feature where you can manipulate (Move, Copy/Cut/Paste and Clear pixels) from multiple selected layers, as long as:

 

(A) They’re selected on the Layer stack;

(B) They’re all selected via a Layer Group;

//About this image: In Clip Studio Paint you can select and affect the pixels of multiple selected layers. It’s a very useful feature to modify parts of your drawing without having to merge the layers.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Now let’s export each part of the sprite correctly so you can use it to create a cut-out animation in Clip Studio Paint and/or to create an Atlas Image that can be used in different animation tools (Spine, Spriter, Unity).

//About this image: An Atlas is a big image containing multiple sprites - this reduces memory consumption, since the device just needs to load (call) a single image containing all the sprites you will use in a game or character.

I’ve tried many methods to speed up the export process. The following is the sequence of steps that I think is the most effective way to accomplish this task:

[ STEP 1.]

 

On the Layer Stack, select all the layers used to create your graphic (Lines, Colors, Shading, etc.). Next, use the Lasso Tool to select the area you want to transform on a Sprite (in this example, I’ll export just the head of the Girl)

 

[ STEP 2.]

 

With the Selection active, go to EDIT - COPY (or CTRL+C) and then FILE - CREATE NEW FROM CLIPBOARD

[STEP 3.]

A new file is created with a piece of the sprite AND the structure of the file (useful for future editings) intact - now TURN OFF the visibility of the PAPER LAYER so the sprite has a transparent background.

 

//IMPORTANT: Notice how the sprite is precisely contained inside a rectangle; there’s no extra space around. This is a good practice when exporting sprites for engines.

[ STEP 4.]

 

Now you can export the sprite to a new file; go to FILE - EXPORT (SINGLE LAYER) and choose PNG.

[ STEP 5.]

 

It’s always good to name your sprites accordingly. For this project I’ll name the pieces of the character using the following: GIRL_(Name of the BodyPart).png

[ STEP 6.]

 

This PNG exporting dialog is useful because you can adjust the size of your graphic without changing the original art; let’s say the Programmer needs the character to be half of its size in the game. You can easily export the images again changing the value on SCALE RATIO to 50% (eg.)

And you’re done...

 

...for this first sprite. :(

 

Gladly, there’s a way to speed up this process in Clip Studio Paint.

 

[You can use an Auto Action (Macro) to automate this sequence.]

 

I created and I’ll share this Action with you; please refer to the footnotes on this article to get the download link.

To Import this Action, go to the AUTO ACTION subtool and choose IMPORT SET; you can later Copy or Move it to your default Auto Action Set.

 

Go back to your Art Board, [Select an area of your image] you want to export to a sprite and then click the little PLAY BUTTON.

 

The Action will ask for the name and size before the temporary file is automatically closed.

Repeat the process to all parts of your image. In this example I have all the parts that is needed to ‘rig’ and animate the character.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

That’s it.

 

In the following Article I’ll show you how to [Animate] this sprite in Clip Studio Paint, using the cut-out animation method.

 

It’s a very efficient method of work and you can use to create sequences for games or various types of animations to use in your project (Twitch and Youtube graphics, Gifs for social media, eg.).

 

Download Material