GraphiCal » Tutorials

Nuovi font per un web più attraente! Ci pensa Google!

admin — Thu, 20 May 2010 07:00:50 +0000

Quante volte siamo stati vincolati dall’utilizzo dei soliti font compatibili per il web, perché gli unici permessi dallo standard browser, a scapito del design del sito stesso. Infatti i font che solitamente vediamo in giro, parliamo di Arial, Verdana, Times.. sono font incorporati all’interno del browser che utilizziamo per la navigazione.

Inizialmente i web font , che garantivano una buona compatibilità negli ambienti Windows /Mac erano veramente molto pochi. Con le ultime versioni dei sistemi operativi le possibilità di scelta sono un po’ aumentate. E google amplia questa possibilità introducendo una serie di nuovi font sicuramente utilissimi agli sviluppatori creativi i quali vogliono fare del proprio sito o blog un lavoro unico!

Il funzionamento è abbastanza semplice, google inventato una font directory e una font API che aiuterà lo sviluppatore a usare i font offerti, di alta qualità ed open source, nei loro siti.

La font directory offre per adesso 18 nuovi font tra qui quello Android utilizzato per l’omonimo sistema operativo, tra cui alcune varianti degli stessi.

L’utilizzo è semplicissimo con le API Font messe a disposizione da google, vediamo come.

Step 1: basta aggiungere questo script all’interno dei tag :

in questo modo, al momento della visualizzazione della pagina facciamo scaricare al browser anche i font messi a disposizione da google.

in questo modo, al momento della visualizzazione della pagina facciamo scaricare al browser anche il font google che poi andremo a richiamare nello stile del paragrafo.

Step2: adesso impostiamo il font per un paragrafo di testo nel solito modo, ovvero:

hello world

e adesso dovremmo vedere gli effetti del nuovo font, applicati al testo! (scarica l’esempio in fondo all’articolo)

Per adesso, Google supporta solo le lingue Europee, ma molto presto pensa di ampliare il supporto anche per le restanti lingue.

Credo che sia un’ottima soluzione che in futuro se ampliata potrà portare molti vantaggi lato design nel mondo del web 2.0!

Di seguito puoi scaricare un esempio di file html con lo script che abbiamo descritto prima:

Google Analytics e Flash – Tracking di un sito Flash (AS2 & AS3)

admin — Tue, 18 May 2010 07:00:05 +0000

Da un po’ di giorni alcuni utenti mi hanno scritto, descrivendomi le loro difficoltà ad utilizzare il tracking code di google con actionscript 2, in un vecchio post infatti avevo descritto con un tutorial la possibilità di utilizzare google analytics solo con AS3, ho pensato quindi di creare un post apposito per schiarire un po’ le idee su questo argomento, e infondo all’articolo la possibilità di scaricare il file sorgente in entrambi i linguaggi AS2 e AS3.

Il codice di google è sostanzialmente sempre uguale per entrambe le versioni di actionscrip, la differenza tra il AS2 e AS3 è ovviamente il modo in cui sono trattati gli eventi pulsante.

Ma partiamo dall’inizio, velocemente riscrivo i semplici passi da seguire prima di operare sul file flash:

1. Iscriversi a Google Analyics tramite questo link. (Bisogna avere un account google per poter fare ciò).

2. Registrare un nuovo dominio, quindi ricavare il codice html di tracking code.

Dovremmo avere qualcosa tipo questo (a seconda l’utilizzo del codice vecchio o nuovo di anayltics):

3. A questo punto incolliamo l’intero codice sopra riportato infondo alla pagina html (index.html o index.php) prima del tag

4. A questo punto passiamo a inserire il nostro codice all’interno del flash (nell’esempio è sempre visualizza in doppia versione vecchio è new codice per entrambe le versioni di AS):

AS2

// legacy tracking code
indexLegacy_mc.onRelease = function():Void
{
getURL(”javascript:urchinTracker(’/home/indexLegacy’);”);
};
// new tracking code
indexNew_mc.onRelease = function():Void
{
getURL(”javascript:pageTracker._trackPageview(’/home/indexNew’);”);
};

AS3

