Share
Uno degli aspetti più importanti della riproduzione di un videogioco è come vengono presentate le informazioni. Il modo in cui la grafica è presentata fa una grande differenza nel modo in cui i giocatori percepiranno il gioco durante il gioco. Nel tutorial di oggi dimostreremo come progettare una finestra di interfaccia per videogiochi. Durante il processo mostreremo come disegnare manualmente determinati aspetti, applicare gli stili di livello, le trame e persino come incorporare Adobe Illustrator. Iniziamo!
Le seguenti risorse sono state utilizzate durante la produzione di questo tutorial.
Crea un nuovo file con dimensioni 1152 px x 864 px. Il nostro primo passo è creare uno sfondo per la nostra interfaccia. Questo processo è semplicemente solo sperimentando texture. Fondamentalmente, ho appena gettato alcune trame che ho trovato e sperimentato con la sua modalità di fusione. Il mio primo tentativo è una texture di carta.
Aggiungi di nuovo una texture di carta, questa volta cambia la modalità di fusione con Moltiplica.
Aggiungi il livello di regolazione Tonalità / Saturazione per scurirlo.
Aggiungi texture vintage per libri con la modalità di fusione Multiply e Opacity 48%.
Aggiungi vecchie trame di carta. Questa volta usa la modalità Blend Overlay con Opacity 58%.
Aggiungi il livello di regolazione Bianco e nero.
Crea un nuovo livello. Premi D per impostare il colore di primo piano e di sfondo su bianco e nero. Fai clic su Filtro> Rendering> Nuvole.
Imposta la modalità di fusione su Moltiplica e riduci la sua opacità all'8%.
Crea un nuovo livello. Riempi il gradiente radiale da bianco a nero.
Imposta la modalità di fusione su Schermo con Opacità 67%.
Aggiungi livello di regolazione Tonalità / saturazione. Seleziona Colorize per dargli un colore.
Infine, aggiungi una bella trama metallica graffiata. Imposta la modalità di fusione su Moltiplica e riduci la sua opacità al 20%.
Apri Adobe Illustrator. Disegna un rettangolo giallo.
In cima al rettangolo, disegna un rettangolo nero più piccolo. Seleziona i punti migliori con lo Strumento selezione diretta e spostali.
Seleziona la forma e trascina Alt per duplicarlo.
Premi Comando / Ctrl + D per ripetere il processo di duplicazione.
Seleziona tutte le forme. Premi Comando / Ctrl + C. Incollalo in Photoshop, Comando / Ctrl + V. Seleziona Oggetto intelligente nella finestra di dialogo Incolla.
Doppio livello di clic per aprire la finestra di dialogo Stile livello. Aggiungi Sovrapposizione modello, carica carta colorata e seleziona un motivo sporco.
Aggiungi la forma rettangolare sulla parte superiore e inferiore della striscia.
Aggiungi gli stili di livello seguenti.
Inizieremo creando la base della finestra. Crea una forma rettangolare con Colore: # # 313029, Opacità: 100% e Riempimento: 50%. Aggiungi lo stile seguente.
Lo stile di livello appena aggiunto è troppo piatto. Useremo una semplice tecnica per risolverlo. Nella finestra di dialogo Stile livello attiva la maschera di livello nasconde gli effetti.
Aggiungi maschera di livello. Comando / Ctrl-clic sul percorso per creare selezione. Inverti la selezione premendo Comando / Ctrl + Maiusc + I. Aggiungi una leggera sfumatura scura in alto e dipingi nero sulla linea industriale per nascondere l'ombra.
Puoi vedere la differenza prima e dopo aver modificato l'ombra nell'immagine sottostante.
Disegna un altro rettangolo. Questa volta più piccola della precedente.
Aggiungi trame di ruggine su di esso. Usa la maschera di livello per nascondere le aree non necessarie. Imposta la modalità di fusione su Moltiplica e riduci la sua opacità al 10%.
Crea un nuovo rettangolo che copra tutta la forma. Aggiungi un rettangolo più piccolo all'interno della forma, impostalo per sottrarre.
Duplica forma precedente. Ridimensiona il percorso interno.
Aggiungi gli stili di livello seguenti.
C'è troppa ombra sulla parte superiore della finestra. Nella finestra di dialogo dello stile di livello attiva la maschera di livello nasconde gli effetti.
Comando / Ctrl-clic percorso. Inverti la selezione (Comando / Ctrl + Maiusc + I) e dipingi le ombre sulla parte superiore della finestra con il grigio.
Sotto, puoi vedere la differenza prima e dopo che l'ombra è parzialmente nascosta.
Disegna un rettangolo che copre tutta l'interfaccia della finestra. Imposta il suo riempimento su 0% e aggiungi i seguenti stili di livello.
Il nostro ultimo passaggio aggiunge semplicemente una leggera evidenziatura all'interfaccia della finestra.
Disegna un cerchio scuro e posizionalo sull'angolo. Aggiungi ombra esterna.
Usa la spazzola morbida per dipingere un po 'di bianco sulla parte superiore del foro.
Ecco il risultato in visualizzazione al 100%.
Metti tutti i livelli che creano il buco su un gruppo di livelli. Duplica il gruppo e mettilo su ciascun angolo.
In Illustrator, crea metà della forma del titolo di Window.
Forma del tasto destro del mouse e selezionare Trasforma> Rifletti. Seleziona asse: verticale e fai clic su Copia.
Sposta la forma duplicata.
Seleziona punti che si sovrappongono. Fai clic con il tasto destro e scegli Partecipa.
Incolla il percorso su Photoshop come un livello di forma.
Dipingi la luce e l'ombra sulla forma. Puoi vedere i progressi che ho fatto di seguito. Uso un pennello molto morbido (durezza: 0%, opacità: 5-10%) e circa 10 strati.
Aggiungi il titolo del gioco e aggiungi i seguenti stili di livello. Il carattere utilizzato qui è Celtic Garamond il 2 °.
Disegna un rettangolo arrotondato sul lato sinistro dell'interfaccia. Usa il colore: # 605847. Aggiungi una leggera sfumatura di sfumatura da grigio a bianco.
Duplica la forma precedente e ridimensionala. Vedi l'immagine qui sotto per riferimento.
Disegna un altro rettangolo. Questo tempo usa colori più chiari. Aggiungi sovrapposizione sfumatura. Duplica e posizionala sulla parte inferiore del rettangolo più grande.
Disegna una linea di 1 px per le sue luci e ombre. Abbiamo intenzione di convertire questa forma in una forma 3D. Alla fine, vedrai che questo piccolo dettaglio di 1 px è necessario per ottenere un risultato realistico.
Disegna la forma in basso per aggiungere la prospettiva 3D sulla forma. Aggiungi seguente sovrapposizione sfumatura.
Disegna l'ombra sotto la forma.
Disegna la forma in basso e completa l'ombra. Aggiungi Sovrapposizione sfumatura sulla forma.
Ecco il risultato in visualizzazione al 100%.
Seleziona tutti i livelli e posizionali su un livello di gruppo. Duplica il gruppo, ruotalo orizzontalmente e mettilo sul lato opposto.
Disegna la forma come mostrato di seguito. Dipingi luce e ombra sopra di esso. Non dimenticare di aggiungere un'ombra morbida della forma sulla finestra dell'interfaccia.
Sotto puoi vedere il risultato nella visualizzazione al 100%. Duplica la forma due volte.
Crea un nuovo livello sotto la forma e dipingi un pixel nero usando un piccolo pennello morbido.
Duplica tutta la forma. Giralo orizzontalmente e spostalo dall'altro lato dell'interfaccia.
Aggiungi texture ruggine che coprono l'intera interfaccia. Comando / Ctrl-clic sul bordo dell'interfaccia e sul titolo della finestra per creare una selezione in base alla loro forma. Aggiungi una nuova maschera di livello. Dipingi la forma del titolo nero con un pennello a bassa opacità perché non vogliamo vedere troppa ruggine su di esso. Sotto, puoi vedere la maschera che ho creato.
Riduci la sua opacità al 15%.
Crea una cornice all'interno dell'interfaccia della finestra. Questo viene creato da due percorsi con il percorso interno impostato su Sottrai. Aggiungi gli stili di livello seguenti.
Incolla l'immagine PNG di un veicolo all'interno del telaio.
Dietro la cornice aggiungi un nuovo livello e riempilo con una sfumatura da grigia a bianca.
Dipingi delle ombre sotto il veicolo.
Aggiungi un altro fotogramma sotto l'anteprima del veicolo. Utilizzare una tecnica simile nei passaggi precedenti.
Aggiungi alcune informazioni sulla cornice.
Disegna un'altra cornice, questa volta più grande.
Disegna un semplice rettangolo all'interno della cornice. Aggiungi lo stile seguente.
Aggiungi del testo al rettangolo.
Duplica il rettangolo per un altro dato. Rimuovi il bagliore esterno di stile di livello e riduci la sua opacità al 30% dal livello inattivo.
Duplica tutta la forma per creare un altro set di dati.
Torna a Illustrator, crea questa forma.
Incolla la forma in Photoshop come livello di forma. Aggiungi gli stili di livello seguenti.
Dipingi l'evidenziazione e l'ombra manualmente usando il pennello morbido, la durezza 0% e l'opacità 5-10%.
Duplica la forma e ruotala orizzontalmente.
Disegna un rettangolo blu chiaro e mettilo dietro le forme. Aggiungi gli stili di livello seguenti.
Disegna alcuni punti salienti all'interno della forma. Aggiungi il titolo del pulsante. Dipingi bagliore luminoso sopra il pulsante.
Duplica il pulsante e cambia il suo titolo.
Accentsconagua