Scarica il programma del master di web design in Pdf - GattosulWeb

Master di Web Design & Communication 

STUDIO 

MASTER DI WEB DESIGN & COMMUNICATION 

Considerazioni iniziali 

Il master di web design costruirà la tua professionalità nel creare siti web di alto livello, cioé su layout grafici 

moderni, contenuti studiati professionalmente e indicizzabili dai motori di ricerca, effetti, animazioni, interazione 

con linguaggi di programmazione, social network, blog, accessibilità certificata w3c: in poche parole 

siti web vendibili sul mercato. 

Che un sito web utilizzi tecniche e servizi per l’utente attuali, è di fondamentale importanza: i corsi di web 

design dello studio GattosulWeb utilizzano layout grafici interamente costruti con Xhtml (o il nuovissimo 

Html 5) e con i fogli stile a cascata Css, in conformità con il World Wide Web Consortium W3C. 

Ovviamente tutto su Adobe Creative Suite 5, Apple Imac e Tavoletta grafica Wacom per ogni allievo. 

1


STUDIO 

MODULO DI 

Adobe Photoshop Cs5 

Step 1 • Elaborazione delle immagini. 


20 ore di lezione 

DESCRIZIONE DEL MODULO 

Adobe Photoshop Cs5, forse il software più conosciuto della Creative Suite 5, rappresenta lo strumento in 

assoluto più utilizzato dai fotografi e dai professionisti dell’immagine (quindi anche grafici e web designer) al 

mondo. 

In questo modulo vengono trattate tutte le tecniche per poter creare, gestire, organizzare, elaborare le immagini 

per il mondo del web design professionale. Questo software oltre che rappresentare lo standard dell’elaborazione 

digitale delle immagini, è uno strumento indispensabile per qualsiasi web designer professionista, 

che deve saper creare layout web efficaci anche con l’ausilio degli oggetti di Illustrator Cs5, oltre ovviamente 

a ritoccare il colore, creare fotomontaggi ed elementi grafici efficaci per i propri siti web. 

2


STUDIO 

PROGRAMMA DIDATTICO 




Area di lavoro di photoshop 

L’area di lavoro consente di ottimizzare la propria creatività senza perdere tempo prezioso nella ricerca di 

strumenti e quant’altro. Significa partire con il piede giusto. 

Nozioni di base sul software. Pannelli e menu. Panoramica sugli strumenti. I righelli, la griglia e le guide. Settaggi predefiniti, plug-in e preferenze. 

Annullare e il pannello Storia. Memoria e prestazioni. 

Apertura e importazione di immagini 

In questa sezione del corso di Photoshop, capirai che cosa sono le immagini e come vengono rappresentate 

in digitale, sia dal punto di vista del colore che della risoluzione. Imparerai inoltre ad acquisire le immagini 

(fotocamera RAW e scanner) e ad elaborarle in maniera corretta per il tipo di output. 

Nozioni di base sulle immagini. Immagini per la stampa e immagini per il web. Dimensioni e risoluzione dell’immagine. Metodi di colore. 

Conversioni tra i metodi di colore. Scelta dei colori. Gestione del colore. Creare, aprire e importare le immagini. Inserimento dei file. 

Immagini HDR (High Dynamic Range). Acquisire in formato RAW. Lo scanner piano e a cilindro. Software di acquisizione. Difetti della 

scansione. Capacità ottica e risoluzione. Ingrandimenti di fotografie. Scansione da materiale stampato (retinatura). 

3


STUDIO 




Formato Raw e negativo digitale DNG 

Il formato RAW è il minimo per poter scattare in digitale con un po di professionalità e per superare i “difetti” 

di questa nuova tecnologia: le macchine fotografiche digitali hanno infatti il problema della luce, in assenza 

della quale non riescono ad ottenere immagini affidabili. Il passaggio per questo formato ti consente di recuperare 

molto dalla tua foto, prima ancora che venga scritta definitivamente. 

Il formato RAW. Il formato DNG (negativo digitale). Regolare esposizione e toni in Camera RAW. Eliminare i difetti della foto digitale. Correggere 

aberrazione cromatica e difetti delle lenti. Aprire e salvare l’immagine su Photoshop. 

Nozioni di base sul colore 

Senza nozioni sul colore non si può adoperare Photoshop professionalmente. Colore in CMYK (quadricomia), 

in RGB, Lab, scala di grigio, bitmap, sono caratteristiche che bisogna conoscere al di fuori dell’uso del 

programma, per poi interfacciarsi con esso in maniera corretta. Oltre ai metodi di colore occorre la capacità 

di elaborare uno schema di colori adatto alle proprie esigenze e saperlo convertire per ogni utilizzo. 

Sintesi additiva e sottrattiva del colore. Spazio colore CMYK e RGB. Conversione tra quadricromia e RGB. Il metodo Lab. Scala di grigio e 

bitmap. 

4


STUDIO 




Regolazione di colori e tonalità 

Qui passiamo all’elaborazione reale dell’immagine (dal punto di vista del colore). Capire istogrammi, valori 

dei pixel, correggere i toni ed i contrasti, far corrispondere i colori tra più immagini, fino ad applicare effetti 

personalizzati. È importante, in un progetto pubblicitario rendere bene il prodotto, anche da questo punto 

di vista. 

Visualizzazione degli istogrammi e dei valori dei pixel. Lavorare con le regolazioni del colore. Regolazione dei colori e dei toni dell’immagine. 

Preparazione delle immagini per la stampa. Corrispondenza, sostituzione e miscela dei colori. Effettuare regolazioni rapide nelle immagini. 

Applicazione di effetti speciali di colore alle immagini. 

Ritocco e trasformazione 

Gli strumenti per il ritocco e la trasformazione di un’immagine, riguardano la possibilità di sfruttare le immense 

possibilità di Photoshop Cs5, per regolare i difetti delle nostre foto, da numerosi punti di vista: il quadro 

e la dimensione, la distorsione ed il disturbo, nitidezza e sfocatura, trasformare e ridimensionare elementi, 

generare immagini in prospettiva e foto panoramiche. 

Regolazione di area di ritaglio, rotazione e quadro. Ritocco e riparazione delle immagini. Correzione della distorsione e del disturbo di 

un’immagine. Regolazione della nitidezza e della sfocatura dell’immagine. Trasformazione degli oggetti. Ridimensionamento in base al 

contenuto. Filtro Fluidifica. Fuoco prospettico. Creare panoramiche. 

5


STUDIO 




Selezioni e maschere 

Ecco lo strumento che farà la differenza tra un principiante e voi! Saper selezionare, creare maschere e canali 

alfa rappresentano i sistemi per poter dire a Photoshop dove lavorare e con quale precisione. Grazie alle tecniche 

di selezione saprete utilizzare al 100% le potenzialità degli strumenti visti finora e anche di più. 

Creazione di selezioni. Regolazione delle selezioni di pixel. Spostamento e copia dei pixel selezionati. Eliminazione ed estrazione degli oggetti. 

Canali di colore. Salvataggio delle selezioni e utilizzo delle maschere. Canali alfa e selezioni sfumate. 

Livelli e fotomontaggio 

La base del fotomontaggio. Se fino a questo punto ci siamo occupati del colore e degli effetti, ora occorre 

saper gestire i livelli e poter creare le immagini di cui abbiamo bisogno, grazie alle tecniche di fotomontaggio. 

Il tutto verrà reso reale grazie agli effetti fotorealistici di cui questo software è particolarmente dotato. 

Nozioni di base sui livelli. Selezione, raggruppamento e collegamento dei livelli. Spostamento, sovrapposizione e blocco dei livelli. Gestione 

dei livelli. Impostazione delle opzioni di fusione e opacità. Stili ed effetti di livello. Livelli di regolazione e riempimento. Modifiche non distruttive. 

Composizioni di livelli. Maschere di livello. 

6


STUDIO 




Colorare e disegnare 

Colorare e disegnare con Photoshop è utilissimo per dare un tocco di realismo alle nostre composizioni. 

Grazie agli strumenti di pittura di Photoshop potrai esprimere al massimo le tue doti creative. Vedrai inoltre 

l’utilizzo degli strumenti vettoriali. 

Strumenti di pittura. Pennelli predefiniti. Creazione e modifica dei pennelli. Metodi di fusione. Sfumature. Applicazione di riempimento e 

traccia a selezioni, livelli e tracciati. Creare e gestire i pattern. Disegnare le forme in vettoriale. Disegnare con lo strumento penna. Gestire i 

tracciati. Modificare i tracciati. Convertire i tracciati in bordi di selezione e viceversa. Aggiungere colore ai tracciati. 

Utilizzo della tavoletta grafica 

Durante tutto il corso ogni alunno ha una tavoletta grafica Wacom con la quale scoprirà funzionalità avanzatissime 

all’interno di Photoshop Cs5. Tutti gli strumenti di pittura e di selezione hanno infatti il supporto 

per la pressione della penna: grazie a questo potrai velocizzare le tue selezione e disegnare con più precisione 

le tue grafiche. 

Nozioni sulla tavoletta grafica. Sistema di puntamento assoluto e relativo. Regolazione della tavoletta e della pressione della penna grafica. 

Gli strumenti di pittura con la pressione della penna. Strumenti di selezione avanzati con il supporto della tavoletta grafica. 

7


STUDIO 




Filtri 

I filtri sono una raccolta di effetti “preconfezionati”, ma le caratteristiche di Photoshop Cs5 consentono di 

utilizzarli, di personalizzarli e di miscelarli tra loro consentendo un livello di creatività comunque personale. 

Nozioni di base sui filtri. Presentazione degli effetti dei filtri. Applicare filtri specifici. Aggiungere effetti di luce. Miscelare i filtri. Applicare i 

filtri avanzati. 

Il testo 

Anche il testo, sebbene sia prerogativa della grafica vettoriale e quindi dei software di grafica e impaginazione, 

ricopre un ruolo ben definito su Photoshop. Qui imparerai a produrre elementi testuali grafici di forte 

impatto creativo e con effetti fotorealistici. Gestire il testo all’interno di un logo o di una grafica deve esserti 

inoltre possibile per sfruttare gli effetti grafici di questo software. 

Creazione del testo - Modifica del testo - Formattazione dei caratteri - Font - Spaziatura tra righe e caratteri - Ridimensionamento e rotazione 

del testo - Formattazione dei paragrafi - Creazione di effetti di testo - Testo asiatico 

8


STUDIO 




Video, animazioni e grafica 3D 

Con le nuove versioni di Photoshop si possono animare i livelli con una tilmeline professionale (come After 

Effects o Flash) e creare oggetti tridimensionali animati. 

Video e animazioni. Importazione di file video in Photoshop. Colorazione e modifica dei fotogrammi e dei livelli. Uso della timeline. Anteprima 

dei video ed esportazione. Esportazione per Flash e per After effects. Area di lavoro 3D. Disegno 3D. Rendering 3D e salvataggio. 

Salvataggio ed esportazione delle immagini 

Per ogni argomento esiste una tipologia di salvataggio che abbiamo gà analizzati nei punti precedenti. Qui 

faremo un punto della situazione, vedrai come salvare in formato PDF. 

Salvataggio delle immagini - Salvataggio dei file PDF - Salvataggio ed esportazione di file in altri formati - Formati di file - Metadati e note 

- Inserire immagini di Photoshop in altre applicazioni 

9


STUDIO 




Stampa 

Anche Photoshop ha caratteristiche di stampa che valgono la pena di essere affrontate, soprattutto in ambito 

di fotografia. Vedrai inoltre come interfacciare il tuo lavoro su photoshop per la stampa tipografia e 

serigrafica. 

Stampa da Photoshop. Stampa con la gestione del colore. Stampa a getto d’inchiostro e stampa laser. Il retino tipografico e la stampa di 

immagini CMYK in tipografia. Come ottenere una stampa da serigrafia artistica. 

Grafica per Web 

Qui imparerai a produrre un layout da esportare per il web. Photoshop ha tutti gli strumenti e le possibilità 

per lavorare professionalmente anche nel campo del web design. 

Lavorare con la grafica per il Web. Divisione in sezioni delle pagine Web. Modifica delle sezioni. Opzioni di output delle sezioni. Ottimizzare 

le immagini. Opzioni di ottimizzazione della grafica per Web. Impostazioni di output per la grafica per Web. 

10


STUDIO 




Automazione delle operazioni 

L’ultimo punto non è mai il meno importante. Saper risparmiare tempo automatizzando le operazioni è necessario 

se si vuole lavorare guadagnando! Non penserete mica che che elaborare un flusso di 1000 immagini 

e convertirle per il web o per la stampa ci possa volere una settimana? Noi lo faremo 5 minuti. 

Automazione con le azioni. Creazione delle azioni. Elaborazione di un batch di file. Creazione di grafica basata su set di dati e variabili. 

Script. 

11


STUDIO 

MODULO DI 

Adobe Illustrator Cs5 

Step 2 • Grafica vettoriale per il web. 




Adobe Illustrator Cs5 è il software dedicato alla grafica vettoriale e al disegno creativo più potente che esista 

oggi. È uno standard da sempre per i disegnatori e i grafici creativi, ma oggi sebbene sia sempre stato un software 

dedicato alla stampa, può lavorare completamente per il web. Bisogna solo scegliere se destinare il progetto 

a Dreamweaver o a Flash, per non parlare delle possibilità offerte dal nuovissimo Flash Catalyst (di cui ci 

sarà presto un corso specifico), per la creazione di interfacce Flash e banner interattivi senza l’utilizzo di codice. 

La gestione delle tavole da disegno ti consentirà inoltre di creare le grafiche per il tuo sito tutte in un unico 

file. 

12


STUDIO 

PROGRAMMA DIDATTICO 




Area di lavoro di illustrator 

Anche in Illustrator Cs5 l’area di lavoro rappresenta il sistema per poter iniziare a lavorare correttamente e 

con gli strumenti pronti all’uso, senza perdite di tempo inutili! 

Nozioni di base sull’area di lavoro. Personalizzazione dell’area di lavoro. Strumenti. Panoramica degli strumenti. File e template. Utilizzo di 

più tavole da disegno. Visualizzare i disegni. Righelli, griglie, guide e indicatori di ritaglio. Impostazione delle preferenze. 

Impostazione corretta del documento 

Impostare correttamente un documento è importantissimo per qualsiasi utilizzo se ne debba fare. Stampa, 

web design, video, illustrator può fare tutto e con la nuova versione Cs5 sono state aggiunte funzionalità a 

riguardo molto interessanti. 

Impostazione delle tavole da disegno. Segni di taglio e abbondanza. Risoluzione degli effetti raster. Metodi di colore. Grafica bitmap e grafica 

vettoriale. Comprendere i formati per la stampa. Comprendere i formati per il web. Il formato per Flash Catalyst 

13


STUDIO 




Disegno 

Il disegno è il punto forte di questo software, e la grafica vettoriale è il sistema più creativo per disegnare con 

il computer. Disegnare forme con i tracciati, operare con essi, utilizzare tutti gli strumenti, ricalcare grafiche 

da modificare, disegnare in prospettiva (novità Cs5), gestire i simboli grafici e sfruttarli al meglio per le nostre 

composizioni. 

