Passare a ImageReady
Una volta stabiliti gli elementi del layout, le proporzioni, gli spazi per le immagini ed il testo, possiamo proseguire il nostro lavoro su ImageReady, il programma dedicato all'elaborazione ed all'esportazione in HTML di contenuti web creati con Photoshop.

Da Photoshop, cliccando sul pulsante "passa a ImageReady", posto alla fine della barra degli strumenti,

è possibile continuare il nostro lavoro su ImageReady

ImageReady CS fornisce buona parte degli strumenti di manipolazione digitale presenti anche in Photoshop CS ed in più mette disposizione altri strumenti unicamente dedicati al web publishing.

Sezionee Seleziona Sezione
di questi strumenti approfondiremo ogni particolarità nella prossima lezione; essi sono i principali artefici della suddivisione del layout in parti più piccole : il primo serve a creare la sezione (suddivisione), mentre il secondo a selezionarla e modificarla.

Mappa Immaginee Selezione Mappa Immagine
il primo di questi strumenti serve a creare una Mappa Immagine, ovvero una porzione cliccabile dell'immagine nella pagina HTML. Nel menù nidificato di «Mappa Immagine» è troviamo anche le voci per creare mappe immagine circolari e poligonali.

«Seleziona Mappa Immagine» serve invece a spostare lungo l'immagine la mappa creata.

Cliccando due volte sulla mappa è possibile assegnarle un ID e l'URL collegato alla porzione di immagine e avere accesso ad altre funzioni relative alle proprietà delle tabelle.

Visibilità Mappe Immaginee Sezioni
questi strumenti permettono decidere se visualizzare le mappe immagini e le sezioni create oppure no.

Anteprima sul piano di lavoroe Anteprima browser
il primo sturmento ci permette di avere un anteprima di mappe, rollover ed altri elementi interattivi direttamente sul piano di lavoro; il secondo strumento di avere l'anteprima direttamente tramite browser : il menu nidificato, nel caso abbiamo installati più browser, ci permette di scegliere quello desiderato.

Utilizzando lo strumento sposta (raggiungibile da tastiera con "V"), possiamo notare che ImageReady, nello spostare i livelli, utilizza quella che in gergo è chiamata onion skin : il livello che subisce lo spostamento è visualizzato in semitrasparenza, lasciando una momentanea immagine di se nel punto dov'era precedentemente posizionato.



Da ImageReady possiamo tornare a Photoshop in quasliasi momento con il pulsante «Passa a Photoshop».



Slicing
Eccoci giunti al punto cruciale di questa guida, suddividere il Layout con ImageReady CS.

Per pubblicare un sito è necessario che la grafica del Layout sia suddivisa in immagini più piccole per velocizzare il download ed evitare che venga visualizzata un'unica immagine di improbabile gestione. Questa suddivisione è detta slicing.

ImageReady CS è uno dei software in grado di fare slicing: è possibile ritagliare delle sezioni sull'immagine generale del layout e separare le immagini e gli spazi.

Una volta decisa la conformazione della pagina possiamo generare un file HTML strutturato con tabelle o CSS e per ogni sezione avremo un file immagine.

La suddivisione in sezioni si ottiene con due strumenti già incontrati nella scorsa lezione: «Sezione» e «Seleziona Sezione».

Questa immagine mostra il layout elaborato in Photoshop, suddiviso con le guide che abbiamo usato per definire gli spazi e pronto per essere suddiviso e ottimizzato con ImageReady:

Passiamo a ImageReady cliccando l'apposito pulsante (o digitando la combinazione Shift+Ctrl+M ).

Appena passati ad ImageReady troviamo una unica sezione predefinita che racchiude tutta l'area dell'immagine. Abbiamo ancora le guide ma non c'è una corrispondenza diretta tra le guide e lo slicing.

La suddivisione con le guide rimane però ancora molto utile, infatti ci permette di lavorare facilmente con lo strumento «Sezione». Le guide hanno impostata, per default, una caratteristica "magnetica", significa che mentre selezioniamo l'area di una sezione e passiamo vicino ad una guida il cursore viene attratto sulla guida, favorendo una selezione più precisa e veloce.

Una volta decise le sezioni il programma di elabora il layout distribuendo immagini, sfondi o colori di sfondo, con dimensioni uguali alle sezioni che abbiamo creato, su tabelle o CSS.

Di queste immagini faranno parte anche gli spazi che consideriamo vuoti e da assegnare ai contenuti della pagina. Nella IV parte di questa guida, impareremo con un tutorial pratico come gestire queste aree "morte".

