PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [Tutorial allgemein] Smilie/Emoticon Tutorial mit Freeware



Waya Yoshitaka
25.11.2006, 16:27
Ich eröffne hier mal einen extra Thread, weil der irgendwie nicht ganz zu der Tutorial Link Sammlung passt und die Leute noch die Möglichkeit haben sollten was zu fragen. ^^"


Wie der Name schon sagt ist dies ein Tutorial, wie man Emoticons erstellt und das ausschließlich mit Freeware. Die kleinen begleiten uns schließlich in jedem Post und man findet allerdings nicht immer den passenden. Was liegt da näher als sich einfach selbst einen passenden Smilie/Emoticon zu basteln? :D

Wir arbeiten mit

Microsoft Paint
Microsoft GIF Animator ( http://www.freewarepage.de/download/187.shtml) und
irfanview ( http://www.irfanview.de/)


1. Was soll gezeigt werden?

Am Anfang sollte man sich genau überlegen, was man darstellen will. Gerade bei langen Emoticons ist dies erforderlich. Will man nur bestimmte Emotionen etc. ausdrücken, stellt sich einen die Frage wie man dies am besten ausdrücken kann. Z.B. bei einem betrunkenen Smilie benutzt man einen verklärten Blick und rote Wangen, bei einem wütenden einen entsprechenden Gesichtsausdruck.

Auch die Farbgebung spielt eine Rolle denn sie kann mitunter einen Ausdruck verstärken wie rot bei einem wütenden Smilie.

Nehmen wir diesen: http://home.arcor.de/wayayoshitaka/omo/innocent.gif. Er soll unschuldig wirken und besitzt ein angenehmes orange was ins Pastell übergeht. Die roten Wangen, der Blick und der Heiligenschein sollen dieses „Unschuldige“ ausdrücken.

Bei langen Emoticons sollte man zumindest im Kopf die grobe Abfolge bereits geplant haben. Denn man benötigt selbst für einen Smilie der nur einpaar Sekunden läuft einige Bilder, damit die Handlungen flüssig gezeigt werden können. Als Beispiel werden wir dazu diesen Smilie verwenden: http://home.arcor.de/wayayoshitaka/omo/mine.gif


2. Der Smilie Rohling

Smilie Körper ( http://home.arcor.de/wayayoshitaka/omo/smiliet6.png)
Die Standartgröße des Smilie Körpers beträgt 16x16 Pixel.
Da er rund ist sollte er auch etwas plastisch aussehen. Dazu müssen wir uns der Farbpalette von Paint bedienen. Öffne nun Paint und zeichne zuerst die Konturen des Smilies.
Danach solltest du dir überlegen, was für eine Farbe dein Smilie haben soll. Um ihn plastisch wirken zu lassen musst du dich auch entscheiden in welche Richtung sich deine Farbe ändern soll. Einfach nur von Dunkel zu Hellblau oder auch von grün zu gelbgrün? Die dunkelste Farbe ist hier die der Kontur, die hellste die der Mitte. Erstelle am besten zuerst eine Art Farbskala. An dieser kann man auch sehen ob die Farben soweit ineinander übergehen.


3. Viele ergeben ein Ganzes

Der Zeitaufwendigste Teil folgt jetzt. Wenn du dir deine Handlung soweit überlegt hast gilt es sie nun um zu setzten indem du für jede Bewegung ein Bild ( http://home.arcor.de/wayayoshitaka/omo/smiliet3.png) erstellst. Je Mehr Bilder du für eine Bewegung benutzt, desto flüssiger sieht sie dann in der Animation aus.
Zwei Dinge die du schon in Paint machen kannst vereinfachen dir dann das Arbeiten mit dem Microsoft GIF Animator:
1. Wähle eine Hintergrundfarbe aus. Diese Hintergrundfarbe wird dann der Transparente Bereich sein. Benutze eine grelle Farbe und eine die beim Emoticon selbst nicht vorkommt.
2. Um die einzelnen Teil später nicht Mühsam einrücken zu müssen, haben alle Einzelbilder bei mir die gleiche Größe. Ich gehe dabei von dem größten Bild aus und passe die anderen mit der Hintergrundfarbe an.

Benutze nun das Werkzeug zum ausschneiden (gestrichelte Rechteck) und schneide jedes Einzelbild aus. Hast du es mit dem Werkzeug markiert kannst du es mit Rechtsklick auf die auszuschneidende Fläche und kopieren nach in einen selbst gewählten Ordner kopieren (erstellt am besten einen neuen Ordner für die Einzelbilder). Es ist anzuraten die Bilder alle als bmp abzuspeichern, da es sonst passieren kann dass der Hintergrund plötzlich aus verschieden Farbabstufungen besteht und dann nützen einen die gif Bilder nicht viel. ;)


4. Umwandeln von bmp in gif

Öffnet eins der bmp Bilder in euren Ordner mit irfanview. Um nicht alle Bilder einzeln in umwandeln zu müssen bedienen wir uns der Batch-Konvertierung. Diesen Menüpunkt findet ihr unter Datei: klick ( http://home.arcor.de/wayayoshitaka/omo/smiliet5.png)

Im Menü ( http://home.arcor.de/wayayoshitaka/omo/smiliet4.png) markiert (1) ihr nun alle eure Einzelbilder und klickt auf „Hinzufügen“ (2). Wählt dann bei (3) den Ordner in dem ihr die umgewandelten Bilder speichern wollt. Ihr könnte diese natürlich gleich in dem speichern, wo schon die bmp Bilder liegen. Nachdem ihr das Zielformat (4), also gif festgelegt habt, braucht ihr nur noch auf „Start“ (5) drücken.


5. Animieren mit dem Microsoft GIF Animator

Hierbei solltet ihr beachten das ihr das letzte Bild was bei euren Smilie gezeigt werden soll, das Startbild ist und das erste das letzte. Zwar könnte man auch die Bilder in der Reihenfolge wie so dran kommen einfügen, jedoch ist das zeitaufwändiger und komplizierter. ;)
klick ( http://home.arcor.de/wayayoshitaka/omo/smiliet2.png)
Gehe nun mit (1) in deinen Ordner und lege das letzte Bild als Startbild fest. Hast du 10 Frames ist es das 10. Dann fügst du mit (2) die anderen Bilder hinzu in folgender Reihenfolge: 9, 8, 7, 6, … ,1.
Bei „Animation“ machst du nun noch ein Häkchen bei „Looping“ und „Repeat Forever“ hinein.
Bei „Image“ ( http://home.arcor.de/wayayoshitaka/omo/smiliet1.png) werden jetzt Einstellungen an jedem einzelnen Bild vorgenommen.
Wähle nun das Bild an was du bearbeiten willst. (1) Bei Duration stellst du ein wie lange dieses Bild zu sehen sein soll. Je größer die Zahl desto länger sieht man dieses Bild, je kleiner, desto kürzer. Bei (2) stellst du „Restore Background“ ein. Nun geht es an die Transparenz. Mach dazu bei „Transparancy“ ein Häkchen hinein und wähle die Hintergrundfarbe. (3) Mit einem Doppelklick auf die Farbfläche werden dir die Farben angezeigt, die du in dem Bild verwendet hast. Da die meisten Programme dazu neigen, aus den verwendeten Farben mehr zu machen ist es von Vorteil eine herausstehende Farbe zu verwenden, die man schnell wieder findet. Wähle deine Hintergrundfarbe auf und klick auf OK. Das muss nun mit jedem Bild gemacht werden.
Die Einstellung der Bildgeschwindigkeit kannst du überprüfen indem du deine Animation zur Probe laufen lässt (4). Dabei kann man auch noch mal Bilder entdecken, die man vielleicht vergessen hat. Ist man soweit zufrieden geht man auf das „Speichern unter“ Symbol (5) und speichert ab.

Glückwunsch, du hast es geschafft. ;)

http://home.arcor.de/wayayoshitaka/omo/mine.gif


Es gibt sicherlich andere und auch einfachere Methoden z.B. mit Image Ready, aber zumindest die von mir vorgestellte Vorgehensweise kann soweit von jemanden genutzt werden, da nur Freeware verwendet wird. ;)

Ich hoffe das Tutorial ist soweit hilfreich und verleitet den einen oder anderen dazu sich mal zu probieren und stellt seine Werke dann auch hier rein. :) ;)

Pfennigewyn50
26.11.2006, 15:56
Ich hab erstmal einen ganz simplen (http://img332.imageshack.us/img332/968/rolleystu7.gif) versucht, allerdings scheitere ich am Hintergrund, im Programm beim Test gehts, aber ansonsten nicht.

Waya Yoshitaka
26.11.2006, 18:48
Nimm mal das lila da ganz oben zwischen den ganzen grün. :) Das sollte die richtige Farbe sein. ;)

Pfennigewyn50
26.11.2006, 19:00
Dankeschön!http://img122.imageshack.us/img122/8261/rolleysou8.gif

Sister of mercy
26.11.2006, 19:05
Paint ist insofern eigentlich unbrauchbar für Smilies/Emoticons, da man dort keine transparenz erstellen kann.

@Pfennige50: Das ist z.B. auch der Grund für den Hintergrund deines Smilies.

Mann kann zwar den Smilie soweit in Paint erstellen, das man hinterher nurnoch mit einem Programm wie PS oder GIMP den Hintergrund transparent machen kann, aber auch leider nicht mehr.

Ich hab vor einiger Zeit mal einen Smilie erstellt. Diesen hab ich allerdings ausschließlich mit Gimp gemacht.

http://img118.imageshack.us/img118/4892/namenloscy6.gif
Ich habe mich aber nicht mehr da dran gesetzt, um die Zähne nicht über die Mauer springen zu lassen.

Pfennigewyn50
29.11.2006, 21:46
hmm ich hab das Gefühl, dass ich beim gif-animator irgendeine Einstellung vergessen habe http://img63.imageshack.us/img63/8017/vipzl8.gif Kann mir jemand sagen welche?

Waya Yoshitaka
29.11.2006, 21:53
Ich schätze mal bei "Image" =>"Undraw Method" =>"Restore Background". :)

Pfennigewyn50
30.11.2006, 14:58
Danke!!!! http://img174.imageshack.us/img174/9320/vipvr3.gif

Gothiclendenschurz
02.12.2006, 20:22
Jau, schönes Tutorial, hab mich auch mal dran gesetzt, Smilies zu basteln. Nur ist mir aufgefallen, dass es, wenn man bei den einzelnen Bildern statt den pinken Hintergrund einen weißen nimmt, viel einfacher geht, die Tranzparensfarbe zu finden.

Hab inzwischen schon ne ganze Palette an Smilies gemacht, hier ist mal das erste, welches ich überhaupt animiert habe. Ist zwar nix besonderes und siehts ziemlich schräg aus, aber für ein Erstlingswerk reichts denke ich mal aus ;)

Katan
02.12.2006, 22:30
Danke für das schöne Tutorial, Waya! :)
Ich habe Adobe Image Ready, die von dir beschriebene Methode ist mir aber letztlich doch lieber. Für den kommenden - meine erste Animation ever - Smiley habe ich im Endeffekt aber alles mögliche benutzt, Photoshop, Microsoft GIF Animator und Image Ready. Dank Stoffel ist er nun auch nicht mehr braun ^^.

http://www.tikanderoga.net/Katan/gfx/allgemein/katansmile.gif

