Previous Tip  |  Next Tip  |  Design Tips   | [Bill's Home]

23. From Photo to Graphic

Often it is difficult to get the exact images that you want from standard clip-art and image files. A key skill is to be able to convert a photograph into a graphic. For example I've taken a quick photograph of my guitar:

It is difficult to select the outline with the magic wand, thus it is a good idea to cut around the guitar, and copy and paste it into another file:

Often it is possible to select the rest of the outline with the magic wand, otherwise the outline is deleted using a large air brush, followed by smaller air-brushes around the edges of the guitar:

Some of the edges can be cleaned up by adding straight lines, such as:

Next we can reduce the image, and put a drop shadow on it. I've also added some text and a straight line, so that it gives the user something to focus on:

or an alternative design could be:

 

I prefer the lower one, so let's try it with a great hue:

or with a lesser hue:

Personally I prefer the blue version, as it seems to fit better with the black lines. Next we can fill the white space beside the text with a simple image, to give:

We can then reduce it down in size, to produce a final graphic:

300-pixel width

200-pixel width

So let's try the 200-pixel graphic in a mock WWW page:

Main

Teachers
Module Org
Exams
Timetable Activities
Mod Reg.
Mod. Quest

This is a new module, aimed at teaching basic networking to practicing musicians. The key concepts are:

or if we use a 150-pixel image, and put it into the menu option:

Teachers
Module Org
Exams
Timetable
Activities
Mod Reg.
Mod. Quest

 

This is a new module, aimed at teaching basic networking to practicing musicians. The key concepts are:

or using the large graphic across two columns:

Teachers
Module Org
Exams
Timetable
Activities
Mod Reg.
Mod. Quest

This is a new module, aimed at teaching basic networking to practicing musicians. The key concepts are:

All of these are reasonable, but I prefer the first one. In summary you can see that images can be easily created from photographs. The great thing about using photographs is that you can set the object up in the required format, without have to graphically manipulate it. It's amazing how an ordinary photograph can be transformed into a professional-looking graphic. In fact I can't believe that the guitar in the graphic is my own guitar (although I don't really like the look of blue guitars).

Path clipping techniques