ESERCITAZIONE. Benvenuti in Adobe Fireworks CS4

Transcript

1 ESERCITAZIONE Benvenuti in Adobe Fireworks CS4 Ottobre 2008

2 2008 Adobe Systems Incorporated. Tutti i diritti riservati. Se la presente esercitazione è distribuita con software che comprende un accordo di licenza per l utente finale, questa guida e il programma in essa descritto sono forniti in licenza e possono essere usati o copiati solo secondo i termini della licenza stessa. Ad eccezione degli usi consentiti dalla licenza, nessuna parte della presente pubblicazione può essere riprodotta, memorizzata in un sistema di archiviazione o trasmessa in qualsiasi forma o con qualsiasi mezzo elettronico, meccanico, di registrazione o altro, senza previa autorizzazione scritta di Adobe Systems Incorporated. Il contenuto di questa pubblicazione è protetto dalla legge sul copyright anche se la pubblicazione non è distribuita assieme a un programma con un contratto di licenza per l utente finale. Le informazioni contenute in questa guida sono fornite esclusivamente a scopo informativo, sono soggette a variazioni senza preavviso e non devono essere intese come impegno da parte di Adobe Systems Incorporated. Adobe Systems Incorporated declina ogni responsabilità per eventuali errori o imprecisioni presenti nei contenuti informativi di questa guida. Qualsiasi riferimento a nomi di società nei campioni di file forniti ha scopo puramente dimostrativo ed eventuali riferimenti a società e organizzazioni realmente esistenti è da ritenersi casuale. Adobe, il logo Adobe, Acrobat, Fireworks e Photoshop sono marchi o marchi registrati di Adobe Systems Incorporated negli Stati Uniti e/o in altri Paesi. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA. Avvertenza per gli utenti finali di enti governativi degli Stati Uniti d America: il Software e la Documentazione sono Commercial Items (Prodotti commerciali) secondo la definizione datane in 48 C.F.R , e sono costituiti da Commercial Computer Software e Commercial Computer Software Documentation secondo la definizione dei termini di cui all articolo 48 C.F.R o 48 C.F.R , come appropriato. In conformità all articolo 48 C.F.R o 48 C.F.R. dal al incluso, come appropriato, il Commercial Computer Software e la Commercial Computer software Documentation vengono concessi in licenza agli utenti finali di enti governativi degli Stati Uniti d America (a) esclusivamente come Commercial Items (b) con i soli diritti concessi a tutti gli altri utenti finali, nel rispetto dei termini e delle condizioni ivi specificati. Tutti i diritti non pubblicati riservati, ai sensi della legge sul diritto d autore vigente negli Stati Uniti d America. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA , USA. Per gli utenti finali di enti governativi degli Stati Uniti d America, Adobe accetta di rispettare tutte le leggi applicabili sul diritto alle pari opportunità, comprese, ove applicabili, le direttive dell Executive Order 11246, secondo revisione, la sezione 402 del Vietnam Era Veterans Readjustment Assistance Act del 1974 (38 USC 4212) e la sezione 503 del Rehabilitation Act del 1973, secondo revisione, oltre ai regolamenti esposti in 41 CFR da 60-1 a 60-60, e La clausola di azione affermativa e i regolamenti sopra elencati saranno incorporati tramite riferimento.

3 SOMMARIO Introduzione... 2 Impostazione dell area di lavoro di Fireworks... 3 Dall idea al wireframe... 5 Creazione di un progetto iniziale...15 Ulteriori informazioni...23 Pagina 1

4 INTRODUZIONE In questa esercitazione viene illustrata la creazione di un applicazione per siti Web con Adobe Fireworks CS4: si parte dallo schizzo del progetto della pagina originale, per poi passare allo sviluppo dei wireframe e alla creazione del progetto finale. Vengono fornite le istruzioni essenziali e descritti tutti gli strumenti, in modo da consentire all utente di iniziare subito a creare siti Web e progetti con Fireworks CS4. Per chi già conosce Fireworks, questa esercitazione rappresenta invece una panoramica di alcune delle nuove funzioni incluse in Fireworks CS4. Progetteremo una pagina Web per una società fittizia, denominata Ignition Carshare. Questa società offre un servizio di condivisione delle automobili, o car sharing, grazie al quale i soci possono prenotare e usare le automobili per un periodo di tempo variabile, da qualche ora a più giorni. Nel sito Web non dovranno quindi mancare una presentazione dei diversi servizi di car sharing disponibili per i potenziali clienti e un interfaccia che consenta ai soci di prenotare facilmente le automobili e gestire i propri account. I file usati durante questa esercitazione sono disponibili nella cartella Tutorial Working Files. Pagina 2

5 IMPOSTAZIONE DELL AREA DI LAVORO DI FIREWORKS Prima di iniziare a lavorare con Fireworks, è utile imparare a conoscere l interfaccia. Una buona idea potrebbe essere personalizzare l interfaccia adattandola alle proprie esigenze. L interfaccia può essere personalizzata in base al flusso di lavoro specifico dell utente che lavora con Fireworks; i suggerimenti di seguito rappresentano un utile punto di partenza. Impostare le preferenze di Fireworks 1) Selezionare Modifica > Preferenze (Windows) o Fireworks > Preferenze (Mac OS). 2) Nella categoria Generale cambiare il numero di Livelli annullamento impostandolo almeno su 80. Quando si apportano modifiche dettagliate con numerosi piccoli tratti di pennello, è facile che il numero di annullamenti si esaurisca rapidamente. Impostando un Numero massimo di annullamenti più elevato, si otterrà una maggiore flessibilità. 3) Nella categoria Modifica selezionare Cursori di precisione. Questa opzione visualizza il cursore come una croce per tutti gli strumenti, al posto dei tradizionali cursori a icone. Questa impostazione garantisce una maggiore precisione durante il lavoro. 4) Nella categoria Importazione/Apertura Photoshop, selezionare la casella di controllo accanto a Maschere di ritaglio: Riduci a livello unico per mantenere aspetto (vedere la Figura 1). Questa opzione consente di mantenere l aspetto delle maschere dei tracciati di ritaglio di Adobe Photoshop quando queste vengono importate in Fireworks CS4. Figura 1. Impostare le opzioni di importazione di Photoshop nella finestra di dialogo Preferenze di Fireworks. Pagina 3

