Neoneffekt in Adobe Photoshop. Funktionen von Neonfarben im Webdesign und der Erstellung in Photoshop

Neonfarben ... so grell, lustig, ungewöhnlich ... nervig und angenehm zugleich. Überraschenderweise werden sie vor dem Hintergrund der Webdesign-Standards immer noch von Meistern verwendet verschiedene Kombinationen und Variationen in ihren Projekten. Es ist jedoch schwierig, mit Neonfarben zu arbeiten, ohne das Design als Ganzes zu beeinträchtigen. Ja, sie eignen sich hervorragend für Logos, Symbole, Benutzeroberflächenelemente in Anwendungen, Poster, Kunst, aber Webdesign wird schwierig, wenn Sie die Hauptprobleme und -funktionen nicht verstehen.

Heute werden wir nach Optionen suchen effektiver Einsatz Neon (als Effekt und als Farbe) im Webdesign, sehen Sie sich Beispiele von Webmastern an, die mit Awwwards und den CSS Design Awards ausgezeichnet wurden, und sehen Sie, wie Photoshop bei Neonfarben helfen kann.

Lassen Sie uns im Allgemeinen versuchen, zu werden Neon-Ninjas!

Limettenschatten

Lindgrün ist ein leuchtender Vertreter einer Neonfarbe (ohne entsprechenden Effekt), deren Farbton gelbgrünlich, aber noch nicht hellgrün ist.

Hex-Code: #32cd32

Die Besonderheit der Farbe besteht darin, dass in Kombination mit einem dunklen Hintergrund ein echter Neoneffekt erzielt wird. Es sieht lustig aus und kann Besucher auf die Website locken. Dies ist der einfachste Weg, Ihrem Webdesign Neon hinzuzufügen, ohne das gesamte Projekt zu belasten. Als Beispiele Wetter , limegreencreative , QQ Browser (für Mac), newKIS , Craftedbygc , Nvidia. Alle von ihnen verwenden bis zu einem gewissen Grad Kombinationen aus hellgrünen und dunklen Hintergründen, aber der Effekt ist schön und sogar erprobt.

Neon-Regenbogen

Während viele Farben miteinander kombinierbar sind und wir sie täglich verwenden, schaffen Neonfarben keine Gemeinsamkeiten Farbschema. Tatsache ist, dass die meisten Neonfarben die gleichen Sättigungs- und Helligkeitswerte haben und daher auf dem Bildschirm verschmelzen und gleich aussehen. Dementsprechend gibt es Probleme mit der Lesbarkeit und dem Gesamtkontrast. Aus diesem Grund verwenden Webmaster eine Neonfarbe, aber vor einem Hintergrund mit einer „einfacheren“ Schattierung und umgeben von gedämpften Tönen.

Mutige Entscheidungen

Die Verwendung einer Neonfarbe als Hintergrund im Vollbildmodus ist ein mutiger Schritt. Einfach mutig. Dies ist jedoch nicht die Technik, die auf jeder zweiten Website zu sehen ist, obwohl sie für Autorenwerke oder Variationen des Wettbewerbs und der Aufteilung des Raums zwischen mehreren Farben gemäß der Sättigung natürlich ist.

Achten Sie nur darauf, alle anderen Elemente auf dem Bildschirm auf ein Minimum zu beschränken. Es ist nicht nötig, die Buttons noch mehr einzufärben grelle Farbe oder erstellen Sie Text mit Arshins. Minimalismus, flaches Design, schlichte Typografie, strenge Schrift und Neonfarbe schaffen noch viel mehr stilistische Gestaltung, streng, anmutig.

Schau genauer hin f37foundry , Funplex , Langlois , Glow Motion , NOEIN OI. Es verwendet gepaarte Farben, eine einzelne Farbfüllung oder einen Neonverlauf.

neon und weiß

