Cosi mentre realizzavo il restyling di una membership commissionata cercavo delle icone che raffigurassero le risorse da scaricare: mp3, pdf, ppt, video ecc.

Cercando sui vari siti di icone però mi sono accorto che la stragrande maggioranza delle icone presenti è massicciamente presente in moltissimi siti web. Questo aspetto poteva rendere poco professionale l’aspetto di un sito al quale la gente paga per poter accedere ai contenuti.

Bene ho pensato di farti vedere attraverso un tutorial phoshop come creare icone personalizzate.

Iniziamo!

Per prima cosa apri un nuovo documento 512×512 pixel con risoluzione 300 pixelxcm

Appena dentro crea un nuovo livello, rinominalo FOGLIO BASE, e con lo strumento selezione (M) crea una selezione rettangolare simile ad un foglio A4. Colora di bianco questa selezione sul nuovo livello e lasciando la selezione attiva, togli la visibilità (cliccando sull’ochio) al livello sfondo.

A questo punto attiva lo strumento sfumatura e crea una sfumatura dal bianco #ffffff al grigio #f5f5f5. Dalla barra opzioni strumento selezione sfumatura RADIALE.

Con la selezione attiva del livello (se non è attiva tieni premuto CTRL e clicca sulla miniatura del livello – nella palette dei livelli) fai partire la sfumatura più o meno come mostrato nella figura qui sotto:

Ti ritroverai con un punto di luce bianco nel vertice alto destro. Disattiva la selezione con CTRL+D

A questo punto devi crere una bella fascia indicativa che ti servirà per dare una “direzione” alla tua icona.

Crea un nuovo livello rinominalo ETICHETTA e se non lo è già posizionalo in cima a tutti gli altri livelli.
Con lo strumento selezione (M) crea una selezione come in figura:

Adesso tenendo premuto CRTL+ALT+SHIFT clicca sulla miniatura del livello FOGLIO BASE. Vedrai che il cursore del mouse mostrerà una x. Se hai fatto tutto bene troverai la nuova selezione attiva:

Assicurandoti di avere il livello ETICHETTA attivo premi ALT+BACKSPACE (che non è la barra spaziatrice ma il tasto che solitamente cancella indietro). Non importa il colore asssegnatogli.

A questo punto clicca su fx nella palette dei livelli ed applica una sovrapposizione sfumatura. Per questo articolo utilizzerò una sfumatura di rosso.

per ottenere…

Bene a questo punto deseleziona con CRTL+D.

Attiva lo strumento testo, scegli il font e seleziona il colore del testo per scrivere l’estensione del file.

In questo articolo scriverò pdf.

Applico un’ombra esterna alla scritta:

per ottenere questo effetto:

Ok! A questo punto parte la personalizzazione.

Per questo articolo ho pensato ti applicare il mio logo in saturazione zero.

Ecco Alcune varianti

Insomma puoi diverti come vuoi!

Gold Sail (+ varianti)

Green Security

Mom Planet

Star Lion

Dual Vision

The Rocket

Fruit Heart

Quale logo vettoriale cattura maggiormente la tua attenzione? Ah! Se te ne piace qualcuno clicca sul tasto Mi piace di facebook che trovi qui sotto!

Qui puoi scaricare qualche mio logo vettoriale gratis: Loghi vettoriali

logo alla frutta!

In questo video vedrai la realizzazione di un logo che può essere utilizzato in diversi mercati come: l’ortofrutta, il design, il marketing online ed offline e tantissimi altri mercati.

Non concentrarti sulla realizzazione, ma soffermati sulle tecniche utilizzate per creare un logo!
Sono proprio le tecniche che devi sfruttare per creare dei loghi (simili o meno). Alla fine della visione, sotto il video, trovi un bel pulsantone blu per condividere l’articolo. Clicca e condividi!

http://www.youtube.com/watch?v=lMu4J7b4dkA

Alcune varianti

I tutorial che creo sono “frutto”  (giuro non l’ho scritto apposta ) delle richieste che mi arrivano direttamente da voi! Quindi Condividi l’articolo su facebook!

