If you find this article contains errors or problems rendering it unreadable (missing images or files, mangled code, improper text formatting, etc) please contact the editor so corrections can be made. Thank you for helping us improve this resource

In the above example, I put all of the different types of elements on their own layer. Grass is one, flowers are all on one, etc. You can see in the Layers palette on the right what is positioned
where. You may also notice that each layer has a name. This doesn't happen automatically, aside from the default names "Layer 1", "Layer 2", etc. I find it to be a very good idea to name your
layers.

I'll quickly run through the process of making this image:

I opened the new file, zoomed in, chose a color and filled the background layer using the keyboard ("OPTION" + "DELETE" on Mac). Then I made a new layer, used the Lasso tool to draw the grass
shape, looping the selection around the bottom of the window, and filled it with green. In a new layer, I drew cloud #1 with the Lasso tool, filling it with white. New layer, I drew cloud #2 with the
Lasso tool, filling it with white. New layer, I drew the flowers all on one layer using the Pencil tool only. I also used the Eraser tool (E) to remove pixels when I needed. (with the Eraser
tool set to "Pencil at the smallest brush size, 1 pixel). Next, I made a new layer, I drew the cat with the Pencil & Eraser tools. In the final layer, I drew the fly with the Pencil, so the cat
would have something to play with.

This was looking good to me. I decided to change the Opacity of the clouds, so they wouldn't look so stark white. That also looked nice, but I wanted to demonstrate changing opacity. Each
layer has controls on top of the Layer Palette. I selected the layer with Cloud #1, and changed its opacity to 63%. I changed the second cloud layer to 67%. Then I decided I wanted to overlap clouds
to give the illusion of depth. I made another new layer, drew a cloud with the Lasso and filled it with white. Since it’s on its own layer, I was able to change its position by moving it around
to a new spot. I then changed that layer's opacity to 40%. As you can see, the overlapping semi-transparent clouds make some unique effects.

Just for some more examples of my use of the Layers palette, here are a few palettes from files I made for our games:

The one on the right is from the original game map file of Ratmaze 2, a portion of the Layers palette, which is the the graphic aspect of thegame and all of its elements That palette also shows that you can color code your layers to help you organize & categorize. Choose colors in the LayersProperties. Click the little arrow on the top right of the Layers palette & you shoud see it, along with a bunch of other Layer options. Notice what else is in there & try other options outsome time.

Exercise 7: Moving & Selecting Layer Contents

One of the most useful things to be able to do is moving things around on layers.

If you still have the last file you created open, go to it, and select any layer in the Layers palette. Hold down "COMMAND" on Mac or "CTRL" on PC and proceed to click anywhere in your document
and drag the contents of that layer around. If you hold SHIFT and drag, the movement will be confined to straight horizontal, vertical and 45 degree angles. Try it out, it can be very useful
to apply at times.

You can also move the contents of a layer using the Arrow Keys. Hold down "COMMAND" on Mac or "CTRL" on PC and tap or hold the arrow keys. The layer contents should move. If you hold SHIFT
down while tapping an arrow, each movement will cover more area. Make sure you've got a layer selected that has something on it, and that your layer is not locked

There's also a "Move Tool" (V), which I rarely use due to the convenience of using a keyboard modifier as I just described to any tool. The move tool is also a Transform Tool, but I use the
keyboard to access Transform options as well. I'll talk about Resampling images soon.

If for any reason you don't get the desired result you're looking for with layers; moving, filling, deleting, drawing on, changing options for, these are the most common reasons I come across: The
layer is locked. I've got the wrong layer selected. There's nothing on the layer I have selected. There's a selection that's hidden and I'm trying to do something outside of it (which won't work).
Sometimes I accidentally switch the editing mode to "Quick Mask" above the Color Selector in the Tools palette accidentally, and nothing works. Sometimes if I can't figure it out, I restart Photoshop
or my entire computer. This has fixed weird control-loss problems a few times.

Another way to move layer contents around is vertically. You can click and drag layers in the Layer Palette moving them above and below other layers, so their contents appear in front of or
behind the contents of other layers.

