Ressourcen, Tutorials und Beispiele für pixelbasierte Websites

Das Entwerfen einer Weboberfläche mit Grafiken im Pixel-Stil ist im Vergleich zu modernen Trends relativ unklar. Sie müssen wirklich eine Handvoll Websites im Internet durchsuchen, um einige gute Beispiele zu finden. Es ist schwer aber nicht unmöglich.

In diesem Artikel habe ich gesammelt Eine Mega-Zusammenstellung von allem, was Sie für das pixelbasierte Website-Design benötigen. Es gibt Dutzende gesunde Tutorials für Anfänger und Experten. Ich habe auch ein paar nützliche Tools und Ressourcen bereitgestellt, mit denen Sie das Thema weiter erkunden können. Wenn Sie sich für Videospielgrafiken oder isometrische Pixelgrafiken interessieren, werden Sie diese Sammlung lieben.

Ressourcen

Dies sind einige einzigartige Entwicklungsressourcen für Webscripts und digitale Grafiken. Wenn Sie sich mit der Erstellung von Pixel-Website-Layouts beschäftigen, haben Sie nicht immer das Bedürfnis, alles genau zu verfolgen. Diese Sammlung von webbasierten Ressourcen kann sich immer wieder als nützlich erweisen.

Spritzig

Ich habe mich daran gewöhnt, mit Open Source Code zu arbeiten. Daher ist es immer eine aufregende Situation, ein jQuery-Plugin wie Spritely zu finden. Sie können dieses Skript in Ihre Website integrieren, um eine schnelle dynamische Sprite-Animation und einen Bildlauf-Hintergrund zu erhalten.

Das gesamte Plugin wird von JavaScript und HTML / CSS unterstützt. Es ist kein Flash oder eine andere Backendsprache erforderlich. Die Dokumentationsseite ist einfach genug, um Ihnen den Einstieg zu erleichtern. Die Entwickler haben viele Demo-Demos, die Sie auch herunterladen können.

Die aktuelle Version der stabilen Version ist 0.6.1 und wird mäßig aktualisiert. Die Animationseffekte sind mit Opera, Chrome, Safari, Firefox und Internet Explorer 6+ kompatibel. Auch alle Smartphone-Browser, die auf Android oder iOS laufen, sollten einwandfrei rendern.

FatPixels

Dies ist ein mächtiges Open-Source-Sprite-Skript, das von Matías Martínez entwickelt wurde. Für FatPixels muss nur die jQuery-Bibliothek ordnungsgemäß ausgeführt werden. Obwohl ich sagen würde, dass Spritely eine komplexere Animationsbibliothek ist, hat FatPixels eine Nische im Markt für Webentwickler.

Sie können auf einfache Weise animierte Sprites erstellen, ohne ein GIF-Bild zu erstellen. In der Tat können Sie alle Bilder als .jpg exportieren und eine Warteschlange mit Sprites für einen langen animierten Effekt erstellen. Die FatPixels-Homepage bietet eine hervorragende Demo sowie den Block für jQuery-Code, mit dem sie erstellt wurden. Wenn Sie nach etwas Leichtgewichtigem suchen, um Ihre Sprites zu animieren, ist FatPixels der richtige Weg.

SmartSprites

Bei der Verwendung des Wortes "Sprite" gibt es verschiedene Bedeutungen. Videospielcharaktere oder animierte Sprites sind im Allgemeinen kleinere Bilder mit sehr wenigen Pixeln. In CSS bezieht sich der Begriff Sprite jedoch auf ein einzelnes Bild, das als Symbol für Ihre Website dient.

Der Grund, warum Sie ein einzelnes Sprite-Blatt anstelle von einzelnen Bildern verwenden sollten, ist die Reduzierung der Serverressourcen. Es ist viel schneller, ein größeres Bild herunterzuladen, das alle Ihre Symbole enthält, anstatt viele kleinere, aber separate Bilder. Das Zusammenfügen all dieser Symbole in Photoshop kann jedoch sehr mühsam sein. auch nicht unbedingt schwierig, nur wiederholend und zeitraubend.

