Come Creare un Pacchetto di Icone Retro di Scuola Superiore in Adobe Illustrator

In questo tutorial faremo un viaggio indietro nel tempo e creeremo alcuni oggetti correlati alla scuola superiore degli anni 50. Durante il processo, vedremo quanto è facile utilizzare alcune delle forme base di Illustrator insieme con lo strumento Scostamento Tracciato per creare alcune risorse dall'aspetto fantastico.

Se vuoi aggiungere icone personalizzate a questo pacchetto, ma non sai da dove cominciare, puoi trovare ispirazione dando un'occhiata al mercato di Envato dove puoi trovare tonnellate di ottimi pacchetti eseguendo una ricerca con "high school" come parola chiave.

Detto questo, apri Illustrator e diamoci da fare.

1. Imposta il Documento

Supponendo che disponi già di Illustrator e che sia in esecuzione, vediamo rapidamente il processo di impostazione del nostro documento.

In primo luogo, vai su File > Nuovo o premi Ctrl-N come scelta rapida da tastiera e regola le diverse opzioni come segue:

• Numero di Tavole da Disegno: 1
• Larghezza: 800 px
• Altezza: 600 px
• Unità: Pixel

E dalla scheda Avanzate:

• Modalità Colore: RGB
• Effetti Raster: Schermo (72 ppi)
• Allineamento di nuovi oggetti alla griglia Pixel: spuntato

2. Imposta i Livelli

Una volta che abbiamo creato il documento, dobbiamo creare livelli individuali per ognuna delle nostre icone. Così facendo, non solo renderemo il nostro flusso di lavoro infallibile, ma renderemo anche le cose molto più semplici, dato che possiamo costruire una risorsa alla volta senza preoccuparci di poterne spostare o modificare un'altra per errore.

Quindi, supponendo che tu sappia come usare il pannello Livelli, aprilo e creare sette livelli, indicando il loro nome come segue:

1. griglie
2. zaino
3. quaderno
4. strumenti di scrittura
5. gagliardetto
6. cronometro
7. football

3. Regola la griglia

Poiché Illustrator permette l'uso delle Griglie, dovresti sapere che hai l'opzione di allineare il tuo disegno alla sua Griglia / Griglia di Pixel. Ciò significa che le tue forme avranno un aspetto estremamente nitido fino a quando utilizzerai le opzioni Allinea alla Griglia /  Pixel che si trovano sotto il menu in alto Visualizza.

Perché ci sono diverse situazioni che richiedono diverse impostazioni di Griglia, a volte potresti trovarti nella posizione in cui è necessario regolare le impostazioni che trovi di default in Illustrator.

Personalmente ho impostato il più basso e allo stesso tempo più accurato valore, dal momento che questo permette un maggiore controllo sul mio design.

Per modificare queste impostazioni, è necessario andare in Modifica > Preferenze > Guide & Griglia. Lì troverai da un piccolo popup, che ti permetterà di regolare le seguenti impostazioni:

• Righe griglia ogni: 1 px
• Suddivisioni: 1

Una volta che hai regolato queste impostazioni, tutto quello che devi fare per rendere ogni pixel preciso è attivare l'opzione Aggancia alla griglia che si trova sotto il menu Visualizza.

Suggerimento rapido: dovresti sapere che l'opzione Aggancia alla griglia si trasformerà in Aggancia ai Pixel ogni volta che entri in modalità Anteprima Pixel, ma va benissimo, perchè la maggior parte del tempo andrai avanti e indietro in questa modalità di visualizzazione.

Ora, se sei abituato a muovere le cose con l'aiuto dei tasti freccia direzionale della tastiera, puoi modificare l'Incremento da Tastiera a qualcosa di più preciso in pixel (1 px) per far sì che sia più preciso possibile. Puoi farlo andando su Modifica > Preferenze > Generali > Incremento da tastiera.

Se la tua versione di Adobe Illustrator ha il valore impostato su pt (punti), basta andare su Unità e cambiare i valori Generale e Traccia su Pixel e puoi continuare.

Se vuoi saperne di più sulla Griglia, e come puoi utilizzarla per creare opere d'arte in pixel perfetti, puoi dare un'occhiata qui:

