Wo kann man Pixelkunst zeichnen? Pixelkunst: beste Werke und Illustratoren

Pixel Kunst oder Pixelkunst? digitale Zeichnung, das in Rastereditoren pixelweise erstellt wird. Pixel ist das kleinste grafische Element eines Bildes. Mit anderen Worten, das ist der Punkt. Und alle Pixelzeichnungen bestehen aus unzähligen Ansammlungen von Punkten, die leicht ungleichmäßig ausfallen, als wären sie schlecht gezeichnet. Aber das ist das Schöne an solchen Gemälden.

Ein bisschen Geschichte

Mit welchen Programmen kann man moderne Pixelkunst erstellen?

Es gibt viele kostenlose Raster-Editoren. Aber am häufigsten heißt Microsoft Paint und Adobe Photoshop. Zwar gilt Paint als weniger praktisches Werkzeug zum Erstellen von Pixelkunst als Adobe Photoshop. Warum? In diesem Programm:
es ist sehr schwierig, Gleichmäßigkeit und Symmetrie der Bilder zu erreichen;
Beim Speichern im JPG-Format kommt es zu starken Farbverzerrungen.
Es ist schwierig, Schatten und Lichter zu zeichnen.
Daher versuchen sie, Adobe Photoshop den Vorzug zu geben. Dieses Programm verfügt über viel mehr Arbeitsmöglichkeiten als Paint. Dadurch können Sie nicht einzelne Charaktere mit einfachen Designs zeichnen, sondern ganze Bilder. Darüber hinaus lässt sich die Pixelkunst selbst hier einfacher und schneller bearbeiten. Ja, und Sie können Farbübergänge in Adobe Photoshop reibungslos und natürlich übertragen.

So vermeiden Sie Knicke in der Pixelkunst

Pixelkunst ist eine Sammlung von Pixeln, die quadratische oder rechteckige „Punkte“ sind. Wenn ein Bild von solchen „Punkten“ gezeichnet wird, wird es kantig und die Glätte der Linien verschwindet. Das ist einerseits so Visitenkarte Pixel Art, aber andererseits möchte ich mehr Glätte, damit das Bild für den Benutzer ordentlich und attraktiv wird. Dieses Problem in der Sprache der Pixelkünstler werden sie Kinks oder „Zacken“ genannt.
Jaggies sind Stücke, die allen Linien ein gezacktes Aussehen verleihen. Sie werden in der Regel von einem von ihnen entsorgt folgende Methoden:
Erhöhen Sie die Länge des Streuliniensegments um 2, 3 oder mehr Pixel.
Reduzieren Sie die Länge der Pixel selbst im markanten Bereich.
Konstruieren Sie einen neuen Linienabschnitt aus mehreren einzelnen Pixeln.
Fügen Sie dem Bereich einzelne Pixel hinzu, mit einer Pause zwischen längeren „Punkten“ usw.
Um Knicke richtig zu beseitigen, müssen Sie sich an die Hauptregel erinnern: Die Länge der Elemente einer gekrümmten Linie sollte allmählich abnehmen oder zunehmen. Sie müssen auch bedenken, dass die Verschiebung eines Liniensegments um zwei oder mehr Pixel in der Höhe zur Zerstörung der Glätte führt.
Daher ist ständige Zeichenpraxis erforderlich. Und als einfachste und Sehhilfe Um Knicke zu vermeiden, können Sie eine Reihe geneigter gerader Linien verwenden.

So erhalten Sie Schatten in Pixel Art

Ein anderer wichtiger Punkt In der Pixelkunst ist dies ihr Volumen. Dies wird wie bei anderen Grafikoptionen durch Glanzlichter und Schatten erreicht. Um in der Pixelkunst einen Schatten zu erzeugen, benötigen Sie einen fließenden Übergang vom hellen zum dunklen Ton oder von einer Farbe zur anderen. Um diesen Effekt zu erzielen, wird häufig die Mischtechnik eingesetzt – das Dithering. Mit anderen Worten: An der Grenze zweier Farben werden diese schachbrettartig gemischt. Diese Methode entstand vor dem Hintergrund eines Blumenmangels. Durch das Mischen zweier Farben in einem Schachbrettmuster war es möglich, eine dritte zu erhalten, die nicht in der Palette enthalten war.
Nachdem sich die Palette jedoch erheblich erweitert hatte, blieb die Dithering-Technologie weiterhin gefragt. Sie müssen jedoch bedenken, dass ein ein Pixel breiter Übergang von einer Farbe zur anderen nicht gut aussieht. Es stellt sich heraus, dass es nur ein Kamm ist. Deshalb
Die minimale Mischzone muss mindestens zwei Pixel betragen. Und je breiter dieser Übergang ist, desto besser.
Außerdem beim Erstellen eines Schattens:
Es ist wichtig zu bestimmen, in welchem Winkel und von welcher Seite das Licht auf das Objekt fällt. Dadurch wird die Zeichnung „lebendig“ und Sie können besser verstehen, wo Sie den Schatten zeichnen müssen. Kommt das Licht beispielsweise von rechts, liegen die Schattenbereiche links usw.;
Sie müssen Farben verwenden, die viel dunkler sind als die Grundfarben. Diese. Der Schatten sollte mit Farben dargestellt werden, die dunkler sind als der schattierte Bereich selbst. Wenn ein Objekt beispielsweise rot ist, ist sein Schatten burgunderrot oder dunkelbraun;
Vergessen Sie nicht den Halbschatten. Dazu wird ein Farbton ausgewählt, der zwischen der Grundfarbe und der Schattenfarbe in der Palette liegt. Dieser Farbton zwischen Schichten dieser beiden Farben platziert. Dadurch entsteht der Effekt eines sanften Übergangs von einem dunklen Bereich zu einem helleren Bereich.

