Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular....

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