Da Button Factory è un'applicazione web per la creazione di bottoni simili a quello che vedete raffigurato nello screenshot. Si possono impostare diverse opzioni sia per il testo sia per il pulsante: bordi, sfondi, ombreggiature, etc. Per quanto riguarda l'output si può scegliere tra i più comuni formati di immagine (.JPG, .GIF e .PNG) e il formato CSS (viene creata uno snippet di codice per una classe .button da applicare ai nostri pulsanti). Mancano opzioni per creare facilmente pulsanti rollover o direttamente sprites, ma a detta dell'autore sono funzionalità  previste per la nuova release dell'applicazione.

Continua a leggere La fabbrica dei bottoni

Categoria: Grafica

Tags: ,

Qualche giorno fa, Douglas Bowman (ai più noto come l'autore di StopDesign, ma ora anche impiegato di Google) ha dedicato un bellissimo intervento al processo di creazione con cui hanno preso forma i pulsanti che possiamo vedere in azione, tra l'altro, su GMail. La sfida era quella di passare da una struttura basata su 9 celle di tabella per un singolo bottone ad una soluzione leggera, mantenibile, efficace e basata sui CSS, con una sola immagine, quella usata come sfondo. Il risultato in questa pagina dimostrativa. Studiate il codice e vedrete come con qualche regola CSS sia possibile dare quel particolare aspetto partendo da normali elementi a e button. Ieri ho invece trovato il link alla soluzione per emulare quello stile di pulsanti, basata su un plugin per jQuery, presentata da Swizec Teller. Qui la demo con la scarna documentazione. Certo, ci si potrebbe chiedere se è proprio necessario ricorrere a jQuery/Javascript dopo aver visto il lavoro di Bowman... Ma, come si dice, tutto per amor di completezza :).

Continua a leggere I bottoni stile Google (anche con jQuery)

Categoria: Web Design

Abbiamo parlato a suo tempo dell'uso dell'elemento button come alternativa più flessibile rispetto a input ai fini di una formattazione efficace con i CSS: questo post elenca le risorse più rilevanti sul tema. acrobat x pro macPrendendo spunto dall'articolo di Particletree citato nel nostro intervento, Dave Shea ha messo in opera un interessante esperimento. La sfida era quella, dettata da esigenze pratiche intervenute nello sviluppo di un sito, di creare bottoni graficamente coerenti nello stile e con una buona resa cross-browser ma definiti sia come link (uso di a) sia come pulsanti propriamente detti (attraverso input). Sforzi vani per via delle difficoltà  poste dall'applicazione dei CSS sui pulsanti di tipo input. Passando a button il risultato è stato ottenuto: ecco la pagina degli esempi. Nelle coppie di bottoni, il primo è ottenuto con button, il secondo con a. Unica e comune ad entrambi la regola CSS di base usata. Potete verificarlo scaricando lo zip con il codice e studiando il file default.css incluso.

Continua a leggere Bottoni creativi e CSS

Categoria: CSS

Tags: , ,

Alcune segnalazioni interessanti sui CSS che ho raccolto di recente. Cominciamo con Planning your stylesheet - the definitive guide: il titolo è un po' pretenzioso forse, ma contiene dei suggerimenti preziosi. Un articolo simile è Combating Classitis with Cascades and Sequential Selectors, con alcuni tips per usare le classi con buon senso. Passiamo ai tutorial: decisamente bello il Legend of style revised, un articolo che propone differenti presentazioni dell'elemento legend dei form. Ottenere risultati cross-browser per questo elemento non è semplice, ma mi pare che l'autore del pezzo abbia fatto un ottimo lavoro. Altro tutorial molto specifico: Creating and styling resizable buttons per ottenere bottoni semi-grafici autoadattanti in larghezza. (more...)

Continua a leggere CSS: tips, tutorial e risorse

Categoria: CSS

Appuntamento dedicato ad alcune segnalazioni di risorse e strumenti grafici. Poco tempo fa in aggiunta agli editor di immagini online, ho segnalato quello che viene presentato come il più potente, ovvero Fotoflexer. Si aggiunge al già  ampio ventaglio di scelta anche Splashup, che risulta a parer mio il più vicino ad un programma di editing tradizionale come funzionalità  disponibili e interfaccia. Chiunque abbia usato almeno una volta Gimp o Photoshop lo troverà  davvero familiare. Rimanendo in tema di strumenti online, ecco VectorMagic, un pratico servizio per convertire le immagini in vettoriale. L'interfaccia è molto semplice e consente di esportare il risultato in EPS, PNG o SVG: da evidenziare il comodo wizard attraverso cui è possibile guidare il processo. Notevole il confronto con Illustrator e Corel Draw. La terza segnalazione riguarda Favikon, un comodo strumento per creare le favicon. Basta caricare l'immagine, selezionare la regione ed il gioco è fatto.In chiusura, non poteva mancare una mega-lista: nella ricchissima 99 Resources for Web 2.0 Design vengono presentati generatori e risorse per categoria: dai badges ai menu, passando per brushes, bottoni e molto molto altro.

