Guida: creazione di un template web 2.0 in Photoshop – #2 Content
Articolo pubblicato il 04-12-2009. 
Categorie: Photoshop, Tutorial testuali. 
Commenti: 4.
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 
4 commenti
Francesco
dicembre 10th, 2009
Ciao innanzitutto complimenti per il Blog, molto bello e interessante… Mi rammarico di averlo scoperto solo ora, ma da quanto tempo esiste?
CIAO
Comunque ti volevo chiedere un chiariemento sulla tecnica del pixel popping. In particolare mi interessa sapere sia come si realizza in photoshop, sia poi come si rende in html css… Grazie in anticipo e ancora complimenti per il sito
Rispondi
Artedelweb
dicembre 10th, 2009
Ciao Francesco,
Siamo online da circa 2 anni però a causa di alcuni problemi siamo stati poco presenti per un pò di tempo, e solo da qualche mese siamo di nuovo completamente attivi. Il pixel popping, in Photoshop è molto semplice da creare. Si possono sfruttare vari espedienti (ad esempio si può ottenere un risultato di pixel popping anche solo da uno stile livello), però il metodo più semplice sfrutta le selezioni di 1 pixel. Ho fatto questo breve video, in modo tale da farti capire meglio: http://ri.ms/hydj
innanzitutto grazie per i complimenti
Puoi avere maggiori informazioni anche qui: http://ri.ms/xjs6
Per quanto riguarda la parte HTML/CSS, se, come nel caso di questo tutorial, si tratta di 2 "blocchi", puoi utilizzare i border. Al "blocco" superiore metti un border-bottom, mentre al "blocco" inferiore un border-top, in modo tale da creare lo stesso effetto.
Spero di esserti stato utile
Rispondi
Francesco
dicembre 10th, 2009
grazie mille della risposta e della disponibilità… rispondo solo ora perchè non ho ricevuto l'e-mail di notifica della risposta al commento nonostante avessi messo la spunta… pazienza, comunque blog fantastico, complimenti… Una domanda: si basa su wordpress?
Rispondi
Artedelweb
dicembre 11th, 2009
Mmh, sarà un problema riguardante il plug-in grazie al quale gestiamo i commenti :S
Comunque, si, si basa su wordpress..