Zum Glück ist der SmartSprites CSS Generator eine fantastische Ressource für diese Situation. Sie können schnell ein pixelgenaues Blatt mit all Ihren Bildern im GIF- oder PNG-Format erstellen. Zusätzlich können Sie schnell feststellen, was Sie tun Hintergrundposition x / y-Koordinaten sollten für jedes einzelne Symbol angegeben werden.

Squidfingers BG Patterns

Das Erstellen eines guten Satzes von sich wiederholenden Hintergrundbildern ist sehr schwierig. Es kann Tage dauern, bis Sie nahtlose Bilder erstellen können. Zum Glück gibt es online Ressourcen zum Herunterladen von kostenlosen Hintergrundplättchen.

Die Squidfingers Patterns-Galerie ist eine solche Ressource. Es bietet über 150 verschiedene Pixelmuster, die Sie herunterladen und für Ihre Projekte verwenden können. Die Styles sind sehr dynamisch und farbenfroh, und für eine solche Vielfalt ist es eine ausgezeichnete Ressource, die immer griffbereit ist. Die Download-Links sind im ZIP-Format, wodurch sie kleiner und einfacher zwischen Computern zu übertragen sind.

Die Spriter-Ressource

Ich kann nicht genug tolle Dinge über The Spriters Resource sagen. Es ist eine Website, auf der Sie alle Spielesysteme nach Sprite-Sheets durchsuchen können. Dazu gehören Karten, Gebäude, Menübildschirme, Zeichen-Sprites, Symbole und so ziemlich alles!

Sie sind seit 2001 online und der Katalog der Videospiele ist enorm gewachsen. Hinter TSR steht eine ganze Community mit Grafikdesignern, die diese verschiedenen Spiele-Sprites rippen können. Wenn Sie an irgendeiner Form von Videospieldesign oder Online-Fanseiten interessiert sind, müssen Sie sich diese erstaunliche Galerie ansehen.

Noch interessanter sind einige der Schwester-Websites, die aus TSR hervorgegangen sind. Gaming-Fans halfen auch beim Rippen von Basistexturen und beim Rendern von Charaktermodellen. Insgesamt ist es eine wirklich großartige Community, die die Arbeit mit Sprites in digitalen Grafiken sehr unterstützt.

400 Pixel

Dies ist eine wirklich coole Web-App, die keinen wesentlichen Wert bietet, aber auf jeden Fall ordentlich ist. Mit 400 Pixel können Sie ein Pixeldokument online erstellen und das Bild in seinem Raster speichern. Die Seite ist ähnlich gestaltet wie die Millionen-Dollar-Homepage, wobei jedes Bild einen quadratischen Block im Gesamtbild einnimmt.

Sie können in ihrem Webinterface herumspielen, um wirklich doofe Kunstwerke zu erstellen. Es ist nicht etwas, das Sie sofort aufgreifen können, aber es macht Spaß, damit zu spielen, sobald Sie den Dreh raus haben. Und es ist ein schönes Werkzeug, mit dem Sie von jedem Computer mit Internetzugang aus arbeiten können.

Hauptausgabe

Ähnlich wie 400 Pixel können Sie Major Output als persönliches Online-Studio für Pixelgrafik verwenden. Die Entwicklung befindet sich noch in einem frühen Stadium, jedoch ist bereits die gesamte Kernbenutzerfunktionalität verfügbar. Sie können sich für ein kostenloses Konto registrieren und gleich mit der Erstellung von Pixel-Art beginnen.

Jedes Bild wird lokal auf seinen Servern gespeichert, und Sie können auf Websites und Foren einen Hotlink erstellen. Viele der Bilder sind für die Öffentlichkeit zugänglich und Sie können sie durch Anklicken verschiedener Autoren oder Tags überprüfen. Es gibt auch ein Suchfeld, aber ich denke, dass die Qualität der Suchergebnisse nicht immer großartig ist.

Major Output scheint wie ein anderes Community-Tool zu sein, über das man Spaß haben kann, aber wahrscheinlich keinen großen Bildungswert für Pixel-Künstler bietet.

Tutorials

