Crea un effetto di testo al neon incandescente

Sep 12, 2025
Come si fa

Spesso, sono gli effetti più semplici che sembrano più sorprendenti e il testo al neon è uno di questi progetti. È anche molto più facile creare un effetto al neon che sembra realistico di quanto tu possa pensare. Mentre questo intero tutorial utilizza solo un'immagine di sfondo, il tuo cervello si inganna nel vedendo questo come un segno neon reale e funzionante - questo è il potere di Photoshop cc. 's stili di livello. Scopri di più sul cose incredibili che puoi fare con i livelli di Photoshop qui .

Il fatto che questo intero progetto sia costruito da zero - dal carattere ai colori del bagliore, all'eventuale animazione - significa che c'è molta portata per la creatività. Puoi scegliere esattamente quello che vuoi ogni parte di questo effetto da assomigliare.

Neon continua ad essere popolare. Mostrando i toni saturi contro uno sfondo scuro e smorzato è un ottimo modo per presentare a pagina di destinazione , A. design del logo o un'intestazione, ed è facile animare il tuo lavoro e salvarlo come GIF con una dimensione del file basso (mantieni i tuoi file al sicuro deposito cloud. ). Immergiti su come crearlo.

Creare un font da visualizzare su un nuovo sito web? Avete bisogno di un Builder del sito web ed eccellente web hosting .

01. Inizia a creare il carattere

Use Photoshop's Pen tool to draw the letter 'a'

Usa lo strumento Penna di Photoshop per disegnare la tua prima lettera

Creare un nuovo documento 550x550px in Photoshop e alza la griglia colpendo cmd / ctrl + ' . Crea un nuovo livello e con lo strumento Penna, abbozzo la tua prima lettera. Lasciare lacune nel personaggio, poiché questo sarà un tipografo in stile neon. Una volta che sei felice, premi il tratto all'interno della scheda dei percorsi per disegnare la lettera.

02. Lavorare attraverso l'alfabeto

dollar and pounds signs in Photoshop

Non dimenticare i personaggi speciali

Crea tutti i personaggi che vuoi, con la penna su un nuovo strato ogni volta. Se si desidera, aggiungere alcuni caratteri speciali, come simboli di valuta, punteggiatura e lettere accentuate. Segui lo stesso stile di base con cui hai iniziato, quindi il tuo carattere è coesivo.

03. Sposta in FontCreator

fontcreator trial

C'è una prova gratuita di FontCreator disponibile se ne hai bisogno

Se hai FontCreator ad alta logica , questa è la parte in cui è possibile trasformare i tuoi personaggi in un font. Se non lo fai, è disponibile una prova gratuita. Incollando ogni personaggio in FontCreator, possiamo creare un titolare utilizzabile per Photoshop.

Lavorare attraverso il FontCreator facendo doppio clic su ogni personaggio e incollando il tuo lavoro disegnato a penna. Assicurati che ogni lettera sia sulla stessa linea di base.

04. Kern il tuo testo

check your kerning

Controlla sempre il tuo Kerning

