Tips to Make 2d Pixel Art in 24bit or 32bit?

INTRODUCTION TO PIXEL ART

Reckoner graphics and digital art equally we know them today have a root, and that is pixel art.

Back in the twenty-four hours, at that place wasn't a 'Pixel Art' style because every art made on a computer needed to be pixel-by-pixel artwork.

Every bit computers evolved, the capability to return images became more advanced, enabling digital artists to create without the limitations of quondam hardware.

Creating art with these limitations in mind is the core of pixel art equally an art form.

While no longer a necessary approach, forcing yourself to create in the boundaries of an old applied science or ready of techniques can help you as an

artist.

Below are some examples of my exploration with pixel art.

In this commodity, I'll highlight some characteristics, basic techniques and guidelines so you lot tin showtime making your own pixel art.

All the data hither can exist practical to whatsoever 'style' and any software. And that's the beauty of this discipline.

The technical side of this art form is important, peculiarly if you want to make an homage of a video game.

But recollect that you don't need to force yourself to create a 32×32 pixel size artwork with but iii colors, if you don't want to.

It's benign to respect the fundamentals and the techniques of one-time-schoolhouse digital artists – only information technology'south not obligatory to piece of work similar them.

LEARNING Past DOING

For this article, we'll piece of work on an outgoing challenge.

I want you to create a 64×64 pixel portrait.

That'southward it!

You lot can describe yourself, brand a fanart or invent a grapheme.
The goal is to create an artwork that can be used used as a social media avatar.

Start with a small (resolution) file size, so the pixel unit of measurement is visible. There's no bespeak to making pixel art where the pixels aren't evident.

SETTING Upwards YOUR Canvas

For this commodity, I'll be using Clip Studio Paint.
While there's great dedicated tools for making pixel art, you lot can use any drawing program to follow forth.

• Create a 64×64 pixel document (1);
• Get to View > Grid/Ruler Settings (ii);
• Configure as the following so you lot tin can see a grid with every single pixel. You can plough the grid on/off anytime using the Shift+M shortcut. (3);

A skillful practice for working with pixel fine art is getting used to cartoon zoomed while keeping an eye on the actual-size artwork (iv);

To create a secondary view of your electric current canvas, become to Window > Canvas > New Window and open a new example of the electric current canvas.
Fix it to 100% and identify in your workspace (5).

CREATING THE PIXEL ART TOOLS

Time to innovate a basic concept.

Pixel art does not continue with automatic anti-aliasing.

Anti-aliasing is a useful algorithm that smooths edges of a shape.
This is made past adding an extra row of pixels closest to the aliased edge.

As you tin can run into in the example, the anti-aliased edge (7) has an automatic gradient of pixels to give the shape a smoother contour.

The aliased edge (half dozen) is what we're looking for when creating pixel art. Later, we can soften the edges by adding anti-aliasing by manus (manually).

A rule-of-thumb when using any software to create pixel art is to disable the anti-aliasing setting in brushes, tools and transformations.

In Clip Studio Paint you accept to plough off anti-aliasing in:

• brushes (8);
• tools like Selection, Fill, Text, eg. (9);
• and during any transformation using Edit > Transform (10);

In Prune Studio Paint you already have a pixel art pen. It'due south chosen 'Dot Pen' in the Mark category (11).

This is the simplest drawing castor available. It has a fixed 1-pixel size, anti-aliasing turned off, and no pick for stabilization or color mixing.

I suggest yous follow along this tutorial using this castor only.
Subsequently in the game, you tin duplicate whatsoever of your 'common' brushes and utilise it for pixel art (as long you reduce brush size to lower values and disable anti-aliasing).

DRAWING THE LINEART

Since this will be a front end-facing portrait, I'll first the cartoon using the Symmetrical Ruler (12);

Place the Symmetrical Ruler on the Canvas and, to make sure it's on the dead-heart, use the Object tool to select it and input values manually (13);

In this case I changed the Centre Ten and Center Y values to 32, which is one-half of my total canvas size (64 pixels).

Now, select your Dot Pen again and kickoff drawing.
Since this brush tin't exist resized, information technology'due south a good idea to zoom in on the canvass you're drawing (15) and employ the duplicate view as a reference (14).

I started my portrait drawing a initial sketch to notice the structure of the caput (16) and then I started calculation details (17).

There'southward no need to employ a bluish color. I merely adopt information technology because it helps my encephalon empathise that I'm creating a rough for my concluding cartoon.

If you're done with the sketch you can proceed with the linework.

Earlier calculation the last lines, let me show you a elementary technique for drawing lines and curves in pixel fine art.

In the example below, the linework (18) doesn't await polish because there's a lot of duplicated pixels where it should be a single pixel line.

