Come creare un logo effetto neon con Illustrator e Photoshop

Vuoi imparare a creare un’immagine, magari un logo, con un effetto che la faccia sembrare proprio realizzata con i neon?

Perfetto! In questo tutorial andrò a farti vedere come puoi costruire un logo effetto neon partendo da zero. Non solo ti spiego passo passo come fare, ma nell’articolo trovi anche tutto il materiale che ti può essere utile se vuoi fare pratica e svolgere con me l’esercizio.

Non sai come funziona Illustrator? Nessun problema, puoi cominciare a esplorare con me le funzioni base grazie a queste lezioni gratuite.

Se ti interessa proseguire e diventare un vero professionista puoi passare al corso completo Illustrator Startup. Se invece vuoi capire meglio come funziona Photoshop qui trovi le guide eb i tutorial di Grafigata!.

Allora cominciamo:‌ puoi seguire il video, oppure leggere il procedimento spiegato passo passo nell’articolo più in basso.

Crea il logo in Illustrator

Il nostro punto di partenza sarà quindi un logo vettoriale che andiamo a realizzare con Adobe Illustrator, a partire magari da una bozza disegnata a mano.

Vettorializza la bozza

La prima cosa da fare è importare in Illustrator la bozza:‌

Una volta importata la bozza ti consiglio di inserirla in un livello template. Si fa così:‌ doppio click sul livello,  seleziona template e click su ok.

Quindi crea un nuovo livello:‌ su questo puoi disegnare il logo, seguendo la traccia della bozza. Per farlo ti consiglio di usare le forme primitive geometriche, la penna e la matita.

Completate le parti di illustrazione, quindi la fiamma e il panino, puoi realizzare le scritte utilizzando due elementi testuali:

• Strumento Testo:‌ inserisci la parola “HOT”, tutta scritta in maiuscolo. A questo elemento di testo applica il font Arista 2.0
• Di nuovo con lo strumento Testo: inserisci la parola “Burger”. A questa seconda scritta applica il font Gabuek Script

A questo punto, se vuoi che la tua scritta sembri davvero fatta con dei neon, dovrai apportare qualche modifica. Per farlo seleziona entrambi gli elementi testuali, quindi click con il tasto destro e seleziona crea contorno. In questo modo hai trasformato il testo in contorni.

Un consiglio:‌ a questo punto del lavoro la bozza che hai importato all’inizio non ti serve più. Ti suggerisco di nasconderla.

Concentrati sulla scritta HOT. In questo momento è tutta nera:‌ per rendere nera solo la linea di contorno seleziona la scritta e usa la combinazione SHIFT + click in modo da invertire i colori di traccia e riempimento.

Per regolare lo spessore della traccia attiva il contagocce cliccando su una parte qualsiasi del tracciato creato in precedenza. Copia lo spessore di traccia e incollalo sulla scritta selezionata.

Per questo progetto ti consiglio di utilizzare uno spessore di traccia di 6 punti.

Ora per ottenere l’effetto di una scritta a neon per il tuo logo devi interrompere il tracciato delle lettere.

Attiva lo strumento penna (in alternativa puoi usare anche le forbici) e fai click per selezionare un segmento tra due punti di ancoraggio:‌ usa il tasto CANC per eliminare il segmento.

Prenditi un momento per revisionare il disegno nel suo insieme e sistemare quello che non ti convince. Nel mio caso ho allineato i testi e corretto alcune curve dentro la fiamma.

Applica il colore

Il nostro scopo è creare un “effetto neon”: per questo ti suggerisco di scegliere per il tuo logo colori molto accesi e brillanti.

Fai click sull’elemento che vuoi colorare e scegli il colore che ti sembra più azzeccato. In questo caso la fiamma, ad esempio, sarà rossa.

Procedi allo stesso modo per tutti gli elementi. Potresti notare che i colori non sono brillanti come ti aspetti;‌ in questo caso è probabile che tu stia lavorando su un documento con standard colore CMYK.

Se è così allora crea un nuovo documento, stavolta con standard RGB, copia tutto il lavoro che hai svolto e incollalo sul nuovo documento.

Applica gli effetti in Photoshop

Completato il disegno in Illustrator, passa a lavorare su Photoshop.

Seleziona il logo e copialo con la combinazione CTRL(/CMD) + A.

Su Photoshop ho già creato un documento in cui ho inserito l’immagine che utilizziamo in questo esempio come background (anche l’immagine fa parte dei file che puoi scaricare da).