So erzielen Sie Highlights in der Pixelkunst

Ein Glanzlicht verleiht den gezeichneten Objekten, ähnlich wie ein Schatten, Volumen. Es befindet sich immer auf der Seite, auf die das Licht fällt. Wenn das Objekt jedoch eine glänzende Oberfläche haben soll, beispielsweise eine Porzellantasse, ein Stahlschwert usw., ist auch ein Highlight in einem schattigen Bereich erforderlich.
Um den Bereich, in den das Licht fällt, hervorzuheben, müssen Sie eine Farbe verwenden, die viel heller ist als die Hauptfarbe. Achten Sie nur nicht auf die Helligkeit dieses Ortes – es könnte sein, dass er nicht natürlich wirkt. Sehr oft wird ein Highlight in Weiß ohne Übergänge dargestellt. Dies kommt in der Natur nicht vor. Und das Objekt wird flach aussehen.
Um ein Highlight von der Seite des Schattens zu erzeugen, benötigen Sie eine Farbe, die heller ist als die, mit der der Schatten selbst aufgetragen wurde. Und auch in diesem Fall ist ein sanfter Übergang notwendig, der durch die gleichzeitige Verwendung mehrerer Farbtöne erreicht werden kann.
Um das alles zu realisieren, braucht es natürlich Übung. Und am besten fängt man mit einfachen Objekten an.

Teil 6: Antialiasing
Teil 7: Texturen und Unschärfe
Teil 8: Tile World

Vorwort

Es gibt viele Definitionen von Pixelkunst, aber hier verwenden wir diese: Ein Bild ist Pixelkunst, wenn es vollständig von Hand erstellt wird und die Farbe und Position jedes gezeichneten Pixels kontrolliert werden kann. Natürlich werden in der Pixelkunst die Einbeziehung oder Verwendung von Pinseln oder Unschärfewerkzeugen oder heruntergekommenen Maschinen (nicht sicher) und anderen Softwareoptionen, die „modern“ sind, von uns nicht verwendet (tatsächlich zur Verfügung gestellt bedeutet „zu unserer Verfügung“ , aber logischerweise scheint es auf diese Weise korrekter zu sein). Es ist auf die Bleistift- und Füllwerkzeuge beschränkt.

Allerdings kann man nicht sagen, dass Pixel-Art- oder Nicht-Pixel-Art-Grafiken mehr oder weniger schön sind. Man kann mit Recht sagen, dass Pixelkunst anders ist und sich besser für Spiele im Retro-Stil (wie Super Nintendo oder Game Boy) eignet. Sie können die hier erlernten Techniken auch mit Effekten aus der Nicht-Pixel-Kunst kombinieren, um einen Hybridstil zu erstellen.

Hier lernen Sie den technischen Teil der Pixelkunst kennen. Allerdings werde ich dich niemals zum Künstler machen... aus dem einfachen Grund, weil ich auch kein Künstler bin. Ich werde Ihnen weder die menschliche Anatomie noch die Struktur der Künste beibringen, und ich werde wenig über die Perspektive sagen. In diesem Tutorial finden Sie viele Informationen zu Pixel-Art-Techniken. Am Ende sollten Sie in der Lage sein, Charaktere und Kulissen für Ihre Spiele zu erstellen, sofern Sie aufmerksam sind, regelmäßig üben und die gegebenen Tipps anwenden.

- Ich möchte auch darauf hinweisen, dass nur einige der in diesem Tutorial verwendeten Bilder vergrößert sind. Bei Bildern, die nicht vergrößert sind, ist es gut, wenn Sie sich die Zeit nehmen, diese Bilder zu kopieren, damit Sie sie im Detail studieren können. Pixelkunst ist die Essenz von Pixeln; es ist sinnlos, sie aus der Ferne zu betrachten.

Am Ende muss ich allen Künstlern danken, die auf die eine oder andere Weise mit mir an der Erstellung dieses Leitfadens mitgewirkt haben: Shin für seine schmutzigen Arbeiten und Strichzeichnungen, Xenohydrogen für sein Genie im Umgang mit Farben, Lunn für sein Wissen über Perspektive, und Panda, der strenge Ahruon, Dayo und Kryon für ihre großzügigen Beiträge zur Illustration dieser Seiten.

Lassen Sie mich also auf den Punkt zurückkommen.

Teil 1: Die richtigen Werkzeuge

Schlechte Nachrichten: Sie werden in diesem Teil kein einziges Pixel zeichnen! (Und das ist kein Grund, es zu überspringen, oder?) Wenn es ein Sprichwort gibt, das ich hasse, dann ist es „Es gibt keine schlechten Werkzeuge, nur schlechte Arbeiter.“ Eigentlich dachte ich, dass nichts weiter von der Wahrheit entfernt sein könnte (außer vielleicht „Was dich nicht umbringt, macht dich stärker“), und die Pixelkunst ist eine sehr gute Bestätigung. Dieser Leitfaden soll Ihnen verschiedene vorstellen Software, wird zum Erstellen von Pixelkunst verwendet und hilft Ihnen bei der Auswahl des richtigen Programms.

