Creating
Pixel Art Lines
         by b3nkobe aka Ben Watson   |   18 January 2005

Introduction:
Well since there were a lot of people on the Kirupa Forums asking ‘How do you create pixel art?’ or ‘do you use paint or Photoshop?’ I thought that I would create a few basic tutorials on how to create just the basics in pixel art; hopefully these will come to help some people and help them improve their skills in pixel art. Anyway in this first tutorial, ill show you some basics of how to create ‘Pixel Art Lines’.

Quick Note: Something quick before we start. To create Pixel Art, you can use various programs from basic ones such as Microsoft Paint to the professional Adobe Photoshop. I tend to use Adobe Photoshop & here are my following reasons:

  • The option of having ‘Layers’ is a must! The Layer feature in Photoshop is very helpfully for creating pixel art, you’ll find out why in the next few tutorials.
  • Having transparency in Photoshop is another great feature for pixel art! It helps a lot with windows, water, and creating shine effects on buildings. Again you’ll find out more about this in the further tutorials.
  • Also the large colour range in Photoshop is a lot easier to use than Microsoft Paint.

Alright, now we are ready to begin this tutorial. Creating the perfect lines in Pixel Art are very important especially in the end product making sure that everything aligns correctly and matches up.

Here's How:

  1. Open Adobe Photoshop à Create a new document depending on the size of your creation. (If creating Pixel Art for KirupaVille then please use the templates provided!)
  2. Select the ‘pencil tool’ and set it to 1px, then choose your desired colour.
    Just like in [Fig 1.0 Below].

[ select the pencil tool with diameter 1 px ]

  1. The main rule in pixel art is: 2 Over, 1 Up. Obviously when creating things such as circles and curves the rule will be broken, but we will learn about that later.
     
    Now create a new layer, having different lines on different layers is messy but it helps a lot  zoom right into the canvas or close to. Draw 2 pixels next to each other then go up one, 2 over and draw another 2 pixels and so on. It should look similar to [Fig 1.1 Below].

[ Above Fig 1.1: Left image zoomed in, right image what normal person will see ]

  1. If your image turned out something similar to [Fig 1.1] then you’ve just created your first pixel art line. By using this method we can create basically anything that’s square in isometric pixel art.
  2. Now that you have learnt the 2 Over, 1 Up rule, we can now do the 2 Up, 1 Across rule. This rule is just opposite to the other rule and it comes in handy when creating roofs or even pixel art letters such as ‘K’. It should look similar to [Fig 1.2 Below].

[ Above Fig 1.2: Left image zoomed in, right image what normal person will see ]

Tutorial Done:
Well if yours turned out similar to mine in the images, then you created your first pixel art lines perfect! These pixel art lines are the base for everything that you will create later on in your creation. You can now move onto ‘Tutorial 2: Creating a Pixel Art Building’.

Last Words:
If you are having troubles with anything in this tutorial, then feel free to contact me, either Private Message me from the kirupaForum, or contact me at:
[email protected]

The image “http://www.kirupa.com/forum/images/smilies/d_smile.gif” cannot be displayed, because it contains errors. Ben Watson aka b3nkobe




 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.