Neonfarben und Weiß mischen sich nie, denn Neonelemente auf weißem Hintergrund sind fast „unlesbar“. Viele Neonfarben verwenden Weiß für ihre Leuchtkraft, sodass eine Art Überbelichtung und Überbelichtung auf dem Bildschirm entsteht. Einfach ausgedrückt: Die Wirkung von Neon ist die Wirkung von leuchtendem Weiß, und auf einem weißen Hintergrund verschmilzt alles.

Neon-Branding

Einige Unternehmen verwenden Neonfarben als Hauptfarben ihrer Marke. Zum Beispiel, NVIDIA- sattes Grün (Lime) in Kombination mit Schwarz, AMD- schwarz, weiß und knallrot, Devillard- sattes Gelb + Schwarz, MTN DEW x NBA- grünes Neon in Kombination mit verblassten Farbtönen. In diesem Fall ist das Erstellen eines Webdesigns viel einfacher, da Neon vorhanden sein sollte, jedoch in geringer Menge.

Lassen Sie sich diese Farbe nicht entgehen. Im Gegenteil, wo es für ihn bequem ist, Paare zu finden und ihre Kombination weiter zu präsentieren Vordergrund wenn sie als Hintergrund schattiert und hervorgehoben werden. Es ist nicht notwendig, den gesamten Hintergrund mit Marken-Neon zu füllen, es reicht aus, mit dieser Farbe Akzente auf den Elementen zu setzen.

Keine Effekte

Neon bietet an sich bereits erstaunliche Möglichkeiten für Design und Fantasie. Sie sollten nicht alle möglichen Effekte (Animation, 3D, Parallaxe usw.) zusammen mit Neon verwenden. Am Ende laufen Sie Gefahr, Benutzer, Kunden und sogar sich selbst in Empörung und Depression zu versetzen: Zuerst scheint alles in Ordnung zu sein, und dann werden Ihre Augen müde, alles zu sehen.

Derweil muss man den Feinheiten des Könnens Tribut zollen, wenn die Effekte eingesetzt werden, aber in einer solchen Menge und so unmerklich, dass sie fast unsichtbar sind.

Projekt craftedbygc erstellte eine Animation des Buchstabens G, wenn der Mauszeiger darauf trifft. Knöpfe, Rahmen und mehr werden mit diesem Neonfarbton hervorgehoben. Aber all dies ist fast nicht wahrnehmbar und sieht daher schön aus.

Erstellen Sie ein Neonlicht

Neoneffekt oder Glow nicht neu auf der Welt. Es ist nur die leuchtende Farbe, die Sie nachts so oft auf Schildern sehen. Wenn Sie in Photoshop an dem realistischen Effekt arbeiten, scheinen die Schattierungen und Farben zu leuchten, als ob sie wirklich durch sie hindurchgehen weiße Farbe. Wichtig ist, sich nicht verrückt zu machen und es mit dem Glow nicht zu übertreiben, sonst entpuppt es sich als purer schlechter Geschmack, wenn ein ganz kleiner Glow ein Webdesign verändern kann.

Eine weitere Option ist eine Animation, die beim Bewegen des Cursors ein leichtes Leuchten eines bestimmten Elements erzeugt. Dadurch können Benutzer ihre Aufmerksamkeit auf das Objekt richten.

Neonfarben sind Möglichkeiten, die Website als Ganzes zum Leben zu erwecken und sogar Elemente zu „heben“, wodurch ein Effekt von Tiefe und Schichtung entsteht. Bei dieser Option sollte Neon die Primärfarben in der Designpalette nicht überwältigen. Die Essenz von Neon ist nicht die Sättigung als solche, sondern das Leuchten. Es kann sowohl blassrosa als auch leuchtend gelb sein.

Mehrere noch interessante Beispiele Verwendung von Neon im Webdesign: We Craft Apps, Zaha Hadid, DERIVE, Sidewalk Labs, creativecats, adaptable, DDD2017, bigomaha, ReNa. Es ist viel passiert, aber auf jedem ist alles anders und sehr schön.

Wir gebrauchenPhotoshop

