Creazione di bottoni in stile web 2.0 in modo rapido e semplice



Ecco una mini guida che si interessa di creare bottoni per siti web in stile “web 2.0” per seguire la tendenza del momento in modo semplice e soprattutto senza avere conoscenze specifiche di programmi di imaging quali photoshop e famiglia.

Bene, per creare i nostri bottoni andremo ad utilizzare un tool online gratuito, As Button Generator.

Il sito purtroppo è in lingua inglese, o per chi vuole in cinese.

Questa è la schermata che ci troveremo di fronte una volta aperto il sito web.

as.jpg

Al centro dello schermo abbiamo l’anteprima del nostro bottone, mentre nella parte inferiore abbiamo i comandi per poter creare il nostro bottone diviso in 6 categorie.

Partiamo a creare il nostro bottone, che avrà una scritta mondoinformatico o sia largo 400 px e alto 60 px.

Cominciamo seguendo l’ordine dei pannelli, il primo si chiama Color / form in cui possiamo scegliere il colore e le dimensioni del bottone. Ecco le mie impostazioni:

as-1.jpg

Nel secondo pannello, Gradiation Type possiamo scegliere il tipo dell’effetto “riflesso” che caratterizza questi bottoni, abbiamo 5 tipi differenti a nostra disposizione.

Il terzo pannello, Stripe, ci permette di impostare variando i valori in pixel con i cursori oppure inserendo manualmente la la larghezza e la distanza delle righe diagonali. Se non desideriamo questo effetto le possiamo disabilitare  scegliendo dont’ use

Il pannello Filter invece ci permette di aggiungere l’ombra e l’effetto rilievo, molto simile al pannello “Opzioni di fusione di photoshop, anche quì possiamo poi personalizzare l’effetto sempre agendo con i cursori per la modifica dei valori.

In Image invece possiamo inserire un immagine e poi spostarla all’interno del nostro bottone spostandola con il mouse nell’anteprima grazie ad un anteprima interattiva. Per esempio possiamo inserire un logo oppure una gif di una scritta se non vogliamo inserire un semplice testo monocolore.

E infine in Text possiamo andare ad inserire il nostro testo, anche quì sono disponibili i filtri ombra e rilievo. Il testo è personalizzabile nel colore, nel carattere, nella dimensione e nella centratura.

as-2.jpg

Lo sfondo del bottone di default è impostato in bianco, ma cliccando sul riquadro bianco di fianco alla scritta Panel’s background color lo possiamo cambiare.

Con un click su save si avvia il download del bottone. L’immagine è in formato png.

Eccolo quì nelle dimensioni reali di 400 x 60 px:

icon-87508.png

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest