[english vesion on the ToDo's Blog]

In Chinagram abbiamo voluto unire il fascino degli ideogrammi cinesi e le possibilità della piattaforma iPad, creando un’app che non è solo utile e interessante da usare ma anche bella da vedere.
Ecco un “dietro le quinte” su come è stata creata l’illustrazione del pavone, simbolo di bellezza nella cultura cinese, usata come splash screen dell’applicazione.

Il Pavone è simbolo di bellezza nella cultura cinese e mi è sembrato un soggetto perfetto per esprimere l’argomento di Chinagram: la bellezza e il fascino della lingua e della cultura Cinese.
Potete scaricare questa e altre immagine in formato wallpaper direttamente dal sito di Chinagram

Prima di passare al digitale, ho disegnato forme astratte e tratti di acquerello sulla carta: una volta scannerizzate e lavorate in Photoshop, ho usato queste immagini come texture, per dare profondità e calore all’illustrazione.
In Photoshop convertite la scansione in scala di grigi (Immagine > Modo > Scala di grigi), poi fate Command+clic sulla thumbnail del livello del grigio nel pannello dei canali: avrete selezionato il contorno delle aree scure, mantenendo le diverse trasparenze. Potrete così copiare e incollare la macchia “scontornata” in un nuovo documento, dove eventualmente ritoccherete le impostazioni di colore, livelli o luminosità.

Ho fatto un bozzetto a matita e poi ne ho tracciato le forme principali in Illustrator con il Pen Tool.

Per ottenere l’effetto delle piume del dorso ho creato un pennello personalizzato e l’ho applicato a una linea che segue le curve del collo e del corpo del pavone. Poi l’ho mascherato con la forma del corpo. Ho usato lo stesso effetto anche per rendere l’effetto delle scaglie nell’illustrazione del drago

Stesso procedimento per ottenere le piume della coda: dopo averne disegnata una l’ho applicata a una serie di linee. Con questa tecnica è possibile avere un livello di dettaglio molto alto con pochissima fatica.

Usando ancora le maschere e diverse combinazioni di fusione (moltiplica e scherma) ho inserito le texture precedentemente realizzate per dare profondità e aggiungere grana e calore alle tinte piatte.

Come si scrive e si pronuncia questa parola in cinese l’ho imparato con Chinagram, che vi permetterà di capire da dove provengono e cosa significano i caratteri cinesi… cosa piuttosto utile la prossima volta che ordinerete al ristorante cinese :)

Qui sotto trovate il video del processo di realizzazione:

Aggiornamento: Chinagram è ora disponibile su iTunes Store
.

Our HTML code:

<ul>
    <li><label for="radio1">label 1</label><span></span><input type="radio" id="radio1" name="myRadio" checked="checked"/><span></span></li>
    <li><label for="radio2">label 2</label><span></span><input type="radio" id="radio2" name="myRadio" /><span></span></li>
    <li><label for="radio3">label 3</label><span></span><input type="radio" id="radio3" name="myRadio" /><span></span></li>
    <li><label for="radio4">label 4</label><span></span><input type="radio" id="radio4" name="myRadio" /><span></span></li>
</ul>

We only have to add two empty span before and after the radio button. Here is the commented CSS code (only the essential to do the trick, without the eye-candy):

span{
	position: absolute;
	right: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	padding: 3px;
	color: #FFF;
	text-align: center;
	background: #c06f59;
}
 
span:after{
	content: "no"; /*if CSS are disbled span elements are not displayed*/
}
 
input{
	position: absolute;
	right: 0;
	margin: 0;
	width: 31px;
	height: 31px;
	/*hide the radio button*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
        cursor: pointer;
}
 
input[type="radio"] + span{ /*the span element that immediately follow the radio button */
	visibility: hidden; /*temporarily hide the "YES" label*/
	background: #6EB558;
}
 
