Anzeige
Tutorialbeschreibung

Wie erstelle ich Smilies? So...

Wie erstelle ich Smilies? So...

Ihr seht sie überall, im Internet, bei Messenger...Smilies!
Ich werde euch hier zeigen, wie man ganz einfach solche runden, gelben Kugeln erstellt.
Das Gute am Ganzen: Die Technik bleibt immer die Selbe, die Mimik kann jedoch beliebig verändert werden.

Also...ran ans pixeln!


Zum Anfang möchte ich darauf aufmerksam machen, dass ALLE Werkzeuge hier in meinem Thema zu finden sind: www.psd-tutorials.de/modules/Forum/90_ps-grundlagen/22533-fuer-anfaenger-die-2-wichtigsten-paletten-photoshop.html

Schritt 1:

Als erstes öffnet ihr eine neue Datei mit den Angaben, die auf dem Bild zu sehen sind.

Bilder

 

Schritt 2:
Jetzt füllt ihr den Hintergrund mit irgendeinem Verlauf, der nicht ablenkt.

Ich habe einen Verlauf von Grau (#717171) auf  Weiß (#FFFFFF) gezogen:
Shift für einen in 90° verlaufenden Verlauf (dolle Wörter ^^) gedrückt halten und von Oben nach Unten ziehen!


Danach ziehe ich eine runde Auswahl, ungefähr in der Mitte, mit dem Auswahlellipse-Werkzeug,
indem ich ebenfalls Shift gedrückt halte, um eine gleichmäßige Kreisauswahl zu bekommen.

Das sollte dann ungefähr so aussehen:

Bilder

 

Schritt 3:
Ich erstelle eine neue Ebene und fülle diese mit einem weiteren Verlauf, mit diesen Farben: #bfab00 und #ffff50.

Diesmal von Unten nach Oben (innerhalb des Kreises).

Ich verdoppel mir diese Ebene und blende die Kopie aus!!

Jetzt nehme ich mir wieder die Auswahl des Original-Kreises durch einen Klick + Strg auf das Miniaturbild der Ebene und gebe der Auswahl eine weiche Auswahlkante

von ca. 10 Pixeln, kehre die Auswahl um und drücke Entfernen 4x.

Ich hebe die Auswahl wieder auf und so sieht es bei mir dann aus:


Bilder

 

Schritt 4:
Nun blende ich die Kopie des Kreises wieder ein und verschiebe diese Ebene unter die Originalebene mit dem Kreis (den, den man oben sieht).

Jetzt wird es etwas schwieriger:

Zu erst drücke ich Strg + U und stelle die Sättigung auf -30.

Danach nehme ich mir das Abwedler-Werkzeug mit einer Pinselspitze von 100 px Durchmesser und 15% Kantenschärfe und stelle oben im Photoshop-Fenster
bei Bereich auf  Mitteltöne.

Mit diesem Werkzeug male ich auf der oberen Hälfte auf dem Rand entlang, so dass dieser sich aufhellt bis es so aussieht, als ob Licht von oben einfällt.

Aber nur auf der oberen Hälfte!

Das bekommt man dann raus:


Bilder


Schritt 5:

Jetzt wird das Selbe mit der untere Hälfte des Kreise mit dem Nachbelichter-Werkzeug. Die Pinselspitze stell ich wie bei dem Abwedler-Werkzeug ein.

Jetzt wechsel ich auf die Original-Kreiseben (die jetzt ganz oben liegen müsste) und male ebenfalls einen "Schatten" unten hin, allerdings ein bisschen kleiner.


Bilder

 

Schritt 6:
Jetzt wird ein weiterer Schein erstellt. Dazu nehme ich mir wieder die Auswahl von dem kopierten Kreis mit Strg + Klick auf das Miniaturbild.

Erstelle eine neue Ebene, verschiebe diese nach ganz oben in der Palette und fülle sie mit weiß.

Jetzt drücke ich Strg + T und verkleiner sie, mit Shift + Alt gedrückt haltend, am linken oberen Punkt ziehend, so, dass ein ~0,5 cm großer Rand entsteht.

Nun noch einmal Strg + T drücken und ziehe, mit Alt gedrückt haltend den, auf der linken Seite in der Mitte sitzenden Punkt, zur Mitte (wie auf dem folgenden Bild).

(kleine Nebenbemerkung: Ich mag Kommas ^^)

Das sollte dann hoffentlich jetzt so aussehen:

Bilder


Schritt 7:
Diese Ebene setze ich auf ungefähr 60 % Deckkraft.

Kopiere sie mir und drücke wieder Strg + T. Diesmal verkleiner ich sie nur (wieder Shift + Alt gedrückt halten) mit der linken oberen Ecke.

Diese Ebene stelle ich auf 50 % Deckkraft.

 

Nun wird es wieder etwas schwieriger: Wir arbeiten jetzt mit Ebenenmasken.

Ich blende die obere Ebene aus (die, mit dem kleineren Kreis). Und Füge dem 2. Kreis (dem Großen) eine Ebenenmaske hinzu.

Nehme das Verlaufswerkzeug mit einem Verlauf von Schwarz auf Weiß und ziehe (Shift gedrückt halten ~> 90° Winkel) einen Verlauf von der Mitte bis Oben in der Ebenenmaske.

Das Selbe mache ich mit dem 2. Kreis (dem Kleinen), den ich wieder eingeblendet habe.


Bilder

 

Zwischenschritt:
Ich markiere alle Ebenen bis auf den Hintergrund mit Shift bzw. Strg und erstelle einen neuen Ordner, den ich in "Kopf" umbenenne.

Dort sind jetzt alle Ebenen, die zum Kopf gehören, enthalten.


Weiter geht's mit dem Gesicht...

Ich habe mich für ein erstauntes Gesicht entschieden, ich finde diese Smilies immer am lustigsten (& bescheuersten ^^).

Ihr könnt euch natürlich ein anderes Gesicht aussuchen, die Technik ist immer die Selbe.

 

Schritt 8:
Zuerst das Auge:

Ich erstelle eine neue Ebene und mit dem Auswahlellipse-Werkzeug eine Ellipse, die einem Auge ähnlich kommt. Fülle diese mit Weiß und füge einen Schlagschatten und einen Schatten nach innen hinzu:

Bilder

Bilder


Dann kopiere ich diese Ebene und setze die kopierte Ellipse als 2. Auge auf's Bild.

Bilder

Schritt 9:
Ich kopiere mir wieder eine der beiden Ellipsen und drücke Strg +T.
(Der Stil muss erhalten bleiben!)

Mit Strg +T verforme ich die Ellipse wieder wie schon mal mit Shift und Alt (ich nenne das jetzt mal "gleichmäßig Verformen") bis sie einen kleinen Abstand hat.
Den Abstand siehst du auf dem folgenden Bild.

Nun wird ein weiterer Ebeneneffekt hinzugefügt, die Verlaufsüberlagerung.

Ich habe einen Verlauf mit Blau gewählt, da ich selber blaue Augen habe ^^

Meine Verlauf geht von #5bbdf9 auf  #002f86 mit einem radialen Stil in einem Winkel von 90°. Wenn man jetzt über das Bild fährt, wird der Mauszeiger zu dem Verschiebe-Werkzeug, ich habe den radialen Verlauf so hin geschoben, dass die helle Stelle unten ist (siehe Bild).

Ich kopiere noch schnell diese Ebene und schiebe die kopierte blaue Ellipse auf die andere Seite.

Bilder


Schritt 10:

Jetzt wird wieder die blaue Ellipse kopiert, am besten gleich beide blauen Ellipsen.

Diese verforme ich wieder gleichmäßig, so, dass sie ungefähr den gleichen Abstand zum blauen Rand haben, wie die blauen Ellipsen zum weißen Rand.

Ich wechsel jetzt den Verlauf von Blau auf Schwarz zu Dunkelgrau, also von #000000 zu #1d1d1d. Die Einstellungen bleiben erhalten!


Bilder


Schritt 11:
Jetzt wird es vielleicht ein bisschen unverständlich, aber ich versuch es ausführlich zu erklären.

Bei den meisten Bildern, die mit Photoshop erstellt werden, kommt es auf die Details an! Das ist ganz wichtig!! Details "peppen" unbewusst das Bild auf...
Deswegen fügen wir über den Augen einen kleinen, kaum sichtbaren Schein ein.
Und das geht so:

Ihr erstellt einen Kreis im oberen Drittel der schwarzen Ellipse (siehe linkes Auge im Bild).
Und stellt die Deckkraft auf 15%.

Jetzt kopiert ich diesen Kreis und schiebt in auf die rechte Seite in das andere Auge. Ihr fügt nun über die Ebeneneffekte wieder einen Verlauf ein.
Dieser MUSS von Weiß auf Unsichtbar verlaufen. "Unsichtbar" stellt man bei dem Knopf OBEN auf der Verlaufsleiste ein,
einfach auf 0% Deckkraft einstellen...

Standardmäßig ist so ein Verlauf eigentlich schon vorhanden. Diesen Verlauf wählt ihr nun aus, stellt den Stil wieder auf  radial. Man sieht bisher noch nichts, das liegt daran, dass ihr die Fläche der Ebene auf 0% Deckkraft setzen müsst!

Bilder


Zwischenschritt:

Ihr solltet nun die ganzen Augenebenen wieder in einen Ordner packen, damit ein wenig die Übersicht gewahrt bleibt ;)
Ihr könnt natürlich auch ALLE Ebenen benennen, aber das ist mir schlicht weg zu viel Arbeit!


Schritt 12:
So langsam sieht der Smilie ja schon ziemlich echt aus, soweit man ihn als echt bezeichnen kann...


Weiter geht es jetzt mit dem Mund, Nasen werden ja grundsätzlich bei Smilies weggelassen, was weiß ich, warum ^^.

Der Mund muss bei diesem Smilie kleine und schmal sein...
Schaut einfach mal in den Spiegel und macht so ein Gesicht, dann wisst ihr warum ^^

Für den Mund benutze ich das Abgerundete-Rechteck-Werkzeug, dabei muss man darauf achten, dass oben die Buttons bei "Formebenen" stehen und der Radius auf 5 px steht.

Ich ziehe nun einen schmalen Strich, dort wo der Mund hin soll.

Fülle den über die Ebeneneffekte mit dem Verlauf für die Augen, jedoch nicht radial sondern linear. Und füge einen leichten Schlagschatten hinzu, wie es euch halt gefällt.

Bilder


Ende:
Nun sind wir auch schon Am Ende des Tutorials angelangt. Ihr könnt euren Smilie nun beliebig verändern oder erweitern, wie ich es z.B. gemacht habe.
Mit einem Schatten, oder einer Spiegelung vielleicht. 

Bilder
Bilder


Ich hoffe, ihr habt Spaß gehabt und, dass dieses Tutorial euch weitergeholfen hat!!

