Share
Alla maggior parte delle app mobili manca quel tocco in più di dettagli di design che potrebbe aiutarli a distinguersi dalla folla di App Store. Sebbene non vi sia alcun rimpiazzo per avere un designer talentuoso per lucidare i pixel della tua app per ore, lo scopo di questa serie è insegnare a chi ha un'esperienza limitata con Photoshop e un budget basso a zero come fare app che brillano!
Questa serie è rivolta allo sviluppatore che non ha il budget per assumere un designer professionista. Ti insegnerà come creare elementi accattivanti con una conoscenza e uno sforzo Photoshop molto limitati.
In questo post, ci concentreremo sulla modifica dei file PSD esistenti per ottenere il look che cerchi per la tua app.
Se sei un programmatore, hai mai letto il codice di qualcun altro per sapere come hanno portato a termine un determinato compito? Quasi tutti i programmatori lo fanno, e l'apprendimento del design non è diverso. Proprio come nel mondo dello sviluppo, ci sono molti siti Web pieni di PSD da cui puoi sperimentare e imparare. Alcuni di questi siti ti consentono persino di modificare i PSD e utilizzarli nel tuo lavoro. La parola chiave è alterare. Mentre molti dei PSD a cui mi riferisco potrebbero effettivamente essere copiati e utilizzati commercialmente senza modifiche, vorrei sconsigliarlo. Non imparerai in questo modo e non rilascerai un progetto che è veramente unico per la tua applicazione.
Come accennato, ci sono centinaia di siti che offrono PSD gratuiti. Tuttavia, se stai cercando di creare un progetto reale, il trucco è trovare i siti che ti permetteranno di riutilizzare quei PSD nel tuo lavoro. A meno che non stia semplicemente navigando per scopi didattici, di solito riesamina solo i siti che offrono sia un lavoro di alta qualità che termini di utilizzo flessibili. Di seguito sono elencati i miei cinque siti correlati a PSD preferiti:
Il punto qui è semplice: come sviluppatore, probabilmente non hai le competenze necessarie per creare applicazioni estremamente lucide da solo. Tuttavia, puoi rapidamente mettere a posto i disegni degli altri per creare la tua sensazione unica con pochissima conoscenza di Photoshop.
Usando la tecnica PSD "Mashup" discussa sopra, progetteremo una UINavigationBar personalizzata usando un PSD da www.pixelbeam.net. Stava andando a alterare diversi elementi nel PSD per creare la nostra sensazione unica.
Scarica qui il PSD e apri il file in Photoshop.
Creare un nuovo progetto che sia 640 x 88.
Ora usa il pulsante Disponi documenti per dividere lo schermo tra i due progetti.
Per questa parte del processo, assicurati di aver selezionato Selezione automatica livello. Ciò significa che Photoshop selezionerà automaticamente il livello dell'elemento su cui hai appena fatto clic. Questo aiuta quando si naviga attraverso PSD più grandi. È possibile accenderlo quando necessario durante questo progetto.
Usando lo strumento sposta, seleziona il proiettile attivo nella foto sopra. Noterai che Photoshop ha selezionato automaticamente quel livello.
Mentre sei ancora in modalità schermo diviso, trascina il livello del proiettile attivo sullo schermo di UINavigationBar. Noterai che i suoi stili layer e layer sono stati copiati nel tuo progetto UINavigationBar.
Ora fai doppio clic sulla miniatura Layer. Questo farà apparire il selettore di colori. Da qui puoi cambiare il colore del proiettile.
Copia il Bullet Color # 567200 e impostalo come colore di primo piano.
Usa lo strumento Secchiello per riempire il tuo progetto con il colore # 567200.
Fare clic con il tasto destro del mouse su Active Bullet Layer. Seleziona Copia stile livello.
Fai clic con il tasto destro sul livello UINavigationBar e seleziona Incolla stile livello.
Seleziona lo sfondo dell'area della diapositiva. Simile al punto 6, Photoshop selezionerà automaticamente il livello (deve essere selezionato il livello di selezione automatica). Ora sposta il livello sul tuo progetto UINavigationBar.
Passa il mouse sullo stile di livello "Sovrapposizione modello". Fare clic e trascinarlo sul livello UINavigationBar.
Assicurati che tutti i livelli tranne il tuo livello UINavigationBar siano invisibili.
Fare doppio clic sullo stile di sovrapposizione Pattern Overlay. Apparirà la casella di stile del livello Sovrapposizione modello. Portare l'opacità a 8.
Se desideri integrare una UINavigationBar personalizzata nel tuo progetto, puoi rivedere il codice di esempio in questo progetto github.
Prenditi del tempo per guardare attraverso il PSD. Ti renderai presto conto che un buon design è sia difficile che richiede tempo. Allo stesso tempo, vale la pena lavorare duramente per l'estetica finale raggiunta. Se hai il budget per un grande designer, ti raccomando caldamente di trovarne e noleggiarne uno. Se non hai il budget, Mashup i tuoi elementi di design utilizzando diversi PSD. Raccomando anche di studiare disegni trovati su siti come Creattica Mobile, Pattrns e Beautiful Pixels.
Spero che questo tutorial sia utile. Se crei qualcosa di fantastico, twittalo a @williamherring.
*L'immagine di anteprima per questo post è stata creata modificando il Leatherly - One Page Template che può essere trovato qui. UINavigationBar è stato creato modificando il file Semplice cursore scuro tema che può essere trovato qui.
Accentsconagua