Il più famoso degli applicativi della Adobe, casa produttrice di software dedicati alla grafica, in ogni sua edizione ha compiuto innumerevoli progressi nel campo della manipolazione digitale di immagini e in tutte le varie declinazioni del settore, fra le quali, negli ultimi anni, quella del web. È chiaro che concepire immagini per Internet, più precisamente per un sito, non riguarda soltanto la progettazione grafica, il layout e le immagini che conterrà, ma anche tutte le operazioni utili a far si che questi contenuti visivi siano fruibili sia in termini di "peso", velocità di download, sia in termini di estetica: quest'ultimo processo, detto di ottimizzazione è concettualmente la ricerca di una giusta via di mezzo tra accessibilità ai contenuti e gradevolezza. Con Photoshop CS abbiamo non solo la possibilità di realizzare immagini e grafica, ma anche praticità e riduzione dei tempi di realizzazione delle pagine web, strumenti di ottimizzazione e salvataggio della grafica unita a strutture HTML/XHTML, oppure CSS. Tutto questo in stretta concomitanza con ImageReady CS, programma che useremo per trasformare i layout realizzati con Photoshop CS in layout divisi in immagini e pronti all'uso. Analizzeremo anche le nuove funzioni di Photoshop CS dedicate al fotoritocco, che potranno essere utili a migliorare la qualità delle immagini e che più si avvicinano alle esigenze del web publishing. Lo scopo principale di questa guida è quindi quello di raggiungere un corredo completo di immagini e un layout flessibile per le nostre pagine. Impareremo inoltre a concepirne la struttura grafica con gli strumenti di web publishing a messi a nostra disposizionea da Photoshop CS e Imageready CS. È da precisare che guida non illustra argomenti relativi all'uso ed alle funzioni basilari di Adobe Photoshop CS/ Imageready CS, quindi non ci soffermeremo su nessun argomento che introduca all'uso di questi software; tantomeno ci occuperemo di linguagi e meta-linguaggi, dei temi di usabilità ed accessibilità, per i quali consigliamo comunque uno studio approfondito essendo argomenti di fondamentale importanza.
Photoshop CS, come le sue versioni precedenti, ci permette di salvare le nostre immagini in un gran quantitativo di formati, per tutti gli usi possibili. I formati immagine più usati e riconosciuti dalla maggior parte dei browser sono chiaramente GIF, JPEG, PNG (ping); questi hanno delle particolarità che li legano a determinate situazioni in cui scegliere di utilizzarli. Photoshop CS può salvare in questi formati semplicemente attraverso il comando Salva, ma per le nostre esigenze di web publishing utilizzeremo l'interfaccia Salva per web, (ALT+SHIFT+CtrL+S). Figura 1. 
Esaminiamo gli strumenti dell'interfaccia: SETTORE A: cliccando sulle varie opzioni ci permette di visualizzare la nostra immagine nella sua versione originale, nella versione ottimizzata, in due o quattro versioni compresse in modi differenti. Scegliendo una delle opzioni descritte nel Settore C appariranno tutti i dati relativi al tipo di compressione applicata. Per apportare modifiche e compressioni alla sezione scelta basterà cliccarvi in modo da attivarla. SETTORE B: presenta una barra di strumenti che favoriscono la navigazione dell'immagine. Con la mano si può muovere l'immagine cliccando e trascinando il puntatore (la finestra di visualizzazione, Settore D, se non settata al 100% di ingrandimento visualizza solo una porzione dell'immagine). Lo strumento Selezione Sezioni permette di interagire con le sezioni dell'immagine, se presenti, e di selezionarle per avere informazioni su ogni singola area sezionata (se è la prima volta che sentite parlare di sezioni, questo argomento verrà ampiamente discusso nella guida). La lente d'ingrandimento serve per lo zoom, lo strumento contagocce per selezionare un colore dell'immagine (finalità di questo contagocce è di poter utilizzare i colori selezionati con gli aloni colorati dei formati immagine, argomento anche questo discusso in seguito), troviamo anche un selettore di colore e uno strumento per attivare o disattivare la visualizzazione delle Sezioni. SETTORE C: presenta una barra di stato con informazioni sulla immagine, quando visualizziamo due o quattro ipotesi di compressione, la barra appare per ognuna di esse. Le informazioni contenute sono: formato immagine, peso, tempo medio di download a 28,8 kbps, percentuale di dithering, algoritmo di compressione (nel caso il formato sia GIF o PNG-8), numero di colori. SETTORE D: l'immagine visualizzata con il formato di compressione corrente SETTORE E: presenta i pulsanti «Salva», «Ripristina» e «Annulla». Con il pulsante Salva salviamo le immagini con le impostazioni desiderate, con Ripristina possiamo annullare i cambiamenti e tornare alla compressione consigliata da Photoshop CS. Il tasto Ricorda serve per tornare sull'area di lavoro principale di Photoshop mantenendo le impostazioni di compressione in memoria che verranno riproposte al successivo accesso a "Salva per web". Nella parte inferiore dell'interfaccia troviamo il pulsante Modifica in ImageReady che consente di continuare l'ottimizzazione su ImageReady CS. SETTORE F: questo settore è il cuore del pannello "Salva per web". Qui troviamo innanzitutto il menu a tendina "predefinito" dove possiamo selezionare il formato con cui vogliamo salvare il nostro lavoro. SETTORE G: vi troviamo le cartelle «Tavola Colore» e «Dimensione Immagine», quest'ultima ha le stesse funzioni della maschera che troviamo nel menu principale di Photoshop sotto la voce IMMAGINE > Dimensione Immagine. «Tavola Colore» si attiva invece quando selezioniamo come formati GIF o PNG-8 e dispone di funzioni rivolte alla gestione dei colori che scopriremo insieme agli algoritmi di compressione. SETTORE H: possiede varie funzioni: percentuale di zoom, sistema di informazione colore (scorrendo con il puntatore sull'immagine abbiamo un aggiornamento continuo dei valori RGB dei colori che incontriamo con il mouse, il valore del canale Alpha, il valore esadecimale e l'indice del colore). All'estrema destra di H troviamo uno strumento che consente di visualizzare un'anteprima dell'immagine nel browser. L'anteprima è corredata dal codice HTML prodotto da Photoshop CS. Ottimizzando la grafica è necessario avere le idee chiare sullo scopo dell'immagine all'interno nella pagina. È necessario saper decidere quale file potrà subire una compressione maggiore come ad esempio una thumbnail (immagine piccola), o quale necessita di maggiore attenzione alla qualità, come una fotografia. Photoshop facilita questo compito monitorando costantemente pesi e tempi di download aggiornandoli ad ogni modifica apportata al file in fase lavorazione. Accanto alla voce "Predefinito" nell'interfaccia "Salva per web" (alt+shift+ctrl+s), troviamo alla destra del menu a tendina un'icona con una piccola freccia triangolare, cliccandoci su otteniamo alcune funzioni per l'ottimizzazione. È possibile: salvare la configurazione di ottimizzazione in un file .irs, entrerà a far parte delle voci del menù "Predefinito", cancellare la configurazione, scegliere il peso in kb del file. Photoshop adeguerà le caratterstiche di compressione ed il formato alle dimensioni scelte, aggiornare le visualizzazioni delle anteprime immagine; Gestire collegamenti tra Sezioni, nel salvataggio ottimizzato le sezioni collegate fra loro avranno la stessa configurazione. Una volta collegate fra loro, le sezioni unite cambiano colore del riquadro numerato che le contrassegna; Configurare le opzioni di salvataggio per il web e salvarle. Ci occuperemo di questa interfaccia in maniera completa nella parte dedicata alla progettazione di layout.
Ogni formato a disposizione nella maschera «Salva per il web» presenta una serie di opzioni per l'ottimizzazione. In questa lezione esaminiamo le varie possibilità che offre questo strumento per i diversi formati a partire da JPEG. Ottimizzato: riduce la dimensione del file jpeg ma lo rende meno compatibile verso altri programmi e browser Qualità: prende un valore da 0 a 100, che rappresenta la qualità a cui viene salvata l'immagine, diminuendo questo valore aumenta il fattore di perdita, caratteristico del formato JPEG che, sfruttando le mescolanze ottiche e riduce il peso a discapito della resa dell'immagine. Figura 1. Pannello per la compressione JPEG 
L'icona a destra della casella «Qualità» permette di usare canali e livelli vettoriali o di testo per l'ottimizzazione. Alla sinistra del menu Qualità, troviamo un menu a tendina che permette di selezionare in maniera veloce la qualità a cui vogliamo portare la nostra JPEG. Le opzioni possibili sono bassa, media, alta, molto alta, massima. Progressione: salva il file jpeg in formato "jpeg progressivo", scaricabile in più passaggi durante i quali il browser esegue il rendering dell'immagine mostrandola solo a caricamento completo. Questo permette, contemporaneamente, di smaltire il download delle altre parti della pagina. Sfoca: casella che accetta valori decimali da 0 a 2. Applica all'immagine una sfocatura gaussiana e allo stesso tempo ne riduce il peso, grazie alle proprietà di mescolanza ottica del formato JPEG. Profilo ICC: aumenta il peso dell'immagine ma permette di includere il profilo dello standard ICC al file JPEG. Maggiori informazioni sul consorzio ICC si trovano su Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Alone: non possedendo la gestione del canale alpha, JPEG adotta un colore chiamato "alone" nel caso vi fossero delle aree trasparenti. Queste aree verranno colorate dello stesso colore dell'alone. Il menù a tendina ci consente con le sue varie voci di selezionare un alone velocemente o di sceglierlo dalla paletta del colore.
Il pannello di ottimizzazione per il formato GIF, tra i più usati per il web, si presenta ricco di funzioni. In questa lezione cercheremo di esaminarle e di capire l'uso che se ne può fare. Figura 1. Pannello di ottimizzazione per immagini GIF 
trasparenza: abilita o meno il canale alpha del file GIF, nel caso il canale non sia abilitato e l'immagine contiene porzioni trasparenti, queste vengono riempite con un colore di Alone. Alone: consente di scegliere il colore di Alone (vedi Alone JPEG e la precedente Opzione trasparenza), se è abilitata la trasparenza e si sceglie lo stesso di dare un alone all'immagine, i contorni dell'immagine vengono tracciati con il colore di alone. Interlacciato: il file GIF interlacciato viene sottoposto ad un rendering graduale del browser, di solito l'immagine rimane incomprensibile fino a rendering completo ma migliora la capacità di download. Scegliendo questa opzione il peso dell'immagine sarà lievemente incrementato. Algoritmi di Compressione: la parte più interessante del salvataggio in GIF è senza dubbio la scelta dell'algoritmo di compressione più adatto alle esigenze del caso. Il menu a tendina ci permette di selezionare le compressioni : Percettiva: comprime l'immagine scegliendo fra i colori che la compongono quelli ai quali l'occhio umano è più sensibile. Selettiva: simile alla compressione percettiva, utilizza anch'essa i colori ai quali l'occhio è sensibile prediligendo però quelli più vicini ai colori sicuri per il web, ed è sicuramente l'opzione di ottimizzazione migliore nella maggior parte dei casi. Adattiva: analizza l'immagine e ne riconosce i colori ricorrenti campionandoli e restituendo un'immagine con un numero di colori inferiore. Ideale per immagini monocromatiche o con esiguo numero di colori, non è sempre consigliabile per il web. Restrittiva (web): approssima tutti i colori alla tavolozza websafe. Per websafe si intende un insieme di 216 colori che vengono visualizzati in modo identico sui diversi browser. Se un colore selezionato non è websafe, verrà convertito al colore websafe più vicino. Personalizzata: esclude qualsiasi algoritmo di compressione predefinito, seguendo nel salvataggio le opzioni e le funzioni che scegliamo e utilizziamo nei restanti menù a cursore e a tendina Bianco/Nero: converte i colori del file in B/N. Le sfumature vengono approssimati con gli algoritmi di dithering Scala di grigio: converte i colori del file in scala di grigio (desaturazione). MacOs: adatta i colori a quelli ideali per la visualizzazione su sistemi Mac Windows: adatta i colori quelli ideali per la visualizzazione su sistemi Windows/Unix Accanto al menù a tendina degli algoritmi di compressione è presente l'icona, già vista in precedenza, che permette di accedere alla maschera di ottimizzazione del file relativa ai testi ed alle forme vettoriali od all'utilizzo di un canale in particolare. Fattore Perdita: è possibile avere una perdita di definizione fino al 50% del peso dell'immagine. Mentre il formato JPEG sfrutta la mescolanza ottica disponendo i pixel nella tipica forma a "blocchi", GIF influenza l'immagine sfruttando lo stesso principio ma mescolando fra loro i colori dei singoli pixel e riducendone la quantità. Se l'opzione Interlacciato è attiva, non è possibile modificare il fattore perdita. Numero di Colori : è sempre opportuno, quando si ha intenzione di utilizzare il formato GIF, cambiare in fase di salvataggio il numero di colori, anche solo per osservare i cambiamenti dell'immagine: spesso le immagini sono composte da un numero di colori inferiore alle impostazioni correnti, altre volte, diminuendo drasticamente il numero di colori, l'immagine subisce perdite di definizione trascurabili. È anche possibile dare un numero personalizzato di colori semplicemente cliccando sulla casella. Percentuale di Dithering: Il dithering è l'effetto con il quale si possono mescolare colori alternando sequenze ravvicinate di pixel di colori diversi. Per esempio, volendo ottenere un rosa, si possono alternare pixel bianchi a pixel rossi. La miscela può essere ottenuta con diverse modalità: Diffusione: distribuisce i pixel in modo irregolare, attenuando bordi e colori e rendendo la miscela più naturale, più casuale. Usando il dithering a diffusione di errore è scegliere l'intensità dell'effetto usando la casella combinata «percentuale di dithering». Pattern: i colori vengono disposti secondo una trame precise a colori alternati, non è possibile la modifica della percentuale di Dithering. Disturbo: è un algoritmo di mescolanza ottica con disturbo, colori disposti in ordine casuale come se l'immagine a video fosse oggetto di un'interferenza. Dithering e trasparenza: attiva le opzioni di Alpha Dithering. Se l'immagine GIF da ottimizzare ha delle porzioni trasparenti, vi è la possibilità di applicare il Dithering nelle zone limite fra trasparenza e pixel colorati. Le immagini GIF non sono dotate della semitrasparenza e contengono soltanto pixel pienamente trasparenti o pienamente opachi. Il Dithering in questo agisce disponendo i pixel colorati delle zone limite in trame che simulano la semistrasparenza. Il Fattore Perdita GIF non è più regolabile se in una delle due specifiche degli algoritmi di Dithering/Alpha Dithering abbiamo come opzione Pattern oppure Disturbo. Fattore Dithering in trasparenza: è la casella che permette la regolazione della percentuale di Alpha Dithering e viene attivata solo con l'algoritmo di trasparenza Diffusione. Figura 2. Esempio di Alpha Dithering 
Vediamo delle immagini di esempio degli Alpha Dithering possibili, nelle quali abbiamo una sfera circodanta da un bagliore luminoso blu elettrico che varia di opacità fino alla trasparenza. Nell'interfaccia "Salva per web" sarà selezionato il formato GIF con opzione di trasparenza e come Alone un rosso #FF0000. Immaginiamo di dover salvare questa immagine per una pagina web che abbia uno sfondo nero; le immagini che seguono sono da considerare come immagini trasparenti poste sullo sfondo proposto; se ne osservi la trama ottenuta in simulazione di semitrasparenza. Queste immagini sono anche dotate di un Alone rosso : non è la soluzione ottimale per fondere la nostra figura allo sfondo di colore nero ma lo utilizzeremo per meglio identificare le trame di Dithering. Cursore Blocco Web: questa funzione è una misura percentuale relativa alla tolleranza consentita per la differenza tra i colori websafe e quelli dell'immagine. Se ne osservano gli effetti tenendo d'occhio la «Tavola Colore»: i colori vengono modificati e avvicinati il più possibile, quando di tonalità simili, ai 216 colori della tavolozza websafe. Aumentando la percentuale di Blocco Web diminuisce il numero di colori dell'immagine.
Prima di definire i formati PNG-8 e PNG-24 possiamo dare un'occhiata alla Tavola Colore. Questa sezione dell'interfaccia "Salva per web", è attiva nella ottimizzazione GIF e PNG-8. Abbiamo aspettato a trattare la Tavola Colore per assimilare prima quei concetti necessari a comprenderne appieno il funzionamento. Gli stessi concetti sulla compressione e sul Dithering/Alpha Dithering che ritroviamo anche nel formato PNG-8, molto simile a GIF. Figura 1. Tavola Colore 
In basso a sinistra notiamo subito il numero di colori attualmente in uso mentre, contrassegnati dalle lettere, più a destra troviamo i pulsanti con le funzioni fornite dalla tavola: a: rende trasparente il colore selezionato. Si possono rendere trasparenti tutti i colori desiderati. b: cliccando su questo strumento, in caso di compressione Blocco Web, i colori selezionati rimarranno nella Tavola Colore e non verranno alterati né avvicinati alla tavolozza websafe. c: blocca il colore selezionato, facendo sì che non sia eliminabile da nessun tipo di compressione o funzione. I colori possono essere di nuovo sbloccati cliccando di nuovo questo strumento. d: aggiunge alla Tavola Colore un colore selezionato con lo strumento contagocce (zona sinistra dell'interfaccia "Salva per web"). e: elimina il colore selezionato Altre funzioni interessanti le troviamo nel menù che si apre cliccando sul pulsante «Menù palette colore». Figura 2. Pulsante Menù palette colore 
Il menù presenta molte voci raggruppate. I primi cinque gruppi riguardano le stesse funzioni dei pulsanti che troviamo nell'interfaccia Tavola Colore, il sesto gruppo permette di ordinare i colori: secondo la tonalità, secondo la luminosità, secondo il numero di pixel dello stesso colore. L'ultimo gruppo permette di caricare e salvare la configurazione di Tavola Colore, in caso di riutilizzo. Per esempio immaginiamo di voler salvare immagini con lo stesso stile ed alla stessa compressione, basterà caricare il file .act che verrà creato dopo il salvataggio. Per un esempio pratico di utilizzo della tavola colore possiamo dare un'occhiata al tutorial disponibile nella sezione pro «Costruire un'interfaccia web con Photoshop» Abbiamo già detto che La tavola colore si applica al formato PNG-8. Facciamoci un'idea di come è fatto questo formato. PNG-8 (Portable Network Graphics), è un buon sostituto, libero da vincoli di brevetto, per GIF. Per esempio lavora con una profondità di 8 bit (256 colori) e non supporta le semitrasparenze, che vengono simulate con l'Alpha Dithering. A differenza di GIF, PNG-8 è del tutto "lossless", ovvero non ammette un fattore di perdita. Una delle caratteristiche interessanti dei formati PNG è che integrano un sistema di correzione gamma (luminosità), che permette di compensare, sia pure solo approssimativamente, le differenze di visualizzazione di un'immagine nel passaggio da una piattaforma hardware ad un'altra. PNG-24 Invece è molto simile a JPEG, avendo come elemento in più la possibilità di supportare le semitrasparenze. Questa particolarità delle immagini Png-24 non è però compatibile con tutti i browser, mentre lo è per esempio con il flash player. Il che consente di portare le trasparenze di PNG-24 ovunque passando per un swf, per esempio. Questo formato ha come opzioni trasparenza (che attiva le funzioni Alone) e Interlacciato, ma non presenta nessun tipo di algoritmo di compressione, creando così immagini di alta qualità ma di peso considerevole.
La versione 8.0 di Photoshop, presente nella suite CS è arricchita di nuove funzioni che rendono l'utilizzo del software più comodo e veloce e migliore la qualità dell'output. Anche la compatibilità con altri programmi e le periferiche più moderne ha subito una sensibile implementazione. Le migliorie investono la manipolazione digitale, il web publishing e l'acquisizione di immagini; in questa sede analizzeremo le nuove funzioni utili alla produzione di grafica per il web. Alcune funzioni, opzioni o filtri sono riportate anche in lingua inglese per facilitare l'apprendimento qualora si vogliano usare parole chiave specifiche sul singolo argomento. Testo su tracciato È uno strumento che in molti aspettavano. Permette di scrivere un testo su una traiettoria a piacere. In precedenza bisognava ricorrere ad altri software, come Illustrator, per ottenere lo stesso effetto. Figura 1. Testo su tracciato 
Con lo strumento «Penna» (da tastiera "p") cominciamo a creare un tracciato lineare (possiamo anche creare dei tracciati chiusi curvi o poligonali, non fa differenza). Creiamo una curva con lo strumento «Converti in punto di ancoraggio», selezioniamo lo strumento «Testo» (da tastiera "t") e portiamo il cursore del mouse a toccare la nostra curva. Il cursore cambierà forma, diventando uguale al cursore per il testo. Clicchiamo e il curosre verrà fissato sul tracciato e assumerà una inclinazione tangenziale alla curva. Corrispondenza Colore (Match Color) Questa funzione ci permette di applicare lo schema colore di un'immagine ad un'altra. La raggiungiamo da Immagine>Regolazioni>Corrispondenza Colore I campi di applicazione sono molteplici: correzione di fotografie dello stesso luogo ma con esposizioni differenti, applicazione dello schema colore di un particolare livello su altri, creazione di effetti artistici. L'interfaccia «Corrispondenza Colore» ci consente di scegliere quale livello è la sorgente dello schema di colore che verrà applicato al livello o ai livelli selezionati. Oltre allo schema di colore è possibile lavorare sulle tonalità, sulle luminosità e sulle saturazioni dell'immagine. Figura 2. Esempio di «Corrispondenza Colore» 
Filtro Fotografico Il Filtro Fotografico lavora sulle immagini proprio come farebbe un fotografo applicando un filtro colorato all'obiettivo di una Reflex, per ottenere dominanze o far virare i colori su determinate tonalità. Si può scegliere fra una vasta gamma di filtri predefiniti, oppure scegliere un colore dalla tavolozza e deciderne la densità e le prorietà luminose. Possiamo raggiungere il filtro da Immagine>Regolazioni>Filtro Fotografico. Correzione luci e ombre Dal menù Immagine>Regolazioni>Luci/Ombre raggiungiamo questo strumento, utilissimo per regolare con la massima precisione la luminosità delle immagini. Figura 3. Pannello della correzione luci/ombre 
Regolando le percentuali di ogni elemento possiamo raggiungere l'equilibrio dell'immagine da manipolare con l'opportunità di salvare le nostre scelte per riutilizzarle nei lavori successivi. Figura 3. Esempio di correzione luci/ombre 
Con le opzioni avanzate possiamo regolare il contrasto dei mezzitoni e operare una correzione colore lavorando su un intervallo di saturazione determinato sulla luminosità della selezione. Combinare immagini con Photomerge® Con Photomerge possiamo creare velocemente da un'unica immagine, vari file immagine anche di dimensioni e colori differenti. Questa funzione (File>Automatizza>Photomerge...) è utile soprattutto per creare immagini di un panorama, magari ottenuto con più scatti da cui dobbiamo ricavare un'unica immagine per la pubblicazione. Anteprima Filtri Combinati Nella Galleria Filtri (Filtro>Galleria Filtri...) possiamo combinare ed avere una anteprima in tempo reale dei filtri che applichiamo alle nostre immagini. Quando selezioniamo un filtro, sulla destra ne vengono mostrate le proprietà. La vera novità è la combinazione dei filtri: per aggiungere un altro filtro e visualizzarne l'effetto insieme al precedente basterà cliccare su «Nuovo Livello Filtro» in basso a destra. Possiamo abilitare o meno la visualizzazione dell'effetto cliccando sull'icona a forma di occhio di ogni livello filtro, analogamente ai livelli delle immagini a cui siamo abituati. È prevista anche la funzione annulla-azione (Undo - CtrL+ALT+z) per eventuali ripensamenti. Filtro Sfocatura con Lente (Lens Blur) È possibile ottenere delle sfocature che simulano quelle naturali grazie a questo nuovo filtro della categoria Sfoca (Filtro>Sfoca>Sfocatura con Lente...). La maschera permette di impostare anche i fattori di luminosità e disturbo dell'immagine e utilizzare dei canali alpha per ottenere zone con sfumature mappate. Strumento Pennello "occhi rossi" Questo strumento, raggiungibile da tastiera con "J" permette di correggere facilmente il difetto "occhi rossi" dalle fotografie. Figura 3. Esempio di uso dello strumento «occhi rossi» 
Qualsiasi progetto che preveda la diffusione o la presentazione di informazioni, di carattere testuale o visivo, deve essere organizzato secondo un preciso layout. In particolare, chiamiamo layout la struttura (grafica) e/o gli spazi nei quali vengono inseriti e distribuiti i contenuti, in questo caso di un sito. Ideare un Layout è un'operazione che richiede anzitutto una analisi della quantità, del genere dei contenuti e della trasformazione che subiranno nel tempo. Possiamo cominciare quantificando i rapporti fra gli spazi dedicati alle immagini e quelli dedicati a testo o contenuti di altro genere. Poi distribuiamo il materiale su una prima ipotesi di layout, decidendo "quanto spazio" assegnare a ciascuna tipologia. Sono quindi essenziali a questo scopo tre operazioni preliminari alla realizzazione grafica del Layout definitivo: classificazione e organizzazione delle tipologie di contenuti e altre informazioni ideare un primo layout (si consiglia per esempio di schizzarlo su carta) distribuire i contenuti precedentemente classificati nel prototipo layout L'ultima operazione, in particolare ci permette di verificare se l'ipotesi di Layout è adatta o meno alle nostre esigenze. Partire direttamente con la realizzazione grafica in digitale di un Layout è quasi sempre un passo falso perché non permette una corretta valutazione degli spazi, ancor più se siamo in procinto di creare il layout per un sito dinamico, soggetto a continui adattamenti ai contenuti estratti da basi di dati. Una volta che il progetto ci soddisfa possiamo concretizzare la nostra idea con Photoshop CS, poi passeremo a ImageReady per ottimizzare le sezioni del layout. Ma prima prendiamo confidenza con strumenti e tecniche. Per semplificarci il lavoro possiamo avvalerci di alcuni importanti accorgimenti: Lasciare la struttura del layout sempre suddivisa in livelli. Ci aiuta ad avere un controllo assoluto su ogni singolo elemento, evitando che altre parti del layout possano essere coinvolte. È sempre opportuno bloccare i livelli che non stiamo utilizzando per diminuire le probabilità di errore. Per bloccare un livello è sufficiente cliccare sulla checkbox con il lucchetto. Allineare gli elementi e delimitarli usando le guide. Utilissime le guide per avere più precisione nell'allineare gli oggetti e per delimitare gli spazi del layout. Inoltre, passando a ImageReady, le guide posizionate con Photoshop rimangono nelle loro posizioni ci aiutano a delimitare le sezioni. Se vogliamo agganciare un livello a una guida, ricordiamoci di averlo prima selezionato nella finestra dei livelli (F7 da tastiera). Controllare gli effetti indesiderati delle opzioni di fusione. Spesso, utilizzando le opzioni di fusione dei livelli e in particolare lo smusso effetto rilievo, otteniamo effetti indesiderati. Figura 1. Effetti delle opzioni di fusione 
L'immagine qui riportata e dal rilievo volutamente esagerato mostra come, sui bordi del livello, l'opzione con effetto rilievo crei veri e propri angoli e ripetizioni di rilievo perpendicolari alla direzione desiderata. Questo diventa un problema se scegliamo di dividere il layout in piccole immagini da applicare come sfondi di livelli e tabelle sfruttandone le proprietà di ripetizione. La soluzione al problema sarebbe in definitiva quella di evitare le opzioni di fusione come smusso effetto rilievo, oppure, una volta terminata la crezione del layout, unire tutti i livelli (ctrl+shift+E) e ritoccare la parte "indesiderata". Di solito quest'ultima soluzione è più opportuna, essendo queste funzioni pratiche e veloci nell'ottenere determinati effetti. Utilizzare i tracciati per le forme personalizzate e le eventuali operazioni di decoro I tracciati di Photoshop tornarno sempre utili, soprattutto quando vogliamo creare elementi grafici e decorativi riutilizzandoli a piacere in vari punti del layout. È opportuno creare il tracciato di ogni elemento la cui forma non si possa ottenere con selezioni rettangolari ed elissoidali e l'ausilio delle guide. Questo non vale per le immagini fotografiche o con un alto numero di colori, che verranno semplicemente importante e manipolate. cercare di lasciare spazi per i contenuti testuali ed evitare di scrivere testi direttamente in Photoshop Photoshop non è adatto alla gestione dei testi di una pagina web. Le operazioni di aggiornamento sarebbero eccessivamente lente e sarebbe da escludere qualsiasi tentativo di creare un sito dinamico. tranne che per quegli elementi che rimangono fissi (es. titoli o menù), è opportuno lasciare che i contenuti testuali vengano inseriti con altri strumenti (es. editor html), quindi progettare il layout riservando al testo lo spazio necessario. Anche per le immagini il discorso è simile. È sconsigliabile renderle parte integrante del Layout. Meglio riservare loro degli spazi a meno che non facciano parte della struttura del layout. Vedremo in seguito un esempio pratico, per il momento continueremo a concentrarci sugli strumenti a nostra disposizione.
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, Figura 1. pulsante ìpassa a ImageReady 
è 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. Sezione 
Mappa Immagine 
«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 Immagine 
Anteprima sul piano di lavoro 
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. Figura 2. Effetto Onion Skin 
Figura 3. Pulsante «passa a Photoshop» 
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: Figura 1. Suddivisione del layout con le guide 
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: Figura 2. Suddivisione del layout con le sezioni 
Figura 3. Dettaglio della numerazione 
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: Figura 4. Livelli con sezioni particolari 
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.
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 Figura 1. Pannello «HTML» 
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. Figura 2. Pannello «Salvataggio dei file HTML» 
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 Figura 3. Pannello «Sezioni» 
Il pannello seguente contiene delle funzioni avanzate per le «Mappe Immagine» Figura 4. Pannello «Mappe Immagine» 
Il pannello «Sfondo» consente di assegnare uno sfondo alla pagina HTML di output. Figura 5. Pannello «Sfondo» 
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. Figura 6. Pannello «Salvataggio dei file» 
Il pannello «Metadati» gestisce i metadati di ImageReady ed EXIF. Aggiunge/gestisce anche metadati XMP, supporto dei metadati attraverso la tecnologia XML Figura 7. Pannello «Metadati» 
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".
Integrare il lavoro svolto con Photoshop ed ImageReady con un software dedicato principalmente all'animazione come Macromedia Flash, richiede una ulteriore fase di ottimizzazione ed alcuni accorgimenti che non saranno ignoti a chi lavora per il web con questo applicativo: le immagini JPEG non vanno mai salvate in formato JPEG Progressivo; non sono compatibili con Flash ed altri programmi simili. nello stabilire la posizione iniziale e finale di un simbolo, in un'interpolazione di movimento (motion tween) o in una funzione che lo sposti da un punto all'altro, definire coordinate in numeri interi nell'apposita finestra d'ispezione Proprietà. non ottimizzare eccessivamente, anche se in maniera corretta, le immagini raster da importare nella libreria, se si vuole utilizzare un'ulteriore compressione durante la pubbilcazione del filmato ".swf" attraverso le impostazioni di pubblicazione (menu File). Il layout può essere importato in Flash sia come immagine intera, sia come layout sezionato. Nella seconda ipotesi è chiaro che bisogna "ricostruirlo" ovvero ricomporre tutte le immagini in una sola in quanto la suddivisione è dettata da altre esigenze d'uso. Dunque con Flash è inutile che il layout sia importato come immagine suddivisa, non avendo necessità di essere strutturato in tabelle o CSS. È invece una scelta corretta usare Actionscript per caricare dinamicamente i contenuti testuali e non. L'ulteriore fase di ottimizzazione è quella di ricreare in Flash tutti gli elementi che possono essere prodotti in vettoriale, invece di utilizzare le immagini raster prodotte da ImageReady. Vanno riprodotte in vettoriale immagini con tinte piatte oppure le campiture di sfumature lineari o radiali. Con il vettoriale di Flash è possibile risparmiare moltissimo sulla dimensione del filmato, ed anche migliorare il risultato finale in termini estetici evitando la tipica perdita di risoluzione che può subire un'immagine raster durante le interpolazioni. Nel caso le immagini raster importate siano poco adatte ad essere convertite in vettoriale, una buona tecnica in Flash è quella di posizionarle su un livello che poi blocchiamo, e "ricalcarle" con gli strumenti di disegno su un livello superiore. A lavoro finito possiamo rimuovere il livello dell'immagine raster e quest'ultima dalla libreria. Lo stesso processo è applicabile anche ad alcuni tipi di fotografie, specialmente se molto contrastate, che possono presentare grosse campiture di tinte piatte o sfumature facilmente riproducibili.
Un layout costruito con Photoshop e ImageReady quasi sempre funge da contenitore per elementi da aggiungere dopo la creazione. In questa fase diventa evidente che il codice generato dall'ottimizzazione del programma Adobe deve essere adattato alle esigenze dei contenuti che andremo ad inserire. In questa lezione esaminiamo un caso di layout generato con impaginazione a tabelle e manipolazione con Macromedia Dreamweaver. Correggere il codice Una volta esportata la pagina da ImageReady, essa si presenta come un'unica tabella nella quale ad ogni cella è assegnata un'immagine derivata da una sezione. La pagina si presenterà così : Figura 1. 
Scarica zip: Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Notiamo subito, passando alla visualizzazione Codice in Dreamweaver, che già nella porzione di codice che segue,
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per scoprire quali inadeguatezze presenta il codice è sufficiente utilizzare con Dreamweaver il comando File>Controlla Pagina>Convalida Codice. Una volta cliccato apparirà il menù di ispezione Risultati nel quale il programma segnalerà, attraverso i vari pannelli, le irregolarità da risolvere affinchè il codice sia valido e i principali browser, presi in considerazione da Dreamweaver, supportino tutti i tag e relativi attributi. Nel tutorial della parte IV della guida verranno presentate alcune delle operazioni di correzione necessarie. Correggere la struttura Una volta corretti gli aspetti di codice della pagina, proviamo a sostituire due delle aree destinate ai contenuti con dei colori di sfondo per le rispettive celle, eliminando quindi la GIF creata da ImageReady, il risultato è il seguente : Figura 2 
Scarica Zip: Perfavore,
Entra
oppure
Registrati
per vedere i Link!
nella pagina, la tabella è stata allineata al centro. Proviamo ora nell'area più grande, in azzurro chiaro, ad inserire un testo di una certa lunghezza. Vedremo che per fare spazio al testo, la cella aumenterà l'altezza, questo comportamento si riflette anche sul resto della tabella: Figura 3. 
Scarica Zip: La cella con sfondo azzurro chiaro è stata corretta per comodità con un allineamento verticale, attributo valign="top", del tag <td> La struttura della pagina si perde e l'immagine sulla sinistra, ancora non impostata come sfondo viene allineata di default a metà della cella lasciando spazi vuoti.La soluzione a questo problema si ottiene organizzando la grafica del Layout su più tabelle e non in una soltanto, come da output di ImageReady. Questa strutturazione viene sempre ragionata su "aree rettangolari" ed è un altro elemento da considerare nelle fasi di ideazione del Layout per evitare problemi legati alla quantità del contenuto ed alla sua trasformazione nel tempo. Figura 4 
In particolare la Tabella 2 è stata suddivisa in sei colonne per accogliere il menu orizzontale. È inoltre consigliato usare delle tabelle interne alle celle riservate ai contenuti per meglio organizzare ed allineare questi ultimi. Ed ecco il risultato finale, ipotizzando i contenuti dell'area in azzurro racchiusi da una sottotabella. Figura 5. 
Scarica Zip: Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Arrivati all'ultima lezione di questa guida, realizziamo il layout che abbiamo visto nella parte precedente e approfondiamo le indicazioni che abbiamo trovato fin ora trattando i vari argomenti. Utlizziamo ancora Macromedia Dreamweaver MX per correggere l'output di ImageReady e ottenere la pagina finale. Come già suggerito, schizziamo per prima cosa una bozza del Layout, preferibilmente su carta, e decidiamo gli spazi da assegnare ai contenuti, ad un probabile menù di navigazione e agli elementi grafici che rimangono costanti come i logo ad esempio. Abbiamo già incontrato il problema delle aree rettangolari. Lo abbiamo affrontato suddividendo l'immagine finale del Layout in porzioni più piccole. Bisogna tener conto di questo fattore cominciando sul nostro bozzetto a tracciare linee come se volessimo fare una sorta di prima divisione: in questo modo è possibile rendersi conto se il layout presenterà problemi durante lo slicing. 1. Realizzazione del Layout in Photoshop CS Ideato il Layout, cominciamo con l'aprire un nuovo file di Photoshop con dimensioni 760*600 pixel. Non realizzeremo in questo tutoriali un layout adattabile a qualsiasi dimensione della finestra del browser, ma lasceremo che fino alla risoluzione più comune, 800*600 px, tutta la pagina sia sempre visibile in maniera ottimale. Già dell'inizio, è utile aggiungere un livello per ogni nuovo elemento grafico, in modo da poter gestire facilmente qualsiasi parte del layout, senza dover necessariamente ricorrere a ritocchi in un secondo momento. I livelli vanno rinonimati a seconda del contenuto e bloccati quando non utilizzati, per evitare di intaccare involontariamente i livelli sui quali non stiamo lavorando e trovare velocemente la zona desiderata. Raccogliere in set i livelli con elementi simili (nell'esempio pulsanti e relativi testi) può essere un modo per risparmiare spazio nella paletta Livelli e scorrerne facilmente il contenuto. Figura 1 
Realizzare e conservare gli elementi grafici più importanti attraverso i tracciati, in modo da avere sempre la possibilità di riprodurli nel caso il risultato non sia soddisfacente o di poterne modificare forma e dimensioni con pochi click. Figura 2. tracciati 
A lavoro finito, selezionando ciascun livello (tranne i livelli contenenti testi e titoli), facciamo combaciare agli estremi delle guide che ci serviranno per delimitare le Sezioni che poi tracceremo con ImageReady CS. Ad operazione conclusa passiamo ad ImageReady (Shift+Ctrl+M) 2. Suddividere e pubblicare il Layout con ImageReady CS Le guide sistemate in Photoshop ci permetteranno di creare le nostre sezioni in maniera più veloce. Realizziamo le sezioni come già visto nelle lezioni precedenti e aggiungiamo questo piccolo accorgimento: Figura 3. Slicing 
Poniamo l'attenzione sulla sezione selezionata, la numero 12. È stata aggiunta perché così facendo otterremo, nella cartella immagini del Layout suddiviso, una piccola parte della barra in blu a sinistra, che potrà essere applicata come sfondo quando utilizzeremo Dreamweaver MX. ImageReady ovviamente salverà il tutto creando anche la Sezione 11 e la Sezione 13 come immagini, ma non faremo altro che scartarle. L'immagine della sezione 12, dovendo essere applicata come sfondo, è una parte di tutta la barra laterale blu del Layout, ma si è evitato di prenderne una porzione troppo piccola in modo da facilitare i tempi di rendering del browser. Le parti dell'immagine contrassegnate dal rettangolo fucsia indicano quali aree dovranno essere sostituite con un colore di sfondo nell'elabrazione in Dreamweaver. Usiamo le «Impostazioni di Output» di ImageReady e pubblichiamo il tutto con la funzione File>Salva ottimizzato come... 3. Ricostruire la struttura e correggere il codice con Dreamweaver mx Abbiamo visto come il codice prodotto dalla pubblicazione di default di ImageReady CS non sia conforme agli standard HTML 4.01, soprattutto quando strutturiamo il nostro Layout in tabelle. Ricostruiamo la struttura assegnando gli sfondi e le immagini di sfondo. Le quattro tabelle sono unite fra loro, di conseguenza non presentano altro codice fra i tag <table> e </table> che possa interferire e smembrare l'effetto unitario del layout. Figura 4. Risultato finale 
Nell'esempio Le tabelle sono allineate al centro con l'attributo align="center" nei rispettivi tag <table...>. Alcuni attributi dei tag non sono supportati dai browser, come alcune versioni di Netscape, presi in considerazione dal check errori di Dreamweaver (File>Controlla Pagina>Controllo browser di destinazione). Possiamo ovviare agli errori segnalati e sottolineati in rosso nel lato «Codice» ricorrendo ai CSS ed aggiungendo fra i tag di heading della pagina :
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
La classe .testo con text-align:justify risolve il problema comune anche a Dreamweaver dell'attributo align="justifyed" del tag <p>. Anche qui è sufficiente rimuovere l'attributo lasciando solamente class=testo. ----------------------------------- Fine! Fonte: Grafica.Html |
