Non è un segreto che l’introduzione dell’App
Store, nell’ormai lontano luglio del 2008, ha radicalmente cambiato non solo
Apple ma l’intero modo di utilizzare un device portatile (e non). In un
brevissimo lasso di tempo, l’App Store è diventato un universo a sé stante,
capace di influenzare in maniera profonda i settori più disparati e il modo in
cui ci informiamo, giochiamo o lavoriamo.
Una rivoluzione non solo per gli utenti
finali, ma anche per tutti gli addetti ai lavori. Apple, con il suo ecosistema,
ha spalancato le porte a decine di nuove figure professionali, dal settore
marketing a quello creativo, rinnovando e trasformando quelle già esistenti. A
livello visivo, intanto, si è affermata la tendenza a creare interfacce e icone
rifinite nei minimi dettagli, arricchite di elementi realistici (acciaio,
cuciture o pelle lavorata, ad esempio).
Il modello di business proposto da Apple ha
portato all’affermazione di una vera e propria cifra stilistica che ogni giorno
viene arricchita da una comunità di designer o semplici appassionati che
mescolano creatività e funzionalità al servizio di quella che alcuni
definiscono solo una moda passeggera.
In realtà è un segno distintivo di quella
filosofia ereditata proprio dalla Mela, dove la cura per i particolari è
fondamentale, persino per una singola icona formata da una manciata di pixel.
È incredibile, infatti, quanta ricerca e
dedizione ruotino attorno a quel quadrato con gli angoli arrotondati che ha
l’arduo compito di comunicare in modo sintetico e accattivante le funzionalità
e i vantaggi dell’applicazione a cui è stato associato. Nelle pagine seguenti,
quindi, proveremo a cimentarci con la progettazione di un’icona per un’App per
iOS proprio come se questa dovesse essere pronta per il debutto su App Store,
condensando osservazione, sperimentazione e qualche trucchetto di Adobe
Photoshop.
Al lavoro
Le icone su iOS seguono delle linee guida
molto rigide. A questo proposito, come primo passo conviene scaricare una delle
tante griglie che troviamo a disposizione sul web. Queste ci permetteranno di
concentrarci sulla parte creativa, senza l’angoscia di uscire fuori dai binari
concepiti da Apple.
Un template efficace è quello ideato dal
designer danese Michael Flarup. Attraverso l’utilizzo degli oggetti avanzati di
Photoshop è possibile renderizzare esattamente la nostra icona nelle grandezze
tipiche dei vari dispositivi iOS e dei diversi contesti in cui l’icona stessa
viene visualizzata. Il template è scaricabile gratuitamente da: http://appicontemplate.com/.
All’interno troveremo un file PSD: una volta aperto il documento in Adobe
Photoshop potremo finalmente cominciare le danze!
All’interno del file troveremo la “base”
sulla quale creare la nostra icona, adattata in serie alle diverse risoluzioni
e presentata, attraverso dei mock-up, all’interno di vari ambienti dove sarà
possibile incontrarla: l’App Store o la Home Screen di un iPhone. Come possiamo
notare fin da subito, la base è un oggetto avanzato. Questo elemento di
Photoshop ci verrà in aiuto nel momento in cui dovremo adattare il nostro
lavoro a diverse dimensioni; il programma, infatti, moltiplicherà
automaticamente ogni modifica fatta all’oggetto avanzato: possiamo, quindi, già
intuire il grande vantaggio di lavorare all’interno di esso.
Dal pannello Livelli di Photoshop, raggiungiamo il livello denominato (comodo!) “EDIT THIS SMART OBJECT”.
Facendo doppio clic su di esso, entriamo in quello che sarà il nostro vero e
proprio piano di lavoro .
Salvando in qualsiasi momento il file (a cui Photoshop assegna l’estensione
.psb), le modifiche si riverseranno su ogni singolo “clone”.
I primi passi
Esaminando il contenuto del file .psb potremo
notare la presenza di svariati sfondi con delle texture predefinite.
Nascondiamo tutti i livelli mediante l’icona a forma di occhio dal pannello
Livelli per metterci in condizione di creare la nostra icona.
Il primo passo è creare un rettangolo con
angoli arrotondati. Attraverso lo strumento forma (il tasto per la scorciatoia
da tastiera è la lettera U) selezioniamo lo Strumento Rettangolo arrotondato e, nella finestra Opzioni
in alto, modifichiamo il campo Raggio portando il valore a “170 px”. Possiamo seguire la
forma che ci suggerisce il livello nascosto “HIDE ME WHEN DONE”: ancora una volta, il template ci viene in
aiuto.
Senza curarci molto del colore di riempimento
selezionato, trasciniamo il rettangolo attraverso il riquadro di lavoro grazie
al cursore posizionato in uno degli angoli superiori. Teniamo presente che non
dovrà arrivare allo spigolo opposto ma terminare più in alto, in virtù
dell’effetto tridimensionale che ci accingiamo a creare. Il passo successivo,
infatti, sarà quello di copiare il livello appena creato e trascinarlo sulla
parte bassa del riquadro.
Gli stili livello
Abbiamo ora pronte le due figure geometriche
alle quali dovremo applicare qualche “effetto speciale”. Facendo doppio clic sul livello corrispondente
di ogni figura, apparirà la finestra relativa agli stili livello: quest’ultima è,
e sarà sempre, la nostra miglior alleata per quanto riguarda la creazione di
icone o interfacce in Photoshop.
Cominciamo dalla figura superiore: apriamo la
finestra Stile livello e al suo
interno, tra le varie opzioni presenti, attiviamo Sovrapposizione sfumatura e Traccia.
Nel primo caso, portiamo il valore Scala
al 70% mantenendo tutti gli altri valori come predefiniti. Facendo clic sul
campo Sfumatura potremo editarne i colori attraverso l’Editore sfumatura.
Come suggerito dalla figura, impostiamo tre interruzioni di colore facendo clic
subito sotto la barra di anteprima della sfumatura. I tre colori saranno
(rispettivamente da sinistra verso destra): #ffffff, #c8ccd3, #e7e8ea. Confermiamo
questa sfumatura per tornare alla finestra Stile livello e, come
anticipato prima, attiviamo anche l’opzione Traccia, impostando la
dimensione a 8 pixel, Posizione “Interno” e Colore bianco.
Passiamo alla figura inferiore (che Photoshop
ha poco elegantemente nominato “Rettangolo
arrotondato 1 copia”) ed entriamo nella solita finestra dello Stile livello. In Sovrapposizione
sfumatura, cambiamo lo Stile della
sfumatura da “Lineare” a “Riflesso” e l’Angolo da 90° a 0°. Per quanto
riguarda i colori, seguendo la disposizione come in , impostiamo, da sinistra verso destra, le seguenti
interruzioni di colore: #6c7886, #d8dfe7, #9ea3a9, #eaecef, #697184, #dee1e8. Grazie allo stile, definito in precedenza, la sfumatura
verrà riflessa orizzontalmente donando all’oggetto una natura “metallica”.
Dal pannello apposito, possiamo rinominare e
spostare i livelli per mantenere ordinata l’area di lavoro. Dopo aver chiamato
il livello superiore “base” e
quello inferiore “bordo”, possiamo dedicarci alla
parte successiva del nostro tutorial.
Livelli sovrapposti
Riprendiamo lo strumento forma (Strumento Rettangolo arrotondato) per
creare un nuovo rettangolo con gli angoli arrotondati. Questa volta impostiamo
il Raggio a 130 pixel,
dal momento che questa nuova forma dovrà essere la parte “incavata” dell’icona.
Trasciniamo il cursore per creare una forma
che sia, in altezza e larghezza, perfettamente uguale a quella del livello “base”. Ricordiamo che questo livello
deve essere posizionato al di sopra di tutti gli altri e che possiamo, almeno
temporaneamente, utilizzare un colore di riempimento per comprendere meglio le
modifiche che ci apprestiamo a fare.
Dal menu Modifica (avendo cura di
controllare se la forma appena creata è ancora selezionata) navighiamo fino
alla voce Trasforma tracciato per selezionare l’opzione Scala (comando Modifica > Trasforma
tracciato > Scala).
Nella finestra Opzioni di Photoshop
appariranno i campi per trasformare l’aspetto della forma.
Tralasciando i primi due campi, che si
riferiscono alla posizione della forma sul piano, prepariamoci a modificare i
valori di Larghezza (L) e Altezza (A), non prima
di aver attivato il mantenimento delle proporzioni cliccando sull’icona a forma
di catena.
Come possiamo intuire, la grandezza è
riferita a un valore relativo pari a 100%. Per rimpicciolire la forma non
dobbiamo fare altro che portarla a 80%.
Duplichiamo questo livello per ben tre volte
con il comando Duplica livello dal
menu contestuale del livello; dopodiché, spostiamo la copia più avanzata verso il basso di
circa 40 pixel utilizzando
le frecce direzionali della tastiera. Successivamente, mantenendo selezionata
la copia appena spostata insieme a quella immediatamente inferiore, esploriamo
il menu Livello fino alla voce Combina forme. Grazie al comando Sottrai
forma anteriore del sottomenu della
voce Livello > Combina forme otterremo una forma che chiameremo
(sempre nel pannello livelli) “bordo
interno”. La terza copia possiamo rinominarla “base interna”.
Al bordo interno dovremo applicare lo stesso
stile del bordo esterno. Per fare ciò, sempre dal pannello livelli, facciamo
clic con il tasto destro sul livello “bordo”
e, dal menu a comparsa, copiamo lo stile del livello con il comando Copia
stile livello. Selezioniamo di nuovo il livello corrispondente al bordo
interno per incollarlo (con la stessa procedura, comando Incolla stile livello) e applicare anche a quest’ultimo la
sfumatura che avevamo creato precedentemente.
Pattern personalizzati
Concentriamoci ora sulla parte interna
dell’icona. Per fare questo, dovremo mettere in stand-by il documento corrente
e crearne uno nuovo (File > Nuovo,
scorciatoia di tastiera Comando+N).
Questo documento dovrà essere un quadrato di 16 pixel per lato con risoluzione
a 72 DPI.
Otterremo un documento minuscolo che utilizzeremo come pattern ripetuto.
Zoomiamo al massimo fino a distinguere i singoli pixel, dopodiché, dalla finestra
degli strumenti, selezioniamo lo Strumento
Matita e, come illustrato
nella figura, disegniamo 4 rettangoli di dimensione 8×2 in alto a sinistra e in
basso a destra fino a creare una sorta di scacchiera (figura 21).
I colori di riferimento sono, rispettivamente
dall’alto verso il basso: #2f2f2f, #424242, #575757, #6c6c6c.
I due quadrati rimasti bianchi li andremo a
riempire con il colore #353535.
Successivamente, selezioniamo il comando Definisci pattern dal menu Modifica; apparirà una finestra che ci
chiederà come nominare questo “tassello”. Possiamo salvarlo come “Carbon pattern”.
In questo modo, Photoshop salverà il
documento nella propria libreria di pattern, in modo tale che potremo
servircene in qualsiasi altro lavoro. Senza il bisogno di salvare il documento,
infatti, ritorniamo al nostro file .psb e, aprendo la finestra Stile livello della base interna,
spuntiamo le opzioni Sovrapposizione pattern, Sovrapposizione sfumatura e
Ombra interna.
Nel primo pannello, dal campo Pattern
scegliamo il tassello appena creato dalla libreria che apparirà. Per tutte le altre
opzioni andranno mantenute quelle di default. Per quanto riguarda la sfumatura,
selezioniamo il Metodo fusione “Moltiplica” e un’Opacità al 60%.
Infine, per l’ombra interna, scegliamo il Metodo
fusione “Normale” portando Distanza e Dimensione rispettivamente a 60 e 130. Aumentiamo anche l’Opacità al 100% e vedremo come la
nostra icona stia prendendo sembianze molto simili a quelle definitive.
__________________________________________________
800×600
Normal
0
14
false
false
false
IT
X-NONE
X-NONE
MicrosoftInternetExplorer4
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabella normale”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”,”serif”;}
Continua la lettura su Applicando
Magazine
Clicca qui per scaricare l’applicazione gratuita Applicando+
Puoi acquistare la rivista e leggerla e conservarla sul tuo iPad.
Buona Lettura con Applicando.