Continua a leggere Bookmark grafica

Categoria: Grafica

Diverse segnalazioni sparse sul web design, raccolte nella serie bookmark. Cominciamo con tre liste: Forget Photoshop: 15 Online Graphics Generators presenta 15 generatori per bottoni, mini-bottoni, gradienti, logo. Best CSS tools of May è una raccolta di tutorial/risorse CSS: alcune risalgono a ben prima di maggio, ma merita una visita. Una risorsa italiana: Napolux ha raccolto ben 82 segnalazioni per Photoshop in 82 links: Photoshop tutorials, shapes & co.Passiamo a Wordpress con le selezioni di alcuni template: in 100 Favourite Wordpress Themes e 20 Wordpress Themes that don't disappoint vengono presentati 120 template in totale per questa piattaforma di blogging. Se non dovessero bastare e avete spazio, banda (e tempo!) ecco 2400 template Wordpress pronti da scaricare: sono circa 250 mega. (more...)

Continua a leggere Dieci bookmark sul webdesign

Categoria: Web Design

Alcuni articoli interessanti sui CSS. La prima segnalazione è Creating bulletproof graphic link buttons with CSS di Roger Johansson, che presenta un modo per ottenere link-bottoni autoadattanti in larghezza e in altezza. Buoni i risultati, ma devo dire che il markup è decisamente troppo abbondante per fornire i necessari agganci grafici, soprattutto considerando che il più delle volte non c'è necessità  di scalabilità  in altezza per questa tipologia di elementi.Rimanendo sul tema bottoni: in Styling the Button Element with Sliding Doors viene presentato un modo semplice per avere elementi button grafici. Due piccoli appunti: una buona norma è specificare il colore di sfondo in casi simili, dato che a immagini disabilitate risulterebbe testo bianco su sfondo bianco. Penso poi che sia possibile ottenere lo stesso risultato con una sola immagine che combina i due stati, un po' come ho fatto in Bottoni con rollover e nel suo seguito Bottoni con rollover flessibili pubblicato su HTML.it lo scorso martedì.Passiamo a un altro di quegli elementi che sta spopolando in quanto a tutorial presenti in rete, ovvero lo star rater. Credo che il recente CSS The Star Matrix Pre-loaded con il relativo esempio rappresenti quanto di meglio si possa ottenere con i CSS e un'immagine unica, soprattutto per il fatto che viene mostrato anche il valore medio delle votazioni: molto dettagliato il tutorial e notevoli i risultati.

Continua a leggere Bottoni e star-rater

Categoria: CSS

Post con diverse segnalazioni interessanti tra CSS, grafica e web design che riguardano i bottoni. La prima è il recente How to make sexy buttons with CSS, che spiega come ottenere bottoni con un bell'effetto pressione (scusatemi ma ho difficoltà  a trovare un altro termine per descriverli) con una sola immagine e poche semplici regole CSS. Interessante l'uso della pseudo-classe :active. (more...)

Continua a leggere Il tempo dei bottoni

Categoria: CSS

Segnalazione veloce con due risorse su Illustrator e la grafica vettoriale. Smashing Magazine presenta in Adobe Illustrator Tutorials una raccolta di moltissimi tutorial per il programma di disegno vettoriale di Adobe.Un recentissimo sito con tutorial e risorse vettoriali per il webdesign è BittBox. Da non perdere sopratutto 72 Free Vector Glass Buttons and Bars: i bottoni, liberamente scaricabili, sono compatibili con i principali programmi vettoriali, compreso InkScape di cui abbiamo parlato da poco.

Continua a leggere Tutorial per Illustrator e grafica vettoriale

Categoria: Grafica

Gli effetti aqua e gloss sono tra i più usati per bottoni, navigazione e widget in applicazioni software e siti web. Cosa li differenzia? Sostanzialmente l'effetto aqua (manca la "c" non per un errore di grammatica o di battitura, ma perchè il termine si scrive così in inglese) rende un elemento trasparente, mentre l'effetto gloss lo rende lucido. L'effetto aqua poi è noto e usato da tempo, mentre l'effetto gloss è un po' più moderno ed è entrato alla ribalta in siti tipicamente Web 2.0. Distinguere un bottone con effetto aqua da uno con effetto gloss (a volte detto anche glossy) non è semplice, ma ci sono alcune caratteristiche che li contraddistinguono. Tipicamente l'effetto aqua dà  riflessi, gradienti e ombre più morbidi, mentre l'effetto gloss ha gradienti sottili, zone di luce più estese, magari non orizzontali o dritte, e sfumature quasi nette. (more...)

Continua a leggere Photoshop: Aqua vs Gloss

Categoria: Web Design