Oggi vediamo come trasferire da Photoshop il proprio tema e creare la struttura basilare HTML/CSS. Una guida completa molto utile ed essenziale al processo di trasferimento.
Partendo da un esperienza del tutto personale vorrei affrontare un argomento che io e gran parte degli autodidatti, ipotizzo, abbiamo affrontato: sto parlando di quell’angosciante momento in cui si vorrebbe passare da quella struttura statica e, diciamocelo, superata, che libri e guide di html e css ci propongono. E’ quel momento in cui diamo vita al nostro sito su un foglio di photoshop, pieno di immagini e tante idee, e non sappiamo come concretizzare il tutto in pagine vere e proprie, è il “come” passare da tutte queste figure a nient’altro che righe di codice.
E’ un procedimento che come potete ber immaginare non ha regole fisse e, tantomeno, un procedimento unico; per questo motivo ho deciso di scrivere questo articolo in cui vi proporrò un esempio di trasferimento dal foglio di photoshop alla pagina web:
questo perché è importante che il neo-sviluppatore apprenda la logica di questo processo e, partendo da esempi come questo, possa allenarsi facendo tanta, tanta, e ripeto, tanta pratica!
Quali linguaggi mi servono?
Per passare dalle immagini al sito web è sufficiente conoscere html e css, questo perché non c’è niente di dinamico, non ci sono ancora quelle animazioni che non sono necessarie ma che possano conferire originalità al nostro risultato. Soffermiamoci però su html e css: il primo serve per dar vita alla struttura della pagina, per creare blocchi e layout che sono alla base di tutto. Il css serve invece per applicare a questa struttura ancora grezza uno sfondo, i colori e tutti quegli elementi che abbelliscono il complesso.
Piccola premessa
E’ un argomento trito e ritrito ma è meglio puntualizzarlo: quei siti “barocchi”, pieni di immagini, da sfondi unici, non fanno altro che appesantire il sito, per questo è buona norma cercare di ridurre al minimo il numero di immagini che utilizzerete e di sfruttare a pieno le potenzialità dei css.
Inoltre durante la progettazione del sito in photoshop è bene tener conto che non tutti hanno la stessa risoluzione, bisogna prevedere l’output in base a queste, tenendo conto di desktop, tablet e smartphone!
Dalla teoria alla pratica!
Passiamo alla pratica, ho preparato quindi questo template abbastanza semplice e vi spiego come poterlo realizzare.
[button link=”http://www.targetweb.it/tutorial/2012/psdtohtml/template_example.html” color=”blue” target=”blank” size=”large”]VISUALIZZA IL RISULTATO[/button]
Per prima cosa occorre schematizzare la struttura: io ho selezionato tre grandi blocchi tra cui l’header, il contenuto centrale e il footer. In caso di template più complessi saranno necessari anche sidebar e blocchi aggiuntivi vari che vi permettaranno di gestire una struttura ben organizzata! Più la struttura è organizzata bene e meno tempo impiegherete non solo nel processo di creazione ma, soprattutto, nel momento in cui dovrete apportare modifiche varie: un codice male organizzato, sporco, di certo non vi aiuterà!
Preparazione elementi Photoshop
Estraiamo dal template ogni singolo elemento grafico; escludendo titolo, menu e gli elementi del blocco centrale, tutte cose che riprodurremo attraverso i css, sono da estrarre questi elementi:
Background:
Footer
Facebook,Twitter,Rss
Come sapete la pagina web è divisa in head e body: ai fini del nostro obiettivo è sufficiente un head del genere:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="template.css" /> <title>Template di esempio - Da photoshop a css</title> </head> </code> Dividiamo subito il body nelle tre sezioni elencate prima: <code> <div id=”header”></div> <div id=”contenuto_principale”></div> <div id=”footer”></div>
E ora riempiamole singolarmente.
HTML: Header
L’header contiene solamente il titolo della pagina e un menu che ho gestito come una lista di elementi:
<h1 id="titolo">The Title</h1> <ul id="menu"> <li class="item"><div class="decoraz_item"></div><a href="#">Home</a></li> <li class="item"><div class="decoraz_item"></div><a href="#">About</a></li> <li class="item"><div class="decoraz_item"></div><a href="#">Contact</a></li> </ul>
HTML:Contenuto principale
Questo è il corpo della pagina. E’ suddiviso in altri 2 blocchi, il primo corrisponde alla scheda about me e il secondo alla scheda contact me:
<div id="about">
<p id="about_descr">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis a posuere lorem.
Proin euzismod auctor enim,
at bibendum diam posuere sit amet.
Sed varius porta porttitor.
</p>
<div id="me"></div>
</div>
<div id="contact">
<div id="linea_separazione"></div>
<label>Contact me</label>
<div id="contact_box">
<p>Contact me by following this link</p>
<a href="#" id="aereoplano"></a>
</div>
</div>
HTML: Footer
<div id="cont_footer"> <label>Template realized by Carlo Ventrella</label> <ul id="getsocial"> <li class="social"><a href="#" id="facebook"></a></li> <li class="social"><a href="#" id="twitter"></a></li> <li class="social"><a href="#" id="rss"></a></li> </ul> </div>
La struttura è definita, a questo punto non resta che gestire l’aspetto decorativo attraverso il foglio di stile (style.css). Prima di tutto definiamo lo sfondo, come vedete deve ricoprire l’intero spazio e per questo lo attribuiremo agli elementi body e html:
html,body
{
background-image:url('elementi grafici/sfondo.png');
font-family: "Noteworthy";
position: relative;
margin:0;
}
@font-face {
font-family: " Noteworthy ";
src:url('Noteworthy.ttf') format('truetype');
}
Oltre al background e lo sfondo ho definito quello che sarà il font da utilizzare principalmente nella pagina e ho annullato il margine: questo mi serve perché il footer deve ricoprire l’intera larghezza e arrivare fino alla fine della pagina.
E ora analizziamo lo stile ogni sezione.
Stile CSS: Header
Al titolo attribuisco i margini per poterlo posizionare e un ombra blu; al menu applico invece lo sfondo e gestisco l’effetto hover, sarebbe l’animazione che si attiverebbe al passaggio del mouse sull’elemento a cui questo è applicato.
#header
{
position: relative;
width:1200px;
height:300px;
margin-left:auto;
margin-right:auto;
}
#titolo
{
font-size: 90px;
color:white;
float:left;
text-shadow: 5px 5px 0px #15374a;
margin-left: 50px;
}
#menu
{
position: relative;
width:auto;
height: 65px;
float:right;
margin-top:115px;
margin-right: 50px;
}
.item
{
display: block;
float:left;
width:150px;
height:100%;
background-color: #15374a;
text-align: center;
}
.item:hover
{
background-color: #102c3c;
}
.decoraz_item
{
width:100%;
height:9px;
background-color: #567f94;
}
.item a
{
display: block;
color:white;
font-size: 27px;
text-align: center;
margin-top:3px;
}
L’header è un rettangolo di dimensioni 1200×300 (px), in cui sono contenuti il titolo e il menu rispettivamente posizionati a sinistra e a destra attraverso la proprietà float. I margini sinistro e destro sono settati a auto in questo modo il rettangolo si posizionerà centralmente.
Attenzione Per far si che il rettangolo si posizioni centralmente è necessario che a questo sia applicata la proprietà position:relative.
Del titolo c’è poco da dire, l’ho colorato e gli aggiunto un ombra blu attraverso la proprietà shadow. Del menu ho definito le dimensioni, il posizionamento, il colore, e ho gestito la proprietà hover sugli elementi di questo per colorarli (di un blu più scuro) nel momento in cui il cursore ci passa sopra.
La “decorazione” (se la vogliamo definire così) non sono altro che tre rettangoli di altezza 9px e larghezza 100%: questo significa che si svilupperanno per tutta la larghezza del loro contenitore, in questo caso gli elementi <li>.
Stile CSS: contenuto principale
Il contenuto principale è invece un rettangolo di larghezza 1200px e di altezza variabile a ciò che inseriremo: questo è a sua volta suddiviso in due rettangolo di dimensioni 100% (quindi 1200px) e di altezza minima 270px il primo e 250px il secondo (anche questo varierà in base al contenuto);
All’interno del primo rettangolo, la sezione about, sono contenuti del testo (posizionato sulla sinistra con float:left) e un immagine (sulla destra per float:right). L’immagine l’ho ruotata attraverso la proprietà di rotazione, usando le diverse precauzioni per i vari browser:
-moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); -ms-transform:rotate(5deg);
Per quanto riguarda il secondo rettangolo, la scheda contact me, ho affiancato ad un rettangolo molto sottile (680×7) la scritta ‘contact me’ in modo da separare i due blocchi. Attraverso la proprietà text-align:center, ho posizionato centralmente la frase (Contact me by …). Il link, l’aereoplano di carta, non è altro che un link a cui ho applicato uno sfondo.
Attenzione Per impostare dimensioni, posizione, background ad un link (ma vale anche per label ecc.) è necessario impostare la proprietà display:block, che permette di identificarli come blocchi.
Ecco l’intero codice del contenuto_principale.
#contenuto_principale
{
position: relative;
width:1200px;
margin-left:auto;
margin-right:auto;
}
#about
{
position: relative;
width:100%;
min-height:270px;
}
#about_descr
{
font-family: "PT Sans";
color:#a0c4d8;
width:600px;
font-size: 30px;
margin-left: 80px;
float:left;
margin-top:60px;
}
#me
{
width:250px;
height:250px;
background-color: #e2e3e3;
float: right;
margin-right: 150px;
border:7px solid #567f94;
border-radius: 3px;
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
}
#contact
{
position: relative;
width:100%;
min-height:250px;
padding-top: 150px;
text-align: center;
}
#linea_separazione
{
float: left;
width: 680px;
height:7px;
background-color: #567f94;
margin-left:80px;
}
#contact label
{
display: block;
float:right;
color:white;
font-size: 55px;
margin-top:-50px;
margin-right: 150px;
}
#contact_box
{
width:500px;
height:auto;
margin-left: auto;
margin-right: auto;
}
#contact_box p
{
font-family: "PT Sans";
color:#a0c4d8;
text-align: center;
font-size: 30px;
margin-top:100px;
}
#aereoplano
{
display: block;
width:192px;
height:114px;
background-image: url('elementi grafici/airplane.png');
margin-left: auto;
margin-right: auto;
margin-top:70px;
}
Stile CSS: Footer
Al footer applico innanzitutto lo sfondo, l’immagine ritagliata da photoshop, e aggiungo la ripetizione sull’asse x (background-repeat: repeat-x;) per consentirne la ripetizione nel caso in cui la finestra del browser risulti più larga dell’immagine del footer.
Il menu del footer con i collegamenti a facebook, twitter e all’rss è gestito attraverso l’uso di un menu, i cui elementi sono costituiti dai link a cui ho applicato lo sfondo
Dal template di photoshop ho ritagliato un’unica immagine che contiene tutti e tre i link in modo da non avere troppi file. Per utilizzare i simboli dei link singolarmente ho sfruttato l’opzione background-position dandogli come parametri left (per il simbolo di facebook), center (per il simbolo di twitter) e right (per quello dell’rss). In questo modo tutti e tre gli elementi hanno lo sfondo in comune (social.png), tuttavia ai tre elementi spetterà una parte diversa.
Ecco il codice del footer:
#footer
{
position: relative;
width:100%;
height:281px;
background-image:url('elementi grafici/footer.png');
background-repeat: repeat-x;
margin-top:100px;
}
#cont_footer
{
position: relative;
width:1000px;
height: 70px;
padding:0;
margin-left: auto;
margin-right: auto;
top:150px;
}
#cont_footer label
{
display: block;
float:left;
margin-top:10px;
color:#738e9d;
font-size: 30px;
}
#getsocial
{
float:right;
margin-top: 8px;
}
#getsocial li
{
display: inline-block;
width:58px;
height:53px;
background-color: #0b1f2a;
margin-left: 10px;
}
#getsocial li a
{
display: block;
width:57px;
height:52px;
background-image: url('elementi grafici/social.png');
}
#facebook
{
background-position: left;
}
#twitter
{
background-position: center;
}
#rss
{
background-position: right;
}
Conclusioni
[button link=”http://www.targetweb.it/tutorial/2012/psdtohtml/template_example.html” color=”blue” target=”blank” size=”large”]DEMO[/button]
[viral-download file1=”http://www.targetweb.it/download/2012/tema-psdtohtml-targetweb.zip” name1=”Scarica il tema!” url=”www.targetweb.it/da-photoshop-ad-html-css-guida-completa/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#HTML #Themes – Da Photoshop ad HTML / CSS – Guida Completa” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]
Il trasferimento è in se molto semplice, tuttavia c’è da puntualizzare che questo è solo una piccola parte del lavoro che c’è dietro la progettazione di un sito web; fino ad ora infatti il sito è statico, non ci sono pagine collegate e quindi manca di dinamicità. Il lavoro è ancora lungo ma abbiamo raggiunto l’obiettivo dell’articolo e seguendo questi piccoli consigli sarete in grado di muovervi attraverso template molto più complessi di questo. L’essenziale è fare tanta pratica!!
Ti è piaciuto l’articolo? Commenta e condividilo =)
Bellissimo, Semplice. Mi è stato di grande aiuto!