Share
Prima di tutto, puntelli a Dan Wiersema (il mio amico e direttore creativo di Guifx) per essere il cervello dietro a questo tutorial. Concept e wireframe sono stati entrambi sviluppati da lui. Mi ha anche aiutato a appianare le pieghe in termini di valutazione del mio lavoro dall'inizio alla fine.
In questo tutorial creeremo un'interfaccia del menu principale per un gioco di finzione per iPhone. Esamineremo Photoshop per visualizzare con precisione le dimensioni dello schermo di destinazione, impostando una cornice per il progetto, creando uno sfondo, creando un logo, creando una struttura rocciosa per la barra laterale e una trama di legno per i box e i pulsanti salvati. . Aggiungiamo anche la creazione di verde per i dettagli e buona misura. Questo sarà lungo, quindi la pazienza è una virtù. Inoltre, il caffè aiuta!
Dai un'occhiata all'immagine che creeremo.
Dirigiti verso pxcalc.com e segui le istruzioni. In questo modo potrai visualizzare il design nella sua dimensione finale - Le dimensioni reali dello schermo effettivo dell'iPhone - sul tuo computer.
Crea un nuovo documento con una larghezza di 480 px di 320 px di altezza, con una risoluzione di 164,83 pixel / pollice. Imposta la modalità colore su RGB 8 bit.
Raccomando di creare un wireframe per il tuo progetto come quello nell'immagine qui sotto. Il modo migliore per farlo è fare clic destro con lo strumento Zoom selezionato e scegliere la dimensione di stampa. Se hai seguito il passaggio 1, ora guarderai il tuo documento esattamente alle dimensioni che l'utente finale avrà sul suo iPhone. Questo ti aiuta a determinare quanto dovrebbero essere grandi i pulsanti per lavorare a sufficienza su un dispositivo touch screen. Nota: prova a fare clic fisicamente sullo schermo e ricorda di prendere in considerazione le dita spesse.
Usa lo strumento Rettangolo e trascina le guide di posizionamento approssimative per i vari elementi. Mantieni il colore delle forme bianco e aggiungi un tratto interno nero di 1 pixel. È anche una buona idea prendere in giro il concetto usando carta e matita. Anche se non sei un bravo artista a mano libera (non lo sono, ma lo faccio ancora), gli schizzi di tovaglioli ti aiutano a tenere gli occhi sul premio!
Crea un nuovo livello e chiamalo "Sfondo". Imposta il colore di primo piano con # 5e1114 e lo sfondo con # 140306. Seleziona lo strumento sfumatura e, con le impostazioni illustrate in basso, trascina dall'alto verso il basso come indica la freccia.
Per il livello "Sfondo", applica i seguenti stili di livello.
Ripristina i colori di primo piano e di sfondo in nero e fai clic sul tasto D sulla tastiera. Crea un nuovo livello e chiamalo "bg_clouds". Ora vai su Filtro> Rendering> Nuvole. Imposta la modalità di fusione di questo livello su Sovrapponi. Scaricala in aree casuali con lo strumento gomma, imposta un'opacità del 30-50% con un pennello morbido per creare punti salienti interessanti. Prova ad abbinare il mio risultato qui sotto.
Scarica questa immagine da sxc.hu (Grazie Javier González). Chiama il livello "castello", ridimensionalo e posizionalo approssimativamente nella parte superiore centrale del palco. Imposta la modalità di fusione del livello su Moltiplica e Opacità su 60%. Usa lo strumento Gomma per cancellare i bordi più duri. Di seguito è riportato il mio risultato dopo questo passaggio.
Ok, finora tutto bene. Iniziamo a creare il nostro logo. Prendi lo strumento Penna e crea il contorno della testa di un drago. Per fare ciò è possibile rintracciare un'immagine di drago casuale o crearne una propria. Questo tuttavia finirà con alcuni pesanti effetti di stile a livello, quindi cerca di mantenere la forma abbastanza semplice.
C'è una grande varietà di forme libere e dingbat che potresti usare, se non vuoi perdere tempo a tracciare o inventare una testa di drago. Dove c'è una volontà, c'è un modo.
Duplica la tua forma 2 volte (livello> livello duplicato ...), in modo da avere 3 livelli dragonhead. Assegna un nome a quello in basso "dragon_1", quello centrale "dragon_2" e quello in alto "dragon_3".
È tempo di far splendere il nostro drago. Questa tecnica è fortemente basata sul tutorial di Elliot AKA TrueLovePrevails su come replicare lo stile del logo warcraft, quindi un enorme ringraziamento lo spetta per lo sviluppo di questa fantastica tecnica e per avermi permesso di usarlo. Clicca qui per visitare il tutorial originale.)
Applica i seguenti stili di livello rispettivamente a ciascun livello, iniziando dal livello "dragon_1"
Ora applica i seguenti stili di livello a "dragon_2" e imposta Opacità di riempimento di questo livello a 0%.
E ancora su "dragon_3" e imposta Opacità di riempimento di questo livello su 0%.
Bene, il drago sembra buono - controlla! Il prossimo è il testo.
Dirigiti a Fontcraft.com e scarica o acquista Scurlock. Scurlock è gratuito come font demo, quindi assicurati di leggere i termini di utilizzo e di acquistare una licenza se desideri utilizzare questo font per scopi commerciali.
Seleziona lo strumento tipo e imposta la dimensione su 60pt. Digita il testo "Dragon". Fai clic con il tasto destro del mouse sul livello e seleziona Converti in forma. La ragione di ciò è che vogliamo rimuovere la sottolineatura del "o". Per fare ciò utilizziamo lo strumento selezione diretta. Attivare la maschera vettoriale facendo clic sulla miniatura e selezionare tutti i nodi della sottolineatura, quindi premere Elimina sulla tastiera. Se non riesci a metterli tutti in una volta, tieni premuto Maiusc per aggiungere alla selezione.
Quindi, afferra lo Strumento selezione traccia e fai clic su "o". Vai a modifica> Trasformazione libera e trascina il nodo centrale inferiore verso il basso in modo che la "o" appaia come appartiene al resto del testo. Ora duplica il layer due volte, proprio come abbiamo fatto con il dragonhead. Denominare i livelli da quello in basso e verso l'alto "dragontext_1", "dragontext_2" e dragontext_3 "rispettivamente.
Nascondiamo il livello "castello" per ora, dal momento che è di poca importanza per il layout e causa principalmente un po 'di distrazione durante la progettazione.
Fai clic con il pulsante destro del mouse sul livello "dragon_1" e seleziona "copia stile livello". Ora fai clic con il pulsante destro del mouse sul livello "dragontext_1" e seleziona Incolla stile livello. Fai clic con il pulsante destro del mouse sul livello "dragon_2" e seleziona Copia stile livello. Ora fai clic con il pulsante destro del mouse su "dragontext_2" e seleziona Incolla stile livello. Cambia l'opacità in modalità ombra in smusso e rilievo in 43%.
Seleziona "dragontext_3" e imposta Opacità di riempimento su 0%. Quindi applica gli stili mostrati nell'immagine qui sotto. Al termine, ripetere i passaggi 9 e 10 per il testo "Tempesta" (denominando i livelli stormtext_ #) e posizionare il testo all'incirca come mostrato di seguito.
Command-cick la miniatura della maschera vettoriale del livello "dragontext_2" per caricare la selezione. Vedrai apparire le formiche in marcia attorno al tuo testo. Assicurati che "dragontext_2" sia il tuo livello attivo, in quanto ci assicureremo di posizionare il livello di regolazione che stiamo per creare appena sopra "dragontext_2".
Ora fai clic sul pulsante Crea nuovo riempimento o livello di regolazione situato sotto la tavolozza dei livelli. Dall'elenco selezionare Bilanciamento colore e applicare le impostazioni di seguito. Successivamente, fai clic su Comando + D per deselezionare. Ora fai lo stesso per il livello "swordtext_2".
I dettagli parlano da soli, quindi aggiungiamo altro testo per avere un effetto aggiunto. Digita "Scroll of the Wicked" usando nuovamente il font Scurlock, con una dimensione di 18,5 pt. Per il testo "Scroll" e "Wicked", imposta la dimensione del testo su 14,5 pt. Per "del testo", utilizzare # C9C9C9 come colore del testo e applicare i seguenti stili di livello.
Spero che tu sia ancora con me. Passiamo alla barra laterale.
Usando lo strumento Penna, crea una forma simile a un blocco come quella nell'immagine qui sotto. Sii creativo qui. Non c'è giusto o sbagliato quando si fanno cose del genere, quindi basta unire una forma senza prestare troppa attenzione ai dettagli. Duplica questo livello e chiama quello in alto "sidebar_base". Assegna un nome a "sidebar_perspective" in basso. Ora applica i seguenti stili di livello al livello "sidebar_base".
Sposta il livello "sidebar_perspective" 6px a sinistra, fai clic con il pulsante destro del mouse e seleziona Rasterize Layer.
Imposta lo strumento Brucia su usando le impostazioni di seguito, e dipingi il bordo prospettico - tenendo presente la fonte luminosa dallo schizzo del concetto - dove la luce ha meno probabilità di colpirlo. Con lo strumento scherma, dipingi le aree opposte. Quando faccio questo per le trame di pietra, trovo che sia efficace da tamponare piuttosto che accarezzare, poiché questo crea l'illusione di una superficie ruvida. Infine, dai al livello un'ombra esterna.
Scarica questo set di pennelli da Lee Richardson. Crea un nuovo livello sopra "sidebar_base" e chiamalo "sidebar_texture_1". Ora, fai Command-click sul livello "sidebar_base" per caricare la selezione della forma. Senza rilasciare il comando, premere MAIUSC per aggiungere alla selezione e fare clic sul livello "sidebar_perspective". Quindi afferra lo strumento pennello e seleziona il secondo pennello del set appena scaricato. Con il colore di primo piano impostato su nero, fai clic una volta all'interno della selezione e premi Command + D sulla tastiera. Imposta l'opacità di questo livello al 50%.
Imposta il colore di primo piano su # 160A02 e crea un altro livello. Assegna un nome a questo - hai indovinato - "sidebar_texture_2". Ripeti il processo dal passaggio 15, questa volta usando il quarto pennello del set. È più piccolo, quindi avrai bisogno di due clic per coprire l'intera superficie. Con questo livello selezionato, vai su Filtro> Sfocatura> Sfocatura gaussiana. Impostarlo su un raggio di 1,5 quindi fare clic su OK. Dovresti avere qualcosa come l'immagine qui sotto.
Aggiungiamo alcune imperfezioni alla superficie della roccia. Crea un nuovo livello e chiamalo "crepe". Seleziona lo strumento Pennello e varia tra un raggio master da 2px a 5px, la durezza dal 60% all'80% e mantiene l'opacità del pennello al 55%. Cerca di non preoccuparti di ottenerlo destra. Lo stile di livello farà la maggior parte del lavoro, e la forma più strana potrebbe risultare ottima. Quando sei soddisfatto delle crepe, applica il seguente stile di livello e diventa ancora più felice.
Crea un altro livello, questo sopra il livello "cracks", e chiamalo "edge_bumps". Seleziona lo strumento Pencil con un diametro master di 1px e disegna alcune imperfezioni in nero lungo la linea evidenziata in basso. imposta l'opacità del livello al 76%, quindi applica il seguente stile di livello al livello.
Crea un nuovo livello sopra il livello "edge_bumps". Comando-clic sul livello "sidebar_perspective". Prendi uno qualsiasi dei pennelli di spruzzo di Photoshop e picchietti qui e là lungo il bordo, mantenendo comunque l'opacità del pennello al 55%. Copia lo stile del livello dal livello "edge_bumps" e incollalo su questo livello. Imposta l'opacità dei livelli al 55%.
Passiamo alla creazione del legno. Crea una forma come quella qui sotto per la nostra grande tavola da gioco salvata in legno. Imposta il colore della forma su # 463118. Chiama il livello "saved_games_base" e applica i seguenti stili.
Usando lo strumento penna, prova a replicare la forma che vedi qui sotto e posizionala sotto il livello "saved_games_base". I bordi importanti sono evidenziati in rosso. Denominalo "saved_games_perspective" e imposta il colore di questa forma su # 14100D. Inoltre, applica un'ombra esterna come mostrato.
Scarica la prima texture da questa texture impostata da cgtextures.com. Rilascialo sul tuo palco e ridimensionalo / ruotalo finché non ti piace come appare. Posizionalo sopra e sopra il livello "saved_games_base" e rinominalo "wood_texture_1". Premi Command-click "saved_games_base," quindi Command + Shift e fai clic su "saved_games_perspective" per aggiungerlo alla selezione. Seleziona "wood_texture_1" e fai clic sul pulsante aggiungi maschera di livello, posizionato sotto la palette dei livelli. Imposta questa modalità di fusione dei livelli su Luce soffusa.
Duplica questo layer una volta, chiamalo "wood_texture_2", imposta la modalità di fusione su Sovrapposizione e Opacità su 15%.
Ripeti i passaggi 20-22 per i pulsanti. Prova a variare leggermente il gradiente e usa riflessi anziché radiali. Per tenere traccia dei tuoi livelli, potresti voler aggiungere i livelli dei pulsanti a un gruppo. Cerca di abbinare i risultati mostrati di seguito.
Illuminiamo un po 'le cose. seleziona il livello superiore del documento e fai clic su Crea nuovo livello di riempimento o regolazione, proprio come abbiamo fatto nel passaggio 11 per il testo. Questa volta seleziona i livelli dall'elenco e trascina il nodo centrale su 1.39, che è un po 'a sinistra.
Fai clic con il tasto Comando sul livello "stormtext_1", quindi premi Command-shift e fai clic sui livelli "dragontext_1" e "dragon_1". Seleziona la miniatura del livello livelli e vai a Modifica> Riempi e riempi la selezione con il nero. Ora il testo e la testa di drago non saranno influenzati dal livello dei livelli.
Successivamente aggiungeremo un livello di regolazione luminosità / contrasto, utilizzando lo stesso identico metodo utilizzato per i livelli, incluso il controllo della "Tempesta del drago" SOLO TESTO questa volta non è influenzato da questo livello nascondendolo. Impostare Luminosità su 25 e Contrasto su 35.
Con lo strumento rettangolo, sopra il livello "wood_texture_2", crea una forma quadrata come nelle immagini sottostanti. Assegna un nome a questo livello "inset_rim", ora duplica questo livello e chiama il primo "inset_base".
Applicare rispettivamente i seguenti stili, iniziando con "inset_rim" e usando un'opacità di riempimento dello 0%.
Per "inset_base", utilizza le stesse impostazioni e un'opacità di riempimento del 60%.
Duplica due volte "inset_rim" e "inset_base" e posiziona come mostrato nella parte inferiore delle immagini sottostanti.
Scarica "Livingstone" di PrimaFont da dafont.com. Digita tutto il testo che vedi qui sotto, usando #ECDECB come colore del testo. Le dimensioni non sono troppo importanti, cerca solo di abbinare approssimativamente a quanto mostrato di seguito. Quindi applica il seguente stile a tutti questi livelli di testo.
Imposta il colore di primo piano con # 636363 e crea un nuovo livello sotto i pulsanti. Usando lo strumento Pennello impostato su Durezza dell'85% con diametro master di 1 px, dipingere a O forma, come nell'immagine qui sotto. Guarda la selezione delle formiche in marcia. Duplicalo e posiziona le copie come mostrato.
Esegui il passaggio precedente per tutte le aree dell'immagine sottostante che presentano catene e applica il seguente stile a tutti i livelli. Ci saranno molti livelli, quindi usa i gruppi per tenerne traccia.
Rendiamo visibile il livello "castello". Dato che ci stiamo spostando verso la fase di dettaglio di questo progetto, è bello avere una visione chiara di quale sarà il risultato finale.
Ora, usando di nuovo lo strumento penna, con il nero impostato sul colore di primo piano, crea una forma simile a quella nella casella dei giochi salvati in basso. Renderlo prevalentemente quadrato, ma tagliare gli angoli per dargli una forma più interessante. Chiama questo livello "tablet". Applica i seguenti stili di livello:
Usando di nuovo il carattere Livingstone, digita il testo che vedi nella tavoletta della pietra dei giochi salvata in basso, e applica i seguenti stili di livello. Al termine, duplica l'intero tablet e posizionalo nella seconda casella, come mostrato nell'immagine sottostante.
Imposta il colore di primo piano su # 2E343A e con lo strumento Penna crei una piccola forma a rombo (circa 10 px per 10 pixel). Questa sarà la base dei nostri rivetti. Denominare il livello "rivet_inset" e duplicarlo due volte. Assegna al rivetto centrale "rivet_base" e al top uno "rivet_style". Aggiungi rispettivamente i seguenti stili, iniziando con "rivet_inset".
Ora applica i seguenti stili di livello al livello "rivet_base".
Ora applica i seguenti stili di livello al livello "rivet_style".
Ora duplica l'intero rivetto tre volte e posizionane uno in ogni angolo della scatola salvata, proprio come nell'immagine qui sotto.
Crea 4 cerchi piccoli (circa 4 pixel per 4 pixel) alla base del riquadro dei giochi salvati, utilizzando lo strumento ellisse e # CCB55A come colore di primo piano. Questi saranno gli indicatori di pagina che si trovano spesso nelle applicazioni iPhone. Ai primi tre, applica questi stili.
Cambia il colore del quarto cerchio in # FFA200 facendo doppio clic sulla miniatura del colore della forma. Quindi applica il seguente stile.
È ora di tuffarsi nell'ultimo e probabilmente il passo più difficile. Questo potrebbe in effetti essere un altro tutorial in sé, ma cercherò di mantenerlo di base. Cercherò di spiegare questo al meglio delle mie capacità usando le immagini, ma sarà un apprendimento facendo esperienza per chiunque sia nuovo a questa tecnica.
Opzionalmente è anche possibile aggiungere una maschera di contrasto alla foglia se si desidera ottenere dettagli più nitidi. Le impostazioni saranno lungo le linee di Quantità 50%, Raggio 0,5 px e soglia di 0 livelli.
Aggiungi verde, qua e là per renderlo più interessante. Potresti andare anche più lontano di me e aggiungerne alcuni sulla scatola dei giochi salvata. Grazie mille per aver seguito questo tutorial e spero che tu abbia imparato alcune nuove tecniche. Di seguito è il risultato finale.
Accentsconagua