Introduction

Hello! My name is Hira Karmachela a.k.a BABE ODED. In this post I will share tips in making pixel art trees and forest for tilesets on Clip Studio Paint. I'm sure all of you who are reading this article know very well about the advantages of Clip Studio Paint over other graphics software.

 

Based on my experience using Clip Studio Paint professionally, this software has completely fulfilled all my graphic needs both for drawing and designing. Especially on this occasion, I'd like to demonstrate Clip Studio Paint capabilities in creating assets for games or Pixel Art-style illustrations.

 

I hope this post will be interesting tips for those of you who are looking for tips to making pixel art on Clip Studio Paint.

About Pixel Art Tilesets

Pixel Art is digital graphic art which is the forerunner of modern digital graphics. Even though it has been decades since its existence, Pixel art is timeless and still exists side by side with contemporary visual arts.

Apart from being pure art, pixel art is usually applied as game assets that specifically carry the pixel or 8-bit style. In creating pixel game assets, backgrounds are usually created in the form of concept art, illustrations, and tilesets.

 

In this case, pixel art is well suited for creating tilesets which is a collection of graphics created per tile element that can be used repeatedly to produce a wider unified image.

#1 Setting Up File

By the way, in this work I use the mobile version of Clip Studio Paint for Android.

Let's start it. Choose Create new file, then a pop-up dialog box will appear.

In making pixel art, I usually use a canvas with a size of 128px by 128px with a resolution of 72dpi. This size is perfect for creating images that are detailed enough, not too narrow and not too wide to arrange pixels.

 

The next important step in creating pixel art on Clip Studio Paint is setting up and displaying the "grid".

Go to the View menu > Grid.

 

You will see grid lines on your canvas. However, the grid that appears does not match the pixel art needs. Therefore we need to adjust it first.

Go back to View menu > Grid/Ruler Bar Settings...

 

A dialog window will appear. Set the starting point to center and set the Gap(D) to 1px. You will see grid lines on the canvas forming small squares on the canvas

#2 Setting the Color Scheme

The next step before starting to draw or paint pixels, we must determine the color scheme that will be used. In theory, 8-bit games means we use a color scheme with a depth of 8-bit which 1-bit consists of two colors so 8-bit means two to the power of eight equals 256 colors.

 

However, I recommend limiting the number of colors even narrower to keep the color scheme in line with the nuances we want.

For that I suggest to make your own color set. Click the "Color Set" icon on the bottom bar then click the "Edit color sets" icon.

A pop up dialog will appear. Specify a name for your color set then click "Create new set".

Now choose the colors that will go into your color set. Click the "Color Wheel" icon in the bottom bar. Choose a color.

Click again the "Color Set" icon then select the color set that you have created. Inside there are color slots that are still empty. Let's fill in the selected colors one by one. Click on one of the empty slots. Then click on the color we have chosen in the lower left corner. Then click the "Add color" icon at the bottom of the right-hand panel.

Do this step starting from choosing a color in the "Color Wheel" until you have a color slot filled with the colors of your choice.

#3 Tiling Up the Canvas

In game asset creation, each element can be around 16px by 16px or 32px by 32px in size. The smaller the element size, the more difficult it will be to make an impression because it is difficult to add detail.

 

For that we will create elements with a minimum size of 32px by 32px. To make the pixeling process easier, let's create a tiling base layer.

Click the "Rectangle" selection tool in the left tool bar. Then tick "Aspect type" and select "Specify length" so we can make a selection with a fixed size. Don't forget to set "Anti-aliasing" to disabled (far left) so that the pixel image will not produce noise.

Set the selection box to 32px by 32px. Then tap on the canvas to make a selection.

Now use the "Fill" tool to fill the selection box with color. Choose a dark color in your color set.

The first tile has been created. Reuse the "Rectangle" selection tool then drag the selection next to the first tile.

Choose another color to make the second tile and fill the second selection box. Repeat this step until you fill the entire canvas with tiles like a chessboard. You can name this layer as "base".

#4 Setting Up Tools for Pixel Art

As previously set on the "Rectangle" selection tool, to create pixel art, we need to disable 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.

You can set "Anti-aliasing" in the properties panel of some tools. For example in the following "Figure (line)" tool.

For the main 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.

For sure, we need the "Eraser" tool to erase unnecessary pixels on the work. Select the "Vector" type to erase the pixels without leaving a trace.

In the properties panel, set the brush size to 1px and set "Anti-aliasing" to disable.

#5 Determining the Proportions and Angles of View

The preparations are complete, now let's start the pixel party. Our goal is to create a background or environment for Forest, for that we need to make comparisons of objects within it.

In the game there are many different angles of view. On this occasion, we will use a 3/4 top down view. This angle has appeal and gives a 3D impression because it allows us to explore the light and depth of objects.

To make it easier to orient the viewpoint, we can use primitive 3D materials.

