Share
Con questo tutorial ti mostrerò come creare un'icona di indicatore di mappa iOS perfetta per l'importazione nella tua prossima progettazione basata su mappe. Utilizzeremo una singola forma con più attributi di aspetto per creare uno stile grafico facile da usare e modificare in Adobe Illustrator.
Iniziamo preparando il nostro documento. Apri Illustrator e premi Command + N per creare un nuovo documento. Inserire 500 nella casella della larghezza e 500 nella casella dell'altezza, quindi fare clic sul pulsante Avanzate. Seleziona RGB, schermo (72ppi) e assicurati che la casella Allinea nuovi oggetti a griglia pixel sia deselezionata prima del tuo clic OK.
Quando si lavora con dispositivi indipendenti dalla risoluzione, la perfezione dei pixel è un must e per creare forme nitide sarebbe più semplice avere la configurazione di Grid View e Pixel Snapping abilitati, così lo faremo ora. Attiva la griglia (Visualizza> Mostra griglia) e quindi Aggancia alla griglia (Visualizza> Aggancia alla griglia). Dopo che quelli sono attivi, avrai bisogno di una griglia ogni 1 px. Basta andare su Illustrator> Preferenze> Guide e griglia, immettere 1 nella griglia ogni casella e 1 nella casella Sottori. Ora impostiamo l'unità di misura su pixel da Illustrator> Preferenze> Unità> Generale. Una volta completato il tuo documento dovrebbe assomigliare alle immagini qui sotto.
Ora che il nostro documento è impostato iniziamo creando la forma del cerchio usata per l'icona dell'indicatore. Dal momento che stiamo creando per un display retina, avremo bisogno di lavorare con il doppio della dimensione dell'oggetto che vogliamo creare. Sul nostro dispositivo retina vorremmo che l'indicatore appaia 16px per 16px, quindi se moltiplichiamo per 2 arriviamo a 32px. Con questo in mente selezioniamo il nostro Ellipse Tool (L) e poi clic ovunque nell'area di disegno. Quando viene visualizzata la finestra di dialogo, digitare 32px per la larghezza e l'altezza. Questo creerà il cerchio perfetto necessario per il nostro indicatore.
Mancia: Premere la lettera "D" sulla tastiera per ripristinare il colore di riempimento e tratto alle impostazioni predefinite.
Con la nostra forma disegnata possiamo arrivare alle cose divertenti. Apri il pannello Aspetto (se non lo è già vai su Finestra> Aspetto) e cominciamo a creare la nostra icona.
Ci sono un bel po 'di attributi di Aspetto per questa forma in modo da rendere più facile seguire che lavoreremo dal basso verso l'alto nel pannello Aspetto.
Per iniziare, nel pannello Aspetto seleziona la voce Riempimento in basso e creeremo un gradiente radiale opaco a trasparente come indicato nell'immagine seguente, quindi regola l'opacità al 50%. Con quell'elemento Riempimento ancora selezionato, faremo clic sul pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Percorso> Tracciato offset e inserisci gli attributi descritti di seguito. Dovremo anche trasformare la voce Fill in modo da selezionare di nuovo il pulsante Aggiungi nuovo effetto e navigare in Distorsione e trasformazione> Trasforma e inserire gli attributi come mostrato di seguito. Se non hai ancora indovinato, questa sarà l'ombra per l'icona dell'indicatore e quello che abbiamo fatto è creare un'ombreggiatura completamente vettoriale che dia un leggero alone alla nostra forma principale e viene abbassata appena quanto basta per fornire profondità. Non sembra molto ora ma le cose cominceranno a crescere presto.
Ora, creiamo un'altra voce di riempimento sopra la nostra voce di riempimento a gradiente. Per impostazione predefinita, questo aggiungerà il nostro gradiente nero a trasparente, ma dovremo rimuovere questa sfumatura al posto di un colore piatto. Andiamo avanti e selezioniamo un bel colore rosso vivo per questo livello come descritto di seguito. A questo punto può sembrare strano usare un rosso così vivace, ma tutto avrà senso in un momento. Questo livello inferiore fungerà sia dal nostro colore di base sia dal nostro evidenziatore secondario una volta passati al passaggio successivo.
Ancora una volta creiamo un'altra voce di riempimento. Questo sarà il default del colore rosso che abbiamo scelto in precedenza, ma vogliamo un gradiente radiale per questo elemento, quindi seleziona il pannello Sfumatura e inserisci gli attributi descritti di seguito. Una bella combinazione da viola a bianco impostata su Moltiplica e l'Opacità ridotta al 50% aggiungerà all'icona una bella forma arrotondata 3D. Per spingere ancora di più l'effetto 3D, facciamo Zoom (Z) nella nostra icona fino a quando vedremo i singoli pixel quadrati sulla nostra tavola artistica. Con quell'elemento a gradiente ancora selezionato, seleziona lo strumento Gradiente (G) dal pannello Strumenti e questo mostrerà la barra del gradiente sopra l'icona. Faremo clic e trasciniamo questa barra di circa 2,5 pixel utilizzando la nostra scheda grafica come guida, assicurandoci di mantenere la barra il più centrata possibile.
Ora inizieremo a creare la nostra fonte di luce primaria. Ricorda che stiamo lavorando dal basso verso l'alto, quindi le cose potrebbero non avere senso finché non avremo completato i prossimi passaggi.
Tenendo presente che stiamo cercando di creare uno splendore luminoso sulla nostra icona, è ovvio che questa luce proietterà un po 'di illuminazione di diffusione contro il nostro oggetto, quindi questo è ciò che creeremo ora. Nuovamente creeremo un nuovo livello Riempimento. Aggiustiamo questo gradiente in modo che sia opaco a trasparente come indicato di seguito con una opacità totale del 60%. Seleziona lo strumento sfumatura (G) e usa la barra bianca del manico con il centro nero sul lato sinistro del perimetro di gradiente e trascina la maniglia verso il centro del cerchio in modo che sia quasi la metà delle sue dimensioni originali, quindi fai clic sulla barra della sfumatura centrale e trascinalo verso l'alto e verso sinistra un po '. Tieni d'occhio questo livello in quanto potresti voler tornare in seguito per allinearlo in un secondo momento con il nostro principale strato di evidenziazione in bianco.
Ora che abbiamo un po 'di diffusione, aggiungeremo un bagliore al momento saliente stesso. Crea un altro livello Riempi e riempilo con un gradiente da bianco a trasparente come indicato di seguito. Si prega di tenere presente che la posizione del gradiente corrisponderà al livello sottostante, quindi prima di regolare questo gradiente fare clic sul campione "Nessuno" nel pannello Campioni per cancellare quel riempimento, quindi aggiungere quindi aggiungere il nuovo opaco al gradiente trasparente in modo che la sua posizione venga reimpostata . Con la sfumatura sul posto, vogliamo anche impostare Offset e Transform this Fill. Fai clic sul pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Percorso> Tracciato offset e inserisci gli attributi descritti di seguito. Dovremo anche trasformare la voce Fill in modo da selezionare di nuovo il pulsante Aggiungi nuovo effetto e navigare in Distorsione e trasformazione> Trasforma e inserire gli attributi come mostrato di seguito.
Aggiungendo il bagliore, aggiungiamo il nostro momento culminante. Fai di nuovo clic sul pulsante Aggiungi nuovo riempimento e riempilo con un colore bianco piatto Quindi seleziona il pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Percorso> Tracciato offset e inserisci gli attributi delineati sotto. Dovremo anche trasformare la voce Fill in modo da selezionare di nuovo il pulsante Aggiungi nuovo effetto e navigare in Distorsione e trasformazione> Trasforma e inserire gli attributi come mostrato di seguito.
A questo punto puoi tornare al livello di diffusione del gradiente rosso che abbiamo fatto alcuni passi indietro e regolare il punto centrale del gradiente per essere direttamente sotto l'evidenziazione bianca.
Ora regoliamo quel bordo nero che è rimasto lì a fissarci per tutto questo tempo. Lo imposteremo all'esterno con un peso della corsa di 2 px e il colore descritto di seguito.
L'indicatore stesso è ora completo ma facciamo un ulteriore passo avanti e creiamo anche l'anello del raggio GPS. Fai di nuovo clic sul pulsante Aggiungi nuovo riempimento e riempilo con un gradiente da rosso a trasparente come indicato di seguito e rilascia l'opacità al 25%. Quindi seleziona il pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Percorso> Tracciato offset e inserisci gli attributi descritti di seguito.
Per l'ultimo pezzo dell'icona aggiungeremo il bordo attorno all'anello del raggio GPS. Fai clic sul pulsante Aggiungi nuovo tratto nella parte inferiore del pannello Aspetto e scegli un peso del tratto rosso 2px all'interno della forma. Ora spostiamo il percorso facendo clic sul pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Percorso> Tracciato offset e inserisci gli attributi descritti di seguito. E infine aggiungeremo un bagliore esterno a questo tratto. Per fare ciò, fai clic sul pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Stilizzazione> Bagliore esterno
A questo punto puoi Shift + Fai clic sui due elementi del ring del raggio GPS per selezionarli entrambi nel pannello Aspetto e trascinali in fondo a questo elenco in modo che l'icona dell'indicatore reale si trovi in cima.
Con l'indicatore fuori mano ora creeremo il nome pop-up. Seleziona lo strumento Rettangolo arrotondato e fai clic sulla pagina e inserisci le informazioni descritte nell'immagine sottostante. Tieni presente che la larghezza può essere qualsiasi cosa tu desideri purché il nome che scegli più tardi si adatti, ma per il proposito di questo tutorial useremo questa larghezza impostata.
Dovremo anche cliccare ancora una volta con lo strumento Rettangolo arrotondato per creare la freccia in basso. per questo abbiamo bisogno che sia perfettamente quadrata e lasceremo cadere il raggio come indicato di seguito. Quando la forma è stata creata, ruotala di 45 gradi. Per fare ciò, seleziona lo strumento Selezione (V), quindi posiziona il mouse vicino a qualsiasi angolo del quadrato e mentre tieni premuto il tasto Maiusc sulla tastiera trascina la forma in qualsiasi direzione fino a quando non assomiglia ad un diamante, come mostrato nello screenshot qui sotto.
Ora allineeremo questi oggetti per essere centrati l'uno con l'altro. Con lo strumento Selezione (V) nello spostamento manuale fai clic su entrambi gli oggetti in modo che siano entrambi selezionati contemporaneamente. Passiamo ora al pannello Allinea (Finestra> Allinea) e scegli la seconda opzione sotto l'intestazione Align Objects denominata Horizontal Align Center. Quindi fai clic sull'ultima opzione sotto la stessa intestazione denominata Verticale Allinea in basso.
Con lo strumento Selezione (V) ancora abilitato, fai clic sulla forma a rombo più piccola in modo che sia l'unico oggetto ora selezionato. Tenendo premuto Shift sulla tastiera, premere una volta la freccia giù sulla tastiera. Rilascia il cambio, quindi premi la freccia giù sulla tastiera ancora tre volte per spostare il diamante nella posizione perfetta.
Fare clic tenendo premuto Maiusc sulla forma arrotondata più grande in modo da selezionare entrambi gli oggetti ancora una volta e accedere al pannello Elaborazione tracciati (Finestra> Pathfinder) quindi fare clic sulla prima opzione sotto l'intestazione Modi forma intitolata Unite. Entrambi gli oggetti dovrebbero ora essere uniti in uno solo.
Con il nostro pop-up. forma ora creata lavoreremo per lo styling. Con la forma selezionata, vai al pannello Aspetto (Finestra> Aspetto) e seleziona il tratto. Lo terremo nero come di base, ma impostiamolo fuori dalla forma con un peso del tratto di 2 pixel.
Quindi, seleziona il Riempimento e lo riempiremo con un gradiente di 90 gradi semitrasparente in scala di grigi come descritto di seguito.
Infine aggiungeremo un effetto ombra esterna a questo oggetto. Fai clic sul pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Stilizzazione> Sfalsa ombra e inserisci le opzioni descritte nello screenshot qui sotto.
Diamo a questo oggetto un bel risalto in alto. Con l'oggetto selezionato copieremo (Comando + C) e poi Incolla in primo piano (Comando + F). Passiamo rapidamente allo stile predefinito premendo "D" sulla tastiera. Questo rimuoverà gli effetti che abbiamo aggiunto in precedenza e restituirai la forma al bianco base con un tratto nero. Ai fini di questa evidenziazione non avremo bisogno di un tratto, quindi naviga nel pannello Strumenti e fai clic sull'opzione di riempimento tratto vicino al fondo per selezionarlo. Quindi fai clic sul quadrato bianco con la linea rossa diagonale che lo attraversa per rimuovere completamente il tratto. Con il tratto scomparso, copialo (Comando + C), quindi Paste in Front (Command + F) di nuovo in modo da avere ora due semplici forme bianche una sopra l'altra. Quindi mentre è selezionata la forma più in alto e lo Strumento selezione (V) è attivato, premere due volte la freccia giù sulla tastiera per spostare l'oggetto verso il basso. Una volta spostati, spostare l'oggetto semplice dietro di esso per selezionarli entrambi contemporaneamente. Mentre entrambi gli oggetti sono selezionati, vai al pannello Pathfinder (Finestra> Pathfinder) e seleziona la seconda opzione sotto l'intestazione "Modi di forma" intitolata "Minus Front". Ora dovrebbe essere lasciato un piccolo frammento della forma originale nella parte superiore. Con questo frammento selezionato abbassiamo l'Opacità al 25% nel pannello Aspetto (Finestra> Aspetto).
Ora creeremo il testo per questo pop-up. Seleziona lo Strumento testo (T) dal pannello Strumenti, quindi fai clic sulla scheda artistica e inserisci il nome che desideri. Nel pannello Strumenti fai clic sul colore di riempimento e cambialo in bianco. Ora vai al pannello Carattere (Tipo> Tipo> Carattere) e regola le dimensioni e il tipo di carattere come descritto di seguito.
Con il testo selezionato, vai al pannello Aspetto (Finestra> Aspetto) e fai clic sul pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Stilizzazione> Sfalsa ombra e inserisci le opzioni delineate in lo screenshot qui sotto. Possiamo anche usare lo strumento Selezione (V) per trascinare il testo nella posizione desiderata nella forma a bolle. Poiché le guide intelligenti e il blocco alla griglia sono abilitati, questo dovrebbe essere facile da trovare.
Con il testo fuori mano creiamo l'icona della freccia. Seleziona lo strumento Rettangolo arrotondato e fai clic sulla scheda grafica, quindi collega queste opzioni.
Ora seleziona lo strumento Selezione (V) e fai clic sul rettangolo appena creato. Con l'oggetto selezionato copieremo (Comando + C) e poi Incolla in primo piano (Comando + F). Ora ruotiamo questo nuovo oggetto di 90 gradi. Ora allineeremo questi oggetti per formare una forma a L all'indietro. Con lo strumento Selezione (V) nello spostamento manuale fai clic su entrambi gli oggetti in modo che siano entrambi selezionati contemporaneamente. Passeremo ora al pannello Allinea (Finestra> Allinea) e scegli la terza opzione sotto l'intestazione Align Objects denominata Horizontal Align Right. Quindi fai clic sull'ultima opzione sotto la stessa intestazione denominata Verticale Allinea in basso.
Con entrambi gli oggetti ancora selezionati, vai al pannello Pathfinder (Finestra> Pathfinder) quindi fai clic sulla prima opzione sotto l'intestazione Modi forma intitolata Unite. Entrambi gli oggetti dovrebbero ora essere uniti in uno solo. Con lo strumento Selezione (V) ancora selezionato ruotiamo la forma di 45 gradi. Per fare ciò, seleziona lo strumento Selezione (V), quindi posiziona il mouse vicino a qualsiasi angolo del quadrato e mentre tieni premuto il tasto Maiusc sulla tastiera trascina un angolo a destra del riquadro di delimitazione fino a quando non appare come una freccia che punta al destra.
Con la freccia selezionata, accedi al pannello Aspetto (Finestra> Aspetto) e fai clic sul pulsante Aggiungi nuovo effetto (assomiglia alle lettere "fx") nella parte inferiore del pannello Aspetto, quindi seleziona Stilizzazione> Sfalsa ombra e inserisci le opzioni delineate in lo screenshot qui sotto. Possiamo anche usare lo strumento Selezione (V) per trascinare la forma della freccia nella posizione desiderata nella forma della bolla.
Con il pop-up. sezione completata abilita lo strumento di selezione (V) e trascina una selezione su tutto il pop-up. oggetti per selezionarli tutti contemporaneamente. Ora vai su Oggetto> Gruppo (Comando + G) nel pannello menu per Raggruppare questi oggetti insieme. Possiamo quindi trascinare questo gruppo sopra l'icona dell'indicatore e centrarlo in modo che assomigli allo screenshot qui sotto. E con quello sul posto, abbiamo finito!
Spero di essere stato in grado di mostrarti come utilizzare il pannello Aspetto per creare effetti complessi senza la necessità di livelli aggiuntivi. Sentiti libero di giocare con colori diversi come preferisci. Con così tanti dispositivi indipendenti di risoluzione che galleggiano nei giorni a venire, è davvero fantastico poter utilizzare oggetti infinitamente scalabili che possono essere utilizzati e riutilizzati nei progetti delle app.
Accentsconagua