Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Aesthetics

6 einfache Dinge, die Sie tun können, um Ihre Screenshots zu verbessern

by
Read Time:10 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Ein guter Screenshot kann Ihr Spiel wirklich verkaufen. In diesem Tutorial werde ich einige einfache Tricks beschreiben, die die Qualität Ihrer Screenshots verbessern. Diese Tipps sind allgemein genug, um auf die meisten Spiele angewendet zu werden, egal ob 2D oder 3D. Ich werde über Tools sprechen, mit denen Sie eine bessere Ansichtsposition und einen besseren Blickwinkel auswählen können, Überlegungen zur Benutzeroberfläche, Möglichkeiten zur Verbesserung der Screenshot-Farben, Beschneidungsprobleme und vieles mehr.

Warum sind gute Screenshots wichtig?

Screenshots sind aus vielen Gründen wichtig:

  • Sie können das Spiel im besten Licht präsentieren.
  • Das Teilen eines Bildes ist eine einfache und effektive Möglichkeit, Ihr Spiel bekannt zu machen.
  • Die Leute erkennen Ihr Spiel an Screenshots, bevor sie sich einen Artikel oder ein Video ansehen.
  • Sie benötigen sie für die Vermarktung Ihres Spiels auf Ihrer Website.
  • Sie sollten in Ihre Pressemappe und in Ihre E-Mails aufgenommen werden, damit die Prüfer sie problemlos verwenden können.
  • Sie benötigen sie für Store-Einreichungen.
  • Sie sind eine gute Quelle für Ihre Spielekunst für Werbung und Marketingmaterialien.

Und natürlich werden gute Screenshots all diese Dinge verbessern.

Verwenden Sie Ihren eigenen Screenshot-Mechanismus

Es gibt zwar externe Tools zum Erstellen von Screenshots, aber das Erstellen von Screenshots für Ihr Spiel selbst ist in mehrfacher Hinsicht nützlich:

  • Es ist immer da; Sie müssen nicht daran denken, Programme auszuführen, um bei Bedarf Screenshots zu erstellen. Jedes Mal, wenn Sie das "Wow! Tolle Aussicht!" Moment, während Sie Ihr Spiel testen, können Sie einfach eine Taste drücken, um es zu erfassen.
  • Sie können Screenshots in jedem gewünschten Format speichern, wo Sie möchten.
  • Sie können Dinge, die Sie nicht möchten, automatisch in Ihren Screenshots ausblenden (z. B. Debugging-Informationen auf dem Bildschirm, Richtlinien oder das HUD).
  • Sie können automatisch Wasserzeichen oder den Namen Ihres Spiels und die URL der Website hinzufügen.
  • Bei Bedarf können Sie Bilder nachbearbeiten.
  • Sobald Sie es haben, ist es einfacher, zusätzliche Funktionen wie das Aufzeichnen kurzer Animationen oder das Erstellen großer Screenshots für Poster hinzuzufügen, indem Sie mehrere Bilder rendern.

Leider ist dies bei einigen Motoren möglicherweise keine Option (oder zu schwierig). Glücklicherweise ist es in vielen Motoren bereits für Sie erledigt. Sie müssen es nur auf Ihre Bedürfnisse abstimmen.

Pausenmodus mit aktiver Kamera

Sie möchten einen schönen Screenshot machen, aber die Feinde rennen weg oder erscheinen plötzlich und greifen Ihren Charakter an. Oder der Partikeleffekt, den Sie erfassen möchten, ist einfach so schwer zu fassen.

Die Lösung? Fügen Sie eine Schaltfläche hinzu, die Ihr Spiel sofort anhält (und beim erneuten Drücken wieder anhält), während Sie die Kamera bewegen können, um genau den richtigen Winkel für Ihren Screenshot zu erhalten.

I've just paused my game Arcane Worlds. Not the best angle for the screenshot.I've just paused my game Arcane Worlds. Not the best angle for the screenshot.I've just paused my game Arcane Worlds. Not the best angle for the screenshot.
Ich habe gerade mein Spiel Arcane Worlds angehalten. Das ist nicht der beste Winkel für den Screenshot.
The same scene, but a different viewpoint.The same scene, but a different viewpoint.The same scene, but a different viewpoint.
Dieselbe Szene, aber aus einem anderen Blickwinkel.

