Fundamentos de diseño
1
El Color
2
Propiedades del color
3
1. Tono
2. Saturación
3. Brillo
Propiedades del color: Tono
4
Tono ( hue), matiz o croma es el atributo que diferencia el color y por la cual designamos los colores: verde, violeta, anaranjado.
Propiedades del color: Tono
5
Saturación ( saturation) es la intensidad cromática o pureza de un color.
Propiedades del color: Tono
6
Brillo ( brightness) es la cantidad de luz emitida por una fuente lumínica o reflejada por una superficie.
Modelos de
representación del color
7
El círculo cromático
8
• El ojo humano distingue unos 10.000 colores.
• El círculo cromático, es una representación ordenada y circular de los colores de acuerdo con su matiz o tono, en donde se representa a los colores primarios y sus derivados.
• Su uso es compatible tanto con los modelos sustractivos de color (artísticos, pictóricos), como con los modelos aditivos (lumínicos).
El círculo cromático
9
El círculo cromático que conocemos no es del todo correcto, ya que solo representa los tonos en su máxima saturación no teniendo en cuenta la luminosidad de cada uno.
Por tanto, cuando lo utilicemos como referencia para hacer esquemas de color, debemos ser conscientes de esta limitación.
Uso del color
10
Para escoger los colores, nos basaremos en la imagen corporativa de la empresa.
Si esto no existe, debemos definir la gama de colores:
• Basada en las reglas de la teoría del color.
• Basada en la psicología del color.
Psicología del color
11
Psicología del color
12
Podemos clasificar los colores en fríos y cálidos.
Psicología del color
13
Los colores que se eligen en el esquema de color pueden implicar impresiones sutiles y activar distintas asociaciones en los espectadores.
Psicología del color
14
Blanco: significa seguridad, pureza y limpieza. A diferencia del negro, el blanco tiene una connotación positiva y es el más utilizado para dar un aspecto minimalista. Su máximo poder es el de resaltar a los otros colores.
Psicología del color
15
Amarillo: simboliza la luz del sol. Representa alegría, felicidad, inteligencia y energía. Al amarillo simula entrar en calor, provoca alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención, es útil para destacar aspectos importantes de un documento.
Psicología del color
16
Naranja: Representa entusiasmo, felicidad, atracción, creatividad, determinación, éxito, ánimo y estímulo. Por su alta visibilidad también es útil para captar la atención y subrayar aspectos a destacar de un lugar.
Psicología del color
17
Rojo: representa fuego y sangre, está asociado al peligro, la guerra, la energía, fortaleza, determinación así como a la pasión, al deseo y al amor. Visibilidad alta, para avisos importantes, prohibiciones y llamadas de precaución. Adecuado para el mundo del motor (coches y motos), bebidas energéticas, juegos, deportes y actividades de riesgo.
Psicología del color
18
Violeta: se asocia a la realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y extravagancia. Asociado con la sabiduría, la creatividad, la independencia, la dignidad.
Psicología del color
19
Azul: el color del cielo y del mar, asociado con la estabilidad y la profundidad. Adecuado para mostrar limpieza, para promocionar productos de alta tecnología o alta precisión.
Psicología del color
20
Verde: el color de la naturaleza. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.
Psicología del color
21
Negro: representa poder, elegancia, formalidad, muerte y misterio. Puede dar imagen de elegancia y aumentar la sensación de profundidad y perspectiva. También lo podemos usar para diseños minimalistas.
Psicología del color
22
Neutros (grises, marrones…): representan la neutralidad, la seriedad y la calma. Son colores perfectos para acompañarlos de pequeños toques de colores vivos, ya que son colores monótonos y relajantes.
Psicología del color
23
Psicología del color
24
Algunas asociaciones son globalmente reconocidas, como la de que el amarillo es el color de la luz del Sol, otras son específicas de cada cultura.
Cualquier experiencia que un grupo de personas tenga en común puede crear una nueva asociación con determinados colores. La globalización está exponiendo a la mayoría del mundo a unas imágenes y elecciones de color comunes a través del mundo audiovisual.
Psicología del color
25
Psicología del color. Cómo actúan los colores sobre los sentimientos y la razón-Eva Heller.
Esquemas de color
26
Esquemas de color
27
Se componen del conjunto de colores principales que aparecen en la imagen.
• Crea una primera impresión.
• Ayuda a establecer el estado de ánimo de la escena.
• Da cohesión a todos los elementos de la imagen.
• Ayuda a destacar unos elementos sobre otros sin crear estridencias.
Esquemas de color
28
Ningún color puede ser considerado un valor absoluto, de hecho los colores se influyen mutuamente si se acercan. Los colores tienen diferente realce según el contexto en el que se dispongan o se encuentren.
Monocromático Complementario AnálogoComplementario
DivididoTriaxial
Varias intensidades del mismo color.
Colores opuestos en el círculo.Permite introducir colores fríos y cálidos en el esquema.Puede resultar estridente
Colores adyacentes en el círculo, con un color común.
Combina un color con dos análogos de su complementario.
Combina tres colores equidistantes.
Esquemas de color: armonía
29
Esquemas de color: generadores
30
Para crear nuestros esquemas de color podemos utilizar generadores online gratuitos como el siguiente:
https://color.adobe.com/
Sistemas de trabajo con
color
31
Sistemas de trabajo con color: RGB
32
Colores luz primarios: rojo, verde y azul.
• Al sumarse el resultado es blanco.
• Al apagarse el resultado es negro.
Sistemas de trabajo con color: RGB
33
Sistemas de trabajo con color: RGB
34
Sistemas de trabajo con color: CMYK
35
Colores pigmento primarios: amarillo, cian, magenta y negro.
• Al sumarse el resultado es negro.
• Al eliminar cantidad el resultado es blanco.
Sistemas de trabajo con color: CMYK
36
Sistemas de trabajo con color: CMYK
37
En impresoras domésticas se usan dos sistemas de cartuchos:
4 cartuchos(o 2 si el de color va todo en uno)
6 cartuchos(impresiones más precisas)
Sistemas de trabajo con color: CMYK
38
Proceso impresión offset – Impresión profesional
Sistemas de trabajo con color: CMYK
39
Proceso impresión offset – Impresión profesional
Sistemas de trabajo con color: CMYK
40
Proceso impresión Pantone – Impresión profesional y forma más precisa de conseguir colores exactos.
Sistemas de trabajo con color: CMYK
41
Existen códigos que permiten traducir los pantones a CMYK: por ejemplo, el Pantone Coated 100 C (amarillo canario) se convierte al RGB con el código 246, 235 97 y al CMYK con 0, 41, 61, 4.
Pero, no siempre es posible convertir un color Pantone en un código CMYK. Por el hecho de que las tintas Pantone nacen de barnices y no de la unión de cuatro colores, a veces es imposible encontrar el equivalente exacto en un sistema diferente.
https://store.pantone.com/es/es/color-of-the-year-2017
Sistemas de trabajo con color:
Hexadecimal
42
Se utiliza en diseño web para definir los colores.
Este es el selector de Google, que podemos usar desde nuestro navegador buscado “Selector de color hexadecimal”
Imágenes
43
Imágenes para pantalla
44
• Se miden en píxeles.
• Resolución de 72 ppp.
• Si son para web es muy importante que su peso sea pequeño.
Imágenes para pantalla
45
Usaremos estos formatos:
• Jpg: fotografías e ilustraciones con mucha variación de colores.
• Gif: imágenes animadas.
• Png: ilustraciones de colores planos.
jpg png gif
Imágenes para pantalla
46
Cuando guardamos una imagen de colores planos en jpg aparecen los errores conocidos como artefactos jpg:
png jpg
Imágenes para pantalla
47
Cuando guardamos una imagen de colores planos en jpg aparecen los errores conocidos como artefactos jpg:
png jpg
Imágenes para impresión
48
• Se miden en mm o cm (aunque se trabajen en píxeles).
• Resolución de 150-300 ppp.
• Pesan mucho más que las imágenes para pantalla.
Imágenes para impresión
49
Existen tamaños estándares de papel:
Tamaño folio
Resolución
50
Podemos hablar de tres estándares:
• 72ppp: pantalla.
• 150ppp: impresora casera
• 300ppp: imprenta