Dopo aver realizzato sia l’header, che il content, arriviamo ora all’ultima tappa di questa guida realizzando il footer. Questo sarà principalmente composto da un contact form e da un testo di crediti.

Footer

Sfondo

Creiamo un nuovo gruppo di nome “Footer“. Inseriamo il livello del footer all’interno del gruppo e lo rinonimiamo in “bg_footer“. Vi applichiamo questo stile livello (N.B.: bisogna spostare il gradiente verso l’alto come mostra la figura 3):

Ecco cosa dovreste ottenere:

Contact form e crediti

Creiamo un nuovo gruppo di nome “Contact form“. All’interno creiamo, grazie allo strumento rettangolo arrotondato, queste forme:

Ai campi bianchi, applichiamo questo stile livello:

Mentre al bottone azzurro, quest’altro stile livello:

Ecco ciò che otterremo:

Aggiungiamo, infine, del testo sopra ai campi, e una scritta di crediti in basso:

Ecco finito il nostro template in perfetto stile web 2.0

Potete scaricare da qui gratuitamente, il file .PSD del template Per qualsiasi domanda, o dubbio, potete scriverci nei commenti .

Prosegue la nostra guida alla creazione di un template in stile web 2.0 con Adobe Photoshop. Dopo aver completato l’header, passiamo alla realizzazione del content.

Content

Sfondo

Rinonimiamo il livello di sfondo in “bg_content“. Creiamo un nuovo livello e grazie allo strumento sfumatura (dal nero al trasparente) creiamo 2 sfumature come in figura. Abbassiamo l’opacità al 25%.

Testi e contenuti

La gestione dei contenuti, e quindi dei testi, di una pagina web deve essere intelligente ma al contempo stesso, gradevole alla vista.

Nel nostro caso, i testi saranno disposti principalmente nella zona in alto a sinistra. Creiamo quindi un campo di testo, nel quale inserire delle scritte casuali. Ecco come abbiamo disposto il testo nel nostro esempio:

Inseriamo anche un bottone di download (nel qual caso il template sia destinato alla sponsorizzazione di un software). Creiamo quindi, con lo strumento rettangolo arrotondato, il nostro pulsante e applichiamogli questo stile livello. Vi invito, inoltre, a notare l’utilizzo improprio dell’ombra interna.

Aggiungiamo sopra il bottone il testo “Download” di colore #e0fbff. Ecco cosa dovreste ottenere:

Categorie

Creiamo un nuovo gruppo di nome “Categories”. All’interno, inseriamo un nuovo livello e con lo strumento selezione, creiamo un rettangolo di colore #4f4f4f. Lo impostiamo, infine, in modalità “luce soffusa”.

Con la stessa tecnica utilizzata per il bottone di download, ne creiamo un’altro simile al precedente con sopra la scritta “Navigation”.

Su un nuovo livello, creiamo dei divisori di 1 px, sfruttando l’ormai diffusa tecnica del pixel popping, utilizzando come colori #d9d9d9 e #e8e8e8. Aggiungiamo, infine, del testo di prova.

Ecco finito il nostro content:

Per qualsiasi dubbio o domanda, potete lasciare un commento

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.

Tutorial9 ha pubblicato una collezione di utili risorse per webdesigners a cui ha dato il nome di “The Ultimate Resource Pack”. Si tratta di un’offerta limitata che avrà termine lunedì 16 novembre: infatti, fino a quel giorno sarà possibile scaricare il pack in modo gratuito. Sono presenti circa 400 esclusive icone ed un totale di 7 temi a pagamento di alta qualità per WordPress e Tumblr.
A nostro giudizio, una buona raccolta sopratutto  perchè è gratuita e messa a disposizione di tutti senza alcun costo. Per maggiori informazioni e per il download potete cliccare qui.

Link: www.radiumlabs.com

Link: www.markjardine.com

Link: www.metalabdesign.com

Link: www.atebits.com

Link: www.uidigital.com

Link: www.jasonstockman.com

Link: www.designembraced.com

Link: www.sharify.it

Link: www.blackboxrepublic.com

Link: www.goinnovate.co.uk

Molto spesso si cerca un template professionale o davvero di buona qualità per un sito di un azienda e così via, e gli unici che fanno il caso tuo sono a pagamento!
Oggi vi voglio segnalare un tempate in formato PSD davvero bello, creato da psdfreebee.com, e scaricabile gratuitamente.