input[type="radio"] + span:after{
	content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
 
 
input[type="radio"]:checked + span{
	visibility: visible; /*show the "YES" label only if the radio button is checked*/
}

Slideshow

Il codice che permette lo slideshow delle foto è molto semplice. Mi sono appoggiato ai selettori del framework Javascript Mootools per semplificarmi un po’ le cose.

//create an Array
holgaArray = $$(".photo");

$('next').addEvent('click', function(e){
    e.stop();
    if(transitionsEnd){
        increaseCounter();
        nextPhoto();
    }
});

.goRight {
    transform: translateX(-330px) rotate(-5deg);
    -webkit-transform: translateX(-330px) rotate(-5deg);
}
.goTop {
    box-shadow: 0px 0px 12px #333;
    -moz-box-shadow: 0px 0px 12px #333;
    -webkit-box-shadow: 0px 0px 12px #333;
    z-index: 100;
    transform: translateX(0px) rotate(0deg);
    -webkit-transform: translateX(0px) rotate(0deg);
}

#fotocontainer div {
    -webkit-transition: -webkit-transform ease-out .4s;
}

//set the transition-class
$(holgaArray[actual]).set("class", "goRight");
//add a listener for webkit transitions
$(holgaArray[actual]).addEventListener('webkitTransitionEnd', backtoTop ,false );
//and remember to remove the listener when you don't need anymore
$(holgaArray[actual]).removeEventListener('webkitTransitionEnd', backtoTop ,false );

ALTRI EFFETTI

#alert{
    background: url(../img/bg_alert.jpg) no-repeat center top;
    color:#635e57;
 
    /* trick */
    transform: translateY(-500em);
    -webkit-transform: translateY(-500em);
}

@font-face {
    font-family: League;
    src: url('../font/League_Gothic.otf');
}
 
#header h1, #header h2{
    font-family: League;
    text-shadow: 0px 2px 3px #5a4432;
    margin-bottom: 0;
}

a.button{
    color: #bbb8b0;
    background: transparent;
    padding: 4px;
    border-image: url(../img/btn.png) 0 4 0 4 stretch stretch;
    -webkit-border-image: url(../img/btn.png) 0 4 0 4 stretch stretch;
    text-decoration: none;
    text-shadow:0px -1px 1px #53402d;
}

visualizza la DEMO o scarica i file Sorgenti

testo tratto da “Je voudrais pas crever” di Boris Vian

testo tratto da “L’Hippopodame” di Serge Gainsbourg

testo tratto dalla poesia “Il Sole” di Rumi

Innanzitutto ho aggiunto un po’ di trucco. Per farlo ho scurito e allargato le ombre degli occhi e ho sostituito il colore delle labbra con un rosso più acceso.

La maglietta è disegnata seguendo i contorni del busto. Ho aggiunto un pattern a pois, preso dalle palette predefinite di Illustrator, che possiede numerosi pattern di cerchi, linee, motivi classici o geometrici. Si trovano nel menu “Window>Swatch Libraries>Patterns“.

la gonna è costituita da due semplici forme, davanti e dietro alle gambe. Per aggiungere il dettaglio del pizzo, ho duplicato queste forme e applicato il filtro “Zig Zag“, che si trova nel menù “Effect>Distort & Transform”

Ho disegnato gli stivali intorno alla forma dei piedi e per la scopa ho aggiunto delle linee create tramite l’effetto “blend“, che ho spiegato nel primo step

Le mani sono forse la parte del corpo più difficile da disegnare, perché sono composte di molte parti e sono estremamente articolate. Per semplificare questa parte ho disegnato la mano destra chiusa a pugno, la sinistra invece è nascosta dalla gonna.

Poi ho aggiunto alcuni accessori per rendere l’illustrazione più completa: la cintura, il collarino e il cappello a punta.

Per riempire lo sfondo ho creato un pattern, in modo da creare un effetto “wallpaper”. Per creare un pattern custom è sufficiente trascinare una qualsiasi forma nella palette “Swatches“. Bisogna solo fare attenzione che il pattern sia ripetibile sia in orizzontale che verticale creando un diegno continuo, senza brusche interruzioni.
La parte ondulata del pattern è stata creata sempre con l’effetto “Zig Zag”, selezionando però l’opzione “Smooth” anzichè “Corner“.

L’ombra è fondamentale per creare un effetto di profondità nell’immagine e dare l’impressione che il personaggio sia effettivamente inserito nell’ambiente, e non sia semplicemente una figurina piatta incollata su un sfondo.
L’ombra è la silouhette del personaggio riempita di un gradiente rosso, a cui ho assegnato il blend “multiply“.

Come tocco finale ho aggiunto un rettangolo sopra tutta l’illustrazione, l’ho riempito con un gradiente giallo e blu a cui ho applicato poi il blend “Color Burn“. In questo modo è possibile modificare le tonalità di colore dell’immagine per creare delle situazioni di luce più organiche e interessanti.