Der einfachste Ort, an dem ein Neoneffekt erforderlich sein kann, ist der Hintergrund. Angenommen, wir erstellen einen dunklen Hintergrund, verwenden kontrastierenden Text und möchten ein Muster oder eine Textur anstelle einer normalen Füllung für den Hintergrund verwenden. Mit Neonfarbe können Sie seltene und kleine Blitze, Wellenränder und Pflanzenelemente erstellen. Gleichzeitig können Sie sie dunkler oder dann leicht getönt machen und es wird sehr schön werden. In den obigen Beispielen gibt es bereits Analogien dazu. Gerade wenn es einen bebilderten Hintergrund für einen architektonischen Ort gibt, ein Schema des Gebäudes und der Umgebung, dann lassen sich manche Objekte mit Neon beleuchten.

Es gibt viele Ideen, aber mal sehen.

Wir haben ein Musterdesign genommen (viele von euch kennen es bereits) und hier haben Logo und Buttonumrandung einen Neoneffekt. Rahmen werden analog zu dem, was wir zeigen werden, hergestellt. Lassen Sie uns nun etwas Interessantes zum Hintergrund der Kopfzeile hinzufügen ... Unser Logo verwendet zwei helle Farbtöne: #49A3CC und #53C3BF. Wir werden sie nutzen.

Erstellen Sie eine Ebene, füllen Sie gewünschte Farbe oder Farbverlauf und erstellen Sie darüber eine weitere leere transparente Ebene. Der Hintergrund wird aus praktischen Gründen benötigt, wir werden ihn später nicht einmal kopieren.

Wählen Feder, setzen Sie einen Punkt, dann den zweiten und beginnen Sie, ohne die linke Maustaste loszulassen, den Cursor zu bewegen. Krümmung erscheint. Bewegen Sie die Maus zum Anpassen und Loslassen. Wir setzen noch einen Punkt und bewegen uns auch ein wenig. Wenn Sie die Linie ans Ende bringen (was immer Sie wollen), wählen Sie das Werkzeug aus Hinzufügen Anhaltspunkt(in derselben PerÜber) und mit dem Cursor sanft auf die Punkte klicken und sie verschieben, wodurch die Kontur ausgerichtet wird.

Kommen wir zum Werkzeug Bürste, wählen wir das passende aus, sodass unsere Linie wie ein leichter Strich aussieht. Sie können sich jedoch einen anderen Effekt vorstellen. Die Pinselgröße sollte klein sein, da das Glühen dann immer noch die gewünschte Breite hinzufügt.

Wir bereiten einen Pinsel vor und gehen wieder zu Feder. Erstellen Sie eine weitere Ebene (leer) und wählen Sie sie aus, indem Sie mit dem Stiftwerkzeug auf die RMB-Umrisslinie klicken Streiche den Weg. Geben Sie im Dialogfeld an Bürsten- und Drucksimulation. Andernfalls funktioniert der Wischeffekt nicht. Pinselfarbe hinein dieser Fall völlig unwichtig. Hier haben wir das gelbe. Klicken Sie danach erneut mit der rechten Maustaste auf die Zeile und Löschen Sie die Gliederung.

Jetzt bleibt es, diesem Meisterwerk das Glow-Glühen hinzuzufügen.

BEI Ebenenfenster Klicken Sie mit der rechten Maustaste auf diese zweite Ebene mit einer Linie und wählen Sie sie aus Overlay-Optionen. Und wir fangen an zu phantasieren.

Unsere Aufgabe ist es, zu setzen Äußeres Leuchten Verwenden Sie den hellsten Farbton im Logo. Es ist #53C3BF, wobei der Bildschirmmodus auf eine kleine Deckkraft eingestellt ist.

Dann verwenden wir innerer Schatten mit Farbton und die zweite Farbe vom Logo #49A3CC. Sie können auch den Farbmodus als Overlay auswählen.

