Suggerimento rapido crea un set di pulsanti giocatore in rilievo

Segui questo nuovo suggerimento rapido e impara come disegnare una serie di pulsanti giocatore, viola e rosa questa volta perché il grigio e il nero possono essere un po 'noiosi a volte. Sono facili da realizzare e useremo effetti come Outer Glow, Gaussian Blur, Transform e lo strumento di fusione.


Passo 1

Apri un nuovo documento web. Il cerchio esterno dei pulsanti è semi-trasparente, quindi lo sfondo è importante questa volta. Prendi lo strumento rettangolo (M) e disegna un rettangolo di 720 x 170 pixel, quindi seleziona il viola come colore di riempimento. Vai al pannello Aspetto e dal menu a comparsa scegli Aggiungi nuovo riempimento. Cambia questo secondo colore di riempimento in grigio scuro (85% nero), quindi vai al menu Effetto> Artistico e applica l'effetto Grana pellicola. Abbassa l'opacità al 70% e lo sfondo è pronto.


Passo 2

Prendi lo Strumento Ellisse (L) e disegna un cerchio di 83 x 83 px. Riempilo con il gradiente lineare mostrato e modifica il valore dell'angolo a 90 gradi. Successivamente, vai al menu Effetto> Sfocatura> Sfocatura gaussiana e applica un raggio di 1,5 px. Riduci l'opacità al 50% per rendere semicircolare il cerchio.


Passaggio 3

Copia e incolla davanti al primo cerchio e rimuovi gli aspetti esistenti. Copia e incolla di nuovo il cerchio (verde) per ottenere un altro cerchio (rosso). Prima di continuare, vai al menu Modifica> Preferenze> Generali e imposta l'incremento della tastiera su 0,5 px. Ora seleziona il cerchio rosso e spostalo un po 'premendo due volte il tasto Freccia giù sulla tastiera. Seleziona entrambe le cerchie e fai clic su Sottrai dall'area della forma> Espandi dal pannello Pathfinder.

Invia la forma risultante sul retro e riempila con una sfumatura radiale dal bianco al nero. Successivamente, vai al menu Effetto> Sfocatura> Sfocatura gaussiana e applica un raggio di 1 px, quindi modifica la modalità di fusione su Schermo (il nero diventa trasparente). Riduci l'opacità al 60%.


Passaggio 4

Avendo selezionato il primo cerchio, vai al menu Oggetto> Tracciato> Tracciato offset e applica un valore di Offset di -8 px per ottenere il cerchio più piccolo. Rimuovi le apparenze esistenti e riempi la sfumatura viola indicata. Vai al menu Effetto> Stilizza e applica l'effetto Bagliore esterno usando le impostazioni mostrate. In questo modo otterrai un'ombra discreta attorno a questo secondo cerchio.


Passaggio 5

Copia e incolla davanti al secondo cerchio, mantieni il colore di riempimento ma rimuovi l'effetto Bagliore esterno dal pannello Aspetto. Dopo aver selezionato questa nuova cerchia, vai al menu Oggetto> Tracciato> Tracciato offset e applica un valore di Offset di -7 px per ottenere nuovamente un cerchio più piccolo. Cambia il colore di riempimento in viola. Ora seleziona entrambi i cerchi ottenuti in questo passaggio, vai al menu Oggetto> Miscela> Opzioni di fusione e scegli 20 punti specificati, quindi torna al menu Oggetto> Miscela e seleziona Crea.


Passaggio 6

Successivamente, vai al pannello Livelli e seleziona il cerchio viola più piccolo dal gruppo Blend e Copia e incolla in primo piano ma trascinalo fuori dal gruppo di fusione perché non lo vogliamo lì. Riempi il nuovo cerchio (rosso) con una sfumatura lineare da bianco a nero e modifica il valore dell'angolo a 90 gradi. Cambia la modalità di fusione sullo schermo (il nero diventa trasparente) e abbassa l'opacità al 40%.


Passaggio 7