6 5) Fare clic su OK. Organizzare i pannelli I pannelli sono un elemento essenziale nel flusso di lavoro di progettazione di Fireworks. Acquisendo dimestichezza con tutti i pannelli, si avrà la possibilità di lavorare in modo più produttivo. Per iniziare, i pannelli sono in modalità a icone, con i soli nomi visualizzati. Sulla barra grigia, nell angolo in alto a destra dello schermo, selezionare dal menu a discesa Modalità a icone con nomi pannelli (vedere la Figura 2). Figura 2. Fare clic sull icona della freccia rivolta verso il basso, accanto a Modalità espansa, per scegliere l opzione Modalità a icone con nomi pannelli. Questa opzione visualizza tutti i pannelli standard, in modo che l utente possa controllarli e, se necessario, selezionarli. A seconda del tipo di progetto da creare, si ricorrerà a questi pannelli con maggiore o minore frequenza. Il pannello Tavolozza colori è un interfaccia avanzata, utile quando si lavora con i colori. Il pannello Tracciato è utile quando si lavora con la grafica vettoriale. Il pannello Informazioni e il pannello Tracciato sono entrambi usati con grande frequenza. Posizionare questi due pannelli in un area facilmente accessibile. Fireworks CS4 consente di disporre i pannelli liberamente nell interfaccia. Più avanti, nel corso di questa esercitazione, verranno forniti alcuni consigli sulle strategie da adottare per organizzare lo spazio di lavoro. Visualizzare i righelli Quando i righelli sono visualizzati, è possibile trascinare le guide nel documento. Le guide sono particolarmente utili per la progettazione in Fireworks, pertanto è una buona idea visualizzare i righelli durante il lavoro. È importante rilevare che i righelli possono essere visualizzati soltanto quando è aperto un documento in Fireworks. Per visualizzare i righelli, selezionare Visualizza > Righelli. Pagina 4

7 DALL IDEA AL WIREFRAME Ogni progetto nasce da un idea. A volte l idea iniziale viene abbozzata sulla carta, altre volte è scolpita nella mente. In entrambi i casi, la prima cosa da fare è dare concretezza all idea creando un wireframe prima di iniziare la fase del disegno. Il wireframe offre la flessibilità necessaria per poter apportare facilmente le modifiche, senza preoccuparsi dei dettagli. Permette inoltre di ottenere l approvazione del cliente fin dalla fase iniziale del processo. In questa sezione creeremo una bozza iniziale di un idea e la trasformeremo in un wireframe semplice e flessibile. Allo stesso tempo useremo molte delle nuove funzionalità di Fireworks CS4, che aiutano ad aumentare la produttività e a ridurre i tempi di produzione. Per chi non lo avesse ancora fatto, è il momento di scaricare i file di esempio dalla cartella Tutorial Working Files. Creare un nuovo documento 1) Avviare Fireworks CS4. 2) Selezionare File > Nuovo. 3) Nella finestra di dialogo Nuovo documento impostare la larghezza dell area di lavoro su 1024 pixel e l altezza su 640 pixel. 4) Impostare il colore dell area di lavoro sul bianco. 5) Fare clic su OK. Importare lo schizzo 1) Selezionare File > Importa. 2) Passare alla cartella dei file di esempio e selezionare il file sketch.jpg. 3) Fare clic sul cursore a forma di angolo retto, nell angolo superiore sinistro dell area di lavoro (0,0), in modo da inserire lo schizzo importato in quella posizione. Lo schizzo deve essere centrato orizzontalmente nell area di lavoro. Pagina 5

8 In alternativa, selezionare il file e trascinarlo semplicemente dal file system all area di lavoro di Fireworks (vedere la Figura 3). Figura 3. Lo schizzo importato viene centrato orizzontalmente nell area di lavoro Usare guide, guide sensibili e descrizioni comandi Per creare rapidamente un layout accurato, usare le guide e le descrizioni comandi: 1) Accertarsi che i righelli siano visibili selezionando Visualizza > Righelli. 2) Attivare l agganciamento alle guide selezionando Visualizza > Guide > Aggancia alle guide. 3) Attivare le guide sensibili scegliendo Visualizza > Guide sensibili. Selezionare le opzioni per Mostra guide sensibili e Aggancia a guide sensibili. 4) Per attivare le descrizioni comandi, selezionare Visualizza > Descrizioni comandi. 5) Dal righello superiore, trascinare una guida orizzontale sull area di lavoro. Usare la descrizione comandi per posizionare la guida precisamente a 76 pixel. 6) Trascinare una seconda guida orizzontale sull area di lavoro. Posizionarla a 604 pixel. Suggerimento: tenere premuto Maiusc mentre si trascina una guida (o in qualunque momento dopo che le guide sono state inserite nell area di lavoro) per visualizzare la distanza tra la guida selezionata, tutte le altre guide e il margine dell area di lavoro. 7) Selezionare lo schizzo importato e posizionarlo in modo che il bordo superiore e il bordo inferiore dell area del contenuto principale corrispondano più o meno alle due Pagina 6

