Conceptes bàsics de disseny gràfic
Índex
- 1.Forma i composició gràfica
- 1.1.La composició visual
- 1.2.El marc de la imatge
- 1.3.Retícules
- 1.4.Efectes compositius
- 1.4.1.Contrastos compositius
- 1.4.2.Espai i elements compositius
- 1.5.Transformacions de la forma
- 2.Color i disseny gràfic
- 2.1.Models de classificació del color
- 2.2.Barreges: additiva, substractiva, partitiva
- 2.2.1.Barreja additiva
- 2.2.2.Barreja sostractiva
- 2.2.3.Barreja partitiva
- 2.3.Colors primaris, secundaris i complementaris
- 2.4.Codificació digital del color
- 2.4.1.Modes de color
- 2.4.2.Mode ploma
- 2.4.3.Mode de color indexat
- 2.4.4.Mode de color escala de grisos
- 2.4.5.Catàlegs de color
- 2.4.6.Codificació RGB
- 2.4.7.RGB en decimal i hexadecimal
- 2.4.8.Color en el web, RGB en fulls d'estil
- 2.4.9.Codificació HSB
- 2.4.10.Codificació CIE L*a*b
- 2.4.11.Espais de color segons el dispositiu en CIE Yxy
- 2.4.12.Codificació CMYK
- 2.5.Interacció del color
- 2.6.Contrastos de color
- 3.Introducció a la tipografia
- 3.1.Tipografia: un mitjà gràfic per a un missatge verbal
- 3.2.Evolució històrica de l'escriptura
- 3.3.El llenguatge tipogràfic
- 3.4.Anatomia del tipus
- 3.5.Traços i terminals
- 3.6.Estructura geomètrica del caràcter tipogràfic
- 3.7.Classificació de les famílies tipogràfiques
- 3.8.Combinar fonts tipogràfiques
- 3.9.Composició de text: lletres, paraules, línies
- 3.9.1.La mida
- 3.9.2.Unitats físiques per a mesurar tipus
- 3.9.3.La mida del tipus en pantalla
- 3.9.4.La mida del tipus en el web
- 3.9.5.La mida relativa en la web
- 3.9.6.Espaiat del tipus
- 3.9.7.Interlletratge i espaiat entre paraules
- 3.9.8.El cran
- 3.9.9.Interlineat
- 3.10.Composició de text: columnes i pàgines
- 3.10.1.Amplada de columna
- 3.10.2.Alineació
- 3.10.3.Divisió del text
- 3.10.4.Composició de pàgina
- 3.10.5.Textura i color del text
- 3.11.Llegibilitat i amenitat
- 3.11.1.Llegibilitat
- 3.11.2.Amenitat
- 3.12.Expressivitat
- 3.13.Tipografia digital
- Bibliografia
1.Forma i composició gràfica
1.1.La composició visual
"Desde el principio, esa única palabra composición, resonó en mi cerebro como una plegaria."
Vassili Kandinsky. Miradas al pasado (ed. original 1918).
"Las expresiones de sentimientos que se han ido formando en mi interior de forma similar [...] que, después de los primeros bocetos preliminares, he estudiado y trabajado lentamente, de una forma casi pedante: es el tipo de obra que yo llamo composición. [...] al final yo me inclino por los sentimientos más que por los cálculos."
Vassili Kandinsky (1998). De lo espiritual en el arte: contribución al análisis de los elementos pictóricos. Barcelona: Ediciones Paidós Ibérica.
"En la pintura, las épocas dominadas por criterios de representación simbólica y no naturalistas, como la Edad Media, favorecen el establecimiento de jerarquías entre las figuras por medio de su ubicación en el conjunto (las más importantes se colocan en el centro de la composición) o de su tamaño (las figuras serán más grandes o más pequeñas según su importancia simbólica, con independencia de su tamaño real)."
José María Faerna García-Bermejo; Adolfo Gómez Cedillo (2000). Conceptos fundamentales de arte. Madrid: Alianza Editorial.
1.2.El marc de la imatge
1.2.1.Per què un marc per a la imatge?
"El marco rectangular de la pintura occidental, que heredarán luego la fotografía y el cine, vulnera [...] de un modo flagrante el formato y las características de la visión natural, a pesar de lo cual no nos extraña ni perturba, porque es una convención cultural sólidamente arraigada en nuestro contexto y con la que nos familiarizamos desde nuestra infancia. Esta convención se consolidó a partir del siglo XIV, en conexión con la linealidad de la perspectiva geométrica, en armonía con el formato rectangular de las paredes (soportes pictóricos) y de las ventanas de las casas, del formato de las páginas de los libros que se ilustraban y del formato del escenario teatral."
Romà Gubern (1987). La Mirada Opulenta. Barcelona: Editorial Gustavo Gili.
Kandinsky: entrar en la composicióSobre l'actitud d'observació externa o interna d'una composició, Kandinsky comenta:
"La calle puede ser observada a través del cristal de una ventana, de modo que sus ruidos nos lleguen amortiguados, los movimientos se vuelvan fantasmales y toda ella, pese a la transparencia del vidrio rígido y frío, aparece como un ser latente, del otro lado. O se puede abrir la puerta: se sale del aislamiento, se profundiza en el ser-de-afuera, se toma parte y sus pulsaciones son vividas con sentido pleno. [...] Del mismo modo la obra de arte se refleja en la superficie de la conciencia. [...] También aquí hay un cierto cristal transparente. [...] También aquí existe la posibilidad de penetrar en la obra, participar en ella y vivir sus pulsaciones con sentido pleno."
Vassili Kandinsky (1984). Punto y línea sobre el plano (ed. original 1926). Barcelona: Editorial Labor.
1.2.2.Marcs i finestres en els ordinadors
1.2.3.Les proporcions del marc
"En algunos periodos de la historia [...], en particular en el Renacimiento y en el siglo XVII, se usaron sistemas geométricos para [...] determinar las proporciones del área de la pintura."
Maurice de Sausmarez (1983). Diseño Básico; dinámica de la forma visual en las artes plásticas (ed. original 1964). Barcelona: Gustavo Gili.
1.2.4.Secció àuria, la proporció harmònica
1.3.Retícules
1.3.1.Retícules per repetició de mòduls
1.3.2.Retícules basades en les proporcions del marc
1.3.3.Diagramació basada en columnes de text
1.4.Efectes compositius
1.4.1.Contrastos compositius
1.4.2.Espai i elements compositius
1.5.Transformacions de la forma
-
Les reflexions
-
Les translacions en l'espai
-
Les rotacions
-
Qualsevol combinació entre elles
-
Esbiaixar.
-
Distorsionar.
-
Projectar.
-
Metamorfosis que els efectes especials permeten en els mitjans audiovisuals.
2.Color i disseny gràfic
2.1.Models de classificació del color
2.1.1.Lluminositat, saturació i matís
-
La lluminositat, luminància o brillantor defineix les diferències de quantitat de llum d'un color. Un vermell fosc té menys lluminositat que un vermell clar.
-
La saturació defineix el nivell mínim i màxim de puresa d'un color. Els grisos representen l'absència total de saturació. Un vermell intens pot tenir el mateix nivell de lluminositat que un gris, però té un nivell màxim de saturació.
-
El matís o to defineix la diferència entre un color i un altre. Un verd pàl·lid i un verd fosc tenen el mateix matís. Un verd i un blau tenen diferent matís.
2.1.2.Models tridimensionals del color
2.2.Barreges: additiva, substractiva, partitiva
2.2.1.Barreja additiva
2.2.2.Barreja sostractiva
2.2.3.Barreja partitiva
2.3.Colors primaris, secundaris i complementaris
2.4.Codificació digital del color
2.4.1.Modes de color
2.4.2.Mode ploma
2.4.3.Mode de color indexat
2.4.4.Mode de color escala de grisos
2.4.5.Catàlegs de color
2.4.6.Codificació RGB
2.4.7.RGB en decimal i hexadecimal
Decimal
|
Hexadecimal
|
---|---|
0 |
0 |
1 |
1 |
2 |
2 |
3 |
3 |
4 |
4 |
5 |
5 |
6 |
6 |
7 |
7 |
8 |
8 |
9 |
9 |
10 |
A |
11 |
B |
12 |
C |
13 |
D |
14 |
E |
15 |
F |
16 |
10 |
17 |
11 |
18 |
12 |
19 |
13 |
20 |
14 |
2.4.8.Color en el web, RGB en fulls d'estil
p { color: #FF0000; }
p { color: rgb(255,0,0); }
p { color: #FF0000; background-color: #FFFF0; }
p { color: rgb(255,0,0); background-color: rgb(255,255,0); }
p { color: red; }
2.4.9.Codificació HSB
-
HLS (7) (hue, lightness, saturation),
-
HSV (8) (hue, saturation, value) o
-
HVC (9) (hue, value, croma),
2.4.10.Codificació CIE L*a*b
-
Grau de lluminositat: un eix del negre (valor 0) al blanc (valor 100).
-
Component cromàtic a: un eix que va del verd (valor mínim –128) al vermell (valor màxim 127).
-
Component cromàtic b: un eix que va del blau (valor mínim –128) al groc (valor màxim 127).
2.4.11.Espais de color segons el dispositiu en CIE Yxy
2.4.12.Codificació CMYK
2.5.Interacció del color
2.6.Contrastos de color
2.6.1.La classificació d'Itten
2.6.2.Contrastos de color en la creació visual
3.Introducció a la tipografia
3.1.Tipografia: un mitjà gràfic per a un missatge verbal
3.2.Evolució històrica de l'escriptura
3.3.El llenguatge tipogràfic
3.4.Anatomia del tipus
3.5.Traços i terminals
3.6.Estructura geomètrica del caràcter tipogràfic
-
Rectes ortogonals: usa línies rectes verticals i/o horitzontals.
-
Rectes fragmentades: usa línies rectes combinant verticals i horitzontals amb obliqües.
-
Corbes: usa línies corbes.
-
Mixtes: combina línies corbes amb línies rectes.
3.7.Classificació de les famílies tipogràfiques
-
Amb gràcia o serifs. Els caràcters amb gràcia o serif presenten petits traços en les astes verticals i horitzontals; això en facilita la lectura, ja que ens ajuda a reconèixer els caràcters, sobretot en material imprès (els llibres). El seu origen és més antic que les sense gràcia i es remunten a la recuperació de les formes romanes en el Renaixement, encara que en l'actualitat es continuen creant noves tipografies amb gràcies.
-
Lineals, sans serif o de pal sec. Es caracteritzen perquè no tenen gràcia o serifs en els traços terminals. Els seus traços solen tenir menys variacions, una x més alta i, en general, uns traços menys inclinats. Són fonts d'origen més modern, els primers tipus comencen a crear-se en els últims anys del segle xix.
-
romanes antigues,
-
de bloc serif o egípcies,
-
romanes modernes o Didones,
-
lineals o de pal sec,
-
d'escriptura.
-
Elzeviriana (romanes antigues): gràcies triangulars
-
Didot (romanes modernes): gràcies filiformes
-
Egípcia (de bloc): gràcies quadrangulars
-
Antiga (de pal sec): absència de gràcies
3.7.1.Classificació tipogràfica Vox-ATypI
-
Humanístiques
-
Garaldes
-
Reals
-
Didones
-
Mecàniques
-
Lineals
-
Incises
-
D'escriptura o scripts
-
Manuals
-
Fractures
-
No llatines
Vox (1954)
|
Vox/ATypI (1962)
|
DIN 19518 (1964)
|
BS 2961 (1967)
|
---|---|---|---|
|
1. Clàssiques |
|
|
1. Humanístiques |
1.1. Humanístiques |
I. Humanístiques |
I. Humanístiques |
2. Garaldes |
1.2. Garaldes |
II. Garaldes |
II. Garaldes |
3. Reials |
1.3. Reials |
III. Reials |
III. Reials |
|
2. Modernes |
|
|
4. Didones |
2.1. Didones |
IV. Didones |
IV. Didones |
5. Mecàniques |
2.2. Mecàniques |
V. Mecàniques |
V. Mecàniques |
6. Lineals |
2.3. Lineals |
VI. Lineals |
VI. Lineals |
|
2.3.1. Grotesques |
|
VI.a. Grotesques |
|
2.3.2. Neogrotesques |
|
VI.b. Neogrotesques |
|
2.3.3. Geomètriques |
|
VI.c. Geomètriques |
|
2.3.4. Humanístiques |
|
VI.d. Humanístiques |
|
3. Cal·ligràfiques |
|
|
7. Incises |
3.1. Incises |
VII. Incises |
VII. Incises |
8. D'escriptura |
3.2. D'escriptura |
VIII. D'escriptura |
VIII. D'escriptura |
9. Manuals |
3.3. Manuals |
IX. Manuals |
IX. Manuals |
|
3.4. Fractures |
X. Fractures |
|
|
|
X.a. Gòtiques |
|
|
|
X.b. Gòtiques arrodonides |
|
|
|
X.c. Schwabacher |
|
|
|
X.d. Fractures |
|
|
|
X.e. Fractures variants |
|
|
3.5. Gaèliques |
|
|
|
4. No llatines |
XI. No llatines |
|
3.7.2.Bringhurst, una classificació historicista
-
Renaixentistes. Desenvolupades a partir de la cal·ligrafia per escribes i erudits humanistes del nord de la península Itàlica entre els segles XIV i XV.
Tenen traç modulat però sense molt contrast, un eix oblic, gràcies fines, alçària baixa de x, grans obertures, anells gairebé circulars.
Famílies en aquesta categoria: Centaur, Bembo, Garamond.
-
Barroques. Desenvolupades durant els segles XVII i XVIII. S'aparten de l'escriptura cal·ligràfica.
Modulades amb més contrast que les renaixentistes, obertures més moderades, eix variable, inclouen cursiva com a complement de la rodona.
Famílies en aquesta categoria: Janson, Caslon, Garamond.
-
Neoclàssiques. Desenvolupades a partir del segle XVIII a França.
Eixe vertical, modulades amb contrast moderat, gràcies en forma de llàgrima.
Família en aquesta categoria: Baskerville.
-
Romàntiques. Desenvolupades entre els segles XVIII i XIX, abandonen la inspiració cal·ligràfica i passen a ser lletres "dibuixades".
Modulades amb contrast extrem, gràcies fines i terminals arrodonits, obertures petites, eix principal vertical i secundari oblicu en algunes lletres.
Famílies en aquesta categoria: Bodoni, Didot, Bulmer.
-
Realistes. Desenvolupades entre els segles XIX i XX a partir de les formes bàsiques de les "romanes" però sense modulació.
Sense gràcies o amb gràcies en bloc, no modulades, amb traç uniforme, amb eix vertical, obertures petites.
Famílies en aquesta categoria: Franklin Gothic, Helvetica.
-
Modernistes geomètriques. Desenvolupades al segle XX buscant l'estructura de les formes geomètriques bàsiques com el cercle i la línia.
Sense gràcia o amb gràcia igual en pes al traç, sense modulació, sense eix, anells circulars.
Famílies en aquesta categoria: Futura, Memphis.
-
Modernistes líriques. Són fruit del redescobriment, al segle XX, de les formes renaixentistes.
Traç modulat, gràcies fines.
Famílies en aquesta categoria: Palatino, Dante, Pontifex.
-
Postmodernistes. Desenvolupades a final del segle XX a partir de la revisió, l'hibridació o la paròdia de formes neoclàssiques i romàntiques.
Eix vertical, gràcies bruscament modelades.
Famílies en aquesta categoria: Espirit, Nofret.
3.7.3.Panose, una classificació formalista
Classe de família |
2. Latin text (text llatí) |
Tipus de gràcia |
2. Cove (connexió amb l'asta suavitzada per traços arrodonits) |
Pes |
6. Medium (mitjà) |
Proporció |
3. Modern (modern) |
Contrast |
5. Medium-low (mitjà-baix) |
Variació de traç |
4. Gradual/transitional (gradual, de transició entre diagonal i vertical) |
Estil de braç |
5. Straight arms / single serif (braços rectes, gràcia simple) |
Forma de lletra |
2. Normal/contact (rodona) |
Línia mitjana |
3. Standard/pointed (alçària estàndard de línia mitjana, terminal en punta dels traços diagonals) |
Alçària x |
4. Constant/large (alçària de caixa alta constant, alçària alta de x) |
-
Lletres amb cantonades rectes i parts rodones: (B, D, J, P, R)
-
Lletres amb diagonals: (A, V, W, Z)
-
Lletres quadrades: (H, K, M, N, X)
-
Lletres rodones: (C, G, O, Q)
-
Lletres semirodones: (S, U)
-
Lletres semiquadrades: (E, F, L, T, Y)
3.8.Combinar fonts tipogràfiques
"El tipógrafo novel que tenga que proyectar un libro tendría que empezar por explorar en primer lugar las posibilidades que ofrece la unidad tipográfica [el uso de una sola familia tipográfica], y sólo tendría que pasar a combinar tipos distintos cuando su gusto se haya consolidado y depurado.[...] Un libro donde se utilice un solo tipo será en el peor de los casos solamente mediocre; el error en la combinación de familias produce resultados nauseabundos."
Josep M. Pujol; Joan Solà (1995). Ortotipografia; manual de l'autoeditor i el dissenyador gràfic (11) . Barcelona: Columna.
(11) Citació traduïda de l'original en català.
"Cuando se combinan dos tipografías hay que evitar el peligro de caer en la ambigüedad: tienen que ser familias bien contrastadas."
Josep M. Pujol; Joan Solà (1995). Ortotipografia; manual de l'autoeditor i el dissenyador gràfic (12) . Barcelona: Columna.
(12) Citació traduïda de l'original en català.
3.9.Composició de text: lletres, paraules, línies
3.9.1.La mida
3.9.2.Unitats físiques per a mesurar tipus
"Durante más de 250 años después de la invención de los tipos móviles que realizara Gutenberg, cada fundición produjo tipos con sus propias especificaciones y tamaños, lo cual significaba que un tipo no era intercambiable entre una fundición y otra. En respuesta a esta situación caótica, el grabador francés Pierre Simon Fournier formuló el sistema de puntos en 1737."
Christopher Perfect (1992). Guía completa de la tipografía. Barcelona: Blume.
3.9.3.La mida del tipus en pantalla
3.9.4.La mida del tipus en el web
3.9.5.La mida relativa en la web
-
L'alçària de M és en la tradició tipogràfica la mida d'una M majúscula en caixa alta. El seu equivalent en CSS és ema i es refereix a la mida del tipus. No podem prendre'l estrictament com la mida de la M, però sí que és una mesura molt útil que podem usar tant horitzontalment com verticalment.
-
L'alçària de x és en la tradició tipogràfica la mida de la x minúscula en caixa baixa. El seu equivalent en CSS és ics. Com s'ha vist, l'alçària de x no és igual i varia segons la font tipogràfica.
3.9.6.Espaiat del tipus
"En un sistema básico de 18 unidades, una «M» de caja alta (la letra más ancha) tiene 18 unidades, la «o» de caja baja, 10 unidades y la «i» de caja baja, 4 unidades."
Perfect (1992)
3.9.7.Interlletratge i espaiat entre paraules
3.9.8.El cran
-
Kern. Terme anglès per al cran (el terme en català deriva del que s'usa en francès). Espai d'una lletra que entra en el d'una altra de contigua. originàriament era una osca en el tipus.
-
To kern. Ajustar l'espai horitzontal entre un parell de lletres. El verb no té equivalent en català.
-
Kerning. Abreviació de l'anglès kerning adjustment, ajust del cran entre dues lletres.
3.9.9.Interlineat
3.10.Composició de text: columnes i pàgines
3.10.1.Amplada de columna
3.10.2.Alineació
3.10.3.Divisió del text
3.10.4.Composició de pàgina
3.10.5.Textura i color del text
3.11.Llegibilitat i amenitat
"Por legibilidad entendemos la facilidad con la que las palabras pueden leerse cómodamente, a una velocidad normal de lectura."
Christopher Perfect (1992). Guía completa de la tipografía. Barcelona: Blume.
"La legibilidad se usa generalmente para designar la calidad de la diferenciación entre los caracteres, es decir, la claridad de las letras individuales. La amenidad de estilo es la calidad de lectura proporcionada por una obra tipográfica en la que lo apretado del texto, el interlineado y otros factores tienen una influencia decisiva en la función del tipo."
Lewis Blackwell (1998). Tipografía del siglo XX. Remix. Barcelona: Gustavo Gili.