Nei siti web e nei moderni SmartPhone sono ormai sempre più presenti, ci aiutano a rendere facile l’utilizzo degli strumenti web ed aggiungono interattività alle piattaforme: stiamo parlando delle cosiddette app.
Le icone che le contraddistinguono sono il primo elemento su cui cade il nostro occhio, di conseguenza è bene che siano uniche ed immediate pur essendo realizzate sfruttano un numero di pixel ridotto. Ci sono icone di tutti i tipi e per tutti i gusti; le più famose sono quelle create da Apple, la quale ha fatto scuola a tutti i webdesigner che cercano di sfornarne sempre di più belle, sofisticate e curate nell’aspetto grafico. Come in ogni progetto web anche nella realizzazione di un’icona per un’applicazione ci sono delle regole da seguire:
- Le dimensioni delle icone variano a seconda del tipo di cellulare o pc, pertanto il webdesigner deve tenere presente tutti i possibili formati, così da rispondere efficacemente a qualsiasi richiesta. (vedi tabella);
- Angoli Arrotondati;
- Effetto lucido;
- Ombra per dare profondità e rilievo all’icona;
- Effetto riflesso per dare una collocazione spazio sui display dei nostri apparecchi tecnologici.
Tabella dei riferimenti standard per le dimensioni in pixel delle APP
Alcuni esempi di icone realizzate da Apple
Realizzare un’icona con Photoshop non è poi così difficile. Volutamente non ho preso come riferimento quelle già viste sul web; ho voluto bensì creare in pochi passaggi una nuova Icona ispirata a WebHouse.
Prima di tutto apriamo il nostro programma Photoshop, creiamo un nuovo documento selezionando dal menu File la voce “Nuovo” e scegliamo le dimensioni base per le APP come da figura (tavola1). 57x 57 pixel, a 72 dpi (dot per inch – punti per pollice) ed in RGB (Red Green Blue) e sfondo trasparente. (tavola1)
Tavola1
Creato il nuovo documento aiutiamoci con delle linee guida e, attraverso il controllo calamita, posizioniamo al centro in senso orizzontale e verticale (tavola2). (per comodità di tutorial ho aumentato lo zoom dei pixel della tavola principale)
Tavola 2
Ora iniziamo a creare la forma base della nostra icona scegliendo dalla barra principale del programma lo strumento rettangolo arrotondato e tenendo premuto il tasto CTRL (cmd) e il tasto sinistro del mouse creiamo la forma (tavola3) che di default Photoshop realizzerà in bianco.
Tavola 3
Una volta creata la forma base dobbiamo dargli un colore di riempimento e profondità. Dalla palette livelli selezioniamo la forma e con il tasto destro del mouse apriamo la voce “opzioni di fusione”; ci verrà mostrata una tabella nella quale possiamo scegliere fra tanti effetti. Nel nostro caso selezioniamo prima la sovrapposizione sfumatura e, cliccando sulla voce stessa, ci verrà data la possibilità di scegliere fra le gradazioni di colore. Io ho scelto i parametri dal nero pieno al grigio 220-220-220, opacità 100% ed angolo 90°, mentre il resto lo lasciamo inalterato. Per modificare uno dei colori della gamma RGB non dovete fare altro che cliccare nella striscia sfumatura e poi sul contagocce (Tavola4).
Tavola 4
Per l’effetto profondità invece procediamo alla stessa maniera del primo effetto ma selezionando stavolta ombra esterna dalla tavola principale e selezionandola diamo i seguenti parametri: opacità al 75%, angolo 90°, distanza 2, estensione 0, dimensione 1 e metodo di fusione moltiplica (Tavola 5). Una volta applicati i due effetti selezioniamo ok e procediamo. Ricordatevi che con Photoshop potrete in qualsiasi momento modificare il singolo effetto o eliminarlo. Basterà farlo attraverso la palette livelli, selezionando l’effetto da modificare, eliminandolo o nascondendolo con l’icona dell’occhio invisibile.
Tavola5
Adesso che abbiamo realizzato la base principale della nostra icona, essa deve avere un riempimento non troppo statico; ecco perché è consigliabile creare dei piccoli effetti luce ed ombra per dare un design moderno ed accattivante. Per fare ciò creiamo un nuovo livello e selezioniamo stavolta dalla barra destra del programma lo strumento pennello (con il tasto destro del mouse è possibile selezionare vari tipi di pennelli). In questo caso scegliamolo con una durezza dello 0% e un diametro tra il 50-60 px. Definiti i parametri del pennello selezioniamo dalla palette dei colori un grigio chiaro e posizioniamoci al centro dell’icona creata in precedenza. Con un semplice clic noteremo come il nostro pennello modificherà l’APP rendendola più originale (tavola6)
Tavola6
Una delle caratteristiche grafiche principali delle APP è l’effetto lucido. Per crearlo non dobbiamo fare altro che applicare un altro livello e, selezionando lo strumento selezione ellittica, andremo ad applicare la forma solo nella parte superiore. Per non creare sbavature all’icona sottostante dobbiamo tenendo premuto il tasto CTRL solo sulla forma principale bianca e selezioniamo successivamente il livello2 (come da tavola7). Quando usiamo lo strumento noteremo una forma tratteggiata e che di default non sarà mai riempita; tocca a noi a decidere l’effetto da applicare. Nel nostro caso per l’effetto soft ho selezionato lo strumento sfumatura e dal suo editor scegliamo i parametri dal bianco al trasparente. Sempre nel livello2 tiriamo una linea invisibile dal basso verso l’alto ed ecco ottenuto l’effetto come da tavola7.
Tavola7
La nostra icona è quasi pronta. Manca solo un ultimo passaggio. L’icona si dovrà distinguere fra le tante create per i dispositivi portatili e nel caso di WebHouse ho deciso di utilizzare la grafica che caratterizza il logo e quindi facilmente distinguibile nelle piccole dimensioni.
Prepariamoci quindi in un altro documento il logo con sfondo trasparente e copiamolo nel documento principale su un nuovo livello. (tavola 8 )
Tavola8
Una volta trasportato il logo applicheremo l’effetto rilievo con lo stesso sistema della base principale. A voi la scelta dei parametri da adottare, ma non esagerate con questo effetto altrimenti rischiereste di creare un pasticcio. Ricordate sempre che nelle icone le cose più importanti sono la semplicità e la chiarezza. (tavola 9)
Tavola 9
Ecco come si presenta la nostra icona finita !!! Per renderla correttamente utilizzabile nel mondo web non ci resta che salvare l’icona nel formato PNG. Per farlo andiamo su File – Salva e scegliamo il giusto formato, così facendo Photoshop manterrà il fondo trasparente e sarà così gestibile in tutti i dispositivi. (tavola 10)
Tavola 10
Vogliamo rendere la nostra icona ancora più completa?
Non ci resta allora che dare un ultimo tocco grafico con l’effetto riflesso dando la giusta collocazione nello spazio del display del dispositivo o nel sito web. Per creare questo effetto apriamo un nuovo documento sempre con sfondo trasparente e di dimensioni 57x 120px e procediamo con questi tre semplici passaggi:
- Nel livello 1 applichiamo l’icona precedentemente creata in .png.
- Creiamo un nuovo livello, duplichiamo l’icona e successivamente riflettiamo l’immagine attraverso il comando modifica – trasforma – rifletti verticale. In questa maniera la seconda icona verrà ribaltata come nella tavola 11 -1°figura
- Sul livello dell’icona riflessa applichiamo una maschera di livello (nella palette livelli è la terza l’icona in basso); noteremo subito che ci comparirà nel livello dell’oggetto riflesso un rettangolo bianco. A questo punto non ci resta che tirare una linea sempre con lo strumento sfumatura dal basso verso l’alto ed il gioco è fatto. Per mantenere una sfumatura correttamente in linea verticale vi consiglio di tenere premuto contemporaneamente il tasto Shift ed il mouse. (tavola 11- 2°figura)
Tavola 11
La nostra icona di WebHouse è davvero pronta per essere utilizzata in tutte le moderne tecnologie. Non ci resta che salvare nuovamente il documento in formato .png per mantenere il tutto con sfondo trasparente.
Questo è soltanto un piccolo esempio di ciò che potrete realizzare con Photoshop; sta a voi adesso continuare ad esercitarvi, dare sfogo alla vostra creatività anche in dimensioni così piccole. Le icone sono infinite nel mondo web, così come sono infinite le sfumature di colore e i dettagli da inserire in esse. Cosa aspettate a farne una tutta vostra?
