Marask.com » web 2.0

Skittles.com : il sito… senza sito

Marask — Wed, 12 Aug 2009 21:39:17 +0000

Chi ha detto che per pubblicizzare un marchio sul web occorra necessariamente un sito?
Perchè dover creare da zero un’interfaccia di navigazione, un layout grafico e una montagna di script per gallerie di immagini, video, community, forum, newsletter.. ecc quando, in realtà, tutto questo già esiste sul web?

Skittles.com, il sito della nota marca di caramelle, ci mostra che in realtà tutto quello che occorre fare è munirsi di un tubetto di colla e attaccare tra loro i nostri profili nei vari social networks, per ottenere un perfetto sito commerciale senza, in effetti, realizzarne veramente uno. Skittles.com è un interessantissimo patchwork che unisce i profili aziendali su Facebook, Flickr, YouTube, Wikipedia e Twitter, raggruppati in un unico dominio, navigabili attraverso un semplicissimo box in sovraimpressione che costituisce l’unica vera interfaccia del sito e che permette, in un click, di spostarsi tra i vari network in un attimo.

Un’idea brillante, sebbene non unica nel suo genere, che sfrutta davvero a pieno i concetti di flessibilità e di integrazione tanto cari ai guru del web 2.0, anche se rimane un tipo di comunicazione un po’ difficile da far accettare a molte aziende, di certo più legate ad una comunicazione tradizionale.

Se vi ho incursiosito, date un’occhiata al sito Skittles.com

Fonte: Impronte digitali

Testo 2.0 con javascript

Marask — Sun, 11 Jan 2009 18:43:12 +0000

Ecco, non faccio in tempo a mettere un tutorial su come si fa il riflesso 2.0 al testo con Photoshop e subito mi imbatto in un bel javascript comodo comodo che permette di fare la stessa cosa senza il minimo sforzo. Basta scaricare il file .js, piazzarlo da qualche parte sul sito, richiamarlo nella sezione ed ecco fatto! A questo punto prendete qualsiasi immagine, attribuitele la classe “reflect” e avrete un ottimo effetto “specchio”, che fa molto web 2.0!

Trovate tutto quello che vi serve qui: http://cow.neondragon.net/stuff/reflection/

Testo web 2.0 con Photoshop

Marask — Tue, 23 Dec 2008 23:18:02 +0000

Basta navigare un po’ in internet per accorgersi che nell’ultimo periodo il web sembra essersi sempre più uniformato, adattandosi a standard sempre più precisi. Ora, che la cosa sia o meno un bene non mi riguarda, quindi mi limiterò a mostrarvi come ottenere quel tipo di effetti tanto popolari di questi tempi.

Iniziamo con il testo, la parte più semplice.

In questo tutorial apprenderemo come realizzare un effetto di testo di questo tipo:

Iniziamo. Creiamo una nuova immagine, di una dimensione qualsiasi, con sfondo nero e testo bianco. Come font suggerisco il Trebuchet MS, particolarmente adatto a questo tipo di effetti. Dovrebbe essere presente di default anche sul vostro pc.

Ora iniziamo applicando questi effetti al nostro testo:

Nel dettaglio, la sfumatura deve avere all’incirca queste impostazioni (il grigio è un #999999):

Bene, a questo punto dovreste aver ottenuto questo risultato:

Ci siamo quasi. Come prossimo passo, duplichiamo il livello (ctrl+J), andiamo nel menu Modifica, poi Trasforma>Rifletti verticale. Fatto questo, posizioniamo il nuovo livello sotto al precedente e spostiamolo in basso, in modo da creare una simmetria.

A questo punto apriamo il pannello effetti del livello appena creato e lasciamo tutto uguale, tranne un particolare: invertiamo la sfumatura, in modo da avere la parte grigia adiacente alla parte grigia del livello sottostante.

Il risultato è questo:

Creiamo un nuovo lvello (ctrl – shift – n) e posizioniamolo tra i due. In questo livello stenderemo una sfumatura che va da nero a trasparente, così:

In modo da ottenere questo:

Così facendo abbiamo ottenuto il nostro testo 2.0
Nel prossimo articolo vedremo come come abbellirlo ulteriormente con uno sfondo sfumato ed alcuni effetti 3d. Per ora è tutto, spero che questo tutorial sia stato utile. alla prossima!