Photoshop Tips
This page provides instructions on using Photoshop to create Addin gear. Photoshop is a powerful, yet complex, software program. Refer to Photoshop's Help for more information.

Refer to RescueRigger's Help (i.e., press F1) for additional information on creating gear. You can also watch a free training video that explains how to create gear using the Addin Gear Builder.

1
Take a digital photograph of the gear
  • It helps if you place the gear on a background that contrasts with the gear (e.g., put a silver carabiner on a blue piece of paper).
  • Try to use new, unscratched gear.
  • Use good lighting.
  • Don't get so close to the gear that your camera cannot focus.

Of if you are lucky, you will find an image on the web (e.g., using Google's Image Search feature).

2
Crop the image in Photoshop
  • Open the jpg file in Photoshop.
  • Press C to select the crop tool.
  • Use your mouse to drag the cropping rectangle so it isolates the gear (leaving some space between the edge of the gear and the rectangle--you'll do the final cropping later).
  • Press Enter to complete the cropping.
3
Unlock the background layer
  • Locate the Layers palette (shown here). If it isn't displayed, make sure there is a checkmark next to Layers in the Windows menu.
  • Double click on the italicized word "Background".
  • The New Layer dialog will appear.
  • Type "Gear" and click OK.
4
Add a new layer
  • At the bottom of the Layers palette, click on the New Layer button (or press Shift+Ctrl+N).
  • This creates a new layer, named "Layer 1", above the layer named "Gear" in the Layer palette.
5
Move and name the new layer
  • Using your mouse, drag the new layer (named "Layer 1") to below the layer named "Gear".
6
Rename the new layer
  • Right-click on the layer named "Layer 1" and choose "Layer Properties..." from the menu.
  • In the Layer Properties dialog, type "Yellow" and click OK.
  • The Layers palette should look similar to the image shown here. Note that the layer named "Yellow" is not italicized (locked). Note, too, that it is selected (i.e., it is a darker gray than the layer named "Gear").
7
Set the background color
  • Locate the color "Swatches" palette in Photoshop. If you don't see it, make sure there is a checkbox next to Swatches in the Windows menu. (You may also have to click on the little maximize button in the upper right corner of the palette to see the color samples.)
  • Click on the pure yellow swatch.
  • With the layer named "Yellow" still selected (Step 6), press Ctrl+A to select the entire layer.
  • Press Alt+Backspace. This fills the layer with the currently selected color (yellow).
  • Look at the example Layers palette shown here. See how the box to the left of the "Yellow" label is now yellow.
8
Save the file
  • Press Ctrl+S to save the file.
  • Save it as a Photoshop format file (with the psd file extension)
  • Name it something relevant (MyCarabiner.psd).
9
Erase the background

The next task is to erase everything except the gear itself. These instructions explain several Photoshop tools that you can use to erase the background. The eraser tool is the easiest, although some of the other tools are more powerful. Note that these instructions summarize complex Photoshop commands--please refer to the Photoshop Help for details.

General

Use these common commands regardless of which Photoshop tools you use to erase the background:

  • Click your mouse on the layer named "Gear" in the Layers palette to selected it. Edits you make in Photoshop will now only effect the picture of your gear and not the yellow, background layer.
  • Press "+" to zoom in or "-" to zoom out.
  • Use the scrollbars to move the image.
  • Press Ctrl+Z to undo changes if you make a mistake. Depending on the tool you are using, the undo command will often undo everything you changed since you last pressed your mouse button, so it is a good idea to release the button occasionally.

The goal is to erase everything on the Gear layer except the gear itself. Take your time. Be careful. Zoom in very tight. Undo your changes if they aren't perfect.

Eraser Tool

The eraser is the easiest of these Photoshop tools.

  • Select the eraser from the Tools palette (or press E).
  • On the toolbar, set the Mode to Pencil.
  • Using your mouse, carefully erase the area around your gear. The area you erase will turn yellow as you are "seeing through" the gear layer onto the yellow layer. (For example, on the image to the right, you are erasing the blue paper and seeing the yellow background.)
  • You can change the size of the eraser by pressing the "[" and "]" keys.

To accurately use the eraser, you should be zoomed in (press "+") more than the example shown here. That makes it easier to move the eraser along the edge of the gear.

Magic Wand

The magic wand is a powerful Photoshop tool. However, it takes experimentation to get it to work correctly.

  • Select the magic wand from the Tools palette (or press W).
  • On the toolbar, select the Contiguous box. If you don't select this box, area on your gear may be selected.
  • Click on the background area (i.e., blue) in this example, Photoshop will select everything that has a similar color to the location you clicked. In the example shown to the right, we clicked inside the carabiner and Photoshop selected everything inside the biner. However, our background was extremely uniform. You can change the Tolerance setting on the toolbar to change how "similar" the color must be for Photoshop to select it. Lower numbers require more similarity (so less area is selected) and higher number allow more difference (so more area is selected). The "correct" number depends on the difference between the gear and the background color, as well as the location you clicked. Typical Tolerance settings are between 20 and 80.
  • After the area has been selected, press Delete.

The magic wand is an awesome tool, but be careful. If the Tolerance is set too high you may accidentally select part of your gear (usually near the dark edges of your gear). If it is set too low most of the background will be erased, but not the crucial area where the gear and background meet. Sometimes it is helpful to use the magic wand to erase areas where the background and gear are very different in color (because it is quick) and then use a manual tool (like the eraser or the polygonal lasso) to manually erase areas where the gear and background have similar colors (often in the gear's shadow).

Marquee

The marquee is an easy way to erase rectangular sections of the image.

  • Select the marquee from the Tools palette (or press M).
  • Click and drag your mouse to select a rectangle that does not include your gear.
  • Press the Delete key.

This command is only marginally helpful. It doesn't let you erase close to the gear's edge (unless the gear has vertical and horizontal lines).

Polygonal Lasso

The polygonal lasso lets you manually select a non-rectangular area. The polygonal lasso selects the area as a series of small, straight lines.

  • Select the polygonal lasso from the Tools palette (or press Press U).
  • Zoom in close (as always).
  • Click on the boarder between the gear and background. This starts the selection process.
  • Click again on the boarder. This selects a straight line between the two clicks. Repeat this process to select the area as a series of small, straight lines.
  • Double-click your mouse when you are done selecting, this connects the first and last points. (Be careful, as this last line is drawn directly between the start and end points; it is usually best to have the last point be close to the first point to avoid surprises.)
  • Press the Delete key.
10
Save the file (again)
  • If you are happy with your changes, press Ctrl+S to save them. If not, Undo your changes.
  • Note that Photoshop does have multiple levels of undo, although by default the Ctrl+Z command alternates between Undo and Redo (strange). Look in the Edit menu to find the Repeated Undo command.
  • Now is a good time to save a backup file, too! That way if you have a problem in the remaining steps, you can always restart at this point.

At this point, the gear should be alone on an RGB yellow background (i.e., 255 red, 255 green, and 0 blue).
 

11
Resize the image

It is difficult to know the optimum size the image should be. It depends on how much detail you need in the image. Having the longest dimension be somewhere between 200 to 400 pixels is usually good. The "rescuers" in RescueRigger are up to 800 pixels tall, but we want detail in their faces. The downside of a large image is it makes larger RescueRigger files and it RescueRigger runs more slowly.

  • Save a backup copy if you didn't already do so in Step 10.
  • Press Alt+Ctrl+I to display the Image Size dialog.
  • Make sure the "Constrain Proportions" checkbox is checked.
  • Change either the width or height to the desired size (probably between 200 and 400). (Both dimensions will change when you change either, as the proportions are constrained.)
  • Click OK.
12
Reduce Yellow Outline (optional)

Sometimes Addin gear will appear in RescueRigger with a yellow outline. A faint yellow outline is normal, but occasionally the yellow outline is clearly visible in RescueRigger. This step removes the yellow outline by adding a small, white outline. We suggestion that you skip this step the first time through and then perform it only if needed.

  • Click your mouse on the layer named "Gear" in the Layers palette to selected it.
  • Press W to select the magic wand.
  • Remove the checkbox from the Contiguous checkbox on the toolbar.
  • Click on a yellow area (i.e., not on the gear). Everything except the gear should be selected.
  • Press Shift+Ctrl+I to invert the selection. Now only the gear should be selected.
  • From the menu bar, choose Select, Modify, Expand. When prompted for the number of pixels, enter "1". This enlarges the selection by one pixel.
  • Click your mouse on the layer named "Yellow" in the Layers palette to selected it.
  • Press the Delete key. This removes the yellow from the selected area.

The image should now look like the sample shown to the right. Note that there is a small space between the carabiner and the yellow background. (Photoshop displays a checker-board pattern to indicate that this area is blank, This area will be automatically changed to white white when the image is saved as a bitmap.

13
Re-crop the image
  • Press C to select the crop tool.
  • Use your mouse to again drag the cropping rectangle. This time you just need to leave a few pixels on each edge. If the cropping rectangle "jumps" to the edge of the image or the edge of the gear, hold the Ctrl key pressed as you drag the cropping rectangle (this disables Photoshop's "snapping" feature).
  • Press Enter to complete the cropping.
14
Center the gear connections

You only need to perform this step if your gear will connect to gear other than ropes (i.e., if it will connect to carabiners and such).

As explained in RescueRigger's Help, the gear connections on Addins must be centered between the left-and-right sides of the image. In this step, you will use the Canvas Size dialog (Alt+Ctrl+C) to change the size of the canvas so the connection point is centered.

This illustration shows the Canvas Size dialog. You will increase/decrease the width of the canvas (the image) without changing the size of the actual gear, by entering new values here. You will use the left/right little arrow buttons to control where the new pixels are added or removed. With a little trial and error (and the Undo command), you will discover that it is easier to resize than to explain!

The following image shows a Rescucender before, and after, resizing the canvas. The resizing was done to center the eye of the Rescucender between the left and right sides of the image.

Before Resizing After Resizing
15
Save the file (again)
  • Be sure to save the file now. The next few steps save the file with different names and in different formats. If you forget to save it now, you may have to repeat a lot of work.
16
Save the file as a bitmap

RescueRigger requires images to be in the bitmap format.

  • Choose File and then Save As.
  • Press Tab to move to the Format box.
  • Press B to select the BMP (bitmap) format.
  • Press Shift+Tab to return to the File name box.
  • Enter the name of the file. (This should usually be the same name as the psd file, e.g., "MyCarabiner.bmp", so you may need to delete the " copy" text that Photoshop annoyingly adds.)
  • Click OK.
  • When prompted for the BMP Options, select 16 bit and click OK.
17
Rename the Photoshop file

We are now going to create the little icon image. We don't want these changes to overwrite our existing Photoshop file. So again choose Save As and save the file with the original name plus "-Icon" (e.g., "Carabiner-Icon.psd"). This should default to saving in the Photoshop format.
 

18
Re-crop the image
  • Again use the C command to crop the image. This time you can crop in close around the gear. You don't need to worry about centering the connection point or leaving pixels near the edge.
19
Change the background to white
  • Using the Color Swatches palette, click on the color white.
  • Using the Layer palette, select the layer named "Yellow".
  • Press Ctrl+A to select the entire layer.
  • Press Ctrl+Backspace to fill the layer with the current color (white). Yeah, it is a little weird having a layer named "yellow" that is now completely white, but that's okay.

The area behind your gear should now be white.
 

20
Resize the image
  • Press Alt+Ctrl+I to again display the Image Size dialog.
  • Make sure the "Constrain Proportions" checkbox is still checked.
  • Now change the largest value, either the width or height, to 32. In the example shown here, the height of 112 should be changed to 32. (The other number, the width of 82 in this case, will automatically be changed to a number less than 32.)
21
Resize the canvas
  • Press Alt+Ctrl+C to display Canvas Size dialog.
  • Set both the width and height to 32 (one of these should already be 32).
  • Click OK.

You should now have a 32x32 pixel image of your gear on a white background. The image should not be stretched (which will happen if you confuse the Image Size, Alt+Ctrl+I with the Canvas Size, Alt+Ctrl+C).
 

22
Save the file (again)
  • Press Ctrl+S to save the file in Photoshop format using the current (i.e., "-Icon") file name.
23
Save the icon as a bitmap
  • Choose File and then Save As.
  • Change the format to BMP (bitmap).
  • Enter the name of the file as the name name as the Photoshop with the "-Icon" extension (e.g., "MyCarabiner-Icon.bmp").
  • Click OK.
  • When prompted for the BMP Options, select 16 bit and click OK.

You are now done working with Photoshop. It is a powerful program, but it certainly has a steep learning curve!

24
Create a new Addin in RescueRigger
  • Start RescueRigger.
  • Display the Addin Gear Builder (Ctrl+Shift+A).
  • Click the New button.
  • Enter the name of the new Addin file (e.g., "MyCarabiner.rra").
  • Fill in the information on the various tabbed-pages. (Be sure to look at the instructions that are displayed in the lower-right corner of the Addin Gear Builder as you fill in the information and to click on the Help button for assistance.)
  • On the Graphics page, you will want to click on the Load main image button and select the bitmap you created in step 16 (e.g., "MyCarabiner.bmp") and then slick on the Load icon image button and select the bitmap you created in step 23 (e.g., "MyCarabiner-Icon.bmp").
 

© Copyright 2003-2008, Iterum, LLC. All Rights Reserved.