NAVIGATION:

 

SUPPORTERS:

FlashComponents
  Flash Templates
  Flash Gallery
  Flash Slideshow
  Flash Menu
  Flash Design
  Flash Video
  User Interface

 

FOLLOW:

RSS it down! Twitter it up! Facebook it like a fiend!

 

 

 

 

 
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:
ben_ben26@hotmail.com

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. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.

Flash Transition Effects

Flash Effect Tutorials

Digicrafts Components
The best flash components ever! Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com
Streamsolutions Content Delivery Networks Flipping Book - page flip flash component.
Learn how to advertise on kirupa.com

cdn
content delivery network (cdn)