Sommario - Città di Torino · colori primari Rosso, Giallo, Blu. Mescolati opportunamente, essi...

pino@pinocappellano.it – www.pinocappellano.it1

Le regole della comunicazione

La progettazione

Gli elementi del layout Whitespace

Elementi grafici

Il colore

Il testo

La composizione

Bibliografia e sitografia

SommarioLa grafica

è impossibile non comunicare

mettersi nei panni del destinatario del messaggio

rendere coerente la presentazione con i contenuti

rendere leggibile la presentazione

fare “attenzione” ai centri di attrazione

Le regole della comunicazioneI principi base

Le basi della progettazione multimediale

Il processo di creazione di un prodotto editoriale multimediale

può prevedere diverse figure, professionalità e competenze:

Il committente

Il produttore

Il progettista multimediale

L’esperto dei contenuti

Il grafico

L’informatico

L’implementatore

Soggetti e professionalità

Il grafico

È colui che idea la parte visual del progetto.

Ha conoscenze umanistiche e matura un proprio stile personale.

Deve possedere:

conoscenze storico-artistiche

competenze di design

gusto estetico

competenze sull’uso di software

Elabora il layout

Suggerisce soluzioni estetiche a problematiche tecniche

Soggetti e professionalità

Pre-produzione studio del caso

analisi dell’esistente (benchmarking)

progetto (brief, flowchart, sketches e storyboard)

Produzione produzione ed elaborazione di testi,

grafica 2D e 3D, video, audio, musica

Implementazione

Post-produzione credits

fase di test

Fasi della produzione

4 domande fondamentaliLe basi della progettazione multimediale

a chi si comunica?Target di riferimento

che cosa si comunica?Categoria (consultazione, didattici, arte e cultura,

informazione, game, edutainment, ecc.) e contenuti

generali (qual è l’accento della comunicazione?)

come si comunica?Linguaggio, tono e scelta dei media

quale strumento e perché?È davvero la scelta giusta? Quali sono le peculiarità?

Gli elementi del layout

Gli elementi del layoutWhitespace

Il whitespace è lo spazio vuoto tra gli elementi di un layout grafico.Oltre a dare “respiro” ed equilibrio alla composizione, permettono anche un “viaggio” del lettore all’interno del layout stesso.

Whitespace in una fotografia

Gli elementi del layoutWhitespace

Un esempio di utilizzo è offerto dal confronto di due immagini pubblicitarie:

quella a destra si riferisce ad un prodotto di basso costo; quella di sinistra ad un prodotto di lusso.

Whitespace in una pubblicità

Elementi graficiGli elementi del layout

Linee, poligoni, cerchi, frecce, segni ed elementi grafici possono contribuire a:

definire gli spazi

distinguere elementi e contenuti

rendere equilibrato il layout attraverso compensazioni e riempimenti

identificare un brand o un’idea comunicativa

Elementi grafici

Il colore - fisica

Il colore è la percezione visiva generata dai segnali nervosi che i fotorecettori della retina mandano al cervello quando assorbono radiazioni elettromagnetiche di determinate lunghezze d'onda e intensità.

Nel 1931 la CommissionInternationale de l'Eclairage (CIE) ha definito uno spazio di colore che comprende tutte le tinte visibilidall'occhio umano, a prescindere dalla luminanza.

Lo spazio colore del CIE:

non viene molto usato a causadella sua complessità.

è preso come riferimento per tuttigli altri spazi di colore.

Il colore - CIE

E’ necessario distinguere, accanto allo spettro del visibile, altri sistemi di “rappresentazione”del colore, chiamati modelli colore:

RGB (Red, Green, Blu)

CMY (Cyan, Magenta, Yellow)

CMYK (Cyan, Magenta, Yellow, blacK)

HSB : Hue, Saturation, Brightness

HSI: Hue, Saturation, Intensity

HSV: Hue, Saturation, Value Exagon

LAB: L = luminosità - A e B cromaticità(colori opponenti)

YUV, YIQ, YCbCr : (televisivi)

Sui modelli colore si basano gli spazi colorecreati appositamente per specifici software come Adobe Photoshop, CorelDraw, QuarkXpress e altri.

Il colore – modelli colore

Diagramma CIE e gamut RGB e CMYK

In ambito grafico-artistico si considerano i colori primariRosso, Giallo, Blu.

Mescolati opportunamente, essi consentono di ottenere i colori secondariArancione, Verde e Viola(che, insieme all’Indaco, costituiscono i colori dell’arcobaleno) e i colori terziari.

Il colore – ruota cromatica

Attraverso l’utilizzo della ruota cromatica è possibile, grazie solo al rapporto che intercorre tra i vari colori, scegliere un appropriato accostamento degli stessi in una composizione cromatica che non sia casuale.

Possiamo distinguere:

Colori armonici

Colori complementari

Colori contrastanti

Colori caldi e colori freddi

Colori armonici

Colori contrastanti

Colori freddi

Colori caldi

Per rappresentare i colori nell’editoria digitale rivolta al Web, si utilizza - per ogni valore di R, G e B - la notazione:

numerica (da 0 a 255)

alfanumerica (da #000000 a #ffffff )

Il numero di colori rappresentabili a videoè maggiore di 16 milioni.

Il colore – rappresentazione digitale

http://it.wikipedia.org/wiki/Lista_dei_colori

Per ogni progetto editoriale si dovrebbe applicare una determinata tavolozza di colori(color harmony) creata appositamente in funzione del messaggio e degli obiettivi di comunicazione prefissi.

Esistono dei siti dove è possibile creare e condividere set di colori:

http://kuler.adobe.com/

http://www.colourlovers.com/

Il colore – scale cromatiche

Esempi di set di colori

Vi sono diversi tipi di caratteri:

Times, Garamond, Goudy, Palatino, Baskerville

Bodoni, Onyx,

Arial, Franklin Gothic, Verdana, TahomaBradley Hand, Brush Script , Lucida Handwriting

ALGERIAN, Chiller, Hobo, Matura, Rosewood

Il testo – i caratteri (font)

Oldstyle

Modern

Sans serif

ScriptDECORATIVE

Utilizzo generico dei tipi di font:

“con grazie” o “serif”

carta stampata: testo

video (siti web, documenti pdf, ecc.): titoli e righe isolate

“senza grazie” o “sans serif” o “bastoni”carta stampata: non proprio opportuno per testo

video (siti web, documenti pdf, ecc.): testo

“script” e “decorativi”carta stampata: titoli e righe isolate

video: titoli e righe isolate

Utilizzare non più di 2 font (eccezionalmente 3)

esempio errato

Utilizzare non più di 2 font (eccezionalmente 3)

esempio corretto

TESTO IN MAIUSCOLO

DIFFICILE LETTURA: NON INDICATO PER PERIODI LUNGHI DI TESTOCOME QUESTO. NELLE CHAT E NEI FORUM EQUIVALE A GRIDARE.

Testo in minuscolo

Facile lettura: indicato per periodi lunghi di testo

Il testo – minuscolo e maiuscolo

Titoli:

GRAFICA GraficaCrea un pattern riconoscibile intorno al testo

CorsivoNon è opportuno usarlo con caratteri molto piccoli

Non è opportuno usarlo con caratteri molto piccoli

GrassettoUsato opportunamente e non eccessivamentecontribuisce ad enfatizzare e armonizzare il testo

SottolineatoNelle pagine Web può generare ambiguità (link o non link?)

Il testo - stile

Per una maggiore leggibilità:

Suddividere il testo in paragrafi distanziati con una doppia interlinea.

Utilizzare l’allineamento a sinistra

Il testo – il paragrafo

Il Grafico di redazione è la figura professionale che, in un quotidiano o un periodico, progetta e realizza la grafica delle pagine redazionali, pubblicitarie e di servizio. L'attività principale del Grafico di redazione è la progettazione del menabò, cioè della gabbia grafica ottimale per la redazione. Il Grafico riceve dal Redattore o dal Capo servizio le direttive di carattere generale per la costruzione delle pagine con indicazioni sull'importanza che le diverse notizie devono avere. Il Grafico di redazione sceglie le fotografie e i grafici da inserire nel servizio, anche su indicazione dell'Art director. Collabora anche alla definizione del progetto grafico, che viene modificato di solito ogni 3-5 anni, come scelta aziendale. Il Grafico di redazione ètenuto a controllare il rispetto delle regole definite nel progetto grafico.

Il Grafico di redazione è la figura professionale che, in un quotidiano o un periodico, progetta e realizza la grafica delle pagine redazionali, pubblicitarie e di servizio.

L'attività principale del Grafico di redazione è la progettazione del menabò, cioè della gabbia grafica ottimale per la redazione.

Il Grafico riceve dal Redattore o dal Capo servizio le direttive di carattere generale per la costruzione delle pagine con indicazioni sull'importanza che le diverse notizie devono avere.

Il Grafico di redazione sceglie le fotografie e i grafici da inserire nel servizio, anche su indicazione dell'Art director.

Collabora anche alla definizione del progetto grafico, che viene modificato di solito ogni 3-5 anni, come scelta aziendale.

Il Grafico di redazione è tenuto a controllare il rispetto delle regole definite nel progetto grafico.

esempio corretto

esempio errato

Le immagini fotografiche devono avere un taglio che permetta di porre l’accento sugli elementi del messaggio.

Le immagini e la fotografiaGli elementi del layout

photo by http://desktoppub.about.com/od/cropping/ig/Cropping/

Per ottenere una maggiore armonia cromatica, attribuire ai colori che circondano l’immagine tonalità “simili” a quelli, dominanti e/o “importanti”, presenti nella fotografia.

Colori non armonici

Colori armonici

Molti software di editing testuale permettono di posizionare l’immagine in relazione al testo

Per inserire immagini in posizione “ravvicinata” si devono utilizzare formati che supportano la trasparenza: GIF, PNG (in Word il formato WMF delle clipart)

Le immagini possono prendere posto dietro il testo ma, per garantire la leggibilità, devono essere opportunamente elaborate.

Esempio di scarsa leggibilità

In genere un buon risultato si ottiene sottoponendo l’immagine dello sfondo alla seguente elaborazione:

Luminosità + 15%

Contrasto - 85%

Ulteriori elaborazioni dipendono dalla qualità e dal tipo di immagine.

Esempio di buona leggibilità

Il layout grafico

La composizioneIl layout grafico

I principi base di una buona composizione grafica sono:

la prossimità

il contrasto

la ripetizione (consistenza)

l’allineamento

La composizione – Prossimità

Il layout grafico

Elementi e contenuti che hanno una relazione tra di essi dovrebbero essere raggruppati.

Quando alcuni oggetti sono in prossimità l’uno all’altro, diventano un’unica unità visiva piuttosto che diverse unitàdistinte.

Questo aiuta a organizzare le informazioni, riduce l'ingombro, ed offre al lettore una chiara struttura.

Il layout grafico

La composizione – Allineamento

Il layout grafico

Niente deve essere inserito nel layout in modo arbitrario.

Ogni elemento dovrebbe avere qualche collegamento visivo con un altro elemento della pagina.

In questo modo si crea un look pulito, raffinato e fresco.

Il layout grafico

primadopo

Il layout grafico

primadopo

Il layout grafico

La composizione – Ripetizione

Il layout grafico

Ripetere elementi visivi del modello.

È possibile replicare colori, forme, texture, relazioni spaziali, spessori di linea, caratteri, le dimensioni, i concetti grafici, ecc.

Tale organizzazione sviluppa e rafforza l'unità.

Il layout grafico

La composizione - Contrasto

Il layout grafico

Il contrasto è spesso la più importante attrazione visiva di una pagina (web, di carta, ecc.).

L'idea che sta dietro il contrasto è quello di evitare che gli elementi sulla pagina siano soltanto simili.

Se gli elementi (tipo, colore, dimensioni, spessore linea, forma, spazio, ecc) non sono identici, è bene renderli molto diversi.

Il layout grafico

Bibliografia - SitografiaLa grafica

Robin Williams, The Non Designers Design Book, 2Nd Ed, 2004

De Felice S., De Felice P.E., Il linguaggio grafico, Falzea, Reggio Calabria, 2003

Fioravanti G., Il dizionario del grafico, Zanichelli, Bologna, 1993

Parra G., Disegno automatico, grafica elettronica, CLUA, Ancona, 1995

Moretti D., Il progetto grafico del libro, Editrice Bibliografica, Milano, 1994

Fioravanti G., Il nuovo manuale del grafico. Guida alla progettazione grafica del prodotto editoriale, Zanichelli, Bologna, 2002

Melli P., L' elaborazione digitale delle immagini : metodi, tecnologie e applicazioni , FrancoAngeli,Milano, 1991

Nidasio F., Villa M., Elementi di Tecnologia grafica: carta, caratteri, composizione, immagini, fotolito,prestampa, stampa, legatoria, cartotecnica, impaginazione, metodologia , Arti Poligrafiche europee,Milano, 2000

John T. Drew, Sarah A. Meyer, Colour Management - A comprehensive Guide for GraphicDesigners, Rotovision, Mies, 2005

Bob Gordon, Maggie Gordon (Consultant Editors), The Complete Guide to Digital Graphic Design,Thames & Hudson, Lewes, 2005

www.boscarol.com

www.html.it

www.scattodesign.com/blog/

www.draft.it/

Sommario - Città di Torino · colori primari Rosso, Giallo, Blu. Mescolati opportunamente, essi...

Documents

Transcript of Sommario - Città di Torino · colori primari Rosso, Giallo, Blu. Mescolati opportunamente, essi...

eSamizdat , pp. quotidiane cone IV)_3.pdf · steklo pam˜ti vidny pervye xagi na zasneˇennom pole moego detstva. t o ... stesse contrade degli angeli andavano, mescolati alla folla.

