Share
Nel seguente tutorial imparerai come creare un'interfaccia per giochi a blocchi in Adobe Illustrator CS5. La grafica di gioco vettoriale consente una grafica versatile. Il flusso di lavoro presentato in questo tutorial ti insegnerà come creare grafica di gioco in Illustrator. Queste tecniche possono essere applicate a più progetti di design di interfaccia e di progettazione di giochi. È tempo di saltare dentro, imparare a creare queste forme e dare loro una colorata profondità grafica.
Premi Comando + N per creare un nuovo documento. Inserire 660 nella casella della larghezza e 600 nella casella dell'altezza, quindi fare clic sul pulsante Avanzate. Seleziona RGB, schermo (72ppi) e assicurati che la casella Allinea nuovi oggetti a griglia pixel sia deselezionata prima di fare clic su OK. Ora, attiva la griglia (Visualizza> Griglia) e lo snap alla griglia (Visualizza> Aggancia alla griglia).
Successivamente, avrai bisogno di una griglia ogni 5px. Vai a Modifica> Preferenze> Guide> Griglia, inserisci 5 nella griglia ogni casella e 1 nella casella Sottori. Puoi anche aprire il pannello Informazioni (Finestra> Informazioni) per un'anteprima dal vivo con le dimensioni e la posizione delle tue forme. Non dimenticare di sostituire l'unità di misura in pixel da Modifica> Preferenze> Unità> Generale. Tutte queste opzioni aumenteranno significativamente la tua velocità di lavoro.
Seleziona lo strumento Rettangolo (M) e crea una forma 350 per 490 px. Snap to Grid faciliterà il tuo lavoro. Riempilo con R = 50, G = 50, B = 50. Ora rimuovi il colore dal tratto e vai a Effetto> Stilizzazione> Angoli arrotondati. Inserisci un raggio di 5px, fai clic su OK e vai su Oggetto> Espandi aspetto.
Disabilitare la griglia (Visualizza> Mostra griglia) e il blocco alla griglia (Visualizza> Aggancia alla griglia). Vai a Modifica> Preferenze> Generali e assicurati che l'incremento della tastiera sia impostato su 1px. Riseleziona la forma creata nel passaggio precedente e vai su Oggetto> Tracciato> Tracciato offset. Immettere un offset -3px e fare clic su OK.
Seleziona la forma risultante e crea una copia in primo piano (Comando + C> Comando + F). Seleziona questa copia e premi la freccia giù una volta. Riselezionare le due forme create in questo passaggio e fare clic sul pulsante Minus Front dal pannello Pathfinder (Finestra> Pathfinder). Riempi la forma risultante con R = 109, G = 110, B = 113.
Ancora una volta, seleziona la forma creata nel secondo passaggio e vai su Oggetto> Tracciato> Tracciato offset. Immettere un offset -3px e fare clic su OK. Seleziona la forma risultante e crea una copia in primo piano (Comando + C> Comando + F).
Seleziona questa copia e premi la freccia su una volta. Riselezionare le due forme create in questo passaggio e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Riempi la forma risultante con R = 109, G = 110, B = 113.
Riselezionare la forma creata nel secondo passaggio, spostarsi sul pannello Livelli, fare doppio clic su di esso e denominarlo "Principale". Assicurati che questa forma sia ancora selezionata, vai al pannello Aspetto (Finestra> Aspetto) e fai clic sul pulsante Aggiungi nuovo riempimento. È il quadratino bianco dalla parte inferiore del pannello Aspetto.
Ovviamente, questo aggiungerà un nuovo riempimento per la tua forma. Selezionalo dal pannello Aspetto e usa il gradiente lineare mostrato sotto. Lo zero giallo dall'immagine del gradiente indica la percentuale di opacità.
Riseleziona "Principale", aggiungi un terzo riempimento e selezionalo dal pannello Aspetto. Rendilo nero, trascinalo nella parte inferiore del pannello Aspetto, abbassa Opacità al 15% e vai a Effetto> Tracciato> Tracciato offset. Inserisci un offset di 1px, fai clic su OK e vai su Effetto> Distorci e trasforma> Trasforma. Inserire i dati mostrati di seguito e fare clic su OK.
Riselezionare "Principale" e concentrarsi sul pannello Aspetto. Impostare il colore del tratto su R = 167, G = 169, B = 172. Rendilo largo 4pt e allinearlo all'interno.
Riselezionare "Principale" e concentrarsi sul pannello Aspetto. Seleziona il tratto aggiunto nel passaggio precedente e fai clic su Duplica elemento selezionato. È la piccola icona del file nella parte inferiore del pannello Aspetto. Ovviamente, questo aggiungerà una copia del tratto. Seleziona questo nuovo tratto, imposta il suo colore a R = 35 G = 31 B = 32 e riduci la dimensione a 3pt.
Riseleziona "Principale", concentrati sul pannello Aspetto e aggiungi due nuovi colpi. Seleziona il primo, imposta il suo colore su R = 128 G = 130 B = 133, e la dimensione a 1.5pt. Selezionare l'altro nuovo tratto, renderlo nero, allinearlo all'esterno e impostare la dimensione su 1pt.
Riselezionare "Principale" e concentrarsi sul pannello Aspetto. Assicurati che nessun riempimento o tratto sia selezionato e vai a Effetto> Stilizzazione> Sfalsa ombra. Inserire i dati mostrati di seguito e fare clic su OK.
Riattiva la griglia (Visualizza> Mostra griglia) e la cattura alla griglia (Visualizza> Aggancia alla griglia). Seleziona lo strumento Rettangolo (M), crea una forma 20 per 20 px e riempila con R = 88, G = 89, B = 91. Seleziona questo quadrato e vai su Oggetto> Percorso> Percorso offset. Inserisci un offset di -1px e fai clic su OK.
Seleziona la forma risultante e vai di nuovo su Oggetto> Tracciato> Tracciato offset. Immettere un offset -3px e fare clic su OK. Seleziona la forma risultante insieme alla forma creata in precedenza e fai clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Riempi la forma risultante con R = 65, G = 64, B = 66.
Scegli lo strumento Penna (P) e disegna un semplice percorso orizzontale come mostrato nella prima immagine. Snap to Grid dovrebbe facilitare il tuo lavoro. Seleziona questo percorso nuovo, insieme alla forma più scura creata nel passaggio precedente e, fai clic sul pulsante Dividi dal pannello Elaborazione tracciati.
Questo creerà un gruppo con quattro forme semplici. Dai un'occhiata al pannello Livelli e concentrati su questo gruppo. Innanzitutto, seleziona i due triangoli ed eliminali. Quindi, separa le restanti due forme (Maiusc + Comando + G). Infine, riempi la forma in alto a sinistra con R = 109, G = 110, B = 113. Assicurati che l'altra forma sia ancora riempita con R = 65, G = 64, B = 66.
Riseleziona il quadrato grigio creato nell'undicesimo passo, fai una copia in primo piano (Comando + C> Comando + F), e portalo in primo piano (Shift + Comando + tasto destro del Bracket). Riempi questa nuova forma con il nero, abbassa la sua Opacità al 7%, cambia la modalità di fusione in Moltiplica e vai a Effetto> Artistico> Grana della pellicola. Inserire i dati mostrati di seguito e fare clic su OK.
Riseleziona la forma creata nel passaggio precedente e fai una copia in primo piano (Comando + C> Comando + F). Seleziona lo strumento Ellisse (L), crea una forma 40 x 20 px e posizionalo come mostrato nella seconda immagine. Seleziona questo cerchio schiacciato insieme alla nuova copia e fai clic sul pulsante Interseca dal pannello Elaborazione tracciati. Riempi la forma risultante con il bianco e abbassa la sua opacità al 25%.
Riselezionare il quadrato grigio creato nell'undicesimo passo e concentrarsi sul pannello Aspetto. Aggiungi un 2pt, tratto nero e allinearlo all'interno. Seleziona tutte le forme create negli ultimi quattro passaggi e raggruppale (Comando + G).
Seleziona il gruppo creato nel passaggio precedente e posizionalo come mostrato nell'immagine seguente. Ancora una volta, lo Snap to Grid faciliterà il tuo lavoro.
Riseleziona il gruppo spostato nel passaggio precedente, abbassa l'Opacità al 15% e vai a Effetto> Distorci e Trasforma> Trasforma. Inserisci i dati visualizzati nella finestra di sinistra, fai clic su OK, quindi vai di nuovo su Effetto> Distorci e Trasforma> Trasforma. Immettere i dati visualizzati nella finestra di destra e fare clic su OK.
Seleziona lo strumento Rettangolo (M), crea una forma 20 per 20 px e riempilo con R = 0, G = 165, B = 224. Seleziona questo quadrato blu e vai su Oggetto> Percorso> Percorso offset. Immettere un offset di -4px e fare clic su OK. Seleziona la forma risultante, crea una copia in primo piano (Comando + C> Comando + F) e disabilita la funzione Blocca sulla griglia (Visualizza> Aggancia alla griglia).
Seleziona questa copia e premi la freccia su e la freccia destra una volta. Riselezionare questa copia, insieme alla forma originale, e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Riempi la forma risultante con il bianco, abbassa la sua opacità al 25% e afferra lo strumento Elimina punto di ancoraggio (-).
Assicurati che questa sottile forma bianca sia ancora selezionata e fai clic sui due punti di ancoraggio (mostrati con le frecce nella quarta immagine mostrata). Alla fine la tua forma dovrebbe assomigliare alla quinta immagine mostrata.
Riseleziona il quadrato blu e vai su Oggetto> Tracciato> Tracciato offset. Inserisci un offset di -1px e fai clic su OK. Seleziona la forma risultante e vai di nuovo su Oggetto> Tracciato> Tracciato offset. Immettere un offset -3px e fare clic su OK. Seleziona le due forme create fino a quel momento e fai clic sul pulsante Minus Front dal pannello Pathfinder. Riempi la forma risultante con R = 28, G = 117, B = 188.
Riattiva lo snap alla griglia (Visualizza> Aggancia alla griglia). Seleziona lo strumento Penna (P) e traccia un percorso orizzontale come mostrato nella prima immagine. Selezionalo insieme alla forma creata nel passaggio precedente e fai clic sul pulsante Dividi dal pannello Elaborazione tracciati.
Dai un'occhiata al pannello Livelli e concentrati sul gruppo risultante. Innanzitutto, elimina le forme triangolari, quindi separa le restanti due forme (Maiusc + Comando + G). Infine, riempi la forma in alto a sinistra con R = 0, G = 224, B = 255.
Riselezionare il quadrato blu, aggiungere un tratto nero di 2 pt e allinearlo all'interno. Seleziona tutte le forme create negli ultimi tre passaggi e raggruppale (Comando + G). Passare al pannello Livelli, fare doppio clic su questo nuovo gruppo e denominarlo "BlueBlock".
Seleziona il "BlueBlock", crea sei copie e allineili in una colonna semplice (come mostrato nell'immagine seguente). Concentrati su queste copie di gruppo e sostituisci i colori esistenti con quelli mostrati sotto. Quando hai finito, passa al pannello Livelli e rinomina questi nuovi gruppi in base al colore del blocco generale.
Ora che hai tutti i blocchi di cui hai bisogno creiamo i blocchi reali. Inizia con i blocchi blu e continua con il resto. Raggruppa sempre i blocchi che costituiscono un blocco. Faciliterà il tuo lavoro nei passaggi successivi.
Aggiungi alcuni di questi blocchi come mostrato di seguito.
Seleziona lo strumento Rettangolo (M), crea una forma da 100 per 20 pixel e posizionalo come mostrato nell'immagine seguente. Ora riempilo con R = 65, G = 64, B = 66. Rimuovi il colore dal tratto e vai a Effetto> Stilizzazione> Angoli arrotondati. Inserisci un raggio di 10 px, fai clic su OK e vai su Oggetto> Espandi aspetto.
Disabilita lo snap alla griglia (Visualizza> Aggancia alla griglia). Seleziona la forma creata nel passaggio precedente, invialo indietro (Shift + Comando + tasto sinistro di parentesi) e crea due copie in primo piano (Comando + C> Comando + F> Comando + F). Seleziona la copia in alto e premi una volta la freccia su e la freccia sinistra. Riselezionare entrambe le copie e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Riempi la forma risultante con il nero.
Riselezionare la forma grigia creata nel passaggio 25 e creare due nuove copie in primo piano. Ancora una volta, seleziona la copia in alto e questa volta premi la freccia su e la freccia sinistra due volte. Riselezionare entrambe le copie e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Riempi la forma risultante con R = 147, G = 149, B = 152.
Riselezionare il rettangolo arrotondato creato nel passaggio 25 e concentrarsi sul pannello Aspetto. Aggiungi un nuovo riempimento e utilizza il gradiente lineare mostrato nella prima immagine. Aggiungi un terzo riempimento per questa forma, rendilo nero, abbassa l'opacità al 10%, cambia la modalità di fusione in Moltiplica e vai a Effetto> Artistico> Grana pellicola. Inserire i dati mostrati di seguito e fare clic su OK.
Continua nel pannello Aspetto e aggiungi il primo tratto. Rendilo largo 2pt, imposta il suo colore a R = 209 G = 211 B = 212 e allineatelo verso l'interno. Aggiungi un secondo tratto per questo percorso, fallo largo 1pt e imposta il colore su R = 147, G = 14, B = 152. Assicurati che sia allineato all'interno.
Riselezionare il rettangolo arrotondato modificato nel passaggio precedente e fare una copia in primo piano. Seleziona questa copia e premi il tasto D dalla tastiera. Ciò aggiungerà le proprietà predefinite per la forma (riempimento bianco e 1pt, tratto nero). Rimuovi il colore dal tratto.
Ora seleziona questa forma bianca insieme al rettangolo arrotondato originale e vai al pannello Trasparenza. Aprire il menu a comparsa e fare clic su Crea maschera di opacità.
Riattiva lo snap alla griglia. Seleziona tutte le forme create negli ultimi cinque passaggi e raggruppale. Crea due copie di questo gruppo e posizionale come mostrato nell'immagine seguente.
Concentrati sul gruppo superiore creato nel passaggio precedente e seleziona lo strumento Rettangolo (M). Crea una forma 90 per 80 px e posizionala come mostrato nell'immagine seguente. Riempi con R = 65 G = 64 B = 66, rimuovi il colore dal tratto e applica Effetto> Stilizzazione> Angoli arrotondati. Inserisci un raggio di 10 px, fai clic su OK e vai su Oggetto> Espandi aspetto.
Disabilita lo snap alla griglia. Seleziona la forma creata nel passaggio precedente e vai su Oggetto> Tracciato> Tracciato offset. Immettere un offset -2px e fare clic su OK. Seleziona la forma risultante e crea una copia in primo piano. Seleziona questa copia e premi la freccia su una volta. Riselezionare le due forme create in questo passaggio e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Riempi la forma risultante con R = 209, G = 211, B = 212.
Riselezionare il rettangolo arrotondato creato nel passaggio 31 e concentrarsi sul pannello Aspetto. Aggiungi un nuovo riempimento e utilizza la sfumatura lineare mostrata sotto. Aggiungi un terzo riempimento per questa forma, rendilo nero, abbassa l'opacità al 10%, cambia la modalità di fusione in Moltiplica e vai a Effetto> Artistico> Grana pellicola. Inserire i dati mostrati di seguito e fare clic su OK.
Continua nel pannello Aspetto e aggiungi il primo tratto. Rendilo largo 2pt, imposta il suo colore a R = 147 G = 149 B = 152 e allinearlo all'interno. Aggiungi un secondo tratto per questo percorso, fallo largo 1pt, imposta il colore su R = 0 G = 0 B = 0, e assicurati che sia allineato all'interno.
Riselezionare il rettangolo arrotondato modificato nel passaggio precedente e fare una copia in primo piano. Seleziona questa copia e premi il tasto D dalla tastiera. Ancora una volta, rimuovere il colore dal tratto e utilizzare la forma bianca rimanente per mascherare il rettangolo arrotondato originale.
Seleziona tutte le forme create negli ultimi quattro passaggi e raggruppale. Invia questo nuovo gruppo a indietro.
Riattiva lo snap alla griglia. Afferra il gruppo di blocchi viola, creane una copia e posizionalo come mostrato nell'immagine seguente. Selezionalo e vai su Effetto> Stilizzazione> Sfalsa ombra. Inserire i dati mostrati di seguito e fare clic su OK.
Seleziona lo strumento Rettangolo (M), crea una forma 90 per 50 px e posizionalo come mostrato nell'immagine seguente. Riempi con R = 65 G = 64 B = 66, rimuovi il colore dal tratto e vai a Effetto> Stilizzazione> Angoli arrotondati. Inserisci un raggio di 10 px, fai clic su OK e vai su Oggetto> Espandi aspetto.
Disabilita lo snap alla griglia. Seleziona la forma creata nel passaggio precedente e vai su Oggetto> Tracciato> Tracciato offset. Immettere un offset -2px e fare clic su OK. Seleziona la forma risultante e crea una copia in primo piano. Seleziona questa copia e premi la freccia su una volta. Riselezionare le due forme create in questo passaggio e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Riempi la forma risultante con R = 209, G = 211, B = 212.
Riselezionare il rettangolo arrotondato creato nel passaggio 31 e concentrarsi sul pannello Aspetto. Aggiungi un nuovo riempimento e utilizza la sfumatura lineare mostrata sotto. Aggiungere un terzo riempimento per questa forma, renderlo nero, abbassare l'opacità al 10%, cambiare la modalità di fusione in Moltiplica e applicare Effetto> Artistico> Grana pellicola. Inserire i dati mostrati di seguito e fare clic su OK.
Continua nel pannello Aspetto e aggiungi il primo tratto. Rendilo largo 2pt, imposta il suo colore a R = 147 G = 149 B = 152 e allinearlo all'interno. Aggiungi un secondo tratto per questo percorso, fallo largo 1pt, imposta il colore su R = 0 G = 0 B = 0, e assicurati che sia allineato all'interno.
Riselezionare il rettangolo arrotondato modificato nel passaggio precedente e fare una copia in primo piano. Seleziona questa copia e premi il tasto D dalla tastiera. Ancora una volta, rimuovere il colore dal tratto e utilizzare la forma bianca rimanente per mascherare il rettangolo arrotondato originale.
Seleziona tutte le forme create negli ultimi quattro passaggi e raggruppale. Adesso rispedisci questo nuovo gruppo.
Riattiva lo snap alla griglia e duplica il gruppo creato nel passaggio precedente. Seleziona questa copia di gruppo e spostala verso il basso come mostrato nella seconda immagine. Ancora una volta, lo snap alla griglia faciliterà il tuo lavoro.
Disabilita lo snap alla griglia. Seleziona lo Strumento testo (T) e aggiungi del testo e numeri bianchi. Usa il font Courier New e rendilo grassetto. Per il testo imposta la dimensione a 13 e per il numero alzalo a 20pt. Seleziona sia il testo che i numeri e vai a Effetto> Stilizzazione> Sfalsa ombra. Inserire i dati mostrati di seguito e fare clic su OK. Alla fine, raggruppali tutti.
Seleziona tutte le forme create negli ultimi diciannove passaggi e raggruppale. Manda questo nuovo gruppo indietro e vai su Effetto> Stilizzazione> Sfalsa ombra. Inserire i dati mostrati di seguito e fare clic su OK.
Infine, aggiungiamo uno sfondo semplice. Seleziona lo strumento Rettangolo (M), crea una forma della dimensione della tua tavola da disegno e invialo indietro. Riempilo di bianco, quindi aggiungi un secondo riempimento e utilizza la sfumatura radiale mostrata sotto.
Riselezionare la forma creata nel passaggio precedente e aggiungere un terzo riempimento. Selezionalo dal pannello Aspetto, abbassa Opacità al 10% e modifica la modalità di fusione su Moltiplica.
Successivamente, avrai bisogno di un modello integrato per questo nuovo riempimento. Vai al pannello Swathes (Finestra> Campioni), apri il menu a comparsa e vai a Open Swatch Library> Patterns> Basic Graphics> Basic Graphics_Textures.
Una nuova finestra con un mazzo di bei modelli dovrebbe aprirsi. Cerca il pattern "USGS 19 Land Inundation". Seleziona nuovamente il terzo riempimento, aggiungi il modello e vai a Effetto> Artistico> Grana pellicola. Inserisci i dati mostrati di seguito, fai clic su OK e il gioco è fatto.
Ora il tuo lavoro è finalizzato. Ecco come dovrebbe apparire.
Accentsconagua