Tutorial: Grüne Smilies selber machen!
Da der Wunsch nach einem Tutorial zum Erstellen von Smilies immer häufiger geäußert wurde, habe ich mich mal an die Arbeit gemacht, eines zu erstellen. Basierend auf meinem GDK, soll euch diese Anleitung eine Anregung sein, eigene grüne Smilies zu erstellen. Natürlich könnte ihr damit auch Smilies in anderen Farben erstellen und ich würde mich sehr freuen, wenn ihr mir diese zur Verfügung stellt, egal ob in grün oder einer anderen Farbe.
Dieses Tutorial basiert auf der Software, mit der ich arbeite und das ist Adobe Photoshop 7 und Adobe Image Ready 7, letzteres ist nur ein Teil von Photoshop. Im Wesentlichen sollten sich die Informationen aber auch in anderen Grafikpaketen, wie neueren Adobe Versionen (CS3) oder freier Software, wie Gimp, nutzen lassen.
Neben der für euch passenden Software, hilft euch beim Einstieg in die Welt von GreenSmilies das GDK und eventuell der von mir für Beschriftungen bevorzugte Font XG Pixo:
Habt ihr beides heruntergeladen und entpackt bzw. den Font installiert, könnt ihr auch schon mal Image Ready starten und die gif-Dateien öffnen – wer hier jetzt schon scheitert, also beim Entpacken und Öffnen der Dateien, der sollte sich vorher PC-Basics aneignen, welche nicht Teil dieser Anleitung sein werden! Das GDK besteht aus diesen Elementen (und wird ggf. von Zeit zu Zeit erweitert):
Rahmen und Füllung:
Augen:
Münder:
Hände:
Gesichter:
Ein Wort noch zu dem, was einen grünen Smilie, zu einem GreenSmilie macht. Sein Rahmen ist immer ein Kreis in einem Quadrat von der Größe 18×18 Pixel, er besitzt eine schwarze Kontur und seine Füllung ist so ausgerichtet, dass die Reflexion, also der helle Bereich im Grünen, immer rechts oben ist. Egal wie auch immer der Kleine herumspringen wird, die Reflexion ändert nie ihre Position! Accessoires und Teile des Gesichts besitzen in der Regel auch immer schwarze Konturen, wobei das kein “muss” ist.
Los geht’s!
Ich werde mit euch nun einfach mal einen Smilie aus den Bestandteilen des GDK zusammensetzen, um hierbei die wichtigsten Paletten von Image Ready mit euch durchzugehen. Wenn ihr alle Elemente des GDK geöffnet habt, sucht euch den Rahmen und die Füllung und zieht sie euch mal hervor:
Links seht ihr die Werkzeugleiste und im Uhrzeigersinn folgend findet ihr oben eine Leiste mit den Optionen für das aktuell gewählte Werkzeug, dann kommt die Palette zum Optimieren, welche wir aber erst zum Schluss benötigen werden, gefolgt von der Palette zur Farbwahl, Farbtabelle und Ebenen, letzteres ist eine der wichtigsten Paletten. Zum Schluss kommt die Palette zur Animation von Grafiken. In der Werkzeugleiste ist gerade das Werkzeug zum Verschieben aktiviert und zum Start schiebt ihr mal die Füllung per Drag & Drop in das Fenster mit dem Rahmen. Sehr hilfreich hierbei ist die Tastenkombination Strg+0, die das Fenster auf maximale Zoomstufe vergrößert.
Sollte eine Palette fehlen, klickt ganz oben mal auf “Fenster”.
Habt ihr nun die Füllung in den Rahmen gezogen, habt ihr praktischerweise schon zwei Ebenen in der Ebenenpalette, die markierte Ebene kann hierbei auch mit den Cursortasten verschoben werden, um die Füllung passgenau im Rahmen zurecht zu schieben. Neben der Vorschau seht ihr in der Ebenenpalette auch einen kleinen Text, dieser kann per Doppelklick auf diesen modifiziert werden, was sehr hilfreich sein kann:
Die Reihenfolge in der Ebenenpalette bestimmt auch die Sichtbarkeit der jeweiligen Elemente, das was unten steht wird vom darüberstehenden überdeckt. Die Bereiche im Bild, die dieses grau/weiße-Schachmuster aufweisen, sind die transparenten Bereiche, dadurch überdeckt zum Beispiel die Füllung nicht den schwarzen Rahmen, sondern lässt ihn durchscheinen.
Nun zieht euch noch ein paar Augen in euren Arbeitsbereich. Sollten diese nicht sichtbar sein, liegt die Ebene der Augen eventuell unter der Ebene der Füllung und muss daher in der Ebenen-Palette nach oben verschoben werden. Die Augen sollten nun die oberste Ebene darstellen, den Mund wollen wir nun selber pixeln. Dazu erstellt ihr eine neue Ebene, indem ihr in der Ebenenpalette auf das Symbol links unten, neben dem kleinen Papierkorb, klickt. Dadurch wird eine neue Ebene erstellt, die wir gleich in “Mund” umbenennen.
In der Werkzeugleiste aktivieren wir nun den “Buntstift” als Werkzeug (siehe folgenden Screenshot), sollte anstelle des Bleistifts ein anderes Symbol zu sehen sein, könnt ihr mit gedrückter Maustaste an dieser Stelle einen Tooltip mit anderen Werkzeugen öffnen. Multiple Werkzeuge erkennt ihr an dem kleinen schwarzen Dreieck in der rechten, unteren Ecke.
In den zum Buntstift gehörenden Optionen wählen wir als “Buntstiftgröße” die kleinste Einheit “1″ für einen Pixel:
In der Werkzeugleiste gibt es relativ weit unten zwei Farbfelder (im obigen Screenshot die beiden Grüntöne), die als Vorder- und Hintergrundfarbe dienen. Klickt man auf eine der beiden, öffnet sich der “Farbwähler”, in welchem sich auf unterschiedliche Herangehensweisen Farben bestimmen lassen. Ihr könnt auch mit der Maus im großen Feld ein Farbe anklicken. Um ein reines Schwarz für unseren Mund zu bekommen, schiebt den Kreis in diesem Feld in das linke untere Eck. Die Zahlen rechts davon passen sich automatisch an die gewählte Farbe an. Spielt etwas damit herum und ihr werdet schnell merken, wie die Sache funktioniert. Stellt für die Vordergrundfarbe ein reines Schwarz ein und beendet den Farbwähler mit OK.
In der zuvor erzeugten Ebene “Mund” könnt ihr nun munter drauflos pixeln, ich habe dies mal so gemacht:
So einfach und schnell habt ihr nun euren ersten Smilie erstellt! Gefällt euch euer erster Versuch mit dem Mund nicht, so könnt ihr neben dem Buntstift in der Werkzeugleiste den Radiergummi zum Löschen von Pixeln auswählen. Sollte die Position des Mundes nicht passen, könnt ihr sie mit dem anfangs erwähnten Verschiebewerkzeug in der Position ändern. Ebenen lassen sich auch komplett löschen bzw. lässt sich mit dem “Auge” in der Ebenen-Palette die Sichtbarkeit einstellen.
Wie ihr den kleinen Grünen nun animiert und abspeichert, erfährt ihr auf der nächsten Seite!
Beliebte Beiträge:
(16 votes, average: 4.94 out of 5)
Loading ...
Loading ...
Am 11. Mai 2009 um 21:53 Uhr.
Hi
Ich habe jetzt diese Schrift gedownlodet wo mus die jetzt hin und wo finde ich die dan.
MFG
Player
Am 11. Mai 2009 um 22:00 Uhr.
Nachdem du die Entpackt hast, Rechtsklick => Installieren :)
Falls dass nicht möglich ist:
Im Explorer oder Arbeitsplatz den Ordner Windows\Fonts\ aufrufen und die Schrift da reinziehen, dann wird sie installiert.
Dann ist sie als Systemschriftart integriert und du kannst sie (fast) überall nutzen …
Am 11. Mai 2009 um 22:15 Uhr.
Danke fürs Tutorial. Werd mich demnächst mal dran machen und eigene erstellen.
Am 11. Mai 2009 um 22:45 Uhr.
Sehr feines Tutorial!
Hab sonst immer mit Ebenen und fürs Web speichern im Photoshop selber gearbeitet wenn ich mal was animiert habe, das ist so doch angenehmer ^^…
Erster ‘eigener’ Smiley ist per Mail unterwegs :)
Liebe Grüße
Lyssa
Am 11. Mai 2009 um 23:06 Uhr.
Das versuche ich auch mal, mal sehen was das wird.
Am 12. Mai 2009 um 00:19 Uhr.
Freut mich, sagt mir wenn was unverständlich ist oder gar fehlt!
@Player: sry, das sind die angesprochenen Basics, Tom hats aber richtig beschrieben.
Am 12. Mai 2009 um 08:10 Uhr.
@Lyssa: Super Smilie! Beim Abspeichern hast du dem Kleinen aber noch etwas zu wenig Farben spendiert, du müsstest die Grafik also noch etwas besser optimieren.
Am 12. Mai 2009 um 11:04 Uhr.
Hammer Tut!!!
:bravo:
Am 12. Mai 2009 um 12:57 Uhr.
Ich finde diesen Ordner nicht (Windows)
Da sind nur welche dieSO heißen :
Windows Media Player
Windows NT
Windows Media Connect 2
Windows Media Connect 1
Windows Journal Viewer
Aber keine anderer mit W.
MFG
Player
Am 12. Mai 2009 um 14:36 Uhr.
@Player: Nicht unter programme sondern unter C:Windowsfontshier rein muss es dann
P.s.: Neues GDK!!! (Neue Münder Hände etc.)
Hab noch das ganz alte, so fort gedownloadet, ein paar fehlten mir noch
Probiere das prog auch mal aus
Am 12. Mai 2009 um 14:50 Uhr.
@The blog: Das hat Tom doch oben geschrieben.
Am 12. Mai 2009 um 15:04 Uhr.
Ah
Danke hat geklapt.
Mein Forum: http://wrestling-champions.all-up.com/
MFG
Player
Am 12. Mai 2009 um 15:13 Uhr.
Boar geil, vor kurzem habe ich noch um ein Tut gebettelt, und schwups ist eines da. Ne menge Infos!
Werde das demnächst mal durchgehen. Fettes Danke für das Tut!
Am 12. Mai 2009 um 15:15 Uhr.
@Player: Ich würde mir mal nen Duden kaufen!
Am 12. Mai 2009 um 17:35 Uhr.
@Christian: Warum nen Duden.
Wer brauch so eine S******. und wofür.
Am 12. Mai 2009 um 18:05 Uhr.
@Schocker Blogger: Moment, jetzt musst du es aber schon sofort durchgehen und nicht erst “demnächst”!
@Player: Ich kann mir schon vorstellen was Christian meint, du postest ja brav deine Foren-URL hier (es reicht aus, wenn du sie in das dafür vorgesehene Feld setzt, im Beitrag sieht das sehr nach Spam aus) und ich habe da mal draufgeklickt und das hier ist schon sehr amüsant:
Und das zieht sich durch all deine Beiträge, ich würde dir auch dazu raten, falls Deutsch nicht deine Muttersprache ist, mal die Texte Korrektur lesen zu lassen.
Am 12. Mai 2009 um 18:39 Uhr.
@Michael: Wilst du jetzt sagen das ich ein Auslender bin.
Dan hast u dich geiert.
Ich tippe nur so schnell, und gucke dabei nicht auf Rechtschreibfehler.
OK
MFG
Player
Am 12. Mai 2009 um 18:53 Uhr.
@Player: Du tippst nicht nur schnell, sondern schlichtweg falsch!!
LG AveN
Am 12. Mai 2009 um 19:45 Uhr.
@Player: Nix für ungut, du schreibst wie jemand der nicht der deutschen Sprache mächtig ist, ich wäre da nicht unbedingt stolz drauf. Wie wärs, wenn du dir etwas mehr Zeit lässt und dafür weniger Fehler machst.
Am 12. Mai 2009 um 20:24 Uhr.
@Michael: Ja, kan ich ja mal machen.
Dan last uns das Thema jetzt beenden.
MFG
Player
Am 14. Mai 2009 um 22:44 Uhr.
Hi habe noch einen Roling gemacht, einen mit Schild:
Ist er Gut oder nicht.
Am 14. Mai 2009 um 22:49 Uhr.
Am 14. Mai 2009 um 22:58 Uhr.
@Player: Ähm, also an Rohlingen besteht nicht wirklich Bedarf. ^^
Am 14. Mai 2009 um 23:15 Uhr.
@Player: die “Fläche” ist zu hoch, Ich hab auch so welche um mir schnell Schildersmilies zu machen. Hab einen von Michael genommen und dass unötige gelöscht
Siehst du an den “Viel Spaß mit der Verwarnung”´s Smilies.
Am 14. Mai 2009 um 23:51 Uhr.
@Player: Außerdem sehe ich gerade, dass er nicht transparent ist, aber wie gesagt, von meiner Seite kein Bedarf da ich sowieso mit Layern im psd-Format arbeite und ganz andere Rohlinge benutze.
Aber wenn du ihn anhand des Tuts gemacht hast, sehr gut!
Am 15. Mai 2009 um 06:53 Uhr.
Oh ja, er ist nicht transparent.
Danke.
Am 15. Mai 2009 um 13:13 Uhr.
[...] GDK wurde aktualisiert und außerdem gibt es nun ein Smilie-Bastler-Tutorial! Beliebte [...]
Am 15. Mai 2009 um 13:42 Uhr.
@The blog: ehm
Warum, hier ist er doch auch so hoch.
Aber egal.
MFG
Player
Am 15. Mai 2009 um 17:38 Uhr.
@Player: Oh, der ist mir noch gar nicht aufgefallen.
Naja, ich dachte immer die hohen wären nur für welche mit zwei schildhaltenden Händen, sorry.
Am 15. Mai 2009 um 21:12 Uhr.
Ja egal.
Jeder macht mal Fehler.
Auch Rechtschreibfehler.*lach*
Am 16. Mai 2009 um 18:16 Uhr.
[...] erste Ergebnis des Smilie-Bastel-Tutorial kam von Lyssa und es ist ihr vorzüglich [...]
Am 17. Mai 2009 um 16:36 Uhr.
die gängs der smilies ist ned zu unterschätzen die kommen noch an die macht glaubt mir
:ja: 
lol wollte mal was zum lachen rein bringen den es wert so sein gibt den noch parr jahre und ihr wert ALLE noch sehen 
also nachst immer sich um schauen kann sein das sie auch schon in eure städte sind 
Am 17. Mai 2009 um 19:32 Uhr.
Smilies na die Macht
Am 9. Juni 2009 um 16:42 Uhr.
Hallo.
Das Tutorial ist wirklich gelungen und ich würde mich gerne auch daran versuchen.
Allerdings sind die GDK Vorlagen bei mir im PS gesperrt, so dass ich sie nicht verschieben kann etc.
Wie kann ich das ändern, oder muss ich die Vorlagen in einen bestimmten Ordner kopieren um sie nutzen zu können?
Danke schonmal :)
Am 9. Juni 2009 um 19:34 Uhr.
Da gibts viele Wege, ein schneller ist den Modi auf RGB zu ändern, dann kannst du sie weiterbearbeiten.
Am 5. August 2009 um 16:38 Uhr.
mann könnte doch vielicht so extras wie hüte einbauen :)
Am 30. Oktober 2009 um 16:10 Uhr.
@Dominik: Ja, genau.
@Michael: Zum Beispiel die Weihnachtsmann-Mütze. Die fehlt mir nämlich.
Am 2. November 2009 um 18:06 Uhr.
Hi, ich hab die Seite erst vor kurzem gefunden und finde die Smilies echt klasse.
Als ich das Tutorial gesehen hatte hatte ich es sofort durchgelesen und meinen ersten Smilie gemacht:
mfg Teehee
Am 6. November 2009 um 16:54 Uhr.
Hey, ich habe Photoshop Elements, und wenn ich da einen Smiley animiere wird das total ruckelig
… Geht das damit überhaupt gescheit? 
Am 11. November 2009 um 14:26 Uhr.
@Stephan: Das kann ich dir nicht beantworten, aber ich tendiere eher zu ja.
Am 14. Februar 2010 um 12:31 Uhr.
wie kann ich ein eigenes smailie machen die sich bewegen ?
Am 14. Februar 2010 um 12:34 Uhr.
@portugal: Wie wärs wenn du den Beitrag liest?