{"id":1337,"date":"2009-12-30T16:43:58","date_gmt":"2009-12-30T15:43:58","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=1337"},"modified":"2010-07-23T16:06:15","modified_gmt":"2010-07-23T14:06:15","slug":"g001-creiamo-le-icone-per-le-nostre-tabbar","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/g001-creiamo-le-icone-per-le-nostre-tabbar\/","title":{"rendered":"G#001 – Creiamo le icone per le nostre TabBar"},"content":{"rendered":"

\"\"<\/a> Con questo tutorial inauguriamo una nuova sezione di devAPP in cui troverete esempi pratici, pi\u00f9 o meno complessi, che vi forniranno una utile guida sugli aspetti grafici<\/strong> 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\u00e0 ricordare poche e semplici regole e rispettare dimensioni e formato indicati da Apple per i vostri file.<\/p>\n

Innanzitutto scegliamo il soggetto. Consiglio di non utilizzare elementi particolarmente complessi<\/strong> in quanto le immagini definitive saranno poi molto piccole, nonostante ci\u00f2 dovranno essere di immediata comprensione<\/em> e di facile associazione<\/em> e memorizzazione<\/em>.<\/p>\n

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

Pi\u00f9 riuscirete a centrare questi primi due obbiettivi, pi\u00f9 sar\u00e0 consolidato il terzo, ovvero la memorizzazione dell’icona. Quest’ultimo \u00e8 fondamentale in quanto render\u00e0 veloce e ottimale l’utilizzo ripetuto delle vostre applicazioni. L’utente sfrutter\u00e0 in questo modo l’impatto grafico, elaborato dal cervello umano molto pi\u00f9 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. <\/p>\n

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

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\u00e0 una notevole trasformazione:<\/p>\n

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

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:<\/p>\n


\n\"\"<\/a>
\n<\/center><\/p>\n

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


\n\"\"<\/a>
\n<\/center><\/p>\n

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 \u00e8 relativamente comprensibile, ma in altri casi potrebbe non esserlo per niente.<\/p>\n

La realizzazione ottimale, quindi, potrebbe essere la seguente:<\/p>\n

Fate in modo di realizzare la vostra immagine con le sole linee che la definiscono, tutto il resto trasformatelo in trasparenza.<\/strong> Ricordate che le parti in trasparenza saranno gli unici elementi che nn varieranno dopo l’importazione nella vostra app, ovver\u00f2 rimarr\u00e0 la trasparenza stessa. Anche lo sfondo, come indicato sopra, dovr\u00e0 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\u00e0 lo sfondo e i bordi della lampadina verranno lasciati trasparenti:<\/p>\n

<\/p>\n\n\n
\"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/table>\n

<\/center><\/p>\n

Ricordate inifine, anche se le dimensioni sono gi\u00e0 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\u00f9 pulita.<\/p>\n

Nota:<\/strong> 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.<\/p>\n

Aggiungiamo l’icona alla nostra applicazione<\/h4>\n

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\u00f9 in profondit\u00e0, fate riferimento all’immagine per comprendere meglio:<\/p>\n


\n\"\"<\/a>
\n<\/center><\/p>\n

Ora modificate la propriet\u00e0 “image” tra gli attributi dell’oggetto scegliendo, dalla casella combinata, il nome dell’immagine della vostra icona.<\/p>\n

Salvate, chiudete IB e tornate ad Xcode. Potete ora provate la vostra nuova icona sul simulatore o direttamente sul vostro iPhone.<\/p>\n

Ecco un esempio della nostra icona all’opera nelle varie versioni presentate:<\/p>\n


\n\"\"<\/a>
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"

Con questo tutorial inauguriamo una nuova sezione di devAPP in cui troverete esempi pratici, pi\u00f9 o meno…<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[70],"tags":[70,71,349,72,1,47],"class_list":["post-1337","post","type-post","status-publish","format-standard","hentry","category-grafica-e-design","tag-grafica-e-design","tag-icone","tag-ilona-mucelli","tag-tabbar","tag-tutorial-pratici","tag-uitabbar"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=1337"}],"version-history":[{"count":26,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1337\/revisions"}],"predecessor-version":[{"id":4091,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1337\/revisions\/4091"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=1337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=1337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=1337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}