Nun, da Sie über die Ressourcen verfügen, werfen wir einen Blick auf die Tutorials, die von den vielen Bildungszentren und hilfreichen Blogeinträgen im Internet bereitgestellt werden. Ich habe ein kleines Set von wirklich praktischem zusammengestellt Pixel Art Tutorials für Anfänger und Fortgeschrittene. Viele dieser Tutorials sind auf Adobe Photoshop ausgerichtet, aber Sie können fast alle fortgeschrittenen Bildbearbeitungsprogramme mitverfolgen.

Das Pixel Sprite Tutorial von Derek yu

Offensichtlich gibt es Hunderte von hunderten von Pixel-Sprite-Tutorials bei Google, aber dieses spezielle Tutorial auf der Website von Derek Yu durchläuft viele verschiedene Schritte, um zu erklären, wie Sie Pixel-Sprites erstellen. Ein Großteil des Prozesses wurde so rationalisiert und erklärt, dass Anfänger schnell in die Action einsteigen können.

Fans von Videospielen werden dieses Tutorial lieben, da Sie beim Erstellen dieser speziellen Grafiken einen Blick hinter die Kulissen bekommen. Ich finde es toll, ein Website-Layout mit Videospiel-Pixelgrafiken zu finden, die im gesamten Design verstreut sind. Es vermittelt ein einzigartiges Gefühl von Nostalgie und ist etwas, das Sie nicht überall finden. Jeder, der aus verschiedenen Gründen eigene Pixel-Sprites erstellen möchte, kann mit Dereks 10-stufigen Tutorialserie beginnen.

Konfigurieren von Photoshop für Pixel Art von Brandon Treb

Hier ist ein weiteres perfektes Tutorial für Anfänger im Bereich der Pixelgrafik. Der Blogeintrag wurde von Brandon Treb geschrieben, einem fantastischen Designer und Entwickler von Mobilgeräten. In dieser ausführlichen Anleitung zu pixelbasierter Photoshop-Kunst finden Sie alle möglichen nützlichen Informationen.

Sie müssen wissen, wie Sie die Voreinstellungen in Photoshop einrichten, damit Ihre Pixelgrafik beim Exportieren nicht unangenehm erscheint oder an Qualität verliert. Sie werden überrascht sein zu erfahren, dass viele Anpassungen erforderlich sind, um wirklich eine schöne Bildqualität zu erhalten.

Handgefertigte Pixel zeichnen von Russell Tate

Hier ist ein weiteres erstaunliches Tutorial voller Techniken für handgezeichnete Pixelkunst in Photoshop. Diese Sammlung von Pixel-Art-Techniken ist einfach erstaunlich. Jeder, der den Inhalt durchblättert, wird höchstwahrscheinlich etwas finden, das er vorher nicht gewusst hatte.

Es gibt detaillierte Erklärungen zum Erstellen von Textur auf Gras und Rinde. Darüber hinaus erfahren Sie, wie Sie Pixelgrafiken, die Sie gezeichnet haben, klonen und in ein Symbol-Design verwandeln. In allen Bereichen kommt es auf Übung und Präzision an. Diejenigen, die wirklich leidenschaftlich sind, werden es durchhalten und finden innerhalb weniger Monate eine solide Technik für ihre pixelartigen Ideen.

Entwicklung eines CSS / JS-Spiele-Portfolios von Daniel Sternlicht

Hier ist ein Tutorial des Smashing Magazine, in dem beschrieben wird, wie man ein Spieleportfolio mit CSS / JS codiert, das viele Sprites aus der Pokemon-Spielserie verwendet. Der Autor ist Daniel Sternlicht, der auch zufällig sein persönliches Portfolio auf diesem Gaming-basierten Layout erstellt.

Die Website fungiert als RPG-Welt, in der Sie ein Zeichen-Sprite mit der Tastatur steuern. Sie können verschiedene Gebäude eingeben, um Informationen wie Kontaktdaten und Portfolioeinträge anzuzeigen.

Ich liebe dieses Tutorial wirklich und es ist eine aufregende Art, Pixelgrafik mit der Website-Entwicklung zu kombinieren. Auch wenn Sie nicht viel über JavaScript wissen, ist dies immer noch ein sehr interessanter Artikel. Ich habe einen Teil des Codes durchgelesen und muss Dan für ein derart kreatives Tutorial große Komplimente machen. Jeder Pokemon-Fanatiker wird sich sicherlich in seine Ideen verlieben.