You can fix those 'doubles' (it's a term) by removing any adjacent pixels on the curve. In the instance (19), I removed all pixels marked in cerise.

I suggest you to return to your sketch and look out for those 'doubles' to clean your linework.

Do non worry if the curves don't experience correct. Just remove the unwanted pixels.

TIP: if you need to erase a pixel, y'all tin can simply switch to the transparent color (I have my shortcut fix to Ten);

In the example below you tin see the difference of the initial sketch (20) and the cleaned-upwards version (21).

Ready for another technique?

Allow's offset fixing the drawing and adjusting some curves.

Seeing the example below (22), you can find the distribution and spacing of pixels are not following a logical progression. (eg.: 3, 2, 1, four…)

While on this improved version (23), you can see a better progression of pixels to create the curve. (eg.: 1, 2, 2, 3…)

With that cognition, I advise you lot to try the post-obit exercise before standing on your drawing:

Try to describe some random lines and curves with the two concepts you just learned so far: remove the doubles and maintaining the 'pixel progression'.

This volition requite you a solid gasp in how to contour shapes in pixel art.

Below is my final linework (25).

I did some minor adjustments on the proportions and curves, and removed some unnecessary pixels to make the face more readable.

Take some time to compare with the original version (24) and try to notice where I applied the techniques.

COLORING Time

The number of colors used on a sprite (term used to describe an object in game development), depends past how much y'all desire to stay shut to a specific limitation of an erstwhile technology.

While non necessary, you lot can learn a lot nigh pixel art by limiting yourself to a small amount of colors to choose.

For now I suggest you commencement with a simple color palette. Equally a starting point, y'all tin can use the 56 colors of the palette used by the NES (Nintendo Entertainment System) videogame console (26).

The color and tone choices on this palette are not perfect, just it provides a adept starting point.

In the examples below you accept the PC-98 estimator color palette (27) and a personal one I congenital in the past (28);

Later you can get-go building your ain palette, but always recollect to keep it tight and elementary.

I first by filling my lines with some base colors (flatting).

I'yard starting with 5 initial colors, including the black linework to paint this portrait (29).

On this stage, remember to configure your Auto Select and Fill tools for the pixel fine art workflow, disabling Area Scaling and Anti-aliasing (30).

To shade (add shadows) the skin color on the portrait, you don't need to only use the darker value of a specific color;

I can potentially utilise any color available as long the values read correctly.

Here's a tip – Create a new layer on top of your layer stack, fill it with blackness and fix the layer fashion to Colour.

Now you tin use this layer to check the value relationship of your colors (32).

In the instance beneath yous can encounter how I managed to use the erstwhile groundwork color (imperial) every bit the shade color of my brown peel (31). I prefer to become with a black background to save one color…

Again, I don't demand to – but I'd like to do these limitations imposed by the NES color palette.

For the highlights on the skin and glasses (33), I don't needed to introduce any new colors considering, while checking the grayscale values (34),

I noticed the color of the t-shirt could exist used for that.

I wanted to add some transmission anti-aliasing to smooth the edge betwixt the lit and adumbral areas of the peel (36).

Using the NES palette merely, I could not find colors that I could use to create this gradient transition.

So hither'south where I abandoned the 'virtual limitations' in favor of the artwork.

In the example I added two new colours (37), so I tin can add more details to the shading.

I tin can't stress this plenty, but it's really important that you make these decisions while looking the artwork through the real, not zoomed-in, canvass size (35).

Using the two new extra colors, I increased the rendering on the confront adding more than volume, wrinkles ('cause I'm getting erstwhile) and softening some  shadows on the lit side of the portrait (38).

On the blue jacket, I decided to use the dithering technique to create the sensation of a gradient without adding colors (40).

By breaking up the solid transitions on a checkerboard design I tin brand the illusion of an inbetween color (39).

Dithering is an advanced technique and this is just a basic usage for it.

As y'all can see, the effect creates a textural effect that tin can exist a trouble if used on skin or smooth surfaces.

I constitute it appropriate to use in the jacket (fabricated of textile), because I tin can benefit from the crude texture.

Afterward some tweaking, I managed to fully paint the portrait.

I'm very happy with the last result considering I could fit a lot of details for a 64×64 pixel size artwork with only 7 colors.

ps.: I likewise had pixels and colors enough to prepare those weird-looking cartoony eyes. X-D

EXPORTING

Last, simply not least…
When saving and exporting pixel art, apply the GIF or PNG format.

Avoid using the JPEG format, especially with any level of compression.

This will destroy all the dear and care you used to create your pixel fine art.

Look at the examples below: a 99% compressed JPEG (41) may look ok from a distance, but it adds some not-wanted colors.

A 80% compressed version (42) will make whatever pixel creative person bleed. And then delight, don't do that. 🙂

When it comes to posting on social media, you have to deal with the automated-compression of the platform.

For Instagram, you'll take no selection because the system automatically converts and resizes the prototype to a low-quality jpeg.

On Twitter, you'll take a sharper, almost perfect image if the exported file is 506 pixels wide in PNG format.

That's it.

I hope you enjoyed this tutorial and also hope you managed to create your offset pixel art portrait.

Below you lot tin discover my minuscule, yet incredible, piece of art. 🙂

If you create yours, please let me know.

– dado

Creative person Contour

Hi. I'm Dado (Dadotronic) Almeida and I draw and paint ninety'due south-videogame-inspired art. As a freelancer artist I create concept and product art for games and blitheness.My indie career is devoted to personal projects like Claws and Tusks (comic) and artwork that I make for fun or commissions. I likewise similar to teach and share my discoveries about digital art, computer graphics, and mental health for artists.

https://www.dadoalmeida.com/
https://twitter.com/dadotronic
https://world wide web.artstation.com/dadotronic

huttominsou1949.blogspot.com

Source: https://www.clipstudio.net/how-to-draw/archives/161082

Share this post