YouTube Video Tutorials

Animated Retro Pixel Art for Game Splash Screen

26,120

babeoded

Introduction

Hello! My name is Hira Karmachela. On this occasion, I will share my experience to create animated retro pixel art for game splash screen using Clip Studio Paint.

I hope this post will be interesting tips for those of you who are looking for creating pixel art and retro design using CSP.

About Retro Design

Retro is a design style that is trending in the 70s to 90s. Retro is different from the vintage style that has been known for a long time. Retro style has a contemporary and even futuristic impression on its era. The unique characteristic of retro can be seen from the selection of more sparkling colors, also known as neon colors. Retro design styles developed during the era along with the rise of the disco, party and sporty lifestyle.

In the same era, video games were developed with low-resolution graphics, which is now known as pixel art. This is interesting for me to make tips on making pixel art in a retro style.

Canvas Setup for Pixel Art

Let's get started! Open Clip Studio Paint then create a new canvas. The final work we are going to create will be 1280px by 720px but to create pixel art, we only need to create 10% of that size. So the canvas dimensions we need are 128px by 72px.

Next, we have to set the grid to make it easier to draw pixels. Go to View > Grid.

Now we can see it on the canvas. But we still have to adjust the grid size. Go to View > Grid/Ruler Settings. Set the origin at the center and set the Gap (D) and Number of divisions to 1.

Retro Color Scheme

Before we start compiling pixels. First, we need created a color palette that fits the retro style. Create a new layer to make it as a palette, name the layer as "retro palette".

Next, double click on the Foreground Color in the Tool Box to open the Color Settings. The first color we will create is "Hot Pink". In the HEX field, enter the code "ff69b4". Then brush on the canvas.

Below are the colors on the retro palette that we need.

For the rest we still need Black and White which we can take in the standard palette panel.

Tools Setup for Pixel Art

OK! There are several tools that we can use to create pixel art with special settings. The first tool, we can use the "Figure Tool" such as lines, curves, and shape tools to create precise pixel objects.

To use the Figure Tool to create pixel art, we need to turn off the Anti-Aliasing feature. Anti-Aliasing is a feature that makes the edges of digital image objects look smooth by adding and manipulating the color of the sample pixels around them.

With Anti-Aliasing of course pixel art won't look good. So, we have to disable this feature in the tool-property panel on the left. In the Anti-Aliasing section there are several levels, select "None".

Second tool, we can use "Pen Tool" with sub-tool Marker and Dot Pen type. This type of pen will produce a line drawing with a thickness of 1px so that we can easily create organic pixel objects.

Third tool, we can use "Fill Tool" to fill in pixel fields easily. Select the Refer other layers type so that we can fill in the overlapping fields even though they are different layers. Then in the tool-property, uncheck Area Scaling. This feature is almost similar to Anti-Aliasing which produces noise on pixel objects.

Fourth tool, of course, we need the "Eraser Tool" to erase unnecessary pixels on the work. Select the Vector type to erase the pixels without leaving a trace.

OK! The rest we can use other tools as needed.

Retro Background

Now let's have a pixel feast. We start by creating the background for the splash screen that we are going to create, of course in a retro style.

I divide the canvas with a 1px thick line as the horizon dividing of the sky and ground area.

Next use the "Eyedropper Tool" to take the color from the layer palette that we created earlier. I filled the sky with Ametyhst color and the ground area with Carmine.

Now create a new layer, we are going to create the sunset object which is typical of the famous retro design. Use the ellipse shape tool and make a circle while holding down the "Shift" key on the keyboard so that the shape is proportional.

Use eraser tool to make stripes on the sunset. You can imitate the pattern as I did.

Now create a new layer again, we will decorate the background with mountains silhouette image. Use the line tool with black to draw the mountains on the right and left of the sunset image.

Fill it the mountains with black then change the layer opacity to 50%.

Create a new layer, we will add the silhouette image of the buildings in front of the sunset. This time I use a dot pen.

Decorate the image of the building with a few colorful pixels as lights.

Now we move to the ground area, create a new layer to create a mesh over the ground. Again, I use the line tool with Turquoise Blue color to make a precise design.

Draw the line diagonally resting on a single point for perspective.

Copy this layer, then go to Edit > Transform > Flip Horizontal. Position the mesh so that it is symmetrical on the canvas. Then select the mesh layer and the copy, go to Layer > Merge selected layers.

Now make horizontal lines across the diagonal lines that have been made to create a mesh image.

Retro Street Environment