Jetzt bleibt noch eine leichte Tönung, sonst wird es zu hell und der Effekt ist noch nicht realistisch. Wählen Farbüberlagerung und nimm in unserem Fall dunkelgrün. Was den Mischmodus betrifft - spielen Sie herum! Es wird Spaß machen!

Bereit. Kopieren wir diese letzte einzelne Ebene mit der Linie in unser Hauptprojekt und strecken sie beispielsweise auf den gesamten Hintergrund (Rechteck) oder betonen damit die Menü- und Logolinie. Sieht ziemlich fies aus. Und ja, es ist einfach. Egal wie komplex Neonfarben erscheinen mögen, das Erstellen ist sehr einfach. Sie können sogar die Farben des Projekts verwenden und die Linie etwas heller machen, Sie können die Töne stummschalten, die Linie dünner machen ... Es gibt viele Variationen.

Auf so einfache Weise können Sie jedes Element, einen Teil des Hintergrundbilds, hervorheben und ein Dekor erstellen. Und lassen Sie natürlich Ihrer Fantasie freien Lauf!

Ergebnisse

Moderne Neoneffekte haben wenig mit dem Neon der 80er gemein, obwohl sie daraus entstanden sind. Jetzt ist es wichtig, das Neon zu wählen, das wann effektiv funktioniert modernes Design, Minimalismus, Ruhe der Farben. Gleichzeitig soll Neon das Wesentliche auf der Seite hervorheben, den Besucher darüber informieren, dass er hier hinter diesem Button ähnliche Informationen findet.

Neonfarben können sehr fröhlich und sehr ruhig zugleich sein, sogar unauffällig. Die Hauptsache ist eine Kombination mit der allgemeinen Palette und dem Thema des Projekts. Nur dann können Sie ein Happy End für das Projekt bekommen.

Neon wird in der Neuzeit verwendet und das sehr, sehr oft sogar bekannte Marken. Es muss nur gesehen und verstanden werden: wo und wie.

In diesem Tutorial erstellen wir einen sehr schönen und realistischen Neon-Glow-Effekt für ein Logo in Adobe Photoshop. Es gibt viele Tutorials, die demselben Ziel gewidmet sind, aber dieses hier unterscheidet sich in zwei wichtigen Punkten. Erstens ist hier nichts überflüssig. Der Autor hat offensichtlich mehr als eine Option ausprobiert, die beste ausgewählt und nur diese beschrieben. Zweitens werden alle Ebenenstile beschrieben, die den Effekt erzeugen, und Sie können verstehen, welche Ebene wofür verwendet wird. Es hilft sehr, zu verstehen, wie man mit Stilen arbeitet.

Ergebnis

Schritt 1

Beginnen wir mit dem Erstellen einer einfachen Ebene, für die wir einen Ebenenstil mit einem radialen Farbverlauf angeben. Lichter sollten nicht zu hell sein. In unserem Fall sind dies #303e4a und #151515. Der Realismus des Effekts hängt davon ab.

Schritt 2

Verwenden Sie die einfachste Version Ihres Logos. Idealerweise sollten dies glatte Linien sein. Der Realismus der Arbeit hängt übrigens auch von ihrer Dicke ab.

Schritt 3

Doppelklicken Sie nun auf die Logoebene, um ihr die folgenden Ebenenstile zu geben.

Beginnen wir mit der Farbüberlagerung. Weiß verwenden. Wie Sie sehen, ist die Mitte der Neonröhren immer weiß. Dies ist der hellste Teil, und wir versuchen, ihn zu vermitteln.

Schritt 4

Lassen Sie uns einen Bevel & Emboss-Stil hinzufügen. Dieser Stil hilft uns, den Glaseffekt zu erzeugen. Es ist nicht das meiste Hauptteil, weil Glas in Neonpfeifen fast unsichtbar ist, aber dies hilft uns, die Wirkung von Volumen zu erzielen. Geben Sie die Parameter wie unten gezeigt an.

Schritt 5