Waya Yoshitaka
03.12.2006, 01:45
Mich würde aber auch schon interssieren wie man mit Image Ready animiert. Vielleicht findet sich jemand, der mal dazu etwas schreibt? Die beschriebene Methode hab ich mir vor fast 3 Jahren angeeignet und wenn man nix anderes kennen lernt, bleibt man ja dann doch bei dem was man kennt. >>"

Jau, schönes Tutorial, hab mich auch mal dran gesetzt, Smilies zu basteln. Nur ist mir aufgefallen, dass es, wenn man bei den einzelnen Bildern statt den pinken Hintergrund einen weißen nimmt, viel einfacher geht, die Tranzparensfarbe zu finden.Jup, sicherlich. :) Muss dann jeder selbst raus finden was am besten ist. Mit der pinken Hintergrundfarbe ist nur ein Beispiel, es muss nur eine Farbe sein, die sonst nicht im Smilie selbst vorkommt und die man wieder gut findet. Hab mir die pinke angewöhnt, bzw. oder auch lila. ^^"

Dein Smilie ist doch auch gar nicht so schlecht, ein guter Anfang, mach weiter! :)



Ich hab noch zwei zum Thema Weihnachten gemacht:

http://home.arcor.de/wayayoshitaka/omo/jingle.gif


http://home.arcor.de/wayayoshitaka/omo/notalone.gif

Stoffel
03.12.2006, 09:26
Mich würde aber auch schon interssieren wie man mit Image Ready animiert. Vielleicht findet sich jemand, der mal dazu etwas schreibt? Die beschriebene Methode hab ich mir vor fast 3 Jahren angeeignet und wenn man nix anderes kennen lernt, bleibt man ja dann doch bei dem was man kennt. >>"

In kurz und ohne Screenshots^^:
Anfangen würde ich mit Animationen immer in Photoshop, ungeachtet der Version. Zunächst muss man wie auch bei dir beschrieben für jede Bewegung eine Ebene erstellen, der Hintergrund kann in Photoshop aber natürlich schon gleich transparent sein. Am Beispiel von Katans Smilie hätte man anschließend 54 Ebenen. Bevor man dann mit dem animieren anfängt sollte man bei Datei > für Web speichern noch die Anzahl der Farben festlegen und die Palettenoption auf Selektiv stellen. Anschließend kann man in's Image Ready wechseln, wo man unten im Animationsfenster oben rechts auf den Pfeil klickt, und dort die Option nimmt, aus den Ebenen Frames zu machen. Wenn das getan ist, muss man eigentlich nur noch durchsehen ob in der Ani irgendwelche Fehler sind, kann noch die Schnelligkeit einstellen und es letztendlich optimiert speichern. :)

Ich mach' die Woche dann wahrscheinlich nochmal was ausführlicheres zu dem Thema^^.