Click the "Materials" icon in the bottom bar. Then select "3D Cube" and click the button as the picture shows to place the cube on the canvas.

After the cube is on the canvas, adjust the angle of the cube by clicking the camera icon as shown in the image below.

Then select the 3/4 top down angle as shown in the image below.

Open the layers panel and select the layer "Cube". Long press until the options menu appears. Scroll and select "Rasterize".

Next, use "Free Transform" by clicking its icon in the bottom bar to resize the cube to one tile or approx. 32px by 32 px.

Now we start drawing simple objects in Forest. We start by drawing the grass. Select one of the tiles then color it with the grass base color in your color set.

Use the "Marker" tool to fill the grass area with grass lines according to your style. You can start with a darker color than the grass base color.

Add another lighter color then fill in between the dark grass streaks.

Now we can create an object with the ratio of grass as the base. We start by making the bush plants.

Use the "Marker" tool to draw a bush shape with the base color of your choice. Compare the size and angle with the grass and cube objects.

Next, add a lighter color on top of the shape to giving it a sense of dimension.

After that you can add details using other darker colors such as purple and brown as shadings.

#6 Drawing a Tree

Now let's apply the technique of the bushes to draw a tree.

 

First, draw a tree shape with the base color. In this stage I drew the leaves in green and the stems in brown.

Next, add a lighter color to create dimension. Use the cube as an angle guide.

Now the tree shape looks more dimensional. Add dark colors like purple and brown as shadings. Then add other colors to give details.

Our tree is almost finished. For the final touch, make the trees blend in more with the grass background. Add grass stripes at the bottom of the tree.

#7 Building Tilesets

Once you have the grass, bushes, and trees objects. We can already build tilesets.

We start from the grass tilesets. Make a selection on the 9 tiles as shown in the image below.

Then fill it with an earthy base color.

Next, create a grass area in the middle like in the image below on the new layer.

Draw a grass texture as before over the entire grass area.

Shape the edges of the grass area to make it look more natural with Eraser.

Next, add a shadow under the grass area with a dark color.

Finish with a lighter color to make the soil more textured.

Next, join all the layers in making these grass tilesets. Then select the first tile in the top left at 32px by 32px.

Click the "Copy" icon in the bottom bar. Then create a new layer and click the "Paste" icon in the bottom bar. Now we have one separate grass tile.

Do this step for the remaining 8 grass tiles.

Now we have 9 separate grass tiles that can be duplicated and further arranged to form our desired environment.

Next up is building the tilesets for the bushes and trees. The steps for both are the same, so I'll just show you creating tree tilesets instead.

Select the tree layer then press and hold until the options menu appears. Select "Duplicate Layer".

Move the copy of tree to the right tile. Then duplicate the tree layer again.

Adjust the copy of the tree so that it is the same position (pay attention to every fraction of a pixel) on each tile.

Now, we have clustered trees. Open the layers panel. Then merge the copy trees layer by clicking the icon as below.

Next, we divide this tree cluster into three separate tiles. Select the central of tree cluster with a 32px by 32px rectangle selection.

Click the "Copy" button on the bottom bar. Go to the layers panel and create a new layer. Click the "Paste" button in the bottom bar and we have one tree tile separate from the cluster.

Do the same for the remaining two tiles until we have three separate tree tiles.

#8 Laying Tilesets

Now let's try to arrange the tilesets we've created so that it becomes a Forest environment. The method is very easy, we only need to duplicate the tile layer we need.

Then place the tiles in specific places so they connect to each other and form an environment.

Keep all the grass tiles on the bottom layer.

Repeat this step for each tile element we need. Keep the bush tile and all tree tiles above the grass layer.

Let's now see when all the layers are unlocked and all the tiles are connected to form the Forest environment.

#9 Exporting and Publishing Image

Our work is complete and now we are ready to export and publish it. But we need to note first that the image size is currently only 128px by 128px which is too small to be published.

Therefore we must first resize the image without destroying the quality of the pixels.

Go to Edit menu > (scroll) Change Image Resolution...

A pop dialog will appear. Resize the image to 1080px by 1080px or the size you need. Then in the interpolation method section select "Hard edges" to maintain the quality of the pixels so that they don't generate noise.

The image will be zoomed in and you will get more pixels in the image.

Now let's export the image to PNG for easy viewing on various digital platforms or applications.

Go to File menu > Export (Single Layer).

Then select PNG as the export result. Agree to all existing settings if you do not plan to add other export settings.

The export file has been saved in your phone storage.

The most interesting thing about the mobile version of Clip Studio Paint is that we can immediately publish our work to social media with easy steps.

Go to File menu > Quick Share...

A pop dialog will appear. Then choose the social media where we will publish our work. For this occasion I chose Twitter.

The system will connect and open the Twitter application to create a new tweet with our work attached.

OK! That's all I can share. Hope it is useful and please support me to make more tips.