Stil hinzufügen Innerer Schatten / Innerer Schatten. Hier wählen wir die Farbe aus, die wir unserem geben möchten Neon-Effekt. In unserem Fall ist es ein leuchtendes Türkis.

Schritt 6

Der Inner Glow-Stil dient demselben Zweck. Dank dieses Stils erhalten wir einen schönen Übergang zwischen türkisfarbenen und weißen Farben.

Schritt 7

Style Outer Glow / External glow erzeugt einen Glow-Effekt. Er ist dafür verantwortlich, wie das Licht der Neonröhren den Hintergrund und andere Objekte unter dem Logo überlagert. Wir machen das Beste daraus mögliche Größe und Mischmodus Überlagerung / Überlappung sowie den gleichen türkisfarbenen Farbton.

Schritt 8

Der Stil „Schlagschatten“ erzeugt einen leuchtenden Übergang. Verwenden Sie dazu die Mischmodi Vivid Light / Bright light oder Color Dodge / Lighten the basics. In unserem Beispiel haben wir zwei Schlagschatten-Ebenenstile gleichzeitig angewendet. Der erste wirkt als äußeres Leuchten und der zweite reflektiert das Licht auf den Hintergrund. Es wird etwas näher oder weiter sein, je nachdem, aus welchem Winkel Sie das Logo zeigen möchten.

Schritt 9

Folgendes passiert am Ende:

Schritt 10

Lassen Sie uns nun dem Hintergrund eine konkrete Textur hinzufügen. Dadurch wird es etwas dunkler.

Schritt 11

Sie können auch ein paar kleine Gegenstände wie Drähte oder Befestigungselemente hinzufügen. Übertreiben Sie es nicht. Lass alles so einfach wie möglich sein.

Schritt 12

Sie können den Draht mit Neonröhren verbinden individuelles Element um den Eindruck zu erwecken, dass das Logo in einiger Entfernung von der Wand steht. In unserem Fall ist es nur ein Rechteck mit den folgenden Ebenenstilen.

Modefotografie im Neonlicht erlangte nach dem Clip von Feduk und Aljay „Rose Wine“ eine zweite Popularitätswelle. Schließlich ist ihr Video buchstäblich aus stylischen Chips gewebt: malaysische Wolkenkratzer, teure Klamotten, Straßenessen, schöne asiatische Frauen, weiße Linsen und Neonlichter. Soziale Netzwerke hat den Bilderwahn mit ungewöhnlichen Lichtverhältnissen eingefangen. Mal sehen, wie man diesen Effekt zu Hause reproduziert.

Methode 1

Um ein Foto im Neonlicht zu erstellen, benötigen Sie einen normalen Monitor. Dies kann ein Desktop-Display, ein Laptop-Bildschirm oder ein Tablet sein. Es wird empfohlen, im Dunkeln zu fotografieren, damit der Monitor die einzige Lichtquelle ist.

Für den Farbverlauf benötigen Sie zwei beliebige Displays. Sie müssen auf beiden Seiten von Ihnen platziert werden, von denen jede ein Bild mit unterschiedlichen Farben öffnet.

Methode 2

Um in der zweiten Option ein Foto im Neonlicht zu erstellen, benötigen wir Leselampe(vorzugsweise mit langem Stiel) und ein altes T-Shirt/Tuch in der Farbe, in der Sie Ihre Aufnahme aufhellen möchten.

So machen Sie ein Foto bei Neonlicht:

Binden Sie den Stoff an die Lampe.
Legen Sie die Lampe auf Ihre Seite, sodass sie im Rahmen nicht sichtbar ist.
Schalte die Lampe ein.
Genießen Sie die Neonlichter.
Sie können die Kamera auf einen Timer stellen oder jemanden bitten, ein Foto von Ihnen in völliger Dunkelheit zu machen.

Wenn Sie einen Neonlichtverlauf erstellen möchten, rüsten Sie die zweite Lampe aus, wickeln Sie sie in einen Stoff mit einem anderen Ton und platzieren Sie sie auf der anderen Seite von Ihnen.