Upcoming Events
Southwest Gaming Expo
11/20 - 11/22 @ Dallas, TX

Workshop on Network and Systems Support for Games (NetGames 2009)
11/23 - 11/25 @ Paris, France

ICIDS 2009 Interactive Storytelling
12/9 - 12/11 @ Guimarăes, Portugal

Global Game Jam
1/29 - 1/31  

More events...


Quick Stats
9895 people currently visiting GDNet.
2341 articles in the reference section.

Help us fight cancer!
Join SETI Team GDNet!



Link to us

Link to us

  Intel sponsors gamedev.net search:   

Creating Minimal Pixel Art with Photoshop (Part 2)


Welcome to part two of my Minimal Pixel Art Tutorial. I hope you are enjoying it and finding what I'm talking about educational. When we left off I was making selections with the Marquee tool, adding to and removing from selections, and filling them in with color. Now we'll continue on with Selections of different types. Let's take a look at the lasso tool as a different method of selecting areas and as a tool for drawing as well. If you need to set Photoshops's preferences and tool options again as I covered in Part One, I'd recommend doing that now (turn off Anti-aliasing and Feathering).

Exercise 4: Selecting & Drawing with the Lasso Tool

The Lasso Tool (L) is something I use just as much as the pencil for drawing. If I'm plotting one pixel at a time, the pencil tool is the right choice. If I'm looking to make a larger irregular shape consisting of more than a few pixels, the lasso tool is my choice for the degree of control & fluidity it offers. Let's get familiar with the basics of the tool first.

Open a new window, 50x50 pixels or something around that size, with the Background Contents set to Transparent. Zoom in. Choose the Lasso tool. In one continuous movement, draw an irregular shape. Make sure to close the shape off, meaning try to connect with the starting point of your lasso selection. If you stop somewhere away from the starting point, the selection will close itself off in a straight line from the start point to the end point. I'll show you an example below of a shape I drew, and also a similar shape where I didn't close off the selection and what happened to that.

a successfully completed selection.

I let go in mid-selection & it closed itself.

Since this is a selection, just like as with the Marquee tool, we can add and subtract from selections with the Lasso tool, or any other selection tool. Hold "Shift" and draw some more to add shapes to this selection, or hold "Option" on Mac ("Alt" on PC) to subtract shapes from this selection. In this case, I smoothed out a couple extra blocky spots by removing a few small areas here & there.

Now, as with any selection, you have many options. You can move it around using the Arrow Keys, or, if a selection tool is still active, you can grab a selection anywhere inside itself and just drag it around. You can fill it with color, like we did in the last exercise; you can invert the selection and fill the outer space with color like we did before as well. Another useful option for selections is that you can "Stroke" it! Let’s do that.

Stroking a selection: Choose "Edit" > "Stroke..." and you'll get a window like this:

Change stroke width, set where you want a solid outline of pixels to appear. The color will be what the foreground color is, or you can change it here. I usually work with single pixel strokes. Once you start stroking with greater pixels than one the shape starts to become blocky and less like my original Lasso shape. It's worth experimenting with on your own though. Setting the pixel width to two or more pixels may be something useful for you. See some examples below.

Stroke Inside, width = 1 pixel

Stroke Outside, width = 1 pixel

As you can see, stroking inside of a selection with 1 pixel gives a much cleaner line, without hardly any overlapping pixels. Both The "Inside" and "center" stroke option actually gave the same exact results in this case. Stroking outside the selection with 1 pixel creates many of overlapping pixels. This might be a better option depending on what you're going for. Experiment with the options.

Why use the Lasso tool to make that shape above? Why not just use the Pencil tool? Because the Pencil tool will create extra overlapping pixels in my shape, similar to the example on the right above. I'll try drawing a similar shape with the pencil and see what I get.

an irregular shape using the Pencil tool only

The pencil basically gives less control when drawing continuous lines freehand like this. It has more choppy, blocky results than stroking inside a selection. I like to have precise control of what pixels are going to appear where. There is usually some cleanup involved either way (deleting unnecessary pixels from here or there) when trying to automate tasks. I use both the Lasso and the Pencil tools often, and over time I learn what does a better job for what I'm trying to do in each instant.

Getting back to the Lasso tool, there's another way to create shapes than just making one continuous freehand motion from start to finish: Turning the Lasso tool into the Polygonal Lasso tool on the fly. Sometimes it just isn't practical to draw a complete freehand selection, if the shape is large or complex for example, or if the shape has some straight areas that drawing freehand just wouldn't do well. This is achieved by 1) clicking anywhere with the normal Lasso tool, 2) holding the Option key on Mac (Alt on PC), 3) releasing the mouse button, 4) stretching a line to the next point and 5) clicking the mouse button again. You can do this at any point when drawing with the Lasso. In the middle of a shape, you can hold Option/Alt down, let go of the mouse button, stretch it to a point, hold the mouse button down again and continue drawing freehand. Let me show you some examples of selections that use this method, and a combination of methods.

All stretching and clicking makes a polygon. click, hold option, stretch click, stretch, click, repeat.

I started out drawing freehand on top, then held option, stretched down to the bottom, clicked mouse once, stretched back up, clicked & held the mouse button to continue drawing freehand back to the starting point.

Yes, there is an actual "Polygonal Lasso Tool" as well that you can choose, instead of the normal Lasso tool, but since I can get the same results with the normal Lasso, I just use that. There's a "Magnetic Lasso Tool" as well, which I don't use at all. Try 'em out if you like.

Note: Holding "Option/Alt" while drawing is also very useful if you need to let go of the mouse button for a moment when drawing a shape with the Lasso tool and don't want to lose your place and have the selection complete itself prematurely. You don't always have to stretch to a new point, you can just see it as a "pause" option of sorts. Maybe you've reached the edge of your mousepad, for example, and need to reposition the mouse. Holding option while in mid-selection will allow you to release the mouse button & reposition the mouse until you're ready to press it again. You can hold option for the whole time if you like, after the first click of the mouse. Experiment on your own and see the benefits for yourself.



Exercise #5: Magic Wand


Contents
  Exercise #4: Lasso Tool
  Exercise #5: Magic Wand
  Introduction to Layers
  Exercise #6: Layers
  Exercise #7: Layer Contents
  Taking a Break
  Exercise #8: Image Resizing
  Conclusion

  Printable version
  Discuss this article

The Series
  Part 1
  Part 2
  Part 3