Draw It Yourself Graphics

Can you make an icon from a photo?

These days even the smallest phone icons can contain many more pixels than they did when I first wrote this page. If you want to make an icon simply by reducing a photo you now have a better chance of success. All the same, an image drawn from scratch is a much better bet. It's Draw It Yourself time.

Drawing it yourself from scratch, you could of course make a vector image. An .SVG in Illustrator for example. This would look slick and sleek at any size.

Your choice, but bitmaps (raster images) are quicker and easier to make. You may need to make separate raster icons for different sizes, but if you need to alter them later on, they're easier to change than vector icons.

Vectors have a cold, geometric look, but rasters too have their quirks.

You don't have to play with bitmap pictures for long to realise that reducing them makes them sharper.

...Down to a certain point.

When you get to the scale of an old fashioned icon-sized image in black and white, you enter the nano-world of graphics. Different rules apply!

sunflower phone image sunflower black and white

Here is an original digital camera image (background removed) converted to black and white for a tiny two-colour graphic.

icon made from photo

Here it is reduced to 25% [27 x 30 pixels]

pixellated reduced image

This is what happens when you try to make an icon from a photo. The icon-sized image re-enlarged to show you what is now missing

The picture has started to fall apart at a this very small size.

You just do not have enough pixels to make anything more than a crude mosaic. Without colour, the amount of information you can show is even more drastically reduced.

A stem might make that doughnut look more like a flower - but no stem was visible in the original.

The black square doesn't help. A tiny graphic needs a good outline to stand out. And who wants a gloomy sunflower?

How about turning the background white...?

You do at least have one advantage when working in black and white. You don't have to worry about transparency. Boxes around images disappear when they are white-on-white.

Shapes that are dark at the outer edge work best. Silhouettes are effective, especially for icons. But here, the sunflower centre has to stay black - and there's no room for outlines.

tiny sunflower image edge detected icon sized flower

Here is our original sunflower again. This time the black and white version is 'Edge Detected' in Photoshop.

actual size phone image icon sized image re-enlarged

Here is the resulting icon sized graphic, re-enlarged.

Not much left, is there?

It really is a case of Draw-it-Yourself at this size!

If you are still determined to make an icon from a photo, crop to the smallest possible part of it. Remove the background, then reduce the image size as much as you can before you convert to black-and-white. Photoshop Elements Save for Web will do the colour reduction.

You will probably still have to tidy the image up. In fact you will probably end up having to redraw it anyway.

Forget making a tiny two-colour icon from a photo. It's easier to draw it yourself from the start! At this small simple size, it really is not difficult...

Why symbol drawing is easy




Photoshop as a gif optimiser

Photoshop as an icon maker

Vector images are sharp at any size

Which is best for small images? Vector or Bitmap?

History note. It's easier than it used to be to draw on a tiny screen!



(c) Valerie Beeby . Page last revised 2015

Images and articles on this site may not be reproduced or used for any commercial purposes without written permission.
You can contact me at:
http://purple-owl.com/art/contact-valerie-beeby