Tantissime volte vi sarà capitato, navigando nei siti di ecommerce, di cliccare su bottoni o pulsanti che vi rimandano all’acquisto di un prodotto. Elementi grafici spesso molto piccoli ma che, se creati in maniera creativa e funzionale, invitano al fatidico click. In questo tutorial voglio spiegarvi come è possibile realizzare alcuni bottoni con pochi semplici elementi attraverso l’utilizzo di Illustrator.
[viral-lock message=”Condividi il file con le risorse in vettoriale e scaricalo gratuitamente!”]Download
[/viral-lock]
Come abbiamo fatto anche negli precedenti tutorial, creiamo un nuovo documento con le seguenti impostazioni:
- Profilo colore RGB;
- Profilo misure a 72 dpi;
- Unità di misura pixel.
I bottoni web possono avere dimensioni standard oppure variabili a seconda delle esigenze specifiche del designer. Per comodità ho scelto un formato di 480×180 pixel, ma ricordatevi che potete sempre, a lavoro terminato, modificarne la misura per l’esportazione finale. Una volta che abbiamo creato la nostra tavola dobbiamo iniziare a creare la base del nostro pulsante per e-commerce. Nel nostro caso utilizzerò l’accoppiamento di colori grigi con elementi grafici arancio.
Nella prima fase, selezionando dalla barra degli strumenti lo strumento rettangolo con angoli arrotondati, creiamo due figure geometriche con dimensioni e gradazione di grigio differenti. Potrete realizzarne anche uno singolo dando alla figura un contorno più scuro, ma in questo caso avendo su due livelli le figure, potrete creare giochi di sfumature o effetti riflesso. (tavola 1 e 2)
Tavola 1
Durante la creazione della seconda figura geometrica applicate un effetto sfumatura con un gradiente molto delicato che va dal grigio al bianco con le seguenti specifiche come nella tavola2
- Colore RGB grigio 13% di nero;
- Colore bianco;
- Sfumatura lineare con angolo -90°.
Tavola 2
Il nostro bottone inizia a prendere vita, ma per renderlo più moderno e funzionale dobbiamo applicargli degli elementi che invitano l’utente a cliccarlo per portare a termine l’acquisto. Nella tavola 3 ho aggiunto un piccolo triangolo nell’angolo destro anch’esso smussato e di colore arancio.
Tavola 3
Uno degli elementi più usati negli e-commerce è il carrello della spesa. Sul web esistono tantissimi vettoriali già pronti ma in questo caso vediamo come realizzarne a mano libera uno tutto nostro ed inserirlo sullo sfondo creato in precedenza!
Creiamo una nuova tavola su cui lavorare e procediamo con il disegno del carrello. Con l’aiuto delle linee guida realizziamo una griglia e con lo strumento penna andiamo a creare il contenitore del nostro carrellino. Successivamente creiamo le ruote con lo strumento ellisse e per comodità di visuale facciamo tutto con un contorno grigio. Una volta terminato, riempiamo con il colore che abbiamo scelto; in questo caso ho colorato tutto di arancio. (tavola4)
Tavola 4
Come potrete notare, nel carrellino di riferimento esistono dei piccoli rettangoli bianchi che danno la sensazione di fori e di effetto lucido all’elemento. Per realizzarli non serve altro che creare con lo strumento rettangolo una forma, selezionarla e con il tasto destro del mouse andare sulla voce trasforma riflessione (tavola5).
Applicate quindi la riflessione verticale con angolo di 90° e fate copia; già dall’anteprima vi accorgerete l’effetto delle due strisce una volta dato ok basta posizionarla a destra ed il gioco è fatto. Ricordatevi che in questo caso non date a nessun elemento il contorno altrimenti essendo pixel molto piccoli rischiereste di pasticciare la figura.
Tavola 5
Tavola 6
Il nostro elemento è stato realizzato, ma l’aggiunta di un testo che faccia da “Call to Action“, potrebbe migliorare l’efficacia del nostro pulsante. Quindi con lo strumento testo, scegliamo un font bold e bastone e procediamo inserendo la frase. E’ possibile adottare anche un titolo grande ed un sottotitolo con qualche offerta; nel caso specifico ho creato un gioco di font e colori sull’intero bottone.
Tavola 7
Per dare un tocco più moderno al nostro bottone web ho pensato di applicare un’ombra riflessa che darà la sensazione di avere una collocazione nello spazio, sta a voi poi scegliere a seconda delle necessità strutturali. Per realizzarla non fate altro che selezionare la forma senza contorno con lo strumento elisse e riempire con una sfumatura radiale dal grigio al bianco, in questa maniera darete un effetto molto soft a tutta la vostra grafica.
Tavola 8
Il nostro primo bottone è stato realizzato; con lo stesso procedimento possiamo creare altri elementi grafici e creare una serie di pulsanti che si interscambino fra loro e rendere il sito sempre in continuo aggiornamento. Per farli non dovete fare altro che disegnare con lo strumento selezione le figure, ricordatevi che vi conviene tracciare prima le linee principali, e poi utilizzando i punti di ancoraggio, modellare con le curve il tutto a vostro piacimento. Nel mio caso ho realizzato una freccia che avvolge il bottone e una freccia che invece indica dove cliccare; ho disegnato tutti gli elementi separati e poi come nelle figure ho riempito con sfumature e colori sempre in linea con la mia scelta grafica. Successivamente ho applicato al bottone grigio variando di volta in volta non solo i tre elementi ma anche il testo per dare movimento e alternanza al sito nel quale verranno poi utilizzati.
Tavola 9
Tavola 10
Una volta finita la grafica non vi resta che esportare ogni singolo elemento grafico in .png in modo che possa essere con sfondo trasparente e gestibile per il formato web.
L’esperienza e la pratica costante nell’utilizzo del programma, ma anche la ricerca e lo sguardo sempre attento alle nuove mode grafiche sul web vi aiuteranno a capire, oltre alla esigenze del cliente, quali accostamenti cromatici sono i più adatti e quali errori non commettere. Ricordatevi sempre che se un prodotto riesce ad essere venduto on line è anche merito del buon gusto grafico oltre che degli slogan che inducono a vendere. Adesso tocca a voi realizzare qualcosa di nuovo !!!
[viral-lock message=”Condividi il file con le risorse in vettoriale e scaricalo gratuitamente!”]
[/viral-lock]
