Grafica istituzionale: le 20 regioni italiane 30/12/08

Ispirato da questo post ho raccolto la grafica istituzionale (logo/stemma) delle 20 regioni italiane; un piccolo esperimento per mettere a confronto le differenze, le particolarità e la "creatività" che a livello pubblico (nel bene e, spesso, nel male) ci rappresenta.

» continua

Questa sotto è l'immagine ridimensionata, scaricatela e fatene buon uso (e segnalatemi eventuali errori o imprecisioni).

Layer Tennis: una sfida in tempo reale a colpi di Photoshop raccontata in presa diretta 11/01/08

Grazie a TomStardust scopro che tra pochi minuti ci sarà un incontro di Layer Tennis, in pratica un contest dedicato al design in tempo reale. Potenzialmente una roba tosta. Riporto direttamente le parole di Tom che spiegano bene di cosa si tratta:

I due partecipanti si scambiano un file ripetutamente, ed ognuno ha 15 minuti di tempo per realizzare la sua parte e passarla all’altro, per 10 turni [...]

I software utilizzati sono quelli di casa Adobe, da Photoshop a Flash; la sfida che intendo descrivere "in presa diretta" (quella che è appena iniziata) è tra Veerle Pieters e Cindy Li. Alla fine sarà possibile votare il vincitore sul forum, ma meglio muoversi. E' arrivato il primo screenshot...

» continua

21:00 - Inizia Veerle:

Bella; è il suo stile, niente da dire.
Tecnicamente, ogni passaggio avrà la sua pagina a documentare il processo con tanto di commentatore (un arbitro se vogliamo); questa è la prima pagina.

L' interattività è piuttosto scarsa ma i contenuti sono di prima categoria. Devo prendere le misure perchè rischio di andare lungo.

21:15 - Cindy:

Punto a Veerle anche se i coniglietti sono niente male (pagina 2).

Il commentatore latita e il mesaggio è lo stesso del primo 15. Update - ora c' è il commento (beh, del resto anche lui ha bisogno di valutare prima di commentare).

Confesso che salvare le foto, caricarle e inserire i link mi porta via quasi tutti i 15 minuti che passano tra un dritto e un rovescio, considerando che per seguire il forum è necessario un refresh costante (ma trovare un metodo migliore tipo una chat no?) credo che mi limiterò a leggere.

21:30 - Veerle:

Le battaglia è tosta e non manca l' ironia. Un talento, niente da dire (pagina 3); anche se, come fanno notare sul forum quel rabit manca di qualcosa.

Seguire il commento ha una sua logica se si procede a ritroso, pubblicata la nuova immagine conviene leggere il commento della precedente (visto che il testo cambia poco prima di un nuovo "servizio"); niente di particolarmente interessante anche perchè inizia il quarto set...

21:45 - Cindy:

Il canarino sostituisce il coniglio, mi piace. stavolta voto Cindy (pagina 4).

Posso dire che la "giocabilità" è piuttosto scarsa (intendo cioè il divertimento per gli utenti); i contenuti sono di alta classe ma l' esperienza si limita ad aspettare un quarto d' ora prima di vedere una nuova immagine. Con l' aggravante di procedere a colpi di refresh; una chat e magari alcuni contenuti video renderebbero l' esperienza meno noiosa. Magari sarebbe carino vedere gli artisti all' opera..?

Insomma, si tratta pur sempre di 2 ore e mezza...

22:00 - Veerle:

Classe, il livello si alza (pagina 5) e io adoro sempre di più questa donna.

Nel frattempo il forum ospita le segnalazioni più svariate, alcune carine, altre meno; qui trovate un campionario. C' è anche Twitter ma si limita a segnalare le nuove pagine.

22:20 - Cindy (in ritardo di 5 minuti):

Il duello si fa interessante. Cindy avrà l' ultimo quarto d' ora ma in una logica botta-risposta il mio voto va a Veerle (questo appare un colpo difensivo); 2 a 1 (pagina 6).

Pausa caffè...

22:35 - Veerle

Fosse per me darei la vittoria adesso; magari Cindy ha un tocco più intimo, ma Veerle è veramente fantastica. E questi sono tutti elementi di base (molti dei quali disponibili di default). E pure puntualissima (pagina 7).

A questo punto il forum è un mix tra autopromozione e cazzeggio totale... divertente considerando le premesse.

22:50 - Cindy:

E invece mi ricredo, o meglio, continuo a preferire la disegnatrice belga ma voto volentieri Cindy. Due pari (pagina 8).

Mollo un attimo, ho alcune mail da leggere (leggermente annoiato).

23:05 - Veerle:

Si conclude con ironia tipicamente geek la sfida di Veerle Pieters, talentuosa disegnatrice belga (pagina 9); credo sarà lei a vincere questo (mio) primo incontro di Layer Tennis.

Sono curioso di capire come procederà il voto; sinceramente non mi sono molto documentato (confesso che mi sono dato anche al multitasking nel frattempo) ma ormai si tratta di pochi minuti.

Leggo un pò di commenti dalle singole pagine (dimenticavo, il commentatore è Kevin Guilfoile), il tono è ironico e i protagonisti sono gli elementi che di volta in volta le due disegnatrici hanno introdotto; i coniglietti, il cane geek e così via...

23:20 - Cindy

Anche Cindy Li ha una gran classe; continuo a preferire Veerle ed è lei che vince la sfida secondo me, nonostante questa bellissima tavola finale (pagina 10).

Ora sono curioso di vedere come finirà "ufficialmente", nel frattempo vi dico che l' idea è molto carina ma manca di dinamismo. Una chat e due web cam avrebbero arricchito l' esperienza e soprattutto riempito i vuoti da tavola a tavola.

23:30 - Le sfidanti sono ora sul forum e scherzano con i partecipanti, Cindy dice che è stato stressante mentre Veerle si difende sostenendo che in Belgio i conigli sono più piccoli e con una sola B. Adesso mi iscrivo per dare il mio voto.

23:40 - Ho votato Veerle preceduto da un volto conosciuto (cioè, blog che leggo) che ha partecipato anche al contest interno; è piccolo il mondo :).

Ancora non c' è un vincitore ed io aspetto...

23:58 - ancora non si muove niente e mi documento sul contest interno al forum, anzi, mi scarico tutti gli elementi del contest (10 MB) e magari anche gli arretrati...

00:06 - credo che rinuncierò, del resto stabilire la vincitrice della sfida non è così importante e senza scomodare de Coubertin e lo spirito olimpico, è giusto così.

Londra 2012 come italia.it 07/12/07

Che il logo dei giochi olimpici di Londra 2012 fosse "bruttino" lo avevo segnalato; adesso però le analogie con il nostro bel cetriolo nazionale sono evidenti. Il Daily Mail ha aperto una sottoscrizione tra i lettori (come in Italia, anzi no; che i giornali da noi mica si possono occupare di certe piccolezze) dove chiunque può inviare il suo logo alternativo...

Ad essere sinceri, se possibile, questo è ancora più assurdo; ditemi che c' è scritto 2012 se ci riuscite...

Design paralleli: il coraggio e la pazzia 22/11/07

Due esempi da antologia, sintomatici degli strani giorni che stiamo vivendo e significativi dal punto di vista della pratica/lavoro del designer; il primo caso è quello del simbolo del nuovo Partito Democratico.

Di fianco trovate una delle alternative all' originale (in stile del.icio.us); ce ne sono parecchie in questa galleria di SocialDesignZine. Personalmente non ho molto da obiettare al nuovo simbolo (tantomeno al suo creatore, anzi, sarei proprio curioso di leggere un suo parere da qualche parte)...

» continua

Certo la cosa piuttosto evidente è che manca qualcosa, chiamatelo idea(le), messaggio o più semplicemente il simbolo... ecco cosa manca, il simbolo ma questa è una colpa che non può essere attribuita ad un grafico. Del resto è piuttosto evidente dalla stessa galleria di SDZ che "trattare" la politica è difficile (non mi pare ci siano idee migliori, imho) e soprattutto richiede coraggio.

UPDATE: mentre scrivo trovo questo post che parla di doppioni; in effetti si nota una certa somiglianza... mah

Il secondo caso è talmente ridicolo che meriterebbe una pernacchia; la T-Mobile ha fatto causa ad una serie di aziende colpevoli di uso illecito di magenta.

Lascio a voi tutte le riflessioni del caso (sono parecchie e piuttosto deprimenti) e segnalo la risposta creativa della comunità dei designer olandesi: freemagenta.nl è un blog che contiene una serie di interpretazioni ironiche della vicenda ed al quale è possibile partecipare inviando la propria idea (in pratica un' immagine).

La (micro) massima è che ci vuole più coraggio da una parte e meno pazzia dall' altra.

Delicious Preview: screenshot e prime impressioni 27/09/07

Finalmente sono riuscito ad entrare nella nuova versione di del.icio.us denominata Preview; del resto è stato piuttosto semplice, mi sono segnalato in questa pagina e ho ricevuto l' invito nei miei Links for you. Le novità introdotte sono moltissime, soprattutto dal punto di vista grafico e della user experience...

» continua

Riservandomi di entrare nei dettagli nei prossimi giorni vi riporto alcuni screenshot (ingrandite pure), giusto per avere un idea; iniziamo con la nuova home page:

Scusate l' effimera segnalazione ma la prima cosa che balza agli occhi è la differenza nei colori; hanno cambiato il tono di blue... non voglio apparire troppo sofisticato ma per seguire una linearità/semplicità di base hanno trasformato il loro blue classico e vivace in un sofisticato e freddo "effetto facebook" (grazie a colorzilla da #0000FF a #3274D1)...

Chiudiamo la parentesi e passiamo ad una discreta novità, la pagina delle tag più popolari. A differenza della versione classica (dove le tag apparivano direttamente nella sidebar) qui hanno una pagina dedicata denominata Explore Tags; non ne sono certo ma a prima vista la cosa mi piace:

Passiamo ora alle pagine interne, o meglio, alle pagine relative ai singoli account (il mio in questo caso). La pagina dei bookmarks segue la filosofia della home page mantenendo una discreta similitudine con la versione classica; la differenza sostanziale è nella sidebar e nella più generale "aria di pulizia" che trasmette tutta l' operazione:

La cosa che possiamo notare bene in questa pagina è lo stile flickr della navigazione (in particolare la parte inferiore); del resto anche del.icio.us è di proprietà di Yahoo e tutto torna. Ecco la pagina delle tag :

Per chiudere la serie di screenshot riporto anche la pagina del Network che mi permette di ricordare che il servizio non pregiudica il normale flusso di lavoro del nostro account del.icio.us; in poche parole potremmo eseguire qualsiasi operazione dal nuovo Preview senza incidere nell' account "vero". Notate infatti che nella pagina non sono presenti gli utenti appartenenti al mio network, questo perchè il servizio è ancora una beta di test quindi (una volta che ci siamo segnalati e abbiamo ricevuto l' invito) possiamo smanettare quanto ci pare e piace senza far danni...

Questa è la pagina del Network:

Bene, credo che non manchi moltissimo alla fine del periodo di testing e spero di aver fatto cosa gradita con questi 5 screenshot, anche se potrebbe cambiare tutto da un momento all' altro; il mio giudizio è ancora troppo poco motivato e mi limito ad alcune sensazioni: mi piace la pulizia ma il risultato appare troppo, come dire, ingessato...

TechCrunch40: vince Mint 20/09/07

TechCrunch40 è una conferenza organizzata da TechCrunch e il formato è semplicissimo: 40 nuove startup (praticamente nuove aziende che operano sul web) hanno due giorni di tempo per presentare il loro prodotto/applicazione ed alla fine una di queste si aggiudica 50.000 dollari... semplice e lineare.

Quest' anno il premio se lo porta a casa Mint, applicazione dedicata alla finanza personale (questa la scheda sulla pagina di TechCrunch40); date un occhio alla lista dei partecipanti, ci sono le ultime applicazioni presenti online e anche solo dal punto di vista grafico meritano una visita... giusto una nota curiosa, anche Mint è caduta nelle braccia rassicuranti della foglia.

Un tutorial quando mancano le parole: creare un' illusione ottica 19/09/07

Vi capita mai di avere una cosa importante da dire ma non trovare le parole? Bene, oggi è uno di quei momenti e francamente non voglio rinunciare per il fatto di non trovare il modo giusto; non avendo però le parole ho solo una possibilità, concedermi una gigantesca "licenza poetica" e piazzarci nel mezzo un bel tutorial dedicato al disegno, meglio, una guida alla realizzazione di un' illusione ottica...

» continua

Prima cosa da fare descrivere gli "ingredienti":

1. Un software per la grafica vettoriale; i vettori hanno la caratteristica di mantenere le loro proprietà, puoi trasformarli a tuo piacimento senza perderne le caratteristiche originali.
2. Gli oggetti; in questo caso abbiamo bisogno di due oggetti, un quadrato nero e una linea grigia di 2px di spessore.
3. Uno sfondo; in questo caso uno sfondo bianco.

Spero sia tutto chiaro, entriamo nella parte tecnica del tutorial; aprite un nuovo documento e disegnate un quadrato nero di 30px di lato ed una linea grigia larga 420px e con lo spessore di 2px:

Ricordate di usare, per la linea, un tono di grigio che contrasti sia con lo sfondo che con il quadrato:

Adesso dobbiamo semplicemente copiare e incollare la linea, tracciare cioè quello che sarà il percorso, in questo modo:

Quindi disporre i quadrati allo stesso modo ma in orizzontale:

Fin qui ci siamo, potremmo copiare i quadrati e incollarli nella linea successiva, magari sovrapponendoli; avremmo disegnato una scacchiera, un elemento chiaro e costante che non avrebbe bisogno della linea per manifestarsi...

Ma la linea è fondamentale perchè traccia i binari, senza la linea non c' è illusione. Disponiamo quindi i quadrati in questo modo:

Notate come le linee perdano il loro parallelismo:

Fino a diventare un movimento continuo, verosimile e indecifrabile nel risultato finale, le linee non sono più parallele:

Ecco, l' illusione ottica ha preso forma, ed è stato facile; probabilmente quello che volevo dire non si è capito ma giuro, ce l' ho messa tutta...

ps. l' illusione ottica citata è stata descritta per la prima volta dal dottor Richard Gregory che la notò in un bar di Bristol, di qui il nome Cafè Wall Illusion.

Photoshop tutorial: creare un pennello da zero 15/09/07

In questo secondo tutorial voglio descrivere come creare un pennello in Photoshop, componente importante del precedente effetto testo stampato; anche qui non mancano le alternative e gli approfondimenti (in inglese) che troverete a fine post...

» continua

La prima cosa da fare e scegliere un' immagine, meglio se propria; in questo esempio ho utilizzato una delle tante foto che ho scattato (e scartato) al WaveCamp:

La foto non è granchè (anche se i personaggi che la compongono sono di tutto rispetto), questo per evidenziare che la qualità della foto conta pochissimo nell' operazione che andremo a fare (o meglio, in realtà non è così e gran parte del successo di un pennello dipende proprio dalla scelta iniziale dell' immagine, diciamo che esula dal tema del post); consiglio solo di utilizzare una dimensione accettabile per l' immagine (non troppo grande ne troppo piccola, anche se non ci sono particolari controindicazioni direi tra i 500 e i 1200 px). Ma andiamo per gradi e vediamo di cosa si tratta (dimenticavo, per questo tutorial ho utilizzato Photoshop 7, con le dovute e minime differenze potete utilizzarlo su quasi tutte le versioni).

Creare un pennello in Photoshop

1. Definiamo il nuovo pennello: apriamo la foto in Photoshop e andiamo su modifica>definisci pennello:

2. Inseriamo un nuovo nome (possiamo lasciare il nome dell' immagine ma è preferibile rinominare il pennello per una futura localizzazione, le icone infatti sono piccole e difficili da "decifrare" e leggere 00123 non aiuterà una eventuale ricerca) e clicchiamo ok:

Adesso abbiamo il nuovo pennello nel menù relativo (l' ultimo tra quelli caricati):

3. Dobbiamo salvarlo per poterlo usare in futuro (resterà disponibile infatti solo per la sessione in corso, quindi, una volta chiuso il programma lo avrete perso). Sempre nello stesso pannello andiamo sulla freccina in alto a destra e quindi su salva pennelli:

4. Salviamo il nostro pennello in un set esistente oppure creiamo un nuovo set inserendo un nuovo nome:

5. Bene, abbiamo salvato il nostro pennello in un set (nuovo o gia presente); a questo proposito se volete procedere con metodo vi consiglio di salvare i nuovi pennelli in nuovi set e di nominarli a seconda dei casi. Vi segnalo, nel caso abbiate necessità di "pulire" (togliere i pennelli gia presenti per creare un set nuovo da zero, ad esempio) alcuni set che basterà selezionare un pennello e cliccare su elimina pennello:

Ora possiamo approfondire un pò il discorso; nel pennello creato ho trascurato alcuni passaggi perchè l' argomento era ed è il metodo, e cioè come creare un pennello da zero. Il risultato del test sarà quello riportato di seguito, le prime due immagini sono realizzate con il pennello applicato ad un nuovo documento (sfondo nero pennello bianco e sfondo bianco pennello nero), la terza il pennello applicato alla gomma (in pratica l' effetto del tutorial precedente):

Come potete ben vedere dalle immagini il pennello rappresenta solo una variazione della foto originale (bianco e nero); se volete qualcosa di più nitido e preciso (un tipo di pennello più classico) dovrete svolgere un ulteriore passaggio.

Ora che abbiamo visto come creare e salvare un pennello torniamo un attimo indietro, esattamente al punto 1; abbiamo la foto aperta in Photoshop e vediamo come procedere (prima di creare il pennello).

1a. Togliamo la saturazione: selezioniamo immagine>togli saturazione:

1b. Sempre dallo stesso menù selezioniamo soglia e quindi inseriamo un valore (molto dipenderà dal tipo di immagine scelta):

Otterrete il seguente risultato:

Non spaventatevi, avete bisogno di un pennello non di una immagine dettagliata; ora tornate al punto di partenza e salvate questa nuova immagine come pennello (ripetete i passaggi da 1 a 5). Ora avrete un pennello più semplice da gestire (niente trasparenza ad esempio) e i risultati saranno più incisivi; ecco il risultato:

Segnalo questo tutorial in inglese, molto utile per approfondire il tema...

#1 Photoshop tutorial: testo effetto stampato

Webdesign trend: la foglia nel logo 05/09/07

Notavo che la segnalazione precedente conteneva un elemento importante nella comunicazione visiva, la foglia. Interessante l' articolo di SmashingMagazine, una semplice analisi dei logo che contengono l' elemento; rassicurante, naturale e testimone di freschezza, la foglia rappresenta una nuova idea e per molti dei siti segnalati la scelta pare molto azzeccata, 9rules su tutti, ma anche Tumblr o il sito di Coda...

Date un occhiata ai due elenchi di PC magazine dei migliori 100 siti del 2007, i 100 classic oppure i 100 undiscovered e ditemi quante foglie trovate (magari controllate anche nell' elenco dei migliori 100 del web2.0)...

Photoshop tutorial: effetto testo stampato 03/09/07

Ingredienti: Photoshop e dieci minuti di tempo, come realizzare una semplice scritta in stile "stampato"...

» continua

E' la prima volta che pubblico su questo blog un tutorial per Photoshop (a proposito, io continuo a trovarmi benone con la versione 7 del software); lo avrei voluto fare parecchie volte ma mi è sempre mancato il tempo (che i tutorial sono roba seria). Questa volta mi sono deciso e quello che segue spero sia il primo di una lunga serie. Altra piccola premessa: nel campo dei tutorial dedicati a Photoshop trovate molto materiale online e spesso si tratta dello stesso esempio rivisto e (poco) corretto, anche per questo ho sempre ritenuto complicato realizzare un tutorial (vedi il riferimento al tempo di cui sopra). Bene, il mio intento è quello di pubblicare materiale originale (per quanto possibile) e comunque riferire sempre le fonti di spunto o approfondimento... ma ora basta teoria, ecco il tutorial e relativi screenshoot.

Realizzare un effetto testo stampato

Per cominciare dovete avere Photoshop (ovvio no), dovete aprirlo (ehm, scusate) e creare un nuovo documento.

1. Create un nuovo documento di 500x100 px; inserite il vostro testo con lo strumento testo orizzontale in modo da ottenere una semplice scritta (nello specifico ho usato il font bauhaus 93, 48px di dimensione e #4FBB44 come valore esadecimale per il colore):

2. Disegnate ora un rettangolo intorno al testo utilizzando lo strumento rettangolo arrotondato in modo da ottenere questo risultato:

3. Andate nel pannello livelli e aprite le opzioni di fusione per il rettangolo appena disegnato (doppio click sull' icona del livello o tasto destro>opzioni di fusione). Applicate un bordo di 3px spuntando la voce Traccia ed assegnate lo stesso colore della scritta:

4. Premete ok e tornate al pannello livelli; portate a zero il valore di riempimento del livello (in questo modo resterà solo il bordo appena creato):

Ora abbiamo la nostra scritta con il bordo del "timbro":

5. Passiamo adesso alla realizzazione vera e propria dell' effetto non senza terminare alcuni passaggi importanti; dobbiamo unire i due livelli (testo e bordo) e per farlo bastera selezionarne uno e bloccare l' altro:

Clicchiamo sulla freccia in alto a destra del pannello livelli e selezioniamo unisci collegati:

Ora abbiamo un unico livello e possiamo cominciare il lavoro vero e proprio:

6. In pratica andremo a cancellare alcune parti di questo nuovo livello: selezioniamo lo strumento gomma e quindi il pennello setole rozze arrotondate (o qualsiasi altro tipo di pennello, dipende da che tipo di effetto ricercherete):

E' arrivato il momento di usare la vostra fantasia; cancellate con calma cercando di essere il più naturali possibile... nel mio caso ho usato la gomma con dei brevi click del mouse e senza trascinare mai il cursore, il risultato è questo:

7. Per rinforzare l' effetto dell' inchiostro stampato potete rasterizzare il testo e quindi duplicarlo, infine applicate al livello superiore l' effetto moltiplica dal pannello livelli:

8. Siamo alla fine, unite nuovamente i due livelli come avete fatto al punto 5:

9. Fine, anzi, ruotate leggermente il nuovo livello per ottenere maggiore naturalezza... ecco il risultato:

Segnalo questo tutorial (in inglese) che descrive in maniera differente come arrivare allo stesso risultato, qui invece trovate alcuni pennelli disponibili per il download...