9 guide precedentemente inserite nell area di lavoro. 8) Nel pannello Livelli fare clic sulla seconda colonna accanto all oggetto schizzo, per bloccare il livello (vedere la Figura 4). Il livello dello schizzo verrà usato come riferimento per lo sfondo, mano a mano che verranno disposti gli elementi del wireframe. Figura 4. Bloccare il livello facendo clic sulla seconda colonna (partendo da sinistra); compare l icona del lucchetto Creare il layout del wireframe Per realizzare il wireframe, sarà necessario creare alcuni rettangoli di base e del testo. Il disegno completo verrà aggiunto successivamente, quando il layout generale sarà più sviluppato. 1) In fondo al pannello Livelli fare clic sul pulsante Nuovo/Duplica livello, per creare un nuovo livello. 2) Dal pannello Strumenti selezionare lo strumento Rettangolo nel gruppo Vettore. 3) Nel pannello Proprietà selezionare Nessuno dal menu a discesa Riempimento. Fare clic sul campione colore Tratto e scegliere un grigio scuro dal selettore dei colori che viene visualizzato. 4) Trascinare un rettangolo per riempire l area tra le due guide, coprendo quasi per intero l area di lavoro. Intorno al rettangolo devono rimanere circa 6 pixel scoperti, sul lato sinistro e destro dell area di lavoro. Assicurarsi che il rettangolo sia perfettamente centrato in orizzontale. A questo scopo, aprire il pannello Allinea (Finestra > Allinea). Selezionare l icona Posizione e scegliere l opzione Allinea centrato orizzontale (vedere la Figura 5). Figura 5. Nel pannello Allinea, selezionare il pulsante Posizione e scegliere l icona per centrare il rettangolo orizzontalmente. Pagina 7

10 5) Trascinare un piccolo rettangolo nell angolo in alto a destra per creare un pulsante. Usando le descrizioni comandi, iniziare a disegnare il rettangolo in corrispondenza delle coordinate x:850 e y:35. Trascinare verso destra e verso il basso. Usando le guide sensibili, allineare il lato destro del rettangolo piccolo al lato destro del contenitore (rettangolo più grande). Premere il tasto freccia Su durante il trascinamento per arrotondare leggermente gli angoli (vedere la Figura 6). Figura 6. Premere la freccia Su sulla tastiera durante il trascinamento del mouse per disegnare un rettangolo con gli angoli arrotondati 6) Mentre è selezionato il rettangolo del pulsante appena creato, tenere premuto Alt (Windows) o Opzione (Mac OS) e trascinare verso sinistra per creare una copia del rettangolo, lasciando un po di spazio tra i due pulsanti. 7) Ripere questo passaggio (Modifica > Ripeti duplica). Questa operazione crea una seconda copia con la stessa distanza tra gli oggetti (vedere la Figura 7). Figura 7. Creare tre copie dei pulsanti arrotondati 8) Ripetere i passaggi da 4 a 7 per creare un gruppo più piccolo di 4 pulsanti nell area in basso a sinistra del documento. 9) A questo punto è possibile aggiungere le etichette di testo. Dal pannello Strumenti selezionare lo strumento Testo nel gruppo Vettore. 10) Nel pannello Proprietà fare clic sul campione colore Riempimento e scegliere un colore scuro. Impostare la giustificazione a sinistra e scegliere il valore 24 come dimensione del testo (vedere la Figura 8). Figura 8. Mentre il testo è selezionato, usare il pannello Proprietà per definire l aspetto del testo. Pagina 8

11 11) Fare clic una sola volta sulla parte in alto a sinistra del documento e digitare il titolo Ignition Careshare. Suggerimento: dopo avere digitato quanto desiderato nella casella di testo, premere Ctrl+Invio (Windows) o Comando+Invio (Mac OS) per uscire subito dalla modalità di modifica del testo. 12) Fare clic sopra il primo pulsante a sinistra nella fila in alto. Digitare il testo: Find Cars (Trova auto). Mentre il testo è selezionato, impostare le dimensioni del testo su 16 nel pannello Proprietà. 13) Usando lo strumento Puntatore, tenere premuto Alt (Windows) o Opzione (Mac OS) e trascinare il testo sugli altri due pulsanti della fila in alto. Sostituire il testo sugli altri due pulsanti con Check Rates (Verifica prezzi) e More Info (Altre info). Per modificare il testo, fare doppio clic nella casella di testo, evidenziare le parole da modificare e quindi digitare le nuove parole. 14) Ripetere la stessa procedura con i pulsanti più piccoli in basso a sinistra, creando le seguenti etichette di testo: about us (chi siamo), partners (partner), press (stampa) e home e impostando le dimensioni del testo su ) Per nascondere l immagine dello schizzo nell area di lavoro, selezionare il pannello Livelli (che potrebbe essere raggruppato con il pannello Pagine) e scorrere fino al Livello 1. Fare clic sull icona dell occhio accanto a Livello 1 per disattivare la visibilità (vedere la Figura 9). Il livello contenente l immagine dello schizzo non è più visualizzato. Figura 9. Disattivare la visibilità del Livello 1 facendo clic sull icona dell occhio: lo schizzo viene nascosto. Pagina 9

