Share
Con questo tutorial mi piacerebbe mostrarti alcuni trucchi per creare linee e bordi puliti quando lavori con la tendenza del design piatto, in Adobe Illustrator. Semplici stili con livelli e riutilizzo di stili grafici per aiutare il tuo flusso di lavoro a essere più efficiente, quindi dovresti essere in grado di creare un set di icone corrispondenti in pochissimo tempo.
Per iniziare, creiamo una tavola d'arte che sia 500 x 500 px. Dato che le nostre icone sono piuttosto modulari e hanno molte linee rette, sarebbe meglio lavorare con una griglia per garantire forme nitide perfette ai pixel. Quindi creiamo una griglia che sia 1px e poi mostra e Aggancia alla griglia come descritto di seguito.
Mentre fai le tue icone cerca di ricordare l'uso dell'icona stessa e dove sarà posizionata. Per queste icone rimarrò con una dimensione generale di 128 x 12 px che è piuttosto comune nel mondo delle icone. Visto che seguiamo la tendenza del design piatto, ci atteniamo ai colori di base e agli angoli acuti di 45º con le ombre esagerate.
Creerò il wireframe di queste icone con forme di base, quindi regolando lo stile delle forme con una manciata di elementi Stili grafici. Quindi per iniziare seleziona il Strumento rettangolo arrotondato e crea un rettangolo che è 20 x 80 px e attaccalo alla lavagna.
Quindi, selezionare il Strumento ellisse (L) e creare diversi cerchi concentrici. Il primo essere 70 x 70 px, poi 55 x 55 px, poi 40 x 40 px, e infine 15 x 15 px. Ora disponili come vedi sotto.
Seleziona il Strumento rettangolo (M) e disegna alcuni che coprono metà delle forme che abbiamo appena creato. Li useremo per ritagliare le forme che diventeranno in seguito aree ombreggiate. L'altezza / larghezza non ha importanza, assicurati solo che si allineano esattamente al centro delle altre forme. Creeremo anche un'ombra proiettata in modo da disegnare un quadrato e ruotarlo 45º e posizionarlo in modo che il bordo della linea diagonale corrisponda al fondo del cerchio più esterno e al rettangolo inferiore arrotondato.
Usando il esploratore pannello useremo una combinazione di Unire, Fronte meno, e intersecare per cambiare queste forme rettangolari nelle nostre sovrapposizioni di ombre. Ricorda quando usi questi strumenti che influenzerà la forma, quindi dovrai duplicare questi oggetti per creare il risultato desiderato. Nella schermata qui sotto ho applicato il colore rosso all'oggetto e il livello bianco sarà le nostre ombre in seguito.
Ora dovremo fare ombra al cast. Inizia duplicando la maniglia più in basso e le forme dei cerchi più grandi Unire li in un unico oggetto. Duplica questa nuova forma e spingila verso sinistra 15px. Visita Oggetto> Miscela> Opzioni di fusione ... e inserisci abbastanza passaggi in modo che ci sia una transizione graduale (con cui ho bloccato 50), poi Rendere la miscela. Adesso Espandere l'oggetto e Unire loro per formare una singola forma. Zoom in forma abilitare il Strumento di selezione diretta (A) e seleziona i punti extra che non sono necessari e rimuovili, assicurandoti di chiudere i percorsi (Comando + J) una volta che hai finito. Infine allinea questo oggetto alla parte posteriore di tutte le altre forme se non lo hai già fatto.
Dato che le nostre icone sono solo "Sorta Flat", facciamo alcuni punti salienti. Seleziona le forme dell'elemento principale (quelle in rosso) e duplicale due volte. Usando le frecce sulla tastiera, sposta la parte più duplicata sopra 1px. La direzione che spinge in alto l'elemento più dipende dalla direzione del colore. Quindi, per la forma della maniglia inferiore, spingerla verso sinistra, ma per la forma rotonda interna, spostarla verso destra verso l'area rossa. Seleziona le due duplicazioni e usa Fronte meno lasciare una scheggia di luce. Puoi vederlo in verde nello screenshot qui sotto.
Con le nostre forme principali completate diamo loro uno stile. Seleziona tutti gli elementi che compongono la lente d'ingrandimento e ruotali 45º Antiorario.
Ora seleziona tutti gli elementi che compongono le ombre. Queste sono le parti bianche sul manico e gli anelli esterni, così come l'ombra del lungo cast. Riempi questi con il nero piatto e rilascia il Opacità a 15% e assicurati di rimuovere tutti i bordi che potresti avere. Una volta fatto, vai a Finestra> Stili grafici e quando viene visualizzata la finestra, fare clic su Nuovo pulsante elemento in basso a destra accanto all'icona del cestino per creare uno stile grafico fuori da questo effetto.
Seleziona l'area della maniglia e vai al tuo Aspetto (Finestra> Aspetto) pannello e inserisci le informazioni visualizzate di seguito. Il colore di base sarà un colore grigio piatto, quindi aggiungeremo un altro livello sopra quello riempito con una sfumatura da nero a bianco impostata su 45º con un Opacità di 25% e Modalità di fusione impostato copertura. Una volta completato, salvalo come a Stile grafico anche.
Seleziona il cerchio più in basso e applicheremo praticamente lo stesso stile, solo che useremo una tonalità più chiara di grigio. Ancora una volta, salva questo come a Stile grafico.
Seleziona il cerchio interno e applica lo stesso stile più leggero che abbiamo appena creato, invertire la sfumatura in modo che sia da chiaro a scuro.
Seleziona il cerchio più interno che sarà il nostro obiettivo. Lo stesso stile verrà usato anche per questa forma, solo che al posto del grigio useremo un accento di blu. Assicurati di creare anche un Stile grafico di questo pure.
Infine, aggiungeremo i nostri punti salienti. Selezionare tutti gli elementi verdi e riempirli con un bianco piatto, quindi rilasciare il Opacità giù verso 25%. Assicurati di salvare questo come a Stile grafico anche. L'ultimo cerchio rimasto sulla forma è un punto forte, quindi lo lasceremo bianco 100%, assicurati e rimuovi il bordo.
Creiamo le tacche per la nostra forma dell'ingranaggio. Seleziona il Strumento rettangolo arrotondato e crea un rettangolo che è 20 x 110 px e attaccalo alla lavagna. Ora duplica questa forma altre tre volte e ruotale su 45º angoli per formare un fiore.
Quindi, selezionare il Strumento ellisse (L) e creare diversi cerchi concentrici. Il primo essere 90 x 90 px, poi 60 x 60 px, e infine 30 x 30 px. Ora disponili come vedi sotto.
Seleziona la forma del fiore e il cerchio più in basso e Unire loro. Quindi seleziona il cerchio più piccolo e duplicalo. Ora seleziona uno dei piccoli cerchi duplicati e le forme più grandi e Fronte meno lasciare un intero nel mezzo.
Ora facciamo di nuovo delle ombre. Inizia creando rettangoli che coprono metà delle forme. Dato che abbiamo le protezioni extra, aggiungeremo anche delle ombre a quelle. Allineare gli angoli per le ombre degli ingranaggi nel punto in cui il cerchio incontra la fine del cambio.
Ora crea l'ombra del cast. Duplica la forma dell'ingranaggio inferiore e spingila sopra 15px come la nostra precedente icona. Miscela le due forme quindi Espandere e Unire loro.
Ora crea i punti salienti. Ricordarsi di spingere verso il colore rosso
Infine, ruota le forme 45º e applica il nostro Stile grafico da prima. Questa icona è abbastanza semplice, quindi utilizzeremo solo lo stile grigio scuro, assicurandoti di invertire la sfumatura per il cerchio interno.
La nostra icona occhio utilizza molti cerchi. Quindi, seleziona il Strumento ellisse (L) e creare diversi cerchi concentrici. Il primo essere 120 x 120 px, poi 50 x 50 px, e infine 20 x 20 px. Ora disponili come vedi sotto.
Seleziona il cerchio più grande e passa a Converti strumento punto di ancoraggio (MAIUSC + C). Seleziona i due punti sia a sinistra che a destra, quindi fai clic per renderli più nitidi. Ora seleziona il Strumento di selezione diretta (A) spingere verso il basso l'ancoraggio ricurvo superiore 20px. Ripeti anche questo per il fondo, solo, spingilo al contrario.
Ora seleziona tutte queste forme insieme e ruotale 45º senso orario. Dopo aver sistemato le ombre e le luci, lo ruoteremo di nuovo in modo che siano nella giusta prospettiva.
Seleziona il Strumento ellisse (L) e creare un ovale che è 15 x 20 px e allinearlo come mostrato di seguito.
Crea le ombre e le luci come abbiamo fatto prima. Dividere le forme a metà con i rettangoli e usare il esploratore pannello.
Seleziona tutte le nostre forme ancora una volta e ruotale di nuovo 45º, quindi applica i nostri stili grafici. Usando il nostro colore grigio più chiaro per la parte dell'occhio principale, il blu con la sfumatura invertita per l'iride e un grigio scuro che introdurremo ora per la pupilla.
Siamo a metà del nostro set di icone! Creiamo uno che rappresenta chat o commenti. Con il Strumento rettangolo arrotondato crea un rettangolo che è 80 x 75 px
Ora con il Strumento rettangolo (M) crea un rettangolo che è 25 x 15 px quindi allinearlo verso il basso e 15px da destra.
Con il Strumento ellisse (L) crea tre cerchi che sono 15 x 15 px e allinearli al centro del rettangolo arrotondato come mostrato di seguito.
Abilita il Strumento di selezione diretta (A) e seleziona il punto in basso a sinistra che costituisce il rettangolo in basso, quindi rimuovilo per formare un triangolo ad angolo retto, assicurandoti di chiudere il percorso quando hai finito.
Seleziona il rettangolo arrotondato e il triangolo e Unire loro per fare una forma completa. Una volta uniti, duplica questa forma a fumetto e girala orizzontalmente e spostala verso il basso e verso destra 15px sotto le altre forme.
Come abbiamo fatto con l'icona occhio, selezionare tutte le forme quindi ruotarlo 45º. Lavoreremo sulle ombre e sui punti salienti in questa angolazione in modo che quando ruotiamo di nuovo, vengono proiettati correttamente.
Come nelle icone precedenti, creiamo bordi nitidi per indicare ombre e luci. Sii consapevole delle tue ombre. Vuoi creare l'illusione che i cerchi stiano proiettando un'ombra davvero lunga sulla bolla e che la bolla in alto stia proiettando un'ombra su quella inferiore. Per le ombre proiettate dai cerchi userò semplicemente un rettangolo che ha la stessa altezza del cerchio e abbastanza largo da stare sopra la bolla, quindi rimuovere l'eccesso.
Ora ruota le forme indietro e applica i tuoi stili grafici. La bolla in basso sarà il nostro grigio più scuro, mentre quella in alto sarà il nostro grigio più chiaro ei punti saranno il nostro colore blu
Passiamo al nostro orologio. Con il Strumento ellisse (L) creare diversi cerchi concentrici. Il primo essere 100 x 100 px, poi 75 x 75 px, e infine 10 x 10 px. Ora disponili come vedi sotto.
Ora creeremo le lancette dell'orologio. Seleziona il Strumento rettangolo (M) crea un rettangolo che è 10 x 30 px, un altro che è 10 x 20 px, e un altro che è 2 x 30 px. Ora allineali in modo che la parte inferiore dei rettangoli incontri il centro dei cerchi.
Passare al Ruota strumento (R) e seleziona il rettangolo lungo e magro. Posiziona il cursore sul punto centrale della forma, quindi fai clic e trascina il punto nella parte inferiore del rettangolo assicurandoti che rimanga esattamente al centro e scatti verso il basso. Ora ruota la forma 135º senso orario. Ripeti questo passaggio per il pezzo di rettangolo corto, ruotalo solo in senso antiorario.
Seleziona il cerchio più piccolo al centro e la mano lunga e sottile e Unire loro insieme e li posizionano sopra le altre mani. Ora seleziona tutte le forme e ruota 45º
Taglia le forme a metà come abbiamo fatto prima e crea la nostra ombra per il cast e le luci. Per il momento clou, tuttavia, mi è piaciuta l'idea di avere un punto culminante all'interno dell'area scura che sarebbe caduta nella sezione inferiore. questo gli dà un pop di dimensionalità che non sarebbe lì dovrebbe essere usato come abbiamo fatto.
Ruota le forme indietro e applica il tuo Stili grafici. La faccia sarà il grigio chiaro, il bordo esterno e le lancette dei minuti e delle ore saranno il nostro grigio più scuro, e la lancetta dei secondi sarà il nostro colore di accento
Per la nostra ultima icona creiamo un calendario. Seleziona il Strumento rettangolo arrotondato e crea un rettangolo che è 90 x 80 px.
Duplica questo rettangolo arrotondato e allinearlo nell'angolo in basso a destra. Non ci sono punti in cui non si allinea esattamente, ma la funzione di snap dovrebbe farti sapere quando sei vicino. Una volta lì, sposta il duplicato verso l'alto e verso sinistra 20px. Ora nel esploratore pannello scegli Dividere dalla lista delle icone in basso. Quindi passare al Strumento di selezione diretta (A) e selezionare la forma inferiore esterna e rimuoverla. Quindi rimuovi l'angolo in basso a destra in modo da lasciarti con una scala 45º bordo.
Seleziona il Strumento rettangolo (M) crea un rettangolo che è 90 x 25 px e allinearlo alla parte superiore della forma. Dopo aver duplicato il rettangolo arrotondato di grandi dimensioni in basso, seleziona sia il rettangolo in alto che quello arrotondato e utilizza intersecare dal esploratore pannello.
Quindi, creane due Rettangoli arrotondati che sono forti 15 x 30 px e gli angoli sono arrotondati abbastanza da formare una pillola. Quindi allinearli alla parte superiore dell'elemento come mostrato di seguito.
Passare al Tipo Strumento (T) e digitare un numero. Chiunque tu voglia, userò "9" come è il primo che mi è venuto in mente. Per il carattere usiamo "Helvetica" con una dimensione di 50px. Non andare a Oggetto> Espandi e convertire il tipo in un percorso.
Seleziona tutte le forme e ruotalo 45º. Ora aggiungi le ombre e le luci come abbiamo fatto prima. Tieni presente che la piega che abbiamo creato nell'angolo in basso proietterà un'ombra. Per questo creeremo un rettangolo con la stessa altezza della piega e intersecare da una duplicazione del rettangolo in basso.
Infine ruota le forme indietro e applica i tuoi stili grafici. Il rettangolo arrotondato in basso sarà il nostro grigio chiaro, la piega sarà un bianco piatto, le forme della pillola saranno il nostro grigio scuro, il rettangolo in alto sarà il nostro colore di accento, e il numero sarà lo stesso grigio scuro della nostra pupilla nel icona dell'occhio che abbiamo creato.
E con questo il nostro set di icone è completo. Sono andato avanti e ho aggiunto un colore di sfondo piatto utilizzando un grigio scuro per aiutare le icone a risaltare. Sentiti libero di spaziarli come preferisci sulla tua tavola d'arte.
Spero di essere stato in grado di mostrarti che anche se le icone piatte sono intrinsecamente "piatte", non devono essere prive di stile. Quali altre icone puoi trovare?
Accentsconagua