Euer n0nam3


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von deadcry
  • 01.09.2012 - 17:37

echt easy und schnell gemacht =) perfekt für einsteiger!

Portrait von XXtalonXX
  • 17.05.2012 - 15:58

gut erklärt und beschreiben.
Ich bekomme es leider noch nicht so ganz hin.

Portrait von alicchen
  • 09.04.2011 - 22:32

ich finds hilfreich fürn spässchen, gut verstanden danke!! :)

Portrait von Gheddobaba
  • 06.12.2010 - 08:45

Super gemacht lustige sache =)

Portrait von lace
  • 04.12.2010 - 19:03

Tolles Tut nur einwenig im Ramen gehalten :/

Portrait von j_pimp
  • 01.12.2010 - 14:44

LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL

Portrait von EroB
  • 01.11.2010 - 21:10

gutes tutorial, teilweise musste ich nach funktionen suchen, habe sie zwar schnell gefunden,aber deswegen vll nicht zu 100% für absolute anfänger...

Portrait von RNH93
  • 25.08.2010 - 13:07

Ganz gut erklärt. :D Ich würde aber noch gerne wissen, wie man andere Gesichter macht

Portrait von pupskind
  • 23.08.2010 - 15:50

schöne Erklärung... nur leider ist mein ergebnis nicht ganz so hübsch ^^

Portrait von mars123viele
  • 06.08.2010 - 11:04

danke, ich finde das tutorial echt gut

Portrait von Basso1
  • 15.07.2010 - 12:16

@Macgonzo: Sinn eines Forums ist es, sich über ein Thema auseinanderzusetzen und zu diskutieren. Niemand steht es zu, ein anderes Forummitglied in dieser Form zu beleidigen, auch Dir nicht.
Wenn Du Kritik hast, dann äußere sie und zeige uns konkret, wie man den einen oder anderen Arbeitsschritt besser lösen kann (Weiche Auswahl, Sättigungswerte etc.).
Beleidigende Äußerungen, wie Du sie vom Stapel lässt, ziehen ein Forum runter, nicht Tutorials, die nicht optimale Arbeitsschritte zeigen (wobei ich die Qualität der Arbeitsschritte nicht beurteilen kann, da ich keine Alternativen ausprobiert habe). Eine Entschuldigung jedenfalls wäre fällig!

Jedenfalls sieht das Ergebnis gut aus - und das zählt erstmal.

Portrait von Macgonzo
  • 23.05.2010 - 21:39

P.S.: Die Sättigungswerte stimmen absolut nicht, das Ergebnis ist ein völlig anderes... eine Belichtung macht man nicht mit dem abwedler sondern über eine spezielle belichtungsfunktion in den renderfiltern.....und einen 3D Effekt macht man auch nicht so!

Behalt deine Turtorials für dich und bring hier Anfängern nicht so einen Blödsinn bei!

Portrait von n0nam3
  • 23.05.2010 - 21:50

Probier den Profis einmal zu erzählen, dass Abwedler und Nachbelichter unnötige Werkzeuge sind...
Ich hol das Popcorn :)

Portrait von Macgonzo
  • 23.05.2010 - 21:31

Siehst übrigens so dumm aus wie du bist!

Portrait von Macgonzo
  • 23.05.2010 - 21:30

Ich weiss nicht wie du auf so eine dumme Idee kommst man würde durch 4maliges entfernen eine weiche Kontur machen! Schon mal etwas von Weichzeichnungswerkzeugen gehört? IDIOT!

Sollte echt mal unterbunden werden, dass solche Schrott Tutorials online gestellt werden dürfen. Das zieht die Qualität der ganzen Seite runter!

Portrait von n0nam3
  • 23.05.2010 - 21:47

Eigentlich sollte ich mir einen Kommentar dazu sparen.<br>
Da ich aber gerade guter Laune bin, erläutere ich dir das einmal.<br>
Photoshop bietet nun einmal so wunderbar die Möglichkeit, sein Ziel zu erreichen, ohne gewissen vorprogrammierten Abläufen folgen zu müssen und letztlich ein mitunter akzeptables Endprodukt zu erschaffen.<br>
Das dies nicht immer den Arbeitsweisen anderer Menschen entspricht, ist die logische Folge.<br>
Dies wiederum ist aber nicht gleichbedeutend mit einer schlechteren Arbeit oder mehr Zeitaufwand.<br>
<br>
Du sprichst von negativen Auswirkungen auf die Seite und kritisierst (sofern man das noch so nennen kann) in absurder Weise dieses Tutorial.<br>
Dabei braucht man nur einen kurzen Blick auf die Gesamtwertung werfen...

Portrait von Bruder_JaB
  • 24.06.2011 - 16:42

Sehr schöne Smileys :)

Portrait von webdezign
  • 21.05.2010 - 22:44

Sehr gelungenes Tut... Mach weiter so... ;)

Portrait von meltem_41
  • 21.05.2010 - 20:49

Klasse, sieht cool aus=)

Portrait von VaPi
  • 05.05.2010 - 11:09

sehr sehr cool. vielen dank

x
×
×