EDGAR ALLAN POE - Aiutamici€¦ · passati lungo sterminate pareti di scheletri ammonticchiati, mescolati a barilozzi e a botti enormi, sin entro i più riposti recessi delle catacombe.

COLORI AMERICANI!!!

Colori complementari

L’aria è un miscuglio di diversi gas mescolati fra loro. aria.pdf · L’escursione termica riferita ad un anno è detta escursione termica annua. Cavazzuti, Gandola, Odone ,Terra,

Tabella riepilogativa colori disponibili - alpacom.it · Tabella riepilogativa colori disponibili TABELLA RIEPILOGATIVA COLORI DISPONIBILI Colore Mazzetta RAL corrispondente (simile)

Elementi di linee colori spazi indipendentemente Semiotica ... · sono chiamati colori primari o fondamentali: giallo, blu, rosso. Colori secondari: arancione, verde, viola. Colori

vai e non ti fermare! - comunitasantacrocegarbagnate.it · avviinato all’ansia, al turamento e ad un alone di mistero. Essa ela le grandi ... pregi che credono di avere, mescolati

colori ncs

La Presa in Carico del Paziente con Disfagia · DIETA MODIFICATA genere no liquidi o semiliquidi)--cibi e bevande addensati cibi e bevande addensati --farmaci schiacciati e mescolati

