Questo sito è il blog personale di Cristian Galletti, co-fondatore di Webgriffe, agenzia specializzata nella realizzazione di progetti multimediali creativi e nello sviluppo di soluzioni software evolute.
// ottobre 6th, 2009 // No Comments » // Accade nel Web, Creatività e Design
Un gruppo di studenti cinesi hanno ideato PhotoSketch, un progetto che partendo da uno schizzo, un disegno, scandaglia il web alla ricerca di immagini che coincidano tra loro e con lo schizzo di partenza e, attraverso un complesso algoritmo di riconoscimento ed elaborazione delle immagini, crea l’immagine finale. Guardate il video che segue per capire meglio.
// luglio 28th, 2009 // No Comments » // Creatività e Design, Per un web migliore, Sviluppo e tips
Per deformazione professionale tendo sempre ad avere un approccio aperto alle cose, cercando di andare oltre l’impatto iniziale e gli schemi precostituiti. Non sono un rivoluzionario, sia chiaro, anche se sono indubbiamente un testardo. Così anche per quel che riguarda il mio profilo su Facebook ho sempre cercato di personalizzarlo con una immagine creativa che potesse sottolineare la mia indole fantasiosa.
Portroppo Facebook ad oggi non supporta l’utilizzo di immagini PNG trasparenti come immagini del profilo quindi se provate a caricare una PNG di questo tipo inevitabilmente viene visualizzato un riquadro bianco attorno al disegno… così l’unico sistema per ovviare a questo “limite” è quello di creare una immagine “ad hoc” che riprenda anche lo sfondo.
Come potete vedere nell’immagine qui a fianco (click per ingrandire) l’area a disposizione per la foto è un rettangolo largo 200 pixel e alto a piacere.
Questo rettangolo è posizionato in modo da iniziare nella parte azzurro chiaro in alto nella pagina e continuare sotto dove la pagina diventa bianca.
Lo stacco da bianco ad azzurro può sembrare un muro bianco oltre quale si intravvede il cielo…
non vi pare?
Ecco perché ho pensato di personalizzare la mia pagina come nell’immagine qui a fianco…
una sorta di tentativo di evadere. :-)
Per iniziare è necessario partire da una base grafica che comprenda il “muro” bianco, il bordino e la zona azzurra in alto: ho creato un template di Photoshop utile per chi ha capacità grafiche ma anche una immagine JPG sulla quale i meno ferrati possono intervenire a piacere.
Scaricatele e iniziate a lavorarci come descritto di seguito.
Partite dal template vuoto e pensate a come poterlo personalizzare: si presta a una miriade di interpretazioni…
io amo il surrealismo e mi piace interpretare l’immagine del profilo in questa chiave.
Supponiamo di utilizzare l’immagina di una rana che si arrampica sul muro (vedi immagine a fianco).
Aprite il template che avete scaricato e inserite l’immagine della rana nella parte bianca dell’immagine.
Se l’immagine ha uno sfondo di altro colore basta intervenire su curve, livelli e correzione colore per adattarla al meglio (saperne un po’ di grafica aiuta).
Per concludere tagliate l’immagine in basso in modo da togliere eventuale spazio bianco in eccesso.
Attenzione: non tagliate mai in alto!
Ed ecco qui a fianco il risultato finale.
Mi sono divertito a creare diverse immagini che abbiamo pensato di condividere nella pagina dedicata alla mia azienda su Facebook.
Visitate la pagina, diventate fan e usate le immagini.
Se le utilizzate abbiate la cura di lasciare un messaggio!
Segnalate le vostre personalizzazioni nei commenti e contribuite alla diffusione di questo nuovo modo creativo di interpretare Facebook.
Buon divertimento!
// febbraio 1st, 2009 // 3 Comments » // Creatività e Design
Sapete cos’è l’Adbusting? Adbusting (o Subvertising) è l’attività di ridicolizzare e prendere in giro con opportuni interventi grafici, immagini pubblicitarie o affisioni di carattere politico allo scopo di sensibilizzare gli spettatori o lanciare nuovi messaggi.
Un esempio è quanto è successo qualche settimana alla stazione della metro “Kaiserdamm” di Berlino. Alcune affissioni pubblicitarie in cui apparivano Britney Spears, Leona Lewis, Christina Aguilera sono state modificate con maestria e arte attaccando sopra di loro immagini di strumenti del software di fotoritocco Adobe Photoshop.
Il messaggio che si è voluto lanciare è ovviamente quello del “fotoritocco estremo” a cui spesso le immagini di questi VIP sono sottoposte… e dalle quali gli stessi VIP traggono parte del loro successo: un modo per dire “non dimenticate” che parte della vostra gloria viene dal nostro lavoro di grafici nell’ombra.
Per approfonfire:
// ottobre 30th, 2007 // 1 Comment » // Creatività e Design
Sono da sempre un grande appassionato di gadget e tecnologia: mi piacciono molto i concept creativi realizzati a scopo commerciale perché hanno sia valenza creativa che artistica secondo me. Molto tempo fa Apple aveva realizzato un concept per il lancio di iPod (eccolo qui sotto)…
Sono anche un appassionato di fotografia e seguo l’evolversi del mondo della fotografia digitale e proprio pochi giorni fa leggevo dell’uscita della compatta Sony Cybershot T2, ma guarda caso per il lancio viene creato un concept che mi ricorda qualcosa (eccolo qui sotto):
Ma Apple da parte sua non è una santa. Un post apparso su Engadget dimostra che anche i creativi di Apple traggono spunto (e non si limitano solo a questo) da altre pubblicità o creazioni più o meno famose.
A voi l’ardua sentenza!
// ottobre 24th, 2007 // 1 Comment » // Sviluppo e tips
I Layer Comps non sono una vera e propria novità in Photoshop: sono stati introdotti a partire dalla versione CS ma personalmente inizio a utilizzarli seriamente solo dalla versione CS3. Secondo me sono utilissimi e permettono un risparmio notevole di tempo nella fase di creazione di layout web complessi in cui è necessario progettare stati/configurazioni diverse dello stesso layout (ad esempio uno per la homepage e uno per ogni altra pagina del sito). Rappresentano un diverso modo di gestire i layer (livelli): il “vecchio metodo” costringeva il designer a utilizzare tantissimi layer o a raggrupparli all’interno di cartelle una per ogni configurazione ed eventualmente a marcare con dei colori i livelli corrispondenti a uno stesso stato… un lavoraccio. Ma ora i layer comps. ci vengono in aiuto e ci fanno risparmiare tantissimo tempo.
Per farvi capire concretamente il loro funzionamento prendo come esempio uno degli ultimi progetti che abbiamo realizzato in Webgriffe: il sito web di JDentalCare Srl.
Abbiamo iniziato (vedi fig.1) progettando la home page e raggruppando i vari livelli in cartelle per una maggiore pulizia del file di progetto. Il cliente voleva avere una idea di come poter in futuro implementare la visualizzazione di prodotti da mettere in evidenza in home page, così la prima cosa che si sarebbe fatta nel vecchio metodo sarebbe stata quella di creare una nuova cartella di livelli duplicando quella della Home e modificarla di conseguenza… ora non più. Basta accedere al tab Layer Comps. (Window > Layer Comps) e con il pulsante in basso “Create New Layer Comp”.
A questo punto una finestra vi pone alcune scelte (vedi fig.2):
Dopo aver cliccato su OK ci viene creato il Layer Comp. HOME che ha “fotografato” lo stato attuale del nostro pannello Layer e di tutti i livelli in esso contenuti, comprese le loro posizioni, visibilità ed eventualmente gli stili associati. A questo punto per fare la nuova versione della home page non dobbiamo far altro che tornare nel pannello livelli e spostare o creare nuovi livelli. Alla fine della modifica torniamo nella finestra Layer Comp. e creiamo la nuova configurazione HOME PRODUCTS. Ora possiamo attivare l’una o l’altra configurazione e di conseguenza vedremo sullo stage i due diversi layout creati. La bellezza di questo metodo sta nel fatto che potete spostare a piacere i livelli e salvarne le posizioni: questo vale anche per gli smart objects ovviamente e non c’è più bisogno di duplicare livelli ma si usano sempre gli stessi spostati e nascosti all’occorrenza.
nel nostro progetto abbiamo poi realizzatola sezione PRODUCTS, PRODUCTS DETAILS e COMPANY (vedi fig.3).
Pensate ad esempio alla comodità di spostare a piacere il footer di una pagina quando il layout è di tipo verticale e si adatta al contenuto: un unico layer in cui è definito il footer potrà essere spostato a piacere e “registrato” nei diversi Layer Comps.
Ma la bellezza dei Layer Comps. non finisce qui.
Pensate a quando, giunti al termine della fase di progettazione, si devono esportare i singoli screenshot per realizzare una presentazione (PDF, HTML ecc.) da mostrare al cliente. Anche in questo caso Photoshop ci viene in aiuto: apriamo il menu File > Scripts e troviamo una serie di automatismi (vedi fig.4).
Le opzioni a disposizione sono le seguenti:
A voi ora provarli e a scrivere cosa ne pensate.