Adesso devi semplicemente incollare il disegno che hai copiato da Illustrator usando la combinazione CTRL(/CMD) + V; scegli l’opzione incolla come oggetto avanzato.

Regola le dimensioni dell’elemento incollato e centralo.

A questo punto ci sono un paio di passaggi delicati che ti invito a seguire con attenzione. Se ti serve un riscontro puoi tornare al video.

Importa e predisponi il logo

Ora che hai incollato il logo spostati sul pannello livelli.

Inserisci un nuovo livello riempimento:‌ per farlo clicca sull’icona corrispondente che trovi in basso.

Seleziona ora una tinta unita qualsiasi;‌ nel mio caso ho scelto il rosso. Quindi seleziona sia l’oggetto avanzato che il colore di riempimento.

Quando entrambi sono selezionati fai click con il tasto destro e seleziona l’opzione converti in oggetto avanzato. In Photoshop un oggetto avanzato è un semplice livello che può contenere elementi sia vettoriali che raster;‌ su questi livelli possiamo apportare modifiche non distruttive.

L’oggetto avanzato che hai creato ora si chiama colore riempimento 1; se fai doppio click su questo livello si apre un nuovo documento. Guarda il nome del file:‌ noterai che l’estensione è .psb, non .psd. Questo formato contiene entrambi gli elementi su cui hai lavorato:‌ il colore di riempimento e il logo.

Quindi non ti resta che cancellare il colore di riempimento. Puoi farlo con un click sul colore e tasto CANC. A questo punto salva il documento con la combinazione CRTL(/CMD) + S e chiudi il documento.

Torna al file principale‌: per non creare confusione nelle fasi successive rinomina i livelli.

Per il livello del logo ti consiglio di sostituire colore riempimento 1 con logo, e livello 1 con background.

Applica gli effetti

Per andare ad applicare correttamente tutti gli effetti che renderanno il nostro logo davvero un’insegna al neon devi predisporre in modo corretto i livelli.

Per prima cosa duplica 9 volte il livello logo;‌ puoi farlo velocemente utilizzando la combinazione CRTL(/CMD) + J.

Ora è consigliabile raggruppare i livelli creati:‌ selezionali, poi con la combinazione CRTL(/CMD + G) crea il gruppo in cui inserirli. Il gruppo puoi rinominarlo neon.

Anche i singoli livelli all’interno del gruppo devono essere rinominati, a gruppi di 3:

• base 1 – base 2 – base 3
• vetro 1- vetro 2 – vetro 3
• luce 1 – luce 2 – luce 3

Adesso arriva il bello:‌ per ottenere l’effetto finale, infatti, ti basterà lavorare sui livelli creati applicando degli stili livello, a partire dal livello base 2. Quindi applichi gli stili a tutti i livelli che hai creato, tranne che al livello base 1.

Non ti preoccupare per gli stili:‌ per consentirti di seguire con facilità il tutorial ho già preparato gli stili da applicare. Quindi anzitutto segui e scarica tutto il materiale.

Ora per cominciare ad utilizzare gli stili che hai scaricato fai così: seleziona il livello base 2. Fai doppio click, ti si apre la finestra Stili livello:‌ da qui click su Stili, e quindi sull’icona a forma di ingranaggio. Da qui puoi scegliere la funzione Importa stili.

A questo punto vedrai comparire nel menu degli stili disponibili la cartella Effetto luce neon. Nella cartella troverai otto stili.

Ora puoi applicare ogni stile al livello corrispondente, a partire appunto dal livello base 2. Se hai dato ai diversi livelli il nome che ti ho indicato non dovresti avere nessun problema:‌ infatti ho assegnato ad ogni stile lo stesso nome del livello a cui va applicato.

Perfeziona l’effetto lampada

Tramite i nuovi livelli e gli stili che hai assegnato a ciascuno adesso hai creato la lampada al neon.

Ma perché‌ somigli davvero a una lampadina accesa c’è bisogno ancora di un po’ di lavoro.

Procedi in questo modo: anzitutto duplica il livello logo, come hai già fatto, con la combinazione CRTL(/CMD) + J. Assegna a questo livello il nome logo copia e applica un filtro sfocatura.

Per farlo apri il menù filtro, quindi seleziona l’opzione sfocatura > controllo sfocatura. Nella finestra controllo sfocatura imposta il raggio alla dimensione di 20 pixel. Conferma e chiudi.

Ora hai un livello, che si chiama logo copia, a cui hai applicato un filtro avanzato. Crea quattro copie di questo livello con la combinazione CRTL(/CMD) + J e riunisci tutto in un gruppo con la combinazione di tasti CRTL(/CMD) + G. Assegna al nuovo gruppo il nome Bagliore.

Per lavorare su ciascun livello apri il gruppo Bagliore e disattiva tutti i livelli tranne il primo, che si chiama logo copia. Adesso puoi assegnare a ciascun livello un effetto diverso, in questo modo:

• logo copia: seleziona il livello, quindi tramite le proprietà che trovi in alto nel pannello livelli modifica il metodo di fusione da normale a colore e puoi anche ridurre leggermente l’opacità
• logo copia 2: fai click sull’icona del filtro avanzato che vedi a destra del nome del livello. Quindi doppio click su controllo sfocatura. Aumenta il raggio di sfocatura a 130 pixel e conferma con ok.
  Torna al livello e modifica anche qui il metodo di fusione, stavolta da normale a colore scherma
• logo copia 3:‌ con lo stesso procedimento che hai usato per il livello precedente modifica il raggio di sfocatura, portandolo a 90 pixel. Conferma con ok, quindi modifica il metodo di fusione:‌ da normale a schiarisci
• logo copia 4:‌ anche per questo livello modifica il raggio di sfocatura. Questa volta impostalo a un valore di 400 pixel. Per quanto riguarda il metodo di fusione seleziona schiarisci al 70%
• logo copia 5: per l’ultimo livello del gruppo seleziona il metodo di fusione luce vivida e imposta il raggio di sfocatura a 700 pixel.

Siamo a buon punto, ma mancano ancora tre passaggi importanti. Andiamo a vedere quali sono.

Le regolazioni finali

Il primo passaggio per concludere il lavoro consiste nel creare un nuovo livello di regolazione.

Puoi farlo usando l’icona che trovi in basso nel pannello livelli:‌ fai click e seleziona valori tonali. Posiziona questo livello sopra tutti gli altri e utilizza i cursori agli estremi della curva. Spostali un po’ verso l’interno per aumentare il contrasto.

Crea un secondo livello regolazione:‌ questa volta seleziona l’opzione luminosità e contrasto. Aumenta leggermente i valori di entrambi i parametri.

Con la combinazione che abbiamo già utilizzato, CRTL(/CMD) + G, puoi creare un gruppo a cui assegnare il nome livello di regolazione.

Non ti resta che il tocco finale:‌ per rendere ancora più credibile l’effetto neon del tuo logo puoi disegnare i cavi elettrici dietro alla lampada.

Per farlo puoi utilizzare un’azione che ho creato per te e che si trova nella stessa cartella che hai già scaricato. Per importarla clicca sul menu finestra, quindi seleziona azioni. Nella finestra azioni clicca sull’icona menu in alto a destra, quindi seleziona carica azioni.

Trovi la cartella cavo, con le azioni che ti servono. Prima di poterle applicare, però, ti serve un tracciato.

Servendoti dello strumento penna segui l’andamento della lampada e crea il tracciato per il cavo. Quando sei soddisfatto del risultato dal pannello livelli clicca su tracciati e seleziona il tracciato che hai appena creato. Quindi richiama l’azione e fai click su play.

Torna sul pannello livello e trascina il livello che contiene il cavo sotto il livello logo. Ripetendo lo stesso procedimento puoi creare un secondo cavo, con un tracciato vicino al primo.

Usa questo esercizio come mockup

A questo punto hai creato il tuo logo effetto neon. Ma non è finita qui.

Ti ricordi che, quando hai importato il logo da illustrator, hai creato un livello oggetto avanzato per l’immagine vettoriale?

Bene, se in futuro avrai bisogno di applicare lo stesso effetto neon a un altro logo o a un’altra grafica ti basterà fare doppio click sul livello logo e modificare l’oggetto avanzato.

In questo modo hai a disposizione un vero e proprio mockup.

Conclusioni

Come hai visto se conosci bene Illustrator puoi davvero ottenere dei risultati professionali in maniera relativamente semplice.

Ho progettato il corso completo Illustrator Startup proprio per seguire un percorso ricco e approfondito che ti consentirà di lavorare in piena autonomia.

Se invece vuoi cominciare a curiosare nei nostri tutorial e imparare qualche altro trucco puoi cominciare dalle nostre guide.

Ci vediamo presto con altri tutorial, intanto continua a seguirci

Alla prossima!