Share
Sale e pepe, penna e carta, biscotti e latte, anche se sono tutti buoni da soli, queste cose lavorano insieme per tirare fuori il meglio l'uno nell'altro. Adobe Illustrator e Adobe Photoshop non fanno eccezione. Oggi ti mostrerò come usare Illustrator per disegnare un pulsante di riproduzione e come migliorare i tuoi vettori con Photoshop. Questa tecnica è particolarmente utile per le persone che desiderano creare icone e progetti di interfaccia utente. Iniziamo!
Inizia creando un nuovo documento in Illustrator (l'ho realizzato a 800 x 800 px). Seleziona lo "Strumento rettangolo arrotondato" (con il raggio dell'angolo di 100 px) e crea una forma simile a un pulsante arrotondato. Quindi selezionare lo "Strumento rettangolo", creare un rettangolo e centrarlo sul rettangolo arrotondato. Questo sarà per il pulsante di riproduzione.
Lavora sul secondo rettangolo (il rettangolo "play"). Vai a Effetto> Distorci e trasforma> Pucker e gonfia per rendere il rettangolo curvo. Riempi la finestra nella finestra (ho usato il 6%) e premi OK, dopodiché vai su Oggetto> Espandi aspetto.
Per creare l'icona "Gioca", seleziona lo "Strumento Stella", apri la finestra di dialogo Strumento Stella e inserisci le seguenti impostazioni.
Ora crea le icone "successivo" e "precedente". Prima duplica l'icona di gioco con Opzione + Fai clic + trascina (ovunque tu voglia), poi fai lo stesso, ma questa volta trascinalo verso destra (puoi tenere premuto il tasto Maiusc per mantenere l'oggetto in linea retta). Selezionare i due triangoli, fare clic sul pulsante "Aggiungi a forma area" quindi fare clic su "Espandi", ridimensionare e riposizionare.
Crea l'icona "Precedente" andando su Oggetto> Trasforma> Rifletti> Verticale e fai clic su "Copia". Muovilo in posizione e ti sei appena fatto qualche pulsante giocatore.
Aggiungi i colori ai pulsanti. Il pulsante "Riproduci" ha un riempimento di # 506670 un tratto di # 2C515E. I pulsanti "Avanti" e "Precedente" hanno un riempimento di # 85D4D6 e un tratto di # 27A0A0.
Per creare l'ombreggiatura inferiore devi duplicare il pulsante, quindi con lo "Strumento rettangolo arrotondato" (utilizzando le stesse impostazioni) crea la stessa forma ma un po 'più grande. Seleziona questo rettangolo e quello che hai duplicato e fai clic su "Sottrai dall'area della forma" e "Espandi". Rendilo nero e dagli un'opacità del 20% e imposta la modalità di fusione su Sovrapponi.
Usa l'ombra in basso per creare la massima luminosità. Seleziona l'ombra in basso, vai a Trasforma> Rifletti. Dopo aver effettuato le impostazioni, fai clic su "Copia". Spostalo in posizione, riorganizza i punti di ancoraggio in modo che diventi più sottile e rendilo bianco (lascia l'opacità e le modalità di fusione così come sono).
Usa la stessa tecnica sul pulsante di riproduzione.
Dopo aver completato la forma del player, esportalo come. PSD per aggiungere alcuni dettagli in Photoshop.
Crea un nuovo file in Photoshop (ho usato 800 x 800 px) e porta il file che hai esportato da Illustrator (mini player). Seleziona il livello "big button", apri la finestra "Layer Styles", facendo doppio clic sul lato destro del livello e inizia ad aggiungere i seguenti stili come ho fatto io. (puoi seguire le foto).
Nascondi tutti i livelli tranne il livello "pulsante grande", il livello "ombra inferiore" e il livello "top shine". Seleziona il livello "ombra inferiore", vai su Filtro> Sfocatura> Sfocatura gaussiana, assegna un raggio di 4 px e poi fai clic su OK. Fai lo stesso con il livello "top shine".
Quindi, crea un nuovo livello, Comando + Fai clic sul pollice del "pulsante grande" per effettuare una selezione di quella forma, quindi, con lo "Strumento Lazo poligonale", ritaglia la metà superiore della selezione. Riempi tutto con un colore (non importa quale colore dato che gli verrà dato lo 0% di riempimento) e aggiungi uno stile di livello Sovrapposizione sfumatura.
Rendi visibile il "pulsante di riproduzione" (compresa l'ombra inferiore e la luminosità superiore). Seleziona il livello "Riproduci pulsante" e aggiungi i due stili di livello (Sovrapposizione sfumatura e Bagliore interno). Seleziona il livello "ombra inferiore" e vai su Filtro> Sfocatura> Sfocatura gaussiana, assegna un raggio di 5 px e fai clic su OK. Ripeti questa azione sul livello "top shine".
Crea un nuovo livello, crea una selezione rettangolare e con lo "Strumento sfumatura" (G) crea un gradiente. Control + D per deselezionare. Impostare la modalità di fusione su "Sovrapponi" e il 20% sull'opacità.
Crea un nuovo livello sotto il livello pulsante di riproduzione e fai una selezione per l'ombra del pulsante. Riempi il nero e vai su Filtro> Sfocatura> Sfocatura gaussiana e dargli un raggio di 1,5 px. Impostare la modalità di fusione su "Color Burn" e il 40% sull'opacità.
Seleziona "Strumento Gomma" (E), imposta il diametro su 125 px e la durezza sul 25% e scorri orizzontalmente al centro del livello di ombra.
Seleziona il livello delle icone "successivo e precedente" e riempili con questo colore; # 0096A4. Dopodiché apri la finestra "Layer Styles" e inizia ad aggiungere gli stessi stili di quello che ho fatto io.
Fai lo stesso con il livello "play icon". Ma questa volta usa questo colore come colore di sfondo: # FFDB94
Usa lo "Strumento Linea" per creare un grande effetto brillantezza. Posiziona la linea sotto il livello "Riproduci pulsante" e crea una linea orizzontale (1 px) nella parte inferiore del livello del "pulsante grande". Rendi la forma riempita 0% e aggiungi un "Sovrapposizione sfumatura".
Crea un nuovo livello dietro il livello "Riproduci pulsante". Controllo + Fare clic sul pollice del livello "pulsante grande" per effettuare una selezione di tale forma, quindi eseguire una sfumatura nera semplice sulla sinistra. Imposta "Sovrapponi" come metodo di fusione e opacità del 60%. duplica il livello, ruotalo orizzontalmente e spostalo verso destra.
Usa lo "Strumento Ellisse" per creare un ovale sul lato sinistro del "tasto grande". Riorganizza in modo che assomigli all'immagine qui sotto (dovrebbe essere posizionata nella parte in alto a sinistra del "tasto grande"). Crea il riempimento 0% e aggiungi uno stile "Sovrapposizione sfumatura".
Duplica il livello e posizionalo nella parte in basso a destra del "tasto grande" aggiungendo il secondo stile "Sovrapposizione sfumatura".
Crea un nuovo livello sopra il livello "Riproduci pulsante". Controllo + Fare clic sul pollice del livello "Pulsante di riproduzione" per effettuare una selezione di tale forma, quindi selezionare Seleziona> Modifica> Contratto e contrarre la selezione di 3 px. Dopo tutto, prendi lo "Strumento sfumatura" e crea una piccola sfumatura diagonale nell'angolo in alto a sinistra. Imposta la modalità di fusione dei livelli su "Sovrapponi" e l'opacità al 40%.
Crea un nuovo livello sopra quello appena creato. Fai una selezione sul lato sinistro del "pulsante Play" (come nell'immagine). Riempi tutto con quale colore vuoi, poiché imposterai il riempimento allo 0%. Aggiungi lo stile "Sovrapposizione sfumatura" e l'effetto brillante è completo. Duplica questo livello, ruotalo orizzontalmente e spostalo sul lato destro.
Seleziona metà del "pulsante Play" e su un nuovo livello, usando lo "Strumento sfumatura" (G), crea una sfumatura (usando il nero come colore). Successivamente, impostare la modalità di fusione su "Color Burn" e l'opacità su 10%. Usa la stessa tecnica per "icona di gioco" (l'unica cosa che cambia è il posizionamento dei livelli - sopra il livello "icona di riproduzione" - e l'opacità del livello - 20%).
Creare la texture "Play Button" è molto semplice. Dopo aver creato un nuovo livello sopra il livello "Riproduci pulsante" Controllo (Comando su Mac) + fai clic sul pollice del livello "Riproduci pulsante", riempilo con il nero, vai a Filtro> Disturbo> Aggiungi disturbo, imposta le impostazioni specificate e premi "Ok".
Con la selezione ancora attiva andare su Filtro> Sfocatura> Sfocatura movimento e utilizzare le impostazioni indicate. Deseleziona e imposta la modalità di fusione su "Sovrapponi" e l'opacità al 45%.
Aggiungi alcuni piccoli dettagli alla "icona di riproduzione". Su un nuovo livello effettuerai, con lo "Strumento selezione ellittica" (M), cerchi di dimensioni casuali all'interno della "icona di riproduzione". Rendili neri, deseleziona e vai su Filtro> Sfocatura> Sfocatura gaussiana, dopo aver aggiunto le tue impostazioni, imposta semplicemente la modalità di fusione su "Color Burn" e l'opacità al 15% e il gioco è fatto.
Crea un altro livello e fai esattamente la stessa cosa. L'unica cosa da cambiare è il colore dei cerchi casuali (ho fatto i cerchi bianchi).
Inizia a creare lo sfondo. Seleziona il livello di sfondo e riempilo con # 363D41 e aggiungi uno stile "Sovrapposizione sfumatura". Usando lo "Strumento selezione ellittica" (M) crea un ovale su un nuovo livello e riempilo con il bianco. Dopodiché vai su Filtro> Sfocatura> Sfocatura gaussiana, inserisci le tue impostazioni e premi ok. Cambia la modalità di fusione su "Sovrapponi" e assegnagli un'opacità del 65%.
Inizia a creare l'ombra per il mini player. Crea un nuovo livello, usando lo "Strumento selezione ellittica" (M) crea un ovale sotto il giocatore e riempilo di nero. Vai a Filtro> Sfocatura> Sfocatura gaussiana e imposta le impostazioni necessarie. Seleziona "Strumento Gomma" (E) e imposta queste impostazioni: Diametro - 150px; Durezza - 0%; Opacità - 10%, quindi usalo per cancellare una piccola parte dei lati dell'ombra. Imposta la modalità di fusione su "Color Burn" e imposta l'opacità al 60%.
Crea un'intera selezione di pulsanti. Fallo tramite Comando + Fai clic sul livello "Pulsante grande", quindi premi Comando + Maiusc + Fai clic su "Riproduci pulsante". Con la selezione attiva crea un nuovo livello e riempilo di nero. Spostalo e vai su Filtro> Sfocatura> Controllo sfocatura ed esegui le impostazioni come nell'immagine. Usa la "Trasformazione libera" (Control + T) per distorcere l'ombra posteriore. Usa lo "Strumento Gomma" (E) con le seguenti impostazioni: Diametro - 150px; Durezza - 0%; Opacità - 10%, per cancellare l'ombra sui lati. Regola l'opacità al 50%.
L'icona Mini Player è ora pronta. Molte di queste tecniche possono essere ricreate per essere al 100% vettoriali, questo è solo un altro modo per fare cose che utilizzano le funzionalità di Photoshop. Ancora una volta, questo è un tutorial particolarmente utile per le persone che desiderano creare elementi da utilizzare nei progetti Web e UI poiché spesso utilizzano già Photoshop.
Spero vi sia piaciuto questo tutorial e che sia stato utile.
Accentsconagua