dall'idea al layout: Expression Studio per il disegno di client web .

1. dall'idea al layout: Expression Studio per il disegno di client web. Carmine Alfano| Graphic & Web Designer carmine.alfano@dotnetcampania.org | info@carminealfano.it dotnetcampania.org/blogs/mydesign

2. Carmine Alfano | Graphic & Web Designer Laureato in scenografia, sonoattualmenteiscritto al bienniospecialisticodigraficaprogettuale, pressol’AA.BB. di Napoli. Lavoro da 8 anni in uno studio grafico, per progetti di marchi, immagine coordinata, brochure, depliant, manifesti. Attualmente collaboro con un’ agenzia di webdesign di Napoli e offro collaborazione come freelance per agenzie di comunicazione - studi grafici Italia. Mi occupo della sezione grafica di dotnetCampania.org per info e domande potete rivolgervi agli indirizzi qui indicati: | carmine.alfano@dotnetcampania.org | info@carminealfano.it | dotnetcampania.org/blogs/mydesign

3. Agenda Argomenti____________________________ • Impariamo a realizzare un Layout con Design • Impostazionedellagriglia, Design, Esportazione • Usiamo Expression Web per sviluppare le pagine in html • Per trasformare la nostra idea grafica in html/css • Preparare la Mastepage • Realizzare una Masterpage

4. Expression Studio • ExpressionDesignsoftware di grafica vettoriale che useremo per realizzare il layout del sito • Expression Webè invece un editor html che useremo per scrivere il codice, sviluppare l’impaginazione e preparare la Masterpageper i Programmatori Sia Design che Web fanno parte del pacchetto Microsoft ExpressionStudio dedicato al mondo della grafica per ulteriori informazioni consultare il sito: www.microsoft.com/expression

5. DifferenzetraImmagineVettoriale e Raster (o bitmap) Grafica Vettoriale Insieme di primitive geometriche che descrivono punti, linee, curve e poligoni ai quali possono essere attribuiti colori e sfumature Grafica Bitmap Le immagini vengono descritte come in una griglia di pixel opportunamente colorati (bitmap=mappa di bit).

6. Realizzare un Layout Risoluzione Massima 72dpi 1024x768 Ottimizzazione Dimensioni Layout RGB Modalità Colore

7. RisoluzioneMassima e FormatidiEsportazione Sebbene sia anche’esso generato da un software di grafica vettoriale, quando lavoriamo per il web dobbiamo sempre esportare il nostro layout in formati bitmap come: .gif .png .jpg

8. RisoluzioneMassima e FormatidiEsportazione Struttura Layout: Header, Background, Menù, ecc… .gif .png .jpg Contenuti: Gallery, Fotografie, ecc… Sempre a 72dpi

9. DimensioniMinimedi un Layout • Utenti • Formato in Uso • 15% • 800x600 • 50% • 1024x768 • 18% • 1600x1200 • 12% • 640x480 • 1024x768 ottimizzazione layout

10. ModalitàdiColore Modalità Colore Adatta al Video • RGB • CMYK Modalità Colore Adatta alla Stampa

11. Struttura Base di un Layout HEADER CONTENT FOOTER

12. Struttura Base di un Layout HEADER LOGO MENU COLONNA SX COLONNA CENTRALE COLONNA DX FOOTER

13. Passiamooraallarealizzazionepratica del sito DEMO

14. Un grazie di cuore a tuttigli sponsor!

15. La vostraopinione per noi è fondamentale: compilateil modulo di feedback! GraZIE PER L’ATTENZIONE