Isometric Pixel Tutorials von Matriax

Diese kleine Website gas13.ru bietet einige der exzentrischsten und professionellsten Pixel-Tutorials, die ich je gesehen habe. Im isometrischen Pool-Tutorial werden Sie mit dem Erstellen von glänzenden Blöcken und Wasserbeschaffenheit vertraut gemacht. Zusätzlich finden Sie Ressourcen für alle anderen isometrischen Pixel-Tuts in der Seitenleiste.

Es gibt so viel zu lernen: Sie können eine Storefront, ein Pixel-Sprite oder sogar detaillierte Texturen für Videospiele und Website-Hintergründe entwerfen. Ich bin nicht sicher, ob dieser Autor noch aktiv Inhalte veröffentlicht, aber die vorhandenen Artikel sind mehr als genug für Anfänger, um die Grundlagen zu erlernen.

Studio Purloux Pixel Tutorial von Kevin Chaloux

Jetzt, wo ich die besten Pixel-Tutorials aufliste, würde ich dies definitiv gleich zu Beginn einschließen. Dieses Tutorial zum Thema Pixelgrafik ist ein großartiger Folgeartikel für Neulinge. Sie werden von Anfang an mit Open Source-Software wie GIMP oder Paint.NET vertraut gemacht.

Sie lernen, wie Sie Bilder exportieren und die vielen Facetten des Pixeldesigns wie Dithering und Anti-Aliasing. Es gibt so viele verschiedene Techniken, denen Sie folgen können. Sie sollten einige Design-Ideen aufgreifen, indem Sie Retro-8-Bit- und 16-Bit-Videospiele betrachten.

Der Autor Kevin Chaloux schreibt Derek Yus Pixel-Sprite-Tutorial (oben aufgeführt) gut und erwähnt, dass dies als Inspirationsquelle diente, als er anfing.

Erstellen Sie ein besseres Favicon von Kayla Knight

Webdesigner vergessen oft, dass ein Favicon-Bild (Lieblingssymbol) ein großer Bestandteil jedes Branding-Programms ist. Alle beliebtesten Websites sind an ihrem 16 × 16-Favicon zu erkennen. Wenn Sie mit einer solchen begrenzten Leinwand arbeiten, müssen Sie sich mit pixelgefüllten Grafiken und Illustrationen beschäftigen. Dieses Favicon-Tutorial von OXP kombiniert beide Ideen hervorragend.

Anhand dieses Tuts können Sie verstehen, warum Pixel-Art beim Erstellen von Favicons so vorteilhaft ist. Es gibt auch Tools und solide Techniken zum Exportieren einer .ico-Datei. Ebenfalls enthalten ist eine kleine Vitrine mit beliebten Favicons aus dem Web.

Dies ist eine weitere Ressource, von der ich glaube, dass sie alle Webdesigner profitieren kann. Es ermöglicht Ihnen, sich mit der Erstellung eines Favicons und mit strengen Pixelbeschränkungen vertraut zu machen.

Showcase-Galerie

Ich möchte den Artikel mit einer schönen Galerie von Website-Designs im Pixel-Stil abschließen. Ich habe 40 Beispiele verschiedener Layouts mit vielen unterschiedlichen künstlerischen Visionen beigefügt. Der Trend pixeliger Kunstwerke beginnt gerade erst auf Mainstream-Websites zu erkennen. Ich hoffe, dass dieses einzigartige Showcase von Pixel-Sites eine Quelle der Inspiration für Webentwickler auf der ganzen Welt ist.

Erdgebundene Zentrale

PixelJam

Red Rokk Interactive Marketing

eBoy-Blog

Tamago-Pixel

pixelHugger

Pixelabweichende Grafiken

8-Bit-HTML5-Canvas-Zyklus

Daniel Sternlicht

Armee der Trolle

BlockHead Pix App

madPXL

Supertott 2.0

ClassicGaming

RPG-Toolkit-Tutorials

Schöpfer der Stadt

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Die Sandkiste

Herr Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Hals über Kopf

Liebespixel

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Adept Vormgeving

Pixel Museum

QuickHoney

Polpo.net

spiv.cz

4 echter Teig