Elementi fondamentali di disegno. Disegno di linee e forme semplici. Disegno con lo strumento matita. Disegni con lo strumento penna. 

Modifica dei tracciati. Ricalco dinamico di un disegno. Simboli. Strumenti simboli e set di simboli. Disegno di riflessi. Disegno di oggetti in 

prospettiva. 

Colore 

Dobbiamo sempre fare riferimento alle tecniche di finalizzazione del lavoro che comprendono la gestione 

del colore per la stampa, per il web e per il video editing. In Illustrator abbiamo inoltre la possibilità di sfruttare 

i colori ®Pantone e la grande varietà di librerie affini. 

Il colore. Selezione dei colori. Utilizzo e creazione dei campioni. Utilizzo dei gruppi di colore (armonie). Il colore nella stampa tipografica e 

digitale. Il colore per il web design. Il colore in ambito video editing. Utilizzare i colori @Pantone. 

14


STUDIO 




Colorare con Illustrator 

Un conto è conoscere il colore, un altro conto è saperlo utilizzare sulle nostre grafiche. Pitturare, ricolorare 

attraverso la pittura dinamica (magari con un disegno creato a mano da noi), sfumare, creare le trame sfumate 

(caratteristica da sempre peculiare di Illustrator) e applicare pattern o pennelli: questo è ciò che tratteremo 

qui. 

Colorare con riempimenti e tracce. Gruppi di pittura dinamica. Pennelli di Illustrator. Metodi di trasparenza e fusione. Sfumature, trame 

sfumate, pattern. Strumento ricolora grafica. 

Selezione e disposizione degli oggetti 

Selezionare gli oggetti su Illustrator non è difficile, ma saperlo fare in velocità e sicurezza è altra cosa. Dobbiamo 

inoltre saper far ruotare, riflettere e trasformare, allineare, distribuire gli oggetti anche grazie all’utilizzo 

corretto e completo dei livelli. 

Selezione degli oggetti. Raggruppamento ed espansione degli oggetti. Spostamento, allineamento e distribuzione degli oggetti. Rotazione 

e riflessione degli oggetti. Utilizzo dei livelli. Bloccare, nascondere ed eliminare gli oggetti. Sovrapposizione degli oggetti. Duplicazione degli 

oggetti. Altre funzioni e automatismi utili. 

15


STUDIO 




Rimodellamento degli oggetti 

Nel corso di Adobe Illustrator Cs5 imparerai a “stravolgere” i tuoi disegni, ma con sapienza e padronanza 

delle tecniche. Potremmo creare quindi fusioni e anche oggetti in 3D applicandoci sopra le nostre grafiche. 

Trasformazione degli oggetti. Ridimensionamento, inclinazione e distorsione degli oggetti. Rimodellare con gli involucri. Combinare gli oggetti. 

Taglio e divisione degli oggetti. Maschere di ritaglio. Fusioni di oggetti. Rimodellamento degli oggetti con gli effetti. Creazione di oggetti 

tridimensionali per estrusione e rivoluzione di tracciati. Applicare grafiche sugli oggetti 3D. 

Utilizzo della tavoletta grafica 

Durante tutto il corso ogni alunno ha una tavoletta grafica Wacom con la quale scoprirà funzionalità avanzatissime 

all’interno di Illustrator Cs5. Molte funzionalità sono più efficienti con la tavoletta grafica e lo strumento 

“pennello tracciato chiuso” ti consentirà di disegnare a mano libera. Potrai inoltre utilizzare tutti gli 

strumenti di modellazione con l’ausilio della pressione della penna, senza perdere tempo in noiosi cambi di 

dimensione dei pennelli. 

Nozioni sulla tavoletta grafica. Sistema di puntamento assoluto e relativo. Regolazione della tavoletta e della pressione della penna grafica. 

Strumento “pennello tracciato chiuso” e funzionalità avanzate. Uso della gomma sui tracciati vettoriali. Uso degli strumenti di modellazione 

con la pressione della penna. 

16


STUDIO 




Importazione, esportazione e salvataggio 

Illustrator nasce anche e soprattutto come strumento di passaggio per vari utilizzi finali: possiamo cioè creare 

grafiche e usarle nell’impaginazione, nell’editoria, nell’animazione per il web, il CAD o addirittura nel montaggio 

video. Tutto sta a conoscere i formati e i medoti per poterci lavorare correttamente. 

Importazione dei file. Importazione delle immagini bitmap. Importazione dei file Adobe PDF. Importazione di file EPS, DCS. Importazione 

di immagini di Photoshop. Salvataggio dei disegni. Esportazione dei disegni. Creazione di file Adobe PDF. Opzioni Adobe PDF. Informazioni 

file e metadati. 

Testo 

La gestione del testo è fondamentale in un’impaginazione. Se un grafico non sa gestire un “lettering” o un 

testo in paragrafo non è degno di tale qualifica. Anche nel mondo del web design e del video editing è importante 

saper gestire i testi. 

Importazione del testo. Creazione di testo indipendente e in area. Creazione di testo su un tracciato. Ridimensionamento e rotazione del 

testo. Dizionari per il controllo ortografico e la sillabazione. Font. Formattazione del testo. Spaziatura di righe e caratteri. Caratteri speciali. 

