Con questo tutorial inauguriamo una nuova sezione di devAPP in cui troverete esempi pratici, più o meno complessi, che vi forniranno una utile guida sugli aspetti grafici delle vostre applicazioni. Non fate l’errore di non dare la giusta importanza anche al lato estetico nella progettazione delle vostre creazioni. Un aspetto professionale studiato appositamente per il vostro programma, infatti, potrebbe rivelarsi decisivo per il raggiungimento dei vostri obiettivi. Oggi vi spieghiamo come creare icone personalizzate da usare per le vostre TabBar. Nulla di complesso quindi, basterà ricordare poche e semplici regole e rispettare dimensioni e formato indicati da Apple per i vostri file.

Innanzitutto scegliamo il soggetto. Consiglio di non utilizzare elementi particolarmente complessi in quanto le immagini definitive saranno poi molto piccole, nonostante ciò dovranno essere di immediata comprensione e di facile associazione e memorizzazione.

Immediata comprensione in quanto si dovrà capire fin da subito cosa conterrà la sezione che si andrà ad aprire cliccando sull’icona. Ovviamente le varie icone del vostro programma si dovranno ben distinguere le une dalle altre.

Più riuscirete a centrare questi primi due obbiettivi, più sarà consolidato il terzo, ovvero la memorizzazione dell’icona. Quest’ultimo è fondamentale in quanto renderà veloce e ottimale l’utilizzo ripetuto delle vostre applicazioni. L’utente sfrutterà in questo modo l’impatto grafico, elaborato dal cervello umano molto più velocemente rispetto a quanto accade con un testo, breve o lungo che sia, in modo tale che possa intuire come accedere alla sezione desiderata in pochi attimi.

Sarà compito del/dei grafici del vostro team quindi, spesso coincidente nello stesso programmatore, trasmettere le giuste informazioni all’utente finale tramite lo studio grafico.

Passiamo al lato pratico del tutorial. Scelto il soggetto dovrete semplicemente ricordare che l’immagine, nel momento in cui viene importata e configurata nel vostro programma, subirà una notevole trasformazione:

diventerà piatta, “monocromatica” e con un effetto preimpostato in automatico e identico per ogni applicazione. Di conseguenza, se ciò che delineava i particolari distintivi dell’immagine prima della sua implementazione erano ad esempio i colori, mantenerli e ragionare su questo fattore risulterà completamente inutile in quanto l’icona diventerà una “massa” grigia poco (o per niente) definita.

Prendiamo ad esempio come soggetto per il nostro tutorial una lampadina. Potete usare una vostra foto, un’illustrazione o quello che meglio credete come punto di partenza. Supponiamo di partire dall’immagine seguente:

Se voleste utilizzare proprio questa immagine, non dovreste far altro che ridimensionarla nelle dimensioni corrette, 30×30 pixel, salvarla in formato .PNG e rendere lo sfondo trasparente. Nonostante questo, il risultato ottenuto potrebbe non essere quello desiderato, in quanto l’immagine che verrebbe considerata sarebbe questa:

Come vedete i colori originali non verrebbero considerati e quello che otterremmo non sarebbe nient’altro che la forma della lampadina piena. In questo caso il risultato finale è relativamente comprensibile, ma in altri casi potrebbe non esserlo per niente.

La realizzazione ottimale, quindi, potrebbe essere la seguente:

Fate in modo di realizzare la vostra immagine con le sole linee che la definiscono, tutto il resto trasformatelo in trasparenza. Ricordate che le parti in trasparenza saranno gli unici elementi che nn varieranno dopo l’importazione nella vostra app, ovverò rimarrà la trasparenza stessa. Anche lo sfondo, come indicato sopra, dovrà essere trasparente, sempre che non vogliate giocare con questi parametri per ottenere un effetto particolare, ad esempio di basso rilievo, dove nel risultato finale emergerà lo sfondo e i bordi della lampadina verranno lasciati trasparenti:

Ricordate inifine, anche se le dimensioni sono già minime (30×30 pixel), di lasciare ad ognuna un minimo margine, di modo che, se verranno messe l’una accano all’altra, le immagini si distanzieranno e renderanno la visione più pulita.

Nota: nelle immagini di questo tutorial, le parti che vedete in bianco (tranne l’interno della lampadina della prima immagine) rappresentano la trasparenza. Potete quindi lavorare con 2 soli colori, ad esempio il nero per definire l’immagine e la trasparenza per tutto il resto.

Aggiungiamo l’icona alla nostra applicazione

Per l’implementare l’icona nel vostro programma importate prima di tutto le immagini trascinandole dentro “Resource” (o dove meglio credete) in Xcode (ricordate di copiare i file nel progetto tramite l’apposito segno di spunta), aprite quindi il file XIB contentente la TabBar, selezionate tramite 2 click (non doppio click veloce) l’icona come indicato in figura, attenzione, non dovete selezionare l’intero oggetto “TabBar Item”, la selezione deve essere più in profondità, fate riferimento all’immagine per comprendere meglio:

Ora modificate la proprietà “image” tra gli attributi dell’oggetto scegliendo, dalla casella combinata, il nome dell’immagine della vostra icona.

Salvate, chiudete IB e tornate ad Xcode. Potete ora provate la vostra nuova icona sul simulatore o direttamente sul vostro iPhone.

Ecco un esempio della nostra icona all’opera nelle varie versioni presentate: