Undolog.com

Da Apple al Web 2.0 le immagini "riflesse" hanno inondato Intrenet. Spesso abusate sono tuttavia sempre di grande effetto. Saperle realizzare bene non è impresa complicata e, con un pizzoco di fantasia, si possono rendere meno "ovvie" e "scontate"... se proprio non ne potete fare a meno.

Le basi del Reflex

Prima di tutto vediamo come impostare una riflessione base. La tecnica per impostare una riflessione base, almeno quella che preferisco e che uso continuamente, è di semplice e rapida implementazione. Questo metodo permette la massima libertà di modifiche successive e mantiene la trasparenza nel caso vogliate salvare l'immagine in PNG 24 con trasparenza.

1. Come sempre apriamo Phosotoshop e carichiamo l'immagine che vogliamo riflettere su un layer apposito
2. Duplichiamo il nostro layer (trascinate il layer da duplicare sull'icona ) e nominiamolo "shadow" o "reflex"
3. Dal menu "Modifica" selezionate "Trasforma" / "Rifletti verticale"
4. Trascinate il nuovo layer "reflex" sotto al layer originale e spostiamolo alla base del layer originale
5. Selezioniamo il layer "reflex" e, tenendo premuto il tasto ALT, aggiungiamo una maschera cliccando sull'icona "mask" nella tool window dei layer; il layer "reflex" dovrebbe sparire
6. Selezioniamo la maschera nel layer "reflex" e cliccate sull'icona di riempimento
7. Impostiamo una sfumatura da nero o bianco a trasparente:
8. Tracciamo la sfumatura dal centro del layer originale al centro del layer "reflex"

Continua a leggere... »

Post correlati

• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (14)
• Photoshop tutorial: effetto foglio piegato (9)
• jQuery: bordi rotondi sulle immagini per sovrapposizione (0)
• I nuovi strumenti di Adobe Photoshop CS3 Extended (0)

Nel post Flash CS3: creare un effetto Reflex su qualsiasi MovieClip avevamo visto com'è possibile scrivere una classe, che estende un MovieClip, per collegarla a DesignTime ad un qualsiasi MovieClip in libreria. Ho scoperto, tuttavia, che può risultare più utile ed economico fare il percorso contrario. Ho creato una classe Reflex (Reflex.as), con l'intenzione di usarla esclusivamente da codice. Ho creato questa classe pensando di passare nel costruttore il puntatore ad un MovieClip. La nuova classe Reflex contiene in sostanza lo stesso codice prima inserito nella ReflexMe, ma leggermente modificato in modo da poter funzionare espressamente da codice:

Continua a leggere... »

Post correlati

• undolibrary: libreria Actionscript 3.0 su Google Code (0)
• Undolibrary MatrixArray: un’estensione della classe Array (0)
• Flash CS3: creare un effetto Reflex su qualsiasi MovieClip (7)
• Creare un preloader generico in Actionscript 3.0 (6)
• Actionscript 3.0 for beginners: lesson #4 (0)

Sfruttando una notevole caratteristica di Actionscript 3.0 (vedi Actionscript 3.0: tutto con l'operatore new) ho creato una classe ReflexMe in grado di generare un effetto "riflessione" su un qualsiasi MovieClip presente in libreria.

Il sorgente fa parte del pacchetto undolibrary - presente su GoogleCode - ma se volete potete scaricare il singolo file ReflexMe.as.

Continua a leggere... »

Post correlati

• Painting Flash CS3: real time erase tool (0)
• Flash CS3: creare effetto nebbia TV in 1 secondo (1)
• Creare un’applicazione Paint in Flash CS3 (4)
• Come salvare immagini in Flash CS3 (1)
• Undolibrary MatrixArray: un’estensione della classe Array (0)

L'autore di questa libreria Unobtrusive Ã¨ lo stesso di Reflex (Reflex 1.1: aggiungere effetto di riflessione alle immagini). Questa volta propone un simpatico effetto di "arricciatura" (curl) sulle immagini fotocon varie opzioni tra cui l'animazione dell'arricciamento al passaggio del mouse sul bordo dell'immagine. La tecnica utilizzata è sempre quella delle CANVAS utilizzate in tutti gli script disponibili sul sito. Per scaricare il curl script clicca qui.

Post correlati

• Tutti i cloni di Lightbox in una matrice dinamica (7)
• Shadowbox assetURL: impostare il percorso delle immagini (2)
• Restyling: animazioni ed interattività (0)
• Reflex 1.1: aggiungere effetto di riflessione alle immagini (6)
• Light Library: da Slimbox a Shadowbox, gallerie in Javascript (12)

Nuova versione 1.1 della libreria Javascript Reflex con la quale è possibile aggiungere effetti di riflessione alle immagini. Il vantaggio di usare questa tecnica "non intrusiva" è la rapidità con cui è possibile aggiungere questi effetti senza dover spendere tempo nel realizzare effettivamente l'immagine di riflessione.
Questa versione è stata provata sui browser Mozilla Firefox 1.5+, Opera 9+, Safari e IE6. La minima dimensione supportata per un'immagine è 32x32. Una volta inclusa la libreiria:

Basta inserire class="reflex" sulle immagini dove desideriamo applicare tale effetto. Sfruttando la proprietà dell'attributo class è possibile manipolare gli effetti di riflessione, il chè rende questa libreria davvero particolare. È possibile, infatti, distorcere anche l'immagine aggiungendo effetti 3D. Ad esempio ecco come aggiungere varie caratteristiche alla rilfessione:

Per i dettagli vedi la documentazione sul sito ufficiale.

Sullo stesso sito è possibile scaricare numerosi altri effetti come Edge, Corner, Glossy e molti altri, tutti dedicati alle immagini.

Post correlati

• Effetto arricciatura sulle immagini (0)
• Unobtrusive SWFObject 2.0 (2)
• Unobtrusive Javascript: pseudo & real (0)
• Unobtrusive Flash Objects (1)
• Tutti i cloni di Lightbox in una matrice dinamica (7)