Layer Basics 3

5. You can quickly select all opaque areas in a layer by Cmd/Ctrl-clicking the layer in the Layers palette. When you hold down the Cmd/Ctrl key, the mouse pointer turns into a hand with a square selection marquee (below left). The result will be that all the pixels in the layer will be selected. You will see a row of "marching ants" around the selected pixels in the layer (below right).

6. To delete a layer, click it and drag it to the Trash button in the Layers palette (below left). The result is shown below right.

Layer Basics 2

2. You can turn layer visibility on and off and completely change the appearance of an image without permanently affecting a single pixel. The eye icon to the left of each layer controls its visibility. A layer is made visible or hidden by clicking its eye icon (below left). The result is the same Photoshop document shown previously with the exception that one of its layers has been hidden revealing the white background underneath.

3. Opt/Alt-clicking a layer's eye icon will make it visible and will hide all others (below left). In the example below, the layer named "paint" becomes the only visible layer (below right). Note that the layer named "photo" is still highlighted. The highlighted layer in the Layers palette indicates that it is the active (or selected) layer. This means that all editing in the document window will be applied to the active layer.

4. Click a layer to activate it (circled below left). Now all editing in the document window will be applied to the "paint" layer.

Note that there is no change in the appearance of the document window (below right). Look to the Layers palette to see which layer is active, not to the document window.

Layer Basics 1

One of Photoshop's most powerful features is the use of layers. Each layer in a Photoshop document is a separate image which can be edited apart from any other layer. A layer can be envisioned as an image on a sheet of clear material. Together, all the layers form a stack of images:

1. Layers are managed with the Layers palette (below left). The Layers palette displays a small thumbnail view of each layer to help identify it. The appearance of a Photoshop document is a view of the layer stack from the top down (below right).

One-Pixel Brush

Here's a quick and easy tip for Photoshop. Have you ever wanted to erase one pixel at a time and chose the smallest hard-edged brush, only to find that you were getting soft edges in the surrounding pixels? When you're working with really small images like icons, what you need is a one-pixel brush. It is very easy to make.

1. First, create a new image. Then use the Rectangular Marquee Tool and drag out a one-pixel square selection.

2. Flood fill it with black...

3. Don't deselect anything yet...

4. Next click the small triangle in the upper right corner of the Brushes Palette to access the options menu. Choose "Define Brush" from the menu.

5. Photoshop adds a new brush to the palette. Double-click on the new brush to access the brush options dialog.

6. Photoshop will anti-alias new brushes by default. Un-check the "Anti-aliased" checkbox.

7. To test your new brush, choose the Eraser Tool in the toolbox.

8. I like to set my painting brush cursors to the brush size. To do this click File > Preferences > Display & Cursors and select "Brush Size" from the Painting Cursors section. Position the brush over a pixel...

9. Click to erase. It leaves no fuzzy edges.

Tiling Textures 2

Making Seamless Tiles or Pattern Fills

The previous tutorial covered how to make uniform background tiles and fills. This tutorial shows how to make them mate together seamlessly. When you first create an image it doesn't necessarily mate seamlessly together when it is used as a background tile on a web page or as a pattern fill in Photoshop®. You have to edit the edges in a way that they blend together seamlessly when the image is used as a tile.

1. The way to do this is to divide the image into 4 equal sections, rearrange them, edit the edges then reassemble them into their original positions. Figure 1 below represents how an image is to be divided into 4 equal sections. Figure 2 shows how to rearrange them for editing:

Figure 1

Figure 2

Adobe has provided the Offset filter in Photoshop which handles all the steps of dividing the image into sections, rearranging them, then reassembling them into their original positions.

2. The first most obvious requirement, then, would be to make the image with an even number of pixels in both width and height. This way you can divide the image into 4 equal sections. For this tutorial we will start by making a new RGB image 100 x 100 pixels at 72 pixels per inch. Save the new image as "GREENBK.PSD" Set the foreground color to R=73 G=125 B=128. Using the bucket tool flood fill the image with the foreground color:

Note: The images in this tutorial will be displayed twice their normal size for clarity.

3. Next apply the texturizer filter by clicking:

Filter > Texture > Texturizer > Sandstone

Then select:

Scaling=100%
Relief=4
Light Direction=Top

Then Click "OK".




4. This gives you a raw fill. It may or may not tile seamlessly.




5. Next apply the Offset filter by clicking:

Filter > Other > Offset...

Then select:

Horizontal=50
Vertical=50

Wrap Around

Then click "OK"




6. You can now see how the edges will mate when the image is used as a tile. The seams will show up in the horizontal and vertical centers of the image:



7. Select the Rubber Stamp Tool (the cloning stamp) and a small, smooth brush from the brushes palette. Next select a uniform area of the image as a source point to clone from. Then with short, quick clicks carefully blend the horizontal and vertical centers to smooth away the hard edges. Take care to avoid the outside edges of the image so as not to upset these areas when the image is reassembled:




8. Now reapply the Offset filter by clicking Ctrl-F, or with the menu commands:

Filter > Other > Offset...

This will reverse the first application of the filter and reassemble the image into its original order:




9. Now it would be wise to test the tile using the same technique as the previous tutorial. With GREENBK.PSD still active, click Ctrl-A to "Select All", then:

Edit > Define Pattern

Next make a new RGB image 800 x 800 pixels at 72 pixels per inch. Then click:

Edit > Fill

Select:

Contents:
Use=Pattern

Blending:
Opacity=100%,
Mode=Normal.

Then click "OK" to apply the pattern fill to the image. You will be able to see if the image tiles seamlessly or not. When you are finished with the test you can discard the new 800 x 800 image.

10. The finished background texture is shown below at normal size: