Share
In questo suggerimento rapido creeremo un set di pulsanti web con l'aiuto di Effetti 3D in Adobe Illustrator. Perché? Perché in questo modo possiamo dimenticare di utilizzare diversi pennelli ed effetti per aggiungere luci e ombre e possiamo ottenere questo risultato in un unico passaggio, sfruttando le impostazioni di luce e le forme di Smussatura disponibili. Cominciamo!
Iniziamo con la forma di base per questo pulsante web, quindi prendi lo strumento Rettangolo arrotondato e fai clic in qualsiasi punto della tua tavola da disegno per aprire la finestra Rettangolo arrotondato. Lì, inserisci i numeri mostrati e otterrai la forma di cui abbiamo bisogno. Seleziona grigio chiaro come colore di riempimento.
Selezionando questo rettangolo, vai al menu Effetto> 3D> Estrusione e smusso. Nella parte destra dell'immagine qui sotto puoi vedere le impostazioni di default, solo le coordinate di rotazione sono cambiate. Mi piacerebbe usare le forme di smussatura più spesso, ma a volte semplicemente non generano i risultati che voglio. In questo caso, se scegli Tall-Round come forma Bevel, la modifica è più che ovvia. Otterrai il bordo arrotondato e non dovrai più preoccuparti delle luci e ombre in seguito.
Se aumenti il valore Altezza, il bordo arrotondato diventa più spesso.
Nella finestra Opzioni Estrusione e smusso, premere il pulsante Altre opzioni per aprire l'intera finestra di dialogo e concentrarsi sulla parte inferiore. Se si desidera evidenziare l'angolo in alto a sinistra, spostare la luce a sinistra come indicato di seguito o verso il basso se si desidera evidenziare l'angolo in basso a destra.
Finalmente, ecco le impostazioni che ho usato. Cambia le coordinate, scegli Tall-Round come la forma Bevel, aumenta l'altezza da 4 pt a 6 pt e sposta leggermente la luce a sinistra.
Mentre è selezionato il pulsante 3D, vai al menu Oggetto e scegli Espandi aspetto. Ora, usa lo strumento Selezione diretta (A) per selezionare il rettangolo arrotondato interno e riempilo con il gradiente lineare mostrato. Imposta l'angolo a 90 gradi. Con questo rettangolo selezionato, fai doppio clic su Contenuto (perché questa forma si trova in un gruppo) nel pannello Aspetto e in questo modo vedrai gli attributi esistenti. Quindi, vai al menu Effetto> Stilizzazione e applica l'effetto Bagliore interno usando le impostazioni mostrate.
Avendo selezionato il riempimento esistente nel pannello Aspetto, fai clic sull'icona Duplica elemento selezionato in basso e otterrai un secondo riempimento. Cambia il gradiente con quello mostrato usando bianco e nero e imposta l'angolo a 50 gradi. Cambia il metodo di fusione in schermo (il nero diventa trasparente) e riduci l'opacità al 75%.
Duplica questo secondo riempimento come hai fatto prima e mantieni lo stesso gradiente. Imposta l'angolo su 140 gradi e aumenta il valore Opacità dal 75% al 90%.
Ora, seleziona usando lo Strumento selezione diretta (A) il rettangolo interno e dal menu Oggetto scegli Copia e incolla in primo piano. Nel pannello Livelli trascina il nuovo rettangolo all'esterno del gruppo di pulsanti perché non lo vogliamo lì. Rimuovi gli attributi esistenti e dagli un tratto nero. Mentre questo rettangolo è selezionato, vai a Oggetto> Percorso> Aggiungi punti di ancoraggio due volte per aggiungere alcuni punti extra. Quindi, prendi lo strumento forbici (C) e fai clic sui due punti indicati per tagliare la forma, quindi elimina il percorso dal basso.
Ora, hai bisogno di un pennello artistico. Ho spiegato come farlo in questo rapido suggerimento al punto 9. L'unica differenza è che, questa volta, ho iniziato da un'ellisse di 100 x 3 px anziché da 200 x 5 px. Dopo averlo trascinato nel pannello Pennelli per salvarlo come un nuovo pennello artistico, utilizzarlo per tracciare il percorso dall'alto. Impostare il peso su 2 pt.
Copia e incolla di fronte al rettangolo interno e trascinalo fuori dal gruppo di pulsanti, di fronte ad esso. Rimuovi le apparenze esistenti e assegnagli un riempimento nero (1). Ora, copia e incolla davanti al rettangolo nero e cambia il colore di riempimento in modo da poterli differenziare. Sposta leggermente il rettangolo rosso premendo il tasto freccia su della tastiera due volte (2). L'incremento della tastiera deve essere impostato su 1 px (menu Modifica> Preferenze> Generale).
Seleziona entrambe le forme e scegli Sottrai dall'area della forma> Espandi dal pannello Pathfinder. La forma sottile risultante dovrebbe avere un riempimento nero (3). Cambia la modalità di fusione in Moltiplica e riduci l'opacità al 20% (4).
Quindi, usando lo strumento Penna (P) traccia un tracciato sul pulsante come nell'immagine sottostante. Copia e incolla di nuovo il rettangolo interno, rimuovi le apparenze esistenti e dagli un tocco nero. Seleziona questo rettangolo e anche il percorso blu e fai clic su Dividi nel pannello Pathfinder. Dal menu Oggetto scegliere Separa, quindi eliminare la forma dal basso.
Riempi la forma ottenuta con un gradiente lineare da bianco a nero e imposta l'angolo a meno 90 gradi. Cambia la modalità di fusione sullo schermo (il nero diventa trasparente) e riduci l'opacità al 30%.
Continuiamo con il testo. Con lo Strumento testo (T) digita "PROVA ORA" utilizzando un carattere chiamato Anja Eliane, dimensione 35 pt. Puoi trovare il carattere qui. Dal menu Oggetto scegliere Espandi, quindi riempire il testo con il gradiente lineare mostrato. Impostare l'angolo su meno 45 gradi. Successivamente, vai al menu Effetto> Stilizzazione e applica l'effetto Ombra esterna usando le impostazioni dal basso.
Ora, digita "30 GIORNI DI PROVA" usando Arial Bold, dimensione di 15 pt, quindi seleziona Espandi dal menu Oggetto. Riempi il testo con il bianco quindi applica nuovamente l'effetto Ombra esterna usando le impostazioni mostrate.
Dal pannello Simboli (menu Finestra> Simboli) apri il menu Librerie simboli e nella categoria Frecce trova Freccia 24. Trascinalo nell'area di lavoro e premi l'icona Interrompi collegamento a simbolo nella parte inferiore del pannello. Separalo due volte, quindi vai al menu Effetto> Stilizzazione> Angoli arrotondati e applica un raggio di 3 px (1). Riempi la freccia con il gradiente lineare mostrato, quindi dai un tratto di 0,5 pt usando il colore indicato (2).
Spostare la freccia sul pulsante, quindi andare al menu Effetto> Stilizzazione e applicare l'effetto Ombra esterna.
Selezionando questa freccia, scegli Espandi aspetto dal menu Oggetto per espandere i due effetti applicati, quindi vai al menu Oggetto> Trasforma> Scala, scegli 80% e premi Copia. Otterrai la freccia più piccola. Disporli come nell'immagine e assicurarsi che siano allineati orizzontalmente. Selezionali entrambi, quindi vai al menu Oggetto> Trasforma> Rifletti. Scegli Verticale quindi premi Copia. Disporre le due nuove frecce sul lato destro e il pulsante è pronto.
Tutto ciò che manca è un'ombra sotto il pulsante. Prendi lo Strumento Ellisse (L) e disegna un'ellisse piatta in basso, quindi seleziona il nero come colore di riempimento (1). Invia questa ellisse dietro al pulsante, quindi vai a Menu Oggetto> Percorso> Tracciato offset e applica un offset di meno 7 px. Avrai un'ellisse più piccola al centro (2). Imposta Opacità per l'ellisse più grande a 0%, quindi selezionali entrambi e vai al menu Oggetto> Miscela> Opzioni di fusione. Qui, selezionare 25 Passi specificati e tornare al menu Oggetto> Miscela> Marca (3). Riduci l'opacità del gruppo di frullaggio risultante al 75% e se metti il pulsante su un particolare sfondo, cambia anche la modalità di fusione in Moltiplica.
Ecco il pulsante web finale:
A partire da questo pulsante è possibile ottenere molte altre varianti di colore. Tutto quello che devi fare è fare una copia del pulsante e cambiare alcune cose. Nelle immagini qui sotto puoi vedere tre esempi: blu, verde e viola. Tutte le forme che sono visibili nell'immagine qui sotto non sono state modificate. Tienili così come sono. Quelli che sono nascosti significa che saranno modificati e li prenderemo individualmente.
Iniziamo con il rettangolo arrotondato. Selezionalo con lo Strumento selezione diretta (A) e dai un'occhiata al pannello Aspetto. Cambia il primo riempimento sfumatura con il nuovo gradiente mostrato e mantieni tutti gli altri attributi così come sono. Fai la stessa cosa per i pulsanti web verdi e viola.
Per il testo, basta cambiare il punto intermedio del gradiente da arancione chiaro a blu chiaro rispettivamente verde chiaro e viola chiaro. "30 GIORNI DI PROVA" rimane lo stesso.
Ora, seleziona la freccia e cambia il riempimento sfumato, quindi il colore del tratto come indicato. Gli effetti rimangono gli stessi.
Infine, come hai fatto al punto 10, seleziona Espandi aspetto quindi ridimensiona la freccia per ottenere quella più piccola. Rifletti i due e hai finito.
Questa è l'immagine finale e qui ci sono i quattro pulsanti web pronti per essere usati. Se vuoi salvarli per il web, dai un'occhiata a un altro mio tutorial in cui ti spiegherò come farlo in dettaglio.
Accentsconagua