iccortona1.gov.iticcortona1.gov.it/wp-content/uploads/.../giornalinoprimarie1_2016.pdf · giallo avrcmo una scnsazionc ... I colori primari gialla, blu e rosso, mescolati tra di Ioro,

Una cascata di colori Colori, emozioni, evviva il Carnevale!

colori leonardo

Elementi di linee colori spazi indipendentemente …...2019/10/04 · Colori primari, secondari, terziar i Tre dei sette colori di base dello spettro sono chiamati colori primari

Cartella Colori

Grest 2017 - parrocchiadibornato.org · dell’universo: terra, acqua, aria, fuoco. Essi sono mescolati in modo perfetto dentro il Creato e hanno plasmato tutte le creature. I quattro

Agliardi, Allegra Di tutti i colori · Agliardi, Allegra Di tutti i colori Segnatura: asp COLORI Una pagina dopo l'altra, i colori si trasformano, accompagnati dalle rime del testo

Laboratorio Colori

Schemi Colori Auto 2006 - rmpaint.com colori auto 2006.pdf · Schemi Colori Auto 2006 Schemi Colori Auto 2006 riporta il programma colori per tutti i modelli di autovetture prodotte

Fatto: Aleksandar Batshev · 2020-06-15 · secolo. A Venezia, il manoscritto della metà del XIV secolo Libro per cuoco offre ravioli di erbe verdi sbollentati e tritati, mescolati