Il Case study

Flavia Iannicelli ( anche se non so per quale parte bruciata del mio cervello continuo a chiamarla Claudia ), oltre ad essere una persona simpaticissima, lavora nel mondo Coaching e allenamento della mente – www.flaviaiannicelli.it.
Il logo da creare deve rappresentare quelli che sono gli ideali lavorativi di Flavia ovvero essere una guida. E’ la stessa Flavia (ho corretto….avevo scritto Claudia!) a suggerirmi di lavorare alla realizzazione di una bussola. Detto fatto!

Gli elementi fondamentali

Essendo una bussola uno strumento che indica il Nord ho deciso di “guidare” l’ago proprio verso questo punto.
Per creare un logo mi affido sempre prima alla mia matita o penna che sia e a ingenti quantità di carta che spesso taglio e ritaglio per creare le forme disegnate qua e la.

Ci sono giorni che passo ore a creare sagome da unire e livellare e giorni che l’idea è ben chiara e distinta. Per questo logo dagli elementi fondamentali ben chiari dovevo decidere solo lo stile ed ho optato per uno stile pulito e d’impatto.

Vediamo adesso come creare il logo con Illustrator.

La scelta dei colori

Anche per questo logo la scelta dei colori non è stata particolarmente problematica. Dopo un brief con Flavia, grazie all’aiuto dell’articolo sulla psicologia dei colori (che ho aggiornato) abbiamo puntato il dito sui colori blu, arancione e bianco.

La realizzazione

Come sempre per creare un logo utilizzo Illustrator. Sono partito da un foglio A4 orizzontale. La dimensione del file iniziale in realtà non è importate perchè con illustrator si può sempre cambiare!
Per prima cosa ho creato un fondo blu che sarà poi il fondo di accompagnamento che utilizzerò alla fine del progetto.

La prima parte che ho realizzato è stata ovviamente la scocca della bussola con le impostazioni che sono visibili nell’immagine qui di seguito.

Subito dopo ho realizzato l’interno: il quadrante.

Il prossimo passo abbastanza banale è stato quello di creare i riferimenti NORD, SUD, OVEST ED EST che ho leggermente ruotato verso sinistra per dare un tocco di dinamicità.

A questo punto ho voluto rendere familiare il simbolo aggiungendo un “senso orario” al tutto, grazie ad una stella a 24 punte che ho inserito nel quadrante al centro. La stella è stata creata con l’ausilio dello strumento  forme stella.

A questo punto manca solo la lancetta che segni il nord. Per lo stile della lancetta ho scelto una che abbia una somiglianza con le punte della stella.

Vediamo come l’ho realizzata. Per prima cosa bisogna affiancare 2 rettangoli e duplicare gli stessi allineandoli al vertice basso. Una volta posizionati dobbiamo colorare i rettangoli di sinistra con le sfumatura indicate nella figura. Per i rattangoli di destra basterà invertire le sfumature.

Adesso bisogna creare le punte. Un’operazione abbastanza banale. Basterà, infatti, eliminare i punti di ancoraggio esterni:

La lancetta, successivamente, è stata leggermente ristretta lateralmente per farle guadagnare profondità d’occhio.

Per finire la bussola manca il perno della lancetta. Per fare ciò basta posizionare du cerchi concentrici uno all’altro (lo stesso procedimento fatto per la scocca e per il quadrante) e colorarli con la sfumatura arancio già utilizzata e la sfumatura di grigio già utilizzata rispettivamente invertita per creare “l’effetto incavato”. Nell’ultimo cerchio, quello con il livello in primo piano (in quel momento) ho aggiunto una traccia di un punto di colre bianco.

Non mi resta che posizionare “l’ago della bussola” .

La parte finale è stata la scelta di un font per la scritta che accompagnerà il logo nella sua avventura.

La scelta dei font possibili è stata varia, ho creato scritte con 6 font differenti. La stessa flavia ha optato per il font libero e utilizzabile in commercio: Museo Slab 500.

Il risultato finale

