Grazie alla segnalazione dell’amico Andrea Rastelli, veniamo a conoscenza della nuova incredibile funzione che vedete nel video qui sopra e che sarà presente nella prossima versione di Photoshop . Fin’ora non vi era nessun modo molto pratico per poter correggere foto mosse o sfocate, ma adesso tramite un algoritmo sviluppato in casa Adobe e grazie all’applicazione di un semplice filtro sarà possibile in pochi click!

Non è ancora certo se questa nuova feature di image deblurring sarà inserita in un possibile aggiornamento di inizio 2012 con la CS5.5 o bisognerà aspettare settembre/ottobre 2012 per la CS6, fatto sta che rappresenta davvero una marcia in più per Adobe che porterebbe ancora una volta Photoshop un passo sopra i suoi concorrenti di mercato (come è già stato con l’algoritmo Content-Aware per la CS5).

Vi segnalo un progetto davvero interessante del designer Dan Eden che ho appena scovato sul web: Animate.css. Si tratta di un file CSS che presenta una serie di animazioni (CSS3 naturalmente) precreate dall’autore che potete utilizzare nei vostri progetti senza perdere tempo nello scriverle. Davvero un must-have per ogni webdesigner!

Era da fin troppo tempo che non davamo una smossa a questo blog

WordPress blank theme

I black themes, o anche naked themes, sono temi ridotti all’osso: contengono solo il minimo indispensabile per far si che il tema funzioni. Quindi possiamo ben districarci nel codice per poterlo personalizzare come meglio vogliamo e per poterci scrivere su il codice del nostro blog.

Personalmente sto provando WordPress Naked e mi sto trovando piuttosto bene. Ve ne segnalo anche una versione ottimizzata con codice HTML5.

WordPress codex

Forse è fin troppo scontato: ogni sviluppatore che si rispetti deve tenere sempre in massima considerazione la documentazione ufficiale riguardante ciò che sta sviluppando. WordPress codex descrive meticolosamente tutte le funzioni e le possibilità che WordPress offre in modo chiaro e ricco di esempi.

WordPress hack

Siamo giunti al punto in cui il nostro tema WordPress è quasi completo, ma vogliamo realizzare una o due cose che non troviamo in alcun modo nella documentazione ufficiale. Probabilmente dobbiamo ricorrere a qualche espediente che solitamente viene definito come “hack”. Vi segnaliamo in merito un articolo di Smashing Magazine ed uno nostro riguardante gli hack più cercati sui commenti.

WordPress cheat sheet

Si tratta di veri e propri “formulari” salva-tempo per WordPress: immagini o file pdf dove vengono incluse e catalogate tutte le più ricorrenti funzioni di WordPress. Io vi consiglio quello di Ekin Ertaç: esaustivo e poco dispersivo.

Google

Ultimo,ma non di certo per merito, Google: di sicuro la risorsa che vi permetterà di trovare ed esaudire qualsiasi vostra necessità!

In alcuni miei videotutorial dedicati al 3D, in molti mi hanno chiesto come si facesse ad importare un testo 3D creato in Photoshop CS5 all’interno di After Effects. A causa della mia scarsa conoscenza del software di video-editing di casa Adobe, solo alcuni giorni fa ho scoperto il procedimento che spiego in questo mini-video.

Nella realizzazione di un sito web, i webdesigners si trovano spesso a dover verificare che il proprio lavoro si veda bene nella maggior parte dei browser e non solo in quello in uso. Tra i più richiesti troviamo le vecchie versioni di Safari e Firefox e, soprattutto, di Internet Explorer, che può essere considerato il vero grande nemico di un designer. La sua versione 6 ancora mi fa venire i brividi al solo pensiero. Personalmente, non offro più la compatibilità con IE6, ma è comunque importante assicurarsi che il proprio sito offra un buon risultato cross-browser. Per questo motivo, oggi voglio segnalarvi una risorsa che non conoscevo e che mi è tornata utilissima negl’ultimi tempi! Sto parlando di Adobe BrowserLab.

Senza troppi giri di parole, BrowserLab è uno strumento realizzato dall’Adobe che ci permette di testare il nostro sito con un gran numero di browser in poco tempo! L’applicazione sfrutta la tecnologia Adobe Flex, è utilizzabile direttamente online, ma necessita del possesso di un Adobe ID (registrabile gratuitamente). Tra i browsers a  disposizione troviamo le versioni IE6-9, Safari 3-5, Firefox 2-4 e Chrome 8-10.

Unica pecca, se così possiamo definirla, è che, come anche altri servizi online di questo genere, BrowserLab generi un’immagine del risultato finale, quindi non è possibile verificare, ad esempio, il funzionamento di determinati script!

Nelle settimane scorse, sono stato impegnato nella creazione del sito BattistiNews.it, un nuovo ed importante punto di riferimento italiano per il mondo battistiano. Durante la fase di realizzazione, ho pensato che sarebbe stato davvero molto simpatico poter rendere una sorta di vibrazione al passaggio sulla figura del grande Lucio. Quindi ho iniziato a provare varie soluzioni e sono infine giunto a quella che sto per proporvi, utilizzando jQuery.