1.Einige alte Dinge

Bei der Auswahl einer Software zum Erstellen von Pixelkunst denken die Leute oft: „Wahl der Software? Das ist Wahnsinn! Alles, was wir brauchen, um Pixelkunst zu schaffen, ist Farbe (anscheinend ein Wortspiel, Zeichnung und ein Programm)“ Tragischer Fehler: Ich habe über schlechte Werkzeuge gesprochen, das ist das erste. Paint hat einen Vorteil (und nur einen): Sie haben es bereits, wenn Sie Windows verwenden. Andererseits weist es viele Mängel auf. Dies ist eine (unvollständige) Liste:

*Sie können nicht mehr als eine Datei gleichzeitig öffnen
* Keine Palettensteuerung.
*Keine Ebenen oder Transparenz
* Keine nicht rechteckigen Auswahlmöglichkeiten
* Wenige Hotkeys
* Furchtbar unpraktisch

Kurz gesagt, Sie können Paint vergessen. Jetzt schauen wir uns die echte Software an.

2. Am Ende...

Die Leute denken dann: „Okay, Paint ist zu eingeschränkt für mich, also verwende ich meinen Freund Photoshop (oder Gimp oder PaintShopPro, das ist dasselbe), die Tausende von Funktionen haben.“ Das kann gut oder schlecht sein: Wenn Sie eines dieser Programme bereits kennen, können Sie Pixelkunst erstellen (wobei alle Optionen für automatisches Anti-Aliasing deaktiviert sind und viele der erweiterten Funktionen deaktiviert sind). Wenn Sie diese Programme noch nicht kennen, werden Sie viel Zeit damit verbringen, sie zu erlernen, auch wenn Sie nicht alle Funktionen benötigen, was Zeitverschwendung wäre. Kurz gesagt, wenn Sie sie bereits verwenden lange Zeit, können Sie Pixelkunst erstellen (ich persönlich verwende Photoshop aus Gewohnheit), aber ansonsten ist es viel besser, Programme zu verwenden, die auf Pixelkunst spezialisiert sind. Ja, es gibt sie.

3. Sahne

Es gibt viel mehr Programme, die für Pixelkunst entwickelt wurden, als man denkt, aber hier betrachten wir nur die besten. Sie haben alle sehr ähnliche Eigenschaften (Palettensteuerung, sich wiederholende Kachelvorschauen, Transparenz, Ebenen usw.). Ihre Unterschiede liegen im Komfort ... und im Preis.

Charamaker 1999 - gutes Programm, aber die Verteilung scheint ins Stocken geraten zu sein.

Graphics Gale macht viel mehr Spaß und ist benutzerfreundlicher, und es kostet etwa 20 US-Dollar, was nicht schlecht ist. Lassen Sie mich hinzufügen, dass die Testversion nicht zeitlich begrenzt ist und mit genügend Kit ausgestattet ist, um genug davon herzustellen gute Grafik. Es funktioniert einfach nicht mit .gif, was kein großes Problem darstellt, da .png sowieso besser ist.

Die von Pixelkünstlern am häufigsten verwendete Software ist ProMotion, die (offensichtlich) bequemer und schneller als Graphics Gale ist. Oh ja, sie ist lieb! Sie können kaufen Vollversion für einen bescheidenen Betrag ... 50 Euro (78 $).
Vergessen wir nicht unsere Mac-Freunde! Pixen ist ein gutes Programm für den Macintosh, und es ist kostenlos. Mehr kann ich dir leider nicht sagen, da ich keinen Mac habe. Anmerkung des Übersetzers (aus dem Französischen): Linux-Benutzer (und andere) sollten , und GrafX2 ausprobieren. Ich empfehle Ihnen dringend, sie alle in Demoversionen auszuprobieren und herauszufinden, welche für Sie am besten geeignet ist. Letztendlich ist es Geschmackssache. Bedenken Sie jedoch, dass es sehr schwierig sein kann, zu einem anderen Programm zu wechseln, sobald Sie mit der Verwendung eines Programms begonnen haben.

Fortsetzung folgt…

Anmerkungen des Übersetzers vom Französischen ins Englische

Dies ist ein großartiges Tutorial zum Thema Pixelkunst, geschrieben von Phil Razorbak von LesForges.org. Herzlichen Dank Phil Razorbak dafür, dass er OpenGameArt.org erlaubt hat, diese Anleitungen zu übersetzen und hier zu veröffentlichen. (Vom Übersetzer ins Russische: Ich habe nicht um Erlaubnis gefragt. Wenn jemand möchte, können Sie mir helfen. Ich habe nicht genug Erfahrung in der Kommunikation auf Englisch, geschweige denn auf Französisch.)

Anmerkung des Übersetzers vom Englischen ins Russische

Ich bin Programmierer, kein Künstler oder Übersetzer, ich übersetze für meine Künstlerfreunde, aber was auch immer an Gutem verschwendet wird, soll hier sein.
Das Original auf Französisch ist irgendwo hier: www.lesforges.org
Übersetzung vom Französischen ins Englische hier: opengameart.org/content/les-forges-pixel-art-course
Ich habe aus dem Englischen übersetzt, weil ich kein Französisch kann.
Und ja, dies ist meine erste Veröffentlichung, daher sind Gestaltungsvorschläge willkommen. Außerdem interessiert mich die Frage: Sollen die restlichen Teile als separate Artikel veröffentlicht werden oder ist es besser, diesen zu aktualisieren und zu ergänzen?

Teil 7: Texturen und Unschärfe
Teil 8: Tile World

Vorwort

Lassen Sie mich also auf den Punkt zurückkommen.

Teil 1: Die richtigen Werkzeuge

Schlechte Nachrichten: Sie werden in diesem Teil kein einziges Pixel zeichnen! (Und das ist kein Grund, es zu überspringen, oder?) Wenn es ein Sprichwort gibt, das ich hasse, dann ist es „Es gibt keine schlechten Werkzeuge, nur schlechte Arbeiter.“ Eigentlich dachte ich, dass nichts weiter von der Wahrheit entfernt sein könnte (außer vielleicht „Was dich nicht umbringt, macht dich stärker“), und die Pixelkunst ist eine sehr gute Bestätigung. Dieser Leitfaden soll Ihnen die verschiedenen Softwareprogramme vorstellen, die zum Erstellen von Pixelkunst verwendet werden, und Ihnen bei der Auswahl des richtigen Programms helfen.

1.Einige alte Dinge

Kurz gesagt, Sie können Paint vergessen. Jetzt schauen wir uns die echte Software an.

2. Am Ende...

Die Leute denken dann: „Okay, Paint ist zu eingeschränkt für mich, also verwende ich meinen Freund Photoshop (oder Gimp oder PaintShopPro, das ist dasselbe), die Tausende von Funktionen haben.“ Das kann gut oder schlecht sein: Wenn Sie eines dieser Programme bereits kennen, können Sie Pixelkunst erstellen (wobei alle Optionen für automatisches Anti-Aliasing deaktiviert sind und viele der erweiterten Funktionen deaktiviert sind). Wenn Sie diese Programme noch nicht kennen, werden Sie viel Zeit damit verbringen, sie zu erlernen, auch wenn Sie nicht alle Funktionen benötigen, was Zeitverschwendung wäre. Kurz gesagt: Wenn Sie sie schon lange verwenden, können Sie Pixelkunst erstellen (ich persönlich verwende Photoshop aus Gewohnheit), aber ansonsten ist es viel besser, Programme zu verwenden, die auf Pixelkunst spezialisiert sind. Ja, es gibt sie.

3. Sahne

Charamaker 1999 ist ein gutes Programm, aber der Vertrieb scheint auf Eis zu liegen.

Graphics Gale macht viel mehr Spaß und ist benutzerfreundlicher, und es kostet etwa 20 US-Dollar, was nicht schlecht ist. Ich möchte hinzufügen, dass die Testversion nicht zeitlich begrenzt ist und über genügend Kit verfügt, um ziemlich gute Grafiken zu erstellen. Es funktioniert einfach nicht mit .gif, was kein großes Problem darstellt, da .png sowieso besser ist.

Die von Pixelkünstlern am häufigsten verwendete Software ist ProMotion, die (offensichtlich) bequemer und schneller als Graphics Gale ist. Oh ja, sie ist lieb! Sie können die Vollversion für einen bescheidenen Betrag kaufen ... 50 Euro (78 $).
Vergessen wir nicht unsere Mac-Freunde! Pixen ist ein gutes Programm für den Macintosh, und es ist kostenlos. Mehr kann ich dir leider nicht sagen, da ich keinen Mac habe. Anmerkung des Übersetzers (aus dem Französischen): Linux-Benutzer (und andere) sollten , und GrafX2 ausprobieren. Ich empfehle Ihnen dringend, sie alle in Demoversionen auszuprobieren und herauszufinden, welche für Sie am besten geeignet ist. Letztendlich ist es Geschmackssache. Bedenken Sie jedoch, dass es sehr schwierig sein kann, zu einem anderen Programm zu wechseln, sobald Sie mit der Verwendung eines Programms begonnen haben.

Fortsetzung folgt…

Anmerkungen des Übersetzers vom Französischen ins Englische

Dies ist ein großartiges Tutorial zum Thema Pixelkunst, geschrieben von Phil Razorbak von LesForges.org. Vielen Dank an Phil Razorback, der OpenGameArt.org erlaubt hat, diese Anleitungen zu übersetzen und hier zu veröffentlichen. (Vom Übersetzer ins Russische: Ich habe nicht um Erlaubnis gefragt. Wenn jemand möchte, können Sie mir helfen. Ich habe nicht genug Erfahrung in der Kommunikation auf Englisch, geschweige denn auf Französisch.)

Anmerkung des Übersetzers vom Englischen ins Russische

Adobe Photoshop: Zeichnen und animieren Sie eine Figur in Pixel-Technologie Kunst

In dieser Lektion lernen Sie, wie Sie Charaktere mithilfe der Pixel-Art-Technik zeichnen und animieren. Dazu benötigen Sie lediglich Adobe Photoshop. Das Ergebnis wird ein GIF mit einem laufenden Astronauten sein.

Programm: Adobe Photoshop Schwierigkeitsgrad: Anfänger, Mittelstufe Benötigte Zeit: 30 Min. – Stunde

I. Einrichten des Dokuments und der Tools

Schritt 1

Wählen Sie in der Symbolleiste „Bleistift“ aus – dies wird das Hauptwerkzeug für unsere Lektion sein. Wählen Sie in den Einstellungen den Pinseltyp Hartrund aus und stellen Sie die restlichen Werte wie im Bild ein. Unser Ziel ist es, die Bleistiftspitze so scharf wie möglich zu machen.

Schritt 2

Wählen Sie in den Einstellungen des Radiergummi-Werkzeugs (Radiergummi) den Bleistiftmodus aus und stellen Sie die restlichen Werte wie im Bild gezeigt ein.

Schritt 3

Aktivieren Sie das Pixelraster (Ansicht > Anzeigen > Pixelraster). Wenn es im Menü kein solches Element gibt, gehen Sie zu den Einstellungen und aktivieren Sie die Grafikbeschleunigung. Einstellungen > Leistung > Grafikbeschleunigung.

Bitte beachten Sie: Das Raster ist auf der neu erstellten Leinwand nur sichtbar, wenn es um 600 % oder mehr vergrößert wird.

Schritt 4

Ändern Sie unter „Einstellungen“ > „Allgemein“ (Strg-K) den Bildinterpolationsmodus in den „Nächster Nachbar“-Modus. Dadurch bleiben die Grenzen von Objekten so klar wie möglich.

Stellen Sie in den Einstellungen für Einheiten und Lineale die Linealeinheiten auf Pixel ein. Einstellungen > Einheiten und Lineale > Pixel.

II. Charaktererstellung

Schritt 1

Und jetzt, wo alles eingerichtet ist, können wir direkt mit dem Zeichnen der Figur fortfahren.

Skizzieren Sie Ihren Charakter mit klaren Umrissen und achten Sie darauf, ihn nicht zu überladen. kleine Details. Zu diesem Zeitpunkt spielt die Farbe überhaupt keine Rolle. Hauptsache, die Umrisse sind klar gezeichnet und Sie verstehen, wie die Figur aussehen wird. Diese Skizze wurde speziell für diese Lektion erstellt.

Schritt 2

Reduzieren Sie den Maßstab der Skizze auf 60 Pixel Höhe, indem Sie die Tastenkombination Strg+T oder Bearbeiten > Frei transformieren verwenden.

Die Größe des Objekts wird im Informationsfeld angezeigt. Bitte beachten Sie, dass die Interpolationseinstellungen dieselben sind wie in Schritt 4.

Schritt 3

Vergrößern Sie die Skizze um 300–400 %, um die Arbeit damit zu erleichtern und die Deckkraft der Ebene zu verringern. Erstellen Sie dann eine neue Ebene und zeichnen Sie die Umrisse der Skizze mit dem Bleistift-Werkzeug. Wenn das Zeichen symmetrisch ist, wie in unserem Fall, können Sie nur die Hälfte umreißen, es dann duplizieren und spiegeln (Bearbeiten > Transformieren > Horizontal spiegeln).

Rhythmus: Zeichnen komplexe Elemente breche sie in Stücke. Wenn die Pixel (Punkte) in einer Linie einen „Rhythmus“ wie 1-2-3 oder 1-1-2-2-3-3 bilden, erscheint die Skizze für das menschliche Auge glatter. Aber wenn es die Form erfordert, kann dieser Rhythmus gestört werden.

Schritt 4

Wenn der Umriss fertig ist, können Sie die Hauptfarben auswählen und die großen Formen malen. Tun Sie dies auf einer separaten Ebene unterhalb der Kontur.

Schritt 5

Glätten Sie die Kontur, indem Sie einen Schatten entlang der Innenkante zeichnen.

Fügen Sie weitere Schatten hinzu. Wie Sie vielleicht beim Zeichnen bemerkt haben, können einige Formen korrigiert werden.

Schritt 6

Erstellen Sie eine neue Ebene für die Highlights.

Wählen Sie den Mischmodus „Überlagerung“ aus der Dropdown-Liste im Ebenenbedienfeld aus. Ziehen helle Farbeüber die Bereiche, die Sie hervorheben möchten. Glätten Sie dann die Glanzlichter mit Filter > Weichzeichnen > Weichzeichnen.

Vervollständigen Sie das Bild, kopieren und spiegeln Sie dann die fertige Bildhälfte und kombinieren Sie dann die Ebenen mit den Hälften, um ein Gesamtbild zu erstellen.

Schritt 7

Jetzt muss der Astronaut für Kontrast sorgen. Verwenden Sie die Ebeneneinstellungen (Bild > Anpassungen > Ebenen), um es heller zu machen, und passen Sie dann den Farbton mit der Option „Farbbalance“ an (Bild > Anpassungen > Farbbalance).

Der Charakter ist jetzt für die Animation bereit.

III. Charakteranimation

Schritt 1

Erstellen Sie eine Kopie der Ebene (Ebene > Neu > Ebene über Kopie) und verschieben Sie sie 1 Pixel nach oben und 2 Pixel nach rechts. Dies ist ein wichtiger Punkt in der Charakteranimation.

Reduzieren Sie die Deckkraft der Originalebene um 50 %, damit Sie den vorherigen Frame sehen können. Dies wird als „Onion Skinning“ (Pluralmodus) bezeichnet.

Schritt 2

Beugen Sie nun die Arme und Beine Ihres Charakters, als würde er rennen.

● Hervorheben linke Hand Lasso-Werkzeug