Formattazione dei paragrafi. Sillabazione e interruzioni di riga. Tabulazioni. Stili di carattere e di paragrafo. Esportazione del testo. Creazione 

di font compositi. 

17


STUDIO 




Creazione di effetti speciali 

Non volevamo stupirvi con effetti speciali, ma ci abbiamo ripensato! Anche perchè questo software offre 

numerose possibilità creative e sempre modificabili, grazie alla funzione dell’aspetto, importantissima! 

Il pannello aspetto e gli attributi di aspetto. Lavorare con gli effetti. Ombre esterne, bagliori e bordi sfocati. Creazione di schizzi e mosaici. 

Stili di grafica. 

Grafica e impaginazione per la stampa tipografica e digitale 

Questo è un modulo pratico imparerai a veri lavori per la stampa e per il web design, fondamentale per mettere 

in pratica le nozioni imparate finora. 

Impaginazione e creazione di elementi grafici. Progettazione di un logo e linea grafica aziendale. Formati di stampa più comuni. Le multipagine 

per cataloghi e brochures. Impostazioni dei documenti per la stampa. Creazione di elementi grafici per il web. 

Automatizzare le operazioni 

Anche su Illustrator è possibile automatizzare le operazioni registrando le azioni. Utilissimo per lavorare in 

maniera più veloce. 

Lavorare con le azioni. Creare grafica basata su dati e variabili. Script. 

18


STUDIO 




Grafici 

Illustrare graficamente dati provenienti da software esterni come Excel o altri, è possibile: ovviamente con le 

caratteristiche decorative e grafiche di Illustrator! Diagrammi e grafici a torta non saranno più noiosi e poco 

leggibili. 

Creazione di grafici e importazione dei dati. Formattazione dei grafici e dei grafici a torta. Aggiunta di immagini e simboli grafici. 

Stampa da illustrator 

Su Illustrator possiamo creare agevolmente PDF modificabili (è un formato nativo per questo software) dedicati 

alla stampa digitale, oppure creare file ®Postscript da trasformare in Pdf con Acrobat per la stampa in 

tipografia. In entrambi i casi occorre conoscere le teniche di stampa e quindi creare un file compatibile. 

Impostazione dei documenti per la stampa. Stampa delle selezioni colore. Segni di stampa e pagine al vivo. Stampa PostScript. Stampa 

di sfumature, trame e fusioni di colore. Stampa e salvataggio di un disegno con trasparenza. La stampa digitale e la stampa tipografica. 

Foratura e Sovrastampa. Predefiniti di stampa. 

19


STUDIO 




Grafica per il Web 

Creare grafica per il web è un’altra di quelle caratteristiche che ha subito nel tempo un’enorme evoluzione, 

all’interno di Adobe Illustrator. Vedremo anche come si realizza un documento importabile in Flash Catalyst 

per creare un’interfaccia web. 

Come ottenere risultati ottimali nella creazione di grafica per il Web. Sezioni e mappe immagini. SVG, grafica vettoriale per il web. Creazione 

di animazioni. Ottimizzazione delle immagini. Opzioni di ottimizzazione della grafica per Web. Impostazioni di output per la grafica 

per Web. Creare simboli per Flash. Creare un layout per Flash Catalyst 

20


STUDIO 

MODULO DI 

Adobe Flash Professional Cs5 

Step 3 • Animazioni e contenuto interattivo. 

Adobe Flash Cs5 



Benchè recentemente forte oggetto di discussione per i problemi di accessibilità in ambito web di questa 

tecnologia, oggi Flash rimane comunque una componente essenziale qualsiasi web designer, oltre ad uno 

strumento fondamentale per creare banner, elementi interattivi e video player personalizzati. È inoltre possibile 

creare un intero sito web con questo software, grazie anche all’interazione dei linguaggi di programmazione 

Actionscript 2 e 3. 

21


STUDIO 




Area di lavoro 

Diverse aree di lavoro sono presenti all’interno di Flash perché molteplici sono gli utilizzi che di questo software 

se ne può fare. Noi utilizzeremo un’interfaccia da designer anche se faremo riferimento spesso al codice: 

sarà quindi opportuno saper settare pannelli e strumenti nel modo più appropriato. Capire l’utilizzo dello 

stage e della linea temporale di Flash sarà poi fondamentale per lavorare in qualsiasi ambito. 

Flusso di lavoro e area di lavoro di Flash Cs5. Uso dello stage e del pannello Strumenti. La linea temporale e l’animazione (concetti). Uso 

dei pannelli di creazione Flash. Accessibilità dell’area di lavoro di Flash. 

Creazione del documento 

Creare un progetto in Flash passa per l’utilizzo dei suoi formati e delle sue possibilità di interfacciarsi con gli 

altri programmi. Utilizzerai immagini di Photoshop e simboli creati in Illustrator all’interno di Flash con la 

possibilità di rimodificarli al volo (funzione nuova Cs5 per gli oggetti di Photoshop). 

Impostazione corretta del documento. Actionscript 2 e Actionscript 3 (differenze). Impostazioni di pubblicazione. Formato fla, swf e altri. 

IMpoortazione e gestione degli oggeti di Illustrator e le immagini di Photoshop. 

22


STUDIO 




Creazione e modifica di elementi Flash 

Flash consente di lavorare in maniera nativa con la grafica vettoriale, ma in un modo diverso per molti aspetti. 

Saper utilizzare i metodi di disegno di Flash può venire utile durante il processo di lavoro. 

Disegno vettoriale con Flash. Rimodellare gli oggetti. Spostamento, disposizione ed eliminazione di elementi grafici. Colori, gradienti e tratti. 

Grafica 3D. 

Uso di simboli, istanze ed elementi di libreria 

La libreria ed i relativi simboli sono gli oggetti di Flash più comunemente usati. Animazioni, pulsanti, video, 

immagini passano tutti di qui. Occorre usare bene questi strumenti anche per ottenere un file swf leggero, 

per la pubblicazione sul web. 

Operazioni con i simboli. Operazioni con istanze di simboli. Operazioni con la libreria e compressione immagini. Condivisione di elementi 

di libreria. Operazioni con i simboli di pulsante. Modifica in scala e memorizzazione in cache dei simboli. Simboli e ActionScript. 

23


STUDIO 




Linee temporali e animazione 

Qui imparerai ad animare i tuoi oggetti e a sfruttare quindi le caratteristiche più importanti di questo software. 

Compresa la nuova gestione della linea temporale con l’editore movimento. 

Operazioni con le linee temporali. Operazioni con le scene. Linee temporali e ActionScript. Fondamenti delle animazioni. Interpolazioni 

di movimento. Editore Movimento. Operazioni con le interpolazioni classiche. Animazione fotogramma per fotogramma. Interpolazione 

di forme. I livelli maschera. Uso della cinematica inversa. Armatura e ossa. Effetti molla agli ossi. 

Actionscript 2 e 3 

La parte di Actionscript riguarda il linguaggio di programmazione di Flash; quando parliamo di interattività, 

infatti, dobbiamo tenere presente che occorre “programmare” il comportamento di ogni oggetto anche in 

funzione di cosa farà l’utente. Non sarà un corso di programmazione, ma vedrai le caratteristiche di questo 

linguaggio utili a diventare un web designer di livello e soprattutto per poter creare un sito completo in Flash. 

Con la versione Cs5, inoltre, potrai finalmente usare il linguaggio Actioscript 3 anche se non sei un programmatore, 

sfruttando il nuovo pannello Snippet di codice. 

Documento Actionscript 2 e documento Actionscript 3. Modalità assistente. Aggiunta di codice con il pannello Snippet di codice (novità 

Cs5). Impostazioni di pubblicazione e Actionscript. 

24


STUDIO 




Filtri e metodi di fusione 

Filtri e metodi di fusione garantiscono la possibilità di creare effetti moderni alle nostre grafiche animate. 

Informazioni sui filtri. Applicazione di filtri. Applicazione di metodi di fusione. 

Testo 

Il testo all’interno di Flash svolge un ruolo importante ed è per questo che Adobe ha pensato di dotare questo 

software del testo formattabile TLF (novità Cs5). 

Informazioni sul testo e i caratteri. Creazione di testo. Incorporazione dei caratteri nel documento Swf. Operazioni con il testo classico e i 

campi di testo. Impostazione degli attributi del testo. Utilizzo del testo formattabile TLF (novità Cs5) 

Audio e video 

Il supporto ai contenuti multimediali è garantito! Flash nonostante l’avvento di javascript (e da poco dell’html5) 

è ancora oggi la tecnologia vincente in questo ambito, basti pensare a YouTube. Inutile dire altro. 

Uso dei suoni in Flash. Esportazione di suoni. Suono e ActionScript. Il video digitale e Flash. Importare il video per lo streaming o lo scaricamento 

progressivo. Incorporamento del video in un file SWF. Esportare i file video QuickTime. Controllo della riproduzione dei video 

esterni mediante ActionScript. 

25


STUDIO 




Pubblicazione ed esportazione 

Questa è una fase cruciale sia che si decida di integrare Flash al nostro sito, sia se si decide di fare un sito completamente 

con la tecnologia Flash. Occorre saper valutare bene ogni opzione al fine di produrre un lavoro 

pubblicabile sul web. 

Il formato swf e flash video. Il formato html di flash. Impostare la pubblicazione per dreaweaver. 

26


STUDIO 

MODULO DI 

Adobe Dreamweaver Cs5 

Step 3 • Creazione e gestione del sito. 




Con modulo di Adobe Dreamweaver Cs5 imparerai a creare il sito web vero e proprio oltre che a gestirne la 

pubblicazione e le modifiche; si toccheranno le questioni più salienti del mondo del web, come accessibilità, 

indicizzazione sui motori di ricerca, integrazione di effetti Javascript e di linguaggi php, gestione e pubblicazione 

del sito, integrazione di social network e blog. 

Si imparerà cioé a creare un sito web completo, moderno, professionale e certificato dal W3C, che è l’organismo 

che decide come devono essere costruiti i siti web per le caratteristiche di accessibilità e supporto alla 

visualizzazione del sito su tutti i supporti e per tutti gli utenti. 

27


STUDIO 




Area di lavoro 