Ed ecco qui il risultato finale: pronta per la festa in maschera.
Tempo di realizzazione: 3 ore

Le proporzioni del corpo umano indicano che la testa è circa 1/8 dell’altezza del corpo. Perciò possiamo disegnare 8 cerchi in fila alti come la testa. Dato che stiamo disegnando il corpo di una ragazza, i cerchi vanno un po’ schiacciati perchè la proporzione dell’altezza nelle ragazze cambia da 8 a 7,5 teste.
Come si nota dalla figura ora ogni cerchio ci indica la posizione di ogni altra parte del corpo, così gran parte del lavoro è già fatto.

Il tronco va modellato intorno ad un ovale che parte dalla base del collo fino all’ombelico, i fianchi seguono la linea curva del terzo cerchio.

Per disegnare le gambe tracciate quattro cerchietti, due in corrispondenza delle anche, tra il cavallo e l’ombelico, le altre all’altezza delle ginocchia. La distanza in orizzontale dev’essere all’incirca la stessa delle spalle. Le due linee che collegano i cerchi corrispondono pressappoco alla struttura ossea, che ci è d’aiuto per modellare le gambe.

Le braccia sono composte da due segmenti lunghi più o meno quanto la distanza tra la base del collo e l’ombelico, più le mani che sono lunghe quanto la distanza tra mento e attaccatura dei capelli.

Per qualsiasi altro riferimento potrete tranquillamente confrontare distanze e proporzioni direttamente sul vostro corpo.
Se invece volete approfondire l’argomento vi consiglio i libri di Burne Hogarth, che illustrano così bene i volumi e i movimenti del corpo umano che potrebbero essere scambiati per atlanti anatomici.

Sono partito da tre semplici ovali per creare la forma della testa e delle orecchie. Quindi ho utilizzato la palette “skintones” di Illustrator con cui ho creato dei gradienti per la pelle.

Gli occhi sono formato da semplici forme sovrapposte: una per le ciglia, una per la parte bianca, un cerchio per l’iride, un altro cerchio scuro per la pupilla ed infine un piccolo cerchio bianco semi trasparente per aggiungere un semplice riflesso.

Anche la bocca è formata da due semplici forme per il labbro superiore e inferiore. Ho aggiunto inoltre una leggera ombra sotto entrambe le labbra. Per il naso è sufficiente disegnare un piccolo triangolo.

Ciocca a ciocca ho disegnato i capelli.

Per le sopracciaglia ho tracciato un semicerchio a cui poi ho assegnato un pennello disegnato in precedenza. È sufficiente trascinare una qualsiasi forma sulla palette “brushes” per crearne uno.

Poi ho aggiunto le spalle e il décolletée, il resto del corpo lo disegneremo nel prossimo tutorial.

Poi ho aggiunto le ombre. Semplicemente ho duplicato le ciocche di capelli (command+c e command+b sono i comandi per “copia” e “incolla sotto” in Illustrator), le ho ruotate leggermente, riempite di nero e impostato la trasparenza al 10%.

Un tocco in più si può aggiungere con lo strumento “blend” di Illustrator, che, partendo da due linee, ne crea automaticamente una serie con forma e spessore intermedio tra la prima e la seconda, come nella figura qui sopra. Per impostare le preferenze dello strumento andate su “Object > Blend > Blend Options”.

Infine ho aggiunto un po’ di rosso nelle guance e le ombre del naso e degli occhi.

Ed ecco qui il risultato finale. Tempo totale: 30 minuti.

Come al solito prima di tutto ho fatto po’ di ricerca su Google e Flickr. La parte di documentazione è fondamentale per capire colori, forme, ambientazioni ed entrare nel giusto mood.

Quindi ho preso carta e matita e ho cominciato a fare qualche schizzo.

Prima di cominciare a tracciare i contorni è bene sapere che in Flash possiamo procedere in diversi modi:

• possiamo tracciare linee dritte con lo strumento “line”, per poi curvarle semplicemente con lo strumento selezione;
• oppure usiamo lo strumento “pen”, come in illustrator
• infine se avete una tavoletta grafica e una buona mano potete utilizzare direttamente lo strumento “brush” per disegnare riempimenti o “pencil” per le linee.

Tenendo come sfondo l’illustrazione fatta a matita ho iniziato a tracciare i contorni. La timeline di Flash può essere usata allo stesso modo dei livelli di Photoshop o Illustrator, è sempre una buona idea dividere i diversi elementi sui vari livelli per poterli poi trattare separatamente. Infatti a differenza di Illustrator Flash unisce automaticamente le forme che hanno lo stesso colore, a meno che non abbiate attivato l’opzione “Object Drawing”.

Prima di iniziare a colorare, è necessario sempre definire da dove viene la fonte di luce, in modo da avere una colorazione coerente in tutte le parti dell’illustrazione.

Con il secchiello ho riempito le forme con un gradiente, poi con lo strumento “Gradient transform” ho regolato l’aspetto del gradiente in modo da accordarsi con la fonte luminosa definita in precedenza.

Sempre con lo stesso metodo ho riempito tutte le forme che compongono l’ornitorinco.

Ho disegnato quindi delle forme lungo il fianco destro del corpo, del becco e della testa che sono state riempite con un gradiente con trasparenza per dare un effetto di illuminazione.

Ho disegnato allo stesso modo le ombre ed ho iniziato ad aggiungere qualche dettaglio come il riflesso negli occhi, le ombre che simulano la pelliccia sulla schiena e la membrana delle zampe palmate.
Per un effetto di maggiore tridimensionalità è bene aggiungere dei riflessi come di una seconda luce opposta alla prima.

A questo punto ho selezionato tutto, copiato e incollato tutto in un nuovo layer, al di sotto di tutti gli altri. Così facendo posso dare un bordo al contorno esterno dell’ornitorinco con lo strumento “ink bottle”.

Per terminare ho aggiunto un’ombra dietro la testa dell’ornitorinco. Per farla ho selezionato la forma della testa, copiata e incollata al di sotto della testa. Quindi l’ho convertita in MovieClip, dato che questo è l’unico modo per poter applicare effetti di blending, o altri effetti come il blur, drop shadow o glow.

Al MovieClip ho assegnato il blend “multiply” e un effetto di sfocatura.

Ed ecco qua. L’illustrazione è pronta per essere esportata per poterla gestire in Photoshop o Illustrator.
Alcuni esempi di come ho poi utilizzato questa immagine sono nella pagina del progetto Openasp.

Come si usa?
Cominciare ad utilizzare Nodebox è abbastanza semplice:
è sufficiente avere conoscenze base di programmazione e voglia di provare.
Nodebox si basa sul linguaggio di programmazione Python, un linguaggio semplice da usare e da imparare.
Inoltre nel sito sono presenti una notevole quantità di esempi pratici creati dalla community, perciò potete anche cominciare con dei copia-incolla per vedere cosa ne esce fuori.

Perchè usarlo?
Già, perchè usare Nodebox al posto di programmi professionali per grafica vettoriale come Illustator?
Un grande pregio di fare grafica scrivendo codice è innanzitutto l’utilizzo di variabili:
possiamo cambiare velocemente resa grafica o palette colori, oppure velocizzare operazioni che richiederebbero veramente troppo tempo farle a mano.
Mi è capitato di dover comporre una griglia di un migliaio di quadrati riempiti con immagini prese da una cartella, avrei potuto anche farlo pazientemente a mano, ma se poi il cliente volesse sostituire i quadrati con dei cerchi?
Oppure talvolta siamo poco ispirati, allora astrarre le immagini via codice può essere un buon metodo per fare velocemente delle prove, esplorare trattamenti sui tracciati o testare combinazioni di colori e semplicemente stare a guardare cosa ne esce.
Dato che l’output è vettoriale possiamo sempre salvare l’immagine come PDF ed importarla in Illustrator per continuare a lavorarla o integrarla nei nostri lavori.

Per saperne di più:

• Nodebox – sito ufficiale
• grafiche generate da Nodebox su Flickr

Cominciamo a vedere come creare una composizione di linee ondulate utilizzando una palette colori estrapolata da un’immagine.

web = ximport("web")
colors = ximport("colors")

per prima cosa importo le librerie di cui avrò bisogno:
web, che contiene una serie di strumenti in grado di recuperare dati da internet;
colors, che permette di editare e lavorare con i colori in modo estremamente semplice.

