In questo tutorial creeremo un bellissimo e effetto realistico bagliore al neon per il logo Adobe Photoshop. Esistono molti tutorial che coprono lo stesso scopo, ma questo differisce in due modi utili. Innanzitutto, non c'è nulla di superfluo qui. L'autore ovviamente ha provato più di un'opzione, ha scelto la migliore e ha descritto solo questa. In secondo luogo, vengono descritti tutti gli stili di livello che creano l'effetto e puoi capire quale livello serve a cosa. Questo aiuta molto a capire come lavorare con gli stili.

Risultato

Passo 1

Iniziamo creando un livello semplice e assegnandogli uno stile di livello con gradiente radiale. Le luci non dovrebbero essere troppo luminose. Nel nostro caso, questi sono #303e4a e #151515. Il realismo dell'effetto dipende da questo.

Passo 2

Utilizza la versione più semplificata del tuo logo. Idealmente queste dovrebbero essere linee morbide. A proposito, il realismo dell'opera dipende anche dal loro spessore.

Passaggio 3

Ora fai doppio clic sul livello del logo per assegnargli i seguenti stili di livello.

Iniziamo con la sovrapposizione dei colori. Utilizzo Colore bianco. Se hai notato, il centro stesso dei tubi al neon è sempre bianco. Questa è la parte più brillante, che è ciò che stiamo cercando di trasmettere.

Passaggio 4

Aggiungiamo uno stile Smusso e rilievo. Questo stile ci aiuterà a creare un effetto vetro. Questa non è la parte più importante, perché nei tubi al neon il vetro è praticamente invisibile, ma ci aiuterà a ottenere un effetto volume. Specificare i parametri come mostrato di seguito.

Passaggio 5

Aggiungi lo stile Ombra interiore. Qui selezioniamo il colore a cui vogliamo dare il nostro effetto neon. Nel nostro caso, è turchese brillante.

Passaggio 6

Lo stile Inner Glow ha lo stesso scopo. Grazie a questo stile otterremo una bellissima transizione tra i colori turchese e bianco.

Passaggio 7

Lo stile Bagliore esterno creerà un effetto luminoso. È responsabile del modo in cui la luce dei tubi al neon verrà sovrapposta allo sfondo e agli altri oggetti sotto il logo. Utilizziamo la dimensione più grande possibile e la modalità di fusione Sovrapponi, oltre alla stessa tonalità turchese.

Passaggio 8

Lo stile Ombre esterne creerà una transizione luminosa. Per fare ciò, utilizzare i metodi di fusione Luce vivida o Scherma colore. Nel nostro esempio, abbiamo applicato due stili di livello Ombre esterne contemporaneamente. Il primo funzionerà come un bagliore esterno e il secondo rifletterà la luce sullo sfondo. Sarà un po' più vicino o più lontano, a seconda dell'angolazione con cui desideri mostrare il logo.

Passaggio 9

Ecco cosa ti ritroverai:

Passaggio 10

Ora aggiungiamo una texture concreta allo sfondo. Questo lo scurirà un po'.

Passaggio 11

Puoi anche aggiungere alcuni piccoli elementi come fili o elementi di fissaggio. Non esagerare. Lascia che tutto sia il più semplice possibile.

Passaggio 12

Puoi collegare il filo ai tubi al neon utilizzando un elemento separato per creare l'impressione che il logo sia a una certa distanza dal muro. Nel nostro caso, è solo un rettangolo con i seguenti stili di livello.

Colori al neon... così luminosi, allegri, insoliti... allo stesso tempo fastidiosi e piacevoli per una persona. Sorprendentemente, sullo sfondo degli standard del web design, i maestri li usano ancora in diverse combinazioni e variazioni nei loro progetti. Tuttavia, è difficile lavorare con i colori neon senza influenzare il design complessivo. Sì, sono ottimi per loghi, icone, elementi dell'interfaccia utente nelle applicazioni, su poster, opere d'arte, ma il web design diventa difficile se non si comprendono i problemi e le caratteristiche principali.

Oggi cercheremo opzioni per utilizzare in modo efficace il neon (come effetto e come colore) nel web design, vedremo esempi di webmaster che hanno ricevuto gli Awwwards e Css Design Awards e impareremo come Photoshop può aiutare quando si lavora con i colori al neon.

In generale, proviamo a diventare ninja al neon!

Ombra di lime

Il verde lime è un brillante rappresentante del colore neon (senza l'effetto corrispondente), la cui tonalità è giallo-verdastra, ma non ancora verde chiaro.

Codice esadecimale: #32cd32

La particolarità del colore è che abbinato ad uno sfondo scuro si ottiene un vero e proprio effetto neon. Sembra divertente e può attirare visitatori sul sito. Questo è il modo più semplice per aggiungere neon al tuo web design senza appesantire l'intero progetto. Come esempi meteo, limegreencreative, QQ Browser (per Mac), newKIS, Craftedbygc, Nvidia. Tutti, in un modo o nell'altro, utilizzano una combinazione di sfondi verde brillante e scuro, ma l'effetto è bellissimo e persino collaudato nel tempo.

arcobaleno al neon

Sebbene molti colori possano stare insieme e li usiamo ogni giorno, i colori neon non riescono a creare un aspetto generale. combinazione di colori. Il fatto è che la maggior parte dei colori al neon hanno gli stessi valori di saturazione e luminosità, quindi si fondono sullo schermo e sembrano uguali. Di conseguenza, ci sono problemi con la leggibilità e il contrasto generale. Questo è il motivo per cui i webmaster utilizzano un colore neon, ma su uno sfondo di una tonalità “semplice” e circondato da toni tenui.

Decisioni coraggiose

Usare un colore neon come sfondo in modalità a schermo intero è audace. Sii coraggioso. Ma questa non è una tecnica che può essere vista su un sito su due, anche se per opere originali o variazioni, la competizione e la divisione dello spazio tra più colori in termini di saturazione è naturale.

Fai solo attenzione a mantenere tutti gli altri elementi minimi sullo schermo. Non è necessario dipingere ulteriormente i pulsanti colore brillante o creare testo da arshins. Minimalismo, design piatto, tipografia semplice, carattere rigoroso e colori al neon creeranno un design molto più stilistico, rigoroso ed elegante.

Dai un'occhiata più da vicino f37fonderia, Funplex, Langlois, Glow Motion, NOEIN OI. Utilizza colori accoppiati, un riempimento a colore singolo o una sfumatura al neon.

Neon e bianco

I colori neon e il bianco non si mescolano mai, poiché gli elementi neon su sfondo bianco sono praticamente “illeggibili”. Molti colori al neon utilizzano il bianco per la loro luminosità, quindi lo schermo creerà qualcosa come sovraesposizione e sovraesposizione. In poche parole: l'effetto neon è l'effetto di un bagliore bianco, e su uno sfondo bianco tutto si fonde.

Marchio al neon

Alcune aziende utilizzano le tonalità neon come colori principali del proprio marchio. Per esempio, Nvidia- verde intenso (lime) combinato con il nero, AMD- nero, bianco e rosso intenso brillante, Devillard- giallo intenso + nero, MTN DEW x NBA- verde neon in combinazione con sfumature sbiadite. In questo caso, creare un web design è molto più semplice, perché i neon dovrebbero essere presenti, ma in piccole quantità.

Non rinunciare a questo colore. Al contrario, è conveniente per lui trovare coppie e presentare la loro combinazione in primo piano, mentre lo sfondo le ombreggerà e le enfatizzerà. Non è necessario riempire l'intero sfondo con neon marchiato; è sufficiente creare accenti sugli elementi con questo colore.

Oltre gli effetti

Il neon stesso offre già incredibili possibilità di design e immaginazione. Non dovresti usare tutti i tipi di effetti (animazione, 3D, parallasse, ecc.) insieme al neon. Alla fine, rischi di portare gli utenti, i clienti e anche te stesso all'indignazione e allo sconforto. All'inizio tutto sembrerà fantastico, ma poi i tuoi occhi si stancheranno di guardare tutto.

Nel frattempo, bisogna rendere omaggio alla sottigliezza dell'abilità quando vengono utilizzati gli effetti, ma in quantità tali e così impercettibilmente da essere quasi invisibili.

Progetto realizzatodagc ha creato un'animazione della lettera G quando il cursore del mouse la colpisce. Anche i pulsanti, le cornici, ecc. sono evidenziati in questa tonalità neon. Ma tutto questo è quasi invisibile e quindi sembra bellissimo.

Creazione di un bagliore al neon

Effetto neon o bagliore non una novità al mondo. Questo è semplicemente il colore luminoso che si vede così spesso sui segnali notturni. Quando si lavora sul realismo dell'effetto in Photoshop, sembra che le sfumature e il colore brillino, come se il colore bianco li attraversasse effettivamente. È importante non impazzire e non esagerare con il bagliore, altrimenti risulterà completamente insipido, quando solo un piccolo bagliore può trasformare un web design.

Un'altra opzione è l'animazione, che creerà un leggero bagliore di un determinato elemento quando il cursore si sposta. Ciò consentirà agli utenti di mantenere la loro attenzione sull'oggetto.

I colori al neon sono un modo per ravvivare un sito nel suo insieme e persino “sollevare” gli elementi, creando così un effetto di profondità e stratificazione. Con questa opzione, il neon non dovrebbe sopprimere i colori primari nella tavolozza del disegno. L'essenza del neon non è la saturazione in quanto tale, ma la luminosità. Può essere rosa pallido o giallo brillante.

Molti ancora esempi interessanti utilizzare il neon nel web design: We Craft Apps, Zaha Hadid, DERIVE, Sidewalk Labs, creativecats, adattabile, DDD2017, bigomaha, ReNa. Sono successe molte cose, ma su ognuna di esse tutto è diverso e molto bello.

Noi usiamoPhotoshop

La cosa più semplice per cui può essere richiesto un effetto neon è lo sfondo. Diciamo che creiamo uno sfondo scuro, utilizziamo testo contrastante e desideriamo applicare un motivo o una trama allo sfondo invece di un riempimento normale. Usando il colore neon puoi creare bagliori rari e piccoli, contorni di onde ed elementi vegetali. Allo stesso tempo, puoi renderli scuri o leggermente colorati e il risultato sarà molto bello. Esistono già analoghi a questo negli esempi sopra. Inoltre, se è disponibile uno sfondo illustrato per un sito architettonico, un diagramma dell'edificio e dell'area circostante, alcuni oggetti possono essere illuminati utilizzando il neon.

Le idee sono tante, ma diamo un'occhiata.

Abbiamo preso un campione di design (molti lo conoscono già) e qui il logo e le cornici dei pulsanti hanno un effetto neon. Le cornici sono realizzate per analogia con quanto mostreremo. Ora aggiungiamo qualcosa di interessante allo sfondo dell'intestazione... Il nostro logo utilizza due tonalità chiare: #49A3CC e #53C3BF. Li useremo.

Crea un livello e riempilo nel colore giusto o un gradiente e crea un altro livello trasparente vuoto sopra. Lo sfondo è necessario per comodità; non lo copieremo nemmeno in seguito.

Scegliere Piuma, posiziona un punto, poi il secondo e, senza rilasciare il LMB, inizia a spostare il cursore. Appare la curvatura. Muovendo il mouse regoliamo e rilasciamo. Mettiamo un altro punto e lo spostiamo anche un po'. Quando finisci la linea (qualunque cosa tu voglia), seleziona uno strumento Aggiungere un punto di riferimento (nello stesso Pero) e utilizzare il cursore per fare clic delicatamente sui punti e spostarli, allineando così il contorno.

Andiamo allo strumento Spazzola, selezioniamo quello appropriato, in modo che la nostra linea sembri un tratto leggero. Tuttavia, puoi ottenere un altro effetto. La dimensione del pennello dovrebbe essere piccola, perché in questo caso il bagliore aggiungerà comunque la larghezza desiderata.

Abbiamo preparato il pennello e passiamo di nuovo a Piuma. Crea un altro livello (vuoto) e, facendo clic con il pulsante destro del mouse con la penna sul contorno, seleziona Traccia il contorno. Nella finestra di dialogo indichiamo simulazione della spazzola e della pressione. Altrimenti, l'effetto sbattimento non funzionerà. Pennello colore dentro in questo caso per niente importante. Qui ne abbiamo uno giallo. Successivamente, fare nuovamente clic con il pulsante destro del mouse sulla linea e Rimozione del contorno.

Ora tutto ciò che resta da aggiungere a questo capolavoro è il bagliore Glow.

IN Finestra dei livelli Fai clic con il pulsante destro del mouse su questo secondo livello con la linea e seleziona Opzioni di fusione. E iniziamo a fantasticare.

Il nostro compito è configurare Bagliore esterno utilizzando la tonalità più chiara del logo. Questo è #53C3BF con modalità Schermo e bassa opacità.

Quindi usiamo Ombra interiore con tonalità di colore e il secondo colore del logo #49A3CC. Puoi anche selezionare la modalità Colore come sovrapposizione.

Ora non resta che fare qualche leggera colorazione, altrimenti risulterà troppo brillante e l'effetto non è ancora realistico. Scegliere Sovrapposizione di colori e prendi il verde scuro nel nostro caso. Per quanto riguarda la modalità di fusione, gioca! Sarà divertente!

Pronto. Copiamo quest'ultimo livello con una linea nel nostro progetto principale e, ad esempio, allunghiamolo su tutto lo sfondo (rettangolo) o enfatizziamo con esso la linea del menu e del logo. Sembra piuttosto buono. E sì, è facile. Non importa quanto possano sembrare complessi i colori al neon, crearli è molto semplice. Puoi anche usare i colori del progetto e rendere la linea un po' più luminosa, puoi disattivare i toni, rendere la linea più sottile... Ci sono molte variazioni.

In questo modo semplice puoi evidenziare qualsiasi elemento, parte dell'immagine di sfondo o creare decorazioni. E, naturalmente, esercita la tua immaginazione!

conclusioni

Moderno effetti al neon hanno poco in comune con i neon degli anni 80, pur essendo da esso originati. Ora è importante selezionare il neon che funzionerà in modo efficace design moderno, minimalismo, colori calmi. Allo stesso tempo, il neon dovrebbe evidenziare la cosa principale sul sito, informare il visitatore che troverà informazioni simili qui dietro questo pulsante.

I colori al neon possono essere molto divertenti e molto tranquilli allo stesso tempo, anche impercettibili. La cosa principale è la combinazione con la tavolozza generale e il tema del progetto. Solo allora potrai ottenere un felice completamento del progetto.

Il neon viene utilizzato in tempi moderni e molto, molto spesso, anche da marchi famosi. Basta vederlo e capire: dove e come.

La fotografia di moda alla luce del neon ha guadagnato una rinnovata popolarità dopo il video “Pink Wine” di Feduk ed Eldzhey. Dopotutto, il loro video è letteralmente intessuto di elementi di stile: grattacieli malesi, vestiti costosi, cibo di strada, bellissime ragazze asiatiche, lenti bianche e luci al neon. Mezzi sociali C'era la mania di scattare foto con un'illuminazione insolita. Vediamo come ripetere un effetto simile a casa.

Metodo 1

Per creare una foto alla luce del neon, avrai bisogno di un normale monitor. Potrebbe trattarsi del display di un computer desktop, dello schermo di un laptop o di un tablet. Si consiglia di scattare le foto al buio, in modo che l'unica fonte di luce sia il monitor.

Per il gradiente avrai bisogno di due display qualsiasi. Devono essere posizionati su entrambi i lati, su ognuno dei quali sarà aperta un'immagine con colori diversi.

Metodo 2

Per creare una foto alla luce al neon nella seconda opzione di cui abbiamo bisogno lampada da scrivania(preferibilmente con il gambo lungo) e una vecchia maglietta/straccio del colore con cui vuoi illuminare la tua foto.

Come scattare una foto alla luce del neon:

1. Lega il tessuto alla lampada.
2. Posiziona la lampada sul tuo lato in modo che non sia visibile nella cornice.
3. Accendi la lampada.
4. Godetevi l'illuminazione al neon.
5. Puoi impostare la fotocamera su un timer o chiedere a qualcuno di scattarti una foto nella completa oscurità.

Se vuoi creare una sfumatura di luce al neon, equipaggia una seconda lampada, avvolgila in un tessuto di un tono diverso e posizionala dall'altra parte di te.

Metodo 3

Le foto alla luce al neon possono essere realizzate utilizzando i materiali disponibili. Cosa ti servirà:

• lampada (preferibilmente come in foto)
• nastro adesivo largo
• pennarello o pennarello indelebile.

Come realizzare uno sfondo fotografico al neon:

1. Coprire l'intera lunghezza della lampada con del nastro adesivo.
2. Dipingi sopra lo strato con un pennarello in 1-2 strati.
3. Copri nuovamente la lampada con del nastro adesivo.
4. E ancora colora lo spazio con un pennarello colorato.
5. L'illuminazione al neon è pronta! Accendiamo la lampada e scattiamo foto!

Bene, diamo un'occhiata a quello imperituro. È così bello qui...

Sii il più elegante! Usa effetti super.