Copia e incolla davanti all'ultima cerchia e dagli un colpo blu. Ora, copia e incolla davanti al cerchio blu per ottenere il cerchio rosso, quindi spostalo premendo il tasto freccia giù sulla tastiera cinque volte (l'incremento della tastiera è ancora impostato su 0,5 px). Dopo aver selezionato entrambi i cerchi, premere Sottrai dall'area della forma> Espandi dal pannello Pathfinder, quindi riempire la forma risultante con un gradiente radiale dal nero al grigio. Quindi, vai al menu Effetto> Sfocatura> Sfocatura gaussiana e applica un raggio di 1,7 px, quindi modifica la modalità di fusione in Moltiplica. Premi due o tre volte il tasto Freccia giù sulla tastiera per spostare leggermente sotto questa forma lunare.


Passaggio 8

Continuiamo con i simboli del giocatore. Per il simbolo Gioca prendi lo strumento Poligono, fai clic sulla tua tavola da disegno e inserisci i valori mostrati per ottenere un triangolo. Ruota di meno 90 gradi poi vai al menu Effetto> Stilizzazione> Angoli tondi e applica un raggio di 5 px. Per il simbolo Stop, traccia un quadrato di 20x20 px usando lo Strumento Rettangolo (M), quindi applica nuovamente l'effetto Angoli rotondi. Il simbolo Pausa è composto da due sottili rettangoli (4x22 px) e questa volta seleziona un raggio di 2 px quando applichi l'effetto Round Corners.

Quindi, seleziona i simboli Riproduci, Ferma e Pausa e dal menu Oggetto seleziona Espandi aspetto e Separa. Scala e moltiplica il simbolo Play e usalo insieme al simbolo Pause per creare i simboli Play Faster e Play Next come mostrato di seguito. Al termine, raggruppa le forme che li compongono, quindi vai al menu Oggetto> Trasforma> Rifletti, seleziona Verticale e premi Copia. In questo modo otterrai i simboli Riproduci più lento e Riproduci precedente.


Passaggio 9

Riempi il simbolo Play con la sfumatura viola indicata, quindi vai al pannello Aspetto e dal menu a comparsa scegli Aggiungi nuovo riempimento. Cambia il secondo colore di riempimento con quello mostrato poi vai al menu Effetto> Distorsione e Trasforma> Trasforma effetto e nella sezione Sposta, Verticale seleziona 1.5 px. Fai la stessa cosa per il resto dei simboli.


Passaggio 10

Torniamo al pulsante del passaggio 7. Raggruppa tutte le forme che lo compongono, quindi vai al menu Oggetto> Trasforma> Sposta. Scegliere di spostare il pulsante 100 px orizzontalmente, quindi premere Copia. Ora premi Command + D (Transform Again) per ripetere questa azione cinque volte. Tutto ciò che resta da fare è disporre i simboli e il gioco è fatto.


Passaggio 11

Lo sfondo dietro i pulsanti rosa è lo stesso dello sfondo viola. Puoi semplicemente fare una copia quindi sostituire i due colori di riempimento con quelli indicati.

Per creare i pulsanti rosa, tutto quello che devi fare è sostituire le tonalità viola con le sfumature rosa. Nell'immagine qui sotto puoi vedere i passaggi principali e i colori che devi cambiare. Se altri colori o sfumature non sono menzionati qui significa che rimangono gli stessi.

Modificare anche i due colori di riempimento per i simboli come indicato. Ora ripeti il ​​passaggio 10 e i simboli rosa sono pronti.


Passaggio 12

Se non ti piacciono i colori da ragazza puoi creare la versione nera. Inizia con lo sfondo e sostituisci i colori di riempimento ...

... .poi sostituire le sfumature viola dei pulsanti con sfumature di grigio come indicato di seguito.

Sostituisci anche i due colori di riempimento per i simboli, quindi posizionali sopra i pulsanti e il gioco è fatto.


Immagine finale

Ecco l'immagine finale. Ti sfido a creare questi pulsanti utilizzando altri colori che ti piacciono e poi fammi sapere come sono andate a finire. Assicurati di abbinare i pulsanti con il colore di sfondo poiché il cerchio più grande è semitrasparente. Inoltre, se si desidera ridimensionare questi pulsanti, ricordare di espandere tutti gli effetti utilizzati prima di eseguire questa operazione.