4
Creiamo delle icone per commenti o altri usi In questo tutorial vediamo come procedere nella creazione di alcune icone in stile web 2.0. Come sempre iniziamo aprendo un nuovo documento da 600px x 600px in Illustrator CS4. Successivamente selezioniamo lo strumento Ellisse e facciamo clic sulla tavola da disegno e nella finestra che si apre inseriamo la dimensione di Larghezza a 100px e di Altezza a 70px. Creato lʼovale, diamo un colore uniforme, successivamente selezioniamo lo strumento Rettangolo. Anche in questo caso facciamo un clic sulla tavola da disegno ed inseriamo una Larghezza ed Altezza di 40px. Creato il quadrato, selezioniamo lo strumento Selezione diretta e con un clic sullʼangolo superiore sinistro, selezioniamo la maniglia per poi cancellarla. Abbiamo così ottenuto un triangolo che andremo poi a modificare sempre con lo strumento in uso. Selezioniamo tutto il triangolo e poi spostiamolo sopra lʼovale di modo che rimanga visibile una parte di punta. Con lʼaiuto delle maniglie, aggiustiamo le inclinazioni delle tre maniglie fino ad ottenere un risultato simile a quello della nostra immagine.

Creare icone per la chat (tutorial illustrator)

Embed Size (px)

Citation preview

Page 1: Creare icone per la chat (tutorial illustrator)

Creiamo delle icone per commenti o altri usiIn questo tutorial vediamo come procedere nella creazione di alcune icone instile web 2.0.

Come sempre iniziamo aprendo un nuovo documento da 600px x 600px inIllustrator CS4. Successivamente selezioniamo lo strumento Ellisse e facciamoclic sulla tavola da disegno e nella finestra che si apre inseriamo la dimensionedi Larghezza a 100px e di Altezza a 70px.

Creato lʼovale, diamo un colore uniforme, successivamente selezioniamo lostrumento Rettangolo.Anche in questo caso facciamo un clic sulla tavola da disegno ed inseriamouna Larghezza ed Altezza di 40px.

Creato il quadrato, selezioniamo lo strumento Selezione diretta e con un clicsullʼangolo superiore sinistro, selezioniamo la maniglia per poi cancellarla.Abbiamo così ottenuto un triangolo che andremo poi a modificare sempre conlo strumento in uso.

Selezioniamo tutto il triangolo e poi spostiamolo sopra lʼovale di modo cherimanga visibile una parte di punta. Con lʼaiuto delle maniglie, aggiustiamo leinclinazioni delle tre maniglie fino ad ottenere un risultato simile a quello dellanostra immagine.

Adesso usiamo lo Strumento selezione (A) e selezioniamo entrambe le nostrefigure, poi unifichiamole con lʼapposito comando come nellʼesempio seguente.

Page 2: Creare icone per la chat (tutorial illustrator)

Adesso usiamo lo Strumento selezione (A) e selezioniamo entrambe le nostrefigure, poi unifichiamole con lʼapposito comando come nellʼesempio seguente.

Ora apriamo il menu Oggetto -> Tracciato -> Scostam. tracciato… e nellafinestra che si apre inseriamo lo Scostamento di 3px, gli Spigoli al Vivo e ilLimite di smusso a 4.

Dovremmo quindi ottenere un risultato simile al seguente.

A questo punto iniziamo a dare la giusta sfumatura alla parte interna dellanostra figura. In questo caso abbiamo inserito i seguenti valori:Tipo sfumatura: RadialeC: 25% M: 0% Y: 0% K: 0%Angolo: -7°

Abbiamo poi usato lo Strumento sfumatura (G) e lo abbiamo modificato comein questa immagine.

Abbiamo inoltre optato per aggiungere un bordo di 1pt con un coloreleggermente più chiaro C: 30% M: 0% Y: 0% K: 0% per creare un effettomigliore.

Page 3: Creare icone per la chat (tutorial illustrator)

Abbiamo inoltre optato per aggiungere un bordo di 1pt con un coloreleggermente più chiaro C: 30% M: 0% Y: 0% K: 0% per creare un effettomigliore.

Successivamente, con lo Strumento selezione diretta (A), abbiamo selezionatola parte esterna della figura per poter sistemare il colore del bordoprecedentemente espanso, con questo nuovo colore C: 100% M: 5% Y: 0% K:0%.

Come fatto in partenza, abbiamo creato un nuovo ovale con lo Strumentoellisse e impostato una sfumatura radiale come nelle immagini seguenti.

Alla fine, sempre su questo piccolo ovale appena sfumato, abbiamo dato unaopacità del 35%, così da avere una sorta di riflesso più pronunciato.

Qui di seguito si possono vedere altri esempi che abbiamo creato. Date sfogoalle vostre idee per colori, dimensioni e forme…

Page 4: Creare icone per la chat (tutorial illustrator)

Scritto in Tutorial da Ermes in data 30 aprile 2009