12 16) Quando il livello dello schizzo è disattivato, l immagine dovrebbe avere un aspetto simile alla figura 10. Figura 10. Il disegno wireframe della pagina Ignition Carshare Creare le atre pagine del wireframe Dopo avere creato il wireframe di base per il layout del sito, il passaggio successivo consiste nel creare altre pagine con il contenuto vero e proprio. Fireworks CS4 consente di creare tutte le pagine necessarie, con elementi condivisi o esclusivi in ogni pagina. 1) Aprire il pannello Pagine (Finestra > Pagine) se non è già visualizzato sul lato destro dell area di lavoro. 2) Mentre la pagina corrente è selezionata, fare clic sul menu Opzioni del pannello. Scegliere l opzione Imposta come Pagina master dall elenco visualizzato (vedere la Figura 11). Figura 11. Impostare la pagina 1 come pagina master usando il menu Opzioni del pannello. Pagina 10

13 3) In fondo al pannello Pagine fare tre volte clic su Aggiungi pagina, per aggiungere tre pagine vuote. In ogni pagina è visibile la pagina master sullo sfondo. 4) Fare doppio clic sui nomi di pagina per rinominarli in modo che corrispondano alle etichette sui pulsanti in alto: Find Cars (Trova auto), Check Rates (Verifica prezzi) e More Info (Altre info) (vedere la Figura 12). Figura 12. Nel pannello Pagine creare tre nuove pagine e rinominarle in base ai nomi delle pagine del sito. 5) Visualizzare la pagina master selezionandola nel pannello Pagine. 6) Nella pagina master selezionare e copiare il rettangolo dietro al testo Find Cars (Trova auto), nella parte superiore del documento. 7) Fare clic sulla pagina Find Cars (Trova auto) nel pannello Pagine (e non nella pagina master) per selezionarla. 8) Incollare una copia del rettangolo nella pagina Find Cars (Trova auto). 9) Nel pannello Proprietà sostituire il colore di riempimento con un grigio chiaro, per segnalare al visitatore del sito che questa è la pagina attiva. 10) Ritornare alla pagina master, quindi selezionare e copiare l etichetta di testo Find Cars (Trova auto). 11) Fare clic sulla pagina Find Cars (Trova auto) nel pannello Pagine, quindi incollare il testo Find Cars (Trova auto) sopra al rettangolo grigio chiaro appena creato. Pagina 11

14 12) Usare lo strumento Testo per aggiungere un titolo di pagina in alto nell area del contenuto: Choose your type of driving and a city (Selezionare tipo di guida e città) (vedere la figura 13). Figura 13. Lo sfondo grigio chiaro del pulsante Find Cars (Trova auto) indica al visitatore del sito che questa è la pagina attiva. 13) Ripetere i passaggi da 5 a 12 nelle altre due pagine, in modo da copiare e incollare il testo del secondo e del terzo pulsante. Usare lo strumento Testo per aggiungere un titolo di pagina appropriato a ogni area del contenuto: See available rates (Vedi prezzi disponibili), Learn more (Per saperne di più). Usare le risorse della libreria comune per completare i wireframe Ora che è stata aggiunta la struttura generale e le pagine del wireframe, è necessario finalizzare il contenuto di ogni pagina. Questa applicazione include una serie di controlli interattivi molto comuni, come le barre di scorrimento, i menu a discesa e i campi per l immissione del testo. Con gli elementi della Libreria comune è possibile simulare rapidamente questi controlli. 1) Selezionare la pagina Find Cars (Trova auto) nel pannello Pagine. 2) Scegliere File > Importa oppure selezionare il file demo map_usa_wireframe.png e trascinarlo per inserirlo nella pagina. Il file è l illustrazione di una cartina geografica con un contorno grafico. 3) Mentre l elemento cartina è selezionato, aprire il pannello Allinea (Finestra > Allinea). Centrare la cartina orizzontalmente facendo clic su Allinea centrato orizzontale. La centratura verticale verrà effettuata più avanti. 4) Aprire il pannello Libreria comune (Finestra > Libreria comune). 5) In Windows, espandere la cartella denominata Win. In Mac OS, espandere invece la cartella Mac. 6) Dal pannello Libreria comune trascinare sul documento un istanza dell elemento Pulsante e un istanza dell elemento Casella combinata. 7) Posizionare la casella combinata in modo che il suo bordo sinistro sia allineato al bordo sinistro della cartina. È consigliabile che le guide sensibili siano attivate durante questa operazione. È anche possibile usare il pannello Allinea per allineare i due bordi sinistri (assicurarsi di disattivare il pulsante Posizione). Pagina 12

15 8) Dal pannello Strumenti selezionare lo strumento Scala nel gruppo Selezione. Trascinare la maniglia di ridimensionamento centrale destra della casella combinata, in modo da impostare una larghezza di circa 400 pixel. 9) Tenere premuto Alt (Windows) o Opzione (Mac OS) e trascinare la casella combinata verso destra, per crearne una copia duplicata. 10) Selezionare nuovamente lo strumento Scala, quindi trascinare la maniglia di ridimensionamento centrale destra in modo da ridimensionare la seconda casella combinata, impostando una larghezza di circa 160 pixel. 11) Spostare il pulsante nello spazio orizzontale restante, a destra delle due caselle combinate. Usare lo strumento Scala per ridimensionare il pulsante secondo necessità. 12) Selezionare lo strumento Testo. Impostare le dimensioni del testo su 16. Digitare Type of Driving (Tipo di guida) sopra la prima casella combinata. 13) Usando lo strumento Puntatore, tenere premuto Alt (Windows) o Opzione (Mac OS) e trascinare la casella di testo verso destra. Posizionare il testo copiato sopra la seconda casella combinata. Usare lo strumento testo per sostituire il testo in City (Città). 14) Aprire il pannello Proprietà simbolo (Finestra > Proprietà simbolo). 15) Selezionare la prima casella combinata. Nel pannello Proprietà simbolo impostare Etichetta su Personal (Personale). 16) Selezionare la seconda casella combinata. Nel pannello Proprietà simbolo impostare Etichetta su Boston. 17) Selezionare il pulsante. Nel pannello Proprietà simbolo impostare l etichetta su Go (Vai) (vedere la Figura 14). Figura 14. La pagina Find Cars (Trova auto) dopo l aggiunta delle caselle combinate e del pulsante dalla Libreria comune È possibile ripetere questo processo per aggiungere altri elementi di interfaccia dalla Libreria comune. Nella cartella dei file di esempio aprire il file Ignition_Carshare_Source.png, in modo da visualizzare le altre pagine del wireframe. Pagina 13