Ci serviremo del plugin creato da Andreas Lagerkvist che potete scaricare cliccando qui. All’interno del codice, andando alla riga 42, possiamo personalizzare i parametri di durata, frequenza, velocità ed espansione come meglio crediamo.

Infine ci basterà inserire questo piccolo script che richiama il plugin, ed il gioco è fatto!

jQuery("#il_tuo_div").mouseenter(function(){jQuery(this).vibrate();});

In questo tutorial vedremo come creare un’interessante poster partendo da una birra Dreher in Photoshop. In particolare, voglio mostrarvi come possiamo facilmente utilizzare degli effetti di luce messi a disposizione da ArtBees per rendere più accattivanti le nostre composizioni senza perderci molto tempo!

Materiale utilizzato:

• bottiglia di Dreher
• paper texture
• immagine di un’onda
• effetti di luce

Lo sfondo

Partiamo creando un nuovo documento (700×1000 px) ed applicandovi un gradiente radiale (#8d4000 – #ffff00). Successivamente, apriamo lo stile livello dello sfondo, e vi applichiamo questa sovrapposizione gradiente, in modo tale da dare subito un effetto più eterogeneo al livello.

Infine, importiamo e ridimensioniamo la paper texture e la impostiamo su Moltiplica. Dovreste avere qualcosa del genere:

Piano d’appoggio

Adesso cerchiamo di realizzare una sbrigativa e rudimentale base d’appoggio per la nostra bottiglia di Dreher. Per farlo creiamo una selezione rettangolare e con un gradiente dal nero al trasparente, ricreiamo una sfumatura come quella in figura:

La duplichiamo per aumentarne l’intensità; duplichiamo anche la texture applicata precedentemente, la desaturiamo e la ridimensioniamo in modo da adattarla al piano d’appoggio. Dovremmo ottenere qualcosa di simile:

La composizione

Le onde

Importiamo all’interno del nostro documento l’immagine della nostra onda, la ridimensioniamo adeguatamente e desaturiamo.

Successivamente apriamo la finestra di regolazione livelli (Ctrl/Cmd + L) e aumentiamo fortemente il contrasto dell’immagine:

Infine impostiamo il livello su Colore Scherma e, attraverso una gomma morbida o una maschera di livello, eliminiamo alcune zone dell’immagine. Cerchiamo anche di ruotarla o spostarla in modo tale da ottenere un buon risultato finale.

Duplichiamo il livello, lo riflettiamo orizzontalmente e verticalmente, e lo posizioniamo in basso.

La birra

Importiamo nel documento l’immagine della birra. La posizioniamo al centro e applichiamo il filtro Contrasta -> Maschera di contrasto con intensità 100% e raggio 6px.

Successivamente, realizziamo un’ombra ed un riflesso alla birra con il metodo che preferiamo.

Gli effetti di luce

Adesso importiamo nel documento il .psd degli effetti di luce creati da Artbees. In realtà, quello che ho indicato precedentemente è solo un file di esempio. Il progetto completo è disponibile su GraphicRiver al prezzo di $8.. vi consiglio davvero di acquistarlo se potreste esserne interessati perchè è davvero completissimo e si dimostra spesso utile per accorciare operazioni che, altrimenti, impiegherebbero molto tempo!

Iniziamo quindi a utilizzare gli elementi del file, importandoli nel documento e gestendoli come meglio crediamo. Possiamo anche disattivare determinati elementi che non ci sono utili o aggiungerne di altri per migliorare la composizione.

Nel nostro caso, ad esempio, abbiamo realizzato qualcosa di simile:

Gli ultimi tocchi finali

Vignettatura

Creiamo un nuovo livello di colore bianco ed andiamo su Filtro -> Correzione Lente. Inseriamo i parametri come in figura ed impostiamo il livello su Moltiplica. Un veloce modo per creare una vignettatura ad un’immagine!

Contrasto e mappa

Creiamo un nuovo livello ed andiamo su Immagine -> Applica immagine. Successivamente applichiamo il filtro Contrasta -> Contrasta. Infine creiamo un nuovo livello di regolazione Mappa Gradiente. Scegliamo come impostazioni dal bianco al nero ed impostiamo il livello su Luminosità. Tramite questi due semplici passaggi, abbiamo dato maggiore contrasto all’immagine rendendola molto più accattivante!
Aggiungiamo, se vogliamo, anche un testo: noi abbiamo scelto il famoso slogan “Amici per la Dreher”.

HoverAttribute permette al passaggio su un link che questo cambi il suo contenuto, per mezzo di un’animazione molto carina e gradevole, con quello di uno dei suoi attributi (href, title, alt, ecc).

Ritengo che il suo utilizzo, però, debba essere limitato per non influire sulla leggibilità dei contenuti; un efficace utilizzo potrebbe essere, ad esempio, quello sui link di download per un tutorial.

Per vedere il reale funzionamento di HoverAttribute e per scaricarne tutti i file vi rimando al link originale dell’autore Alexander Wallin.