Share
In questo breve tutorial, creeremo una piccola icona elegante per iPhone per l'applicazione "Bankapp" che ha fatto parte di un'esercitazione di progettazione dell'interfaccia utente pubblicata di recente qui su Mobiletuts+.
Progetteremo la nostra icona pronta per il display Retina di iPhone 4, che richiede di progettare l'icona a una risoluzione molto più elevata di 114x114 pixel con 320 dpi (punti per pollice). Questo farà apparire l'icona cristallina sul display retina. Questa icona è in genere quella che verrà visualizzata sulla schermata principale di un iPhone. Ci sono, tuttavia, altre icone a cui devi pensare (anche se non le tratteremo in questo suggerimento rapido) come l'icona che vedi in iTunes (che può essere molto più grande se vista in copertina) e icone più piccole come quelli sul tuo iPhone quando cerchi.
Apri Photoshop e vai su Start> Nuovo e crea il tuo file. Puoi vedere la mia configurazione qui sotto.
Ovviamente vogliamo mantenere la stessa combinazione di colori di ciò che è stato utilizzato nell'esercitazione originale dell'interfaccia utente, quindi i colori verdi vanno da # 7DA000 a # 9CCB01. Apri la finestra Opzioni di fusione per il livello di sfondo preesistente in Photoshop facendo clic con il pulsante destro del mouse sul livello e selezionando Opzioni di fusione. Applica un gradiente al tuo livello usando i codici HEX che ho appena menzionato.
Crea un nuovo livello e riempilo di bianco puro. Vai a Filtro> Disturbo> Aggiungi disturbo e aggiungi circa il 25% di rumore. Cambia la modalità di fusione dei livelli in Moltiplica e abbassa l'opacità del livello in un punto intorno al segno del 20%.
Crea un nuovo livello e chiamalo "In evidenza". Seleziona un pennello morbido con una dimensione di circa 65px e disegna una piccola area di linee bianche sulla tua icona.
Vai a Filtro> Sfocatura> Sfocatura gaussiana e sfoca la tua forma bianca di circa il 25%.
Cambia la modalità di fusione dei livelli in Luce soffusa e abbassa l'opacità a circa il 20%.
Ripeti lo stesso processo ma con un pennello nero nella parte inferiore dell'icona.
Affinché la nostra icona rappresenti la nostra applicazione "Bankapp", utilizzeremo semplicemente le lettere "Ba", che rappresentano "banca" e "app". Seleziona lo strumento di testo e fai una selezione sulla tua icona. Digitare "Ba". Ho usato un bel carattere chiamato Blue Highway.
Fai clic con il pulsante destro del mouse sul livello di testo e seleziona Opzioni di fusione. Applicare un'ombra esterna al testo utilizzando le impostazioni trovate nella seguente schermata. Ciò applicherà un'ombra acuta ma sottile.
Seleziona lo strumento Rettangolo arrotondato. Imposta il raggio degli angoli su 20px, quindi, mentre tieni premuto il tasto Maiusc, trascina la forma. Allinearlo al centro della tela e posizionarlo sotto il livello del testo.
Fai clic con il tasto destro del mouse sul livello e seleziona Rasterizza livello. Fare nuovamente clic con il tasto destro del mouse e selezionare Opzioni di fusione. Applicare un Sovrapposizione sfumatura che va da # 475E00 a # 688500.
Applica un'ombra interiore (per far sembrare che la forma sia incisa) e un'ombra esterna (per dare alla parte inferiore della nostra forma una bella linea bianca a pixel singolo) utilizzando le impostazioni visualizzate negli screenshot qui sotto.
Duplica il livello. Fare clic con il tasto destro e selezionare Cancella stili layer. Riempi il livello con il bianco, quindi vai a Filtro> Disturbo> Aggiungi disturbo. Aggiungi circa il 25%.
Cambia la modalità di fusione dei livelli in Moltiplica e abbassa l'opacità a circa il 25%.
Riduci l'opacità dei livelli di testo fino a circa il 90%. Questo non fa una grande differenza, ma lascia solo trasparire quel piccolo frammento di rumore.
Seleziona lo strumento Selezione ellittica. Trascina una selezione e riempila di bianco su un nuovo livello.
Vai a Filtro> Sfocatura> Sfocatura gaussiana e sfoca la tua forma bianca. Cambia la modalità di fusione in Sovrapposizione. Con quello, abbiamo finito! Ci si potrebbe chiedere perché la nostra icona non ha angoli arrotondati, perché l'iPhone lo fa per noi. Ecco il nostro risultato finale:
Accentsconagua