16 Esportare un file PDF interattivo A questo punto, dopo avere creato il wireframe di base per il flusso e la struttura dell applicazione, è utile esportare l intero documento come documento multipagina e interattivo, quindi inviarlo al cliente per l approvazione. 1) Visualizzare la pagina master selezionandola nel pannello Pagine. 2) Dal pannello Strumenti selezionare lo strumento Punto attivo nel gruppo Web. 3) Disegnare un punto attivo sopra il primo pulsante. Disegnare altri due punti attivi sopra il secondo e il terzo pulsante. Suggerimento: in alternativa è possibile selezionare i tre rettangoli che contengono i pulsanti, fare clic con il pulsante destro del mouse e scegliere Inserisci punto attivo, quindi Multipli. In questo modo verrà aggiunto un punto attivo attorno a ognuno degli oggetti selezionati. 4) Selezionare il primo punto attivo con lo strumento Puntatore. Nel pannello Proprietà impostare il collegamento a Find Cars.html. Selezionare il secondo punto attivo e impostare il collegamento a Check Rates.html. Selezionare il terzo punto attivo e impostare il collegamento a More Info.html. Poiché i punti attivi si trovano nella pagina master, ogni pagina risulterà collegata alle altre quando il PDF interattivo verrà esportato. 5) Selezionare File > Esporta. Scegliere Adobe PDF (.pdf) dal menu a discesa Esporta. 6) Fare clic su Opzioni. Trattandosi soltanto di un wireframe, è possibile impostare una qualità media e selezionare l opzione Converti in scala di grigi. Fare clic su OK per uscire dalla finestra di dialogo Opzioni di esportazione Adobe PDF. 7) Accertarsi che sia selezionata la casella di controllo accanto a Visualizza PDF dopo l esportazione. Fare clic su Esporta. A questo punto è possibile visualizzare il PDF, scorrere le pagine e inserire eventuali commenti usando gli strumenti disponibili in Adobe Acrobat. Un file PDF interattivo è la soluzione ideale per consentire al cliente di effettuare una revisione e navigare nel sito. Il cliente potrà mettersi nei panni del visitatore del sito e visualizzare le pagine così come appariranno nel prodotto finale. Pagina 14

17 CREAZIONE DI UN PROGETTO INIZIALE A questo punto, dopo avere creato un wireframe e avere definito il funzionamento e il layout dell applicazione, si passa all aspetto estetico del progetto. In genere questa è la fase più impegnativa nella creazione di un progetto, tuttavia Fireworks CS4 include un gran numero di funzionalità che, da un alto, accelerano il processo creativo e, dall altro, permettono di continuare a modificare il documento tutte le volte che è necessario. Nella sezione precedente di questa esercitazione è stato creato un wireframe ed è stato visto in che modo le guide, le guide sensibili e le descrizioni comandi possono essere di ausilio per allineare con precisione gli elementi nella pagina. Le guide, le guide sensibili e le descrizioni comandi verranno usate anche in questa sezione, tuttavia non verranno più citate direttamente. Creare un nuovo documento A questo punto si consiglia di salvare una copia del wireframe completo come backup. In questo modo si potrà continuare a lavorare con il file wireframe e trasformarlo in un progetto completo usando la struttura e alcuni degli elementi già creati. Creare il disegno dello sfondo La prima operazione consiste nel creare un disegno per lo sfondo della pagina master precedentemente creata nel wireframe. 1) Visualizzare la pagina master usando il pannello Pagine. 2) Nel pannello Livelli creare un nuovo livello, fare dopo clic sul nome del livello e rinominarlo Design. 3) Trascinare il livello precedente, che contiene il wireframe, sopra il nuovo livello. Bloccare questo livello facendo clic sulla colonna a sinistra della miniatura del wireframe. In questo modo il wireframe verrà separato dal nuovo livello in cui realizzeremo il disegno. Il wireframe è utile perché funge da riferimento, ma non è mai d intralcio in quanto si trova su un livello separato e bloccato. Suggerimento: è possibile fare clic sull icona dell occhio nel pannello Livelli per nascondere il livello del wireframe in qualunque momento. 4) Mentre il livello Design è selezionato, disegnare un rettangolo di sfondo che copre per intero l area di lavoro. Se le guide sensibili sono attivate, i lati del rettangolo si agganceranno esattamente ai bordi dell area di lavoro. 5) Mentre il rettangolo è selezionato, scegliere Modifica > Copia e quindi Modifica > Incolla. In questo modo verrà creato un clone del rettangolo, nella stessa posizione. Suggerimento: quando si copia e incolla un elemento in Fireworks CS4, l elemento incollato viene posizionato nello stesso punto in cui è stato copiato, a condizione che tale punto sia ancora interamente visibile sullo schermo. Se non è interamente visibile (ad esempio, se la visualizzazione è stata ingrandita o spostata), l elemento incollato viene inserito al centro dello schermo. Se si usa Modifica > Clona, gli elementi selezionati vengono clonati e sempre posizionati dove si trovano gli originali, Pagina 15

