How I made the oasis:
Wie ich die Oase gemacht habe:
This is pure SVG.
There are no bitmaps.
 
Animations are done only with SVG (and SMIL).
There is no JavaScript.
Dies ist reines SVG.
Es befinden sich keine Rastergrafiken in der Datei.
 
Die Animationen sind mit SVG (und SMIL) gemacht,
ganz ohne JavaScript.

Software used:
- a text-editor
- WebDraw 0.5 (beta)
- Photoshop 6
- Illustrator 10
- CR2V
Benutzte Software:
- ein Text-Editor
- WebDraw 0.5 (beta)
- Photoshop 6
- Illustrator 10
- CR2V
Why did I use so many different programmes?
I did not have Illustrator 10 available right from the beginning on. However: Illustrator 10 was not sufficient anyway. I recommend to produce SVG-Code in a text-editor as long as possible. Thus you learn more about SVG and you also stay flexible. Only if exact and complex drawings are required, you should use Illustrator 10. Then, however, it does serve you really good!
 
How I proceeded: after having drawn an element, e.g. a plant, in Illustrator and saved it as SVG, out of the sourcecode I took only the path that I needed and pasted it into the respective place in the text-editor. I ignored all the other information which Illustrator 10 produces.
Sure, you then will have to determine the exact position of that path via "transform=translate(x,y)".
Der Grund, warum ich so viele verschiedene Programme benutzt habe:
Ich war nicht von Anfang an im Besitz von Illustrator 10. Aber: Illustrator 10 allein reicht eh nicht. Ich empfehle, SVG-Code nach Möglichkeit so lange es geht von Hand in einem Text-Editor zu erstellen. So lernen Sie am meisten und bleiben flexibel. Erst wenn Sie exakte und komplexe Zeichnungen benötigen, sollten Sie zu Illustrator 10 greifen. Dann aber leistet dieser hervorragende Dienste.
 
Meine Vorgehensweise: nachdem ich ein Element, z.B. eine Pflanze, im Illustrator gezeichnet und als SVG gesichert habe, nahm ich aus dem entstandenen Quellcode nur den Pfad heraus, den ich benötigte und kopierte ihn an die entsprechende Stelle im Text-Editor. All die anderen Informationen, die Illustrator 10 in seiner Datei erzeugt hatte, habe ich weggelassen.
Natürlich muß dann noch die genaue Position des Pfades via "transform=translate(x,y)" bestimmt werden.
The parrot:
It was photographed in Edinburgh Zoo, then a little bit photoshopped, then converted to SVG with CR2V and then scaled in the text-editor.
 
The butterfly:
Drawn in Illustrator, saved as SVG and then I copied the code into the text-editor. There I animated it manually.
 
The water-animation:
The elements were drawn in WebDraw, but the actual animation was coded in the text-editor.
The "pool" was drawn in Illustrator 10 and then converted to SVG.
 
The sound of the water:
Buy a cheap microphone, play with water in your flat and dry the floor afterwards. Then try to get the best out of that tiny Windows default recording tool (*sigh*).
 
The wall:
The pattern was made in WebDraw and then filled into the in the text-editor drawn wall.
 
The poster-advertising:
Some parts were made in the text-editor and some with WebDraw.
 
The plants:
Drawn in Illustrator and then scaled in the text-editor.
 
The camels:
One camel was drawn in Illustrator and then scaled, duplicated and animated in the text-editor.
 
The sky:
Its path was drawn in WebDraw, but the gradient was done in the text-editor.
 
The desert and the lawn:
These were quickly made with WebDraw.
 
The quoteballs:
Quickly made with WebDraw.
 
The curtain:
Drawn and animated in the text-editor.
 
The hand of the Goddess:
I took a picture of my hand, then photoshopped and illustratored it and then saved it as SVG. The paths were copied into the text-editor and transformed and animated there.
 
The holiday-maker:
With CR2V I made an SVG from a picture. CR2V is really good for this, however I still had to apply some ;-) improvements with Illustrator. The thereby generated collection of paths has been transformed in the text-editor.
 

Der Papagei:
Im Zoo von Edinburgh photographiert, mit Photoshop bearbeitet, mit CR2V in ein SVG konvertiert und dann im Text-Editor skaliert.
 
Der Schmetterling:
Mit Illustrator gezeichnet, als SVG gesichert und den entstandenen Code in die Datei im Texteditor kopiert und dort dann händisch animiert.
 
Die Wasseranimation:
Die einzelnen Bestandteile wurden in WebDraw gezeichnet und dann im Text-Editor animiert.
Das Bassin wurde in Illustrator gezeichnet und dann in einen SVG-Pfad konvertiert.
 
Das Geplätscher:
Besorgen Sie sich ein billiges Mikrofon, spielen Sie in Ihrer Wohnung mit Wasser herum und trocknen Sie anschließend den Fußboden. Dann versuchen Sie, das Beste aus dem mit Windows mitgelieferten Audiorecorder zu machen (*seufz*).
 
Die Mauer:
Das Füllmuster wurde in WebDraw erstellt und dann in die im Text-Editor erstellte Mauer eingefüllt.
 
Die Plakatwand:
Einige Elemente wurden im Text-Editor und einige in WebDraw erstellt.
 
Die Pflanzen:
In Illustrator gezeichnet und dann im Text-Editor skaliert und positioniert.
 
Die Kamele:
Ein Kamel wurde in Illustrator gezeichnet und dann im Text-Editor skaliert, vervielfältigt und animiert.
 
Der Himmel:
In WebDraw wurde der Pfad gezeichnet, im Text-Editor der Farbverlauf hinzugefügt.
 
Die Wüste und der Rasen:
Schnell mit WebDraw gemacht.
 
Die Sprechblasen:
Schnell und einfach mit WebDraw gemacht.
 
Der Vorhang:
Im Texteditor gezeichnet und animiert.
 
Die Hand der Göttin:
Ich photographierte meine Hand, bearbeitete sie dann in Photoshop und danach im Illustrator, sicherte die Pfade als SVG, kopierte sie in den Text-Editor und transformierte und animierte sie dort.
 
Der Urlauber:
Mit CR2V habe ich aus einem Foto ein SVG gemacht. CR2V macht sowas zwar ganz toll (siehe auch Test auf der Bilderseite), aber ich mußte doch im Illustrator noch einige ;-) Korrekturen vornehmen. Im Text-Editor habe ich dann die entstandene Ansammlung von Pfaden transformiert.
back to the oasis
 
Home
zurück zur Oase
 
Home

© 2001-2003 Petra Kukofka

eMail: kukofka@scale-a-vector.de