L’applicazione per iPad nasce da una collaborazione fra ToDo e Vallardi Editore e, a pochi giorni dal lancio, ha già riscosso un grande successo con oltre 5.000 download in una settimana e la segnalazione tra le “Nuove e degne di nota” negli store USA e Canada. Il mio ruolo all’interno di ToDo è stato quello di progettare e realizzare l’interfaccia grafica, curare l’interazione e coordinare il progetto.
.

Le illustrazioni realizzate per la splash page e gli elementi grafici della parte introduttiva sono stati anche trasformati in sfondi sia desktop che iPad e si possono scaricare dal sito www.chinagram.info.
Seguite @ChinagramApp su Twitter per non perdere promo e novità.

[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
.

Making some illustrations for a new iPad application.
UPDATE: We have published the full video “Chinagram – Behind the scenes” and a mini tutorial.

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*/
}

Flickr photogallery