Kerning è lo spazio tra ciascuna delle lettere (per ulteriori informazioni, dai un'occhiata al nostro Glossario tipografico ), e l'opzione Auto-Kerning all'interno di FontCreator spazia naturalmente le tue lettere in modo che il carattere sia ordinato. Prova questa opzione e assicurati che ogni lettera sia buona insieme.

Una volta completato, esporta il tuo carattere e installalo nel tuo computer. Questo lo aggiungerà automaticamente a Photoshop cc.

05. Configurare un documento Photoshop

photoshop document palette

Usa la nostra tavolozza suggerita o crea la tua

Creare un nuovo documento in Photoshop. Su un nuovo livello, creare una tavolozza dei colori usando un grande pennello. Siamo andati con # 501d26, # AF273D, # F74663, # FFDAE1, # 35E985 e # B2DCC4.

Quindi trova un'immagine di sfondo adatta e trascinalo in Photoshop. Creare un nuovo livello, riempilo il colore rosso profondo e duplicati. Imposta uno strato per moltiplicare e uno a colori. Creare uno strato di luminosità / contrasto e impostato su -75 nella luminosità. Duplica questo e mascherare il centro per una vignetta.

06. Inserire il testo

default text in Photoshop

Digita un po 'di testo e rasterizzarlo

Prendi lo strumento Tipo e seleziona il tuo carattere (se non hai creato un font in precedenza, basta posizionare in ogni lettera singolarmente). Spiega il tuo testo, prima Ctrl + clic con il pulsante destro del mouse il livello e la selezione del tipo rasterizza.

07. Crea un bagliore

add a bevel in Photoshop

Dai al tuo testo un po 'più di profondità con un delizioso smusso

Ctrl + clic con il tasto destro del mouse lo strato e vai alle opzioni di fusione e GT; Bagliore esterno. Lì, immettere un'opacità del 50%, una diffusione del 5% e una dimensione di 63 px. Ora, puoi vedere il tuo testo al neon che inizia a guardare molto più realistico. Scegli un colore brillante.

Clicca su smusso e goffing, ancora nell'opzione Stili di livello. Scegli Profondità: 250%, Dimensione: 5 px, ammorbidire: 2 px. Utilizzare le modalità Evidenzia e Shadow per aggiungere un po 'più profondità al testo e riprodurre con queste opzioni fino a trovare il giusto mix.

08. Gioca con le ombre

drop shadow in Photoshop

Non rovinare il tuo bagliore esterno con la tua ombra

Per l'ombra interiore, scegli lo stesso colore brillante che hai scelto per il bagliore esterno. Tutto quello che devi modificare qui è la dimensione, a seconda di quanto sia grande il testo. Modifica questo e lasciare tutti gli altri valori a 0.

Mentre il testo al neon sarà seduto leggermente dal muro, avremo bisogno di una sottile ombra di caduta, ma non troppo perché non vogliamo compromettere il bagliore esterno. Utilizzare una basse opacità e dare questo più lontano e dimensioni.

09. accendilo

string added to text in Photoshop

Assicurarsi che la stringa segue attraverso tutti i caratteri

Vai al livello di testo, ctrl. / Fare clic con il tasto destro del mouse e scegliere Stili di copia di livello. Clicca sullo strato animale, ctrl. / Fare clic con il tasto destro del mouse e scegli Incolla Stili di livello. Fare doppio clic sull'icona FX e ruotare i colori rosa in verde per un piccolo contrasto con il testo.

Prendi lo strumento penna e creare una stringa attraverso il testo al neon e gli animali che hai creato. Assicurarsi che segue tutti i caratteri, quindi tratto con # 808080, con un pennello 2px selezionato con la spaziatura dell'1%.

10. Aggiungi una goccia-ombra

add a drop shadow in Photoshop

Dai alla corda un smusso e un po 'di ombra

Vai alle opzioni di fusione per la stringa che hai appena fatto. Testa per smussare per dargli una forma sottile, e dargli anche una sottile ombra. Le variabili qui dipendono dalle dimensioni e dalla forma della stringa che hai creato, quindi sperimentare solo per vedere cosa funziona.

11. Creare una versione "off"

flickering effect in Photoshop

Ora fai una copia non incandescente in modo da poter creare un effetto tremolante

Creiamo uno strato di testo che non è incandescente, quindi possiamo animare un guizzo su alcune delle lettere. Duplica il livello di testo, quindi nascondere lo stile esterno del bagliore. Imposta l'ombra interna su # 808080, quindi alterare la leggerezza di questo livello a -50, utilizzando tonalità / saturazione ( cmd / ctrl. +. U. ).

Nel livello di testo incandescente, afferrare lo strumento di tendarina e selezionare alcune lettere che si desidera spegnere brevemente nell'animazione. Effettuare duplicazioni di questo livello, con queste lettere mascherate fino a quando non hai strati sufficienti per creare un'animazione.

12. Anima il tuo design

export animation as a gif in Photoshop

Esporta come GIF animato e sei bello andare

Vai in alto a destra di Photoshop e seleziona il movimento come opzione di lavoro. La timeline dell'animazione apparirà in basso; Qui, puoi definire quali livelli sono mostrati o nascosti per tuttavia a lungo vuoi che siano.

Creare nuovi telai lungo il fondo con varie lettere o luminose o non incandescenti, a seconda che il livello sia visibile o meno. Imposta l'ora dell'animazione di ciascun livello utilizzando la piccola freccia su ciascuna cornice. Salva come GIF utilizzando Salva per il Web.

Questo articolo è stato originariamente pubblicato su Web Designer, la rivista Creative Web Design - offrendo tutorial esperti, tendenze all'avanguardia e risorse gratuite. Iscriviti al web designer qui .

Articoli Correlati:

  • 40 Esempi da vedere di tipografia cinetica
  • Come creare un effetto di battitura animato
  • Crea il tuo typeface 3D

Come si fa - Articoli più popolari

Come storyboard in Photoshop

Come si fa Sep 12, 2025

(Credito immagine: Mark Evan Lim) Storyboarding in Photoshop può essere un ottimo modo per far uscire le tue idee. I..

Una guida alla visione cloud di Google

Come si fa Sep 12, 2025

Apprendimento automatico. Apprendimento profondo. Elaborazione del linguaggio naturale. Visione computerizzata. Automazione. Rico..

Come preparare un file per la stampa

Come si fa Sep 12, 2025

Come un arteworker a Wieden + Kennedy. Londra, I. Design per la stampa regolarmente. Esistono deter..

Aggiungi animazioni UI al tuo sito

Come si fa Sep 12, 2025

La maggior parte delle persone vede le interfacce utente giornaliere, sia che si tratti di un'app mobile o su un sito web, quindi..

Crea immagini 3D interattive con tre.js

Come si fa Sep 12, 2025

Questo tutorial WebGL dimostra come creare una simulazione ambientale 3D che mostra ciò che accade al mondo come livelli di CO2 ..

Disegna un ritratto a matita di un cane

Come si fa Sep 12, 2025

Quando disegnano ritratti di animali domestici, non devi solo sapere Come disegnare gli animali : L'attività è c..

Come creare un ambiente invernale

Come si fa Sep 12, 2025

Prima di iniziare a lavorare su un'immagine personale di solito inizio a pensare a quello che voglio vedere nel lavoro finito. Ne..

Come usare stock photography Creativamente all'interno del tuo lavoro di progettazione

Come si fa Sep 12, 2025

Piuttosto che essere un'ultima risorsa, le immagini di immagini possono e dovrebbero formare una parte essenziale del tuo arsenal..

Categorie