Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Visuals
Webdesign

Neuerstellung der Retro-Filtereffekte von Instagram

by
Length:LongLanguages:

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

In diesem Tutorial werde ich mir genau ansehen, wie die Filter von Instagram funktionieren, bevor ich ähnliche Effekte in Photoshop neu erstelle. Ich werde Ihnen auch einige interessante neue CSS-Eigenschaften vorstellen, mit denen wir Filter im Instagram-Stil direkt im Browser erstellen können.

Es gibt eine ganze Reihe von Vintage-Foto-Apps auf dem Markt, von Hipstamatic bis сamera+, aber die mit Abstand bekannteste dieser Apps ist Instagram. Einer der ursprünglichen Spieler, der im September 2010 gestartet wurde. Drei Monate später, im Dezember, hatte er über 1 Million Benutzer angemeldet.

Dieser Anstieg der Popularität führte später dazu, dass Facebook es für eine gemeldete Milliarde US-Dollar erwarb. Nicht schlecht für ein kleines Startup von 13 Leuten.


Wie funktionieren Instagram-Filter?

Instagram hat eine Vielzahl verschiedener Filter zur Auswahl, von 'Lumo-Fi' bis 'Nashville'. All dies wird mit einer Vielzahl von Methoden, Filtern und Effekten erstellt. Kevin Systrom, Mitbegründer von Instagram, fügt hinzu:

Es ist wirklich eine Kombination aus verschiedenen Methoden. In einigen Fällen zeichnen wir auf Bildern, in anderen machen wir Pixelmathematik. Es hängt wirklich von dem Effekt ab, den wir anstreben. Zum Beispiel ist Lomo-Fi nicht viel mehr als das Bild mit erhöhtem Kontrast.

Das Bild unten zeigt die verschiedenen von Instagram verwendeten Filtereffekte:

instagram filters
Bild von Jessica Zollman/Creative Commons

Obwohl jeder Filter unterschiedliche Einstellungen hat, kann der eigentliche Prozess für die meisten Filter je nach Art des Effekts in sechs Schritte unterteilt werden:

1. Einstellung

Die Einstellung von Farbe und Ton ist wahrscheinlich einer der wichtigsten Schritte, die jeden Filter unterscheiden. Viele der Eigenschaften jedes Filters können durch Einstellen unterschiedlicher Einstellstufen erreicht werden.

2. Schärfentiefe

Die Schärfentiefe kann definiert werden, als "der Abstand zwischen den nächstgelegenen und am weitesten entfernten Objekten in einer Szene, die in einem Bild akzeptabel scharf erscheinen". Wenn Sie es gewohnt sind, im Gegensatz zur Fotografie im Grafikdesign zu arbeiten, erkennen Sie es wahrscheinlich als das Bit im Vordergrund, das scharf und scharf erscheint, und das Bit im Hintergrund, das verschwommen erscheint.

Fokussieren Sie das knackige/charfe Stück auf das Motiv, das Sie fotografieren und die Umgebung verschwimmen lassen, können Sie die Aufmerksamkeit auf den Bereich lenken, den Sie hervorheben möchten.

instagram depth of field
Bild mit freundlicher Genehmigung von SXU freie Fotografie

Das obige Bild zeigt ein gutes Beispiel für die Schärfentiefe. Die Pflanze im Vordergrund erscheint im Fokus, während der Hintergrund unscharf und verschwommen erscheint.

3. Lens Flare/Film Burn

Bei einigen Filtern fügt Instagram ein zusätzliches Layer hinzu, bei der es sich normalerweise um Linseneffekte oder Filmunschärfe handelt. Durch Hinzufügen dieser Elemente kann dem Bild ein zusätzlicher Wow-Faktor hinzugefügt werden. Diese sollten jedoch sinnvoll eingesetzt werden, da eine zu starke Betonung des Linseneffekts/Filmbrennens den Gesamteffekt manchmal klebrig und amateurhaft machen kann.

Schauen Sie sich diese Auswahl an Linseneffekten an, die alle zum Vintage-Effekt beitragen:

instagram film burn
Bild von CG Arena

4. Kratzer mit alten Filmeffekten

