In questa guida per Adobe Photoshop, vi mostrerò come creare un efficace template web 2.0 per la propria attività. Sarà suddiviso in un header (contenente logo, alcune informazioni e gallery), un content (contenente menu ed informazioni) ed un footer (contenente un contact form e dei crediti). Potete segnalarci qualsiasi errore o chiederci qualunque cosa nei commenti

Premessa sul workspace.

Lo spazio di lavoro in cui lavoriamo deve essere completo di ogni strumento che può servirci, in modo tale da non dover perdere tempo inutilmente a cercarli. Vi consiglio di utilizzare il pre-creato Web con l’aggiunta della paletta di Storia.

Creazione del documemnto.

Creiamo un nuovo documento 900×1000 px. Attiviamo lo strumento griglia (View->Show->Grid) e lo impostiamo come segue (Ctrl + K):

Iniziamo a schematizzare il nostro layout. I primi 3 “quadrati grandi” e mezzo, saranno il nostro header, i successivi 3 quadrati e mezzo il nostro content, e gli ultimi 3 quadrati il nostro footer. Possiamo quindi “livellarli” e colorarli con colori differenti. Ricordate, l’ordine e la precisione nella creazione di un template in Photoshop sono essenziali. Senza contare che sono indispensabili nel qual caso volessimo crearne la versione HTML/CSS.

Header.

Sfondo.

Iniziamo a lavorare con l’header; creiamo un nuovo gruppo di nome “Header“, rinonimiamo il livello in “bg_header” e lo coloriamo con #00677e. Apriamo lo stile del livello; assicurandoci di avere come colore di primo piano il bianco, applichiamo una sovrapposizione gradiente come in figura. Spostiamo quindi il gradiente verso l’alto (con la finestra dello stile aperta, posizioniamoci con il puntatore nel documento e spostiamo il gradiente in alto).

Spostiamoci alla voce “Bagliore interno“. Utilizzeremo il bagliore impropriamente, infatti questo ci servirà soltanto a creare un lieve effette disturbo in modo tale che l’header non risulti del tutto piatto.

Ecco cosa dovreste ottenere:

Logo e slogan.

Creiamo un nuovo gruppo di nome “Logo” da posizionare dentro il gruppo “Header“. All’interno aggiungiamo un testo; l’immagine spiega meglio di mille parole:

Applichiamo uno stile livello al testo:

Aggiungiamo, ora, un testo di slogan da posizionare al di sotto del logo. Applichiamo anche uno stile livello:

Ecco come dovrebbe presentarsi il nostro header:

Gallery

E’ il momento, ora, di focalizzarci sulla creazione del box di una possibile gallery. Questa, quindi, sarà costituita dal box centrale e da 2 freccie di scorrimento. Iniziamo creando il box centrale.

Su un nuovo livello di nome “Box gallery“, con lo strumento che preferite, creiamo un quadrato grande 2 quadrati (scusate il gioco di parole ), e lo coloriamo di bianco. Apriamo lo stile livello del quadrato e vi applichiamo questo stile livello:

Creiamo un nuovo livello di nome “Shadow” da posizionare sotto a quello del box. Utilizzando un pennello morbido di 200 px, creiamo una zona circolare colorata di nero sul livello. Apriamo la modalità trasformazione libera, e diminuiamo l’altezza della nostro cerchio colorato. Si verrà quindi a formare una sorta di ellissi molto schiacciata: la posizioniamo nella parte bassa del box e diminuiamo l’opacità a 70%.

Inseriamo un’immagine a piacere, rinonimiamo il suo livello in “Image example“, e le diminuiamo la grandezza in modo tale che sia più o meno grande quanto il box. Successivamente creiamo una maschera di ritaglio (clipping mask) tra il livello “Box gallery” e “Image example“.

Con lo strumento penna, o con delle forme predefinite, creiamo una freccia da posizionare a sinistra del box. La duplichiamo e la riflettiamo orizzontalmente posizionandola a destra del box. Infine applichiamo a entrambe questo stile livello:

Ecco cosa dovreste aver ottenuto:

Informazioni aggiuntive

Creiamo un nuovo gruppo di nome “Welcome box“. Ora passeremo alla creazione di un piccolo riquadro nel quale poter scrivere qualche breve news o informazione. Creiamo, quindi, con lo strumento rettangolo arrotondato (raggio 10px), un piccolo riquadro bianco. Abbassiamo l’opacità al 15% e applichiamo una traccia di colore nero di 1 px con 70% di opacità. Aggiungiamo sopra al box, un breve testo di colore #89c9d7 e grandezza 25pt.