Upcoming Events
VIEW Conference 2009
11/4 - 11/7 @ Turin, Italy

Project Horseshoe
11/5 - 11/8 @ Burnet, TX

Independent Game Conference West
11/5 - 11/6 @ Los Angeles, CA

IGDA Leadership Forum
11/12 - 11/13 @ San Francisco, CA

More events...


Quick Stats
5631 people currently visiting GDNet.
2337 articles in the reference section.

Help us fight cancer!
Join SETI Team GDNet!



Link to us

Link to us

  search:   

Creating Minimal Pixel Art with Photoshop (Part 2)


Introduction to Layers

I think this is a good time for us to move on to Photoshop's Layers Palette. Layers are one of the greatest features in Photoshop. I've been using Photoshop since v 3.5, which did not have layers. Everything had to be done on one surface, and with only one Undo and no History Palette. Haha, look at that, I'm talking like the grandpa talking about how he had to walk 5 miles in blizzards to school uphill both ways. I'm just trying to let you know that these are great. In v 4.0, Layers came along, and have been indispensable since. I use many of them in almost all Photoshop activity, pixel art or otherwise.

So what are Layers? Well, I guess they can be described as stacking digital transparencies, except you can do almost anything image related with them. Layers can give you as many options as you use them to give yourself. They allow for greater control and non-destructive image editing. What you put on different layers, you can easily select, move around, remove, duplicate, change the opacity of, shift above or below other layers, and do a number of other useful & creative things with. By default, new windows will have a white "Background", but you can change this in Photoshop Preferences, or each time you create a new document to open, as Transparent, like we've been doing all along.

New Layers fill the image window completely and transparently. You can add as many layers as you like, or as many as your computer can handle. There are many benefits to be had from keeping portions of your work on separate layers, and the main reason is that you give yourself options and can work in ways that build on previous layers without altering their contents. You can even combine the contents of different layers with the different blending modes available in the Layers palette, and I'll talk about that later.

In case your Layers palette is not open, go to "Window" > "Layers", or hit "F7" (on both Mac and PC).

In the screenshot below, the Layers palette example is the one that contains the graphics used in my examples of the first part of this tutorial. I simply made new layers for each example, and turned off the ones I wasn't using when saving my individual images to demonstrate what I was talking about.

Only the layer containing this graphic is "turned on" so this is all that is showing.

Turn Layers on and off with the eyeball icon to the left of each layer.

I'll turn on more layers and let’s see how that looks:

This time I turned on all the layers (except the top one) so you could see that they all just stack on top of each other and you can see down through the transparent sections.

This would look differently if I switched the order of the layers in the Layers palette.

Notice that layer 3 here has a little icon of a lock. This is because you can lock layers in different ways with those little icons next to "Lock:" up top. I usually only wind up using the Lock Transparent Pixels on the leftmost side. I do this because if I lock a layer's transparency, I can fill what's on the layer already without actually having to select anything. Filling a layer, locked or unlocked, is the same as filling a selection like we did before. Choose a color and fill with the keyboard by pressing "OPTION" + "DELETE" on Mac, or "CTRL" + "BACKSPACE/DELETE" on PC.

Make a "New Layer" in the layers palette. On the bottom section of the layers palette, you'll see some more icons. If you have Tool tips turned on in Photoshop's General Preferences, you can hover the mouse over all of these and see what each one is for. In the following exercise, we're just going to use the "New Layer" icon on the lower right. It looks like a little sheet of paper. Click this with the mouse and a new Layer will be created on top of the currently selected layer. In the example above, a new, blank layer would appear above "Layer 6."

A keyboard shortcut for making a new layer is "COMMAND" + "SHIFT" + "N" on Mac. "CTRL" + "SHIFT" + "N" on PC. Take a moment to make a new layer in a new or existing document just to try both of these methods out.

Other ways to make new layers are to Paste something new into your document, Drag an image from another file onto your current document, by Duplicating an existing layer, and by Typing with the text tool. In the following examples, I will go through all of these processes.



Exercise #6: Layers


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