indexLegacy_mc.addEventListener(MouseEvent.MOUSE_UP, doLegacyRelease);
indexNew_mc.addEventListener(MouseEvent.MOUSE_UP, doNewRelease);
indexLegacy_mc.buttonMode = true;
indexNew_mc.buttonMode = true;
// legacy tracking code
var legacyURL:String = “javascript:urchinTracker(’/home/indexLegacy’);”;
function doLegacyRelease($evt:MouseEvent):void
{
navigateToURL(new URLRequest(legacyURL));
}
// new tracking code
var newURL:String = “javascript:pageTracker._trackPageview(’/home/indexNew’);”;
function doNewRelease($evt:MouseEvent):void
{
navigateToURL(new URLRequest(newURL));
}

In entrambi i casi, vediamo come viene inserita all’interno della funzione che è richiamata quando si clicca sul pulsante un particolare codice come se si richiamasse un url, ma non richiamiamo un url vero e proprio ma un codice javascript di questo tipo: “javascript:urchinTracker(’/home/indexLegacy’);”

Con questo codice non facciamo altri che passare alla funzione urchinTracker di google un parametro (/home/indexLegacy) o può essere il nostro pulsante di “Home” come “Chi Siamo” o “Contatti” e se il pulsante si trova in una sottosezione di “Chi Siamo” come ad esempio facciamo che sia “La Mission” in questo caso come parametro all’interno del pulsante “La Mission” inseriremo il seguente codice “javascript:urchinTracker(’/home/indexLegacy’);”

Il nome utilizzato all’interno della funzione javascript sarà quello visualizzato all’interno del nostro pannello di statistiche analytics, quindi questo ci permette di capire con facilità che le statistiche si riferiscono a quella particolare sezione raggiunta tramite la sezione “ChiSiamo”. Nel caso la stessa sezione è anche raggiungibile tramite un pulsante posizionato in home sarà /home/LaMission, in questo caso avremo le statistiche su questa particolare sezione visualizzata all’interno di analytics come Home/LaMission, quindi raggiunta direttamente da Home.

Lo stesso, accade per l’ AS3.

Di seguito è possibile scaricare anche il sorgente del progetto!

Google search stories – Racconta la tua storia con una ricerca creativa!

admin — Mon, 17 May 2010 07:00:56 +0000

Google Search Stories un nuovo servizio by Google creato per la creazione di video in modo automatico e creativo da pubblicare, non a caso, su YouTube. Con questo servizio è possibile creare interessanti video appoggiandosi a gran parte dei servizi di Google, come abbiamo notato infatti da qualche giorno google ha cambiato un pò la sua struttura per mettere in evidenza alcune funzioni utili per una buona ricerca, possiamo infatti ricercare per blog, per immagini, per news, per libri oppure una ricerca globale in tutto il web.

Tramite questo servizio è possibile creare senza alcuna conoscenza di video editor alcuni lavori creativi per diffondere notizie, fare un po’ di pubblicità e di marketing! Infatti studiando per bene questo servizio e sfruttando le sue caratteristiche si può pensare di fare con un video che focalizza l’attenzione dell’utente su un determinato argomento, presentandolo in maniera originale. Ad esempio per presentare luoghi tramite video sfruttando la ricerca con Google Maps oppure con Images per foto e immagini di un determinato argomento. Gli usi sono svariati, basta aggiungere un po’ di fantasia a quella messa a disposizione da Google!

Il funzionamento è abbastanza semplice e intuitivo, basta andare nella pagina youtube dedicata a questo, cliccare su Search Stories Video Creator per iniziare a creare il tuo video, aggiungere una musica scelta tra quelle preimpostate da Google e uplodare sul proprio canale youtube! (Una volta pubblicato il video sul canale, dall’interno del pannello youtube è possibile modificare la descrizione, cambiare la musica, e inserire tag e annotazioni..ma shhhh non lo diciamo a nessuno! )

Ecco il mio lavoro

Adesso a voi la parola!

Tutorial – Come creare il proprio pianeta personalizzato

admin — Wed, 10 Mar 2010 10:00:31 +0000

Questo è un tutorial veramente semplice che mette in evidenza un effetto photoshop che magari passa in secondo piano perchè non molto si usa, o non si conosce. Parliamo delle coordinate polari, un filtro che non fa altro che distorcere l’immagine su un punto, rendendola tonda. Per questo tipo di effetto le immagini che più si prestano meglio sono quelle panoramiche, rettangolari, basse.

