Share
Con il rilascio del nuovo sistema operativo mobile iOS 7 di Apple, ho pensato che sarebbe stato fantastico creare alcune icone di tabulazioni personalizzate per questo nuovo sistema operativo. In questo tutorial creeremo alcune icone nello stile piatto e sottile usato in iOS 7. Creeremo sia gli stati normali che quelli selezionati per queste icone in Adobe Illustrator, quindi sentitevi liberi di seguire!
Iniziamo creando la nostra barra delle schede di base. Dovremo creare un nuovo documento che sia 640 x 98 pt. Si prega di notare che stiamo usando "Punti"per questo tutorial. Abiliteremo anche Aggancia alla griglia così come regolare la griglia del documento per essere ogni 1pt.
Con il documento impostato selezionare Strumento rettangolo (M) e disegna un rettangolo delle stesse dimensioni della tavola da disegno, quindi regola il colore come mostrato di seguito.
Per completare lo sfondo della barra delle schede, aggiungeremo una barra di separazione lungo la parte superiore che ha la stessa larghezza della tavola da disegno ma solo 2pt quindi allinearlo con la parte superiore della tavola da disegno e riempirlo con il seguente colore
Questo completerà la barra delle schede, quindi una volta che hai finito sentiti libero di bloccare il livello in modo da non selezionarlo accidentalmente in seguito.
Seleziona il Strumento rettangolo arrotondato e crea un nuovo rettangolo come mostrato di seguito. Ora rimuovi il riempimento e regola il Ictus a ciò che vedi qui sotto.
Abilita il Strumento ellisse (L) e creare un cerchio con lo stesso tratto di prima e centrarlo all'interno del rettangolo arrotondato come mostrato di seguito.
Con il Strumento ellisse (L) ancora selezionato crea altri due cerchi con le seguenti dimensioni e allineali come mostrato di seguito. Riempi questi con lo stesso colore del tratto e rimuovi il tratto.
Per questa parte successiva ti consigliamo di eseguire lo zoom in un po 'in modo da poter vedere cosa stai facendo. Abilita il Strumento penna (P) e fai clic per creare quattro nuovi punti di ancoraggio nella parte superiore del rettangolo arrotondato. Gruppo (comando + G) loro insieme a due e i due punti più vicini dovrebbero essere 3pt a parte con un grande divario tra i due gruppi.
Passare al Strumento di selezione diretta (A) e selezionare i due inter punti che abbiamo appena creato e con il tasto freccia sulla tastiera spingi verso l'alto 5pt.
Abilita il Strumento rettangolo (M) e creare un nuovo rettangolo e riempirlo e allinearlo come visto di seguito.
Con ciò l'icona stessa è praticamente completa. Sentiti libero di selezionare tutto l'elemento e Gruppo (comando + G) loro insieme.
Abilita il Tipo Strumento (T) e aggiungeremo un'etichetta. Il carattere predefinito per iOS 7 è "Helvetica Neue" che dovrebbe essere un font preinstallato. Il colore sarà lo stesso dell'icona e regoleremo le impostazioni come mostrato di seguito.
Con questo la nostra icona della fotocamera è praticamente completa, ma facciamo un ulteriore passo avanti e progettiamo anche uno stato selezionato / abilitato.
Per fare ciò duplicare l'icona della fotocamera e nascondere l'originale nel Livelli pannello. Ora seleziona il rettangolo arrotondato che costituisce il corpo della fotocamera e il piccolo rettangolo che indica il pulsante di scatto e rimuovi il tratto e aggiungi un colore di riempimento a tua scelta. Userò un bel colore blu
Seleziona il cerchio più grande che ha un tratto e visita Oggetto> Espandi Aspetto per convertire il tratto in una forma.
Con questa nuova forma selezionata seleziona anche i cerchi più piccoli e visita Oggetto> Percorso composto> Crea unire queste forme in una sola. Ora seleziona entrambi i cerchi e il corpo della fotocamera e sotto il esploratore pannello (Finestra> Pathfinder) seleziona Fronte meno rimuovere i cerchi dal corpo della fotocamera.
Ora puoi copiare l'etichetta di testo e regolare il colore in modo che corrisponda al nuovo colore dell'icona
Con il Strumento ellisse (L) abilitato creare due cerchi e centrarli uno con l'altro come visto di seguito.
Passare al Converti strumento punto di ancoraggio e fai clic sul punto di ancoraggio più in basso per il cerchio più grande per creare un punto. Con quel punto ancora selezionato tieni premuto Shift sulla tastiera e premi il tasto Freccia in giù sulla tastiera due volte per spostare quel punto verso il basso 20pt.
Non sono un grande fan di quello che sta facendo la curva del cerchio alla metà inferiore del pin, quindi aggiustiamo un po 'questo.
Passare al Strumento penna (P) e dove il punto centrale della forma del perno è creare un nuovo punto di ancoraggio facendo clic sul percorso.
Con questo nuovo percorso di ancoraggio creato passare a Strumento di selezione diretta (A) e selezionare la maniglia inferiore e trascinarla verso il punto di ancoraggio stesso in modo che non ci sia una maniglia inferiore.
Ora regola il manico superiore di questo punto di ancoraggio in modo che sia rivolto verso il basso e un po 'di più e poi abbassi la maniglia del punto di ancoraggio dal lato del cerchio una volta.
Assicurati di duplicare questo processo sul lato opposto prima di proseguire.
È ora possibile aggiungere un'etichetta a questa icona come in precedenza con l'icona precedente. Sentiti libero di raggruppare anche le forme delle icone.
Per creare la versione selezionata duplicare la forma dell'icona e riempirla con il colore di evidenziazione
Seleziona il cerchio piccolo e regola la dimensione da essere 12 x 12 pt. Ora seleziona il cerchio e la forma del perno insieme e scegli Fronte meno dal esploratore.
Ora regola il colore del testo dell'etichetta.
Seleziona il Strumento rettangolo arrotondato e crea un rettangolo con un tratto interno come mostrato di seguito.
Passare al Strumento rettangolo (M) e crea un rettangolo con la stessa larghezza di quello arrotondato in basso e allinearlo alla parte superiore del rettangolo arrotondato.
Seleziona sia il rettangolo arrotondato che il rettangolo più piccolo e scegli Unire dal esploratore pannello.
Con il Strumento rettangolo (M) ancora selezionato crea altri tre rettangoli 2 x 40pt e centrarli all'interno del rettangolo più grande.
Seleziona questi rettangoli e Gruppo (comando + G) loro insieme. Con il gruppo selezionato visita Effetto> Ordito> Tacca superiore e applicare le seguenti impostazioni.
Con questa visita selezionata a forma di deformato Oggetto> Espandi Aspetto per convertirlo in una forma.
Ora passa al Strumento di selezione diretta (A) e selezionare i percorsi lungo la parte superiore e rimuoverli.
Ritorna al Strumento rettangolo (M) e crea un rettangolo che è 46 x 2pt e allinearlo in cima all'icona.
Abilita il Strumento rettangolo arrotondato e creare un rettangolo arrotondato con un tratto interno e allinearlo come mostrato di seguito.
Disegna un altro rettangolo direttamente sotto la parte superiore del coperchio della pattumiera e assicurati che copra l'area inferiore della maniglia.
Seleziona sia la maniglia che il nuovo rettangolo e seleziona Fronte meno dal esploratore pannello.
Gruppo (comando + G) gli elementi dell'icona del cestino insieme e ora puoi aggiungere un'etichetta qui sotto come hai fatto prima.
Duplica l'icona del cestino raggruppando e regolando il colore di riempimento sul colore di evidenziazione
Passare al Strumento di selezione diretta (A) e seleziona un punto di ancoraggio dall'interno della forma del contorno del cestino e premi due volte cancella sulla tastiera per creare una forma piena.
Seleziona i tre rettangoli all'interno dell'icona del cestino (li ho ricolorati per poterli vedere negli screenshot) e visitare Oggetto> Percorso composto> Crea. Ora seleziona la forma dell'icona cestino e i tre rettangoli e seleziona Fronte meno dal esploratore pannello.
Assicurati anche di regolare anche il colore dell'evidenziazione dell'etichetta.
Seleziona il Strumento ellisse (L) e creare un cerchio che è 52 x 52 pt e ha un inter stroke come le altre icone.
Con il Strumento ellisse (L) ancora abilitato creare un nuovo cerchio che è 8 x 8pt riempilo con il nostro colore grigio e posizionalo al centro in alto della nostra cerchia più grande. Ora passa al Strumento di selezione diretta (A) e selezionare il punto di ancoraggio più in basso e spingerlo verso l'alto 3pt premendo Su sulla tastiera tre volte. Duplica questa forma ammaccata e ruotala, quindi posizionala nella parte inferiore del cerchio più grande.
Seleziona entrambe le forme ammaccate e Gruppo (comando + G) loro insieme. Con quel gruppo selezionato tasto destro del mouse e visita Trasforma> Trasforma ognuno e inserire le seguenti impostazioni, quindi fare clic copia. Una volta che è stato copiato, premere Comando + D sulla tastiera per duplicare questa funzione di copia / rotazione altre quattro volte in modo da creare tutti i denti dell'ingranaggio.
Seleziona il Strumento ellisse (L) e creare un cerchio che è 12 x 12 pt con il nostro tratto interiore come prima e centrarlo nel cerchio più grande.
Passare al Strumento rettangolo (M) e disegna un rettangolo che è 2pt largo e spazia il raggio del cerchio interno verso il cerchio esterno e lo riempie con il nostro colore grigio
Con questo rettangolo selezionato passa al Ruota strumento (R). Mentre si tiene il Opzione tasto clic nel centro dei cerchi in cui si desidera che l'asse di rotazione si verifichi quindi immettere 120 nella casella Angolo e premere copia. Ripeti con la copia selezionata per creare il tuo terzo e ultimo rettangolo.
Puoi anche aggiungere la tua etichetta nello stesso stile degli altri.
Gruppo (comando + G) gli elementi insieme e duplicarli e regolare il colore in modo che possiamo creare la nostra versione evidenziata.
Seleziona entrambi i cerchi che compongono il corpo della marcia e visita Oggetto> Espandi Aspetto per convertirli in forme.
Seleziona il cerchio più piccolo e i tre rettangoli e Unire loro dal esploratore pannello.
Passare al Strumento di selezione diretta (A) e selezionare un punto di ancoraggio dalla parte interna del cerchio più grande, quindi premere Elimina sulla tastiera un paio di volte per rimuoverlo in modo da rimanere con un grande cerchio pieno.
Seleziona il cerchio più grande così come i denti degli ingranaggi e Unire loro dal esploratore pannello.
Seleziona sia la forma dell'ingranaggio che le barre interne e la forma del piccolo cerchio e seleziona Fronte meno loro dal esploratore pannello.
Assicurati anche di regolare il colore dell'etichetta
Con il Strumento rettangolo arrotondato creare una forma di pillola delle dimensioni seguenti e il nostro tratto interiore.
Disegna un altro Rettangolo arrotondato con le seguenti informazioni e posizione come visto di seguito. Con questa nuova forma di pillola visita selezionata Oggetto> Espandi Aspetto per convertire il tratto in una forma.
Passare al Strumento rettangolo (M) e disegna un rettangolo in modo che copra la metà superiore della forma della pillola che abbiamo creato nel passaggio precedente.
Seleziona sia il rettangolo che la forma della pillola e seleziona Fronte meno dal esploratore pannello.
Passare al Strumento rettangolo (M) e creare un rettangolo con le seguenti dimensioni e posizionarlo come mostrato di seguito.
Crea un altro rettangolo con le seguenti informazioni e posizionamento.
Crea un rettangolo finale con le seguenti informazioni e il posizionamento.
Passare al Strumento ellisse (L) e creare a 3 x 3pt Cerchia e centralo all'interno della forma della pillola a due punti dall'interno della parte superiore.
Duplica il cerchio altre nove volte e distanziarlo di due punti. Ora puoi aggiungere la tua etichetta qui sotto.
Gruppo (comando + G) gli elementi del microfono insieme e duplicarli e cambiarli con il nostro colore di evidenziazione
Seleziona i punti e il rettangolo interno insieme e visita Oggetto> Percorso composto> Crea
Seleziona la forma della pillola e passa il tratto al riempimento del nostro colore di evidenziazione Ora seleziona la forma della pillola e i cerchi / rettangolo e scegli Fronte meno dal esploratore pannello.
Assicurati anche di regolare anche il colore dell'etichetta.
La barra delle schede è finita e pronta per essere aggiunta al tuo prossimo progetto di design per iOS 7. Spero di essere stato in grado di mostrarti alcune tecniche per creare sottili icone ispirate a iOS 7 che puoi facilmente duplicare per altre forme che si adattano alle esigenze delle tue icone di app.
Accentsconagua