18 indipendentemente dalla visualizzazione o dalla posizione dell area di lavoro. 6) Mentre il nuovo rettangolo clone è selezionato, selezionare lo strumento Scala. Trascinare la maniglia centrale superiore per ridimensionare il bordo superiore, impostandolo su circa 590 pixel. 7) Nel pannello Proprietà ridurre l opacità del rettangolo clone all 80%. Qui avranno inizio l area dell intestazione e l area del contenuto. 8) Per aggiungere come sfondo un immagine fotografica, selezionare File > Importa. Dalla cartella dei file di esempio scegliere il file grass_bg.jpg. 9) Posizionare l immagine dell erba sopra il lato superiore del rettangolo destinato all area del contenuto. Alcune parti si sovrapporranno. 10) Dal pannello Livelli selezionare il rettangolo dell area del contenuto e scegliere Modifica > Copia. 11) Selezionare l immagine dell erba sullo sfondo e scegliere Elabora > Maschera > Incolla come maschera. Questo comando usa il rettangolo copiato negli Appunti come maschera per l erba, cosicché l immagine verrà ritagliata in corrispondenza del rettangolo dell area del contenuto. Suggerimento: spostando l immagine, l immagine e la maschera si sposteranno insieme. Invece, facendo clic sull icona di collegamento nel pannello Livelli, sarà possibile spostare separatamente l immagine o la maschera, in modo da riposizionare un elemento senza spostare l altro. 12) Nel pannello Livelli trascinare l immagine dell erba, in modo da posizionarla sotto il rettangolo dell area del contenuto. Questa collocazione conferisce all erba sullo sfondo un tono molto smorzato, in quanto l immagine viene visualizzata attraverso il rettangolo sovrastante che è opaco all 80%. Suggerimento: mentre è selezionato un oggetto, premere Ctrl+freccia Su (Windows) o Comando+freccia Su (Mac OS) per spostare l oggetto in alto nel pannello Livelli. Premendo Ctrl+freccia Giù (Windows) o Comando+freccia Giù (Mac OS) l oggetto si sposta verso il basso. È anche possibile usare Ctrl+Maiusc+freccia Su e Ctrl+Maiusc+freccia Giù (Windows) o Comando+Maiusc+freccia Su e Comando+Maiusc+freccia Giù (Mac OS) per spostare un oggetto nella posizione più in alto o più in basso nella pila del livello. 13) Mentre l immagine di sfondo è selezionata, cambiare il metodo di fusione nel pannello Proprietà, passando da Normale a Moltiplica. Il metodo di fusione Moltiplica fa sì che le aree scure di un oggetto si fondano con gli oggetti sottostanti e li scuriscano, in modo da fare scomparire le aree chiare dell immagine. L immagine dell erba è ora visibile in modo discreto lungo il fondo. Aggiungere i dettagli In qualunque disegno, maggiore è l attenzione che si dà ai dettagli, più elegante sarà il risultato. A questo punto il lavoro di partenza è stato fatto, ma c è ancora molto da fare per rifinire le pagine. 1) Dal pannello Strumenti selezionare lo strumento Linea nel gruppo Vettore. Pagina 16