Um einem Bild eine Körnigkeit im Vintage-Stil zu verleihen und ihm ein antiquiertes Gefühl zu verleihen, wird eine Überlagerungstextur verwendet. Diese können von tatsächlichen Filmkratzern bis zu erzeugtem Rauschen reichen. Rauschen tritt auf, wenn die Farbwerte auf Pixelebene variieren, wodurch die Klarheit eines Bildes verringert wird. Computergeneriertes statisches Rauschen ist ein extremes Beispiel für Rauschen.

5. Vignette

Sobald die Einstellungen, die Schärfentiefe und das Rauschen zum Bild hinzugefügt wurden, wird eine Vignette darauf platziert, um die Aufmerksamkeit erneut auf den Hauptinhalt des Bildes zu lenken. Eine Vignette ist eine in der Fotografie verwendete Technik, die die Helligkeit oder Sättigung eines Bildes in Richtung der Bildränder verringert.

instagram Vigniette
Bild mit freundlicher Genehmigung von Wikipedia

6. Hinzufügen eines Rahmens

Schließlich wird ein Rahmen hinzugefügt, um dem Bild diese zusätzliche Retro-Qualität zu verleihen. Die Rahmen sind oft das, was auf alten Rahmenrollen oder den Originalbildern im Polaroidstil zu sehen war. Sie können auch als erodierte oder zerrissene Kanten wirken, die das Gefühl vermitteln, dass das Bild ein authentisches Vintage-Foto ist.


Die Filter von Instagram beginnen normalerweise in Photoshop. Von dort aus werden sie dann als Teil der nativen iPhone-App in Ziel C programmiert. Der Mitbegründer von Instragrams erweitert dies:

Unsere Filter sind eine Kombination von Effekten - Kurvenprofile, Mischmodi, Farbtöne usw. Tatsächlich erstelle ich sie normalerweise in Photoshop, bevor ich die Algorithmen erstelle, um sie auf dem Telefon auszuführen.


Neuerstellen von Instagram-Filtern in Photoshop

Das ist, was wir erstellen werden - Sie können die Vor- und Nachwirkungen des Hinzufügens unserer Instagram-Stilfilter sehen:

Creating Instagram style filters with photoshop

Schritt 1: Erstellen Sie die Leinwand

Erstellen Sie zunächst eine quadratische Leinwand mit einer Größe von 600 x 600 Pixel und geben Sie ihr eine Hintergrundfarbe. Ich habe mich für das native Instagram-Blau als Hintergrund entschieden. Fügen Sie das von Ihnen ausgewählte Bild in Ihre Leinwand ein, ändern Sie die Größe und schneiden Sie das Bild bei Bedarf zu.

Schritt 2: Passen Sie die Farbe an

Jetzt ist es Zeit, die Farbe und den Ton an das Bild anzupassen. Gehen Sie dazu im oberen Menü zu "Bild" und wählen Sie Anpassungen > Kurven. Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie diese Werte ändern können.

Erhöhen Sie zunächst die Grünwerte. Ändern Sie beispielsweise die Ausgabe auf '30'. Ihr Bild sollte jetzt etwas grüner aussehen. Wir werden auch den Blues im Bild erhöhen. Ändern Sie den blauen Ausgang auf '100'. Ihr Bild sollte jetzt ziemlich verwaschen aussehen.

Bitte beachten Sie, dass Sie beim Ändern dieser Einstellungen herumspielen können, bis Sie den gewünschten Effekt für Ihr Foto erhalten. Wenn Sie dies getan haben, duplizieren Sie das gerade erstellte Bild. Sie können dies tun, indem Sie mit der rechten Maustaste auf die Bildebene klicken und 'Ebene duplizieren' auswählen.

Schritt 3: Erstellen der Schärfentiefe

Wenn Ihr dupliziertes Layer ausgewählt ist, gehen Sie zu Filter > Unschärfe > Gaußscher Unschärfe, erhöhen Sie den 'Radius' auf 5 Pixel und klicken Sie auf 'OK'. Nehmen Sie nun das kreisförmige Auswahlrechteck und zeichnen Sie einen Kreis um den Bereich Ihres Fotos, den Sie scharfstellen möchten.

Sobald Sie dies getan haben, gehen Sie zu Layer > Layermaske > Auswahl ausblenden. Es sollte nun einen Layermaskenkreis aus dem unscharfen Bild erstellt haben.

Gehen Sie im Layerbedienfeld zur Layermaske, drücken Sie 'Alt' und klicken Sie auf die Layermaske. Ihre Leinwand sollte jetzt zur Layermaske wechseln. Gehen Sie zu Filter > Unschärfe > Gaußsche Unschärfe und verwischen Sie die Maske um 30 Pixel. Das sollte nun den Effekt der Schärfentiefe erzeugen, wobei das Motiv Ihres Fotos scharf und der Hintergrund unscharf ist.

Schritt 4: Filmbrand und Lens Flare

Werfen Sie einen Blick auf Google images oder andere Bildseiten, um eine Auswahl an Linseneffekten und Filmbränden zu erhalten. Nachdem Sie das Flare/Burn oder beides ausgewählt haben, können Sie sie über das Original legen und den Mischmodus des Filmbrennens auf 'Überlagern' oder einen anderen Modus wie 'Bildschirm' einstellen. Experimentieren Sie erneut mit diesen, um herauszufinden, welche am besten zu Ihrem Foto passt.

Linseneffekte können auch nativ in Photoshop erzielt werden, indem Sie unter Filter > Rendern > Len-Flare ... den gewünschten Effekt angeben.

Schritt 5: Erstellen der Filmkratzer

Fügen Sie einige Filmkratzer hinzu oder erzeugen Sie Ihr eigenes Rauschen, indem Sie zu Filter > Rauschen > Rauschen hinzufügen gehen und dann mit den Mischmodi herumspielen, um den gewünschten Effekt zu erzielen.

In diesem Fall habe ich mein Bild auf 'Multiplizieren' gesetzt und die Opazität auf 14% gesenkt.

Schritt 6: Erstellen der Vignette

Wir sind fast am Ende der Erstellung des Filtereffekts im Instagram-Stil. Bevor dies geschieht, müssen wir nur den letzten Schliff hinzufügen. Um die Vignette zu erstellen, fügen Sie eine neue Layer hinzu und füllen Sie sie mit einem festen Schwarz. Nehmen Sie dann das kreisförmige Auswahlwerkzeug und zeichnen Sie eine große ovale Form in die Bildmitte, wobei die Kanten des Ovals fast die Seiten des Bildes berühren.

Schneiden Sie die Auswahl des Auswahlrahmens aus dem Schwarzen aus, indem Sie die Entf-Taste auf Ihrer Tastatur drücken. Gehen Sie dann erneut zu Filter > Unschärfe > Gaußsche Unschärfe und verwischen Sie die Vignettenebene. Retuschieren Sie die Vignette, um sicherzustellen, dass die Seiten vollständig schwarz und nicht durchsichtig sind. Reduzieren Sie anschließend die Opazität entsprechend. Ich habe meine auf 63% gesenkt

Schritt 8: Fügen Sie den Rahmen hinzu

Der letzte Teil ist das Hinzufügen des Rahmens. Ich habe mich dafür entschieden, ein altes Filmrollen-Aussehen hinzuzufügen, indem ich einen rechteckigen Umfang des Bildes erstelle und ihn mit einigen Zahlen, Buchstaben und Pfeilen aus einigen Filmmaterialien alter Filmrollen einbeziehe.

Sie können auch einige interessante zerrissene Effekte erstellen, indem Sie einige zerrissene Photoshop-Pinsel herunterladen und das Layermasken-Werkzeug verwenden.

... und so können Sie Filter im Instagram-Stil in Photoshop neu erstellen. Fahren wir nun mit der Erstellung mit CSS fort.


Übersetzen von Instagram-Filtern für das Web

Obwohl ich nicht sagen würde, dass die Neuerstellung der nativen Filter von Instagram in CSS derzeit möglich ist, gab es in letzter Zeit einige Einführungen in die Welt von CSS, die dies fast möglich machen. Durch Herumspielen mit diesen Eigenschaften ist es möglich, mit ein wenig Experimentieren ähnliche Effekte zu erzielen.

Ich werde Ihnen einige davon vorstellen, die Ihnen hoffentlich beim Einstieg und auf Ihrem Weg helfen werden.

Filter

Momentan unterstützen nur Webkit-basierte Browser diese Eigenschaft, obwohl sie mit etwas Glück bald in allen wichtigen modernen Browsern implementiert wird. Mit Filtern können Sie mithilfe von CSS jedem Bild Effekte im Photoshop-Stil hinzufügen. Die Filter sind wie folgt:

  • Unschärfe (Blur)
  • Graustufen
  • Sepia
  • Helligkeit
  • Sättigung
  • Farbton drehen
  • Kontrast
  • Umkehren (Invert)