Di seguito ho realizzato un video tutorial (perche è più facile da realizzare che a spiegare) che mostra in pochi passi come rendere delle immagini panoramiche dei curiosi pianeti. Con questa tecninca ogniuno può crearsi il proprio mondo sulla base di una panoramica della propria città, come vedremo di seguito Pisa e Venezia, o di un luogo particolarmente significativo.

Effetto finale:

SCARICA gli sfondi del tutorial!

Procedimento:

CSS: effetto ombra sul testo con Text-shadow

admin — Thu, 04 Feb 2010 03:00:09 +0000

Oggi spieghiamo cin un tutorial facile facile come creare un effetto ombra su un testo, senza l’uso di grafica e pasticci vari, esatto, perchè si potrà fare da codice, agendo sui fogli di stile e quindi parliamo dei CSS. Infatti con i CSS è possibile applicare quest’effetto con una semplice proprietà chiamata text-shadow , che fino a poco tempo fa presente solo su Safari (fin dalla prima versione!) adesso funge anche su Firefox, Chrome, Opera. Ovviamente IE è u caso apparte, ma poco ci importa!

Ma vediamo come agire sul codice impostando i 4 parametri necessari: spostamento dell’ombra verso destra, spostamento verso il basso, sfocatura e colore.

h2 { text-shadow: 5px 5px 4px #000; }

Finito

Nell’esempio sopra di cui sotto troviamo diversi esempi, viene semplicemente specificato che il titolo H2 in questo caso (ma può essere impostato su qualsiasi div) ha un ombra spostata di 5px a destra , 5px giù (con i numeri negativi si sposta a sinistra e sopra, in modo da regolare l’angolo dell’ombra), il 3 parametro, indica che deve avere 4px di sfocatura e l’ultimo, è il colore dell’ombra, se non viene impostato assume il colore del testo H2.

Questo effetto è molto utile nel caso vogliamo mettere in risalto alcuni testi del nostro blog. Ma occhio a non abusarne, perchè ne soffre la leggibilità del sito, quindi mai utilizzare un colore di testo uguale al background su cui risiede. Nel caso in cui l’utente visualizza il testo da un browser che non supporta tale proprietà, be, pazienza, semplicemente non lo visualizzaerà!

Altri esempi cool:

GraphiCal.it un blog di ispirazione
background:#404040;
color:#fff;
text-shadow: 1px 1px 0px #000;

Continuami a seguire!

background:#ccc;
color:#505050;
text-shadow: 1px 1px 0px #fff;

Su facebook ad esempio

background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;

O su twitter, o via mail…

background:#ccc;
color:#505050;
text-shadow: -1px -1px 0px #202020, 1px 1px 0px #fff;

…e se ti è piaciuto l’articolo

background:#404040;
color:#505050;
text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;

…condividilo in rete! – by GraphiCal.it
background:#404040;
color:#00ff0f;
text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;

Creare delle slide originali con effetto 3D

admin — Tue, 24 Nov 2009 09:18:04 +0000

Oggi vi segnalo un progetto che riguarda Flash completamente gratuito,il suo nome è cu3er. Cu3er è un visualizzatore di slide e immagini molto originale. Direi molto semplice da usare si base per la personalizzazione su xml. Ma vediamo come configuralo. Non è difficile da installare è praticamente composto da un cartella che contiene le immagini, un xml dove indichiamo il percorso e la transazione, e un file .swf che contiene le nostre slide visualizzate con un effetto 3D.

Demo

Prima di tutto procediamo al download del pacchetto a questo indirizzo http://www.progressivered.com/cu3er/download/ una volta scaricato scompattiamolo in una cartella. Troviamo i seguenti file:

Images

Js

Config

Cu3er

Demo

Adesso non dovrete fare altro che creare delle slide andandole ad inserire nella cartella images. Una volta caricate le immagini nella cartella bisognerà dichiararle nel file xml. Vi troverete davanti questo tipo di codice

images/slide_1.jpg

images/slide_2.jpg

images/slide_3.jpg

images/slide_4.jpg

images/slide_5.jpg

Ma non vi preoccupate non è difficile da capire, la parte che vi interessa maggiormente è il pezzo di codice che sta tra i tag precisamente:

images/slide_2.jpg

Dove a slide_2.jpg andrete a sostituire il nome della vostra imagine, e diventerà:

images/mia_grafica.jpg

Se volte far scorrere le slide in modo automatico dovrete aggiungere nei tra i tag setting il seguente pezzo di codice:

Vi riporto a questa guida ufficiale per ulteriori personalizzazioni:

http://www.progressivered.com/cu3er/docs/

Articolo scritto da: Giuseppe Ferraro Fano

Creare un effetto di distorsione dinamica

I Migliori Tutorial Photoshop del 2009

admin — Thu, 19 Nov 2009 03:00:44 +0000

Vi segnalo di seguito una raccolta dei più bei tutorial photoshop del 2009 selezionati da webdesignledger. Veramente una ricca raccolta di tutorial divertenti e scritti durante tutto quest’anno, con illustrazioni, foto, disegno tipografico e molto ancora. Purtroppo sono inglesi, ma vale lo sforzo di provare a tradurne qualcuno per applicare gli effetti sui nostri lavori..c’è solo da imparare!

A voi i tutorial:

Creative Photoshop Animal King Photo Manipulation Tutorial

How to Mold Paint Splatter to a Face in Photoshop

Creating a Spy Fly Photo Manipulation

How to Create a Fantasy Landscape Photo Manipulation

Photo Manipulate a Falling Angel

Text Effects

How to Create 3D Text Blocks in Photoshop

Awesome Milk Typography Effect in Photoshop

Create Destructive Black and White Lettering with a Dramatic Splash Effect

How to Create Stunning and Bold 3D Text

Web Design

How to Create a Clean Web 2.0 Style Web Design in Photoshop

Design a Beautiful Website From Scratch

How to Create a Unique Colorful Site Layout

Create a Magic Night Themed Web Design from Scratch in Photoshop

Icon Design

Design a Stylish Mail Icon in Photoshop

Create a Leather-Textured, Realistic Briefcase Icon

How to Create a Basic House Icon in Photoshop

Create a Magnifying Glass Icon in Photoshop CS4

Retro and Vintage Effects

Create Vintage Traveler Diary in Photoshop

Create A Retro Cosmic Design in Photoshop

Super Cool Retro Poster in 10 Steps in Photoshop

Lighting Effects

How to make a Typographic, Retro, Space Face

Very Easy Heroes Eclipse in Photoshop

Create a Trendy Galactic Poster Design in Photoshop

Here’s some other articles that you will definitely find useful.

Convert Your PSD’s into Web Pages with SiteGrinder 2

Create a New Retro Text Effect in Photoshop

21 Excellent 3D Text Photoshop and Illustrator Tutorials

40 Extremely Impressive Examples of Photo Manipulation

Create Simple Cartoon Characters in Photoshop

Tilt shift – foto macro di modellini o reali?

admin — Thu, 22 Oct 2009 03:00:03 +0000

Per tutti gli appassionati di fotografia oggi parliamo di una tecnica chiamata Tilt-Shift, con la quale è possibile tramite l’utilizzo di ottiche decentrabili solitamente utilizzabili per correzioni prospettiche, di effettuare scatti con un’effetto sfocato solo in alcune parti dell’inquadratura. Si ottengono così fotografie di paesaggi reali in scala 1:1 che sembrano macro di modellini.
Questa è la tecnica “vera” con sui fanno queste foto, poi ovviamente ci sono fake creati con Photoshop, di cui vi segnalo questo tutorial per chi volesse cimentarsi.

Un obiettivo di questo tipo è molto costoso, presenta uno snodo per regolare l’angolatura, nata dall’esigenza di correggere la prospettiva degli edifici, in architettura. di seguito un’immagine.

E’ sorprendente come questa tecnica rende l’idea di una foto scattata ad un modellino, quasi un giocattolo, quando invece è scattata in un’ambientazione reale.

Di seguito alcuni scatti

E per finire un bel video, realizzato con la tecnica del Tilt-Shift legata ad un’altra tecnica chiamata: Time-lapse photography, è una tecnica cinematografica, dove ogni frame è una foto (in questo caso scattata con un obiettivo Tilt-Shift) che visualizzate a velocità normale, da l’impressione di un movieclip.

Il video è stato girato nel grande parco Walt Disney

Strane e Insolite foto

Google Analytics e Flash – Tracking di un sito Flash

admin — Thu, 15 Oct 2009 03:00:21 +0000

Rieccoci con un semplice tutorial ma che mi ha fatto dannare un po’ di giorni, perché non ne ho trovato uno che mi soddisfacesse.

Oggi parliamo di come tracciare un sito in flash tramite il tool di google analytics, ovvero il traking di un sito, tramite le librerie messe a disposizione proprio da google per l’actionscript.

Quello che noi possiamo tracciare sono tutte le azioni di un utente, ovvero gli eventi che si scatenano a particolari azioni, come la pressione di un tasto, oppure il fatto stesso di averci passato sopra il mause, e poi ancora, pressioni di menù, banner, link e qualsiasi oggetto presente all’interno del nostro sito, consultabili tramite il pannello delle statistiche di google, uno dei più completi strumenti free. Ma come si fa?

Di seguito un semplicissimo tutorial step by step:

Passo 1:

Creazione di un account analytics dal seguente link (E’ necessario avere un account di posta GMail per poter accedere. Si può creare da qui).

Una volta entrato nel pannello di analytics in alto a destra creiamo il nostro account analytics, seguiamo tutti gli step che ci suggerisce google, il tutto è abbastanza semplice e intuitivo.

A fine operazione dovremmo avere una schermata dove ci viene chiesto di copiare lo script da inserire nel nostro sito. In realtà a noi non serve l’intero script (perché quello è per un normale sito html) a noi interessa l’ID, facilmente riconoscibile perché è una sequenza di lettere e numeri come questa “UA-xxxxxx-x“. Lo copiamo e lo mettiamo da parte.

Passo2:

Ora scarichiamo la libreria per l’actionscript (nel mio caso si tratta di actionsctipt 3), che ci permette di interagire con analytics, dal seguente link. A lato troviamo il link nel pannello “Featured downloads“.

A questo punto decomprimiamo il pacchetto scaricato e all’interno troviamo la cartella doc, copiamo l’intero contenuto della cartella doc e lo incolliamo nel path dove è contenuto il nostro swf. Queste che abbiamo ora inserito sono le librerie che ci permetteranno di interagire con analytics.

Passo3:

Ora apriamo il nostro file flash del nostro sito e ipotiziamo di avere un codice come questo:

btn_azienda.addEventListener(MouseEvent.CLICK, chiama_azienda);

function chiama_azienda(e:MouseEvent):void
{

loader.load(new URLRequest(”sito/flash/azienda.swf”));

stagee.addChild(loader);

}

Questo è un tipico script che si applica a un tasto, che dice: quando viene premuto il pulsante che ha nome istanza btn_azienda allora scatena l’evento chiama_azienda, eseguendo la funzione.

La funzione in questo caso carica un nuovo filmato swf e lo aggiunge allo stage. Se vogliamo tracciare il click su questo pulsante allora procediamo come segue:

importiamo le librerie precedentemente scaricate e aggiunte al path del nostro sito:
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
creiamo una variabile di tipo AnalyticsTrackers che ci servirà per tracciare ogni azione, e passiamo come parametri l’ID che abbiamo precedentemente copiato e incollato sul nostro blocco note, AS3 sta ad indicare il tipo di actionscript, mentre il parametro false indica che non è in modalità prova, se vogliamo controllare che tutto funzioni correttamente cambiamo in true, in questo modo vedremo un’interfaccia che ci farà vedere come l’actionscript invia le informazioni ad analytics:
var tracker:AnalyticsTracker = new GATracker(this, “UA-xxxxxxx-x”, “AS3″, false );
scriviamo all’interno della funzione chiama_azienda questa riga, che altro non fa che inviare un impulso ad analytics, in modo da incrementare il valore delle statistiche per la pagina /Azienda, che non esiste, ma è come se fosse una pagina virtuale, serve solo a noi per poter capire all’interno del pannello di analytics, dove l’utente ha cliccato:
tracker.trackPageview(”/Azienda);

A questo punto, ricapitolando, il nostro codice sarà il seguente:

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;

var tracker:AnalyticsTracker = new GATracker(this, “UA-xxxxxxx-x”, “AS3″, false );

btn_azienda.addEventListener(MouseEvent.CLICK, chiama_azienda);

function chiama_azienda(e:MouseEvent):void
{

loader.load(new URLRequest(”sito/flash/azienda.swf”));

stagee.addChild(loader);

tracker.trackPageview(”/Azienda);

}

A questo punto la riga tracker.trackPageview(”/Azienda”); dovrà essere riportata all’interno di ogni funzione che e richiamata da un EventListener, cioè un ascoltatore di evento, cambiando il target (/xxxx) in base al tipo di pulsante o evento associato.

Per il pulsante Home il codice sarà: tracker.trackPageview(”/Home”)

nel caso di una sotto-categoria di azienda il codice sarà: tracker.trackPageview(”/Azienda/Contatti”). Cosi facendo sappiamo che l’utente ha raggiunto la categoria Contatti passando per la categoria Azienda.

Conclusioni:

In questo modo noi abbiamo il pieno controllo di tutte le azioni che sono presenti nel nostro sito. Il tutto è ora consultabile all’interno del pannello statistiche di analytics al seguente link, dove possiamo monitorare i vari click.

ATTENZIONE: le statistiche sono riferite al giorno precedente. E quindi se abbiamo appena implementato il traking code per flash, passeranno almeno un paio di giorni prima di vedere nel pannello i primi click.

Convertire qualsiasi Font in un Sketch Font

admin — Thu, 09 Jul 2009 03:00:05 +0000

E’ da un pò di tempo che sul web va di moda il disegno a mano libera e uno delle carattarestiche più di tendenza utilizzate da molti web designer è lo Sketch Font, ovvero le scritte abbozzate, come fossero disegnate a mano libera.

Ma come si disegna un disegno a mano libera in digitale? Con quale strumento? E come applicare questa tecnica ad ogni tipo di font o oggetto che vogliamo?

Il tutorial di seguito spiega in semplicissimi passi come fare:

Effetto finale

Passo 1:

Aprire un nuovo documento 800×600 px in Illustrator. Creare una nuova casella di testo e inserire il testo con qualsiasi font vogliate, io ho utilizzato un font standard come Verdana. Aumentiamo la dimensione del font a 72px e lo rendiamo in grassetto (bold).

Passo 2:

Selezionare il testo ed eliminare riempimento e bordo del testo, praticamente rendiamo il testo trasparente andando a selezionare la trasparenza dal pannello del colore.

Passo 3:

Con il colore del bordo e riempimento in trasparenza andiamo a creare un nuovo livello da pannello “Aspetto”. Lasciando come colore di rimepimento il nero di default. Apparirà di nuovo la scritta.

Passo 4:

A questo punto selezioniamo il nuovo livello che abbiamo creato e aggiungiamo un effetto a quest’ultimo cliccando sulla voce in basso “fx”/Stilizzazione/Scarabocchio.

Passo 5:

Settiamo nella nuova finestra pop-up che viene fuori i seguenti valori, oppure deformiamo i valori in base alle nostre esigenze.

Passo 6:

Ora andiamo a disegnare il bordo attorno allo scarabocchio che rappresenta il nostro testo. Nel pannello “Aspetto”, clicchiamo su “Traccia” e impostiamo il valore a 2px.

Passo 7:

Ora tenendo il livello “Traccia” selezionato, andiamo a distorcerlo con un effetto. Quindi clicchiamo su fx/distorci e trasforma/contorni frastagliati. E impostiamo i valori come mostrato in figura.

Il nostro Sketch Font è ultimato. Ma come applicare questa tecnica su qualsiasi altro font o oggetto?

Semplicemente salvando lo stlie grafico (ovvero tutto il lavoro fantto fin ora) in modo da poterlo riutilizzare con un semplice click dove si vuole!

Quindi aprire il pannello “Stili Grafica” aggiungere un nuovo livello, in automatico verrà creato il nuovo stile.

..e quando lo si vuole utilizzare basta selezionare l’oggetto e fare click sullo stile appena creato. Come altri testi, con altri font, forme e oggetti.

Scarica il file Illustrator del tutorial: