Share
Cosa starai creandoIn questo tutorial creeremo un set di icone piatte per Apple Watch che possono essere trovate sul menu originale Apple Watch Home Screen per impostazione predefinita. Useremo le forme di base e gli effetti Warp così come alcuni metodi più complicati per creare un design di interfaccia utente di tendenza. Iniziamo!
Le icone di Apple Watch sono progettate in uno stile piatto alla moda molto simile alle icone iOS, che possono essere trovate nell'ultimo iOS su iPhone, iPad o altri dispositivi Apple. Eppure c'è una caratteristica specifica evidente: le icone sono rotonde. In questo tutorial utilizzeremo una griglia circolare per creare una singola base per ogni icona. Puoi scaricare un modello di icona molto bello in vettoriale per renderlo più facile da lavorare.
Se sei interessato a una teoria più approfondita sulla creazione di icone per Apple Watch, ti consiglio vivamente di consultare le linee guida e le specifiche dell'interfaccia umana ufficiale di Apple Watch.
Controlla anche questi articoli molto utili e descrittivi "Creazione di icone per Apple Watch" e "Icone per Apple Watch - The Definitive Guide", in cui le persone condividono i loro modelli e conoscenze gratuiti sulla creazione di icone personalizzate.
Adesso è il momento di andare avanti e creare le icone di Apple Watch! Se vuoi che le tue icone siano più fedeli ai pixel e fedele alla realtà, come le icone originali di Apple Watch, puoi trovare un'immagine campione della schermata Home di Apple Watch in Google Immagini. File> Luogo sulla tua tavola da disegno e usalo come modello, disegnando le tue icone sopra di esso, conservando le dimensioni e le proporzioni desiderate. Altrimenti, basta seguire questo tutorial come guida di ispirazione, non come una rigorosa istruzione sulla creazione di copie esatte delle icone originali.
Inizia aprendo uno dei modelli di icone (per questo tutorial useremo il 80 x 80 px modello di icona per 38 mm orologio). Vai a Visualizza> Nascondi griglia per rendere invisibile la griglia se ti distrae, ma assicurati di avere il Guide intelligenti e Aggancio abilitato (puoi trovarli nello stesso menu) per rendere più facile il lavoro.
Iniziamo a creare la nostra prima icona per l'app Time posizionando a 4 x 4 px anche il cerchio al centro del modello. Fare doppio clic sul Strumento ellisse (L) per chiamare la finestra delle opzioni pop-up, quindi andare al menu Allineare pannello per allineare il cerchio orizzontalmente e verticalmente sulla tavola da disegno. Riempi il cerchio con l'arancione (# FF9506).
Utilizzare il Strumento rettangolo (M) creare un 2 x 40 px seconda mano del nostro orologio, riempita con lo stesso colore arancione, e posizionarla lungo la linea guida centrale, come mostrato nello screenshot.
Puoi allineare la mano all'oggetto chiave, facendo clic sul cerchio mentre si tiene premuto il tasto alt chiave.
Copiamo la lancetta dei secondi, riducila e ruotala -60 gradi, posizionandolo lungo la Guida, come mostrato di seguito.
Ora formeremo il corpo della lancetta dei minuti. Fai un nero 4 x 30 px rettangolo e utilizzare il Angoli vivi caratteristica per rendere entrambe le estremità arrotondate tirando i piccoli segni del cerchio con il Strumento di selezione diretta (A) al loro massimo (2 px raggio d'angolo nel nostro caso).
Posiziona la mano sul punto corretto lungo la linea guida (puoi renderla un po 'più piccola, in modo che si adatti al cerchio interno della base dell'icona).
Crea un altro rettangolo di 4 x 20 px dimensione per la lancetta delle ore. Rendetelo arrotondato, ruotate verso 60 gradi e posizionarlo sul lato opposto dalla lancetta dei minuti.
Infine, crea un 80 x 80 px ellisse bianca con il Strumento ellisse (L) per la base dell'icona e posizionarlo sotto tutti gli altri oggetti. Grande! La nostra prima icona è pronta; passiamo al prossimo.
Ora creeremo l'icona Mail. Iniziare a formare la busta facendo un 50 x 33 px rettangolo di qualsiasi colore.
Aggiungi un triangolo con 2 pt Stroke usando a Strumento Poligono con 3 lati valore o con il Strumento penna (P). Oggetto> Espandi il triangolo per trasformarlo in curve.
Aggiungi un altro triangolo sul lato superiore della base della busta, fai arrotondare l'angolo inferiore ed espandi la forma. Puoi cancellare le parti superiore e inferiore dei rettangoli con il Strumento Gomma (Shift-E), come non avremo bisogno di loro.
Elimina la parte superiore del triangolo inferiore con il Strumento Gomma (Shift-E) e Unire entrambe le parti dei triangoli in esploratore. Infine, crea una copia della forma di busta di base (Control-C> Control-F), seleziona sia il rettangolo che la forma superiore e usa il intersecare funzione di esploratore per tagliare le parti al di fuori della busta.
Seleziona nuovamente il rettangolo e le strisce e applica il Fronte meno funzione di esploratore per tagliare le linee. Cambia il colore della busta in bianco e aggiungi una base circolare alla nostra icona, riempiendola con sfumatura lineare dal blu più scuro (# 2066F0) in alto a più chiaro blu (# 1DD4FD) in basso.
La nostra prossima icona è per l'app Music, che consiste nell'unico elemento: un segno di nota musicale. Iniziare a formare la nota con a 27 x 11 px rettangolo. Seleziona i punti di ancoraggio sul lato sinistro della forma con il Strumento di selezione diretta (A) e trascinali verso il basso per rendere la forma distorta.
Utilizzare il Strumento rettangolo (M) per creare altre due forme e iniziare a formare la "gamba" della nota.
Seleziona tre punti di ancoraggio del quadrato inferiore con il Strumento di selezione diretta (A) e renderli arrotondati. Poi Unire le forme in esploratore e rendere l'angolo tra le forme arrotondato, usando il Angoli vivi caratteristica.
Aggiungi la seconda parte della nota e rendi la forma generale più liscia e arrotondata. Completa con l'icona creando la base, riempita con una sfumatura lineare da arancione (# FA5D3B) al rosa (# FF2968).
Ora passiamo a un set di icone collegate al tempo e tutte create in un unico stile. Inizia formando un 48 x 48 px persino un cerchio e un cerchio più piccolo all'interno. Utilizzare il Fronte meno funzione di esploratore per creare un anello.
Crea un anello ellittico più piccolo all'interno della prima forma e aggiungi due linee incrociate, allineate al centro.
Aggiungi una linea orizzontale nella parte superiore della forma e piegala con l'aiuto di Effetto> Ordito> Arco. Impostare il Curvatura orizzontale valore a -35%.
Aggiungi un'altra linea piegata nella parte inferiore del nostro globo e finisci con questa icona espandendo la forma del globo e formando una base sfumata con il fondo arancione scuro (# ff7632) e la parte superiore arancione chiaro (# ff9408). Aggiungi un cerchio più piccolo di colore arancione più scuro (# e45221) e nasconderlo dietro la forma del globo, dandogli più contrasto.
Per la nostra prossima icona, il cronometro, useremo la base dall'icona dell'orologio mondiale che abbiamo creato in precedenza. Forma il centro del cronometro facendo un 8 x 8 px ellisse, allineata con a 2 x 25 px rettangolo per la seconda mano dell'orologio.
Utilizzare il Strumento rettangolo (M) per aggiungere piccoli dettagli alla parte superiore del nostro cronometro. Rendi il pulsante del cronometro più arrotondato, usando gli angoli live e impostando il raggio dell'angolo su 1,4 px.
Passiamo all'icona del timer: ha la stessa base dell'icona del cronometro. Forma a 2,5 x 13 px striscia nella parte superiore centrale dell'anello con il Strumento rettangolo (M). Quindi prendi il Strumento Poligono, impostando il lati quantità a 3, o usare il Strumento penna (P) formare un triangolo. Mettilo come mostrato in uno screenshot qui sotto, come se fosse una fetta di torta.
Seleziona sia l'anello bianco di base sia la forma triangolare e usa il Fronte meno funzione per tagliare la parte sinistra dell'anello. Aggiungi un piccolo 6 x 6 px cerchio al centro della nostra icona.
Infine, ruota il cerchio in modo che il suo punto di ancoraggio superiore sia circa 45 gradi a sinistra. Trascina il punto di ancoraggio con il Strumento di selezione diretta (A), estendendo la forma. Converti punto di ancoraggio selezionato in angolo o con l'aiuto di Convertire pulsante nel pannello di controllo superiore o facendo clic con il tasto Strumento Punto di ancoraggio (Shift-C), trasformando così la nostra forma nella mano di un orologio.
La nostra ultima icona in questo set è l'allarme. Ha la stessa base con l'anello bianco delle precedenti icone arancione. Le lancette dell'orologio sono formate da due strisce strette fatte con il Strumento rettangolo (M).
Formiamo la parte superiore della sveglia facendo un cerchio uniforme con il Strumento ellisse (L) e dividendolo in due parti uguali facendo clic sui punti di ancoraggio laterali con il Scissors Tool (C). Posiziona le due metà sopra la sveglia e aggiungi due piccole "gambe" nella parte inferiore per completare l'icona.
L'icona di Maps è piuttosto semplice e non contiene molti elementi. Inizia formando il suo centro con a 40 x 40 px cerchio di un blu (# 087eff) colore. Forma una freccia a compasso da a 17 x 25 px triangolo, verso l'alto.
Aggiungi un beige (# e5decb) icona base. Vai a Oggetto> Percorso> Aggiungi punti di ancoraggio eseleziona il punto di ancoraggio al centro sul lato inferiore e tiralo su un po 'formando la punta della freccia.
Posiziona un'ampia striscia verticale, realizzata con a 26 x 83,5 px rettangolo, attraverso l'icona, e unirlo con un'altra striscia larga, posizionandola perpendicolare. Nascondere la forma incrociata dietro il cerchio blu con la freccia. Selezionare sia la base dell'icona e le strisce incrociate e utilizzare il Dividere funzione di esploratore per dividere la forma in tre parti.
Riempi le parti della base dell'icona con il verde (# 78c73d) e rosa chiaro (# fbc7d2) colori.
Passiamo all'icona Meteo. Riempi la forma del cielo base con sfumatura lineare dal blu più scuro (# 2066f0) in alto a più chiaro blu (# 1dd4fd) in basso. Aggiungi un giallo (sfumatura lineare da # ffc505 a # fee403) cerchio per il sole nella parte sinistra dell'icona. Iniziare a formare le nuvole con due cerchi: a 25,5 x 25,5 px cerchio al centro del modello e a 21 x 21 px cerchia più vicino alla parte destra dell'icona.
Creare un 43 x 16 px rettangolo e arrotondare gli angoli con 8 px raggio dell'angolo. Allinea il rettangolo con i cerchi e Unire tutte e tre le forme in esploratore per formare una nuvola liscia e arrotondata.
Riempi la nuvola di colore bianco e rendila semitrasparente, abbassando la Opacità a 90%.
Passiamo all'icona Fotocamera. Crea un cerchio di base grigio, pieno di sfumature lineari da grigio scuro (# 8e9196) in basso a grigio chiaro (#dadcddin alto, e inizia a formare la silhouette della telecamera da un grigio scuro (# 3c3c3c) rettangolo arrotondato.
Aggiungi un più piccolo 30 x 17 px rettangolo in alto e rendere il suo angolo in alto a sinistra arrotondato con 7 px raggio dell'angolo. Unire le forme e rendono anche l'angolo tra le forme arrotondato.
Aggiungi una striscia stretta nella parte superiore della fotocamera e usa il Fronte meno funzione per tagliarlo.
Forma l'icona dell'otturatore da a 9 x 4 px rettangolo e posizionarlo al centro del nostro modello. Utilizzare il Strumento penna (P) aggiungere una freccia rivolta verso il basso all'otturatore. Impostare il Peso del colpo a 4 pt e fai i cappucci e l'angolo della linea arrotondati nel Ictus pannello.
Aggiungi i dettagli finali alla nostra fotocamera: forma un giallo brillante (# fac81b) indicatore di a 6 x 6 px taglia. Inoltre, crea un grande cerchio con 4 pt Peso del tratto. Posiziona il cerchio nell'angolo in basso a destra della fotocamera, come mostrato nello screenshot.
Oggetto> Espandi il grande cerchio, trasformandolo nel ring. Seleziona sia l'anello che la fotocamera e applica Fronte meno per tagliare l'anello, formando il vetro dell'oggetto. Quindi seleziona tutte le parti grigio scuro della nostra fotocamera e trasformale in una singola forma composta premendo Control-8.
Infine, usa il Strumento di creazione forme (Shift-M) o il intersecare funzione di esploratore per tagliare le parti non necessarie della fotocamera al di fuori della base della nostra icona.
Facciamo un telefono per l'icona del telefono. Creare un 8 x 40 px rettangolo e usa un Effetto Arc Warp con 27% Curvatura verticale valore per piegare il rettangolo sul lato sinistro. Aggiungi due 17 x 20 px rettangoli nella parte superiore e inferiore del telefono e arrotondare gli angoli, rendendo le forme morbide. Unire tutte le parti del telefono in esploratore.
Smussare il lato sinistro del portatile eliminando i punti di ancoraggio non necessari con Elimina strumento Punto di ancoraggio (-) e intorno agli angoli interni con il Angoli vivi caratteristica. Infine, ruotare il telefono su 45 gradi e posizionarlo sopra la base dell'icona, riempito con una sfumatura lineare dal verde più chiaro (# 86fb71) a verde più scuro (# 0fd51c).
Formiamo l'icona del messaggio sulla stessa base verde che abbiamo usato in precedenza. Fare un 40 x 40 px cerchio bianco e allungarlo leggermente sui lati, facendo schizzare la forma 48 x 40 px. Aggiungi un piccolo triangolo nella parte inferiore della forma bianca, formando una nuvoletta. Rendi leggermente arrotondato l'angolo inferiore del triangolo. Utilizzare il Effetto Arc Warp con -Curvatura verticale 36% valore per rendere il triangolo leggermente arcuato.
Ecco come appare l'icona completata.
La nostra prossima icona è l'icona dell'app Remote, che è anche molto semplice e consiste in un singolo elemento. Prima di tutto, forma una base sfumata (dal blu scuro # 2066f0 in basso a blu più chiaro # 1dd4fd) in cima. Aggiungi un tratto bianco con 5,3 pt Peso del tratto e Allineare esso dentro. Posizionare un 30 x 30 px triangolo bianco al centro della nostra icona.
Infine, fai arrotondare gli angoli del triangolo con a 2.5 Raggio dell'angolo. Grande! L'icona è pronta, quindi andiamo avanti.
L'icona Allenamento raffigura una sagoma stilizzata di un uomo che corre. Crea una base icona luminosa, riempita con sfumatura lineare da giallo-verde (# c2ec38) in alto a verde in basso (# a3fc3f).
Prendi il Strumento penna (P) e creare linee separate per le braccia piegate, le gambe e il busto con 3 pt Peso del tratto e tappi e angoli arrotondati. Aumentare lo spessore del Peso del colpo della linea del busto a 6 pt e aggiungere un 9 x 9 px cerchio per la testa.
Oggetto> Espandi le linee e riempire le forme con il colore nero.
L'icona Impostazioni è costituita da un ingranaggio. Forma la base del dente da a 48 x 48 px cerchio con un centro ritagliato, creando un anello. Aggiungi tre linee con 3 pt Peso del tratto, collegato al centro del modello di icona.
Ora abbiamo bisogno di aggiungere le increspature al nostro ingranaggio. Forma a 5 x 9 px rettangolo e rendere la sua parte superiore un po 'più stretta. Rendi gli angoli superiori arrotondati con 1.6 Raggio dell'angolo. Posiziona le increspature sulle parti superiore e inferiore della base del dente.
Usiamo il Ruota strumento (R) per aggiungere più elementi. Seleziona entrambi i ripples, fai doppio clic sul Ruota strumento (R) per chiamare la finestra delle opzioni pop-up e impostare il Ruotare valore a 360/18. In questo modo, Adobe Illustrator calcolerà automaticamente il valore corretto per 18 forme. premi il copia pulsante.
stampa Control-D più volte per ripetere la nostra ultima azione, aggiungendo più elementi. Per finire con questa icona, seleziona tutti i ripples, cambia il colore di riempimento in bianco e Ruotare tutti insieme da -10 gradi.
La nostra prossima icona è un fiore stilizzato per l'app Foto. Inizia formando il petalo da a 20 x 30 px rettangolo e arrotondare gli angoli con 10 px Raggio dell'angolo. Duplica il petalo e posiziona la sua copia nella parte inferiore del modello di icona, come mostrato nello screenshot qui sotto. Seleziona entrambi i petali e usa il Ruota strumento (R) per fare altre otto copie dei petali, applicando il Angolo 360/8 valore e premendo il tasto copia pulsante.
stampa Control-D più volte per formare il fiore a otto petali. Passa i petali a Modalità di fusione multipla e abbassare il Opacità a 80%. Applichiamo il colore appropriato a ciascun petalo, partendo da quello centrale superiore e spostando l'orologio in senso orario: arancione (# fa9700), giallo (# f0e22c), verde (# b5d558), turchese (# 6ec19d), blu (# 71b5e1), viola (# 8f60c3), rosa (# d782a4) e rosso (# ff2c2c).
Metti il fiore sulla base dell'icona bianca.
L'icona Azioni è composta da un diagramma minimalista. Iniziare a formare il diagramma creando un blu brillante (# 02a6f5) linea verticale di 3 pt taglia con il Strumento Linea (\). Mettilo nel mezzo del nostro modello, su un buio (# 3f3f3f) icona base.
Aggiungi un piccolo cerchio blu sopra la metà del modello e applica un grigio scuro (# 3f3f3f) 1 punto Ictus ad esso per separarlo visivamente dalla linea. Aggiungi altre quattro linee su entrambi i lati dell'icona, con un grigio più chiaro (# 555555) 3 pt Stroke.
Oggetto> Espandi le linee e tagliare le parti non necessarie al di fuori della base dell'icona, o con il Strumento di creazione forme (Shift-M) o con l'aiuto di esploratore.
Termina con l'icona aggiungendo una linea a zigzag Ictus da 1,5 pt per la grafica usando il Strumento penna (P). Espandi la linea e falla adattarla alla base dell'icona.
L'icona Attività è più complicata e interessante da realizzare. Consiste di tre cerchi sfumati colorati. Per formare un tale cerchio, prima di tutto dobbiamo creare un gruppo di miscelazione.
Fai due uguali 6 x 7 px rettangoli di rosa (# ff2b91) e rosso (# f1281e) colori. Seleziona i rettangoli e vai a Oggetto> Miscela> Crea. Puoi modificare le impostazioni in Oggetto> Miscela> Opzioni di fusione, l'applicazione Colore liscio fare una bella miscela senza soluzione di continuità. Trascina il gruppo di fusione creato su Spazzole pannello e creane uno nuovo Pennello artistico con le impostazioni predefinite.
Crea un grigio scuro (# 393.839) Cerchio base per la nostra icona e posiziona un altro cerchio sopra di esso, applicando il nostro pennello come a Ictus. Regola le dimensioni del cerchio, in modo che si adatti al bordo esterno del modello di icona. Impostare il Peso del colpo a 1 punto e Oggetto> Espandi Aspetto per trasformare la pennellata in aforma. Ruota o capovolgi la forma con il Rifletti strumento (O) orizzontalmente, se necessario, in modo da avere il lato rosa del cerchio a sinistra e il rosso a destra.
Crea un piccolo rosa (# ff2b91) cerchia e posizionalo nella parte superiore centrale dell'anello colorato, in modo che si adatti all'altezza della forma, nascondendo la connessione dei due colori.
Ora dobbiamo aggiungere una dimensione all'anello formando un'ombra sottile. Come puoi notare, l'anello è stato diviso in più parti dopo che l'abbiamo espanso. Questo è esattamente ciò di cui abbiamo bisogno! Seleziona il pezzo rosso superiore dell'anello, copia e Incolla davanti (Control-C> Control-F). Riempi la copia con sfumatura lineare da rosso scuro (# a11b17) al bianco e passare a Modalità di fusione multipla, rendendo invisibile la punta bianca del gradiente.
Usa la stessa tecnica per creare altri due anelli colorati all'interno della prima forma. Crea i pennelli artistici da un giallo (# d8ff06) e verde (# 86e402) gruppo di fusione e da un turchese (# 06ffaa) e blu (# 06e3f9) miscela. Completa con l'icona aggiungendo cerchi e applicando ombre delicate.
Il prossimo è l'icona del libretto, che consiste di quattro piccoli pittogrammi: una carta di credito, un aereo, una cinepresa e una tazza di caffè. Questi pittogrammi sono minimalisti e fatti di forme base con l'aiuto di esploratore e Angoli vivi caratteristica. Qui sotto puoi vedere uno screenshot passo passo, che mostra come combinare le forme per ogni pittogramma.
La base dell'icona è composta da quattro strisce di colori diversi: rosso (# ff4e46), blu (# 439eca), verde (# 3dca36) e arancione (# ffa02b), ciascuno di 20 px altezza. Crea un valore predefinito 80 x 80 px cerchio base per la nostra icona ed eliminare i pezzi non necessari delle strisce con l'aiuto del Strumento di creazione forme (Shift-M) selezionando tutti gli oggetti e facendo clic sulle parti indesiderate tenendo premuto il tasto alt chiave.
Forma un punto uniforme 3,5 x 3,5 px cerchio, attraversando il lato superiore della striscia arancione e copiarlo a destra tenendo entrambi alt e Cambio e trascinando la forma. stampa Control-D più volte per fare più copie del cerchio. Quindi seleziona tutte le copie e trasformale in a Percorso composto premendo Control-8. Seleziona ilcerchi e la striscia arancione e applicare il Fronte meno funzione per tagliare i fori, rendendo la striscia perforata.
Infine, posiziona i pittogrammi creati in precedenza e allineali al centro della nostra icona.
L'ultima icona del nostro set è l'icona del calendario. Consiste di testo, realizzato con il font Helvetica Neue e una semplice base di icone bianche.
Questa è stata una lunga ma eccitante ricerca! Abbiamo creato un totale di 20 icone dell'app Home Screen, utilizzando forme di base, effetti di distorsione e alcuni trucchi ed effetti. Spero ti sia piaciuto seguire questa guida e trovare alcune tecniche utili. Buona fortuna con i tuoi disegni!
Accentsconagua