Share
Cosa starai creandoNel tutorial di oggi, tireremo fuori i nostri cappelli da architetto e impareremo come "costruire" il nostro insieme miniaturizzato di edifici più iconici di New York, utilizzando nient'altro che le forme e gli strumenti di base con cui lavoriamo quotidianamente.
Quindi, supponendo che tu abbia già riempito la tua tazza di caffè, proviamoci!
E non dimenticarti, puoi sempre espandere la tua collezione andando su GraphicRiver, dove troverai tonnellate di fantastici edifici vettoriali.
Dato che spero 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 alla Pixel Grid sottostante.
Dato che creeremo le icone usando un flusso di lavoro perfetto per i pixel, vorremmo creare una piccola griglia in modo da avere il pieno controllo sulle nostre forme, cioè se stiamo eseguendo la versione precedente di il 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 quattro 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 effettive e dovrebbero sempre essere la prima decisione che prendi quando inizi un nuovo progetto, dal momento che vorrai sempre partire dalla dimensione più piccola possibile e costruire su quella.
Ora, nel nostro caso, creeremo il pacchetto di icone usando solo una dimensione, più esattamente 128 x 128 px, che è abbastanza grande.
Inizia bloccando tutto tranne il livello della griglia di riferimento, quindi prendi il Strumento rettangolo (M) e creare a 128 x 128 px arancia (# F15A24) quadrato, che aiuterà a definire la dimensione complessiva delle nostre icone.
Aggiungi un più piccolo 120 x 120 px uno (#FFFFFF) che fungerà da nostra area di disegno attiva, dandoci quindi un tutt'uno 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 40 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.
Iniziamo il progetto creando la cornice simile a un francobollo che sarà l'elemento ripetitivo per ciascuna delle nostre icone. Detto questo, assicurati di essere sul livello giusto (quello sarebbe il primo) e quindi di ingrandire la prima griglia di riferimento.
Creare la sezione esterna della cornice usando a 100 x 116 px rettangolo, che coloreremo usando # 45576B e quindi centrare l'allineamento all'area di disegno attiva sottostante.
Regola la forma che abbiamo appena creato posizionando un paio di 8 x 8 px cerchi (evidenziati in rosso) esattamente 8 px l'uno dall'altro, sia orizzontalmente che verticalmente, che verranno poi ritagliati dal rettangolo più grande usando esploratore'S Meno forma frontale.
Continua a regolare la forma risultante girandola Riempire con i suoi Ictus (Shift-X), e quindi impostando il suo Peso a 4 px dall'interno del Ictus pannello.
Creare la sezione di riempimento colorata della cornice usando a 76 x 92 px rettangolo (# EFA28B), che centreremo allineato al contorno più grande.
Termina la cornice aggiungendo un contorno alla sezione di riempimento colorata utilizzando il Ictus metodo. Creane una copia (Control-C) che incolleremo davanti (Control-F) e quindi regolare cambiando il suo colore in # 45576B e poi lanciando il suo Riempire con i suoi Ictus (Shift-X). Imposta il percorso Peso a 4 px, e quindi selezionare e raggruppare tutte e tre le forme insieme usando Controllo-G scorciatoia da tastiera.
Una volta che abbiamo finito di lavorare sul frame, possiamo crearne due copie (Control-C> Control-F) e posizionarli sulle restanti griglie di riferimento, assicurandosi di incollare ciascuno di essi sul loro rispettivo strato (che sarebbe il terzo e il quarto). Quindi, prima di bloccare nuovamente i livelli, cambia il colore della sezione di riempimento del secondo fotogramma in # 8CC1ED e il terzo a # 8CEAC8.
Con i fotogrammi in posizione, ora possiamo iniziare a lavorare sugli edifici reali, quindi assicurati di essere di nuovo sul livello giusto (quello sarebbe il secondo) e di ingrandire la prima griglia di riferimento in modo da poter avere una migliore vista delle forme.
Inizia a lavorare sulla base dell'Empire State Building creando un 22 x 18 px rettangolo con a 4 px di spessore Ictus (# 45576B) che allineamo il fondo al contorno della sezione di riempimento, posizionandolo a una distanza di 5 px dal suo bordo sinistro.
Crea un altro leggermente più alto 14 20 px rettangolo con lo stesso 4 px di spessore Ictus (# 45576B), che posizioneremo in cima a quello del passaggio precedente.
Crea la sezione giusta della base dell'edificio inserendo una copia (Control-C> Control-F) delle due forme che abbiamo sul lato opposto del telaio, mantenendo lo stesso 5 px divario tra loro e il contorno più ampio.
Inizia a lavorare sulla sezione centrale dell'edificio, creando un 38 x 10 px rettangolo con a 4 px di spessore Ictus (# 45576B) che centreremo allineati al telaio, posizionandolo sopra le forme base.
Regola la forma che abbiamo appena creato aprendo il suo percorso, aggiungendo un nuovo punto di ancoraggio al centro del suo bordo inferiore usando il Aggiungi strumento Punto di ancoraggio (+) e quindi rimuovendolo premendo Elimina.
Continua a farti strada creando un 30 x 12 px rettangolo con a 4 px di spessore Ictus (# 45576B), che centreremo allineato alla forma precedente, posizionandola sopra.
Inizia a lavorare sulla sezione superiore dell'edificio creando un 22 x 6 px rettangolo con a 4 px di spessore Ictus (# 45576B), che, come probabilmente avete già intuito, posizioneremo sopra la forma precedente.
Aggiungi un altro 6 x 12 px rettangolo con a 4 px di spessore Ictus (# 45576B) in cima alla forma che abbiamo appena creato, assicurandoti di centrare l'allineamento dei due in seguito.
Completa la struttura dell'edificio, aggiungendo l'antenna usando a 14 px alto 4 px di spessore Ictus (# 45576B), che ovviamente posizioneremo sopra tutte le altre forme.
Successivamente, faremo una piccola deviazione e aggiungeremo le piccole evidenziazioni prima di iniziare a lavorare sulle finestre stesse. Quindi, usando il Strumento rettangolo (M), creare un sacco di 2 px bianco alto (#FFFFFF) rettangoli, che copriranno la parte superiore visibile della maggior parte delle sezioni di composizione dell'edificio.
Regola le forme che abbiamo appena creato in modo che risultino simili ai momenti salienti, selezionandoli tutti e quindi abbassandoli Opacità solo per 60%.
Con i punti salienti in atto, è ora di iniziare a lavorare sulle finestre, che creeremo disegnandole con un paio di 2 px verticale spessa Ictus Linee (# 45576B) posizionato 4 px l'uno dall'altro (se stai usando il Allineare pannello di Distribuire opzioni). Prenditi il tuo tempo e aggiungi le linee a ciascuna sezione dell'edificio, selezionando e raggruppando (Controllo-G) sia loro che le forme compositive più grandi insieme mentre procedete.
Aggiungi le ombre dure creando un paio di rettangoli (# 45576B) che posizioneremo in modo che si sovrappongano al percorso del contorno di ogni edificio.
Regola le ombre (tutte tranne quella in alto al centro) selezionando individualmente i loro punti di ancoraggio interni superiori e quindi spingendoli verso il basso di una distanza di 1 px per i migliori e 2 px per il resto. Puoi usare il Sposta strumento (tasto destro > Trasforma> Sposta> Verticale> + / -2 px dipende da quale parte si inizia con).
Termina l'icona disegnando nel cielo usando un paio di 2 px di spessore Ictus Linee (# 45576B). Prenditi il tuo tempo e una volta che hai finito, raggruppa tutte le linee usando il Controllo-G scorciatoia da tastiera, facendo lo stesso per tutte le sezioni di composizione dell'icona in seguito.
Supponendo che hai già finito di lavorare sulla prima icona, vai al livello successivo (quello sarebbe il terzo), bloccando quello precedente, quindi ingrandisci la seconda griglia di riferimento in modo da poter iniziare.
Inizia a lavorare sulla sezione inferiore dell'edificio creando un 48 x 16 px rettangolo con a 4 px di spessore Ictus (# 45576B) che centreremo allineato alla parte inferiore del contorno della sezione di riempimento colorato.
Crea un più piccolo 32 x 10 px rettangolo con a 4 px di spessore Ictus (# 45576B) che posizioneremo sopra la forma precedente, assicurandoti di centrare i due allineati.
Completa questa sezione aggiungendo un 16 x 20 px rettangolo con a 4 px di spessore Ictus (# 45576B), che regoleremo impostando il Raggio dei suoi angoli superiori a 8 px dall'interno del Trasformare pannello di Proprietà rettangolo.
Seleziona tutte e tre le forme e trasformale in un unico percorso più grande unendole usando esploratore'S Unite Shape Mode.
Inizia a lavorare sulla sezione laterale sinistra dell'edificio creando un 6 x 18 px rettangolo con a 4 px di spessore Ictus (# 45576B), che posizioneremo sul primo gradino della forma più grande.
Aggiungi una piccola sporgenza alla forma che abbiamo appena creato, utilizzando a 4 px largo 4 px di spessore Ictus linea (# 45576B) che posizioneremo sul suo angolo in alto a sinistra. Una volta che hai finito, seleziona e raggruppa i due insieme usando Controllo-G scorciatoia da tastiera.
Crea la sezione in basso a destra dell'edificio usando una copia (Control-C> Control-F) di quello su cui abbiamo appena finito di lavorare, che rifletteremo verticalmente (tasto destro> Trasforma> Rifletti> Verticale) e quindi posizionarsi sul lato opposto dell'edificio.
Creare la sezione centrale dell'edificio usando a 32 x 28 px rettangolo con a 4 px di spessore Ictus (# 45576B) che posizioneremo in cima alla sua base.
Regola la forma che abbiamo appena creato impostando il Raggio dei suoi angoli superiori a 16 px dall'interno del Trasformare pannello di Proprietà rettangolo.
Continua a regolare la forma risultante aggiungendo un nuovo punto di ancoraggio al centro del suo bordo inferiore usando Aggiungi strumento Punto di ancoraggio (+), e quindi rimuovere (Elimina) per aprire la sua strada.
Continua a farti strada creando un 24 x 14 px rettangolo con a 4 px di spessore Ictus (# 45576B) che regoleremo impostando il Raggio dei suoi angoli superiori a 12 px e poi aprendo il suo percorso in basso. Una volta terminato, posiziona la forma risultante sopra quella precedentemente creata.
Aggiungi un altro 16 x 12 px rettangolo con a 4 px di spessore Ictus (# 45576B), che regoleremo impostando il Raggio dei suoi angoli superiori a 8 px, aprendo il suo percorso in basso come abbiamo fatto con la forma precedente. Quindi, una volta terminato, posiziona la forma risultante in cima alla sezione centrale dell'edificio.
Inizia a lavorare sulla parte superiore dell'edificio creando un più piccolo 8 x 6 px rettangolo con a 4 px di spessore Ictus (# 45576B), che regoleremo impostando il Raggio dei suoi angoli superiori a 4 px, posizionare la forma risultante sopra la forma precedente, assicurandosi di aprire il suo percorso inferiore.
Crea il pezzo finale della sezione superiore dell'edificio usando a 6 x 16 px ellisse con a 4 px di spessore Ictus (# 45576B) che regoleremo tagliandolo a metà selezionando e quindi rimuovendo il suo punto di ancoraggio inferiore. Centro allineare la forma risultante a una distanza di 4 px dal bordo superiore dell'area di disegno attiva, assicurandosi di estendere la sua sezione inferiore sulla forma precedente, utilizzando il Strumento penna (P).
Aggiungi l'antenna usando un 8 px alto 4 px di spessore Ictus linea (# 45576B), che centreremo allineare alla forma precedentemente creata.
Come abbiamo fatto con l'edificio precedente, inizia ad aggiungere le piccole evidenziazioni usando il bianco (#FFFFFF) come colore di riempimento principale, abbassando il loro Opacità a 60% una volta che hai finito. Crea le altezze diritte usando rettangoli regolari, mentre usi i ritagli per quelli ad arco, assicurandoti di inviarli successivamente sul retro dell'edificio (tasto destro> Disponi> Invia indietro).
Inizia ad aggiungere dettagli alla sezione superiore dell'edificio creando un 2 x 2 px cerchio, che coloreremo usando # 45576B e quindi posizionati al centro della sua seconda forma.
Crea tre 2 x 4 px ellissi (# 45576B) che posizioneremo 1 px l'uno dall'altro, spostando il centro verso l'alto da 1 px. Gruppo (Controllo-G) le forme e quindi posizionarle al centro della terza forma della sezione superiore.
Crea un secondo set di 2 x 4 px ellissi (# 45576B), a cui ci allontaneremo 2 px gli uni dagli altri, raggruppando (Controllo-G) e quindi posizionandoli verso il centro della quarta forma della sezione superiore.
Usando nove 2 x 2 px piazze (# 45576B), aggiungi le finestrelle alla sezione ad arco dell'edificio, raggruppandole successivamente usando il Controllo-G scorciatoia da tastiera.
Creare un 6 x 41 px rettangolo con a 2 px di spessore Ictus linea (# 45576B), che regoleremo impostando il Raggio dei suoi angoli superiori a 3 px, centro allineare la forma risultante alla parte inferiore del contorno della sezione di riempimento colorato.
Come abbiamo fatto con il primo edificio, prenditi il tuo tempo e disegna nelle finestre usando un paio di 2 px di spessore Ictus Linee (# 45576B) posizionato 2 px l'uno dall'altro, selezionando e quindi raggruppando (Controllo-G) insieme una volta che hai finito.
Aggiungi le ombre usando un paio di rettangoli che posizioneremo in modo che seguano il percorso delle sezioni di composizione dell'edificio.
Regola le ombre, selezionando individualmente i loro punti di ancoraggio interni superiori, e quindi spingendoli verso il basso di una distanza di 2 px usando il Sposta strumento (tasto destro > Trasforma> Sposta> Verticale> 2 px.
Termina l'icona disegnando nel cielo usando un paio di 2 px di spessore Ictus Linee (# 45576B). Prenditi il tuo tempo e una volta che hai finito, raggruppa tutte le linee usando il Controllo-G scorciatoia da tastiera, facendo lo stesso per tutte le sezioni di composizione dell'icona in seguito.
Ora siamo giù alla nostra terza e ultima icona, quindi supponendo che tu sia già passato al livello successivo (quello sarebbe il quarto), ingrandisci la griglia di riferimento e finiamo questo.
Crea la forma principale dell'edificio usando a 36 x 56 px rettangolo con a 4 px di spessore Ictus (# 45576B) che centreremo allineati al bordo inferiore del contorno della sezione di riempimento colorato.
Inizia a lavorare sulla parte superiore dell'edificio creando l'antenna usando a 36 px alto 4 px di spessore Ictus (# 45576B), che posizioneremo in cima alla forma più grande.
Creare la sezione inferiore della piattaforma del tetto usando a 28 px largo 4 px di spessore Ictus (# 45576B), che centreremo allineare alla forma principale dell'edificio, posizionandola a una distanza di 6 px da.
Aggiungi le gambe di supporto della piattaforma usando a 16 x 6 px rettangolo con a 4 px di spessore Ictus (# 45576B), che centreremo allineati al bordo superiore del rettangolo più grande.
Crea la parte superiore della piattaforma usando un altro 28 px largo 4 px di spessore Ictus (# 45576B), che centreremo allineato alla sezione inferiore, posizionandolo a una distanza di 6 px da.
Collegare le due sezioni della piattaforma utilizzando due serie di 6 px alto 4 px di spessore Ictus Linee (# 45576B), che posizioneremo 4 px gli uni dagli altri usando il Allineare pannello di Distribuire opzioni, posizionandone uno su ciascun lato dell'antenna.
Afferra rapidamente il Strumento penna (P), e quindi disegnare le aste di supporto diagonali usando a 2 px di spessore Ictus linea (# 45576B), partendo dalla parte superiore della piattaforma e salendo sulla sezione centrale dell'antenna.
Finire la parte superiore dell'edificio aggiungendo un 8 px largo 4 px di spessore Ictus linea (# 45576B) che centreremo allineati all'antenna. Quindi, una volta terminato, seleziona e raggruppa tutte le forme della sezione corrente usando il Controllo-G scorciatoia da tastiera.
Aggiungi i punti salienti principali usando sette 32 x 2 px rettangoli (colore: bianca; Opacità: 60%) che impileremo verticalmente 6 px gli uni dagli altri, raggruppando (Controllo-G) e quindi centrarli allineati al corpo principale dell'edificio.
Inizia a lavorare sulla parte anteriore dell'edificio creando le finestre usando dodici 20 px largo 2 px di spessore Ictus Linee (# 45576B) impilati verticalmente 4 px l'uno dall'altro. Una volta che hai le linee, gruppo (Controllo-G) e poi centrarli allineati al corpo principale della torre, ad una distanza di 4 px dal suo bordo superiore.
Aggiungi i punti salienti della sezione anteriore usando sei 20 x 2 px rettangoli (colore: bianca; Opacità: 60%) impilati verticalmente 6 px gli uni dagli altri, che raggrupperemo (Controllo-G) e poi centrare allineato alle finestre, posizionandole sotto la prima Ictus linea. Quindi, una volta terminato, seleziona e raggruppa entrambe le finestre e le luci insieme usando Controllo-G scorciatoia da tastiera.
Creare il contorno principale della sezione anteriore usando a 20 x 56 px rettangolo con a 4 px di spessore Ictus (# 45576B), che centreremo allineati al corpo principale dell'edificio.
Regola il rettangolo selezionando individualmente i suoi punti di ancoraggio superiori e spingendoli verso l'interno di una distanza di 8 px usando il Mossa strumento (tasto destro> Trasforma> Sposta> Orizzontale> + / - 8 px dipende da quale parte si inizia con).
Crea una copia (Control-C> Control-F) della forma risultante, e quindi usarlo per mascherare le finestre e i punti salienti della sezione anteriore (fare clic con il tasto destro> Crea maschera di ritaglio), assicurandosi di inviarli successivamente (tasto destro> Disponi> Invia indietro).
Aggiungi le finestre di sfondo usando un paio di 2 px di spessore Ictus Linee (# 45576B), impilati verticalmente 4 px l'uno dall'altro. Inizia dal bordo esterno del contorno più grande e vai fino a quello della sezione anteriore. Quindi, una volta terminato, seleziona e raggruppa tutte le forme dell'edificio utilizzando il Controllo-G scorciatoia da tastiera.
Termina l'icona disegnando nel cielo usando un paio di 2 px di spessore Ictus Linee (# 45576B). Una volta che hai finito, gruppo (Controllo-G) tutte le linee insieme, facendo lo stesso per tutte le sezioni di composizione dell'icona.
Ottimo lavoro! Il nostro piccolo pacchetto di icone è completamente finito!
Spero tu sia riuscito a seguire ogni singolo passo e come sempre hai imparato qualcosa di nuovo e utile durante il processo.
Accentsconagua