Share
Cosa starai creandoNel tutorial di oggi apporteremo alcune piccole modifiche al nostro programma regolare e affronteremo un argomento che avrei voluto fare per molto tempo. Se non l'hai capito dal titolo, beh, creeremo cinque semplici icone che potresti trasformare in icone di avvio Android per qualsiasi app futura che potresti creare o essere coinvolta nella creazione.
Per quanto riguarda il processo, utilizzeremo la tua selezione di base di forme geometriche combinata con il pannello di Allinea e altri strumenti che probabilmente utilizzi già ogni giorno.
Detto questo, prendi una nuova porzione di caffè e cominciamo.
Oh, e non dimenticare che puoi sempre espandere il progetto andando a GraphicRiver, dove troverai tonnellate di fantastici pacchetti di icone progettati da Android, in attesa solo di essere cliccato.
Preferiresti imparare tramite il formato video? Guarda il video tutorial sul canale Envato Tuts + YouTube:
Dato che immagino che tu abbia già installato Illustrator in esecuzione in background, portalo su e configuriamo a Nuovo documento (File> Nuovo o Control-N) utilizzando le seguenti impostazioni:
E dal Avanzate tab:
Consiglio rapido: alcuni di voi potrebbero aver notato che il Allinea nuovi oggetti a Pixel Grid manca l'opzione, perché sto utilizzando la nuova versione CC 2017 del software, in cui sono state apportate grandi modifiche al modo in cui Illustratorgestisce il modo in cui le forme si agganciano al sottostante Pixel Grid.
Dal momento che stiamo per creare le icone utilizzando un flusso di lavoro perfetto per i pixel, vorremmo creare un bel po ' Griglia in modo che possiamo avere il pieno controllo sulle nostre forme, cioè se stiamo eseguendo la versione precedente del software.
Vai al Modifica> Preferenze> Guide e griglia sottomenu e regola le seguenti impostazioni:
Consiglio rapido: puoi imparare di più sulle griglie leggendo questo pezzo approfondito su come funziona il Grid System di Illustrator.
Una volta che abbiamo impostato la nostra griglia personalizzata, tutto ciò che dobbiamo fare per assicurarci che le nostre forme sembrino nitide è abilitare il Aggancia alla griglia opzione trovata sotto vista menu, che si trasformerà in Scatta su Pixel ogni volta che entri Anteprima pixel modalità.
Ora, se sei nuovo all'intero "workflow pixel-perfect", ti consiglio vivamente di provare come creare tutorial artistici pixel-perfect, che ti aiuteranno ad ampliare le tue capacità tecniche in pochissimo tempo.
Con il nuovo documento creato, sarebbe una buona idea strutturare il nostro progetto usando un paio di livelli, poiché in questo modo possiamo mantenere un flusso di lavoro costante concentrandoci su un'icona alla volta.
Detto questo, fai apparire il Livelli pannello e creare un totale di sei livelli, che verranno rinominati come segue:
Il Griglie di riferimento (o Griglie di base) sono un insieme di superfici di riferimento esattamente delimitate, che ci permettono di costruire le nostre icone concentrandoci su dimensioni e consistenza.
Di solito, la dimensione delle griglie determina la dimensione delle icone reali e dovrebbero sempre essere la prima decisione che fai all'avvio di un nuovo progetto, dal momento che vorrai sempre partire dalla dimensione più piccola possibile e costruire su quella.
Ora, dal momento che stiamo per creare le icone con l'intento di farle utilizzare all'interno del sistema operativo Android effettivo, dovremo seguire le linee guida consigliate per le dimensioni e il formato e impostare una griglia personalizzata di 96 x 96 px con un tuttofare 4 px imbottitura.
Inizia bloccando tutto tranne il livello della griglia di riferimento, quindi prendi il Strumento rettangolo (M) e creare a 96 x 96 px arancia (# F15A24) quadrato, che aiuterà a definire la dimensione complessiva delle nostre icone.
Aggiungi un altro più piccolo 88 x 88 px uno (#FFFFFF) che fungerà da nostra area di disegno attiva, dandoci così tutto intorno 4 px imbottitura.
Raggruppa i due quadrati che compongono la griglia di riferimento usando il Controllo-G scorciatoia da tastiera, quindi creare tre copie a una distanza di 24 px gli uni dagli altri, assicurandosi di allinearli al centro del tavola da disegno.
Una volta terminato, blocca il livello corrente e passa a quello successivo in cui inizieremo a lavorare sulla nostra prima icona.
Daremo il via al progetto creando l'icona della batteria, che potrebbe essere usata per un'app di risparmio energetico, o anche uno per l'indicatore di stato dato che è piuttosto semplice.
Detto questo, assicurati di essere sul livello giusto (quello sarebbe il secondo) e quindi di ingrandire la prima griglia di riferimento in modo da poter iniziare.
Inizia creando lo sfondo dell'icona usando un 88 x 88 px cerchio, che coloreremo usando # 00C853, centro allineandolo successivamente alla sottostante area di disegno attiva.
Consiglio rapido: dal momento che Google è stata così gentile da mettere fuori una linea guida per i colori di Material Design, ho finito per mischiare e abbinare un paio di valori, che ho usato per gli sfondi.
Creare il corpo principale della batteria usando a 24 x 40 px rettangolo, che coloreremo usando il bianco (#FFFFFF) e quindi centrare allineato al cerchio più grande, ad una distanza di 20 px dal suo bordo inferiore.
Trasforma la forma che abbiamo appena creato in una struttura, girandola Riempire con i suoi Ictus (Shift-X), e quindi impostando il suo Peso a 4 px e la sua Angolo a Round Join, tutto da dentro il Ictus pannello.
Creare la prima barra dell'indicatore di stato, utilizzando a 12 x 4 px rettangolo (#FFFFFF) o a 12 px tratto largo (#FFFFFF) con un Peso 4 px, che centreremo allineati al corpo della batteria, lasciando a 4 px divario intorno ad esso.
Aggiungi altre due barre dell'indicatore, che impileremo verticalmente a una distanza di 4 px gli uni dagli altri, raggruppandoli insieme (Controllo-Gsuccessivamente.
Completa l'icona aggiungendo il tappo superiore, che creeremo usando un più piccolo 8 x 4 px rettangolo (#FFFFFF) che centreremo l'allineamento al corpo della batteria, ad una distanza di 6 px (4 px per l'imbottitura + 2 px per la metà superiore della corsa).
Una volta che hai finito, non dimenticare di selezionare e raggruppare (Controllo-G) tutte le forme di composizione della batteria, facendo la stessa cosa anche per tutte le sezioni di composizione dell'icona.
Supponendo che sei riuscito a finire la prima icona, bloccare il suo livello e poi passare a quello successivo (quello sarebbe il terzo) e iniziamo a lavorare sulle impostazioni.
Come abbiamo fatto con l'icona precedente, inizia creando il suo sfondo usando un 88 x 88 px cerchio, che coloreremo usando # 2196F3, centro allineandolo successivamente alla sottostante area di disegno attiva.
Iniziare a lavorare sul cursore centrale creando un 4 x 32 px rettangolo o a 32 px colpo alto con a 4 px di spessore Peso, che coloreremo usando il bianco (#FFFFFF) e quindi centrare allineato al cerchio più grande, ad una distanza di 18 px dal suo bordo superiore.
Crea l'indicatore di stato del cursore usando a 12 x 4 px rettangolo (#FFFFFF) che centreremo allineati alla forma precedentemente creata, ad una distanza di 4 px dal suo bordo inferiore.
Aggiungi la sezione inferiore del cursore usando 4 x 12 px rettangolo (#FFFFFF) che posizioneremo appena sotto la barra dell'indicatore di stato, selezionando e raggruppando (Controllo-G) tutte e tre le forme insieme in seguito.
Crea la sezione superiore per il cursore sinistro usando una più piccola 4 x 12 px rettangolo (#FFFFFF), che allineamo al bordo superiore del cursore centrale, posizionandolo a una distanza di 12 px da.
Aggiungi l'indicatore di stato del cursore creando un 12 x 4 px rettangolo (#FFFFFF) che impileremo verticalmente alla forma precedentemente creata, ad una distanza di 4 px dal suo bordo inferiore.
Termina il cursore sinistro aggiungendo la sezione inferiore che creeremo usando a 4 x 32 px rettangolo (#FFFFFF) che posizioneremo sotto l'indicatore.
Una volta che hai finito, seleziona tutte e tre le forme e raggruppale (Controllo-G) come abbiamo fatto con il cursore centrale.
Termina l'icona creando una copia (Control-C> Control-F) del suo cursore sinistro, che posizioneremo sul lato destro del cerchio, ad una distanza di 4 px dal cursore centrale.
Una volta che hai finito, non dimenticare di selezionare e raggruppare (Controllo-G) tutte le sue sezioni che compongono in modo che non vengano separati per caso.
Supponendo che tu sia già passato al livello successivo (quello sarebbe il quarto), ingrandisci la terza griglia di riferimento e iniziamo.
Crea lo sfondo dell'icona usando un 88 x 88 px cerchio, che coloreremo usando # 7C4DFF e quindi centrare l'allineamento all'area di disegno attiva sottostante.
Creare la forma principale per la casella di messaggistica sinistra utilizzando a 32 x 24 px rettangolo, che coloreremo usando il bianco (#FFFFFF) e quindi posizionarsi a una distanza di 20 px dall'area di disegno attiva sia a sinistra che a bordo superiore.
Iniziare a regolare la forma che abbiamo appena creato, accendendo prima il Anteprima pixel modalità (Alt-Control-Y) e quindi aggiungendo un nuovo punto di ancoraggioal suo margine inferiore, ad una distanza di 10 px da quello a sinistra facendo clic con il tasto sinistro con l'aiuto di Aggiungi lo strumento Punto di ancoraggio.
Una volta che hai finito, non dimenticare di uscire Anteprima pixel modalità usando il Alt-Control-Y scorciatoia da tastiera.
Continua a regolare il rettangolo selezionando il suo punto di ancoraggio in basso a sinistracon il Strumento di selezione diretta (A), e poi spingendolo fino in fondo 8 px con l'aiuto di Mossa strumento(tasto destro> Trasforma> Sposta> Verticale> 8 px).
Trasforma la forma risultante in un contorno, ruotando il suo Riempire con i suoi Ictus (Shift-X) e quindi impostando il suo Peso a 4 px e la sua Angolo a Round Join.
Aggiungi la riga di testo più piccola creando un 10 x 4 px rettangolo, che coloreremo usando il bianco (#FFFFFF) e quindi posizionarsi all'interno della piccola finestra di messaggio, allineandola verso l'angolo superiore sinistro, assicurandosi di lasciare a 4 px divario intorno ad esso.
Aggiungi la riga di testo più ampia utilizzando a 20 x 4 px rettangolo (#FFFFFF) che lasceremo allineati a quello precedentemente creato, a una distanza di 4 px dal suo bordo inferiore.
Una volta che hai finito, non dimenticare di selezionare e raggruppare tutte le forme della casella di testo usando il Controllo-G scorciatoia da tastiera.
Crea una copia (Control-C> Control-F) del contorno della piccola casella di testo, quindi riflettere (tasto destro> Trasforma> Rifletti> Verticale) e posizionarlo sul lato destro del cerchio, ad una distanza di 18 px dall'area di disegno attiva si trovano sia il bordo destro che quello inferiore.
Completa l'icona, rimuovendo la sezione sovrapposta della casella di testo (evidenziata in rosso) in modo da finire con l'avere un 4 px divario tra esso e il contorno sinistro. Per fare ciò, aggiungi semplicemente un nuovo punto di ancoraggioal suo bordo superiore e sinistro, e quindi rimuovere tutti gli altri.
Una volta che hai finito, seleziona tutte le sezioni di composizione dell'icona e raggruppale insieme usando Controllo-G scorciatoia da tastiera.
Dato che ora probabilmente conosci già il trapano, blocca il livello e prosegui nello strato successivo (che sarebbe il quinto) e iniziamo a lavorare sulla nostra icona di allarme.
Creare un 88 x 88 px cerchio, che coloreremo usando # FFC107, centro allineandolo alla sottostante area di disegno attiva.
Creare il corpo principale della sveglia usando a 40 x 40 px cerchio, che coloreremo usando il bianco (#FFFFFF) e quindi centrare l'allineamento sull'area di disegno attiva, ad una distanza di 20 px dal suo bordo inferiore.
Trasforma la forma che abbiamo appena creato in una struttura, girandola Riempire con i suoi Ictus, e poi impostando il suo Peso a 4 px dall'interno del Ictus pannello.
Seleziona il Strumento penna (P) e disegnare le lancette dell'orologio usando a 4 px di spessore Ictus con il colore impostato su bianco (#FFFFFF) e il Angolo a Round Join, assicurandosi di lasciare un 4 px gap tra i punti di ancoraggio finalie il cerchio più grande.
Sposta alcuni pixel verso l'alto e crea un 8 x 6 px rettangolo (#FFFFFF) che centreremo allineato alla sezione superiore del cerchio più grande, posizionandolo in modo che finisca per sovrapporsi al IctusLa metà superiore.
Aggiungere un 16 x 4 px rettangolo (#FFFFFF) in cima a quello che abbiamo appena creato, selezionato e raggruppato (Controllo-G) insieme in seguito.
Completa l'icona disegnando i due piccoli segmenti di linea diagonale usando a Colpo di 4 px con il colore impostato su bianco (#FFFFFF). Una volta che hai finito seleziona e raggruppa (Controllo-G) tutte le forme di composizione della sveglia insieme, facendo lo stesso per l'intera icona in seguito.
Raggiungi il sesto e ultimo livello e finiamo il progetto creando l'icona delle foto.
Utilizzando un 88 x 88 px cerchio (# FF6F00) crea lo sfondo dell'icona che centreremo allineato all'area di disegno attiva sottostante.
Creare il corpo principale della foto usando a 36 x 36 px rettangolo, che coloreremo usando il bianco (#FFFFFF), quindi allineare il centro all'area di disegno attiva sottostante, a una distanza di 20 px dal suo bordo superiore.
Trasforma la forma che abbiamo appena creato in una struttura, girandola Riempire con i suoi Ictus (Shift-X), e quindi impostando il suo Peso a 4 px e la sua Angolo a Round Join dall'interno del Ictus pannello.
Usando il Strumento penna (P) disegnare nella linea del divisorio orizzontale usando a 4 px di spessore Ictus (#FFFFFF) che posizioneremo all'interno della forma precedentemente creata, ad una distanza di 4 px dal suo bordo inferiore.
Usando lo stesso 4 px di spessore Ictus (#FFFFFF) con un Round Join, inizia a disegnare la prima montagna posizionando il tuo primo punto di ancoraggiosul bordo sinistro della foto, ad una distanza di 10 px dalla linea di divisione orizzontale che abbiamo appena creato.
Aggiungi la seconda ancoraa una distanza di 10 px sia orizzontale che verticale dal primo. Termina la montagna aggiungendo la terza e ultima ancorasulla linea del divisorio orizzontale, mentre si tiene premuto il tasto Cambio chiave per disegnare una linea diagonale perfetta.
Disegna nella seconda montagna più piccola, usando lo stesso 4 px di spessore Ictus (#FFFFFF), quindi una volta terminato, seleziona e raggruppa tutte le forme di composizione della foto usando il Controllo-G scorciatoia da tastiera.
Crea la parte inferiore dell'icona usando a 28 x 6 px rettangolo, che coloreremo usando il bianco (#FFFFFF) e quindi centrare allineato alla sezione inferiore del contorno della foto, ad una distanza di 4 px.
Termina l'icona, ruotando la forma che abbiamo appena creato in a 4 px contorno spesso (#FFFFFF) con un Round Join, e quindi regolandolo aggiungendo un nuovo punto di ancoraggioal centro del suo bordo superiore, che poi rimuoveremo per aprire il percorso (evidenziato in rosso).
Seleziona la forma risultante e il resto degli elementi di composizione della foto e raggruppali (Controllo-Gin seguito facendo lo stesso per le sezioni di composizione dell'icona.
Spero che tu sia riuscito a tenere il passo con ogni passo e, cosa più importante, abbia imparato qualcosa di nuovo e utile durante il processo. Detto questo, ci vedremo nel prossimo!
Accentsconagua