Ich finde diese Funktion äußerst nützlich. Sie können beliebige Bilder aufnehmen, unabhängig davon, ob der Spieler sie normal im Spiel sehen kann oder nicht. Sie können Nahaufnahmen der Szenerie oder der Charaktere erhalten. Sie können es auch zum Debuggen Ihres Spiels verwenden und es anhalten, um die Situation zu analysieren. Das ist sogar noch nützlicher, wenn Sie über visuelle Debugging-Hilfsmittel verfügen.

Einzelschritt- oder Zeitlupenmodus

Sie können diesen Pausenmodus noch weiter verbessern, indem Sie eine Schaltfläche hinzufügen, um Ihr Spiel in einem Schritt auszuführen oder es in Zeitlupe auszuführen. Das hilft Ihnen, den richtigen Moment der Animation (zusätzlich zum Kamerawinkel) zu erfassen und ist auch beim Debuggen sehr nützlich.

Komposition

Der Pausenmodus mit aktiver Kamera dient der Zusammenstellung Ihrer Screenshots. Das Thema Komposition geht über den Rahmen dieses Artikels hinaus, aber es gibt eine einfache Möglichkeit, sich selbst zu helfen: Richtlinien hinzufügen.

Die Drittelregel ist eine gebräuchliche Methode zum Erstellen von Bildern, und möglicherweise ist auch der Goldene Schnitt hilfreich. Natürlich können Sie immer nur Augapfel-Dinge, aber wenn Sie Probleme damit haben, sind Richtlinien nützlich. Stellen Sie jedoch sicher, dass Sie diese Richtlinien nicht in den eigentlichen Screenshot aufnehmen!

Using "rule of thirds" guide lines.Using "rule of thirds" guide lines.Using "rule of thirds" guide lines.
Verwendung der "Regel der Drittel"-Richtlinien.

Richtlinien können auch verwendet werden, um eine Vorschau des Bilds anzuzeigen, wenn es auf verschiedene Seitenverhältnisse zugeschnitten wird. Mehr dazu weiter unten.

Spielercharakter teleportieren

Der vom Spieler kontrollierte Charakter ist oft ein wichtiger Bestandteil bei der Komposition Ihrer Screenshots. Sparen Sie sich viel Zeit und Ärger, indem Sie es einfach machen, es an eine beliebige Stelle in Ihrem Level zu verschieben.

Die genaue Methode hängt von Ihrem Spiel ab, aber etwas wie "Zeigen und Drücken einer Taste" oder "Halten einer Taste und Punkt" ist normalerweise die beste. Der No-Clip-Turbo-Bewegungsmodus funktioniert auch gut. Sie müssen nicht mit einem Sprung an einen Ort gelangen, aber es ist wichtig, in wenigen Sekunden irgendwohin zu gelangen.

In meinem Spiel LEVEL UP! Ich habe einen "Ansichtsmodus", der mit einem einzigen Tastendruck aktiviert wird. Die Ansicht kann schnell mit der Maus gescrollt und der Charakter mit einem einzigen Tastendruck zum Fadenkreuz teleportiert werden:

"View mode" from my game LEVEL UP!"View mode" from my game LEVEL UP!"View mode" from my game LEVEL UP!
"View mode" aus meinem Spiel LEVEL UP!

Und wieder finden Sie diese Funktion auch für andere Dinge nützlich, z. B. zum Testen Ihrer Levels und Mechaniken oder zum Debuggen Ihres Spiels.

Text, Benutzeroberfläche und Menüs

Vermeiden Sie es, zu viel Text in Ihre Screenshots einzufügen. Alles in allem machen Sie Bilder; Wenn Sie etwas mit Text sagen möchten, schreiben Sie es besser separat.

Die Erstellung der Benutzeroberfläche nimmt viel Zeit in Anspruch, daher möchten Sie sie natürlich in Ihren Screenshots zeigen (ich weiß, dass ich das tue). Das ist aber keine gute Idee. Als Entwicklungs-Screenshot in Ihrem Blog ist dies in Ordnung, aber Benutzeroberflächen und Menüs sollten nicht im Mittelpunkt Ihrer Screenshots der Spielegalerie stehen, es sei denn, es handelt sich um eine Hardcore-Simulation mit umfangreichen Tabellenkalkulationen oder Ähnlichem.

Es gibt jedoch eine andere Art von Benutzeroberfläche: das HUD (Head-up-Display) oder die In-Game-Oberfläche (letztere ist hauptsächlich für Strategiespiele vorgesehen). Sie sollten in Ihren Screenshots überlegen, ob Sie dies möchten.

Für alle Interessierten bietet das HUD Informationen über die Spielmechanik und das Gameplay. Dies bedeutet, dass es weitere Informationen zu Ihrem Spiel bieten kann:

bastion-hud-rawbastion-hud-rawbastion-hud-raw
Ein Screenshot von Bastion mit dem HUD.
One can guess a lot about the gameplay from the Bastion's HUD screenshot.One can guess a lot about the gameplay from the Bastion's HUD screenshot.One can guess a lot about the gameplay from the Bastion's HUD screenshot.
Aus dem obigen Screenshot kann man viel über das Gameplay erraten!

Das Anzeigen der Benutzeroberfläche ist jedoch häufig über mehrere Screenshots hinweg redundant, und Sie möchten dies möglicherweise auch aus Marketinggründen (frühe Arbeit, Wettbewerb, Diebstahl) nicht. Es verbirgt und überfrachtet auch Ihre Kunst. Es ist notwendig, wenn Sie das Spiel spielen, aber nicht, wenn Sie seine Bilder anderen zeigen.

Wie Sie sehen, hat die Einbeziehung der Benutzeroberfläche mehr Nachteile als Vorteile, aber Sie sollten sie selbst für Ihr Spiel abwägen.

Fügen Sie eine Schaltfläche hinzu, um das HUD und die GUI im Spiel auszublenden

Selbst wenn Sie das HUD in Ihren Screenshots behalten möchten, ist es immer noch eine gute Idee, eine Schaltfläche zum Umschalten hinzuzufügen. Möglicherweise benötigen Sie Ihre Spielgrafik für andere Zwecke als Screenshots: Website-Design, Druckmaterialien und Werbung.

Und natürlich möchten Ihre Spieler vielleicht schöne Screenshots Ihres Spiels machen, um sie im Internet zu teilen oder Hintergrundbilder zu erstellen, bei denen ein HUD nur im Weg steht.

Analysieren Sie Ihr Screenshot-Histogramm

Ein Histogramm zeigt die Anzahl der Pixel für jede Helligkeitsstufe als Balken. Sie finden es in Photoshop, GIMP (als separates Fenster) und Paint.NET (unter Anpassungen > Ebenen). In den folgenden Beispielen wird das GIMP-Histogramm mit einer logarithmischen Skala zur Verdeutlichung verwendet.

Here's the original screenshot from a fictional game. It takes place in a dungeon, so it's dark. Hard to see anything.Here's the original screenshot from a fictional game. It takes place in a dungeon, so it's dark. Hard to see anything.Here's the original screenshot from a fictional game. It takes place in a dungeon, so it's dark. Hard to see anything.
Hier ist der Original-Screenshot eines fiktiven Spiels. Es findet in einem Verlies statt, also ist es dunkel. Schwer zu sehen.

Beginnen wir mit diesem Screenshot. Sie können einige Lagerfeuer und wahrscheinlich einige Feinde und Mauern sehen, wenn Sie blinzeln. Werfen wir einen Blick auf das Histogramm:

Histogram of the original screenshot.Histogram of the original screenshot.Histogram of the original screenshot.
Histogramm des Original-Screenshots.

Die Lücke ganz links steht für nicht verwendete dunkle Farben - das Bild enthält überhaupt kein Schwarz! Die Lücke rechts (die etwa ein Drittel des Bereichs ausmacht) steht für nicht verwendete helle Farben (bis zu Weiß).

