Contrasti

Redazione MedPop R7 ?

Versione: .php .html .pdf Autori: Peter & Daniela Categoria: Redazione

Prologo

1.  Contrasti di luminosità

Prologo

Epilogo


2.  Contrasti di peso

Si percepisce come pesante una superficie scura, grande e orizzontale, come leggero una superficie pallida minuta e verticale.
Il contrasto di peso si definisce tra la relazione di questi due.
In redazione si tratta maggiormente di relazioni tra caratteri e sfondi. Tradizionalmente si scrive con lettere scure (nere) su sfondi pallidi (bianchi).

2.1  Contrasti tra sfondo e carattere

La relazione tra sfondo e caratteri ...

1) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 2) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gli esempi a fianco illustrano le tesi di sopra. Si nota anche, che i massimi contrasti rendono il testo "duro", mentre dei colori pallidi e scuri con contrasto ancora ben leggibile li rende più morbidi.:
  1. leggero, duro
  2. pesante, duro
  3. pesantissimo, duro
  4. leggero, più morbido
  5. leggero, morbidissimo
  6. pesante, ottuso

Per scelta dei colori i passaggi a sinistra sono "freddi", compensato un pò per questo passaggio più "caldo".

3) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 4) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
5) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 6) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Esempi:

%frame center bgcolor=#cfc color=#600% 
Notazione di colore di caratteri e
sfondo. %%

\\\\\\

(:table width=100% align=center
border=1:)
(:cellnr bgcolor=#ccf align=center:)
%color=#006% toni di blu
(:cell bgcolor=#ffa align=center:)
%color=#330% toni di giallo
(:cellnr bgcolor=#fcc align=center
colspan=2:) %color=#600% toni di rosso
(:tableend:)
\\

'-I colori dei caratteri nella prima
tabellina sono complementari allo
sfondo. Nella seconda tabellina invece
ho usato un grigio con la stessa
luminosità. All'occhio del pittore
sembra più armoniosa la prima, anche se
non si nota a colpo d'occhio la
differenza. Ma sono pignolo.-'
\\\

(:table width=100% align=center
border=1:)
(:cellnr bgcolor=#ccf align=center:)
%color=#222% blu / grigio
(:cell bgcolor=#ffa align=center:)
%color=#222% giallo / grigio
(:cellnr bgcolor=#fcc align=center
colspan=2:) %color=#222% rosso / grigio
(:tableend:)

Notazione di colore di caratteri e sfondo.






toni di blu toni di giallo
toni di rosso


I colori dei caratteri nella prima tabellina sono complementari allo sfondo. Nella seconda tabellina invece ho usato un grigio con la stessa luminosità. All'occhio del pittore sembra più armoniosa la prima, anche se non si nota a colpo d'occhio la differenza. Ma sono pignolo.

blu / grigio giallo / grigio
rosso / grigio

istruzioni:

Colori standard
di PmWiki:

black nero
blue blu
gray grigio
green verde
maroonmarrone
navy blu scuro
purpleporpora
red rosso
silverargento
white bianco
yellowgiallo

Colori basilari secondo Itten
Le notazioni dei colori per caratteri e sfondo sono:
  • color=AttributoColore → colore dei caratteri
  • bgcolor=AttributoColore → colore dello sfondo
Gli attributi di colori possono essere annotati
  • in parole standartizzate inglesi p.es. green oppure
  • come espressioni esadecimali RGB a 1 o due cifre per colore p.es. #00ff00 o #0f0



2.2  Pesi di caratteri

I pesi relativi di caratteri di parole e brevi tratti di testo sono maggiormente determinati per la loro altezza e per la possibilità di renderli:

>>frame color=#606 bgcolor=#ffc
padding=5px<<
'''grassetto''', ''inclinato''\\
[+grande+], [++più grande++]\\
[-piccolo-], [--più piccolo--]\\
dim.'^apice^', chim.'_pedice_'\\
{+inserito+}, {-cancellato-}
>><<

grassetto, inclinato
grande, più grande
piccolo, più piccolo
dim.apice, chim.pedice
inserito, cancellato

con le sovra menzionate scorciatoie.

Per dei paragrafi si usano allo stesso scopo (ed altri) le seguenti istruzioni:

>>frame color=#f7f7ff bgcolor=navy
font-family='Copperplate' font-size=20pt
padding=5<<
Lorem ipsum '''dolor''' sit [-amet-],
''consectetur'' [--adipisicing--] elit,
...
>><<

Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

Negli esempi sopra ho attenuato un pò la durezza tramite l'uso di colori complementari risp. in tono di carattere e sfondo mentre le seguenti dimostrano la piena durezza per via del contrast bianco-nero.

Le diverse "famiglie di caratteri" dimostrano notevoli differenze di "volume", larghezza, distanza tra linee ecc. come si vede dalla seguente tabella.

1) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Arial Black 10) 2) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Marker Felt 11)
3) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Comic Sans MS 11) 4) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Verdana 11)
5) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Papyrus 12) 6) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Century Gothic 11)
7) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Times New Roman 12pt) 8) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Andale Mono 10pt)

