HOW TO MAKE VERY SMALL IMAGES
IN ADOBE PHOTOSHOP or ELEMENTS.
NOTE. Adobe Photoshop Elements, though billed as photo editing software for amateurs, is surprisingly powerful. Highly recommended - and costs a fraction of the price of Photoshop. It's similar to the full professional editor, so if you have Photoshop Elements, the steps for making the image will be much the same
1. MAKE A NEW PICTURE. In Photoshop, select File - New. For very small images, specify the exact pixel dimensions.
For a favicon icon choose 16 x 16 pixels, RGB color, transparent.
A message picture for older mobile phones is most usually 72 pixels wide by 28 high. It will have to end as a monochrome bitmap, but edit it in Greyscale as you'll have more options.
2. MAGNIFY YOUR SCREEN. Open the Navigator toolbar and blow up the image by repeatedly clicking the double triangle icon at the right end of the slider. Increase the magnification to several hundred percent.
3. TURN ON THE GRID. Go to View - Show - Grid and turn on the grid. Then go to Photoshop - Preferences - Guides, Grid & Slices. Choose a grid spacing of one pixel. This will give you some 'graph paper' showing the pixels you have to work on.
4. DRAW WITH A ONE-PIXEL PENCIL. Go to the toolbox and select the Pencil tool. Make it one pixel wide in the 'Brush' box (on the adjustment bar above the tool panel). TIP. You'll have incomparably more control over your drawing with a stylus than with a mouse.
5. CHOOSE YOUR COLOUR. Now go down to the Color Picker (the two overlapping squares below the tools) and hold your mouse down on the upper (foreground) square.
At the base of the swatch that appears, click Only Web Colors for a favicon. Select the colour you want. For a phone picture select black.
Click the little arrows (next to the Colour Picking boxes on the right) to bring the background colour to the front. Change your background as desired for favicon, to white for a message picture.
You'll find the little background/foreground switching arrows useful when you're working, particularly if you only have two colours. You can switch to the background colour for quick erasing.
If you're making a favicon, fill your whole 16-pixel square with colour before you start. That way you won't be dependent on transparency, which allows a cutout shape. Transparency is not always preserved when icons made in this DIY fashion are converted to .ICO files.
You can make a cutout shape if you only want a .GIF file, as .gifs can have a transparent background.
PURPLE INTERRUPTION
Cutout shapes may seem like a good idea for a favicon. Certainly you can quickly recognise an outline. But a coloured square looks neater next to text, and stands out among other icons that are cutouts. Besides...
With a logo this size, you need to make the most of every pixel you've got. If transparency isn't available - or even if it is - there's no need to let the background go to waste. Fill it with colour anyway. After all, it's hard to be garish at the size of an underfed pea!
6. NOW DRAW, ERASE - AND PREVIEW YOUR IMAGE OFTEN AT 100%. Go ahead and draw.
If you use the eraser in the Toolbox, make sure it's in Pencil erasing mode. Another way to erase is to go back a stage by clicking on a previous action in your History palette.
Preview your image frequently at 100% (and if it's a favicon, occasionally at 200% to see it at 32 x 32 pixels.)
Avoid the temptation to add too much detail.(Not that you have much scope, but it is possible!) Viewed at tiny size, you'll see that bold areas of plain colour work best.
7. SAVE FOR THE WEB. When you've done, click File - Save for Web. A new display will appear.
8. CONVERT TO THE RIGHT KIND OF FILE. You can save your artwork as a GIF, but to use it as a favicon icon you will need to convert it to an .ICO file. You can try saving as a .BMP file, then just renaming the extension from .BMP to .ICO. Alternatively, use software like Irfanview (for PC) or Graphic Converter (for Mac).
If you have made a mobile phone message picture, you can downsize it in Photoshop 'Save for Web' as a WBMP file for WAP transmission.
Photoshop or Elements as an icon editor