Obwohl einer der oben genannten Effekte für diese Art von Dingen nützlich sein könnte, werde ich mir zwei ansehen, die beim Emulieren von Bildern im Instagram-Stil am effektivsten sind. Ausführliche Informationen zum Markup für die Verwendung dieser Eigenschaften finden Sie in diesem Blogbeitrag zu CSS3-Filtern.

Kontrast

Kontrast ist der Unterschied in Farbe und Licht zwischen Teilen eines Bildes. Wenn Sie dies erhöhen, kann dies häufig zu einem helleren und lebendigeren Bild führen, während das Verringern zu einem verblassten Bild führen kann.

Unschärfe

Der Unschärfefilter ist sehr praktisch, wenn Sie die Schärfentiefe in einem Bild wiederherstellen möchten. Überlagern Sie zwei Kopien desselben Bildes und fügen Sie dem Vordergrundbild eine Unschärfe von etwa 5 oder 6 Pixel hinzu. Wir können dann die CSS-Maskierung verwenden, um das Bit auszublenden, das wir stärker fokussieren möchten, indem wir das zugrunde liegende scharfe Bild aufdecken.

CSS-Maskierung

Mit der CSS-Maskierung können Sie ein anderes Grafikelement, eine andere Form oder eine andere Datei angeben, die als Beschneidungsbereich verwendet werden soll. In Verbindung mit dem Unschärfefilter können Sie einige wirklich interessante Tiefenschärfeeffekte erzielen.

Compositing

Im Jahr 2012 habe ich einen Tweet gesehen, in dem erwähnt wurde, wie großartig es wäre, wenn Sie Farbmodi im Photoshop-Stil mithilfe von CSS in Bilder implementieren könnten. Dank eines Vorschlags von Adobe ist dies möglicherweise bald möglich! Der Vorschlag bezieht sich auf 'CSS-Compositing' und wird als 'Mischen und Compositing für das Web' bezeichnet.

Es ist noch nicht in einem Browser implementiert, aber Adobe hat einen Beispielbrowser zusammengestellt, der es implementiert und es Ihnen ermöglicht, mit ihrem Vorschlag herumzuspielen. Weitere Informationen finden Sie unter Adobe Compositing. Mit diesen kommen alle bekannten Adobe-Mischmodi wie Bildschirm, Überlagerung und Multiplikation.

CSS-Gradienten

Mit CSS-Gradienten können Sie einige wirklich schöne Überlagerung -Töne für Ihr Foto im Instagram-Stil erstellen. Wenn Sie einen Gradient wie Gelb über Transparent bis Rosa verwenden und dann die Opazität ändern, kann dies manchmal zu einem schönen Farbton führen, der sich retro anfühlt und sich ähnlich wie beim Brennen von Filmen verhält.


Schlussfolgerung

Es scheint, als ob derzeit jeder Apps wie Instagram verwendet, um seinen Fotos Retro-Magie zu verleihen. Daran besteht kein Zweifel. Dadurch fühlen sich Ihre Fotos wärmer an und verleihen den ansonsten möglicherweise ziemlich langweiligen Bildern mehr Charakter.

Mit zunehmender Beliebtheit werden weitere Effekte und Filter eingeführt. Wenn Sie die grundlegenden Konzepte verstehen, wie diese Effekte erzielt werden, sollten Sie sie jetzt mit Photoshop für Ihre Website oder App erstellen können. Mit der Zeit sollte ich mir vorstellen, dass CSS eine ganze Reihe von Eigenschaften haben wird, mit denen wir Bilder auf ähnliche Weise bearbeiten können. Die gute Nachricht ist, dass Sie durch die Verwendung einiger der Eigenschaften, die ich heute erwähnt habe, mit einigen interessanten Effekten im Instagram-Stil herumspielen können.

Kennen Sie andere CSS-Eigenschaften, die für die Erstellung von Instagram-Effekten nützlich sein könnten? Lassen Sie es mich in den Kommentaren unten wissen!


Weitere Links, Lesen und Ressourcen

Advertisement
Advertisement
Advertisement
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.