Upcoming Events


Quick Stats
5570 people currently visiting GDNet.
2236 articles in the reference section.

Help us fight cancer!
Join SETI Team GDNet!



Link to us

  search:   

Creating Minimal Pixel Art with Photoshop (Part 3)


The Line Tool (U)

If you want to make straight lines, the Line tool (U) is one choice you can make, and it may seem like the obvious choice, but I rarely use it. I'll show you why below, but if you don't care why, jump down to Exercise 9: Drawing straight lines using the Pencil tool.

So, back to the Line tool. The one thing I like about the line tool is that you can see where it's stretching as you prepare to lay your line down. If you want to try it out, make sure you have its settings set as I mentioned in part 1 of this tutorial, because it's got a few other shapes and different options it defaults to, such as drawing vector paths, which won't work so well when making handcrafted pixel art. For easy reference, here are the settings I suggest:

Select the Line tool, click & hold on any spot in a Photoshop document, drag your line to a new spot, let go. Your line is drawn. Easy. As you drag, the line tool will have a helpful outline to show you where it's stretching to. Try it out. To constrain the line to straight horizontal, vertical or 45 degree lines, hold "SHIFT" when drawing your line. You'll see the line tool snap to those angles. These lines will look the best in Photoshop. Other angles may not look quite so good. Below is an example of a bunch of different lines made with the line tool. Some look good, some don't look very good as far as straight lines go.

Let's look at this for a moment. As you can see, some of the lines look pretty good, some look kinda rough. Irregular surfaces, doubled pixels in spots that don't seem necessary, etc. This is the line tool doing its best to make these angles while Aliased with so few pixels. Both of the orange lines are actually true 45 degree lines, made by holding the SHIFT key. The reason the one on the right is doubled in thickness is because the Line tool results will vary depending on your starting point. In short, it's due to the computer display being made up of a grid itself, and the line tool just doing its best to make a 45 degree angle based on where I clicked in the first place & where I let go.

Given that the Line tool seems to make poor decisions on where to place pixels, and doesn't always keep to my "1 pixel" setting as well as I'd like, I don't use it. I find that the Pencil Tool does a much better job of making straight lines, particularly at odd angles, and keeping true to the "1 pixel" setting. The trick involves (drum roll please...) the SHIFT key. What a versatile modifier key! Let's draw some lines using the Pencil tool and the SHIFT key.

Exercise 9: Drawing Straight Lines with the Pencil Tool (B)

Open a new document, whatever dimensions you like. I'll make mine 200x100 pixels like the one above. Choose a Foreground color & select the Pencil tool.

To draw a straight line, start by clicking once somewhere on one side of your document, leaving one pixel in that spot. Next, hold "SHIFT" and click somewhere on the other side of your document. Viola! A pixel line is born. If you want to make a line from the last point you clicked, just hold "SHIFT" again and click another point. Or, if you want to start a new line, just click somewhere new without holding shift, and repeat the process. Easy! I don't think an example is necessary.

So, what's the benefit of making lines this way? Speed, precise control and smoother lines. The Pencil tool has a much better ability to make lines without bunching up on unnecessary pixels. I imagine it's partly because the starting and ending points are exactly rooted in specific cells on the pixel grid of your document. I will take the above Line tool example image and draw lines with the pencil tool on a new layer above it, starting and ending exactly where those lines start and end to see what kind of results I get...



So nice! Clean 1-pixel lines. No doubling up whatsoever, no mess to clean up. Pencil is my hero!

Hopefully that illustrates my love for the pencil tool clearly enough.



Exercise #10: Paint Bucket


Contents
  Introduction
  Exercise #9: Straight Lines
  Exercise #10: Paint Bucket
  Exercise #11: Hue/Saturation & Levels
  Exercise #12: Playing With Pixels
  Exercise #13: Pixels and Colors
  Exercise #14: Tracing Existing Images
  Exercise #15: Saving Images as GIFs
  Conclusion

  Printable version
  Discuss this article

The Series
  Part 1
  Part 2
  Part 3