Variante laterale per il sito web

E tu!? Hai già pensato al tuo Logo?

I colori nella vita hanno sempre dei significati molto importanti, per esempio il colore degli abiti che si indossano determinano lo stato di umore che si ha, oppure si può capire alcuni aspetti della persona conoscendo per esempio il suo colore preferito, in psicologia vengono attuati dei test per capire la personalità della persona.

I colori ci trasmettono effetti psicologici ed emotivi. Vediamo allora, in dettaglio, quali sono gli effetti trasmessi dai colori, per poter scegliere con maggiore consapevolezza i colori da utilizzare per le nostre pagine web.

Rosso

Colore della passione, dell’amore. In psicologia simboleggia calore, l’alimentazione ed è molto stimolante. Per molti un colore troppo aggressivo. Simbolizza anche il pericolo, il sangue, il fuoco e la violenza. Il Rosso è il primo colore dell’arcobaleno che i neonati imparano a riconoscere, il primo a cui tutti i popoli hanno dato un nome. Nell’arte paleocristiana rappresentava in concomitanza con il nero il demonio rosso Lucifero.

Arancione

Il Colore dell’accoglienza e dell’ospitalità è percepito come un colore vibrante ed è molto in voga per i siti web poiché simboleggia attenzione, ricerca e studio. Simbolizza inoltre la fiamma, il fuoco, la lussuria.

Giallo

Il colore del Sole simboleggia l’allegria, la felicità, la crescita e l’oro. Può anche simboleggiare disonestà, codardia, tradimento, gelosia, falsità, malattia e azzardo. Suscitando una sensazione d’espansione e spingendo al movimento, il giallo corrisponde ad una condizione di libertà e autosviluppo.

Verde

Simboleggia la natura, ambiente, vita, crescita, fortuna, gioventù, primavera, fertilità ma anche a putrefazione, acido e veleno. L’effetto di stabilità prodotto dal verde rappresenta, da un punto di vista psicologico, i valori saldi che non mutano. La scelta del verde indica inoltre autostima.

Blu

Simboleggia la calma, l’acqua, il cielo, l’armonia, la fiducia, la pulizia e la lealtà. Tristezza e depressione. Fissando a lungo questo colore si produce un effetto di quiete, soddisfazione ed armonia. Basti pensare ad un paesaggio col mare calmo.

Viola

Simboleggia regalità, spiritualità, passione ed amore.
Crudeltà, arroganza e pianto. Il viola inoltre è il colore della penitenza. Colore tradizionale della mistica, della spiritualità ma anche della fascinazione erotica, il viola indica l’unione degli opposti, la suggestionabilità.

Rosa

Simboleggia femmilità e gioventù. Il colore preferito dalla maggior parte delle donne di tutto il mondo comunica un messaggio di debolezza e ingenuità.

Bianco

Il colore della purezza. E’ sinonimo di pulizia, innocenza, spazio, castità, semplicità e pace.Ma anche morte (culture orientali), freddezza e sterilità.

Marrone

Simboleggia neutralità, terra e caldo. Sporcizia. Il forte bisogno, l’indifferenza o il rifiuto verso questa tinta indicano pertanto un preciso atteggiamento verso ciò che è corporeo e materiale e verso i piaceri fisici.

Nero

Associato a potere, eleganza, magia, mistero e notte. Simboleggia anche lutto e morte (culture occidentali), cattiveria, infelicità, tristezza, rimorso e rabbia. Oggi giorno è un colore molto apprezzato nella moda femminile per la sua caratteristica di far sembrare la persona più magra. Nell’arte paleocristiana rappresentava il demonio.

Grigio

Simboleggia neutralità, intelligenza, solidità, pulizia e qualcosa di moderno. Viene anche associato a maturità e tristezza. Lo si sceglie per definire una distanza ed un non coinvolgimento.

Un bravo graphic webdesigner deve tener conto anche di questo. Lo sapevi? E tu ne hai mai tenuto conto?
Dai vai a stravolgere i colori del tuo sito oppure lascia un commento.