19 2) Trascinare una lunga linea orizzontale tra l area dell intestazione e l area del contenuto. Fare clic sul lato sinistro del documento e premere Maiusc mentre si trascina verso destra, in modo da bloccare la linea con un angolo di 90 rispetto all orizzontale. 3) Nel pannello Proprietà impostare il colore della linea su nero (#000000). 4) Nel pannello Proprietà impostare l opacità su 15: l oggetto risulterà molto trasparente. Il risultato finale dovrebbe essere un separatore molto sottile nell area dell intestazione. Se si usa un colore uniforme come il nero e un valore di opacità molto basso, anche se il colore sottostante dovesse in seguito cambiare, l ombra verrà mantenuta senza dover reimpostarne il colore. 5) Selezionare lo strumento Rettangolo e trascinare un rettangolo con una larghezza di 1024 pixel e un altezza di 10 pixel, direttamente sopra la linea appena creata. 6) Per il rettangolo, non impostare nessun colore per il Tratto e impostare il Riempimento su Sfumatura > Lineare. 7) Fare clic sul campione Riempimento e modificare la sfumatura. Impostare il colore iniziale e il colore finale sul nero uniforme. Modificare l opacità iniziale portandola su 0, quindi impostare l opacità finale su ) Nel pannello Proprietà impostare l opacità del rettangolo su 10. A questo punto comparirà un ombra tenue nell area dell intestazione, creando un leggero effetto di profondità. Aggiungere il testo 1) Selezionare lo strumento Testo. 2) Fare clic in alto a sinistra nell area dell intestazione e scrivere il titolo dell applicazione: IGNITION CARSHARE. 3) Al termine, fare clic nell area di lavoro o premere Ctrl+Invio (Windows) o Comando+Invio (Mac OS) per confermare il testo. 4) Mentre l oggetto Testo è ancora selezionato, sostituire il colore di riempimento con il bianco nel pannello Proprietà. 5) Sempre nel pannello Proprietà selezionare il carattere desiderato, impostando le dimensioni del carattere su 14. Suggerimento: le dimensioni dei caratteri sono sempre espresse in pixel e non in punti in Fireworks. 6) Fare doppio clic sul testo per modificarlo. Fare doppio clic su CARSHARE per selezionare l intera parola. Pagina 17

20 7) Nel pannello Proprietà impostare il colore di riempimento su un celeste chiaro (#B9E1F2). In questo passaggio è stata modificata una singola casella di testo, in modo che possa contenere due parole di colori diversi. È possibile modificare qualunque stile di testo sulla base di singole parole o singoli caratteri usando lo stesso metodo. 8) Con lo strumento Testo selezionato, fare clic nell area in alto a destra del documento. 9) Aggiungere tre nuove caselle di testo: Join Now! (Registrati), Help (Guida) e Sign in (Accedi). Fare clic sull area di lavoro per confermare il testo. Suggerimento: è anche possibile usare il metodo descritto nella sezione precedente di questa esercitazione: creare una casella di testo, tenere premuto Alt+Maiusc (Windows) o Opzione+Maiusc (Mac OS) e trascinare per creare una copia duplicata. Quindi scegliere Modifica > Ripeti duplica. Questa operazione crea una seconda copia con la stessa distanza tra le copie. 10) Impostare il colore del testo Join Now! (Registrati) su bianco. Impostare il colore del testo Help (Guida) e Sign In (Accedi) su grigio (#595959). 11) Ripetere la stessa procedura per aggiungere il testo nell area in basso a sinistra del disegno. Nel pannello Proprietà impostare il nero uniforme come colore di riempimento, con un opacità del 45%. 12) Usare lo strumento Linea per aggiungere una piccola linea verticale di un 1 pixel tra due caselle di testo. Nel pannello Proprietà impostare il nero uniforme e un opacità del 15% per la linea. 13) Tenere premuto Alt+Maiusc (Windows) o Opzione+Maiusc (Mac OS) e trascinare per duplicare la linea tra le altre caselle di testo. Suggerimento: se non si conosce con certezza la distanza tra le caselle di testo e i separatori, selezionarli tutti e aprire il pannello Allinea (Finestra > Allinea). Controllare che il pulsante Posizione sia disattivato, quindi selezionare l icona Spaziatura orizzontale equidistante. Suggerimento: se la linea di 1 pixel appare sfuocata, scegliere Matita > Rigido a 1 pixel nel menu a discesa Tratto del pannello Proprietà. Aggiungere i filtri attivi Fireworks CS4 include sia i filtri tradizionali che i nuovi filtri attivi. I filtri attivi sono effetti e stili (ad esempio ombre, bagliori e sfocature) che possono essere aggiunti agli oggetti e successivamente modificati o eliminati. Sono chiamati attivi perché, a differenza dei filtri tradizionali che vengono applicati in modo permanente agli oggetti, questi filtri possono essere modificati in un momento successivo. È possibile applicare i filtri attivi a qualunque oggetto visibile in Fireworks, inclusi bitmap, vettori e testo. 1) Selezionare la casella di testo Join Now (Registrati). 2) Nel pannello Proprietà fare clic sul pulsante Aggiungi filtri (+). 3) Scegliere Ombra e luce > Ombra esterna. Impostare le seguenti proprietà: Pagina 18

21 Distanza: 1 Morbidezza: 1 Opacità: 50% Angolo: 270 4) Selezionare le due caselle di testo Help (Guida) e Sign In (Accedi). 5) Ripetere il passaggio 3, ma questa volta impostando il colore sul bianco anziché sul nero. Disegnare il sistema di navigazione principale A questo punto lo sfondo è stato completato. Come si ricorderà, le schede dei pulsanti principali si trovano nel livello master del wireframe. Nella procedura che segue le inseriremo nelle pagine del progetto. 1) Passare alla pagina Find Cars (Trova auto) nel pannello Pagine. 2) Nel pannello Livelli fare clic su Nuovo livello. 3) Fare doppio clic sul nome del livello e rinominarlo Navigation (Navigazione). 4) Nel pannello Strumenti premere lo strumento Rettangolo per visualizzare l elenco completo degli strumenti forma. Selezionare lo strumento Rettangolo arrotondato. 5) Disegnare un rettangolo arrotondato di circa 110 pixel di larghezza e 35 pixel di altezza. 6) Aprire il pannello Proprietà forma automatica (Finestra > Proprietà forma automatica). Sbloccare gli angoli in modo da poter modificare ogni angolo singolarmente. Per creare la forma di una scheda, impostare la smussatura degli angoli in basso a destra e a sinistra su 0 e la smussatura degli angoli in alto a destra e a sinistra su 5. 7) Con lo strumento Puntatore spostare la scheda sopra il bordo dell area del contenuto. 8) Mentre la forma della scheda è selezionata, copiarla e incollarla in modo da crearne un clone nella stessa posizione in cui si trova l originale. 9) Dopo avere selezionato il clone, fare clic sul campione colore Tratto e selezionare il bianco (#FFFFFF). Rimuovere completamente il riempimento del clone impostando il menu Categoria riempimento su Nessuno. Suggerimento: è possibile usare il comando Scambia i colori del pennello e di riempimento per rimuovere in modo rapido e simultaneo il riempimento e impostare il colore del tratto. 10) Scegliere Elabora > Separa per scomporre la forma della scheda. Mentre la forma è separata, si possono apportare modifiche precise ai punti e alle curve della forma, sebbene siano state rimosse le maniglie di controllo delle forme automatiche. 11) Dal pannello Strumenti scegliere lo strumento Coltello nel gruppo Vettore. Fare clic sotto la scheda e trascinare verso l alto, attraversando il lato inferiore della scheda per creare un apertura nel tracciato. Pagina 19

22 12) Dal pannello Strumenti scegliere lo strumento Sottoselezione nel gruppo Selezione, in modo da selezionare i due punti appena creati. Premere il tasto Canc per eliminarli. A questo punto il lato inferiore della scheda è stato rimosso, mentre è ancora presente un tratto che segue i lati sinistro, superiore e destro della scheda. Per ottenere questo effetto è possibile separare il tratto come un altro tracciato, anziché aggiungerlo alla forma della scheda originale. 13) Per aggiungere un ombra attorno alla scheda, selezionare la forma originale della scheda. Nel pannello Proprietà fare clic sul pulsante Aggiungi filtri (+). Selezionare Ombra e luce > Ombra esterna. Impostare le proprietà sui seguenti valori: Distanza: 3 Morbidezza: 3 Opacità: 25% Angolo: 90 Impostando l angolo su 90, l ombra esterna non andrà a invadere l area del contenuto sottostante. In questo modo la scheda sembrerà collegata alla cornice dell area del contenuto sottostante. 14) Per aggiungere il testo alla grafica della scheda, selezionare lo strumento Testo e fare clic per immettere il testo FIND CARS (Trova auto) direttamente sopra la scheda. Nel pannello Proprietà selezionare la giustificazione al centro e fare clic sul grassetto. Impostare il nero (#000000) come colore di riempimento e con il cursore dell opacità selezionare un opacità del 65%. A questo punto la grafica della scheda è ultimata. Questa scheda rappresenta la pagina attiva. Ora occorre modificarla leggermente in modo da creare le altre schede, che rappresentano le pagine inattive. 15) Usare lo strumento Puntatore per trascinare un rettangolo che racchiuda tutti gli elementi grafici della scheda (forma della scheda originale, forma della scheda del tratto e testo inclusi). Copiare e incollare gli oggetti in modo da creare un clone nella stessa posizione. 16) Spostare la grafica clonata verso destra. Suggerimento: oltre a tenere premuto il tasto Maiusc durante il trascinamento con lo strumento Puntatore per spostare gli oggetti secondo un angolo fisso di 45, è anche possibile usare semplicemente i tasti freccia della tastiera per spingere gli oggetti su piccole distanze. Premendo anche Maiusc insieme ai tasti freccia, l oggetto si sposterà di 10 pixel per volta. 17) Selezionare sia la forma della scheda, sia la forma del tratto. Nel pannello Proprietà impostare l opacità sul 25%. È stata così creata la grafica sia per la scheda attiva, sia per la scheda inattiva. Sostituire il testo della nuova scheda con: CHECK RATES (VERIFICA PREZZI). Duplicare una terza scheda e sostituire il testo con MORE INFO (ALTRE INFO). A questo punto il progetto dell interfaccia è completato. L ultima operazione consiste nel riempire di contenuto il progetto. Pagina 20

23 Aggiungere i componenti dell interfaccia Fireworks CS4 include numerosi componenti nella Libreria comune. Inoltre è possibile creare componenti personalizzati con proprietà completamente modificabili. 1) Nella cartella dei file di esempio aprire il file careshare_widgets.fw.png. 2) Selezionare i simboli che si desidera aggiungere. Scegliere Modifica > Copia. 3) Tornare al file di lavoro dell esercitazione. Scegliere Modifica > Incolla. 4) Aprire il pannello Proprietà simbolo (Finestra > Proprietà simbolo). Usare i campi per definire le proprietà modificabili del simbolo. 5) Per sapere come è stata creata la grafica del simbolo, è sufficiente fare doppio clic sul simbolo per aprirlo. Dopo avere esaminato il contenuto del simbolo, fare clic sulla freccia blu, nell angolo in alto a sinistra, per tornare all area di lavoro. Suggerimento: alcune modifiche apportate a un simbolo si propagano a tutte le istanze di quel simbolo. Altre modifiche verranno escluse da Proprietà simbolo e, in questo caso, verranno usati i valori immessi in questo pannello. Aggiungere contenuto alla pagina Find Cars (Trova auto) 1) Passare alla pagina Find Cars (Trova auto) nel pannello Pagine. 2) Selezionare File > Importa. 3) Nella cartella dei file di esempio scegliere il file careshare_map.fw.png. 4) Copiare le risorse del file careshare_widgets.fw.png nel modo descritto in precedenza, quindi posizionarle come illustrato nella Figura 15. Figura 15. Sulla cartina vengono visualizzati i punti in cui sono disponibili le automobili. Pagina 21