• Comprendere il Sistema Griglia di Adobe Illustrator
• Come Creare Grafica con Pixel Perfetti Utilizzando Adobe Illustrator

4. Imposta le Griglie di Base

Solitamente quando si inizia a lavorare su qualsiasi nuova icona, ci sono un paio di cose che si dovrebbero prendere in considerazione, uno di quelle sono le Griglie di Base.

Per definizione, una Griglia di Base è una superficie di riferimento precisamente delimitata che è costruita e utilizzata al fine di guidare l'utente attraverso il processo di creazione della risorsa pacchetto icone. La dimensione della Griglia è soggettiva per ogni progetto, il che significa che a volte potresti aver bisogno di creare icone più piccole, mentre altre volte che potresti trovarti nella situazione di dover utilizzare quelli più grandi.

Di solito la forma della Griglia Base è un quadrato perfetto, poiché permette una migliore pianificazione e strutturazione di forme e linee rispetto ad un cerchio, ti dà il controllo completo sul numero di pixel.

Nel nostro caso, manteniamo le cose semplici e creiamo sei quadrati 96 x 96 px (#CCCCCC) utilizzando lo Strumento Rettangolo (M) che servirà a definire le dimensioni delle nostre icone, e aggiungiamone uno più piccolo di 92x92 px (#E6E6E6) a ciascuno di essi che agirà come la nostra area di disegno attivo, dandoci così un padding tutt'intorno di 2 px.

Raggruppa ciascuna delle due Griglie usando Ctrl-G e quindi posizionale 60 px l'una dall'altra, creando due file di tre Griglie.

Non appena hai tutte le Griglie di Base al loro posto, puoi bloccare il loro livello affinché non li sposti accidentalmente, e poi possiamo iniziare a lavorare sulla prima icona.

5. Crea lo Zaino

In primo luogo, assicurati di essere sul livello corretto e quindi blocca tutti gli altri, zooma sulla prima Griglia Base in modo da avere una vista migliore su quello che stai per creare.

Step 1

Iniziamo creando il corpo principale dello zaino, sul quale aggiungeremo tutti gli altri dettagli, uno alla volta.

Per prima cosa, prendi lo Strumento Rettangolo Arrotondato e crea una forma di 64 x 80 px con un angolo da 6 px, che coloreremo utilizzando #6D645E e quindi posizionalo sopra la Griglia di Base in modo che orizzontalmente sia allineato al centro del quadrato interno più piccolo, lasciando un vuoto di 4 px tra esso e il lato inferiore del quadrato.

Ora, dal momento che vogliamo tutto sia quanto più preciso possibile, ti consiglio di attivare la modalità Anteprima Pixel (Visualizza > Anteprima Pixel o Alt-Control-Y). In questo modo sarai in grado di vedere la sottostante griglia di pixel, che ti darà il controllo completo sul posizionamento delle forme.

Step 2

A questo punto alcuni di voi potrebbero chiedersi perché abbiamo lasciato quel divario di 4 px tra la sezione inferiore della nostra forma e la Griglia di Base.

Beh, se non sei un novello riguardo alle Icone a Linee, dovresti probabilmente sapete che ci sono due metodi diversi per crearle: scostamento tracciato e tracciati linea.

Non parlerò di questi in questo momento, dato che ho già scritto un pezzo che spiega praticamente tutto quello che dovete sapere.

Quello che farò è dirti che l'intero tutorial si baserà sull'utilizzo dello strumento di Scostamento Tracciato al fine di creare i contorni per ogni icona, e poiché ogni contorno avrà un peso di 4 px, puoi capire ora perché abbiamo bisogno di lasciare uno spazio vuoto dello lo stesso valore verso i lati dove le forme normalmente avrebbero toccato le Griglie di Base.

Quindi creiamo il primo abbozzo per la forma principale dello zaino.

In primo luogo, seleziona la forma che abbiamo appena creato e poi vai su Oggetto > Tracciato > Scostamento tracciato e impostare il valore Scostamento a 4 px, lasciando tutte le altre impostazioni come sono.

Non appena clicchi sul pulsante OK, vedrai che Illustrator avrà creato una versione ingrandita della forma, aggiungendo 4 px a ogni lato e posizionandola in fondo.

Step 3

Ogni volta che crei uno scostamento, questo utilizzerà sempre il colore della forma che hai utilizzato per crearla. Poiché il nostro contorno deve distinguersi, dovremo cambiare il suo colore con qualcosa di più scuro (#544F4B).

Ti raccomando, una volta che hai sia la forma di riempimento principale che il suo contorno, raggruppali usando la scorciatoia da tastiera CTRL-G, in modo tale da rendere più facile accedere alle diverse parti del tuo disegno quando è necessario.

Passo 4

Una volta che abbiamo il corpo principale del nostro zaino, possiamo iniziare a lavorare sulla parte superiore.

In primo luogo, prendi lo Strumento Rettangolo Arrotondato e crea una forma di 68 x 38 px (#8C7970) con il Raggio dell'Angolo a 4 px e posizionalo verso la parte superiore dello zaino, lasciando quel divario di 4 px tra essa e il lato superiore della Griglia di Base.

Step 5

Poi, abbiamo bisogno di modificare leggermente gli angoli inferiori della forma, cambiando la loro rotondità da 4 px a 12 px. Per effettuare questa operazione, basta selezionare i punti di ancoraggio inferiore utilizzando lo Strumento di Selezione Diretta (A) e quindi utilizzare lo strumento di Angoli Dinamici per regolare il loro valore.

Suggerimento rapido: Se utilizzi una versione precedente di Illustrator, sarà necessario ricreare la forma disegnando due rettangoli arrotondati, uno con raggio d'angolo di 4 px e un altro con un raggio di 12 px, quindi regolarli e unirli.

Step 6

Una volta che abbiamo la sezione superiore, abbiamo bisogno di aggiungerci un contorno, come abbiamo fatto con la forma principale dello zaino.

Così, dopo avere selezionato la forma, vai su Oggetto > Percorso > Scostamento Tracciato e dagli uno scostamento di 4 px. Non dimenticare di cambiare il colore di contorno con #544F4B per fare in modo che si distingua.

Step 7

Inizia a lavorare sul manico superiore creando un rettangolo di 20 x 14 px arrotondati con un Raggio d'Angolo di 7 px. Quindi creane un altro più piccolo di 10 x 16 px con un Raggio d'Angolo di 5 px, posizionalo appena sopra il più grande, assicurandoti di allinearli in verticale e orizzontale e quindi utilizza l'opzione Sotto meno Sopra del Pannello Elaborazione Tracciati per creare un ritaglio.

Colora la forma risultante utilizzando #B29580 e quindi, utilizzando un rettangolo sovrapposto, taglia la metà superiore.

Infine posiziona la maniglia verso la parte superiore dello zaino e dagli un contorno di 4 px (#544F4B).

Step 8

Successivamente, aggiungi una piccola linea tratteggiata creando un rettangolo arrotondato di 62 x 41 px con un Raggio d'Angolo di 9 px, che noi provvederemo a modificare rimuovendo i punti di ancoraggio dal lato superiore. Per effettuare questa operazione, prendi lo strumento di Selezione diretta (A) e quindi trascina e seleziona le ancore e premi CANC.

Poi, inverti semplicemente il colore di riempimento della forma risultante con la sua linea premendo Shift-X e imposta lo Spessore della Traccia a 2 px.

Metti a punto la linea tratteggiata impostando il suo Estremo a Estremo Rotondo e aggiungendo un effetto di Linea Tratteggiata al tratto, usando un trattino di 2 px e un vuoto di 4 px.

Step 9

Dopo aver aggiunto la linea tratteggiata, possiamo iniziare a lavorare sul piccolo cinturino che tiene la chiusura.

In primo luogo, prendi lo Strumento Rettangolo Arrotondato e crea una forma di 4 x 46 px con un Raggio d'Angolo di 2 px (1).

Colora la forma utilizzando #B29580 e quindi modificala rimuovendo i punti di ancoraggio superiori centrali utilizzando lo Strumento di Selezione Diretta (A) (2). Una volta che li hai rimossi, non dimenticare di usare la scorciatoia Maiusc-J per chiudere il tracciato.

Quindi, dai un contorno di 4 px e aggiungi un rettangolo di 20 x 4 px (#544F4B) verso la sua sezione superiore (3).

Inizia ad aggiungere alcuni dettagli disegnando sette cerchi di 2 x 2 px (#544F4B) posizionati 4 px l'uno dall'altro (4).

Finisci la cinghia aggiungendo la fibbia. Innanzitutto disegna un quadrato di 20 x 20 px (#544F4B) (5) e quindi aggiungine un altro più piccolo sopra di 12 x 12 px (#DDD2CA) (6).

Utilizza un rettangolo di 8 x 8 px per creare un ritaglio dal quadrato più chiaro (7) e infine aggiungi un rettangolo arrotondato di 2 x 6 px con 2 px come Raggio d'Angolo (8).

Step 10

Infine raggruppa insieme tutti gli elementi della cinghia usando la scorciatoia da tastiera CTRL-G e posizionali sopra la chiusura dello zaino, da qualche parte verso la sezione inferiore, in modo che alla fine avrai un vuoto di 8 px tra il contorno e la sezione inferiore della forma principale di zaino.

Step 11

Successivamente, aggiungi un piccolo rettangolo di 8 x 2 px (#544F4B) e un altro leggermente più lungo di 12 x 2 px (#544F4B) e posizionali verso il lato sinistro della copertura, lasciando un vuoto di 2 px tra di loro.

Una volta che hai il coperchio superiore con tutti i suoi dettagli, è consigliabile raggruppare tutti i suoi elementi insieme (CTRL-G) poiché nel passaggio successivo sarà necessario aggiungere un paio di dettagli alla sezione principale dello zaino.

Step 12

Poiché a questo punto abbiamo praticamente finito con gli elementi di composizione base dello zaino, inizieremo aggiungendo un sacco di dettagli al suo corpo principale.

In primo luogo, fai doppio clic sul corpo dello zaino per entrare in Modalità di Isolamento (o fai clic destro > Isola il Gruppo Selezionato) e quindi crea un rettangolo di 64 X 2 px, che si colorerà utilizzando lo stesso valore utilizzato per il contorno (#544F4B) e quindi posizionalo verso il lato inferiore dello zaino, lasciando uno spazio di 2 px tra esso e la struttura della forma principale.

Step 13

Continua ad aggiungere dettagli creando un paio di linee orizzontali che renderanno lo zaino un po' più carino.

Per effettuare questa operazione, prendi lo Strumento Rettangolo (M) e crea 20 forme di 64 x 1 px di dimensione e colore #665C57, che posizioneremo a 1 px uno dall'altro.

Raggruppa tutte le linee insieme (CTRL-G) e quindi posizionale verso la parte inferiore dello zaino, appena sopra l'elemento creato in precedenza, lasciando uno spazio di 1 px tra di loro.

Step 14

Finisci questa icona aggiungendo una piccola toppa per il nome in basso a destra.

Innanzitutto crea un rettangolo di 10 x 4 px, colore #DDD2CA e poi dai un contorno di 4 px (#544F4B). Raggruppa insieme i due (CTRL-G) e poi semplicemente posizionali lasciando uno spazio di 2 px tra loro e il lato destro del contorno dello zaino.

Mantieni lo stesso spazio tra la loro sezione inferiore e il divisore orizzontale che abbiamo creato un paio di step fa.

Infine raggruppa tutti gli elementi dell'icona insieme usando la scorciatoia da tastiera CTRL-G, e sei pronti per passare a quello successivo.

6. Crea il Quaderno

Poiché ora abbiamo finito con la prima icona, possiamo bloccare il livello e passare a quella successiva, che è il quaderno.

Step 1

Cominceremo creando il corpo principale dell'icona e poi gradualmente aggiungeremo sottili dettagli come abbiamo fatto con lo zaino.

In primo luogo, prendi lo Strumento Rettangolo Arrotondato e crea una forma di 66 x 84 px (#DD7A7A) con un Raggio Angolo di 4 px che modificheremo selezionando e rimuovendo i suoi punti di ancoraggio del centro-sinistra utilizzando lo Strumento di Selezione Diretta (A). Una volta che abbiamo rimosso le ancore, abbiamo bisogno di chiudere il tracciato premendo Control-J.

Ora possiamo dare alla forma un contorno e posizionare i due verso il centro della Griglia di Base.

Step 2

Ora, aggiungeremo una sezione più scura al corpo principale mediante la creazione di un rettangolo di 6 x 84 px che coloreremo utilizzando #BC6161 e posizioneremo verso il lato sinistro della forma principale che abbiamo creato nel passaggio precedente.

Step 3

Utilizzando lo Strumento Rettangolo (M), aggiungi un divisore verticale di 4 x 84 px (#544F4B) nella sezione destra della forma che abbiamo creato pochi istanti fa.

Step 4

Sii creativo e aggiungi un paio di righe di dettaglio decorativo al quaderno.

Step 5

Finisci questa icona aggiungendo l'etichetta del nome, che creeremo utilizzando lo Strumento Rettangolo (M). In primo luogo, disegna un rettangolo di 28 x 14 px (#DDD2CA) e poi dai un contorno di 4 px (#544F4B) andando su Oggetto > Tracciato > Scostamento Tracciato e immettendo il valore specificato nel campo Scostamento.

Aggiungi un gruppo di segmenti linea decorativi e quindi raggruppa tutti gli elementi dell'etichetta insieme usando la scorciatoia da tastiera CTRL-G.

Infine non dimenticare di selezionare tutte le sezioni che compongono il quaderno e raggrupparle, affinché non vengano spostate.

7. Crea gli Strumenti di Scrittura

Come prima, una volta che hai finito l'icona del quaderno, non dimenticare di bloccarne il livello e passare a quella successiva, così riesci a  mantenere una chiara focalizzazione su ciò su cui stai attualmente lavorando.

Step 1

Prima di iniziare, voglio sottolineare che questa icona è un po ' diversa dal momento che è composta da tre piccoli oggetti, vale a dire la matita, il righello di legno e la gomma.

Cominceremo a lavorare sul righello dato che occupa l'intera altezza della Griglia di Base, rendendo così più facile posizionare le parti rimanenti che compongono l'icona.

Quindi, prima prendi lo Strumento Rettangolo (M) e crea una forma di 22 x 84 px che coloreremo utilizzando un marrone chiaro (#A3876F) e poi diamo il solito contorno di 4 px (#544F4B).

Come puoi vedere, le forme vengono posizionate leggermente verso il lato sinistro della Griglia, ma non devi preoccuparti di questo adesso, poiché una volta che abbiamo tutti e tre gli elementi, li posizioneremo al centro della Griglia Base.

Step 2

Con le forme principali del righello in posizione, possiamo iniziare l'aggiunta di dettagli.

La prima cosa che dovremo aggiungere è la piccola sezione di plastica bianca che è stata utilizzata prima. Seleziona lo Strumento Rettangolo (M) e crea una forma di 6 x 84 px (#DDD2CA) e posizionalo sopra la sezione marrone del righello, verso il suo lato sinistro.

Step 3

Una volta che hai aggiunto il segmento in plastica, crea e aggiungi un piccolo divisore di 4 x 84 px alla sua destra, coloralo utilizzando #544F4B.

Step 4

A questo punto possiamo iniziare aggiungendo le righe di indicatore di misura piccola per farlo sembrare un righello reale e non una barretta di cioccolato.

Così, utilizzando lo Strumento Rettangolo (M), crea circa tredici segmenti linea di 4 x 2 px (#544F4B) e posizionali uno sotto l'altro a una distanza di 4 px tra loro. Quindi regola la larghezza di alcuni dei segmenti a soli 2 px, in modo da avere un segmento più lungo, poi tre più piccoli e poi di nuovo uno più lungo.

Step 5

Utilizzando lo Strumento Ellisse (L), crea un cerchio di 4 x 4 px e posizionalo sopra la sezione marrone del righello, verso il basso.

Step 6

Dal momento che abbiamo tutti i dettagli necessari per avere l'aspetto di un righello, possiamo iniziare a creare il modello del legno.

In primo luogo, seleziona lo Strumento Penna (P), imposta il colore del tratto come quello del contorno (#544F4B) lasciando il riempimento vuoto e quindi, utilizzando un Tratto di Spessore 2 px con Estremità Rotonda, sii creativo e disegna un paio di linee per fare un bel motivo.

Poiché non vogliamo che le linee di andare di fuori della del righello, cerca di mantenere i punti di ancoraggio confinati alla sua superficie.

Una volta che hai finito, seleziona tutte le righe di legno e raggruppale insieme (CTRL-G) così da non spostarle per sbaglio. Fai lo stesso per il righello per assicurarti che nessuno degli elementi della composizione vada fuori posto.

Step 7

Dato che ora abbiamo il righello, possiamo iniziare a lavorare sulla matita.

In primo luogo, seleziona lo Strumento Rettangolo (M) e crea una forma di 4 x 56 px che coloreremo utilizzando un giallo pallido (#DBC07B) e dai un contorno di 4 px (#544F4B). Quindi, con entrambe le forme selezionate, posizionale verso il lato sinistro del righello, lasciando un vuoto di 4 px tra i due.

Step 8

Una volta che hai le forme principali della matita, lavora sui dettagli e inizia aggiungendo la gomma inferiore.

Utilizzando lo Strumento Ellisse (L), crea un cerchio di 4 x 4 px, che coloreremo utilizzando #E29F9F e poi crea un contorno di 4 px (#544F4B), assicurandoti di posizionare entrambi verso il fondo della matita, sotto le sue forme principali.

Step 9

Successivamente, utilizza lo Strumento Rettangolo (M) per creare una forma di 4x4 px, coloralo utilizzando #DDD2CA e posizionalo verso la parte inferiore del corpo della matita (la forma gialla).

Step 10

Aggiungi un paio di linee alla forma creata in precedenza per farla somigliare al contenitore di metallo che tiene la gomma.

Step 11

Una volta che hai finito con l'involucro della gomma, aggiungi un paio di dettagli alla sezione gialla della matita per farla sembrare più interessante.

Step 12

Infine, concludi la matita aggiungendo la punta poco affilata.

Questa volta devi selezionare lo Strumento Penna (P) e prima crea il contorno, disegnando un piccolo triangolo (#544F4B), facendo in modo di rendere la sua punta rotonda.

Poi, una volta che avrai la forma più grande, puoi creare la sezione di riempimento tracciando un piccolo trapezio (#CEC0B7).

Una volta che hai finito, raggruppa i due (CTRL-G) e seleziona tutti gli elementi della matita e fai lo stesso, in modo che tu non perda le cose per sbaglio.

Step 13

Ora che abbiamo sia la matita che il righello, abbiamo bisogno di creare la piccola gomma.

In primo luogo, utilizzando lo Strumento Rettangolo (M), crea una forma di 12 x 22 px (#DDD2CA) e dagli il solito contorno di 4 px.

Come puoi vedere, abbiamo bisogno di posizionare le due forme sul lato destro del righello, alla stessa distanza di 4 px, assicurandoci di Allinearli Verticalmente al Centro al corpo principale del righello.

Step 14

Successivamente, aggiungi un rettangolo di 12 x 22 px sulla forma principale della gomma e posizionalo verso il basso, assicurandoti di colorarlo utilizzando #DD7A7A.

Step 15

Quindi aggiungi un divisore orizzontale di 12 x 4 px verso il lato superiore della sezione rosa e un paio di linee di dettaglio per renderlo più interessante.

Una volta che hai fatto, semplicemente raggruppa tutti gli elementi della gomma insieme (CTRL-G) e quindi crea un altro gruppo usando la matita, righello e gomma e centrali sulla Griglia di Base.

8. Crea il Gagliardetto

Supponendo che tu sia riuscito a creare l'icona strumenti di scrittura, bloccare il suo livello e poi passare a quello successivo così da poter iniziare a lavorare sul piccolo gagliardetto.

Step 1

Inizia disegnando la sezione del bastone, che andremo a creare utilizzando un rettangolo di 4 x 84 px con colore #DDD2CA e poi dai un contorno di 4 px (#544F4B).

Non preoccuparti per il posizionamento delle due forme, poiché centrerai l'icona una volta finito.

Step 2

Crea tre piccoli rettangoli di 4 x 2 px distanziati verticalmente a 2 px uno dall'altro, e posizionali sulla forma di riempimento del gagliardetto, verso la sezione inferiore.

Quindi, seleziona le forme del bastone e raggruppale usando la scorciatoia da tastiera CTRL-G.

Step 3

Inizia a lavorare sulla banner del gagliardetto creando un triangolo con la punta verso destra utilizzando lo Strumento Penna (P). Colora la forma utilizzando il colore #DD7A7A e poi dagli un contorno di 4 px andando su Oggetto > Tracciato > Scostamento Tracciato e inserendo 4 nel campo valore.

Una volta che hai entrambe le forme, posizionale verso la parte superiore del bastone, assicurandoti che il contorno della bandiera si sovrapponga.

Step 4

Inizia ad aggiungere dettagli alla bandiera creando una fila di rettangoli da 1 x 48 px posizionati a 1 px l'uno dall'altro, posizionali sul triangolo rosato e usalo come Maschera di Ritaglio.

Per creare la maschera, fai semplicemente una copia (CTRL-C) del triangolo con la punta a destra della bandiera, incollalo (CTRL-F) sopra le righe di dettaglio e quindi fai clic col tasto destro > Crea Maschera di Ritaglio.

Step 5

Successivamente, crea un'ellisse di 34 x 24 px (#DBC07B) e mettila all'interno della Maschera di Ritaglio che hai appena creato per le linee verticali. Quindi dagli un contorno di 4 px (#544F4B) e aggiungi tre cerchietti da 2 x 2 px (#544F4B) per renderlo più accattivante.

Infine, seleziona tutti gli elementi del gagliardetto e raggruppali insieme usando la scorciatoia da tastiera CTRL-G e quindi assicurati di centrare l'icona alla sua Griglia di Base.

9. Crea il Cronometro

Prima di cominciare a lavorare sull'icona del cronometro, assicurati di aver bloccato il livello precedente e e di esserti posizionato su quello giusto.

Step 1

Inizia a definire la forma principale del cronometro creando un cerchio di 60 x 60 px che colorerai utilizzando un marrone chiaro (#A3876F) e poi dagli un contorno di 4 px (#544F4B).

Quindi, con entrambe le forme selezionate, posizionale verso il centro della Griglia di Base dell'icona, assicurandoti che il contorno tocchi il lato inferiore della griglia più piccola.

Step 2

Successivamente, crea la sezione interna del cronometro, disegnando un cerchio di 44 x 44 px (#DDD2CA) e dandogli un contorno di 4 px (#544F4B). Quindi posiziona entrambe le forme sul segmento del corpo marrone chiaro, facendo attenzione ad allinearli al centro.

Step 3

Prima di iniziare a lavorare sull'indicatore del cronometro, prendiamo un po' di creatività e aggiungiamo una graziosa texture di legno al cerchio marrone, assicurandoci di mantenere le linee vincolate all'anello.

Uso lo stesso Spessore Traccia di 2 px come prima con l'Estremità Rotonda e prendi il tempo che ti serve per farlo bene.

Una volta che hai finito, raggruppa tutte le linee del legno insieme (CTRL-G) dato che sarà più facile accedere e modificare nel caso tu ne abbia bisogno in futuro.

Step 4

Inizia a lavorare sul manometro indicatore, aggiungendo i punti di di riferimento principali del tempo, quindi linee centrate in alto, in basso, a destra e sinistra.

Per effettuare questa operazione, è sufficiente creare una coppia di rettangoli di 4 x 10 px (#544F4B), uno posizionato verso l'alto e uno verso il basso e quindi crea una copia (CTRL-C > Ctrl-F) e ruotala in modo che le linee verranno ora disposte orizzontalmente.

Una volta che le hai tutte, non dimenticare di raggrupparle (CTRL-G), affinché non si spostino tutt'intorno.

Step 5

Ora puoi aggiungere quattro cerchietti 4 x 4 px (#544F4B) per ogni angolo del misuratore, assicurandoti di raggrupparli insieme (CTRL-G).

Step 6

Finisci il calibro aggiungendo l'indicatore e un paio di forme circolari, rilevando un po' il pezzo centrale mediante #DD7A7A.

Non devi seguire lo stile esatto del pezzo di riferimento che ho creato, sarebbe interessante vedere cosa riesci a fare, in modo che alla fine gli avrai dato un po' di tocco personale.

Detto questo, una volta che hai tutti i pezzi del corpo principale del cronometro, raggruppali insieme (CTRL-G) in modo da avere tutto al sicuro.

Step 7

Con il calibro dell'orologio e il corpo principale finiti, possiamo ora andare avanti e iniziare a lavorare sull'anello superiore che normalmente si utilizza per metterci una stringa e fissarlo lungo il collo.

In primo luogo, crea un rettangolo di 10 x 4 px (#8C7970), dagli un contorno di 4 px e quindi con le due forme raggruppate (CTRL-G), posizionale verso la parte superiore dell'orologio, facendo attenzione siano posizionate sotto di esso (fare clic destro > Disponi > Porta in secondo piano).

Step 8

Continua ad aggiungere dettagli all'anello di supporto del cronometro creando un cerchio di di 8 x 8 px (#A3876F) con un contorno di 4 px (#544F4B), che raggrupperai (CTRL-G) e posizionali sotto il pezzo di rettangolo (fare clic destro > Disponi > Porta Dietro) che abbiamo creato nel passaggio precedente, facendo in modo che più della metà della sua sezione inferiore venga nascosta dalla sovrapposizione.

Step 9

Per finire l'icona, è sufficiente creare un anello di supporto, che può avere la forma di un anello effettivo o uno più rettangolare come il mio. Colora la sezione interna utilizzando #DDD2CA e poi come al solito dagli un contorno di 4 px (#544F4B).

Infine, seleziona tutti gli elementi del cronometro e raggruppali (CTRL-G), affinché essi non vengano persi.

10. Crea la Palla da Football

Siamo infine alla la nostra ultima icona ma non meno importante, quella del football. So che è stata una strada piuttosto lunga, ma tieni duro dal momento che siamo solo ad un paio di passi per finire questo pacchetto.

Step 1

Supponendo che tu sia sul livello giusto, che è in realtà l'ultimo, prendi lo Strumento Ellisse (L) e crea una forma di 50 x 84 px che coloreremo utilizzando #8C7970 e quindi dagli un contorno di 4 px (#544F4B), facendo attenzione ad allineare al centro le due alla Griglia di Base dell'icona.

Step 2

Aggiungi una texture alla superficie della palla creando 22 righe di 15 cerchi (misura 4 x 4 px, colore #6D645E), posizionati a 2 px gli uni dagli altri e sovrapponili all'icona.

Per renderla più interessante, crea un pattern dove una riga è spinta leggermente più verso destra, e alla fine creerà un gruppo di linee di punti diagonali.

Una volta che li hai posizionati, non dimenticare di selezionare e raggrupparli (CTRL-G), poiché devono essere facilmente raggiungibili se si decide che è necessario modificarli.

Step 3

Come puoi vedere, la texture è posizionata, ma esce fuori dalla forma di riempimento della palla da football, e noi non lo vogliamo.

Quindi fai una copia dell'ellisse marrone chiaro (CTRL-C) e incollala (CTRL-F) sopra la trama stessa affinché possiamo usarla per creare una maschera di ritaglio facendo clic destro > Crea Maschera di Ritaglio.

Step 4

Aggiungi uno spesso divisore verticale disegnando un rettangolo di 4 x 88 px (#544F4B) e centrandolo sulla palla da football.

Step 5

Aggiungi la sezione colorata superiore e inferiore della palla creando due ellissi da 56 x 52 px (#DD7A7A) con 4 px di spessore di contorno (#544F4B) e posizionali all'interno della maschera di ritaglio della trama selezionandoli e fare clic destro > Isola Maschera di Ritaglio selezionata.

Una volta che hai finito, esci dalla Modalità Isolamento premendo ESC, in modo da poter aggiungere il tocco finale all'icona.

Step 6

Finisci l'icona aggiungendo tre rettangoli dorati (#DBC07B) da 10 x 4 con un contorno di 4 px (#544F4B) posizionati a 2 px uno dall'altro al centro della palla da football.

Ecco fatto!

Grazie per avermi seguito, perchè so che le sessioni di letture lunghe possono stancarti, ma non dimenticare che l'apprendimento richiede pazienza. Spero che dopo aver terminato questo tutorial tu abbia scoperto alcuni nuovi trucchi che potrai utilizzare per sviluppare ulteriormente le tue competenze.

Alla prossima!