dot Next - Siti internet, Web, Comunicazione, Grafica, Multimedia, Realtà Aumentata, Software, Applicazioni web, iPhone, iPad - Genova

Fireworks: creare set di icone con i simboli e gli stili

giorgio — 2010-06-14T09:55:51Z

In questo tutorial vedremo come creare diversi set di icone, partendo da un'immagine di base, sfruttando alcune semplici funzionalità di Fireworks. Alla fine del tutorial potrete scaricare un piccolo set di icone e il file sorgente… iniziamo!

L'immagine di partenza è un'icona minimale composta da un cerchio e un tracciato.

Siccome il cerchio sarà la base di tutti i nostri set e verrà ripetuto per ogni icona, per prima cosa creiamo un simbolo (elabora > simbolo > converti in simbolo) Modificando il simbolo andremo ad agire su tutte le istanze presenti nello stage.

Da questa prima immagine creiamo le altre icone su questo stile: pochi tratti per definire i soggetti ed ecco un primo set di icone.

Partendo da questo possiamo definire, grazie agli “stili”, un secondo set con effetto "metallico".

Dal menu "finestra" apriamo "stili". Questa palette permette di applicare con un click alcuni stili predefiniti (sostanzialmente sfumature, tracciati e filtri combinati tra loro e modificabili) all'oggetto selezionato.

Entriamo nel simbolo (doppio click su un'istanza), selezioniamo il cerchio e clicchiamo sul secondo stile della tendina "cromato scuro". Per ottenere il risultato in figura andiamo a modificare la brillantezza dell'oggetto con "proprietà > filtro > tonalità saturazione".

Ovviamente avremmo potuto modificare il gradiente, ma in questo modo il colore è più controllabile e si modifica più velocemente.

Ora diamo un effetto incavato al tracciato dell'icona “home”, come se il disegno fosse inciso nel metallo: rendiamo il tratto più spesso di un pixel e applichiamo "filtro > ombra interna". E a questo punto, selezionando il tracciato, creiamo un nuovo stile (stili > nuovo stile) in modo da applicare queste stesse caratteristiche a tutte le altre icone.

Pochi minuti di lavoro ed ecco il risultato!

È molto semplice modificare lo stile di tutte le icone, vediamo, per esempio, come ottenere in pochi passaggi uno stile molto diverso da questo: effetto grunge!

Entriamo nuovamente nel simbolo. L'immagine successiva mostra i primi passaggi:

Applichiamo una texture da “proprietà > riempimento > motivo > altro”... carichiamo una nostra texture e la scaliamo sull'oggetto. Associamo poi un tratto al quale diamo l'effetto “olio” e una texture “stucco” dal pannello “tproprietà > tratto > opzioni tratto”.

Nella figura successiva sono mostrati gli step finali.

Utilizzando il pannello “tracciato” e seguiamo le indicazioni mostrate in figura per ottenere una forma vettoriale con i bordi frastagliati. Tutte le istanze del nostro simbolo sono state nuovamente modificate.

Non ci resta quindi che modificare le icone sopra la base. Un'idea realizzabile in 30 secondi può essere questa:

Ed ecco quindi come in pochissimo tempo e con pochi elementi abbiamo realizzato tre set di icone con stili completamente differenti:

Naturalmente questo lavoro serve solo da spunto per mostrare come con pochi strumenti e un po di creatività possiamo raggiungere risultati efficaci in breve tempo.

Scaricate il file del tutorial. Contenente un piccolo set di icone da modificare a vostro piacimento prendedo spunto dalle idee mostrate nel tutorial o da utilizzare per il vostro sito.

Spip: 10 casi di utilizzo avanzato

giorgio — 2010-05-12T08:14:17Z

In questo post parliamo di Spip, un CMS opensource che utilizziamo spesso per i nostri progetti. Nello specifico vedremo alcuni tip and tricks; casi particolari di utilizzo avanzato del codice.
Per qualsiasi informazione sul CMS e la guida base di Spip rimandiamo al sito ufficiale: www.spip.net

1. Passare variabili agli include

Con spip, per includere un file nella nostra squelette si utilizza questa sintassi

per utilizzare nel file sottoMenu i valori della squelette, ad esempio ci servisse l'id della rubrica per estrarre solo gli articoli di quella rubrica (il caso tipico di un sottomenu), dovremmo passare il parametro id_rubrique nello script di inclusione

2. I segnaposti di Spip nel codice php

il codice di Spip può interagire senza problemi con il php. Un semplice esempio pratico può essere utilizzare i segnaposti di spip per creare una condizione in php

 echo("titolo 1 o titolo 2");
 } ?>

3. Passare un'ancora da url

Può essere necessario passare dei parametri o un'ancora tramite url ad una squelette personalizzata. Il link sarà simile a questo: #URL_PAGE{miaPagina, lang=it#ancora}

Nel nostro esempio passiamo il parametro della lingua e un'ancora ad un articolo specifico. Per passare l'ancora di un articolo generato dinamicamente possiamo scrivere:

#URL_PAGE{miaPagina, lang=#LANG##ID_ARTICLE}

Considerando che il link sia dentro un ciclo dal quale estrarre ID_ARTICLE (notare il doppio # davanti a ID_ARTICLE).

4. Recuperare un parametro

Per recuperare un valore passato nell'url basta semplicemente passare una parametro personalizzato, in questo caso "mia_variabile"

miosito.it/spip.php?page=miapagina&mia_variabile=valore

e recuperarla nella squelettes tramite il segnaposto che dovrà avere lo stesso nome del parametro. #MIA_VARIABILE

5. Il codice di Spip in uno script javascript!

il codice di Spip si integra perfettamente anche con javascript. Può essere utile ad esempio per richiamare un div che ha il nome dell'id generato dinamicamente, nel nostro caso utilizzando come suffisso del nome l'anno di pubblicazione di un articolo (per esempio possiamo creare delle tab divise per anno).

6. Utilizzare un segnaposto di un ciclo contenitore

Per recuperare un elemento di un ciclo esterno a quello in cui ci troviamo possiamo utilizzare questa sintassi: [(#_nomeCicloEsterno:TITRE)]


 
 [(#_uno:TITRE)] > #TITRE

nel nostro esempio stampiamo il titolo della rubrica. In questo caso il titolo della rubrica verrà ciclato tante volte quante sono il numero degli articoli.

7. Filtrare gli allegati per tipo

Potrebbe essere utile in alcuni casi inserire un thickbox nel caso gli allegati di un articolo fossero immagini, ma allo stesso tempo poter dare la possibilità di scaricare altri tipi di allegato, per esempio il pdf. Può esserci di aiuto filtrare gli allegati per tipo di file.

[(#TYPE_DOCUMENT|=={PDF}|?{' ',''})[(#LOGO_DOCUMENT)] [(#FICHIER)]]
 
 [(#TYPE_DOCUMENT|=={PDF}|?{'',' '})[(#LOGO_DOCUMENT)]]

Nel nostro esempio se i file allegati sono PDF mostriamo l'icona e il nome del file, se non sono PDF diamo al link la classe "thickbox" e non mostriamo il nome del file.

8. Raggruppare in liste secondo un criterio

Creare delle liste chiare e con un codice pulito è molto importante. Si può presentare la possibilità di dover ordinare delle lunghe liste secondo un criterio. Nel nostro esempio abbiamo una lista di allegati che vengono ordinati secondo la "descrizione" (#DESCRIPTIF). Nella descrizione abbaino scritto il tipo di file (ad esempio zip, pdf…). quello che vogliamo ottenere è una lista di questo tipo:

PDF
file uno
file due
…

ZIP
file uno
file due
…

il codice è questo:


  
 [(#DESCRIPTIF|unique)
]
 
 
  
 #LOGO_DOCUMENT

da notare il filtro "unique" nel segnaposto #DESCRIPTIF, che stampa la descrizione una sola volta, e le parentesi quadre prima e dopo il tag LI, che ci permette di non stampare il codice quando il #DESCRIPTIF è vuoto, quindi SEMPRE tranne la prima volta.

9. Maschera sulle immagini

Una semplice funzionalità per rendere accattivanti le vostre immagini è il filtro maschera sulle immagini. Spip permette di utilizzare una maschera sulle vostre immagini.

[(#FICHIER|image_masque{squelettes/images/mask.png})]

Alcune cose utili da sapere:

. l'immagine "maschera" deve essere una png24 (quindi con il canale alpha)

. se l'immagine è più grande della maschera si ridimensiona automaticamente con le dimensioni di quest'ultima

. la maschera modifica anche la luminosità dei colori: per utilizzare solo la proprietà di "taglio" della maschera basta creare la png24 con i grigi al 50%

10. Estrarre dati da una tabella aggiuntiva

In alcuni casi si può presentare la necessità di inserire una tabella nel database esterna a quelle di spip. Recuperare i dati è molto semplice:


 
 #NOME

 #FORMATO

Nell'esempio il ciclo estrae i campi della tabella "fotografie" e i segnaposti stampano i campi della tabella stessa.

Bianco e nero di quadricromia

giorgio — 2010-03-19T16:31:08Z

Per creare un buon bianco e nero digitale sono sufficienti pochi passaggi su photoshop e un po' di dimestichezza con i canali. Apriamo la nostra immagine in CMYK apriamo il pannello "canali" e salviamola con un altro nome.

Convertiamo quindi il nuovo file in metodo "scala di grigio" e successivamente di nuovo in quadricromia.

Apriamo ora tutte e due le immagini e affianchiamo le finestre. Avremo 2 file entrambi in quadricromia ma una in bianco e nero a l'altra colori.

Selezioniamo l'immagine a colori e convertiamola in metodo colore LAB.

A questo punto vedremo che nella palette canali avremo un livello colore e uno luminosità.

Posizionandoci su quest'ultimo selezioniamo tutto (cmd + A) e andiamo a copiare il canale (cmd + C).

Posizioniamoci ora sull'altra immagine, andiamo a selezionare il canale del nero e incolliamo la nostra selezione (cmd + V). Riattivando tutti i canali vedremo il risultato: un bianco e nero decisamente più profondo!

Flash: proteggere i dati di una e-card personalizzata

giorgio — 2010-02-18T16:13:00Z

Un modo molto semplice per passare dei valori ad un swf è utilizzare il parametro FlashVars nel codice html della nostra pagina. In questo modo si possono creare diverse variabili che verranno poi richiamate nel flash. Ma se qualcuno scaricasse il file swf e lo inserisse in una sua pagina html? Potrebbe cambiare i valori delle variabili nel codice e riutilizzare il vostro lavoro! In questo esempio vediamo come realizzare una semplice e-card personalizzata con il nome del mittente e del destinatario e come impedire che il vostro flash possa essere utilizzato da altre persone.

Dopo aver disegnato la nostra cartolina passiamo alla parte di personalizzazione con as3.

Abbiamo bisogno innanzitutto di due campi di testo dinamico che ricevono le varabili, li chiameremo “txt_destinatario” e “txt_mittente”. Nel pannello Azioni scriveremo:

txt_destinatario.text = root.loaderInfo.parameters.nomeDestinatario; 
 txt_mittente.text = root.loaderInfo.parameters.nomeMittente;

“root.loaderInfo.parameters” permette di ricevere il valore dal parametro FlashVars; “nomeDestinatario” e “nomeMittente” sono le variabili.

A questo punto pubblichiamo il file swf e l'html. Naturalmente continueremo a vedere nei nostri campi di testo i valori di default “nome destinatario” e “nome mittente”. Andiamo ad inserire le varibili. Apriamo il codice html e scriviamo il parametro FlashVars in questo modo:

Adesso, richiamando la pagina html dal browser potremo vedere l'ecard personalizzata!

Supponiamo che qualcuno pensasse di copiare la vostra ecard e spedirla da parte sua ad un suo amico... gli basterebbe scaricare il flash o richiamarlo in una sua pagina e cambiare i valori delle variabili.

Un modo semplice per impedire che questo avvenga è inserire con as3 un controllo dell'indirizzo della pagina che richiama il flash: “Se l'indirizzo corrisponde al mio sito fai partire il filmato”.

Per fare questo aggiungiamo un frame prima di quelli su cui abbiamo lavorato; creiamo un messaggio di errore e un nuovo frame per inserire il controllo.

var path; 
 function verifyPath() {path=ExternalInterface.call("window.location.href.toString");
 return (path.indexOf("http://www.miosito.com")==0);
 }
 if (verifyPath()) 
 {
 gotoAndPlay(2);
 }
 else 
 {
 stop();
 }

la classe ExternalInterface esegue il comando javascript che recupera l'url della pagina. Con il metodo indexOf verifichiamo che la stringa "http://www.miosito.com" abbia indice 0, e che quindi sia all'inizio della stringa da verificare. In questo caso il flash può essere eseguito, altrimenti si fermerà al primo frame che mostrerà il messaggio di errore. Questo script funziona anche nel caso si volesse richiamare il flash in un iframe.

Creare un collage digitale

giorgio — 2010-01-22T16:17:00Z

L'animazione del nostro sito è un mix di tecniche diverse, dall'illustrazione digitale con la penna grafica, allo "Stop motion", dalla creazione di texture all'elaborazione fotografica per la definizione dei materiali.

Partendo da alcune fotografie di oggetti tecnologici abbiamo creato una sorta di collage che definisse i principali ingombri della composizione.

Successivamente utilizzando alcuni pennelli di photoshop scaricabili dal sito qbrushes.net abbiamo ricalcato i contorni degli oggetti e inserito qualche pennellata per dare un tocco più realistico alla scena.

Abbiamo poi utilizzato una texture scaricata del sito zentextures.com per simulare il pezzetto di cartoncino su cui è disegnato il computer e aggiunto un po' di ombra per aumentarne la profondità. Con un'immagine più materica abbiamo creato il pavimento della stanza e aumentando un po' il contrasto e la saturazione abbiamo uniformato i toni.

La stanza è completata. Manca solo l'ascensore, disegnato utilizzando gli stessi pennelli con spessori differenti e un'altra texture cartacea come base.

Per i personaggi si è scelto un pennello con piccolo spessore e una particolare combinazione delle dinamiche dalla palette apposita. Gli arti mobili sono stati disegnati su livelli separati per poi essere esportati e opportunamente animati in Flash.

Dopo aver colorato gli omini e aver inserito la texture già usata per il computer, li abbiamo ritagliati seguendo approsimativamente i contorni, e abbiamo aggiunto un po' di ombra esterna per staccarli dallo sfondo.

Infine abbiamo inserito i personaggi sulla scena, aumentato un po' la saturazione, aggiunto qualche pennellata, e il gioco è fatto!

Ombre realistiche con Fireworks

giorgio — 2009-12-03T15:53:47Z

Per realizzare interfacce in stile collage è fondamentale un buon utilizzo delle ombre. Per rendere efficace l'effetto di un foglietto appoggiato su una superficie non possiamo limitarci all'uso del filtro ombra, ma dobbiamo intervenire “a mano” con dei piccoli accorgimenti. Nella figura sottostante possiamo vedere la differenza tra una forma con l'effetto ombra e una più elaborata.

La prima cosa da fare è capire da dove viene un'ipotetica luce. Questa ci servirà da riferimento per accentuare le luci, le ombre e l'inclinazione del nostro foglietto. Iniziamo a disegnare il nostro elemento modificando i punti di un rettangolo; teniamo in considerazione che l'angolo rialzato risulterà leggermente acuto (il vertice si sposta di 1 px verso l'esterno) mentre, per accentuare l'effetto, quello opposto dovrà essere leggermente ottuso (spostiamo quindi il punto di 1 px verso l'interno). Diamo un gradiente al tracciato. La parte rialzata sarà colpita dalla luce (usare un colore più chiaro della superificie di appoggio, in modo da accentuare maggiormente la profondità); il gradiente deve partire da metà del foglio all'angolo, una sfumatura troppo ampia rovinerebbe l'effetto.

Per realizzare l'ombra duplichiamo il tracciato, assegnamo un gradiente nero con opacità da 100 a 25 e spostiamo ancora verso l'esterno il vertice sotto l'angolo rialzato. Più il foglio si alza e più l'ombra diventa lunga e chiara. Aggiungiamo poi un filtro sfocatura all'ombra e diminuiamo l'opacità a circa 50%.

Seguendo le stesse indicazioni sulla luce, le ombre e la distorsione delle forme, possiamo creare diverse varianti. Utilizzando poi una texture o un'immagine si renderà il nostro collage più realistico.