In diesem Lernprogramm erstellen Sie von Grund auf eine gruselige Kürbislaterne, die vollständig in Pixel (die Bausteine der digitalen Kunst) dargestellt wird. Erfahren Sie, wie Sie das Zeitleistenfenster von Adobe Photoshop verwenden, um ein lächelndes, zwinkerndes Gesicht zu animieren, das den Betrachter küsst und innen und außen leuchtet.
1. Den Kürbis zeichnen
Schritt 1
In diesem Tutorial arbeite ich in Adobe Photoshop CC 2014. Öffnen Sie Ihr Programm und ein ... kreieren Neues Dokument. Mein letztes Kunstwerk wurde gemessen 36 px durch 30 px, also habe ich mein dokument gemacht 50 px durch 40 px beim 72 dpi mit einer Transparent Hintergrund.
Schritt 2
Beginnen wir mit dem Aufbau der grundlegenden Kürbisform. Zoom (Z) in Ihrem Dokument 1600% oder so.
Verwendung der Bleistiftwerkzeug (B) mit einer 1 px harte Bürste, zeichnen 7 Pixel in einer vertikalen Linie.
Zeichnen 2 Pixel auf beiden Seiten der ersten Zeile.
Zeichnen Sie oben auf dem Entwurf eine zusätzliche vertikale Linie von 2 Pixel gefolgt von 1 Pixel auf der rechten Diagonale der vorherigen beiden. Zeichnen Sie auf der Unterseite des Entwurfs 2 diagonale Pixel nacheinander (siehe unten).
Ergänzen Sie diesen Abschnitt mit 1 diagonales Pixel oben und zwei weitere Pixel rechts oben und unten.
Schritt 3
Weiter mit der Bleistift-Werkzeug und unsere grundlegende Kürbisform:
Mit was wurde in erstellt Schritt 2, Erweiterung 3 Pixel horizontal nach oben und unten im Design. Zeichnen 1 diagonales Pixel über der Linie von drei zuvor gezeichneten.
Bauen Sie mit die Konstruktion des Pumpkins oben auf dem Design fort 3 horizontale Pixel. Unten zeichnen 1 diagonales Pixel unter dem anderen und 2 Pixel auf der rechten Seite.
Die oberste Zeile ist 8 Pixel über. Das Endergebnis ist 10 Pixel über.
Die andere Hälfte ist ein Spiegelbild von allem links der zwei geraden horizontalen Linien. Verwenden Sie die Rechteckiges Laufschriftwerkzeug zu Wählen, Kopieren (Control-C), Einfügen (Kontrolle-V), und Spiegel (Bearbeiten> Transformieren> Horizontal spiegeln) die linke Hälfte, um die grundlegende Kürbisform zu vervollständigen.
Schritt 4
Unser Kürbis braucht ein Gesicht. Ein ... kreieren Neue Schicht in dem Schichten Panel und mit der Bleistift-Werkzeug, Lass uns anfangen:
Das Auge beginnt mit 3 Pixel in einer Zeile und 1 Pixel über ihnen und in der Mitte.
Vervollständigen Sie das Auge mit der dritten Pixelzeile bestehend aus 3 Pixel und die vierte Zeile bestehend aus 5 Pixel.
Drei Pixel rechts von der unteren Augenlinie beginnen die Nase. Es besteht aus drei Reihen: 1 Pixel, 3 Pixel, und 3 Pixel.
Wiederholen Sie die Augenform erneut für das rechte Auge.
Stellen Sie sicher, dass Augen und Nase haben 3 Pixel Räume, die sie trennen. Der Mund beginnt zwei Reihen mit 3 Pixel über.
Schritt 5
Dieser gesamte Schritt besteht aus dem Abschluss des Mundes:
Der Anfang des Mundes, der den letzten Schritt bildet, ist 9 Pixel in a angeordnet 3 x 3 Box.
Zeichnen 3 Pixel in einer vertikalen Linie auf beiden Seiten der zuvor gezeichneten Box.
Als nächstes sind zwei Spalten von 2 Pixel jeweils auf beiden Seiten des Mundes.
Zeichne auf jeder Seite zwei L-Formen aus 3 Pixel jeder.
Hinzufügen 1 Pixel auf beiden Seiten, diagonal und nach außen gehend. Die Oberkanten des Mundes bestehen aus 4 Pixel in einer horizontalen Reihe.
Platzieren Sie den Mund, um den Mund zu vervollständigen 1 Pixel diagonal nach unten in Richtung der Mitte des Mundes und füllen Sie die linke und rechte Seite aus (genaue Form siehe unten). An diesem Punkt sieht der Mund ein bisschen wie eine fliegende Fledermaus aus.
Da mein Kürbis aus verschiedenen Orangen und Gelben bestehen wird, habe ich mich entschlossen, die Farbe meiner Strichzeichnungen in Braun zu ändern (# 6b0f02).
2. Den Kürbis färben
Schritt 1
Die Farben, die in meinem endgültigen Kunstwerk verwendet werden, unterscheiden sich von denen, mit denen ich unten begonnen habe (sie sind gesättigter und wurden später im Prozess geändert). Betrachten Sie dies als eine kleine Lektion, in der Sie problemlos eine harmonische Farbpalette erstellen können. Um Ihre eigenen Farben zu erstellen (oder dies mit anderen Farben), reduzieren Sie die Opazität von der Farbe zu den Prozentangaben, platzieren Sie sie über der 100% Orange Farbe und wählen Sie die neue Farbe mit Pipettenwerkzeug (I). Speichern Sie neue Farben in der Farbfelder Panel und stellen Sie sicher, dass die Opazität wird zurückgesetzt auf 100% für den Rest des Tutorials.
Braun 100%: # 760b03
Braun 75%: # 902b0d
Braun 50%: # ae4a18
Braun 25%: # d1692a
Orange 100%: # f2842b Wird als Grundfarbe verwendet.
Orange 40%: # faa912
Orange 20%: # ffcc01
Gelb 100%: # fff25d
Verschmelzen die Gesichtsschicht und die Kürbislinie bedrucken und mit dem Kürbis füllen Farbeimer Werkzeug und Orange (# f2842b).
Schritt 2
Unser Kürbis braucht einen Stiel.
Verwenden Braun (# 760b03), und das Bleistift-Werkzeug, zeichnen zwei vertikale Linien von 3 Pixel jeweils zwei Reihen voneinander entfernt.
Füllen Sie die beiden Spalten mit Braun 75% (# 902b0d) und schließen Sie die Form mit 2 Pixel von Braun.
Benutzen Braun50% (# ae4a18) als Hervorhebungsfarbe auf dem Stamm.
Schritt 3
Da dies eine Kürbislaterne ist, müssen wir die Oberseite des Kürbises aufschneiden.
Ich habe mit dem selben angefangen Braun am Stiel verwendet. Von der Oberseite des Vorbaus befindet sich die Mitte des Pumpkin-Deckels 9 Pixel nach unten. Zeichnen 8 Pixel über in diesem Mittelpunkt mit 3 Pixel in der nächsten Reihe auf beiden Seiten der Mittellinie.
Verbinden Sie das 3 Pixel über auf beiden Seiten mit 1 Pixel hoch.
Decken Sie den Eckpunkt mit ab Orange und schattieren Sie den Deckel und darunter mit Braun25% (# d1692a) von Schritt 1 in diesem Abschnitt.
Platziere diese dunkelorangen Pixel in den Ecken der Lidstrichgrafik und unter dem Stamm (siehe unten)..
Schritt 4
Konzentrieren Sie sich darauf, was im Kürbis unten mit Schattierungen gemacht wird:
Zeichnen Sie sorgfältig geschwungene Linien von Braun 25% (# d1692a) beginnend an den Vertiefungen des Kürbisbodens. Die Kurven sollten die Kontur des Kürbises selbst nachahmen.
Zeichnen Sie die Unterseite des Kürbises und beginnen Sie, dunkelorange und orange Pixel in der unteren Hälfte des Kürbises zu versetzen.
Umreißen Sie auch die Unterseite des Mundes, der Nase und der Augen.
Optional können Sie jetzt wählen, ob Sie ein Gelb-Orange verwenden möchten Sektion 2, Schritt 1 um dem Kürbisdeckel, den Augen, der Nase und dem Mund Akzente zu setzen.
Die Farben für diesen Teil des Tutorials sind subtiler als die, die ich im nächsten Schritt gewählt habe. Wenn Sie diesen Ton besser mögen, verwenden Sie einfach den nächsten Schritt, um Tipps zum weiteren Schattieren und Hervorheben zu erhalten. Die erstellte Farbpalette bleibt dabei erhalten Abschnitt 2, Schritt 1.
Schritt 5
Wenn Sie einen helleren, gesättigten Kürbis möchten, überprüfen Sie die folgenden Schritte:
Ersetzen Sie alle Instanzen von Braun 25% (# d1692a) auf der Oberfläche des Pumpkins mit Hellrot (# ff1300).
Ändern Sie die Basisfarbe Orange in # ff7700.
Stellen Sie sicher, dass der obere Stiel Brauntöne und Hellbraun anstelle von Rot enthält (wir ändern den Kürbis und nicht die Holzfarbe des Stiels)..
Verwenden Sie für die Zeile, die den Kürbisdeckel kennzeichnet, die hellen Brauntöne von Abschnitt 2, Schritt 1. Verwenden Sie für Highlights Gelb (# ffcc00) und (# fba912), um kleine Kästchen und versetzte Pixelzeilen oben links im Design zu zeichnen.
Tragen Sie das dunkle der beiden Gelben bis zu den Spitzen jedes Kürbisabschnitts. Markieren Sie den Mundboden. Erweichen Sie die hellen roten Schattenpixel mit Rot orange (# ff4500).
Verwenden ein Dunkelbraun (# 3e0702) auf dem Umriß der Unterseite und der rechten Seite des Pumpkins. Erhöhen Sie die obere linke Seite der Strichzeichnungen des Pumpkins mit verschiedenen Brauntönen (siehe unten)..
3. Erstellen der Animationsrahmen
Schritt 1
Jeder Schritt des animierten Symbols, das wir erstellen, erfordert eine separate Ebene, die die Änderung innerhalb des Symbols enthält. Dazu gehören glühende Augen, Änderungen in der Mundform oder Glühen um den Kürbis.
Stellen Sie sicher, dass sich Ihre Kürbiskomponenten auf derselben Ebene befinden. Verwenden Sie die Zauberstab-Werkzeug (W) um den Kürbis außerhalb auszuwählen und zu gehen Wählen Sie> Invers (Shift-Control-I) und dann Wählen Sie> Ändern> Erweitern und Erweitern durch 1 Pixel.
Ein ... kreieren Neue Schicht unter dem Kürbissymbol in der Schichten Panel. Füllen Sie die Auswahl mit hellem Gelb aus Farbeimer Werkzeug. Ich füllte auch eine andere Ebene unter den anderen beiden mit Schwarz aus, damit das Kürbissymbol mehr vom Bildschirm sprang.
Schritt 2
Ein ... kreieren Neue Schicht und bedecken die ersten beiden Reihen des linken Auges mit orangen Pixeln. Bedecke die letzte Reihe mit 5 Pixel von rot (und der vorherigen roten Reihe mit orangen Pixeln). Das Auge sollte jetzt sein 4 Pixel über, 1 diagonales Pixel auf der linken Seite und zwei gelbe Pixel in der Mitte der blinkenden Augenform.
Schritt 3
Es gibt drei neue Mündungsschichten, die wir zeichnen müssen, um die endgültige Animation zu erstellen.
Mach ein Neue Schicht über den anderen und verwenden Sie die Bleistift-Werkzeug zeichnen drei Pixelspalten bestehend aus 1 Pixel, 3 Pixel, und 2 Pixel. Dies ist der linke Mundwinkel.
Für die Mitte des Mundes zeichnen 2 Pixel rechts von der zuvor gezeichneten Mundecke. Hinzufügen 1 Pixel von den vorherigen beiden gezeichnet. Zum Schluss zeichnen Sie ein Quadrat von 3 Pixel durch 3 Pixel für die Mitte des Mundes.
Spiegeln Sie die linke Mündung für die rechte Seite.
Verwenden Sie dunkles Orange, um die Mundwinkel zu umreißen. In der Abbildung unten finden Sie die genaue Pixelposition.
Verwenden Sie die orange Grundfarbe, um den negativen Bereich um den Mund herum zu füllen.
Das helle Rot, das in diesem Teil platziert wurde, sitzt direkt unter der Nase des Pumpkins.
Füllen Sie schließlich die leeren Felder mit gelben Markierungen aus.
Setzen Sie den neuen Mund auf den ursprünglichen Mund. Der vorherige Mund sollte vollständig bedeckt sein. Diese neue Ebene jetzt ausblenden.
Schritt 4
Der Mund wird kleiner und verändert sich von einem offenen Lächeln zu süßen Lippen (ohne die Lippen, da dies ein Kürbis ist).
Wieder beginnen wir mit dem linken Mundwinkel, der aus besteht 5 Pixel in drei Reihen.
Zeichne ein Quadrat von 3 Pixel durch 3 Pixel für die Mitte des Mundes.
Spiegeln Sie die linke Seite des Mundes nach rechts.
Zeichne mit dunklem Orange zwei Linien von 4 Pixel und platzieren Sie zusätzliche Pixel in den Ecken der Mundform.
Verwenden Sie wieder hellrot für die Unterseite der Nase des Pumpkins (dies wird Ihnen helfen, diese in einer Reihe aufzustellen) und für die Unterseite des Mundes.
Füllen Sie den negativen Bereich mit Orange.
Legen Sie diese Schicht über den Mund des Pumpkins und stellen Sie sicher, dass der ursprüngliche Mund nicht durchscheint. Diese neue Ebene jetzt ausblenden.
Schritt 5
Der Mund ist jetzt voll im Kuss. Erstellen Sie erneut eine Neue Schicht und lass uns gehen.
Der gesamte Mund besteht aus zwei Reihen 3 Pixel und ein einzelnes Pixel in der Mitte der letzten Zeile.
5 Pixel sind auf der linken Seite gezeichnet: 2 Pixel nach unten, 2 Pixel diagonal, Überspringen Sie ein Leerzeichen und 1 Pixel aus dem Mundwinkel. Spiegeln Sie dies auf der rechten Seite und zeichnen Sie 5 Pixel über auf der Oberseite des Mundes.
Mit rot zeichnen 3 Pixel darüber wird man wieder der Nasenrücken des Pumpkin sein. Zeichnen 5 Pixel über den Boden des Mundes und einige Pixel in den Ecken des Designs streuen.
Füllen Sie den Bereich mit Orange aus.
Setzen Sie den neuen Mund über den alten Mund und vergewissern Sie sich, dass der ursprüngliche Mund des Pumpkins vollständig abgedeckt ist. Verstecken Sie diese Ebene erneut in der Schichten Panel fürs Erste.
Schritt 6
Für die beleuchteten Augen und den Mund wird eine Schicht benötigt.
Zoomen in das Gesicht des Pumpkins zu 1600%, oder so.
Ein ... kreieren Neue Schicht und füllen Sie Augen und Nase mit gelb. Legen Sie die linke Seite mit Rot an, um den inneren Rand der Gesichtszüge leicht zu erkennen.
Verwenden Sie hellbraun am linken Rand der Augen und des Mundes. Verwenden Sie ein helleres Braun am unteren Rand.
Füllen Sie den Mund mit hellem Gelb und wiederholen Sie die vorherigen Schritte für die Farben, die im Design verwendet werden.
Ein Schuss des Kürbises, wenn "voll beleuchtet".
4. Animieren Sie den Kürbis
Schritt 1
Öffne das Zeitleiste Panel und wählen Sie Frame-Animation erstellen aus dem Dropdown-Menü in der Mitte.
Um zu ändern, was in jedem Frame passiert, müssen Sie treffen Neuer Rahmen in den Optionen des Panels und passen Sie das Design in der Schichten jedes Mal. Beachten Sie die Änderung unten, wobei die zweite Mundebene im zweiten Frame sichtbar und im ersten verborgen ist.
Schritt 2
In der Abbildung unten sehen Sie eine visuelle Aufschlüsselung der in der Animation verwendeten Frames. Jeder Schritt entspricht einer Ebene. Ich habe auch nachgeschlüsselt, was in jedem Bild unten passiert:
Der Basiskürbis mit allen zusätzlichen Schichten versteckt. Die Uhrzeit ist um eingestellt 1 Sekunde.
Die gelbe Konturebene (von Abschnitt 3, Schritt 1) Ist in diesem Rahmen sichtbar, aber es ist um 25% Deckkraft. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Der dritte Rahmen hat die gelbe Umrißebene 50%Opazität und die Mundschicht aus Abschnitt 3, Schritt 3 ist jetzt sichtbar. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Die gelbe Konturebene ist um 100% Deckkraft. Der Mund aus Abschnitt 3, Schritt 4 ist sichtbar. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Der Mund aus Abschnitt 3, Schritt 5 ist sichtbar. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Die blinzelnde Augenschicht aus Abschnitt 3, Schritt 2 ist jetzt sichtbar. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Dieser Rahmen ist identisch mit Rahmen 5. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Dieser Rahmen ist identisch mit Rahmen 4. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Dieser Rahmen ist identisch mit Bild 3 mit Ausnahme der gelben Konturebene, deren Opazität ist eingestellt auf 100%. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Alle zusätzlichen Augen- und Mundschichten sind in dieser Schicht verborgen. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Die beleuchtete Augen- und Mundebene ist jetzt in diesem Rahmen sichtbar. Die Uhrzeit ist um eingestellt 1 Sekunde.
Alle zusätzlichen Augen- und Mundschichten sind verborgen. Die gelbe Konturebene ist auf festgelegt 50%. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Die gelbe Konturebene ist auf festgelegt 25%. Die Uhrzeit ist um eingestellt 0,1 Sekunden.
Schritt 3
Wenn Sie die Zeitverzögerung für Ihre Bilder einstellen, können Sie mehrere Bilder auswählen und gleichzeitig ändern. Stellen Sie auch sicher, dass Ihre Loop-Optionen sind eingestellt auf Für immer.
Schritt 4
Wechseln Sie beim Exportieren Ihrer animierten Datei zu Datei> Speichern unter und wählen Sie .gif. Da es nicht viele Farben in dieser Datei gibt und wir uns nicht um eine große Dateigröße sorgen, behalten Sie die Farben bei 256 und die anderen Einstellungen auf ihrer Standardeinstellung.
Wenn Sie Ihre Datei vergrößern (falls Sie möchten, dass sie so groß ist wie mein endgültiges Bild), stellen Sie sicher, dass dies der Fall ist Qualität ist eingestellt auf Unmittelbarer Nachbar Die Qualität der Kanten mit harten Kanten bleibt also erhalten. Nochmal, Schleifenoptionen sollte auf gesetzt sein Für immer (es sei denn du willst dein .gif einen festgelegten Betrag aus irgendeinem Grund wiederholen.
Fantastische Arbeit, du bist fertig!
Tolle Arbeit beim Erstellen eines lustigen, animierten Kürbises. Ich habe unten meine beiden vergrößerten Versionen, so dass Sie den Unterschied zwischen den Größen und Details innerhalb des Pixelsymbols sehen können.
Weitere Pixel Art Tutorials finden Sie hier Tuts+, Schauen Sie sich diese kleine Liste an:
Erstellen Sie eine Reihe von Frühstückspixel-Symbolen in Adobe Photoshop
Erstellen Sie in 10 Schritten mit Photoshop Pixel Art mit einer begrenzten Palette
So erstellen Sie ein animiertes Pixel Art Sprite in Adobe Photoshop
Kandi Runner: Erstelle ein Pixel Art Sprite von Grund auf
Share
Was Sie erstellen werden
Accentsconagua