24 È stata così creata una pagina Web in Fireworks CS4. Per esercitarsi ulteriormente con il progetto Ignition Carshare, usare come guida la pagina Find Cars locations, nel pannello Pagine. Per iniziare, creare una nuova pagina nel documento di lavoro dell esercitazione, Find Cars locations. Quindi copiare i livelli nella nuova pagina e usarli come sfondo (vedere la Figura 16). Figura 16. Usare i livelli nella pagina Find Cars locations per ricreare la pagina nella copia di lavoro del documento dell esercitazione. Pagina 22

25 ULTERIORI INFORMAZIONI Per altri articoli ed esercitazioni utili ad acquisire dimestichezza con Fireworks, visitare la sezione Guida introduttiva del Centro per gli sviluppatori di Fireworks. Per saperne di più sulle opportunità di formazione, visitare la pagina dedicata alla formazione per Fireworks. Per ulteriori informazioni su Fireworks, visitare il Centro per gli sviluppatori di Fireworks. Adobe Systems Incorporated 345 Park Avenue, San Jose, CA USA Adobe, il logo Adobe, Acrobat, Fireworks e Photoshop sono marchi o marchi registrati di Adobe Systems Incorporated negli Stati Uniti e/o in altri Paesi. Ogni altro marchio appartiene al rispettivo proprietario Adobe Systems Incorporated. Tutti i diritti riservati. 10/08