Die tatsächlichen Bildfarben verbrauchen nur etwa die Hälfte des gesamten Bereichs - das ist schlecht. Lassen Sie es uns mit einer Nachbearbeitung beheben. Ich werde die Einstellung "Ebenen" verwenden, die in vielen Grafikverarbeitungsprogrammen verfügbar ist, und den Eingabebereich so einstellen, dass er mit den verwendeten Farben im Histogramm übereinstimmt, und das Gamma (die Kurve) ein wenig anpassen:

Processed screenshot. The processing method is called "levels" in most image processing programs.Processed screenshot. The processing method is called "levels" in most image processing programs.Processed screenshot. The processing method is called "levels" in most image processing programs.
Verarbeiteter Screenshot. Die Verarbeitungsmethode wird in den meisten Bildverarbeitungsprogrammen als "Ebenen" bezeichnet.

Das ist nicht ideal, aber es ist viel besser. Schauen wir uns jetzt das Histogramm an:

Histogram of the processed screenshot.Histogram of the processed screenshot.Histogram of the processed screenshot.
Histogramm des verarbeiteten Screenshots.

Wie Sie sehen können, füllen die verwendeten Farben jetzt den gesamten Helligkeitsbereich aus. Die Einstellung "streckte" die Farbwerte, um den Bereich zu füllen. Dies kann automatisch als Nachbearbeitungsschritt in Ihrem Rendering erfolgen. Sie können auch andere Verarbeitungseffekte in Ihrem Bildbearbeitungsprogramm Ihrer Wahl ausprobieren und dann die gewünschten Effekte in Ihrem Spiel anwenden.

Es gibt jedoch einen anderen Weg.

Passen Sie die Kunst basierend auf dem Histogramm an

Das ursprüngliche Screenshot-Histogramm zeigt, dass sowohl dunkle als auch helle Farben fehlen, sodass der verwendete Bereich kleiner ist, als er sein könnte. Lassen Sie uns das beheben, indem wir die Kunst verbessern. Die hellen Dinge hier sind Flammen und Monsteraugen, und die dunklen sind der Hintergrund (Boden) und die Asche.

Improved art. Brighter flames and monster eyes, darker background and ashes.Improved art. Brighter flames and monster eyes, darker background and ashes.Improved art. Brighter flames and monster eyes, darker background and ashes.
Verbesserte Kunst: hellere Flammen und Monsteraugen, dunklerer Hintergrund und Asche.

Okay, das sieht noch besser aus als das nachbearbeitete. Was ist jetzt mit dem Histogramm?

Histogram of the screenshot with improved art.Histogram of the screenshot with improved art.Histogram of the screenshot with improved art.
Histogramm des Screenshots mit verbesserter Grafik.

Wie Sie sehen, wird der Helligkeitsbereich jetzt viel besser genutzt. Natürlich können Sie Kunstanpassungen mit Nachbearbeitung kombinieren!

Ich habe das helle Ende des Bereichs (die Flammen) komprimiert und dabei einige Details geopfert, um den Bereich des restlichen Bildes zu erweitern:

Histogram of the screenshot with improved art and post-processing.Histogram of the screenshot with improved art and post-processing.Histogram of the screenshot with improved art and post-processing.
Histogramm des Screenshots mit verbesserter Grafik und Nachbearbeitung.
Improved art with a bit of post-processing applied.Improved art with a bit of post-processing applied.Improved art with a bit of post-processing applied.
Verbesserte Kunst mit ein wenig Nachbearbeitung.

Und hier ist noch einmal das Original zum Vergleich:

Here's the original screenshot from a fictional game. It takes place in a dungeon, so it's dark. Hard to see anything.Here's the original screenshot from a fictional game. It takes place in a dungeon, so it's dark. Hard to see anything.Here's the original screenshot from a fictional game. It takes place in a dungeon, so it's dark. Hard to see anything.
Der Original-Screenshot aus unserem fiktiven Spiel.

Auflösung und Seitenverhältnisse

Überall dort, wo es eine Screenshot-Galerie für Ihr Spiel gibt (Ihre Website, ein Online-Shop usw.), ist es am besten, die Screenshot-Auflösung in dieser Galerie konsistent zu halten. Zumindest sollten Sie das Aspect-Verhältnis (wie 16:9, 4:3 oder 2:1) konsistent halten.

