TUTORIAL: Jagged Edge Icons (Using a Template)

[charliemc]

Let's try the 'jagged edge' icon effect!

This is done by creating a TEMPLATE, by the way...

Here's a few 'jagged' templates I quickly created for this tutorial:


  
  

Feel free to use this if you wish. However, it would be better to try and create your own! (smile)

Here are two sample icons created using above templates:

  

1. Open a new image, 100 x 100 pixels, white.
   
   
2. Click on the Preset Shape Tool (tool palette). Now open your Tool Options palette. (Either click the button that toggles it on and off or go to View > Toolbars (highlight and click). Put a check next to Tool Options palette and then click the Close button. (You can always close this window whenever you wish.)
   
   Select the 'rectangle' shape. Be sure 'Retain style' is selected/checked. If you want to be able to 'tweak' this (move it around and resize it), then be sure 'Create as Vector' is selected, too.
   
   
3. In your Color palette under Styles, make the Foreground solid black.
   
   HINT: To keep your colors from changing from tool to tool, select (check) the 'lock' option!
   
   
4. Now draw a square on the white image. If you've created this as a Vector, then go to Select > Select none. Go to Layers > Merge All.
   
   Now let's play with the edge of this design!
   
   
5. Click on your Paint Brush (tool palette). On the Color palette, set the Foreground to white. (We're now going to draw over some of the lines.) The brush settings should be:
   Shape: Round
   Size: 1
   Hardness: 100
   Opacity: 100
   Step: 25
   Density: 100
   
   
6. Click on the Zoom Tool and zoom way in on the box. (Say 4:1 size.) Make it so it's very easy to see what you're doing!
   
   
7. Draw over part of the lines in the upper right-hand corner. This will effectively 'erase' them from view. (If you have any 'gray' (and/or fuzzy) areas -- places that aren't solid black -- you can also draw over these with white.
   
   NOTE: If you click one time with the brush, then HOLD DOWN the Shift key and click the brush in a second spot, it will draw a perfectly straight line from the first to second brush-click-spot!
   
   
8. Now on your Color palette make the Foreground black so you can draw in your jagged lines.
   
   Be creative!
   
   NOTE: Be sure the lines connect!
   
   
9. Once you've got this the way you want it to look then Save it.

APPLYING A TEMPLATE TO AN IMAGE

Whether you want to use a solid color, a landscape, some design or an actual picture, you use a template in the same fashion...

1. Open/create the image you want to apply your template to. (It should be the same size as the template, 100 x 100 pixels.)
   
   
   
   
2. Copy the template.
   
   
3. Paste the template as a new layer to your image.
   
   
4. Click on the Magic wand tool. Click this in the center section of your template. Hit the Delete key on your keyboard. That 'chunk' of white will vanish. Now right-click to deselect/defloat. (If you have more than one area you want your image to show through, simply repeat these steps.) Here's how it will look active (minus the motion):
   
   
   
   
5. When you've finished, you need to merge your layers. Go to Layers > Merge > Merge All.
   
   Time to apply the TRANSPARENT effect to your image!
   
   
6. On the Colors palette, select some bright color (like lime green) for the Foreground.
   
   
7. Click on the Flood fill tool and then 'fill' the background area of your template/image.
   
   
   
   NOTE: If you've got bright green in the image, then select a different color! Pick purple or orange--anything that doesn't appear in your actual image. (White and black are generally NEVER good color choices here!)

You're now pretty much seeing your final image. Time to Save it! We do this a bit differently than a normal save, in order to apply the Transparency!

1. Go to File > Export > GIF Optimizer. On the various TABS, use these settings:
   
   Transparency: Areas that match this color [click then put dropper over your image to pick the exact color you've used] Tolerence: 0
   
   Partial Transparency: Use a 50% dither pattern--and below, NO
   
   Colors: 256 dithering 0--Optimized Octree
   
   (You can ignore Format and Download times.)
   
   
2. You should see two windows containing your image. One with the colored background and one with the transparent background. If so, click OK.
   
   
3. Name your image (and select where to save on your hard drive).
   
   When you've done all this, you can close the image. No need to save again (it's been done, trust me!)...
   
   That's all there is to it. It's now ready to use!
   
   Please feel free to share your own examples!
   
   ==CharlieMC, assistant moderator