● Verschieben Sie mit dem FreeTransformTool (Bearbeiten > FreeTransform) und gedrückter Strg-Taste die Ränder des Containers, sodass sich die Hand zurückbewegt.

● Wählen Sie zunächst ein Bein aus und strecken Sie es ein wenig. Drücken Sie dann das andere Bein gegeneinander, sodass es sich anfühlt, als würde die Figur gehen.

● Verwenden Sie einen Bleistift und einen Radiergummi, um den Teil zu korrigieren rechte Hand unterhalb des Ellenbogens.

Schritt 3

Jetzt müssen Sie die neue Position der Arme und Beine komplett neu zeichnen, wie im zweiten Abschnitt dieser Lektion gezeigt. Dies ist notwendig, um sicherzustellen, dass das Bild klar aussieht, da die Transformation die Pixellinien stark verzerrt.

Schritt 4

Erstellen Sie eine Kopie der zweiten Ebene und drehen Sie sie horizontal. Jetzt hast du 1 Grundhaltung und 2 in Bewegung. Stellen Sie die Deckkraft aller Ebenen auf 100 % wieder her.

Schritt 5

Gehen Sie zu „Fenster“ > „Zeitleiste“, um das Zeitleistenfenster anzuzeigen, und klicken Sie auf „Frame-Animation erstellen“.

Wenn Sie als Kind gerne mit Lego gespielt haben (oder auch als Erwachsener weiterhin damit spielen), werden Sie sich wahrscheinlich für isometrische Pixelkunst interessieren. Es kann technisch sein und eher einer Wissenschaft als einer Illustration ähneln. Aber in einer solchen Kunst gibt es keine 3D-Perspektive; man kann Elemente verschieben Umfeld mit maximaler Einfachheit.

Wir erstellen die Figur als logischen Ausgangspunkt für die Pixelkunst, da sie dabei hilft, die Proportionen für die meisten anderen Elemente zu bestimmen, die wir erstellen könnten. Allerdings müssen Sie zunächst einige Grundlagen der isometrischen Pixelkunst erlernen und dann mit der Erstellung eines Charakters fortfahren. Wenn Sie nicht die Grundlagen erlernen und einen Würfel zeichnen möchten, fahren Sie mit Schritt 3 fort. Jetzt können wir beginnen.

1. Pixellinien

Diese Linien bilden die Grundlage für den gebräuchlichsten (und interessantesten) Stil der isometrischen Pixelkunst, den Stil, den wir in diesem Tutorial verwenden werden:

Sie repräsentieren zwei Pixel entlang für jedes Pixel nach unten. Diese Linien sehen relativ weich aus und werden für quadratische Flächen verwendet:

Die am häufigsten verwendeten Linienstrukturen (wie die folgende) funktionieren gut, aber die Zeichnung wird mit jedem Schritt, den Sie erhöhen, kantiger und rauer:

Als Kontrast hier einige ungleichmäßig strukturierte Linien:

Sehr kantig und sieht nicht aus

Schön. Vermeiden Sie es, sie zu verwenden.

2. Bände

Unser Charakter folgt nicht genau den Gesetzen der Isometrie, also erstellen wir zunächst einen einfachen Würfel, um die Proportionen festzulegen.

Erstellen Sie in Photoshop ein neues Dokument mit Auflösung 400 x 400 Pixel.

Ich möchte über das Menü ein zusätzliches Fenster für dieselbe Datei öffnen Fenster > Anordnen > Neues Fenster/Lektionen.(Fenster > Anordnen > Neues Fenster…). Dies ermöglicht das Arbeiten mit Vergrößerung 600% Beobachten Sie die Ergebnisse im Zoomfenster 100% . Die Verwendung des Rasters liegt bei Ihnen, aber manchmal finde ich es eher aufdringlich als hilfreich.

Lassen Sie uns das Dokument vergrößern und eine der Zeilen erstellen 2:1

Ich benutze es lieber 5% Grau statt Schwarz, damit ich dann Schatten hinzufügen kann (Schwarz und geringe Deckkraft) und jede Farbe einzeln mit dem Zauberstab auswählen kann.

Es gibt verschiedene Möglichkeiten, eine Linie zu zeichnen:

1. Verwendung Linienwerkzeug(Linienwerkzeug) mit Modus Pixel(Pixel), deaktiviert Glätten(Anti-Alias) und Dicke 1px. Beim Zeichnen sollte der Winkel-Tooltip angezeigt werden 26,6°. Tatsächlich kann das Linienwerkzeug nicht als praktisch bezeichnet werden; es erzeugt ungleichmäßige Linien, wenn der Winkel nicht präzise ist.

2. Sie müssen eine Auswahl erstellen 20 x 40 Pixel, und wählen Sie dann K Bleistift(Bleistiftwerkzeug) Dicke 1px und zeichnen Sie einen Punkt in die untere linke Ecke der Auswahl, und halten Sie dann die Taste gedrückt Schicht klicken Sie rechts obere Ecke. Photoshop erstellt automatisch eine neue Linie zwischen den beiden Punkten. Wenn Sie etwas üben, können Sie auf diese Weise gerade Linien ohne Hervorhebungen erstellen.