Das wirft die Frage auf: Wie kann man die beste Bildschirmauflösung für Ihr Spiel auswählen? Überlegen Sie, was Ihre primäre Zielplattform ist, und wählen Sie darauf basierend die Auflösung und das Seitenverhältnis aus.

Zuschneiden

Unabhängig von der gewählten Auflösung treten früher oder später Probleme beim Zuschneiden auf. Unabhängig davon, ob es sich um Twitter-Bilder oder Screenshots am Samstag handelt, werden einige Websites Ihre Bilder zuschneiden, um ihren Standards zu entsprechen.

Um damit fertig zu werden, empfehle ich, die interessantesten Dinge in der Mitte Ihres Screenshots zu belassen und zu überprüfen, wie sie auf das Quadrat zugeschnitten werden. Das Hinzufügen von Richtlinien in Ihrem Spiel kann auch dabei helfen. Sie können bei Bedarf auch Richtlinien für andere Seitenverhältnisse hinzufügen.

Composition guide lines (rule of thirds) and cropping guide lines (square and 2:1).Composition guide lines (rule of thirds) and cropping guide lines (square and 2:1).Composition guide lines (rule of thirds) and cropping guide lines (square and 2:1).
Kompositionsrichtlinien (Drittelregel) und Schnittlinien (Quadrat und 2:1).

Vorschaubilder

Ein weiteres ähnliches Problem besteht darin, dass Ihre Bilder verkleinert werden, um Miniaturansichten zu erstellen. Auf diese Weise werden kleine hochfrequente Details effektiv aus Ihrem Screenshot entfernt, sodass nur große niederfrequente Funktionen übrig bleiben. Stellen Sie also sicher, dass Sie sie haben und dass sie einen ausreichend hohen Kontrast haben. Das ist auch gut für Ihr Spiel, da es einfacher ist, zu sehen, wo sich auf dem Bildschirm befindet, wenn große kontrastreiche visuelle Funktionen Ihren Blick lenken.

Fügen Sie dazu eine Vorschau-Miniaturansicht hinzu, die zusammen mit anderen Screenshot-Werkzeuge wie Richtlinien angezeigt wird.

Animierte Screenshots

Einige Spiele sehen in Bewegung gut aus, aber in Standbild-Screenshots nicht so gut. Und manchmal kann ein statisches Bild einfach nicht genug Informationen über Ihr Spiel liefern.

Erstellen Sie animierte Screenshots mit GIFs. Es gibt andere Möglichkeiten, dies zu tun, aber GIFs werden weitgehend unterstützt, sodass viele Benutzer sie auf verschiedenen Geräten anzeigen können. Wenn Sie moderner oder effizienter werden möchten, probieren Sie Gfycat für HTML5-Videos aus.

Sie können ein Video aufnehmen und in ein GIF konvertieren oder ein Programm verwenden, das direkt in GIF aufnehmen kann, wie GifCam oder LICEcap.

Schleifenpuffer

Diese Funktion ist in FRAPS integriert und kann direkt in Ihrem Spiel implementiert werden. Die Idee ist, dass das Programm immer in einem Puffer begrenzter Größe aufzeichnet - sagen wir 30 Sekunden Video. Wenn Sie also Ihr Spiel spielen, etwas tun und denken "Hey, das war großartig", können Sie einfach eine Taste drücken, um ein Video der letzten 30 Sekunden zu speichern, bevor Sie es gedrückt haben, als ob die Aufnahme vor 30 Sekunden begonnen hätte.

Abschluss

Sie kennen jetzt verschiedene Werkzeuge und Methoden, mit denen Sie Ihr Spiel bestmöglich präsentieren können: aktiver Pausenmodus und Teleportieren des Spielercharakters, um die beste Ansicht zu erhalten, Verstecken Ihres HUD (oder Beibehalten und wann das zu tun ist); Analysieren Sie Ihr Screenshot-Histogramm, um seine Farben zu verbessern, und verwenden Sie Richtlinien, um das Zuschneiden und die Komposition zu unterstützen.

Viele dieser Tipps helfen Ihnen auch bei der Entwicklung des Spiels und verbessern die Qualität Ihrer Spielgrafiken und von der Community erstellten Screenshots.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.