n = 20    #numero di elementi da cercare
r = random(n)    #immagine selezionata
q = "Red"    #parola da cercare in flickr
ncolors = 20    #tot colori da estrapolare
numlines = 250    #tot linee
delta = 8    #delta spostamento linee
s_width = 30    #larghezza tratto delle linee
numpoints = 6    #numero di punti nella linea

in questo punto sono specificati la maggior parte dei parametri che ci permetteranno poi di personalizzare l’output.

search = web.flickr.search(q, start=1, count=n, wait=10, cached=True, match=all)
img = search[r]
i = img.download("small")
print img.name, "by", img.author      #stampo il titolo e l'autore  dell'immagine
palette = colors.list(i, n=ncolors)      #estrapolo una palette colori dall'immagine

in questa parte eseguo la ricerca di immagini in flickr. Ho utilizzato la parola chiave specificata in precedenza, nel nostro caso “Red”, quindi eseguo il download ed estrapolo una palette colori dall’immagine.
Prendere colori da immagini è sempre un buon metodo per ottenere palette più accattivanti e accostamenti di colore inaspettati ed esaltanti.

bg = rect(0, 0, WIDTH, HEIGHT, draw=False)
c1 = palette.lightest
c1.a = 255
c2 = palette.darkest
c2.a = 255
colors.gradientpath(bg, color(c2), color(c1))

Comincio a disegnare lo sfondo con un gradient radiale, utilizzando il colore più scuro e il più chiaro della palette.

 points = []
 xpos = -20
 ypos = 0
 #linea guida
 for i in range(numpoints):
    p = (xpos, ypos)
    points.append(p)
    xpos += (WIDTH/numpoints)
    ypos += random(-delta, delta)
p = (WIDTH+20, 0)
points.append(p)

Quindi definisco una funzione che disegni la prima linea. Il punto di partenza e quello di arrivo sono posizionati, rispettivamente, in alto a sinistra e in alto a destra, entrambi fuori dallo stage. Gli altri punti intermedi li genero con un semplice random, che restituisce un numero in un range compreso tra -delta e +delta, variabile che avevamo definito all’inizio.

#linee derivate
colors.shadow(dx=0, dy=2, alpha=5, blur=8.0)
for h in range(numlines):
    newpoints = []
    for k in points:
        newxpos = k[0]
        newypos = k[1]+random(delta)
        newpoints.append((newxpos,newypos))
    autoclosepath(False)
    newpath = findpath(newpoints)
    nofill()
    c = choice(palette)
    c.a = 50 #alpha
    strokewidth(s_width)
    if random() > .9:
        strokewidth(s_width*2)
    stroke(c)
 
    drawpath(newpath)
    points = []
    for item in newpoints:
        points.append((item.x,item.y))

A partire dalla prima linea guida disegno le altre linee. Per ogni punto della linea principale aggiungo un valore random, sempre in base al parametro “delta”, in modo che ogni linea sia spostata verso il basso rispetto alla precedente.

modificando alcuni parametri è possibile ottenere risultati diversi ma tutti affascinanti:

Il codice è stato scritto abbastanza in fretta e può essere sicuramente ottimizzato. Puoi scaricare il file ed utilizzarlo o modificarlo liberamente.

Come prima cosa sono partito da alcune immagini di riferimento, studiando il tipo di tratti, i trattamenti e la composizione. Partendo da queste splendide immagini mi sono creato innanzitutto una palette colori, attraverso lo strumento “eyedropper“.

Ho selezionato una tra le molte immagini raccolte durante la mia ricerca e con lo strumento penna ho tracciato i contorni in modo da creare un tracciato pulito e lineare.

Gli oggetti principali, l’aereo e la montagna, hanno un contorno scuro. Per questi tratti ho creato un pennello ad hoc che potesse richiamare le pennellate tipiche della cultura visiva orientale. Per creare un pennello in Illustrator è sufficiente trascinare una qualsiasi forma sul pannello “brushes“, e selezionare “New Art Brush“.

Per creare l’effetto delle foglie degli alberi e cespugli ho utilizzato una combinazione degli strumenti “Warp“, “Crystallize” e “Wrinkle” partendo da semplici ovali.

Le zone bianche sono state riempite tramite la clipping mask (Object > Clipping Mask > Make) con immagini di pennellate di acquerello.

Infine ho sovrapposto all’immagine una texture di carta con blending “multiply”, per dare un’effetto “antico”, some se fosse una vecchia stampa su carta.