Scopri un flusso di lavoro professionale per illustrare un'immagine di intestazione in stile fumetto

In questo tutorial, esamineremo un flusso di lavoro professionale per illustrare le immagini di intestazione del sito Web in stile fumetto, che sono destinate a integrare in temi Wordpress. Questo è un ottimo modo per far risaltare il tuo blog e per essere promosso nelle migliori gallerie di design web. Iniziamo!

Anteprima dell'immagine finale

Di seguito è l'immagine finale su cui lavoreremo. Vuoi accedere ai file Vector Source completi e alle copie scaricabili di ogni tutorial, incluso questo? Unisciti a Vector Plus per soli 9 $ al mese. È possibile visualizzare la grafica finale, il design del sito web finale a grandezza naturale o visitare il sito live.

Passo 1 - Guardando un tema Wordpress

Di seguito è riportato il tema Wordpress, in quanto il tema è costituito da alcune zone, ad esempio "intestazione". Qui voglio cambiare l'immagine di intestazione dello sfondo e pubblicare qualcosa che possa esprimere di più su di me come designer e illustratore.

Passaggio 2: iniziare con lo schizzo su carta, senza digitale qui!

Inizio sempre con alcuni schizzi su carta. Questo mi aiuta davvero a focalizzare meglio alcune idee e ad avere qualcosa da tenere in seguito in Illustrator. Ecco un video divertente che ho fatto per questo tutorial.

Passaggio 3: gli schizzi

Quindi la mia idea è di creare uno strano mondo futuro con robot lavoratori e una ragazza come comandante. Gli schizzi preliminari sono mostrati di seguito.

L'immagine sotto mostra lo schizzo a matita finale da pubblicare in Illustrator come modello.

Passaggio 4: inizia con Illustrator CS4

Ora sono pronto per sedermi davanti al mio PC e iniziare con Adobe Illustrator CS4. Apro un nuovo documento e posiziono lo schizzo come modello (facendo doppio clic sul livello e selezionando Modello).

Ora creo un nuovo livello sopra il livello "modello". Quindi inizio a tracciare le linee di schizzo di base. Traccio sempre con la tavolozza degli strumenti Penna aperta per lavorare più velocemente (piccolo suggerimento).

Segui i primi passi nel video qui sotto.

Passaggio 5: inchiostrazione

Con lo strumento Penna, creo il nero inchiostrazione; Mi piace riferirmi a questo come inchiostri perché sono appassionato di fumetti. Guarda il video qui sotto.

Alla fine, puoi vedere il livello con gli inchiostri dei personaggi.

Inoltre, vedi sotto l'inchiostro del livello di sfondo.

Il layer "template sketch" non ha più bisogno di essere usato, quindi l'ho cancellato. Qui tutti gli strati messi insieme.

Passaggio 6: passaggi di colore di base

Dopo l'inchiostrazione, ho bisogno di un colore di base, ecco il livello dei "caratteri di colore di base".

Sotto lo sfondo il colore di base è mostrato sotto.

Ecco tutti gli strati di colore di base insieme.

Passaggio 7: profondità e ombra

Dopo i colori di base, ho bisogno di profondità e ombre per rendere l'illustrazione più reale. Ecco un rapido studio su come la luce cadrà in questa illustrazione.

Rientro in Illustrator e comincio a tracciare le ombre dove necessario. Per quelli che copio e incollo spesso le forme, quindi applica Dividi dalla palette del tastino.

Alla fine l'immagine finale è mostrata sotto, o visualizza l'artwork finale.

Passaggio 8 - Salvataggio di immagini per Wordpress

Da questa immagine, avevo bisogno di due parti per il mio tema Wordpress, uno per l'intestazione e uno per il corpo. Con le guide disegno le due zone.

Dopo aver posizionato le guide, creo le sezioni andando su Oggetto> Sezione> Crea da guide.

Ora salverò le due immagini andando su File> Salva per Web (sto solo salvando le immagini e nessun html). Quindi carico l'immagine finale esportata nella piega del tema di Wordpress. Ora è pronto per essere codificato nel tema.

Conclusione

Puoi vedere i risultati finali di seguito, che sono stati completamente integrati nel tema finale di Wordpress. È possibile visualizzare la grafica finale, il design del sito web finale a grandezza naturale o visitare il sito live.

Iscriviti al feed RSS di Vectortuts + per rimanere aggiornato con le ultime esercitazioni e articoli vettoriali.