Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto.

Presentazione sul tema: "Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto."— Transcript della presentazione:

1 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello 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 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Carmine Alfano | Graphic & Web Designer Laureato in scenografia, sono attualmente iscritto al biennio specialistico di grafica progettuale, presso lAA.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 dotnet Campania.org per info e domande potete rivolgervi agli indirizzi qui indicati: | carmine.alfano@dotnetcampania.org | info@carminealfano.it | dotnetcampania.org/blogs/mydesign

3 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Agenda Argomenti____________________________ – Impariamo a realizzare un Layout con Design Impostazione della griglia, 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 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Expression Studio Expression Design software di grafica vettoriale che useremo per realizzare il layout del sito Expression Web è invece un editor html che useremo per scrivere il codice, sviluppare limpaginazione e preparare la Masterpage per i Programmatori Sia Design che Web fanno parte del pacchetto Microsoft Expression Studio dedicato al mondo della grafica per ulteriori informazioni consultare il sito: www.microsoft.com/expression

5 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Differenze tra Immagine Vettoriale 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 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Realizzare un Layout 72dpi 1024x768 RGB Risoluzione Massima Ottimizzazione Dimensioni Layout Modalità Colore

7 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Risoluzione Massima e Formati di Esportazione Sebbene sia ancheesso generato da un software di grafica vettoriale, quando lavoriamo per il web dobbiamo sempre esportare il nostro layout in formati bitmap come: Sebbene sia ancheesso 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 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Risoluzione Massima e Formati di Esportazione.gif.png.jpg Struttura Layout: Header, Background, Menù, ecc… Contenuti: Gallery, Fotografie, ecc… Sempre a 72dpi

9 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Dimensioni Minime di un Layout Utenti Formato in Uso 15% 50% 18% 12% 800x600 1024x768 1600x1200 640x480 1024x768 ottimizzazione layout

10 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Modalità di Colore RGB Modalità Colore Adatta al Video Modalità Colore Adatta alla Stampa CMYK

11 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Struttura Base di un Layout HEADER CONTENT FOOTER

12 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Struttura Base di un Layout HEADER FOOTER LOGO COLONNA SX COLONNA CENTRALE COLONNA DX MENU

13 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello DEMO Passiamo ora alla realizzazione pratica del sito

14 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Un grazie di cuore a tutti gli sponsor!

15 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello GRAZIE PER LATTENZIONE La vostra opinione per noi è fondamentale: compilate il modulo di feedback!