Next, we create objects for the environment. We're going to create a retro street atmosphere. It's simple, I will make road markings and a line of palm trees on the left and right shoulders of the road.

Create a layer folder to collect the environment object's layers. Create a new layer to create a path.

Now fill the intersection of the shape which forms the path, in the image with Electric Yellow. Change the layer opacity to 50%.

Create a new layer to create road markings. Make white road markings using the line tool.

Next, create another new layer to make a palm tree. Use the dot pen tool to make it. Make it symmetrical on the right and left.

Retro Car Object

OK! Now it's time to create the main model. Create a new layer for the retro car object. Use a dot pen to draw it.

Create a new layer above the car layer, use black to make a shadow on the surface of the car model. Change the layer opacity to 50%. Then merge the layer with the car layer.

As a complement, make a shadow under the car on a new layer. Change the layer opacity to 50%.

Animating Process

Now it's time to bring the scene to life. There are two parts that we will animate, namely the street environment and the lights in the buildings.

For that, prepare the timeline panel. Go to Window > checkmark Timeline. You will find the timeline panel appearing at the bottom of the screen.

In the Timeline panel, click New Timeline. Then a new timeline setting will appear, fill in the timeline name. Set the frame rate and playback time to 24. Scene and shot at number 1 and division line at number 6. Then change Image interpolation to Hard Edges.

To create an animation, we need an animation folder that contains special layers that will be linked to the animation cel.

For that, click New animation folder. Then the animation folder will appear at the top in the Layers panel. Rename the folder to "Animation". Currently the animation folder is empty. We have to process the models that have been made to compile and become animated cel.

Select all model layers from retro car to background layer. You can exclude the layers palette and save it at the bottom. Then go to Layer > Create folder and insert layer. Then all selected layers will be collected in one folder. Rename the folder to "Compilation".

Copy the Compilation folder and rename the copy folder to "cel_01". Then go to Layer> Convert Layer (H), so the cel_01 folder changes to a unit layer. Drag the cel_01 layer into the Animation folder.

In the timeline panel, make sure we select frame number 1 marked in red for each selected frame then click Specify cels. We will be asked to select the layer that will be linked to the cel. Select cel_01.

To make the next cel, do the same. Copy the Compilation folder then rename the copy to "cel_02". Before being converted into a unit layer. We have to transform some of the models in this folder to create the illusion of motion.

Now select the road marking layer in the cel_02 folder. We're going to edit the image so that it looks as if the road markers are advancing towards the bottom of the canvas. All that needs to be done is to delete or add pixels in certain parts.

As the road markings move, the palm trees also have to shift toward the bottom of the canvas. From a logical perspective, the object that approaches the view will look bigger. So, as it shifted, the palm tree had to be scaled up.

Select the palm tree layer, then go to Edit > Transform > Free Transform. In the tool property on the left, change the Interpolation method setting to Hard Edges so that scaling won't cause pixel noise.

Now select the building layer, change the lights decoration so that it looks as if the lights are flickering.

Next, select the cel_02 folder. Go to Layer > Convert Layer (H). Drag the cel_02 layer into the Animation folder. Select frame number 3 in the timeline then click Specify cels. Select cel_02. In this animation I'm going to set the cel every 2 frames for the playback time of 24.

Select frame number 3 in the timeline then click Specify cels. Select cel_02.

In this animation I'm going to set the cel every 2 frames for the playback time of 24.

For the next cels please do the same thing by changing the continuous transformation so that it produces the illusion of motion.

Rendering and Publishing

OK! I've finished composing and filling every 2 frames with the animated cel for a total of 24 frames.

Before we render and publish this animation. Let me remind you that this animation has dimensions of 128px by 72px. So that if we render it right away, the result we can see will be this size.

For that, we need to resize it first. Go to Edit > Change Image Image Resolution. The resolution setting window will appear.

Change the width to 1280px and the height to 720px. Then change the Interpolation method to Hard Edges. Then the image will be enlarged without destroying the pixel arrangement.

Now we render this animation. If you need an animated result that can be viewed with the loop feature, then we should export it in the Animated GIF format. Go to File > Export animation > Animated GIF. Specify a storage directory.

The render window will appear, change the width to 1280px and the height to 720px.

However, in some game projects. Usually the developer asks for the splash screen to be presented in image sequences. This is because the animation will be created using a programming script. For that we can go to File> Export animation> select Image Sequence.

The render settings window will appear. Specify a storage directory. Select the PNG format and the Export frames checklist.