Su Dreamweaver utilizzeremo un’interfaccia di lavoro prettamente da web designer perché questo prodotto 

è destinato agli utilizzi più svariati nell’ambito dei siti web. In ogni caso dovrai familiarizzare con le molte 

possibili visualizzazioni e sfruttarne i pregi. 

Flusso e area di lavoro di Dreamweaver. Operazioni con la finestra del documento. Vista codice, design, dal vivo e ispeziona codice. Uso 

delle barre degli strumenti, delle finestre di ispezione e dei menu di scelta rapida. Personalizzazione dell’area di lavoro di Cs5. Uso del navigatore 

di tag. Scelte rapide da tastiera. Estensioni. 

Operazioni con i siti di Dreamweaver 

Creare un sito web significa gestire un insieme di file che interagiscono tra di loro per formare le pagine 

web; detto così sembra complicato, ma è proprio per questo che utilizziamo Dreamweaver: automatizzerà 

moltissime operazioni per noi in modo da avere più tempo e più agilità per curare l’aspetto creativo e le 

funzionalità delle nostre pagine web. Qui imparerai a impostare correttamente la gestione del sito, requisito 

fondamentale. 

Configurazione di un sito. Computer remoto e locale. Percorsi assoluti e percorsi relativi. Accesso http e ftp. Impostazione della home page 

e dei fogli stile Css. 

28


STUDIO 




I linguaggi HTML, XHTML e HTML5 

Imparerai le basi e le differenze tra html, xhtml ed il nuovissimo (ancora in fase di sviluppo) html5. Nel corso 

di Dreamweaver non occorre studiare approfonditamente linguaggi perchè avrai la possibilità di impararli 

man mano che ci si lavora, sarà Dreamweaver a scrivere il codice per noi! I linguaggi di descrizione html e css 

necessitano solo di una conoscenza della sintassi di base per poter essere utilizzati: Dreamweaver ci fornirà 

tutte le opzioni e le proprietà che questi linguaggi offrono su nostra richiesta, attraverso comode finestre di 

dialogo. 

Il documento html e il linguaggio di descrizione. Linguaggi di descrizione e di programmazione. I tag HTML e varianti XHTML e semantica. 

I nuovi tag dell’HTML5 e semantica. Capire il codice e modificarlo. 

Il linguaggio CSS e la creazione dei documenti 

Anche il linguaggio css è un linguaggio di descrizione (non di programmazione!): occorre dedicare un po di 

tempo per capirne le dinamiche e imparare ad usare i selettori di classi, id e per tag e capire quali vantaggi 

porta a creare un sito utilizzando questa tecnologia. 

Nozioni sui fogli di stile CSS. Selettori per Classe, iD e Tag. Fogli stile interni, in linea ed esterni. Creazione e gestione dei CSS. Operazioni con 

i tag div e con gli altri Tag. 

29


STUDIO 




Costruire layout in html e css “table-less” 

Il punto di forza dei corsi di web design GattosulWeb è l’aggiornamento verso le nuove tecnologie. Creare 

layout senza tabelle dovrebbe essere già da tempo lo standard di ogni web designer, per le grandi possibilità 

di accessibilità, di velocità e di creatività che questa tecnica offre. Il corso di Dreamweaver Cs5 ti offre la possibilità, 

inoltre, di imparare a creare un sito in HTML5 (sostituirà addirittura Flash in molti settori) e Css 2 e 3, 

con la garanzia di creare pagine web moderne, accessibili, indicizzabili e con contenuti altamente grafici. 

Creare layout grafici con i Css “table-less”. Uso dei Tag div e dei nuovi tag di sezione dellHtml5. Regole Css 2 e Css3. Implementazione su 

Internet Explorer. 

30


STUDIO 




Aggiunta del contenuto alle pagine 

I contenuti e la loro fruibilità fanno il sito web: saper gestire e inserire correttamente i testi, le animazioni, i 

video, le mappe di google, il form dei contatti, le gallerie web e gli effetti (vedremo meglio nella parte javascript) 

è l’obiettivo di questa sezione del corso. Ma non finisce qui: sul web è obbligatorio organizzare i contenuti 

in modo che gli utenti sappiano districarsi agevolmente, apprezzando il messaggio che vogliamo dare: 

il web designer deve anche studiare la disposizione dei propri contenuti ed enfatizzarne la comunicazione in 

modo efficace e creativo. Ricordati che un sito ben organizzato è un sito ben indicizzato. 

Operazioni con le pagine. Aggiunta e formattazione di testo. Aggiunta e modifica di immagini. Inserimento di file SWF (animazioni). 

Inserimento di file FLV (video tipo youtube). Inserimento di mappe di Google e altre funzioni. Aggiunta di audio. Aggiunta di altri oggetti 

multimediali. Automatizzare le operazioni. Collegamenti e navigazione. Informazioni sui collegamenti e sulla navigazione. 

Collegamenti 

In questa sezione imparerai a creare il menù di navigazione del tuo sito web. Sembra poca cosa, ma rientra 

anche questo negli argomenti di accessibilità, indicizzazione, oltre che nell’aspetto grafico del sito web. Creerai 