There is also a very handy way to select different layers on the fly while busily working in the image editing space of your document. On Mac, hold "COMMAND" + "CONTROL" and click any part
of the content which is on the layer you want to jump to (I can't find this option on PC). This will pop up a little menu like this:

As you can see, I've clicked on the "grass" Layer, and the little menu came up. The "sky" Layer is an option since it extends behind the "grass" Layer. In this menu, "grass" is on top and selected
by default since it is on the upper layer. This feature is so helpful, especially when you're working with large files consisting of many unnamed layers.

There's yet another method of selecting; clicking a Layer with the "COMMAND" key pressed on Mac, "CTRL" on PC. Make sure you click inside the "frame" or box shaped area of the Layer that
represents your document window.

So, try that. You don't even have to have a specific Layer selected to select a layer's contents in this way. Just choose one where the content doesn't fill the layer completely so you can see it
actually work on a shape.

You can also use this to do some detective work in your own file. If I have large files and don't see anything change on a Layer when turning the layer on or off, and it's not named, I'll Control
+ click the Layer to see if anything gets selected. If there's nothing on the layer, there will be a "No Pixels were Selected" message.

Let's Take a Break

Do you take breaks often? If you spend days and nights on computers, which is what I've been doing, don't forget to take breaks! Once every hour or two for 15 minutes or so makes a big difference
in my own level of energy, focus and enthusiasm for any project I work on. Plus, just like in any art creation, stepping away from your work now and then allows you some perspective on what you've
been focusing on. We lose sight of the big picture focusing on details. If there are any fundamental changes that need to be made, seeing this sooner than later is helpful.

Choosing the scale of your pixel art

Before I move into the next section, I'd like to show you what that cat/bug/flower image looks like at different sizes. The same pixel art has a different impact & style depending on the size
your pixels will be seen at. To illustrate this, I rearranged and Cropped the image using the Crop Tool © to focus more closely on the "actors" on my stage.

1x1

2x1

3x1

4x1

5x1

Exercise 8: Resizing Images (aka: Resampling Images)

Do you like Math? I'm not the greatest at it, but luckily resampling pixels requires only the simplest math; adding, subtracting, multiplying and/or dividing. When Resampling your images,
whether it's the entire canvas, or individual elements in your image, you must use pixel width and heights that are basically multiples of the existing size. If you want to retain the pixel purity of
your artwork, that is. Resampling to arbitrary sizes can lead to some off, non-square pixels and generally mess things up. I recommend you try that out too, just to see what kind of results you
get.

Resize/Resample your entire image by choosing "Image" > "Image Size" (or "OPTION" + "COMMAND" + "I" on Mac). This should bring up the Image Size palette.

If you altered your preferences as I suggested in Part 1, "Nearest Neighbor" should be already selected for "Resample Image". If it's not, you should go to Photoshop's General Preferences
right now since this will affect resizing & transforming specific elements within your file as well. 72 DPI (Resolution) is what you want for a computer screen.

So, stick to multiples of your pixel numbers. For example, if you have a 50x50 image and want to increase the size, you can easily go to 100x100, 150x150, 200x200, 300x300, 500x500, etc. I'm sure
you get the picture. You can have odd numbers, such as 384 pixels by 428 pixels, and you can properly resize them too, but stick to the proper multiple or divisible numbers. If I reduce that image
size by -4x, the new pixel dimensions work out evenly to 96 pixels by 107 pixels. This should make a perfect reduction.

If you want to Resize particular elements in your file, say if I wanted to resize that cat above I would use the Transform command. If you want to follow along, make a small drawing
on a larger layer, less than half the size of the layer. Now choose "Edit" > "Transform" > "Scale", or press "COMMAND" + "T" on Mac, "CTRL" + "T" on windows. This should make an outline
selection appear with little "handles” at the corners and the center, like so:

With this, options will also appear up on the top of your workspace for the Transform Tool:

For pixel art, I just use the width and height percentages to increase things with nice even numbers. Play with this and see what you can get away with. Sometimes the math of a percentage or
entire image resampling seems to work out but the image gets distorted anyway. So, in this instance, I transformed the kitty to 500%, and made sure that little chain icon was clicked, which is to
"Constrain Proportions".

And if you need to resize something to an odd in-between size, you might just have to deal with some re-touching of your image by hand, if the distortion isn't so bad. It sometimes can be
worthwhile to consider the final output size you're going for when designing your images.

Conclusion

Well, that's all the time I've got for part 2 of this article. I really thought I was going to be able to cover all of this in one article (haha) but it's looking now like I'll have to continue
this in a third (and final!) article. In part 3 I will cover a few more of the tools such as the Paint Bucket, & the Line Tool, Using the Hue/Saturation and Levels controls, some more advanced
(and easy) ways of creating pixel graphics from photos and other existing imagery, Working with Pixel Type, Indexing Color Palettes and Saving files as Gifs. That's a lot still… a third
article will be out in one or two weeks. I really must spend time wrapping up may part for Dino Run, the next Pixeljam game that is getting close to completion.

If you have questions that need answering on anything covered so far, I may do a Q&A type of article with the most frequently asked questions later on. You can email "mailto:rich@pixeljam.com">rich@pixeljam.com. I may or may not get to that Q&A article. Or I may email you a response directly if I have time.