Epilogo


3.  Contrasti complementari

Prologo


fff / 000 / 000  ◊  000 / fff / fff

Luminosità L: 0|45~? → (0/765=?)
Grigi corrisp.: 000000 ◊ ffffff


ff0 / 606 / 606  ◊  606 / ff0 / ff0

Luminosità L: 12|30~1:2.5 → (204/510=1:2.5)
Grigi corrisp.: 373737 ◊ f8f8f8


fc0 / 60c / 60c  ◊  60c / fc0 / fc0

Luminosità L: 18|27~1:1.5 → (306/459=1:1.5)
Grigi corrisp.: cfcfcf ◊ 474747


f90 / 00c / 00c  ◊  00c / f90 / f90

Luminosità L: 12|24~1:2 → (204/408=1:2)
Grigi corrisp.: aeaeae ◊ 373737


f60 / 099 / 099  ◊  099 / f60 / f60

Luminosità L: 21|18~1:1.17 → (306/357=1:1.17)
Grigi corrisp.: 949494 ◊ 848484

↓ non più decifrabile meglio p.es.↓

f60 / 099 / fff  ◊  099 / f60 / eee

Luminosità L: 21|18~1:1.17 → (306/357=1:1.17)
Grigi corrisp.: eee ◊ fff


f00 / 0c0 / 0c0  ◊  0c0 / f00 / f00

Luminosità L: 12|15~1:1.25 → (204/255=1:1.25)
Grigi corrisp.: 7e7e7e ◊ aaaaaa

↓ malamente decifrabile meglio p.es.↓

f00 / 0f0 / 0c0  ◊  0c0 / 600 / f00

Luminosità L: 12|15~1:1.25 → (204/255=1:1.25)
Grigi corrisp.: 7e7e7e ◊ aaaaaa


903 / 9f0 / 9f0  ◊  9f0 / 903 / 903

Luminosità L: 12|24~1:2 → (204/408=1:2)
Grigi corrisp.: 484848 ◊ e4e4e4

4.  Contrasti di temperatura colore

Masssimi contrasti caldo-freddo sono malrappresentabili sul web. L'ambito di luminosità per blu-verde (#0§§) è ca. tra 6 e 30 e e per rosso-arancio (#§§0) ca. tra 9 e 20 che corrisponde a contrasti luminosi massimi di ca. 1:3 (il fatto è dato dal sistema di notazione RGB).

Il blu-verde secondo Itten sarebbe ca. 00b0b0   luminosità 352 che è "inaffidabile":
va quindi approssimato con 009999   che è nettamente troppo scuro: luminosità 306. Il rosso-arancio è abbastanza fedele con luminosità 353. Il miscuglio tra le due dovrebbe dare un perfetto grigio b0b0b0   (352 e 352 complementari) ma fornisce in definizione rgbHEX3websafe una relazione 353 e 306 che è un grigiastro tendenza arancio b1b099 .

f60 / 099 / fff  ◊  099 / f60 / fff


f60 / 033 / fff  ◊  c30 / 0ff / fff


066 / f60 / fff  ◊  0ff / c30 / 000


c30 / 0ff / 0ff  ◊  Sfondo/Bordo/Caratt.


066 / f60 / 0ff  ◊  033 / f60 / f60


0ff / c30 / 066  ◊  0ff / c30 / c30


Epilogo


Pagina tipo Riassunto

<< R6? | | Colori >>

 

Commento 
Autore 
Enter code 300

Edit - History - Print - Recent Changes - Search
Page last modified on January 02, 2009, at 10:33 PM