menu normali, a tendina in html css e, all’occorrenza, con l’ausilio delle librerie javascript. 

Menu di collegamento. Barre di navigazione. Mappe immagine. Risoluzione dei problemi relativi ai collegamenti. Link interni ed esterni 

al sito. Principi di indicizzazione e accessibilità del sito web. 

31


STUDIO 




Creazione e gestione dei modelli di Dreamweaver 

I modelli di Dreamweaver consentono di creare un layout grafico del nostro sito standard da utilizzare per le 

pagine, se queste sono numerose e si ritiene di fare le modifiche una volta per tutte le pagine. È una funzionalità 

molto utile solo per i siti di grandi dimensioni, visto e considerato che oggi, già le tecniche Css consentono 

livelli di modifica agili. 

Informazioni sui modelli di Dreamweaver. Riconoscere i modelli e i documenti basati sui modelli. Creazione di un modello di Dreamweaver. 

Creazione di aree modificabili. Creazione di aree ripetute. Uso delle aree opzionali. Definizione di attributi di tag modificabili. Creazione 

di un modello nidificato. Modifica, aggiornamento ed eliminazione dei modelli. Esportazione e importazione del contenuto di un 

modello. Applicazione o rimozione di un modello da un documento esistente. Modifica del contenuto di un documento basato su un 

modello. 

Anteprima delle pagine e pubblicazione del sito web 

Per capire se il nostro sito si vedrà bene su tutti i computer ed i browser utilizzati dagli utenti, dovrai imparare 

a visualizzare e correggere le eventuali incongruenze su tutti i browser disponibili. Durante il corso si discuteranno 

le varie caratteristiche dei browser più diffusi in ambiente macintosh e windows. 

Anteprima delle pagine in Dreamweaver. Anteprima delle pagine nei browser per Mac e per Windows. Anteprima delle pagine nei dispositivi 

mobili. Impostazione dello spazio/dominio web. Pubblicazione attraverso Dreamweaver. Pubblicazione attraverso software FTP. 

32


STUDIO 




Javascript e librerie JQuery / Motools 

È una sezione molto divertente del corso di Dreamweaver perchè avrai accesso alle attualissime librerie Javascript 

JQuery e Motools, per dare movimento al tuo sito web e organizzare i tuoi contenuti in modo divertente 

anche per la navigazione. Queste tecniche consentono di creare addirittura animazioni e sostituire 

molto spesso le tecnologie Flash, le quali hanno evidenti problemi di indicizzazione e di accessibilità dei 

contenuti. 

I linguaggi di programmazione. Il linguaggio Javascript. Le librerie Javascript per il web design. Quando usare javascript invece di Flash. 

Effetti, gallerie, menù a tendina in javascript. Aggiunta di comportamenti JavaScript. Inserimento di spry widgets. 

Php e utilizzo dei blog ®WordPress 

Non è un corso di programmazione Php, ma imparerai a sfruttarne le caratteristiche per creare form per le 

email, aree protette o addirittura per inserire un blog all’interno dei tuo sito. Una sezione di questo corso infatti 

è dedicata all’utilizzo dei famosi blog ®Wordpress e all’installazione sul proprio sito web dell’interfaccia 

di utilizzo. Riuscirai anche a creare un commercio online sfruttando i potenti plugin che questa interfaccia 

offre, con tanto di pagamento online e gestione dei prodotti con database. 

Il linguaggio Php. Aggiunta di un form in php. Gestione di un database mySql. Installazione di un blog in php. Creazione, modifica del 

layout e gestione di un blog ®Wordpress. Installazione dei plugin per il commercio elettronico. 

33


STUDIO 




Accessibilità e indicizzazione del sito web 

Ci sarebbe da scrivere molto, ma vi invito a iscrivervi al corso che facciamo prima! A parte gli scherzi, sappiamo 

tutti quanto è importante far trovare il proprio sito ai propri futuri clienti; le tecniche SEO di indicizzazione 

di un sito sono spesso fraudolente e poco efficaci, però alcune di queste sono la base per un sito che 

si vuole proprorre onestamente: verranno discusse tutte quelle accettate (e imposte) dalle rigide specifiche 

dei motori di ricerca (Google su tutti). Imparerai a utilizzare correttamente i tag Title e le descrizioni, saprai 

dividere bene i contenuti del tuo sito e impostare i tag di accessibilità, saprai controllare le statistiche di Google 

Analytics per aggiornare i tuoi contenuti sulla base di ciò che vogliono i tuoi visitatori, oppure controllare 

se gli “spider” di Google vedono bene il tuo sito e come intervenire. 

Una parte di questa sezione sarà dedicata a Google Adwords, il sistema di promozione a pagamento di Google. 

Verifica dell’accessibilità del codice w3c. Usabilità del sito. Indicizzazione SEO per i motori di ricerca. Il motore di ricerca Google. Uso corretto 

dei nomi, del titolo e dei metatag. Rilevanza e coerenza del testo delle pagine. Strumenti per i webmaster di Google. Google Analitycs e 

le statistiche del sito web. Gestione campagne a pagamento Google Adwords. 

34

Scarica il programma del master di web design in Pdf - GattosulWeb

Create successful ePaper yourself

Delete template?

Save as template?