Magazine Architettura e Design

Tutorial Photoshop: creare un header con skyline metropolitano

Da Iwebdesigner @Iwebdesigner_it

Tutorial Photoshop: creare un header con skyline metropolitano

Col tutorial di oggi rispolveriamo un altro classico del design web: creare un header d’impatto utilizzando uno skyline metropolitano e alcuni pennelli. Rimbocchiamoci le maniche poichè i passaggi saranno molteplici. Apriamo Photoshop e creiamo un nuovo file, dalle dimensioni 700×400 pixel, colore di sfondo #f3daa2. Creiamo un nuovo livello superiore e scegliamo dal pannello Strumenti lo strumento Forma personale (Shift+U). Dal menù a tendina selezionate la forma indicata nell’immagine seguente:

Tutorial Photoshop: creare un header con skyline metropolitano

Impostate il colore della forma in #e0c27a, poi trascinatela sul foglio tenendo premuto Shift e click sinistro del mouse fino a ottenere il seguente risultato:

Tutorial Photoshop: creare un header con skyline metropolitano

Cerchiamo su Google l’immagine di uno skyline di buona qualità, possibilmente di grandi dimensioni: io ho scelto questa fantastica veduta del quartiere Shinjuku a Tokyo:

Tutorial Photoshop: creare un header con skyline metropolitano

Ora armatevi dello strumento Penna (Shift+P) e di un pò di pazienza, e iniziate lo scontorno dello skyline, avendo cura di tagliare fuori il monte Fuji per questioni di composizione.

Tutorial Photoshop: creare un header con skyline metropolitano

Ritagliatelo lasciando i lati a scalare verso il basso, incollatelo su un nuovo livello nel nostro file principale, ridimensionatelo con lo strumento Trasforma (Shift+T)  fino a ottenere il seguente risultato:

Tutorial Photoshop: creare un header con skyline metropolitano

Clickate i seguenti link per effettuare il download dei pennelli:

BloodPack1_invaynestock, bloodbrushes2_invaynestock, Bush Pack v1.

Scompattate i file .zip e caricate i file .abr nel vostro set di pennelli. Ora creiamo un livello sottostante allo skyline e iniziamo a dipingere il foglio col colore #c42622. Scegliete con cura dalla lista il pennello da utilizzare, cercando di non discostarvi troppo dall’impostazione nelle figure.

Tutorial Photoshop: creare un header con skyline metropolitano

Nuovo livello, colore nero:

Tutorial Photoshop: creare un header con skyline metropolitano

Altro livello, colore arancio #dd8301:

Tutorial Photoshop: creare un header con skyline metropolitano

Verde #bcc450 e arancio più chiaro #ffa80e, posizionando il livello al di sotto delle altre pennellate:

Tutorial Photoshop: creare un header con skyline metropolitano

Creiamo ora un nuovo livello subito sopra lo skyline, selezioniamolo e andiamo su Livello/Nuovo livello di regolazione/Tonalità e saturazione. Impostiamo i settaggi come da immagine seguente:

Tutorial Photoshop: creare un header con skyline metropolitano

Tenendo premuto il tasto Alt, [sul pannello dei livelli] posizioniamo il puntatore del mouse nello spazio tra il livello skyline e quello subito sopra, clickando col tasto sinistro del mouse per limitare Tonalità/Saturazione alla sola immagine della città.

Ora creiamo un altro livello, posizionandolo sopra tutti gli altri. Selezionando il colore nero e il pennello Blood 7 opportunamente rimpicciolito , creiamo una base frastagliata di pennellate ai piedi della città, infine arricchiamo il contorno di sgocciolature e schizzi di pittura, smussando con le campiture eventuali sbavature.

Tutorial Photoshop: creare un header con skyline metropolitano

Altro livello posizionato in cima, colore #ba0710:

Tutorial Photoshop: creare un header con skyline metropolitano

Nuovo livello posizionato in cima, e  interveniamo con i 3 colori #005826, #fdaf25, #edaa60 come da immagine:

Tutorial Photoshop: creare un header con skyline metropolitano

Entriamo sulle opzioni di fusione di quest’ultimo livello, e dal menù a tendina del Metodo di fusione generale selezioniamo Colore.

Tutorial Photoshop: creare un header con skyline metropolitano

Nuovo livello superiore e colore nero, facendo colare la pittura sulla chiazza rossa centrale e “sporcando” il bordo destro:

Tutorial Photoshop: creare un header con skyline metropolitano

Terminiamo coi pennelli pittorici preparando l’eventuale spazio per il font, col colore #d2b66f:

Tutorial Photoshop: creare un header con skyline metropolitano

Passiamo ora al Brush Pack 1, scegliendo la forma coi due cerchi concentrici, colore bianco, e settando il riempimento del livello al 20%:

Tutorial Photoshop: creare un header con skyline metropolitano

Un altro cerchio in un nuovo livello, più piccolo e con riempimento al 50% posizionato in alto:

Tutorial Photoshop: creare un header con skyline metropolitano

Ora divertiamoci a decorare lo spazio con le restanti forme circolari di colore nero, in un nuovo livello superiore, senza invadere troppo lo spazio.

Tutorial Photoshop: creare un header con skyline metropolitano

Creiamo ora un nuovo file delle dimensioni di 4×4 pixel. Con lo strumento Matita (Shift+B e menù a tendina per selezionare) tracciamo un segmento obliquo di colore #c5a960. Andiamo su Modifica/Definisci pattern e clickiamo ok.

Tutorial Photoshop: creare un header con skyline metropolitano

Torniamo sul nostro file principale e creiamo un nuovo livello superiore: andiamo su Modifica/Riempi, dal menù a tendina selezioniamo Pattern, e da Pattern personale selezioniamo il Pattern che abbiamo creato nel file precendete; diamo l’Ok.

Tutorial Photoshop: creare un header con skyline metropolitano

Sulle opzioni di fusione del livello, scegliamo Colore più scuro nel metodo di fusione generale.

Tutorial Photoshop: creare un header con skyline metropolitano

Non resta che aggiungere il testo, secondo le vostre preferenze, in un nuovo livello posizionato sotto il pattern, e l’immagine è pronta.

Tutorial Photoshop: creare un header con skyline metropolitano

Tutorial Photoshop: creare un header con skyline metropolitano

Alla prossima!


Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :