GDT 150 Design for the Internet
Handout: Cutting Graphics in Photoshop
Setting Up the Document
File>Save As “…_guides.psd” This way any mistakes you might make aren’t on the original document.
Arrange your guides:
- Showing tables in HTML
- Defining boundaries around each graphic
Make a new layer, opacity 50%
Making your foreground and background colors two different colors ( I use the top right websafe red and blue)
Use the marquee tool with anti-aliasing off and snap to guides on to make boxes along each guide and then fill with the keyboard shortcut, alternating colors in each square. Use different colors as necessary. You can also use the paintbucket tool, but make sure anti-aliasing is off. You’ll end up with something that looks like this:
Make sure that you have all your text areas and whitespace defined also. I like to use grays for non-graphic areas.
Save.
Alternatively, you can use slices to set your cut guides, but I think the previous way is far better.
Cutting Graphics
Select the guides layer you just created in your layers palette, and make it invisible. You’ll keep this layer selected and use the Magic Wand to select each box in the layer.
Make sure Magic Wand options are set as follows: Tolerance: 0 Contiguous checked Anti-Alias unchecked.
Click in one of the boxes that you set for a graphic. All the contiguous pixels of the same color are selected.
Image>Crop
If this graphic is a gif:
*Image>mode>Indexed Color
File>Export as Gif Select the background color to be transparent
* This may not be available in PS6 until the plugin is manually installed. If it’s not available, do the following:
Layer Menu>Flatten
Right click on layer in layers palette, choose layer options, and accept the new layer name. (PS6 won’t allow transparency in the background layer)
Magic Eraser Options: Contiguous Off Anti-Alias Off Tolerance: 0
Click in the background to make transparent.
File>Save for Web
Choose gif, make sure transparency is checked.
If the graphic is a jpeg:
File>Save for Web
Choose JPEG and compression settings
After the graphic is saved, undo to the Magic Wand state. You can set multiple levels of undo in PS6 under Edit>Prefs>General. Choose Ctrl-Shift-Z for redo. That way, just hit Ctrl-Z as many times as you need to go back to the Magic Wand state. Otherwise, use the History palette.
Continue until all graphics are saved in the graphics directory in your root folder.