3. Sie müssen zwei Pixel mit einem Bleistift zeichnen, sie auswählen und klicken Strg+Alt und ziehen Sie dann die Auswahl an eine neue Position, sodass sich die Pixel an den Ecken treffen. Sie können die Auswahl auch verschieben, indem Sie die Pfeiltasten auf Ihrer Tastatur gedrückt halten Alt. Diese Methode heißt Alt-Offset(Alt-Nudge).

Also haben wir die erste Zeile erstellt. Wählen Sie es aus und verschieben Sie es wie in Schritt 3 oder kopieren Sie es einfach und fügen Sie es ein, wobei Sie die neue Ebene nach unten verschieben. Drehen Sie anschließend die zweite Zeile horizontal durch das Menü Bearbeiten > Transformieren > Horizontal spiegeln(Bearbeiten > Transformieren > Horizontal spiegeln). Ich nutze diese Funktion so oft, dass ich sogar eine Tastenkombination dafür erstellt habe!

Nun kombinieren wir unsere Zeilen:

Drehen Sie dann erneut Alt-Offset, spiegeln Sie die Kopie vertikal und fügen Sie die beiden Hälften zusammen, um unsere Oberfläche zu vervollständigen:

Es ist Zeit, die „dritte Dimension“ hinzuzufügen. Verschieben Sie die quadratische Fläche bei gedrückter Alt-Taste und verschieben Sie sie nach 44px runter:

Tipp: Wenn Sie beim Verschieben die Pfeiltasten gedrückt halten Schicht, die Auswahl wird verschoben 10 Pixel statt einem.

Um einen übersichtlicheren Würfel zu erstellen, lassen Sie uns die Ecken weicher machen, indem wir die Pixel ganz links und ganz rechts aus den Quadraten entfernen. Danach fügen Sie vertikale Linien hinzu:

Entfernen Sie nun die unnötigen Linien am unteren Rand des Würfels. Um mit dem Färben unserer Figur zu beginnen, wählen Sie eine beliebige Farbe (vorzugsweise einen hellen Farbton) und füllen Sie das obere Quadrat damit.

Erhöhen Sie nun die Helligkeit der ausgewählten Farbe um 10% (Ich empfehle die Verwendung der HSB-Schieberegler auf dem Bedienfeld), um hellere Ecken entlang der Vorderseite unseres farbigen Quadrats zu malen. Da wir den Würfel ein wenig beschnitten haben, sehen diese hellen Linien besser aus, wenn sie über den schwarzen Kanten liegen (anstatt sie zu ersetzen), wie im Bild unten:

Jetzt müssen wir die schwarzen Ränder entfernen. Verwenden Sie den Trick aus der zweiten Strichzeichnungsmethode für den Radiergummi (der auf „Normal“ eingestellt sein sollte). Radiergummi(Radiergummi-Werkzeug), Modus Bleistift(Bleistiftmodus), Dicke 1px).

Wählen Sie mit die Farbe des oberen Quadrats aus Pipetten(Pipette). Um dieses Werkzeug schnell auszuwählen, während Sie mit einem Bleistift zeichnen oder füllen, drücken Sie Alt. Verwenden Sie die resultierende Pipettenfarbe, um die vertikale Linie in der Mitte des Würfels zu füllen. Reduzieren Sie anschließend die Farbhelligkeit um 15% und fülle die linke Seite des Würfels mit der resultierenden Farbe. Reduzieren Sie die Helligkeit weiter 10% für die rechte Seite:

Unser Würfel ist fertig. Beim Vergrößern sollte es sauber und relativ glatt aussehen 100% . Wir können fortfahren.

3. Fügen Sie einen Charakter hinzu

Der Stil des Charakters kann völlig unterschiedlich sein, es steht Ihnen frei, die Proportionen oder Elemente nach Ihren Wünschen zu ändern. In der Regel tue ich das dünner Körper und ein etwas größerer Kopf. Der dünne Körper der Figur trägt dazu bei, dass die Linien gerade und einfach bleiben.

Es wäre logisch, mit den Augen zu beginnen. Wenn wir bei den isometrischen Winkeln streng wären, sollte im Gesicht ein Auge tiefer liegen, aber im kleinen Maßstab können wir dieses Merkmal vernachlässigen, um die Gesichter der Charaktere angenehmer zu gestalten. Dadurch wird die Zeichnung trotz der Größe ordentlich.

Wir machen den Charakter klein, denn nach einer Weile möchten Sie ihm vielleicht ein Auto, ein Haus, einen ganzen Platz oder sogar eine Stadt hinzufügen. Daher muss der Charakter einer der meisten sein kleine Elemente in der Abbildung. Es lohnt sich auch, die grafische Effizienz zu berücksichtigen. Versuchen Sie, den Charakter mit einer minimalen Anzahl an Pixeln (groß genug, um Gesichtszüge darzustellen) so attraktiv wie möglich zu gestalten. Außerdem lassen sich kleine Objekte viel einfacher zeichnen. Die Ausnahme ist, wenn Sie nur eine Figur, ihre Emotionen oder ihre Ähnlichkeit mit jemandem zeigen möchten.

Lassen Sie uns eine neue Ebene erstellen. Die Augen benötigen nur zwei Pixel – eines für jedes Auge, mit einem leeren Pixel dazwischen. Überspringen Sie ein Pixel links von den Augen und fügen Sie eine vertikale Linie hinzu:

