Superlative Vector Graphics for Palm
The Gallery
Mailing List
Log In

Behind the Workshop

...or how I made the picture of Leonardo using Leonardo

by Miriam

Morgan asked if I would draw a pic for the Leonardo program, foolishly basing the request on the supposition that I might actually do something useful within a sensible time frame. Morgan also gave me a color palette to work from and a rough description of what had been imagined. Leonardo was to be in his workshop and there was to also be a picture there. The user could repeatedly zoom out from the picture to include Leonardo and then his workshop. I loved the idea, though I had a lot of problems with the workshop (I was saved by my friend Erika, who sent me pictures of Leonardo's home in Amboise). The greatest difficulty was with sticking to the specified pallette -- it meant I had choice of very few colors, though on the upside it also meant that the work translated well to greyscale Palms.
I intend this to be like a friendly chat -- simple and to-the-point.

OK... let's dive straight in, shall we?

The picture was drawn in a series of parts that were assembled later. I highly recommend this way of constructing a complex picture in Leonardo. For instance the sunset scene behind the picture of the girl was drawn separately from the girl herself and was actually used twice: in the window behind the girl, and in the window of the workshop. The landscape, the girl, the futuristic Palm, Leonardo himself, and the workshop, were all drawn separately and combined later. Doing it this way can save you a lot of frustration if you need to make any alterations.

It means that:

  • selecting individual items can be simplified. If a small object is in a lower layer than some larger overlapping objects, then you will probably need to use the selection tool 1 selection tool to draw an outline around the object you want to select. If there are other smaller objects inside that rectangle, then bad luck -- you might be able to deselect them with the selection tool 2 other selection tool, but it can be a hassle. Much simpler is if the image is broken down into parts where smaller parts have less of their larger cousins around them competing.
  • Also rearranging their layers becomes easier too. If everything is in one big scene of 100 objects and you want to move the top object to the middle layer then you have to sit there and gradually move it back layer down tool through 50 separate commands. Ugh!  However if you have constructed it as 2 separate images each having 50 layers then you can simply send the top layer to the back layer layer down tool of that image.

landscape The sunset scene [the pdb file]
When creating things in Leonardo I have found that it is best to work from the back to the front; draw the most distant things first and build up the picture in layers. This is not always possible as you go back to retouch things or change your mind about the look of certain parts, but if you keep to that strategy as much as possible you will find it makes life much easier.

The background of the landscape is two shaded   directional shade tool rectangles.landscape background One was shaded downwards dark to light, and the other shaded upwards dark to light, meeting in the middle at the intended horizon. This was probably not the best way to do it, but I was still learning how to use this wonderful program. I was originally going to put the view out the window over the top of the window sill and sides but the inability to get rid of the border around the shaded landscape backdrop put paid to that idea (notice the yellow lines around the dark parts of the sunset backdrop?). No matter -- it meant I didn't have to work as hard on aligning all the left and right edges for the landscape pieces. I created 4 trapezoids for the window sides and sill and superimposed them on the view, then put all this on top of the wall object to give the illusion of being a hole in the wall.

Because I didn't have more than a couple of shades in the specified pallette I used some tricks to make it appear that I had more shades available. As you can see above, juxtaposing a number of dark and light lines in a couple of thicknesses gave the illusion of a bright sunset.

checker textureDrawing the hills presented two problems. One was the specified pallette, which I solved here by creating a checkerboard shade for the middle hill out of the colors of the other two hills. The other problem was what was the best way to make irregular shapes. After drawing something using the polygon tool  Polygon tool I would have to go back and use the point-deletion tool  point delete tool to trim the number of points down. For most of the rest of the project I created all my shapes using rectangles square and rectangle shape tools or triangles triangle shape tools or straight lines, then adding points point add tool and dragging them to where they were needed. No need to change to another tool when dragging points; you can use the add point tool to drag (just make sure you click on the newly created point instead of near it otherwise you will create another point). It sounds like a lot of work, but it is surprisingly straightforward and has the advantage that you retain absolute control over your image. When the picture is going to be complex then this becomes very important as every extra point increases your file size and redraw time. Redraw time, in particular, is worth keeping as low as possible, and is yet another reason to initially break your image up into multiple pieces while working.

The view out the window looks like it is behind the wall object but is actually on top of it. This is a neat way to capitalise on perceptual tricks.

girl The girl [the pdb file]
Once again I was challenged by the specified pallette, and you can see that I created a few textures to help. There is not a lot I can say about this part of the image, even though it was the most complex and time consuming part. It was also the most enjoyable part to create. I often get the odd feeling that a drawing comes alive and grows under my hands; that I am uncovering it rather than creating it. I felt that here.

I used the technique described earlier of creating a straight line or rectangle and adding points then dragging them to create this image. The only exceptions to that are the pearls in her hair -- they are actually circles circle tool (zoom in zoom in tool on them and you will see). I created one, then repeatedly duplicated and moved it. This requires a bit of trickery because if you try to grab a pearl while at 1:1 scale it is too small and you will inadvertently grab one of its handles and stretch or resize it. (I could have zoomed in on the pearls to move them but I wanted to use the larger view to place them properly.)

using a handle to move a small object
using a handle to move a small object
How to use a line as a handle to move one or more small objects.
What I did is to create a line nearby, selected both the pearl and the line using the group select tool  selection tool 1 then grab the line by its middle and drag both (the pearl will come with it) to where the pearl is needed. Often I would move two or three pearls at a time this way. Of course making new pearls is simple: just select one or more pearls, pull down the Edit menu, choose Copy, then choose Paste from the same menu. The new pearl(s) will be pasted into the center of the screen. If you ensure that there are no small objects there already, then it is simple to select these new pearls and use a line as a handle to move them.

girl+landscape At this point I combined the sunset window picture with the girl picture to make sure I had judged it properly and was quite relieved that they fitted well together. It was a simple matter to combine them:

  • viewing the picture of the girl, I went to the Edit menu and chose Select All, then went to the Edit menu again and chose Copy.
  • Now I closed the picture (Image menu, Close -- make sure that Options Preferences has Clipboard set to retain on exit or you will lose the copy when you close the image) and chose the landscape picture from the list to open it.
  • After moving the view of the picture so that the view was centered on spot where I guessed the girl should go, I chose from the Edit menu, Paste. This put the girl's image in the picture at the center of the screen. I positioned it wrongly a few times and had to choose Edit, Undo each time before pasting again (the girl remains in the clipboard) until I had it right.
Being more acquainted with Leonardo now I wouldn't do it this way anymore. I would paste the girl's image into a blank part of the landscape picture -- somewhere off to the side. Then I would use the group select tool  selection tool 1 to drag a rectangle around the girl and select her, and drag her to a good position on the landscape.

futuristic Palm The futuristic Palm [the pdb file]
Originally I started drawing my own Palm here, but then I thought to myself that there are now many different kinds of PalmOS machines, including the Handspring and Sony devices, so I decided to draw what I hoped the future Palm might look like.

There is nothing very special about this part of the pic. I started with a square and added points to the corners and sides. It was difficult getting the rounded corners to match, and a rotation function would have helped here (I believe it is coming). The buttons are actually circles (one circle duplicated and moved) -- they are on a layer below the body of the Palm. Of course the little screen is on a layer above the Palm. I did exploit one nice perceptual trick: the edge detectors in our eyes don't respond well to shades of yellow so I was able to be quite sloppy in my light and shade highlights on the body of the Palm and yet still have it look pretty smooth.

I drew the hand outline around the Palm at the same time as the Palm so that I would be able to fit Leonardo to it in the next part. Also I needed to see that it fitted believably and comfortably into the hand. It was no use creating a cool-looking design that would be really difficult to hold in your hand. (It is my belief, by the way, that Palm made this mistake in the original designs -- their machines look wonderful, but try using them single-handed and you will quickly see that ergonomic design couldn't have featured highly in their creation process.)

Leonardo's face Leonardo [the pdb file] full-length
Unlike the picture of the girl, I had to make the picture of Leonardo da Vinci look like the original, so I found a nice self portrait that he had drawn and based my picture on that. It all had to be in proportion with the arm, which I had already drawn for the Palm, so I roughed out an outline and then worked in detail at a closer zoom level. I could have spent much longer getting the picture more accurate, but I stopped when it was close enough that it was recognisable.

I used my standard procedure of adding points to straight lines or rectangles to draw this. Foremost in my mind at the time was that I would attempt to make it as much like Leonardo's sketches as possible, however it is extremely difficult to do with vector graphics, as I soon found out.

[the textures pdb file]  
Nevertheless, I fiddled around making some shade patterns to look a bit like Leonardo's left-handed stroke and had some limited success with that. (Left-handed people shade with strokes from upper left to lower right, whereas right-handed people shade with strokes from upper right to lower left.) It is surprisingly hard to make a repeating random pattern of oblique lines that continues to look fairly random when tiled over a large area. Our eyes are remarkably adept at picking up patterns. My thanks to Tim & Morgan for their foresight in adding the little preview window to the texture creation screen. It would have been much more difficult without that neat feature.

The pallette wasn't such a bother in this phase. It would have been more hassle if I had tried to make the picture of Leonardo look realistic instead of going for a sketch look. This makes me wonder how much artwork is based upon limitations. If I'd had 24-bit color to play with here the result would have looked like a photograph. But because of the color limitations of current Palms I made it look like a sketch. I have to admit I prefer the sketch look.

Most of my drawings have been done on paper (take a peek at my website). The surface of paper has imperfections which can be infuriating, but which I gradually learned to use to help me create lots of things that I wouldn't normally think of. I took inspiration from those random oddities of the surface -- I even came to rely upon them to add things to the picture. When I drew my first picture on a 32-bit computer screen using a graphics tablet, I found, to my great surprise that losing those limitations of paper was actually a problem. Suddenly they no longer contributed to the picture and it all had to come from me. Making the artwork easier actually took something away. Don't get me wrong -- I will probably never go back to paper because the incredible advantages of drawing on a computer vastly outweigh the disadvantages, and I eventually found other ways to capitalise on mistakes and imperfections.

I guess what I am trying to say is that you can use a limitation to your advantage if you think about it the right way, and it can help you do things you would otherwise never think of.

the workshop The workshop [the pdb file]
Initially I had great difficulty drawing the workshop. I made several attempts, but I am not very knowledgeable about historical architecture so they all looked very unconvincing. In the end Erika, a friend of mine who had visited Leonardo's final home in Amboise, France, sent me photos of it. I used those and it came together fairly easily.

To keep the relative proportions of Leonardo and his workshop correct, I began the workshop picture with the Leonardo picture saved out under a different name. Then I deleted all but an outline of Leonardo. When I had drawn enough of the workshop I deleted even his outline.

Most of the picture was easy to do (after Erika sent me the photos). I had fun doing the fire, which, like most of the picture, started as a rectangle with points added and dragged to the correct positions.

composite A composite of several Palm screenshots giving a better overview of the workshop.

The landscape out the window is the same one that I used in the window behind the image of the girl. I resized it and pasted it where the window was to go. It needed to be trimmed to fit the different shaped window, but otherwise it is the same image. I thought that was a nice touch -- linking the Palm image with the workshop image. :-)

I originally went to some trouble putting an open doorway in the wall to the right of the fireplace but later deleted it when I realised it just made that part of the picture too "busy" and didn't contribute much to the look... in fact it interfered with the perspective.

The only real problem I had with the image was when I tried to make the floor and ceiling polygons big enough, they would disappear! I think it is caused by number overflow. I don't think it really warrants fixing -- only an idiot like me would make something so large. If the picture was printed up on paper with the girl image being about 5 centimeters tall then you would need a piece of paper about 20 meters wide to fit the full image of the workshop!

(By the way, you will notice that the images here contain the flying machine and some of Leonardo's drawings, even though they were not actually added until the very last step.)

the workshop Putting it all together [the pdb file]
You would think that with all the parts complete it was now just a matter of pasting all the bits in. That is what I thought... I was wrong, but building it in pieces still saved me lots of grief.

I had already pasted the girl in front of the landscape, so I took that image, minus the dark wall, and pasted it into the empty Palm being held by Leonardo. I saved the result as a different file to ensure that I had copies of every step so that if something went wrong I could always go back to an earlier image.

We now have a picture of Leonardo holding the Palm which has picture of a girl in front of a landscape on its screen. I copied this new picture to the clipboard and pasted it into the workshop image. Now I found I had made a really dumb mistake: a lot of the lines in the workshop showed through parts of Leonardo -- I had forgotten to make him opaque!

I went back to the picture of Leonardo and, using the technique of drawing a rectangle, adding points, and dragging them to their positions I covered Leonardo with a polygon. The polygon had to fit his shape almost perfectly and be almost the same orange color of the background color. When finished I selected it by clicking on it using the second selection tool  selection tool 2 then pushing it to the back layer of the image  layer down tool and it was fixed. Finally I copied it to the clipboard again and pasted it into the workshop.

first version complete The original position of Leonardo inside his workshop. [the pdb file]

I was almost finished. Morgan didn't feel that Leonardo's position was suitable, and wanted him to be closer to the viewer, so I resized him and moved him into the foreground. I wish that resizing him was that simple, but it took me several attempts to get it right. Each time I tried pasting a different sized Leonardo in, it would take quite a few minutes to redraw because the picture was now so complex, so this modification took a surprisingly long time to do. My own feeling is that Leonardo was better in the original setting because putting him behind the table made him more a part of the scene, and I liked the idea of the sunset landscape in the Palm being overlaid on the other sunset landscape behind it. But I can also understand Morgan's reasons. In the end it doesn't matter because you now have both. :-)

I was going to add a lot of Leonardo's inventions to the picture, but time ran out (I am hopelessly slow at almost everything I do). So I had to make do with just two: some illustrations based upon Leonardo's calculations of the distance of the sun, and one of his flying machines.

Finally it was done.

Copyright © 2002 - 2005 wirejunkieTM | Privacy Policy