Upload
mafalda-vitale
View
228
Download
0
Embed Size (px)
Citation preview
Expression Web per la graficaCarmine Alfano | Graphic & Webdesigner
CHI SONO
Laureato in scenografia, sono attualmente iscritto al biennio specialistico di grafica progettuale, presso l’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 Napolie offro collaborazione come freelance per agenzie di comunicazione - studi grafici Italia.
Mi occupo della sezione grafica di DotNetCampania.orgper info e domande potete rivolgervi agli indirizzi qui indicati:
| [email protected] | [email protected]| dotnetcampania.org/blogs/mydesign
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
– Utilizzare Super Preview Per la verifica della corretta impaginazione nei browser più utilizzati.
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 l’impaginazione. Può essere anche usato per preparare la Masterpage da passare ai Programmatori
Sia Design che Web fanno parte del pacchetto Microsoft Expression Studiodedicato al mondo della grafica per ulteriori informazioni consultare il
sito: www.microsoft.com/expression
Differenze tra Immagine Vettoriale e Raster (o bitmap)
Grafica VettorialeInsieme di primitive geometriche
che descrivono punti, linee, curve e poligoni ai quali
possono essere attribuiti colori e sfumature
Grafica BitmapLe immagini vengono descritte
come in una griglia di pixel opportunamente colorati
(bitmap=mappa di bit).
Le curve di bézier
Le Curve di bézierLe curve furono realizzate nel 1959 da Paul de
Casteljau usando un algoritmo da lui inventato.Nel 1962 furono largamente pubblicizzate
dall’ingegnere della Renault Pierre Bézier che stabilì un modo di realizzare le curve che partiva da due punti e una linea vettoriale appunto, un
sistema innovativo che permette ancora oggi agli operatori grafici di realizzare disegni curvilinei bellissimi e precisi. Le curve di Bézier possono
essere realizzate da molti programmi di grafica vettoriale come Expression Design, Corel Draw,
Adobe Illustrator, Inkscape o Freehand.
I programmi di grafica vettoriale
Expression DesignÈ un programma di grafica vettoriale, che ci dà
la possibilità di realizzare delle immagini tramite curve di bézier o primitive
geometriche.
In fase di esportazione per il web dobbiamo comunque salvare il nostro
elaborato vettoriale in un formato di compressione bitmap. Solo nel caso in cui stiamo utilizzando programmi come Blend
possiamo salvare sul web in “vettoriale puro” che il browser interpreterà grazie al
plug-in silverlight
Cosa sono i pixel
pixel=picture elements
In computer grafica col termine pixel si indica ciascuno degli elementi puntiformi che compongono la rappresentazione di una immagine raster. Solitamente i punti sono così piccoli e
numerosi da non essere distinguibili ad occhio nudo, apparendo fusi in un'unica immagine quando vengono
stampati su carta o visualizzati su un monitor
I due aspetti della risoluzione
LA RISOLUZIONE
Comprende questi due aspetti
Quantità di pixel delle immagini: la quantità effettiva di pixel che compongono l’immagine.
Un esempio possibile sono le varie risoluzioni dei monitor come 1024 x 768 ecc.
Densità dei pixel:è la distribuzione dei pixel per un area specifica (misurata in inch, pollici) con la formula DPI (dots per inch). Esempi di possibili risoluzioni fra le più comuni sono 72 dpi, 300 dpi ecc.
Realizzare un layout – parametri fondamentali
72dpi
1024x768
RGB
Densità di pixel consigliata(si potrebbe anche esportare a 96dpima il peso delle immagini sarebbe superiore)
Ottimizzazione Dimensioni Layout consigliata
Modalità Colore da usare
Ottimizzare la densità dei pixel
72 dpi Densità di pixel, tutte le immagini per il web vanno esportate a tale risoluzione per ridurre i tempi di caricamento.
Con il DPI si esprime la quantità di punti stampati o visualizzati su una linea lunga un pollice (circa 2,54 cm).
Generalmente ad un valore più elevato corrisponde una risoluzione maggioreed una migliore resa sulle linee inclinate.
dpi = dot per inch
Scegliere la risoluzione
640x480
800x600
1024x768
MONITOR DA 14 POLLICI
MONITOR DA 15 POLLICI
MONITOR DA 15 A 17 POLLICI
800x600 o 1024x768?
800x600
1024x768
Alcuni sostengono che si dovrebbero sviluppare le pagine basandosi sul minimo comune denominatore. Si capisce però che utilizzando questa risoluzione per progettare le pagine web, si ha a disposizione meno spazio per gestire i contenuti di una pagina.
Se il nostro target di riferimento è particolarmente evoluto, di conseguenza sappiamo che la maggior parte delle persone che visualizzeranno le pagine da noi create avranno, nella maggior parte, una risoluzione uguale o superiore a 1024x768, possiamo permetterci di realizzare un layout che si riferisca a questa risoluzione.
MINIMO COMUNE DENOMINATORE
RISOLUZIONE CONSIGLIATA
800x600 o 1024x768?
1024x768
Fino a pochi anni fa andava in voga un tipo di progettazione che prevedeva la colonna centrale di colore diverso rispetto allo sfondo, a volte, con effetti ombra si staccava del tutto da esso, oggi bisogna considerare anche gli utenti che hanno monitor da 19 e 20 pollici, è quindi consigliabile, strutturare il layout a “fasce” orizzontali, o addirittura a fondo unico.
NON E’ UNA RISOLUZIONE LIMITE
css dedicato PER DISPOSITIVI MOBILI
È consigliabile, inoltre, realizzare un foglio di stile css dedicato esclusivamente ai dispositivi mobili, anche perché sarebbe impossibile trovare un minimo comune denominatore che vada bene sia per i palmari che per i pc.
La modalità di colore RGB
RGBModalità Colore Adatta al Video
Modalità Colore Adatta alla StampaCMYK
Formati di compressione bitmap
Immagine bitmap
.gif .png .jpg
Formati di compressione:.
Questi formati comprimono le dimensioni dei file delle immagini per ridurre i tempi di caricamento.
È importante sapere quale formato utilizzare per ogni diverso tipo di immagine
Formati di compressione bitmap
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 compressi come:
.gif .png .jpg
Formati di compressione bitmap
.gif .png
.jpg
Struttura Layout: Header, Background, Menù, ecc…
Contenuti:Gallery, Fotografie, ecc…
Sempre a 72dpi
Struttura del layout – Macro aree
HEADER
CONTENT
FOOTER
Struttura del layout – Micro aree
HEADER
FOOTER
LOGO
COLONNASX
COLONNACENTRALE
COLONNADX
MENU
DEMORealizzare il layout di un’applicazione web
Un grazie di cuore a tutti gli sponsor
Senza di loro oggi non saremmo qui!
Compilate il modulo di feedback!
La vostra opinione per noi è fondamentale! Grazie!