Fügen Sie nun eine weitere Ebene hinzu und zeichnen Sie einen horizontalen Streifen mit zwei Pixeln. Dies wird der Mund sein. Verwenden Sie die Pfeiltasten auf Ihrer Tastatur, um sich zu bewegen, und wenn Sie die perfekte Position gefunden haben, verschieben Sie die Ebene nach unten. Machen Sie dasselbe mit dem Kinn, es sollte nur eine längere Linie sein:

Zeichnen Sie die Haare und den Oberkopf ein und machen Sie dann die Ecken weicher. Sie sollten etwas Ähnliches erhalten:

Lassen Sie nun ein leeres Pixel neben dem zweiten Auge, fügen Sie Koteletten hinzu (die auch dabei helfen, die Ohren der Figur zu zeichnen) und ein paar weitere Pixel darüber bis zum Haaransatz. Lassen Sie dann ein weiteres leeres Pixel übrig. Hier beginnt das Ohr und eine Linie markiert das Ende des Kopfes. Fahren Sie fort und mildern Sie die Winkel, in denen sich die Linien treffen:

Fügen Sie ein Pixel für die Oberseite des Ohrs hinzu und ändern Sie die Form des Kopfes, wenn Sie möchten; Köpfe werden meist bereits im Nackenbereich gezeichnet:

Zeichnen Sie eine Linie vom Kinn – das wird die Brust sein. Der Anfang des Halses liegt im Ohrbereich, ein paar Pixel nach unten und ein paar Pixel diagonal, sodass die Schultern unseres Charakters sichtbar sind:

Fügen Sie nun an der Stelle, an der die Schultern enden, eine vertikale Längenlinie hinzu 12 Pixel, um die Außenseite der Hand zu erstellen, und Innenseite wird zwei Pixel nach links sein. Verbinden Sie die Linien unten mit ein paar Pixeln, um eine Hand/Faust zu bilden (in diesem Fall gibt es keine Details, ignorieren Sie dieses Element) und fügen Sie direkt über der Stelle, an der die Hand endet, eine Linie hinzu 2:1 , das als Taille dient, zeichnen Sie dann die Brustlinie und erhalten Sie eine vollständige Oberer Teil Körper. Der andere Arm der Figur ist nicht sichtbar, sieht aber normal aus, da er vom Oberkörper bedeckt ist.

Am Ende sollten Sie so etwas erhalten:

Natürlich können Sie beliebige Proportionen verwenden; Ich ziehe es vor, verschiedene Optionen nebeneinander zu zeichnen, bevor ich mich für die beste entscheide.

Nun fügen wir für den unteren Rumpf noch ein paar weitere hinzu Vertikale Linien. Ich gehe gerne weg 12 Pixel zwischen den Sohlen und der Taille. Die Beine sind sehr einfach zu zeichnen, Sie müssen nur ein Bein etwas länger machen, damit die Figur voluminöser aussieht:

Jetzt fügen wir Farbe hinzu. Es ist immer schwierig, eine gute Hautfarbe zu finden. Wenn Sie also dieselbe wie in diesem Tutorial verwenden möchten, verwenden Sie den Code #FFCCA5. Die Auswahl der Farben für die restlichen Elemente sollte kein Problem sein. Bestimmen Sie anschließend die Länge der Ärmel, die Position des Hemdschnitts und seinen Stil. Fügen Sie nun einen dunklen Streifen hinzu, um das Hemd vom Körper zu trennen. Ich bevorzuge es, alle dekorativen Elemente heller als Schwarz zu halten (besonders wenn viele Elemente auf einer Ebene liegen, etwa von einem Hemd bis hin zu Leder oder Hosen). Dadurch erhalten Sie den nötigen Kontrast, ohne dass das Bild zu grob wirkt.

Sie können fast jeder Farbzone Lichteffekte hinzufügen. Vermeiden Sie es auch große Menge Schatten oder Verwendung von Farbverläufen. Mehrere Pixel mehr ( 10% oder 25% ) reicht eine helle oder dunkle Farbe aus, um den Elementen ein dreidimensionales Aussehen zu verleihen und die Flächigkeit der Abbildung zu beseitigen. Wenn Sie einem bereits vorhandenen Bereich einen Farbtupfer hinzufügen möchten 100% Helligkeit, versuchen Sie, die Sättigung zu reduzieren. In einigen Fällen (z. B. beim Zeichnen von Haaren) kann dies der Fall sein im richtigen Sinne Farbtöne ändern.

Es gibt viele Haaroptionen, die Sie ausprobieren können. Hier sind ein paar Ideen:

Während Sie weiterhin Charaktere erstellen, werden Kleinigkeiten wie Kleidungsstil, Ärmellänge, Hosenlänge, Accessoires, Kleidung und Hautfarbe für Abwechslung nützlich sein.

Jetzt müssen Sie nur noch beide Elemente zusammenstellen und bewerten, wie sie in einer Umgebung aussehen:

Wenn Sie Ihre Kreation exportieren möchten, ist PNG das ideale Format.

Das war's, die Arbeit ist erledigt!

Ich hoffe, diese Lektion war nicht zu verwirrend. Ich glaube, ich habe darüber gesprochen Höchstmenge Tipps und ästhetische Techniken. Sie können Ihre isometrische Pixelwelt frei erweitern – Gebäude, Autos, Innenräume, Außenbereiche. All dies ist möglich und sogar interessant, wenn auch nicht so einfach.

Übersetzer: Shapoval Alexey