Da Photoshop ad Html – Lo Slice Tool

Photoshop è un software di fotoritocco molto flessibile e articolato, nato per l’elaborazione fotografica.

Negli ultimi tempi, soprattutto con l’avvento di Internet, si è sempre più rilevato un ottimo “strumento di lavoro” per i designer Web.

Photoshop non solo supporta i principali formati di salvataggio per immagini utilizzati per la realizzazione dei siti Internet (Gif e Jpeg), ma mette anche a disposizione del grafico strumenti che permettono di ottimizzare il suo lavoro in modo rapido e con qualità professionale.

Salvare il layout in un file Html

Tra gli strumenti a disposizione del Web Design, ce n’è uno molto utile e interessante. Questo strumento permette, dopo aver creato un layout grafico di base, di “montarlo” in formato Html, passando così da un file Psd (o Gif o Jpg), direttamente ad un file Html compilato pronto per essere personalizzato.

Nota:
per apprendere e capire al meglio le tre lezioni che seguiranno, si consideri che:

  • il corso parte dal presupposto che sia già stato realizzato un layout grafico di una pagina web. Per questo è possibile scaricare l’esempio Photostop [Zip, 54 Kbyte] utilizzato nelle lezioni
  • la versione di Photoshop utilizzata nelle lezioni è la 6.0 (versione inglese)
  • Photoshop è un programma molto flessibile, per cui è possibile raggiungere lo stesso risultato finale utilizzando strumenti e passaggi diversi. I passaggi utilizzati in questo corso sono quindi indicativi, in quanto lo stesso risultato si potrebbe ottenere in modi diversi.

Il risultato finale

Per capire al meglio le lezioni che seguiranno, è consigliabile vedere il risultato che si vuole ottenere a fine del corso, questo permette di capire meglio le fasi che seguiranno.
Si tratta di una semplice pagina web [nuova finestra] che contiene il logo di Fucinaweb.com in alto a sinistra, una barra di navigazione e un testo iniziale al centro della pagina.

L’uso delle guide

Lo strumento che permette di sezionare un layout grafico e di “montarlo” in Html è lo “Slice Tool“. Prima di iniziare a vedere nel dettaglio questo strumento, è necessario soffermarsi sull’uso delle guide.

Le guide sono un ottimo strumento per delineare in modo perfetto le parti del layout che andremo a “tagliare”.

Per prima cosa è necessario, proprio con l’aiuto delle guide, delimitare e realizzare un supporto che ci permetta di non lasciare spazi “vuoti”, e nello stesso tempo di ottenere un supporto preciso. Per farlo si seleziona l’opzione “Snap” dal menu “View“, in modo che durante la fase del “taglio” le sezioni create vadano automaticamente ad unirsi alle linee guida create in precedenza.

Una griglia creata con le guide
Utilizzando le guide creiamo una struttura che servirà come supporto per permetterci di utilizzare al meglio lo “Slice Tool

Zoom sull'immagine per aumentare la precisione
Per ottenere una precisione più elevata si consiglia di ingrandire l’area di lavoro e di regolare manualmente le linee al layout grafico.

La griglia completa
Questa è la struttura di supporto che abbiamo ottenuto con l’utilizzo delle guide (ingrandisci la griglia in una nuova finestra)

Lo Slice Tool

Una volta realizata la struttura con le guide, è il momento di passare a vedere più da vicino lo Slice Tool.

Lo Slice Tool
Dalla Toolbar di Photoshop selezionare lo “Slice Tool

Partendo dall’alto, iniziamo a delimitare il logo di Fucinaweb.com, lasciando che la selezione si unisca alle linee guida precedentemente delimitate (opzione “Snap” dal menu “View“).

La delimitazione
La prima delimitazione (ingrandisci la delimitazione in una nuova finestra)

Appena viene creata una “Slide Zone“, Photoshop delimita la zona “attiva” di colore azzurro assegnandole un numero sequenziale e creando una seconda Slice Zone di colore grigio, sotto la zona da noi creata.

Photoshop crea automaticamente una seconda “slide” per compensare il primo “taglio” che abbiamo fatto al layout, in quanto ogni parte del layout grafico deve essere “tagliata”. Se alcune parti del documento non vengono tagliate con lo Slice Tool, Photoshop taglia l’immagine creando degli spazi (spacer) che permetteranno di “riempire” la tabella durante il salvataggio del documento in Html.

Procediamo, di seguito, delimitando tutte le altre zone di nostro interesse

Le aree pronte per il taglio
Le aree attive, di colore azzurro, rappresentano il logo della futura pagina web e i quattro pulsanti della barra di navigazione (ingrandisci le aree in una nuova finestra)

Per concludere, delimitiamo a “mano” libera un’area centrare, che sarà riservata alla parte di testo di benvenuto della nostra pagina web. Lo Slice Tool è uno strumento che può essere utilizzato anche a mano libera ma si consiglia, per ottenere un ottimo risultato, usarlo insieme delle guide. All’occorenza è possibile anche ingrandire con lo zoom la “zona di lavoro”, così da ottenere una precisione millimetrica. La numerazione progressiva delle slice ci aiuta affinchè non si formino Slice non voluti.

L'ultima selezione
Questo è l’aspetto finale del nostro layout grafico dopo l’ultima selezione dell’area che conterrà il testo iniziale della pagina web (ingrandisci l’ultima selezione in una nuova finestra)

A questo punto il nostro layout grafico è stato “tagliato”, rispecchiando il più possibile la struttura finale che dovrebbe avere la tabella della nostra pagina web. Di seguito, per rendere più chiara l’idea, vengono mostrate due immagini:

  • una del layout grafico “tagliato” e pronto per essere salvato
  • una della tabella Html generata con Photoshop e con la dimensione del bordo a 1 pixel, così da vedere le celle create dallo Slice Tool.
Layout tagliato
Layout grafico “tagliato”

Pagina Html con le immagini in una tabella Html
Tabella pagina web con bordo a 1 pixel

Template Html Gratuiti


L’Open Source Web Design [nuova finestra] project incoraggia la condivisione di template Html che possano essere scaricati ed usati liberamente.
Attualmente il sito ne conta più di 500, suddivisi in 3 categorie:

  • clean – dal design chiaro e pulito
  • flashy – molto appariscenti e con molte tabelle
  • stoned – per siti da shock

Opportuni commenti all’interno del codice vi facilitano la modifica e la personalizzazione delle pagine. La visita è interessante anche solo per farsi venire qualche idea.

Xhtml o Html: quale scegliere?

Che siate un designer, un htmlista o un editor vi trovate nella condizione di scegliere tra due standard per scrivere i vostri articoli o creare i vostri template.

Da un lato il “collaudato” Html, che pur con tutti i limiti vi consente di creare pagine più o meno visibili in tutte le piattaforme.

Dall’altro Xhml, uno standard abbastanza recente e che promette di sostituire Html nel prossimo futuro.

Perché usare Xhtml
  • È compatibile con tutti i browser, non solo con i più recenti
  • Comincia ad essere supportato dagli ambienti per la creazione di codice Html (es. Macromedia Homesite 5.0)
  • È lo standard del futuro che sostituirà Html
  • Trova il suo massimo impiego insieme ai CSS (Cascading Style Sheet), standard ormai collaudato
Vantaggi nell’uso di Xhtml
  • Usato insieme ai CSS, separa lo strato di presentazione della pagina dal contenuto, rendendo il codice facilmente manutenibile e i dati riutilizzabili
  • Potreste in futuro essere costretti a convertire il vostro codice Html in Xhtml se usate XML e XSL per pubblicare i vostri articoli
  • È possibile estendere il linguaggio con moduli da usare con particolari dispositivi o, viceversa, limitare il numero di tag da usare (Xhtml Modularization)
Tipi di documento Xhtml

Esistono 3 tipi di documento Xhtml:

  • Strict: la versione con meno libertà. Va usata in combinazione ad un uso avanzato dei CSS, im modo da posizionare gli elementi all’interno della pagina. Per questo è sfronda l’Html degli attributi di posizionamento
  • Transitional: all’oggi il preferibile. Vi consente di trasformare il vostro documento Html in Xhtml con semplici correzioni (tipicamente la chiusura del tag per quei tag che non la prevedono)
  • Frameset: usato nel caso la vostra pagina sia costruita a frame
Come si scrive un documento Xhtml

Per scrivere un documento Xhtml valido è necessario che:

  • Tutti i tag Html siano chiusi
  • I tag siano scritti in minuscolo
  • Sia presente una direttiva in testa al documento che ne indichi il tipo

Convertiamo allora un semplice esempio Html nel corrispettivo Xhtml di tipo Transitional. Si tratta di una pagina contenente un’immagine ed una form:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 
 3 <html>
 4 <head>
 5   <title>Da Html a Xhtml</title>
 6 </head>
 7 
 8 <body>
 9 
10 <img src="logo.gif" width="50" height="50" alt="FucinaWeb.com">
11 
12 <form action="risultato.asp">
13   Nome: <input type="text" name="Nome" checked><br>
14   Cognome: <input type="text" name="Cognome"><br>
15   Sesso:
16   Maschio <input type="radio" name="Sesso" value="M">
17   Femmina <input type="radio" name="Sesso" value="F">
18 </form>
19 
20 </body>
21 </html>

I cambiamenti interessano i seguenti tag:

  • <img> Va terminato, essendo un tag non chiuso. Per farlo, è possibile inserire esplicitamente un tag di chiusura, come </img>.
    Esiste una seconda possibilità, che abbiamo adottato in questo caso: chiudere il tag di apertura completandolo con ” />”. È necessario
    ricordarsi di inserire uno spazio prima della barra “/” per evitare problemi di visualizzazione in browser di vecchia generazione.
  • <br> Vale lo stesso discorso del tag precedente.
  • <input> Vale lo stesso discorso del tag precedente. In più, va notato che ad un attributo deve sempre essere associato un valore. Nel caso di input box di tipo radio è possibile specificare il valore di default con l’attributo checked, senza associare un valore esplicito.
    In Xhtml, ad ogni attributo deve essere associato un valore, in questo caso checked=”checked”

In più, va cambiata la dichiarazione del documento, che diventa quella di un documento Xhtml.

Ecco l’esempio trasformato in Xhtml:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html>
 4 <head>
 5   <title>Da Html a Xhtml</title>
 6 </head>
 7 
 8 <body>
 9 
10 <img src="logo.gif" width="50" height="50" alt="FucinaWeb.com" />
11 
12 <form action="risultato.asp">
13   Nome: <input type="text" name="Nome" /><br />
14   Cognome: <input type="text" name="Cognome" /><br />
15   Sesso:
16   Maschio <input type="radio" name="Sesso" value="M" checked="checked" />
17   Femmina <input type="radio" name="Sesso" value="F" />
18 </form>
19 
20 </body>
21 </html>

Il documento è ora compatibile con lo standard Xhtml.

Conclusione

La conversione di un documento Html in Xhtml (soprattutto di tipo Transitional) è semplice e richiede poche attenzioni e nessuna nuova tecnica da imparare.
Questo, unito ai vantaggi in termini di aderenza agli standard e di separazione tra struttura e contenuto fa si che lo standard Xhtml sia la scelta
ideale per qualsiasi nuovo progetto da portare sul Web.