In this video I'll be explaining what the best sizes are for your pixel art.Thanks for watching, and enjoy the video!Intro: (0:00)Part 1: Deciding on. Free online editor. Animated sprites. Create animations in your browser. Important notice: Piskel accounts are going away, the editor stays. New accounts can no longer be created after August 1st 2021.

Documentation

Quick usage

To use the quick default configuration you need an element from where to draw the image and canvas element with the id pixelitcanvas. Then load the pixelit.js script and apply it on an image.

Options

You can pass some options when creating the instance (you can alter them later using the api methods).

Create 8-Bit Style Pixel Art from image online with our tool, you can create an animated gif with 8 bit art style from one image. The Pixilart Drawing Application is your ultimate pixel drawing tool. Make beautiful pixel art, create game sprites, GIF animations and even draw online together with others. Pixilart can even be used for external images. Just open and start editing your artwork.

API

You can chain all methods together, beware that the order they are applied can change the final result.

Applying first the color palette and then the greyscale can give a slightlity different image.

.draw() draw to canvas from image source and resizes if max height or max width is reached

.hideFromImg() hides the from image element, is applied on object creation

.setDrawFrom(elem) elem to get the image to pixelate

.setDrawTo(elem) canvas elem to draw the image

.setFromImgSource(src) change the src from the image element

.setpalette(arr) sets the color palette to use, takes an array of rgb colors: [[int,int,int]], int from 0 to 255

.setMaxWidth(int) set canvas image maximum width, it can resize the output image, only used when .resizeImage() is applied

.setMaxHeight(int) set canvas image maximum height, it can resize the output image, max height overrides max width, only used when .resizeImage() is applied

.setScale(int) set pixelate scale [0...50]

.getpalette() returns array of current palette, can't be chained

.convertGrayscale() converts image to greyscale, apply only after .draw is called

.convertpalette() converts image with the defined color palette, apply only after .draw is called

.resizeImage() resizes the output image if bigger than the defined max Height or max Width

.pixelate() draws a pixelated version of the from image to the to canvas, , apply only after .draw is called

.saveImage() saves/downloads current image

Jump To:

1. Start with pixel art
2. Making the character

Objective

Main objective of this blog post is how to create Pixel Art in Photoshop

Step 1 About Pixel Art

Pixel art has picked up after the massive success of Flappy Bird game. As a designer I was quite intrigued about how to make pixel art easily. So after learning how to make pixel art, I have decided to write a blog such that other designers can easily understand how to create pixel art in Photoshop.

So, this Blog is specially posted for the PIXEL Lovers. Rather than just playing with the pixels it feels awesome to create your own pixel art and to see it at work in your games. Being a graphics designer I must have knowledge about all types of graphics and PIXEL art is one of them.

I believe all the ‘80s and ‘90s born are quite aware with this small amazing square. The Japanese multinational companies like 'NINTENDO', 'Konami' and many more entertained us with their earlier 8-bit graphics game like Super Mario Bros, Duck hunt, Super Contra etcetera.

Step 2 What is Pixel?

The Smallest individual unit of your display is Pixel. Pixels are too easy to understand, but to play with it is little difficult. Creating something with pixel is easy, but make it look live is tricky.

Here, I will give you some easy techniques to create your own pixel art using Photoshop. We will create a pixel character for our demo.

Step 3 Start with Pixel art

Pixels in Action - A Detective

3.1 First comes Drawing!

To get started with pixel art you must be clear with what you want to create. For this blog, I will be creating a pixel character.

We will start with following steps:

1. Before I get started, I prefer to collect 10-20 reference images related to character I want to create.
2. Generally I select the best 2 or 3 references and draw my own character keeping in mind the requirements.
3. First define the body proportion for your character; you may sketch it on paper first to get best result. I always do that.
4. I am going to create a character of a detective over here. I have already drawn the character on paper and then traced it in Photoshop, so the character looks like below image.

3.2 Preparing Photoshop to help us create awesome Pixels graphics

1. Let’s open the Photoshop and go to
edit menu -> Preferences -> Guides, Grid & Slices…

2. Set gridline at every 1 pixel and also subdivision 1 pixel. Keep remaining settings unchanged. This change will help you to draw pixels on document.

3.3 Create New file of 100 x 100 Pixels

Create new file, set document height and width 100 X 100 pixels.

Remember, while dealing with pixels, your document size matters a lot so always choose doc size wisely depending on the thing you are going to create. As I suggest, keep it as small as possible so that individual pixels can be seen clearly.

Here our document size 100pixels x 100 pixels is enough to create detective character.

3.4 Zoom Till Fit To The Screen

You will notice that our doc size is too small, so now we will zoom in it as much as it fits into screen. I zoom in my doc 800% and it got fit in screen.

3.5 Select Pencil Tool

Long click on Brush tool in tool box and you will get more tools to select.

Select Pencil Tool from menu. Reduce Pencil tool size to 1 pixel from Brush selection window. (You can also do it by pressing ‘{’ key in your key board)

3.6 Turn on Extras

Now turn on Extras, to do this go to view menu - > Extras. (You can do it by pressing Ctrl + H). It will help you to put pixel at particular position.

3.7 Take Eraser Tool And Select Pencil in Erase Mode

Select Eraser tool from toolbox and select pencil in erase mode as shown in image. You may need different size of eraser so resize it as per your need.

Pixel Art Login

Our basic set up is ready now and we are ready to go!

Step 4 Making The Character

4.1 Drag Your Sketch And Create New Layer

First of all Drag your sketch to Photoshop document and Create new Layer, Put Guide in a center of document (Center of your character) it will help us later.

4.2 Start Drawing With Pencil Tool on Half Side

Now start drawing with pencil tool in new layer on existing sketch. Draw only one side of guide. It’s recommended to use full zoom in while drawing pixels and 100% zoom to check your character view.

Remember the sketch we are using as reference is not 100% accurate, so don’t follow all the pixels that you see in reference sketch. At this time you need to give the best finishing edges to your character. Use eraser whenever necessary.

Now Create copy of layer by right clicking on layer and select duplicate Layer (Ctrl + J)

• Select second layer and go to edit menu -> Free Transform. (CTRL + T)

Pixel Art Maker

4.3 Copy The Layer and Flip it Horizontally

• Flip the second layer and join with first one. To flip right click on layer and select Flip Horizontal. See the bellow ref image.
• In above second image I have put space of two pixels between both layers, it is just to fix the proportion. Fill it with pencil in any layer and merge both layers.
  

4.4 Merge The Layers

• To merge the layers, select both layers then right click on any on layer and click on “Merge Layers”.
  
• Hide the reference layer and turn off extras, see the result. Overlay black color on layer. Check out your creation in 100% zoom to see the actual result.
• We are done creating our detective. So now it’s time to fill the colors, for that simply select Paint bucket tool (Press G) and pickup color you want to fill, and fill the portion with it.

4.5 Character After Coloring

My detective looks like below after coloring.

We have made our awesome pixel detective. But the story is not finished yet, we have to add more details to make our character come to life. I’ll talk about those things in my next blog post.

Our final character will look like following image after we give all the detailing.

Step 5 Final Result After Giving Some Details

I hope you find this blog is very interesting about Pixel Art graphic. Please feel free to contact me if you face any issues or have any questions regarding Pixel ArtGraphic comment here and we will help you ASAP.

Got an Idea of Pixel Game Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Game Development Company in India.

I am 2D game graphics designer at TheAppGuruz, I designed graphics for many 2D games. Here I am writing blog about one of my favorite concept of 2D graphics; love to share this with you.

Pixel Art Color By Number