Share
Nei seguenti passaggi imparerai come creare un set di cursori a forma di pixel perfetto in Adobe Illustrator. Per i principianti imparerai come preparare il tuo nuovo documento e come configurare una griglia semplice. Successivamente, utilizzando lo strumento Rettangolo, lo strumento Ellisse e lo strumento Penna insieme all'effetto Angoli arrotondati imparerai come creare le forme che costituiscono i cursori della mano. Andando avanti, usando tecniche di costruzione di forme vettoriali semplici, un tratto semplice, un gradiente lineare, alcuni effetti Ombra esterna e un semplice effetto Trasforma imparerai come aggiungere colori, luci e ombre per i cursori della mano finale.
Colpire Controllo + N creare un Nuovo documento. accedere 600 nel Larghezza scatola e 300 nel Altezza casella quindi fare clic sul Avanzate pulsante. Selezionare RGB, Schermo (72ppi) e assicurarsi che il Allinea nuovi oggetti a Pixel Grid la casella è deselezionata prima di fare clic ok.
Abilita il Griglia (Visualizza> Mostra griglia) e il Aggancia alla griglia (Visualizza> Aggancia alla griglia). Avrai bisogno di una griglia ogni 1px, quindi semplicemente vai Modifica> Preferenze> Guide> Griglia, accedere 1 nel Gridline ogni scatola e 1 nel suddivisioni scatola. Dovresti anche aprire il Informazioni pannello (Finestra> Informazioni) per un'anteprima dal vivo con le dimensioni e la posizione delle tue forme. Non dimenticare di impostare l'unità di misura su pixel da Modifica> Preferenze> Unità> Generale. Tutte queste opzioni aumenteranno significativamente la tua velocità di lavoro.
Scegli il Strumento rettangolo (M) e concentrati sulla tua barra degli strumenti. Rimuovi il colore dal tratto, quindi seleziona il riempimento e imposta il colore su rosso (R = 237 G = 28 B = 36). Spostati sulla tua tavola da disegno, crea semplicemente a 4 x 15 px rettangolo e abbassatelo Opacità a 30%. Abbassando l'opacità della forma, ti sarà più facile vedere la griglia nella parte posteriore che ti renderà più facile capire il posizionamento esatto per ogni forma. Assicurati che il tuo rettangolo sia ancora selezionato e vai a Effetto> Stilizzazione> Angoli arrotondati. Entrare in un 2px raggio e clicca ok.
Assicurarsi che il Strumento rettangolo (M) rimane attivo, crea a 6 x 10 px forma, posizionalo come mostrato nella seconda immagine, abbassalo Opacità a 30% e colpisci Maiusc + Controllo + E per aggiungere lo stesso 2px Angoli arrotondati effetto. Creare un 6 x 9 px forma, posizionalo come mostrato nella terza immagine, abbassalo Opacità a 30% e colpisci Maiusc + Controllo + E. Infine, crea un 6 x 7 px forma, posizionala come mostrato nella quarta immagine, abbassala Opacità a 30% e colpisci Maiusc + Controllo + E.
Usando il Strumento ellisse (L), creare un 4px cerchio, riempilo con lo stesso rosso (R = 237 G = 28 B = 36), posizionarlo come mostrato nell'immagine seguente e abbassarlo Opacità a 30%. Passare al Strumento rettangolo (M), creare un 8 x 10 px forma, posizionalo come mostrato nell'immagine seguente e abbassalo Opacità a 30%.
Concentrati sul lato destro del rettangolo e seleziona il Strumento penna (P). Imposta il colore di riempimento sul nero, abbassa il Opacità a 30% e creare un percorso "L" come mostrato nella prima immagine. Assicurati che questo nuovo percorso rimanga selezionato, aggiungi un quarto punto di ancoraggio come mostrato nella seconda immagine e trascina le maniglie 2px su e 1px verso destra. Sposta in alto, aggiungi un quinto punto di ancoraggio come mostrato nella terza immagine e trascina verso l'alto le maniglie 2px in alto. Tenere il alt tasto dalla tastiera, clic su questo quinto punto di ancoraggio quindi semplicemente clic sul punto di ancoraggio di partenza per chiudere il percorso.
Concentrati sul lato sinistro del rettangolo rosso, seleziona il Strumento penna (P) e creare un percorso come mostrato nella prima immagine. Assicurati che questo nuovo percorso rimanga selezionato, aggiungi un quarto punto di ancoraggio come mostrato nella seconda immagine e trascina le maniglie 2px su e 1px verso sinistra. Spostati verso il basso, aggiungi un quinto punto di ancoraggio come mostrato nella terza immagine e trascina verso il basso le maniglie 4 px. Tenere il alt tasto dalla tastiera, clic su questo quinto punto di ancoraggio quindi semplicemente clic sul punto di ancoraggio di partenza per chiudere il percorso. Infine, assicurati che la forma fatta in questo passaggio sia riempita di nero e abbassata Opacità a 30%.
Seleziona tutte le forme create finora e Gruppo loro (Controllo + G). Sposta in Livelli pannello (Finestra> Livelli), fai doppio clic su questo nuovo gruppo e chiamalo "pointerHandCursor"Duplica questo gruppo (Control + C> Control + F), selezionare la copia e trascinarla a destra come mostrato nella seconda immagine. Ritorna al Livelli pannello e nominare questo nuovo gruppo "palmHandCursor"Continuate a concentrarvi su questi secondi gruppi, selezionate i quattro rettangoli arrotondati e cancellateli semplicemente.
Concentrati sul tuo "palmHandCursor"raggruppa e scegli il Strumento rettangolo (M). Creare un 4 x 13 px forma e posizionalo come mostrato nella prima immagine. Riempi il rosso, abbassalo Opacità a 30% e vai a Effetto> Stilizzazione> Angoli arrotondati. Immettere un raggio di 2 pixel e fare clic ok. Assicurarsi che il Strumento rettangolo (M) rimane attivo, crea a 4 x 14 px forma, posizionalo come mostrato nella seconda immagine, abbassalo Opacità a 30% e colpisci Maiusc + Controllo + E.
Crea un secondo, 4 x 14 px forma, posizionalo come mostrato nella terza immagine, abbassalo Opacità a 30% e colpisci Maiusc + Controllo + E. Infine, crea un 4 x 11 px forma, posizionala come mostrato nella quarta immagine, abbassala Opacità a 30% e colpisci Maiusc + Controllo + E. Concentrarsi sul Livelli pannello, selezionare i quattro rettangoli arrotondati creati in questo passaggio e trascinarli semplicemente all'interno del "palmHandCursor"gruppo.
Duplicare (Control + C> Control + F) il tuo "palmHandCursor"gruppo, seleziona la copia e trascinala a destra come mostrato nella seconda immagine Livelli pannello e nominare questo nuovo gruppo "fistHandCursorMantieni la concentrazione su questo terzo gruppo, seleziona i quattro rettangoli arrotondati insieme al 20px cerchia e semplicemente cancellali.
Concentrati sul tuo "fistHandCursor"raggruppa e prendi il Strumento ellisse (L). Creare un 6px cerchio, riempilo di rosso, abbassalo Opacità a 30% e posizionarlo come mostrato nella prima immagine. Scegli il Strumento rettangolo (M). Creare un 4 x 9 px forma e posizionalo come mostrato nella seconda immagine. Riempi il rosso, abbassalo Opacità a 30% e vai a Effetto> Stilizzazione> Angoli arrotondati. Entrare in un 2px raggio e clicca ok. Assicurarsi che il Strumento rettangolo (M) rimane attivo, crea a 4 x 10 px forma, posizionalo come mostrato nella terza immagine, abbassalo Opacità a 30% e colpisci Maiusc + Controllo + E.
Creare un 4 x 9 px forma, posizionala come mostrato nella quarta immagine, abbassala Opacità a 30% e colpisci Maiusc + Controllo + E. Infine, crea un 4 x 7 px forma, posizionalo come mostrato nella quinta immagine, abbassalo Opacità a 30% e colpisci Maiusc + Controllo + E. Concentrarsi sul Livelli pannello, selezionare i quattro rettangoli arrotondati e il 6px cerchio fatto in questo passaggio e semplicemente trascinandoli all'interno del "fistHandCursor"gruppo.
Seleziona il tuo "pointerHandCursor"gruppo, vai a Oggetto> Espandi Aspetto quindi apri il esploratore pannello (Finestra> Pathfinder) e fare clic su Unire pulsante. Seleziona la forma risultante, aumenta il Opacità a 100% e concentrarsi sul Aspetto pannello (Finestra> Aspetto). Rimuovere il colore dal riempimento, aggiungere a 1pt colpo e selezionalo. Imposta il colore a R = 70 G = 70 B = 70, allinearlo all'interno e aprire il Ictus pannello (Finestra> Corsa). Concentrarsi sul Angolo sezione e semplicemente controllare il Round Join pulsante. Una volta che hai finito vai Oggetto> Percorso> Corsa contorno.
Scegli il Strumento rettangolo (M), creare due, 1 x 3 px forme, a 1 x 4 px forma e a 1 x 5 px forma. Riempi tutte e quattro le forme con R = 70 G = 70 B = 70 e posizionali come mostrato nella quarta immagine. Al termine, selezionare tutte le forme create in questo passaggio e fare clic su Unire pulsante dal esploratore pannello.
Usando il Strumento rettangolo (M), creare un 21 x 26 px rettangolo, riempilo di bianco, posizionalo come mostrato nella prima immagine e invialo indietro (Maiusc + Controllo + [ ). Seleziona questo rettangolo bianco insieme al contorno della mano e fai clic sul Dividere pulsante dal esploratore pannello. Assicurati che il gruppo risultante sia selezionato e semplicemente colpito MAIUSC + CTRL + G a Separa esso. Selezionare la forma bianca esterna ed eliminarla, quindi selezionare la forma bianca interna e sostituire il bianco con il gradiente lineare mostrato nell'immagine finale.
Disabilitare il Aggancia alla griglia (Visualizza> Aggancia alla griglia) quindi vai a Modifica> Preferenze> Generale e assicurarsi che il Incremento della tastiera è impostato a 1px. Riselezionare la forma riempita con il gradiente lineare e creare due copie davanti (Control + C> Control + F> Control + F). Seleziona la copia in alto e premi una volta la freccia destra per spostarla di 1px verso destra. Riselezionare entrambe le copie e clic il Fronte meno pulsante dal esploratore pannello. Seleziona il gruppo di forme risultante, trasformalo in a Percorso composto (Controllo + 8 o Oggetto> Percorso composto> Crea) e impostare il colore di riempimento su R = 205 G = 205 B = 205.
Riselezionare la forma riempita con il gradiente lineare e creare altre due copie davanti (Control + C> Control + F> Control + F). Seleziona la copia in alto e premi una volta la freccia sinistra per spostarla di 1px a sinistra. Riselezionare entrambe le copie e fare clic su Fronte meno pulsante dal esploratore pannello. Seleziona il gruppo di forme risultante, trasformalo in a Percorso composto (Controllo + 8 o Oggetto> Percorso composto> Crea) e impostare il colore di riempimento su bianco.
Riselezionare la forma riempita con il gradiente lineare e andare a Effetto> Stilizzazione> Sfalsa ombra. Inserisci le proprietà mostrate nella finestra di sinistra (nella seguente immagine), clicca ok e vai di nuovo a Effetto> Stilizzazione> Sfalsa ombra. Immettere le proprietà mostrate nella finestra di destra (nella seguente immagine) e fare clic ok.
Abilita il Aggancia alla griglia (Visualizza> Aggancia alla griglia). Usando il Strumento rettangolo (M), creare un 1 x 3 px forma e riempilo con R = 215 G = 215 B = 215. Posiziona questo rettangolo piccolo come mostrato nell'immagine seguente e vai a Effetto> Distorci e trasforma> Trasforma. Immettere le proprietà mostrate di seguito e fare clic ok.
Seleziona il tuo "palmHandCursor"gruppo, vai a Oggetto> Espandi Aspetto e fare clic su Unire pulsante dal esploratore pannello. Seleziona la forma risultante, aumenta il Opacità a 100% e concentrarsi sul Aspetto pannello (Finestra> Aspetto). Rimuovere il colore dal riempimento, aggiungere a 1pt colpo e selezionalo. Imposta il colore a R = 70 G = 70 B = 70, allinearlo all'interno e controllare il Round Join pulsante dal Ictus pannello. Una volta che hai finito vai Oggetto> Percorso> Corsa contorno.
Scegli il Strumento rettangolo (M), creare due, 1 x 8 px forme e a 1 x 7 px forma. Riempi tutte e quattro le forme con R = 70 G = 70 B = 70 e posizionali come mostrato nella terza immagine. Prendi il Strumento di selezione diretta (A), concentrati sul lato superiore del rettangolo di sinistra, seleziona il punto di ancoraggio sinistro e trascinalo verso il basso di 1 pixel. Al termine, selezionare tutte le forme create in questo passaggio e fare clic su Unire pulsante dal esploratore pannello.
Concentrati sul contorno della mano fatto nel passaggio precedente e ripeti le tecniche e gli effetti usati per il cursore della mano del puntatore. Alla fine le cose dovrebbero assomigliare all'immagine seguente.
Seleziona il tuo "fistHandCursor"gruppo, vai a Oggetto> Espandi Aspetto e fare clic su Unire pulsante dal esploratore pannello. Seleziona la forma risultante, aumenta il Opacità a 100% e concentrarsi sul Aspetto pannello (Finestra> Aspetto). Rimuovere il colore dal riempimento, aggiungere a 1pt colpo e selezionalo. Imposta il colore a R = 70 G = 70 B = 70, allinearlo all'interno e andare a Oggetto> Percorso> Corsa contorno.
Scegli il Strumento rettangolo (M), creare tre, 1 x 4 px forme e a 1 x 2 px forma. Riempi tutte e quattro le forme con R = 70 G = 70 B = 70 e posizionali come mostrato nella terza immagine. Prendi il Strumento di selezione diretta (A), concentrarsi sul lato superiore del centro 1 x 4 px rettangolo, seleziona il punto di ancoraggio sinistro e trascinalo verso il basso di 1 pixel. Spostati a destra 1 x 4 px rettangolo, concentrati sul lato superiore, seleziona il punto di ancoraggio corretto e trascinalo 1px in basso. Al termine, selezionare tutte le forme create in questo passaggio e fare clic su Unire pulsante dal esploratore pannello.
Concentrati sul contorno della mano fatto nel passaggio precedente e ripeti le tecniche e gli effetti usati per gli altri due cursori a due mani. Alla fine le cose dovrebbero assomigliare all'immagine seguente.
Ecco come dovrebbe apparire. Spero ti sia piaciuto questo tutorial e puoi applicare queste tecniche nei tuoi progetti futuri.
Se sei interessato a creare il pulsante Iscriviti, dai un'occhiata a questo ingegnoso tutorial sulla creazione di un pulsante con solo una riga di testo nel pannello Aspetto!
Accentsconagua