Ecco come si presenta il piano di lavoro con il Layout diviso in sezioni:

Ogni sezione creata è contrassegnata da un numero, crescente in senso orizzontale:

Lo strumento «Seleziona Sezione» ci serve, come suggerisce il nome, a selezionare una sezione esistente e modificarne le dimensioni o spostarla nel piano di lavoro.

Nello spostare una sezione dalla sua posizione originale ImageReady crea automaticamente delle sezioni vuote, contrassegnate da riquadri numerati grigi invece che blu, che seguono sempre come principio quello della corretta suddivisione in aree rettangolari e "chiudono" gli spazi eventualmente lasciati dallo spostamento.

È possibile assegnare ad ogni livello del nostro file una paricolare struttura di sezioni, in questo modo abbiamo la possibilità di creare Layout più complessi e sfruttare le funzioni di Rollover disponibili su ImageReady. troviamo la funzione cliccando con il tasto destro del mouse sul livello da suddividere.

Le icone indicate dalle frecce indicano livelli con una propria struttura di sezioni:

Inoltre possiamo assegnare delle mappe immagine ai singoli livelli ed assegnare collegamenti, impostare del testo HTML, definire immagini rollover. Ma teniamo alta l'attenzione sull'ottimizzazione: nella lezione successiva scopriremo come configurare le opzioni di ottimizzazione e creazione della pagina web che conterrà il nostro layout.


Generazione della pagina HTML
Una volta terminato di definire il layout e delimitate le varie aree in sezioni, non ci resta che salvarlo utilizzando le impostazioni di output di ImageReady.

Per impostare le modalità con le quali verranno salvate le immagini e strutturate le tabelle o il CSS della pagina web, usiamo la maschera che raggiungiamo da File>Impostazioni di Output.

Abbiamo a disposizione una serie di pannelli che possiamo scorrere premendo i pulsanti «Precedente» e «Successivo» e possiamo salvare le impostazioni o richiamare impostazioni salvate in precedenza, usando gli appositi pulsanti «Carica» e «Salva». I file risultanti avranno estensione ".iros".

Vediamo ora le principali funzioni delle Impostazioni di Output pannello per pannello:

Il pannello HTML contiene opzioni necessarie a pilotare la generazione del codice HTML. Molto utile per le scelte sulla chiusura dei tag, sulle virgolette per gli attributi e sui tag scritti in minuscolo, perché permettono la generazione di codice più vicino a XTML



Il pannello «Salvataggio dei file HTML»permette di modificare il nome del file HTML di output e di controllare la formattazione dei nomi e delle estensioni dei file.



Il pannello «Sezioni» regola l'output delle immagini derivate dalle sezioni assegnando le proprietà delle tabelle che verranno create o dei selettori CSS. Inoltre permette la formattazione dei nomi dei file



Il pannello seguente contiene delle funzioni avanzate per le «Mappe Immagine»



Il pannello «Sfondo» consente di assegnare uno sfondo alla pagina HTML di output.



Il pannello «Salvataggio dei file» assegna e formatta il nome alle immagini di output, ne specifica l'estensione, permette di scegliere il nome della cartella in cui verranno salvate e stabilisce l'eventuale compatibilità dei nomi con i sistemi operativi Mac e Unix.




Il pannello «Metadati» gestisce i metadati di ImageReady ed EXIF. Aggiunge/gestisce anche metadati XMP, supporto dei metadati attraverso la tecnologia XML



Una volta controllate tutte le impostazioni e presa coscienza del risultato finale, possiamo utilizzare la funzione File>Salva ottimizzato come... e salvare la nostra pagina. Nel menù a tendina della finestra che si presenterà, possiamo scegliere se salvare solo la pagina come file html, solo le immagini o entrambe

Anche dopo aver modificato le Impostazioni di Output e salvato il nostro Layout come pagina web/immagini sezionate, è possibile continuare a lavorare in ImageReady e salvare le modifiche apportate evitando di settare di nuovo queste impostazioni e aggiornando l'output con la funzione che troviamo in File>Aggiorna Html

Altre forme possibili di Output del menu nidificato File>Esporta sono quella di salvare ogni singolo livello come file a se, oppure il tutto in formato Macromedia© Shockwave Flash ".swf".



Link ultime tre lezioni

Integrare con Macromedia Flash
Integrare con Dreamweaver
Realizzazione del layout