1. Design & Illustration
  2. Graphic Design
  3. Icon Design

Come creare un Set di icone del gelato in Adobe Illustrator

Scroll to top
Read Time: 20 min

() translation by (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Nel tutorial di oggi si arriva a creare qualcosa di veramente dolce — sì, avete indovinato, gelato! OK, quindi non è vero gelato, ma ci sarà fare alcune piccole icone cool che lasceranno le vostre papille gustative assetati. Ci concentreremo su utilizzando lo strumento rettangolo arrotondato per creare le forme, in combinazione con diversi metodi di fusione e pendenze al fine di ottenere tale effetto bagliore interessante.

Dell'estate qui, e so che quasi tutti voi l'amore per sedersi e rilassarsi di tanto in tanto con un grande vecchio gelato in mano. Non voglio mentire, lo faccio quasi ogni giorno, ed è per questo ho deciso di fare un piccolo tutorial cool sul tema.

Basta con le chiacchiere — Apriamo Illustrator e iniziare a giocare con alcune ricette.

1. impostare il nostro documento

Iniziamo a semplice creando un nuovo documento (controllo-N o File > New) e modificare alcune delle sue proprietà.

  • Numero di tavole da disegno: 1
  • Larghezza: 640 px
  • Altezza: 600 px
  • Unità: pixel

E da avanzate scheda:

  • Modalità colore: RGB
  • Gli effetti raster: Alta (300 ppi)
  • Allineamento di nuovi oggetti alla griglia Pixel: controllato
setting up a new documentsetting up a new documentsetting up a new document

2. impostare i nostri strati

Una volta che abbiamo creato un nuovo documento, è il momento di modo che possiamo creare un'area di lavoro, bello, ordinato, che alla fine ci si concentrerà su ogni sezione del una passo illustrazione in un momento lo strato. Quindi, aprire il pannello livelli e creare sei strati, indicando il loro nome come segue:

  1. viola
  2. arancio
  3. verde
  4. cioccolato
  5. doppia
  6. biscotto
setting up the layerssetting up the layerssetting up the layers

3. regolazione della griglia

Se siete nuovi alla griglia, si dovrebbe sapere che è un sistema di linee verticali e orizzontali che consente di comporre e posizionare la vostra opera d'arte con cautela. Per me la sua funzione più importante è la precisione che si ottiene dopo aver impostato i valori più bassi, che mi permette di ottenere un flusso di lavoro perfetto di pixel.

Per regolare alcune impostazioni che ho parlato, si deve andare in modifica > Preferenze > Guide & griglia. Da lì, un piccolo popup, dove è necessario regolare le seguenti:

  • Delle linee della griglia ogni: 1 px
  • Suddivisioni: 1
adjusting the grid settingsadjusting the grid settingsadjusting the grid settings

Una volta che hai regolato le impostazioni di cui sopra, è necessario attivare lo Snap alla funzione griglia da Visualizza > Allinea alla griglia.

Suggerimento rapido: si deve sapere che l'opzione blocca sulla griglia si trasformerà in Snap al Pixel ogni volta che si entra in modalità anteprima Pixel, ma che è assolutamente soddisfacente, dato che la griglia è impostata per i valori più bassi, rendendo le due funzioni di agire lo stesso.

Potete leggere di più sulla griglia e come funziona andando su alcuni dei miei altri tutorial che coprono il soggetto:

Inoltre, se ti piace muoversi le cose con l'aiuto dei tasti freccia direzionale della tastiera, è possibile modificare l'incremento di tastiera a 1 px per ottenere la più precisa possibile. È possibile farlo andando su Modifica > Preferenze > generali > incrementi da tastiera.

adjusting the keyboard increment settingsadjusting the keyboard increment settingsadjusting the keyboard increment settings

Se la tua versione di AI è il valore impostato su pt (punti), basta andare all'unità e al cambiamento che alle unità generale e colpo di pixel e si stanno bene ad andare.

4. creazione dell'icona di prima

Passo 1

Posizionarsi sul livello di viola, e utilizzando lo strumento rettangolo arrotondato creare una forma di 28 x 90 px con un 4 px raggio d'angolo. Successivamente, la forma utilizzando #B392AC di colore e la posizione utilizzando le seguenti coordinate nel pannello Trasforma:

  • X: 226 px
  • Y: 211 px
positioning the top base shape for the first iconpositioning the top base shape for the first iconpositioning the top base shape for the first icon

Passo 2

Una volta che hai la prima forma in luogo, selezionarlo e cerchiamo di dargli un contorno spesso andando a oggetto > percorso > Scostamento tracciato e inserendo 4 px nel campo Offset.

creating the outline of the first icon using the offset path effectcreating the outline of the first icon using the offset path effectcreating the outline of the first icon using the offset path effect

Passo 3

Potreste aver notato che ora abbiamo l'offset sotto nostra forma originale, ma abbiamo bisogno di cambiare il suo colore così che i due non finiscono per fondersi con una singola forma. Basta selezionare la forma e quindi modificarne il colore di qualcosa un po' più scuro # 735 78.

changing the color for the first icons outlinechanging the color for the first icons outlinechanging the color for the first icons outline

Passo 4

Successivamente creare un rettangolo di px 6x22 più piccolo con un raggio d'angolo di 1 px. La forma utilizzando #F7D1CD di colore e quindi centro orizzontale la allineare alla sezione struttura del gelato, facendo attenzione a posizionarlo sotto.

creating the stick for the first iconcreating the stick for the first iconcreating the stick for the first icon

Suggerimento rapido: come potete vedere, la parte superiore del bastone va sotto la crema di ghiaccio di circa 4 px, che è il valore esatto della struttura stessa. È possibile ottenere questo livello di precisione di passaggio alla modalità anteprima Pixel (Alt-Control-Y o vista > anteprima Pixel), che permette di vedere i pixel effettivi che si trovano sotto la vostra opera d'arte.

example of using the pixel preview mode for positioning the stick to the first iconexample of using the pixel preview mode for positioning the stick to the first iconexample of using the pixel preview mode for positioning the stick to the first icon

Passo 5

Dare il bastone un contorno utilizzando lo stesso trucco di Scostamento tracciato, facendo attenzione a cambiare il suo colore a 735 n. 78.

first icon with basic shapes finishedfirst icon with basic shapes finishedfirst icon with basic shapes finished

Passo 6

Una volta che abbiamo il nostro forme base, possiamo iniziare l'aggiunta di alcuni dettagli. Dal momento che abbiamo lavorato per ultimo sul bastone, cominciamo da lì. Utilizzando lo strumento rettangolo (M), creare una forma di px 6x4, che ci sarà di colore nero (#000000). Poiché questo agirà come un'ombra, cambieremo il suo metodo di fusione a moltiplicare e quindi abbassare l'opacità al 20%.

adding a subtle shadow to the first icons stickadding a subtle shadow to the first icons stickadding a subtle shadow to the first icons stick

Passo 7

Successivamente, aggiungere le due linee diagonali creando due 6 x 4 rettangoli di px (735 n. 78) che ci sarà la posizione 4 px uno da altro. Abbiamo quindi bisogno di regolare le forme selezionando prima i loro punti di ancoraggio di destra con lo strumento di selezione diretta (A) e quindi spostarli da 2 px, tramite verso l'alto puntando la freccia o facendo clic destro > trasformare > spostare ed entrando -2 px nel verticale campo di input. Infine i due del gruppo (CTRL-G) e la loro posizione proprio accanto all'ombra che abbiamo creato un passo fa.

adding details to the first icons stickadding details to the first icons stickadding details to the first icons stick

Passaggio 8

Salendo, possiamo iniziare l'aggiunta di un mucchio di punti salienti per il gelato. Cominciamo con quello esterno, creando innanzitutto una copia (CTRL-C > Ctrl-F) della sezione interna (quello più leggero) e quindi l'aggiunta di un rettangolo più piccolo di 24 x 86 px con un 2 px raggio d'angolo su di esso (illustrato con luce rossa).

Con entrambi gli oggetti selezionati, vai al pannello Elaborazione tracciati e utilizzare l'opzione meno anteriore. Questo creerà un ritaglio a forma più grande, che possiamo utilizzare come il punto culminante reale.

creating the cut out for the all-round highlight for the first iconcreating the cut out for the all-round highlight for the first iconcreating the cut out for the all-round highlight for the first icon

Passaggio 9

Cambiare il colore della forma risultante al bianco (#FFFFFF), il metodo di fusione a luce soffusa e il suo livello di opacità al 40%.

adjusting the blending mode for the all-round highlight of the first iconadjusting the blending mode for the all-round highlight of the first iconadjusting the blending mode for the all-round highlight of the first icon

Passaggio 10

Utilizzando lo strumento rettangolo (M), creare due rettangoli bianchi (#FFFFFF), uno più piccolo (20 x 4 px) e quello più alto (20 x 10 px) e la loro posizione sulla parte superiore dell'icona.

Quindi, centro orizzontale li allineare alla forma viola sotto, così da avere un gap di 14 px tra il contorno e il rettangolo inferiore e un altro 4 px uno tra le due forme di bianche.

adding the diagonal highlights to the first iconadding the diagonal highlights to the first iconadding the diagonal highlights to the first icon

Passaggio 11

Regolare i due punti salienti selezionando loro diritto punti di ancoraggio utilizzando lo strumento di selezione diretta (A) e quindi spostarli verso l'alto di 20 px (fare clic destro > trasformare > spostare e immettere -20 px nel verticale campo di input).

adjusting the diagonal highlights for the first iconadjusting the diagonal highlights for the first iconadjusting the diagonal highlights for the first icon

Passo 12

Poiché i punti salienti devono essere un po' trasparente, dovremo regolare la nostra cambiando loro modi di fusione a luce soffusa e loro opacità al 60%.

adjusting the blending modes for the diagonal highlights of the first iconadjusting the blending modes for the diagonal highlights of the first iconadjusting the blending modes for the diagonal highlights of the first icon

Passaggio 13

Ora ho intenzione di mostrarvi un piccolo trucco (nel caso in cui tu non lo sapevi già). Se si applica un metodo di fusione a un oggetto e quindi di gruppo ad un altro, è possibile applicare un nuovo metodo di fusione il gruppo stesso. Pulito, vero?

Quindi cerchiamo di selezionare i due punti salienti, raggrupparli (CTRL-C > Ctrl-F) e poi nel pannello Trasparenza selezionate Overlay, lasciando l'opacità come è.

L'effetto è immediatamente visibile, in quanto dà l'icona un'atmosfera più viva, rendendolo pop.

applying a second blending mode to the diagonal highlights of the first iconapplying a second blending mode to the diagonal highlights of the first iconapplying a second blending mode to the diagonal highlights of the first icon

Passo 14

Quindi, iniziamo aggiungendo gli ultimi dettagli per il nostro primo gelato icona aggiungendo il poco colorato spruzza. Utilizzando lo strumento rettangolo (M), disegnare un mucchio di forme e ruotarle in un angolo di 45°.

Iniziare a decorare utilizzando i valori di colore sotto per distinguerle una da altra.

  • Viola scuro: 78 n. 735
  • Rosa chiaro: #F7D1CD
  • Pallido arancio: #F49AA1

A questo punto potreste aver notato che la spruzza andare oltre i punti salienti, che è qualcosa che non vogliamo. Per risolvere questo problema, selezionare i punti salienti diagonali ed esterni e fare clic destro > Disponi > porta in primo piano.

adding the sprinkles to the first iconadding the sprinkles to the first iconadding the sprinkles to the first icon

Passo 15

Una volta che hai finito aggiungendo la spruzza, è il momento di creare i punti salienti a forma di stella poco. Innanzitutto creare un cerchio di 12 x 12 px utilizzando lo strumento ellisse (L). Quindi, utilizzando lo strumento di selezione diretta (A), selezionare i punti di ancoraggio sul lato superiore e sinistro e rimuoverli premendo CANC.

Dopo aver rimosso le ancore, posizionare il segmento rimanente verso l'alto e crearne un duplicato (Control-C > Ctrl-F), riflettendola verticalmente (fare clic destro > trasformare > Reflect > verticale). Separare i due segmenti con l'aggiunta di un cerchio di 4 x 4 px tra di loro, assicurandosi che i segmenti siano allineati alle sue ancore centrale. Quindi creare una copia dei segmenti di cerchio e lato e rifletterle orizzontalmente, l'aggiunta di due ulteriori cerchi tra i duplicati e le forme originali.

Selezionare i segmenti e unire tutti i loro punti di ancoraggio (selezionare le ancore > Control-J) così che si finisce con una forma chiusa. Quindi semplicemente selezionarlo e i piccoli cerchi e utilizzare la funzione Unite di Pathfinder.

creating the star shaped highlightscreating the star shaped highlightscreating the star shaped highlights

Passo 16

Creare due più piccole a forma di stella mette in evidenza e posizionarli uno accanto a altro. Con tutti e tre selezionati, vai al pannello trasparenza e cambiare loro modi di fusione in Sovrapponi abbassando i livelli di opacità all'80%.

Una volta che hai fatto, raggrupparli insieme (CTRL-G) e loro posizione sull'icona circa 18 px dalla parte superiore della struttura principale, lasciando uno spazio di soli 2 px tra loro e il lato destro del contorno.

positioning the star shaped highlights onto the first iconpositioning the star shaped highlights onto the first iconpositioning the star shaped highlights onto the first icon

Passo 17

Finire l'icona aggiungendo un bel gradiente su di esso. Innanzitutto selezionare i contorni di due (uno per il gelato e il bastone) e creare una copia di ciascuno (CTRL-C > Ctrl-F). Poi con i duplicati selezionati, unirli in una singola forma e applicare una sfumatura lineare con le seguenti proprietà:

  • Lasciato il colore: #00FF00
  • Colore a destra: #D4145A
  • Angolo: -90
gradient settings for the first icongradient settings for the first icongradient settings for the first icon

Passo 18

Poiché la pendenza è troppo difficile, abbiamo bisogno di regolare la modalità di fusione impostando su Schiarisci abbassando l'opacità al 50%. Questo ci darà un effetto di bagliore bella, liscia.

Infine, non dimenticate di selezionare tutti gli elementi dell'icona e raggrupparli insieme (CTRL-G) in modo non andranno persi o disallineato se vi capita di spostare l'icona stessa.

first icon finishedfirst icon finishedfirst icon finished

5. creare la seconda icona

Passo 1

Andare avanti fino al livello arancio e utilizzare lo strumento rettangolo (M) per creare una forma di 52 x 90 px, colorazione utilizzando #F49AA1 (1).

Poiché abbiamo bisogno di sezioni superiore e inferiore di essere rotondo, utilizzeremo l'effetto angoli rotondi per fare proprio questo. Utilizzando lo strumento di selezione diretta (A), selezionare i punti di ancoraggio di fondo e ad essi si applicano una rotondità px 6, andando a effetto > Stilizzazione > angoli arrotondati e immettendo il valore nel campo di immissione raggio (2). Quindi selezionare la parte superiore punti di ancoraggio e ripetere la stessa procedura, ma questa volta dare loro una rotondità di 26 px (3).

creating the base shape for the second iconcreating the base shape for the second iconcreating the base shape for the second icon

Passo 2

Una volta che avete la base superiore forma creata, è il momento di aggiungere una struttura tramite un percorso di offset di 4 px, facendo attenzione a cambiare il colore dell'oggetto risultante di #C96975.

adding an outline to the second iconadding an outline to the second iconadding an outline to the second icon

Passo 3

Aggiungere un bastoncino creando un rettangolo di px 12 x 28 con un 6 px raggio d'angolo. L'oggetto utilizzando #F7D1CD di colore e quindi creare una struttura di px 4 (#C96975) utilizzando il trucco di Scostamento tracciato, assicurandosi di inviare sia il riempimento e contorno alla parte posteriore del gelato (fare clic destro > Arrange > invia alla schiena). Assicurarsi che la chiavetta è correttamente posizionata al centro dell'icona, inferiore allineandolo con il bastone del gelato creato in precedenza.

adding the little ice cream stick to the second iconadding the little ice cream stick to the second iconadding the little ice cream stick to the second icon

Passo 4

Aggiungere alcuni dettagli al gelato bastone creando un'ombra di px 12 x 4 (#000000, metodo di fusione impostato su moltiplica, opacità abbassata al 20%) e alcuni piccoli rettangoli di 1 x 4 px arrotondati con un raggio d'angolo pari a 0.5 px. I piccoli pezzi di linea utilizzando #C96975 di colore e poi li disperderò intorno all'interno del bastone del gelato, assicurandosi che l'ombra si va su di loro. Inoltre è possibile selezionare tutti gli elementi che formano il bastone e raggrupparli insieme (CTRL-G) in modo che non perdersi.

adding details to the second icon stickadding details to the second icon stickadding details to the second icon stick

Passo 5

Passare alla sezione superiore dell'icona e dare il gelato un highlight campionarie ripetendo lo stesso taglio fuori processo e quindi l'impostazione fusione della forma risultante Soft Light mentre abbassando il livello di opacità al 30%.

adjusting the blend settings for the all-round highlight of the second iconadjusting the blend settings for the all-round highlight of the second iconadjusting the blend settings for the all-round highlight of the second icon

Passo 6

Aggiungere la diagonale mette in evidenza con la creazione di due rettangoli bianchi di (#FFFFFF), un 44 x 10 px e un altro 44 x 4 px uno, che ci sarà poi la posizione verso il centro dell'icona (1). Utilizzando la funzione di spostamento, selezionare i punti di ancoraggio di destra con strumento di selezione diretta (A) e spostarli in verticale da -44 px (2).

Modificare la modalità di fusione degli oggetti a luce soffusa e abbassare i loro livelli di opacità al 50% (3). Poiché le forme devono stare dentro il gelato, lasciando un piccolo spazio di circa 2 px su ogni lato, avremo bisogno di mascherare i rettangoli con la creazione di una forma di px 44 x 82 che ha gli angoli arrotondati simili alla forma rosa più grande sotto.

Quindi con la forma più grande e i rettangoli selezionati, fare clic destro > Crea maschera di ritaglio (4). Una volta che hai fatto, i punti salienti dovrebbero essere pronti ad andare (5).

adding the diagonal highlights to the second iconadding the diagonal highlights to the second iconadding the diagonal highlights to the second icon

Passo 7

Una volta che abbiamo aggiunto che la diagonale mette in evidenza, possiamo iniziare a lavorare su piccole rientranze sulla superficie del gelato. Prima prendi il rettangolo arrotondato Tool e creare una forma di px 6 x 62 (#C96975) con un raggio d'angolo di 3 px (1).

Utilizzando lo strumento di selezione diretta (A), selezionare e rimuovere la parte inferiore punto di ancoraggio e quindi premere Control-J per dare alla forma un'estremità piatta (2).

Successivamente aggiungere un rettangolo di 2 x 58 px con un 1 px raggio d'angolo sulla parte superiore e la creazione di un ritaglio utilizzando l'opzione meno anteriore di Pathfinder (3 e 4). Una volta che hai creato il ritaglio, aggiungere due 2 x 2 px cerchi alle gambe inferiore e unirle con l'arco come forma (5).

Creare un'altra forma di px 2x58 identico al precedente (6) e quindi tagliare un cerchio di 2 x 2 px dalla sezione inferiore (7 e 8). Aggiungere una piccola ombra verso il lato superiore interno della rientranza e quindi selezionare tutti gli elementi e il gruppo li insieme usando controllo-G.

creating the little fosses for the second iconcreating the little fosses for the second iconcreating the little fosses for the second icon

Passaggio 8

Posizionare il rientro sopra l'icona del gelato e quindi creare tre duplicati, distanziandoli verso il lato destro a circa 4 px uno da altro.

positioning the fosses onto the second iconpositioning the fosses onto the second iconpositioning the fosses onto the second icon

Passaggio 9

Una volta che abbiamo aggiunto le rientranze, ora possiamo prendere una copia (CTRL-C) le strutture a forma di stella dall'icona precedente e incolla (CTRL-F) su quello che sta attualmente lavorando.

adding the star shaped highlights to the second iconadding the star shaped highlights to the second iconadding the star shaped highlights to the second icon

Passaggio 10

Finire l'icona aggiungendo una sfumatura lineare con le seguenti proprietà:

  • Lasciato il colore: #00FF00
  • Colore a destra: #D4145A
  • Angolo: -90
  • Metodo di fusione: Colore brucia
  • Opacità: 20%
second icon finishedsecond icon finishedsecond icon finished

6. creare la terza icona

Passo 1

Come sempre, assicurarsi che sei sul livello giusto (quello verde in questo caso) e creare una copia della prima icona e incollarlo qui, affinché abbiate un gap di 40 px tra il duplicato e la seconda icona.

creating the third icon using the first onecreating the third icon using the first onecreating the third icon using the first one

Passo 2

Separare tutti gli elementi dell'icona (clic destro > separa) e quindi rimuovere la sfumatura selezionando e premendo CANC (1). Mentre noi stiamo eliminando le cose, può anche liberarsi del piccolo sprinkles (2) e le linee diagonali dal nostro piccolo bastone (3).

Ora vediamo scuotere le cose un po' cambiando i colori. Selezionare il contorno più grande e il contorno di bastone e colorarli usando #386150. Utilizzare #58B09C del gelato riempimento e #CAF7E2 per il riempimento di bastone. A questo punto (4) la nostra piccola icona dovrebbe guardare più come qualcosa di dolce da un altro pianeta, che è esattamente ciò che vogliamo.

adjusting the color scheme of the third iconadjusting the color scheme of the third iconadjusting the color scheme of the third icon

Passo 3

Iniziare ad aggiungere dettagli come le strisce diagonali (#CAF7E2) (2), i punti poco cosparsi (#CAF7E2) (3) e le linee diagonali di px (#386150) di due 12 x 4 per il bastone (4).

A seconda di come tu hai raggruppati gli elementi che compongono l'icona, sarà necessario portare i punti salienti alla parte anteriore di tutto il resto selezionando e facendo clic destro > Disponi > porta in primo piano.

Una volta che avete tutto posizionato, non dimenticate di raggruppare gli elementi utilizzando controllo-G.

adding details to the third iconadding details to the third iconadding details to the third icon

Passo 4

Finire l'icona aggiungendo una sfumatura lineare liscia con le seguenti impostazioni:

  • Lasciato il colore: #00FFFF
  • Colore a destra: #D4145A
  • Angolo: -90
  • Metodo di fusione: alleggerire
  • Opacità: 60%
third icon finishedthird icon finishedthird icon finished

7. creazione dell'icona di quarta

Passo 1

Spostarsi verso l'alto lo strato di cioccolato, e utilizzando lo strumento rettangolo arrotondato creare una forma di px 28 x 18 con un 2 px raggio d'angolo. Utilizzando #A07F7F di colore e quindi posizionarlo circa 40 px sotto l'icona del prima.

positioning the first element of the fourth iconpositioning the first element of the fourth iconpositioning the first element of the fourth icon

Passo 2

Selezionata la forma appena creato, andare a oggetto > percorso > Scostamento tracciato e dargli una struttura di 4 px affinché noi mantenere le cose equilibrate. Cambiare il colore di contorno a n. 785F5F e quindi creare un interno highlight all-around (#FFFFFF), come abbiamo fatto con tutte le nostre icone precedente, con il metodo di fusione impostato su luce soffusa e l'opacità al 40%.

Una volta che hai sia riempimento, muta e highlight, raggruppare gli elementi insieme usando controllo-G.

creating the first ice cream segment for the fourth iconcreating the first ice cream segment for the fourth iconcreating the first ice cream segment for the fourth icon

Passo 3

Creare un duplicato della sezione dell'icona che abbiamo appena creato trascinando verso il basso tenendo premuto Alt (per creare il duplicato) e Shift (per trascinare in una linea retta).

Poiché ogni segmento avrà un contorno, si dovrebbe cercare di rivestirai di modo che non finiscano con un divario enorme tra i riempimenti. Raccomando che si accende modalità anteprima Pixel (Alt-Control-Y) in modo da poter essere più preciso possibile.

Una volta creata la prima copia, premere Control-D (duplicato) due volte a creare il resto dei segmenti.

creating the remaining segments for the fourth iconcreating the remaining segments for the fourth iconcreating the remaining segments for the fourth icon

Passo 4

Regolare i colori di secondo e il quarto segmento per qualcosa di un po ' più leggero utilizzando #BA9494.

adjusting the color scheme for the fourth iconadjusting the color scheme for the fourth iconadjusting the color scheme for the fourth icon

Passo 5

Iniziare a lavorare sul bastone dell'icona con la creazione di un rettangolo di 6 x 28 px con un raggio d'angolo di 1 px. Utilizzando #F7D1CD di colore e quindi posizionarlo sotto l'ultimo segmento in modo che si sovrapponga la sezione inferiore del contorno. Poi, con il bastone selezionato, dare un percorso di Offset di 4 px, cambiando il colore della forma risultante di n. 785F5F.

adding the little ice cream stick to the fourth iconadding the little ice cream stick to the fourth iconadding the little ice cream stick to the fourth icon

Passo 6

Aggiungere una sottile ombra px 6x4 (#000000, moltiplicare, 20%) sulla chiavetta e quindi selezionare tutti i suoi elementi e raggrupparli insieme usando controllo-G.

fourth icon with basic shapes finishedfourth icon with basic shapes finishedfourth icon with basic shapes finished

Passo 7

Poiché a questo punto noi abbiamo gettato le nostre figure di base, possiamo iniziare a lavorare sull'aggiunta di dettagli. Utilizzando lo strumento rettangolo (M), creare un gruppo di diverse forme dimensioni, colorarli usando #785F5F e quindi ruotarle un'angolazione di 45 gradi premendo R (per ruota) e quindi trascinando con il mouse verso l'alto.

Gruppo l'insieme pezzi poco decorativi (CTRL-G) e la posizione uno impostato sul primo segmento di gelato (2) e l'altro al terzo (3).

Una volta che hai fatto che si può aggiungere la diagonale mette in evidenza (4) e selezionare sia loro e quelli all-around e portarli davanti la spruzza.

adding details to the fourth iconadding details to the fourth iconadding details to the fourth icon

Passaggio 8

Prendi una copia dei momenti salienti dalla prima icona a forma di stella e loro posizione verso la parte superiore del nostro attuale.

adding the star shaped highlight to the fourth iconadding the star shaped highlight to the fourth iconadding the star shaped highlight to the fourth icon

Passaggio 9

Finire l'icona aggiungendo una calda sfumatura lineare con i seguenti attributi:

  • Colore a sinistra: #FFFF00
  • Colore a destra: #C1272D
  • Angolo: -90
  • Metodo di fusione: Luce intensa
  • Opacità: 20%
fourth icon finishedfourth icon finishedfourth icon finished

8. creazione dell'icona di quinto

Passo 1

Posizionarsi sul doppio strato e utilizzando lo strumento rettangolo (M) creare una forma di px 26 x 90 che si colorerà utilizzando #9CD6F2.

Utilizzando lo strumento di selezione diretta (A), selezionare i punti di ancoraggio inferiore e applicare un effetto angolo rotondo di 4 px (2). Poi fare lo stesso per gli ancoraggi superiori, dando loro un valore più alto di 13 px (3) per ottenere che tutti intorno si sentono ad essa.

adjusting the fill shape for the fifth iconadjusting the fill shape for the fifth iconadjusting the fill shape for the fifth icon

Passo 2

Dopo aver regolato la forma, dargli un contorno di 4 px (#6B94A8) e quindi allineare le due sul lato destro dell'icona creata in precedenza, lasciando uno spazio di 40 px tra di loro.

positioning the fifth iconpositioning the fifth iconpositioning the fifth icon

Passo 3

Aggiungere il bastoncino sotto il gelato creando un rettangolo di 6 x 22 px arrotondato con un 3 px raggio d'angolo. Colore della forma tramite #D9F0F9 (1) e poi dare un contorno di 4 px (#6B94A8) (2).

Posizionare il bastone sotto l'icona in modo che la sezione di riempimento si sovrappone il contorno inferiore del gelato.

positioning the ice cream stick for the fifth iconpositioning the ice cream stick for the fifth iconpositioning the ice cream stick for the fifth icon

Passo 4

Aggiungere piccoli dettagli sulla chiavetta come il puntino-come sprinkles (#6B94A8) e l'ombra di 6 x 4 px sottile che abbiamo applicato a tutte le altre icone.

adding details to the fifth icons stickadding details to the fifth icons stickadding details to the fifth icons stick

Passo 5

Poiché questa icona è un gelato doppio bastone, ora possiamo usare gli elementi che abbiamo creato fino a questo punto e utilizzarli per creare la seconda sezione.

Per farlo, semplicemente selezionare tutti gli elementi e quindi trascinare verso destra tenendo premuto Alt (per duplicare) e Shift (per trascinare in una linea retta). Assicurarsi di che avere acceso (Control-Alt-Y) in modo che è possibile assicurarsi che le linee maestre della sovrapposizione due modalità anteprima Pixel.

example of using pixel preview to correctly overlap the elements of the fifth iconexample of using pixel preview to correctly overlap the elements of the fifth iconexample of using pixel preview to correctly overlap the elements of the fifth icon

Passo 6

Poiché vogliamo le sezioni di riempimento dei segmenti due gelati per essere incollati insieme, dovremo inviare sia i contorni e i bastoni al retro selezionandoli e quindi fare clic destro > Disponi > porta in secondo piano.

correctly adjusting the position of the two sections of the fifth iconcorrectly adjusting the position of the two sections of the fifth iconcorrectly adjusting the position of the two sections of the fifth icon

Passo 7

Iniziare ad aggiungere tutti i piccoli dettagli, come evidenzia l'all-around, quelle diagonali e, infine, quelli a forma di stella.

adding the star shaped highlight to the fifth iconadding the star shaped highlight to the fifth iconadding the star shaped highlight to the fifth icon

Passaggio 8

Infine aggiungere una sfumatura lineare bello utilizzando i seguenti valori:

  • Lasciato il colore: #00FF00
  • Colore a destra: #D4145A
  • Angolo: -90
  • Metodo di fusione: moltiplicare
  • Opacità: 10%
fifth icon finishedfifth icon finishedfifth icon finished

9. creare la sesta e ultima icona

Passo 1

Passare all'ultimo strato, quello di biscotto, e utilizzando lo strumento rettangolo arrotondato creare una forma di px 52 x 112 con un raggio d'angolo di 4 px.

L'oggetto utilizzando #F4D5BD di colore e quindi applicare un effetto Scostamento tracciato di 4 px per dargli un contorno (#806347).

Una volta che avete entrambi gli elementi creati, loro posizione verso il lato destro dell'icona creata in precedenza, lasciando un vuoto di px 28 tra di loro.

positioning the basic shapes for the sixth iconpositioning the basic shapes for the sixth iconpositioning the basic shapes for the sixth icon

Passo 2

Aggiungere il clou a 360 ° ora, dal momento che avremo un sacco di elementi che finirà per questa parte dell'icona di sovrapposizione. Utilizzare il bianco (#FFFFFF) per il colore e impostare la modalità di fusione luce soffusa mantenendo l'opacità livello a circa il 60%.

adding the all-round highlight to the sixth iconadding the all-round highlight to the sixth iconadding the all-round highlight to the sixth icon

Passo 3

Afferrare il rettangolo arrotondato Tool e creare un oggetto di px 52 x 56 più piccolo con un 4 px raggio dell'angolo che si colorerà utilizzando #C4976E.

Quindi, selezionare la forma e applicare un effetto Scostamento tracciato di 4 px ad esso e il colore della struttura risultante utilizzando #806347.

Centro orizzontale allineare i due al contorno più grande che abbiamo creato pochi istanti fa, facendo attenzione a posizionarle verso il basso.

creating the bottom section for the sixth iconcreating the bottom section for the sixth iconcreating the bottom section for the sixth icon

Passo 4

Iniziare a lavorare il vostro senso attraverso i dettagli con la creazione di un gruppo di 4 x 4 cerchi px (#806347) (2), quindi aggiungendo il clou a tutto tondo (3), quindi la diagonale uno (4), la a forma di stella (5) e infine un'ombra sottile (6).

adding details to the sixth iconadding details to the sixth iconadding details to the sixth icon

Passo 5

Come probabilmente avete ottenuto usato a quest'ora, finiremo fuori l'icona aggiungendo una dolce sfumatura lineare su di esso. Per farlo bene, utilizzare i seguenti valori:

  • Colore a sinistra: #C7B299
  • Colore a destra: #C1272D
  • Angolo: -90
  • Metodo di fusione: Luce intensa
  • Opacità: 20%
sixth icon finishedsixth icon finishedsixth icon finished

Questo è tutto!

Spero vi siate divertiti questa deliziosa sorpresa e imparato qualcosa di nuovo lungo la strada.

Sentitevi liberi di lasciare le versioni nella sezione forum, dal momento che ho sempre impazienti di vedere cosa si arriva con. Grazie per la vostra attenzione e hanno una buona!

all icons finishedall icons finishedall icons finished
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads