Slice Tool: le opzioni

Dopo avere delimitato le zone di interesse, torniamo al nostro layout grafico e individuiamo le aree destinate ad essere salvate come “testo” (No Image) e come “immagini” (Image).
La differenza è molto semplice.

Le prime sono aree di codice Html all’interno della tabella generata dallo Slice Tool, mentre le seconde aree sono “immagini” perché la cella contiene l’immagine precedentemente tagliata.

Seguendo il nostro esempio inizieremo, partendo dall’alto, a delimitare l’immagine che compone il top della pagina.

Dalla toolbar di Photoshop selezioniamo lo “Slice Select Tool“. È uno strumento che, a differenza dello Slice Tool esaminato nella precedente lezione, non permette di tagliare ma soltanto di selezionare e ridimensionare un “taglio” attivo.

Con lo strumento di selezione rendiamo attivo il primo “taglio”, contrassegnato dal numero 1.
Selezioniamo dal menu a comparsa (tasto destro del mouse sull’area selezionata) la voce “Edit Slice Options“.

La finestra Slice Options

La funzione principale di questa finestra è quella di poter determinare le opzioni dei tag “Html” di una selezione.

Nella prima parte della finestra “Slice Options” è possibile impostare il tipo di area voluta, che per default Photoshop assegna a “Image“. Nel nostro esempio, il primo taglio è l’immagine che contiene il logo di “Fucinaweb”, quindi lasceremo selezionata l’opzione di default e andremo a determinare soltanto:

• Il nome dell’immagine (Name)
• La stringa di testo alternativa per le immagini (Alt Text)

Di seguito procederemo determinando le opzioni della top bar della pagina web. Partendo dal primo bottone che compone la top bar (Home), oltre che il nome (Name) dell’immagine e la stringa di testo (Alt Text), determineremo anche le seguenti opzioni:

• Il link del documento da richiamare (Url)
• Il nome del frame in cui deve apparire il documento collegato (Target)

In questo modo procederemo per tutti i rimanenti bottoni della top bar: “Mappa del sito”, “Chi siamo”, “E-mail“.

Per concludere la struttura della pagina web, determineremo l’area di testo della pagina.

Una volta evidenziata la “sezione” di nostro interesse, all’interno della finestra “Slice Options” selezioniamo dall’elenco a discesa “Slice Type” l’opzione “No Image“.

Come si puo notare, appare un’area di testo (Html), all’interno della quale è possibile inserire il testo che riempirà la “selezione”.

In quest’area è possibile inserire tag Html relativi alla formattazione del testo (<b>, <br>, <i>, ecc…), che saranno automaticamente inseriti all’interno del file Html generato durante il salvataggio del file.

Salvare il documento

Stabilite le opzioni di tutte le selezioni, passiamo a vedere come si salva il file.

Dal menu “File” selezioniamo “Save for Web“. A questo punto si apre una finestra di salvataggio, dove è possibile impostare il tipo di estensione (Gif o Jpg) da assegnare a ogni singola selezione.

Con lo strumento “Slice Select Tool” selezioneremo l’area di nostro interesse. Automaticamente sulla destra della finestra di salvataggio, sarà possibile determinare le opzioni relative all’immagine. Nel nostro esempio, le immagini verranno salvate con l’estensione Gif.

Selezione di Slice Select Tool

Sempre all’interno della finestra di salvataggio clicchiamo su “Output setting“: la finestra che si apre consente di personalizzare l’aspetto della pagina, definendo il tipo di codice Html creato, lo sfondo, la certella di destinazione e la nomenclatura delle aree.

Html – Il codice creato

• La formattazione Html (Formatting)
• Inserimento di commenti all’interno del codice Html per determinare l’inizio e la fine della tabella generata da Photoshop (Include comments)
• Decidere come gestire le selezioni che compongono la struttura della pagina web creata con l’uso dei Css. In questo caso Photoshop genera un Css interno al documento Html e con l’utilizzo del tag <div> ne determinerà la posizione e le dimensioni (Generate Css). In alternativa è possibile decidere di salvare le selezioni all’interno di una tabella Html determinandone gli attributi (Generate Table). Nel nostro caso useremo la seconda opzione, generando così un file Html, con al suo interno una tabella.

Background – Lo sfondo

E’ possibile determinare il colore di sfondo della pagina web generata da Photoshop, o in alternativa inserire un immagine di sfondo. Nel nostro esempio lasciamo entrambe le opzioni deselezionate.

Saving Files – La cartella di destinazione

Questa parte permette di personalizzare e di agire sul nome da assegnare alla singola immagine, oltre che decidere in quale cartella salvare le immagini che compongono la pagina web.

Slices – La nomenclatura delle aree

In questa ultima scheda della finestra di salvataggio si imposta il nome che Photoshop deve assegnare ad ogni singolo slice creato durante la selezione.

Personalizzate le opzioni di salvataggio clicciamo su “Ok” e automaticamente apparirà la classica finestra di salvataggio. Per default è attivata l’opzione “Html and images“, in questo modo è possibile salvare la pagina web completa, sia di immagini che di codice Html. In alternativa è possibile salvare solo il codice Html (nel nostro esempio solo la pagina con la relativa tabella), o solo le immagini che compongono la pagina web.

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.

Lo Slice Tool

Una volta realizata la struttura con le guide, è il momento di passare a vedere più da vicino 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“).

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

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.

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.