Tema 1 - Diseño Gráfico

1
Diseo grfico y entornos multimedia 2015/2016

Aida Vallejo. UPV/EHU (Universidad del Pas Vasco)
Diseo grfco y
entornos
multimedia
aida.vallejo@ehu.eus

1. ESTTICA 1: color
Irudiaren iturria:http://electrasinclair.deviantart.com/art/Colour-Panels-61557260

Imagen corporativa

COLOR
TEORA DEL COLOR
CLASIFICACIN
SOPORTES
CARACTERSTICAS
CRCULO CROMTICO
DEGRADADO
PSICOLOGA DEL COLOR
COLOR CORPORATIVA

Logotipos
Fuente: http://www.jerpublicidad.com/blog/?p=874

Teora del color
Fuente: http://tdelcol.blogspot.com.es/

Teora del color

El color es el resultado del reflejo de los rayos luminosos de los elementos en nuestra retina.
Dependiendo de la longitud de las ondas de estos rayos va a ser el color que nosotros percibamos.
El color blanco aparece cuando hay
una superposicin de todos los colores:
abundancia de todos los colores.
Cuando nosotros ponemos una linterna enfrente de un prisma,
o vemos el arcoiris en un da lluvioso,
podemos ver como el blanco esta conformado
por esta sobre exposicin de los seis colores: rojo, amarillo, anaranjado, verde, azul y violeta.
A diferencia del blanco, el negro es la ausencia de color.
La longitud de la ondas son muy pobre y por eso,
cuando estamos en un cuarto con muy poca luz (no hay reflejos de rayos de color) todo es oscuro.
Esto explica por qu nuestros ojos perciben tantas tonalidades de colores.
Tambin con esto podemos deducir que una persona con problemas oftalmolgicos
va a tener opinin diferente de un color a comparacin tuya.
Los daltnicos o las personas con astigmatismo ven los colores diferentes a nosotros.
Fuente:
http://ocw.udem.edu.mx/cursos-de-posgrado/tutorial-de-diseno-grafico/M3/Teoria%20del%20color%20y%20
los%20tipos.html

TEORA DEL COLOR
Fuente de la imagen: http://1.bp.blogspot.com/_LNDHoyYuFEI/S-Te_KxipWI/AAAAAAAAADc/muQweusrxHo/s1600/espectro010307.jpg

Fuente de lainformacin: http://ocw.udem.edu.mx/cursos-de-posgrado/tutorial-de-diseno-grafico/M3/Teoria%20del%20color%20y%20los%20tipos.html

er
er
Clasifcacin: 1 , 2 y 3 grado

COLORES PRIMARIOS
10
11

COLORES PRIMARIOS (luz)
Red:
rojo
Green:
verde
Blue:
azul
Irudiaren iturria: http://visualdesigncolor.blogspot.com.es/2012/06/rgb-y-cmyk.html

SOPORTES: tv / ordenador
12
13

COLORES PRIMARIOS (Impresin)

Este modelo se basa en la mezcla de
pigmentos de los siguientes colores
para crear otros ms:
* C = Cyan (Cian).
* M = Magenta (Magenta).
* Y = Yellow (Amarillo).
* K = Black o Key (Negro).
Imagen:
http://www.webriti.com/index.php/color/cmyk-and-rgb-colorspace/
14

CMYK
El modelo CMYK
(acrnimo de Cyan, Magenta, Yellow y Key)
es un modelo de color sustractivo que se utiliza en la
impresin en colores.
Es la versin moderna y ms precisa del
ya obsoleto Modelo de color RYB,
que se utiliza an en pintura y bellas artes.
Permite representar una gama de color ms amplia que este
ltimo, y
tiene una mejor adaptacin a los medios industriales.
15

Cartuchos
Irudiaren iturria: http://www.milcartuchos.com/
16

Irudiaren iturria: http://www.milcartuchos.com/

17

18

tono, saturacin y brillo (HSB, hue,

saturation, brightness)
19
CMYK (Cyan,
Magenta, Yellow,
Key
RGB (red, green, blue para pantallas)

https://helpx.adobe.com/es/photoshop-elements/using/color.html

Imagen: http://www.burleighprint.com.au/2010/11/difference-between-rgb-and-cmyk-colours/
20

Colores complementarios
Qu son los colores
complementarios?
Como la palabra lo dice, Son los
colores que se complementan, ya sea
en RGB para llegar a formar la luz
como en CMYK para formar la
oscuridad.
Si observamos nuevamente el crculo cromtico, los colores

complementarios son siempre los que se encuentran enfrentados,
ejemplos de colores complementarios son el Amarillo Violeta, Rojo
Verde y Azul Naranja.
Son colores que utilizamos cuando queremos generar mucho contraste
Fuente: http://www.abcdisegno.com/teoria-del-color/
21

Cdigos de color (informtica)
Irudiaren iturria:http://almacenplantillasweb.es/2010/06/coleccin-de-chuletas-css-html-javascript-php-cms/
22

Cdigo HTML
Por Html-source-code3.png: Reisio derivative work: Hazmat2 (Este archivo se deriv de: Html-source-code3.png) [Public domain undefined GPL (http://www.gnu.org/licenses/gpl.html)], undefined

Imagen: https://pinceladasdesocialmedia.wordpress.com/2013/06/09/trucos-para-optimizar-tu-blog-sin-saber-html-ii/
24



27


28
CMYK (Cyan,
Magenta, Yellow,
Key


Pantone
Imagen: http://es.wikipedia.org/wiki/Pantone
29
30

Pantone
Cada color se describe por

una numeracin y unas siglas
en funcin de la superficie o material
en el que se va a aplicar el color:
M para acabado mate
C y CP para papel estucado (Coated)
EC para estucado segn el estndar europeo (Euro Coated)
U y UP para papel texturado (Uncoated)
TC y TCX para tejidos (Textil Color eXtended)
TPX para papel (Textil Paper eXtended)
Q para plsticos opacos (opaQue)
T para plsticos transparentes (Transparent).

Iturria: Wikipedia

31

Imagen: http://www.dechsuwan.com/silk/silk_color.html
32

Imagen: http://personal.uncc.edu/lagaro/cwg/color/color_mixing.html
33

Colores terciarios
Colores terciarios:
Combinacin de colores de un primario y secundario = color
nuevo. Ej. Azul (primario)+ Magenta (secundario)= morado
clarito
Fuente:
http://ocw.udem.edu.mx/cursos-de-posgrado/tutorial-de-diseno-grafico/M3/Teoria%20del%20color%2
0y%20los%20tipos.html
34

35

CARACTERSTICAS DEL COLOR
TONO
MATIZ
SATURACIN
VALOR (BRILLO)
ARMONA
CONTRASTE
36

Irudiaren iturria: http://www.taringa.net/posts/apuntes-y-monografias/4605647/Consejos-para-usar-paletas-de-color-_Diseno-Web_.html
37

Tonalidad
38
Irudiaren iturria: http://www.abcdisegno.com/archivos/blog/tonos.gif

Irudiaren iturria:http://www.abcdisegno.com/teoria-del-color/

39

Muchas tonalidades / pocos colores

(+barato):
Se utilizan muchas tonalidades del mismo color

para que la impresin sea ms barata
Parece que usamos varios colores, pero en
realidad son varios tonos del mismo color (un
porcentaje mayor o menor de una tinta concreta)
Si solo usamos una tinta, la impresora solo ha de
usar un cartucho.
Otra estrategia es usar el fondo como color (del
soporte) e imprimir en blanco y negro.
40
41

Escala de grises
100%
10%
Varias tonalidades de negro
>%<
Imagen: http://www.abcdisegno.com/teoria-del-color/

Escala de grises
Imagen:
http://www.tuswallpapersgratis.com/wallpaper/Paisaje-con-Escala-de-Grises/
42

Blanco y negro
Imagen:
http://www.rubengg.com/www/manualdelah/color/color.html
43
44

Matiz
Que es un matiz?
Un matiz es el estado puro de un color, sin el blanco o negro agregados.
Si observamos en el crculo cromtico, los matices son aquellos que se generaran a
los extremos de los colores puros, si a un color puro le agregamos otro color puro,
vamos a generar un matiz, por ejemplo, un verde azulado o un verde amarillento,
sern matices del verde, y se enconaran a los costados de este.
Fuente: http://www.abcdisegno.com/teoria-del-color/
Imagen: http://www.abcdisegno.com/teoria-del-color/

Saturacin
Imagen: http://juliejmontoyam.blogspot.com.es/2010_06_01_archive.html
45
46

Saturacin: Es la intensidad cromtica del color. Es el

grado de pureza de pigmentacin que un color tiene.
Un color saturado es aquel que se manifiesta con todo su
potencial cromtico, inalterado, completo.Cuando se va
"bajando su porcentaje de color" su saturacin cambia. Est
concepto va muy de la mano con el tono. Vuelvo a esta
imagen.
Vemos diferentes tonos de dos tintas, el terracota y gris.
stas tonalidades se dieron gracias a que se jug con la
SATURACIN (o porcentaje, como haba manejado el
concepto antes) de las tintas. Los contornos terracotas de la
estrella tiene una saturacin del 100% y del 50%
respectivamente. En el contorno externo su color est puro,
en otras palabras 100%, mientras que el de su interior esta a
la mitad de saturacin: 50%. Lo mismo pasa con el gris.
Con esto concluimos que la tonalidad es la degradacin que
podemos hacerle a un color, para tener diversidad de tonos de
ste mismo. La saturacin es el porcentaje e intensidad
que le quito al color.
Fuente:
http://ocw.udem.edu.mx/cursos-de-posgrado/tutorial-de-dise
no-grafico/M3/Conceptos%20del%20color.html

Valor
47
En esta imagen vemos como el verde va cambiando de valor. Por una parte se va combinando con
amarillo, hasta llegar a convertirse en la tinta amarilla. Al igual que los colores verdes oscuros, se fu
aplicando gris hasta llegar a tener un verde oscuro.
Imagen:
http://ocw.udem.edu.mx/cursos-de-posgrado/tutorial-de-diseno-grafico/M3/Conceptos%20del%20color.
html

48
Valor: Es la intensidad luminosa del color. Es
la cantidad de luz u opacidad que puede
reflejar un color.
Es muy parecido a la saturacin y el tono, la
diferencia es que aqu yo combino colores para
crear un nuevo color. En las tintas tan solo se baja
la saturacin o porcentaje del color. (De un azul
cyan fuerte y puro a un cyan casi blanco). En el
valor yo agrego:
* Blanco: para hacer el color mas claro, o
aumentar el valor
* Negro o gris: para opacar el color, o disminuir
el valor
* Otro color: para irme a una nueva gama de
color y crear un valor distinto.
Fuente:
http://ocw.udem.edu.mx/cursos-de-posgrado/tutor
ial-de-diseno-grafico/M3/Conceptos%20del%20colo
r.html

COMBINACIN DE COLORES /
ARMONA
49
50

Armonia
Imagen:http://anibaldesigns.com/2011/04/02/armonia-del-color/
Armona: Coordinar los

diferentes valores que
el color adquiere en una
composicin. Armnica
son las combinaciones
en las que se utilizan
modulaciones de un
mismo tono, o tambin
de diferentes tonos,
pero que en su mezcla
mantienen los unos
parte de los mismos
pigmentos de los
restantes

Imagen:
http://estudiodelcolor.blogspot.com.es/2009/09/armonia-del-color.html
51

52
En todas las armonas cromticas se pueden observar tres

colores: Dominante, Tnico (opuesto) y el de Mediacin.
Dominante: Es el color que predomina en nuestra composicin
por su uso. Debe ser un color neutro que no opaque a los
dems colores utilizados.
El tnico: Es el complementario del color de dominio, es el mas
potente en color y valor.
El de mediacin: Acta como conciliador y modo de transicin
entre cada uno de los dos anteriores, suele tener una situacin
en el circulo cromtico cercano a la de color tnico.
Por ejemplo: en una composicin armnica cuyo color dominante
sea el amarillo, y el violeta sea el tnico, el mediador puede ser el
rojo si la sensacin que queremos transmitir sea de calidez, o un
azul si queremos que sea mas bien fra.
53

Kontraste
El Contraste
se produce
cuando en una
composicin
los colores no
tienen nada en
comn y no
guardan
ninguna
similitud.
54

Contraste
Andy Warhol
Marilyn
Imagen: http://disenograficoeilustracionpopart.blogspot.com.es/2014/09/andy-warhol-artista.html

Colores clidos - fros
Imagen:http://www.abcdisegno.com/teoria-del-color/
55

56

Imagen:
http://jesusgonzalezfonseca.blogspot.com.es/2011/05/psicologia-del-color.html
57

Colores claros / oscuros
58
59

Contraste (colores fros/clidos)
Wheatfield with Crows, 1890, Van

Gogh Museum, Amsterdam
Imagen: https://en.wikipedia.org/wiki/Vincent_van_Gogh

60

61
The Caf Terrace on the Place du

Forum, Arles, at Night, September
1888, Krller-Mller Museum,
Otterlo, The Netherlands
62

The Starry Night, June 1889, The Museum of Modern Art, New York

Tipos de contraste (1)
De tono: Cuando utilizamos diversos tonos

cromticos, es el mismo color de base pero en
distinto nivel de luminosidad y saturacin.
Contraste de claro/oscuro o contraste de grises: El
punto extremo est representado por blanco y
negro, observndose la proporcin de cada uno
Contraste de color: Se produce por la modulacin
de saturacin de un tono puro con blanco, con
negro, con gris, o con un color complementario).
Contraste de cantidad: Es igual los colores que
utilizemos, consiste en poner mucha cantidad de
un color y otra ms pequea de otro.
63

Tipos de contraste (2)
Contraste simultneo: Dos elementos

con el mismo color producen el mismo
contraste dependiendo del color que
exista en su fondo.
Contraste entre complementarios: Se
colocan un color primario y otro
secundario opuesto en el trangulo de
color. Para conseguir algo ms
armnico, se aconseja que uno de ellos
sea un color puro y el otro est
modulado con blanco o con negro.
Contraste entre tonos clidos y fros: Es
la unin de un color fro y otro clido
64

Simulador
Quires practicar el uso de contraste?

Ingresa a sta liga donde puedes hacer
combinaciones y darte cuenta si estas
haciendo una combinacin armnica o
contrastante.
http://www.educacionplastica.net/PerCol0.htm
65

CMO USAR EL CRCULO

CROMTICO PARA CREAR UNA
PALETA DE COLORES
Imagen: http://www.theweddingexpert.ca/2008/12/how-to-use-the-colour-wheel-to-choose-your-wedding-colours/
66

KOLORE-SORTA
Crea tu propia gama de colores:

crala a partir del crculo cromtico
Simulador: http://www.educacionplastica.net/ActColSus.htm
67

Armona entre colores

(colores equidistantes)
Imagen: http://www.taringa.net/posts/imagenes/9468502/_Diseno-Grafico_---La-teoria-de-los-colores.html
68

Hay varias maneras de trabajar la rueda,

y cada una generar combinaciones sensiblemente diferentes.
La primera consiste en
utilizar colores que aparecen en puntos equidistantes de la rueda.
Esto te proporcionar
un conjunto cromtico bien diferenciado,
y podrs elegir todos los colores que quieras,
pero en el caso de este ejemplo,
digamos que para tu diseo necesitas cuatro.
Escoge un color intenso
para las reas de la ilustracin que definen los lmites y los bordes,
y colores menos llamativos para rellenar reas que hay entre ellos.
69


(colores adyacentes)
70

El segundo mtodo
consiste en elegir
cuatro colores adyacentes en la rueda (anlogos).
Eso te proporcionara
una gama armoniosa de colores,
que no necesariamente darn como resultado
un color dominante intenso,
pero s una gama que combina bien.
71

72

(colores opuestos/complementarios)

El tercer mtodo
consiste en escoger colores
directamente opuestos en la rueda
(complementarios).
Evidentemente, esto slo funciona por parejas,
as que intenta escoger dos colores
que luego vayas a combinar con el blanco y el negro,
u otra pareja bicolor que d resultados con cualquier otra
opcin.
73

Degradado (1 color)
Imagen: http://fotospara.net/fotos-para-relajarse/degradado-en-naranja
74

Degradado (2 colores)
Imagen: http://silaonline.forospanish.com/t6-efecto-espacio
75

Psicologa del color
Imagen:
http://nicolasvalente.blogspot.com.es/2007/09/psicologa-del-color-en-el-diseo.html
Youtube:http://www.youtube.com/watch?v=PImm83Uor9Q
http://www.youtube.com/watch?v=o2kYV9WVAVM&feature=player_embedded
76

PROGRAMAS PALETAS DE COLOR
77

78


79
CMYK (Cyan,
Magenta, Yellow,
Key


80

Tema 1 - Diseño Gráfico

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tema 1 - Diseño Gráfico

Transféré par

Droits d'auteur :

Formats disponibles

1

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

TEORA DEL COLOR

PSICOLOGA DEL COLOR

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Teora del color

Diseo grfico y entornos multimedia 2015/2016

Teora del color

Diseo grfico y entornos multimedia 2015/2016

TEORA DEL COLOR

Fuente de la imagen: http://1.bp.blogspot.com/_LNDHoyYuFEI/S-Te_KxipWI/AAAAAAAAADc/muQweusrxHo/s1600/espectro010307.jpg

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

COLORES PRIMARIOS (luz)

Irudiaren iturria: http://visualdesigncolor.blogspot.com.es/2012/06/rgb-y-cmyk.html

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

COLORES PRIMARIOS (Impresin)

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Irudiaren iturria: http://www.milcartuchos.com/

Diseo grfico y entornos multimedia 2015/2016

Irudiaren iturria: http://www.milcartuchos.com/

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

tono, saturacin y brillo (HSB, hue,

RGB (red, green, blue para pantallas)

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Si observamos nuevamente el crculo cromtico, los colores

Diseo grfico y entornos multimedia 2015/2016

Cdigos de color (informtica)

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

tono, saturacin y brillo (HSB, hue,

RGB (red, green, blue para pantallas)

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Cada color se describe por

M para acabado mate

C y CP para papel estucado (Coated)

EC para estucado segn el estndar europeo (Euro Coated)

U y UP para papel texturado (Uncoated)

TC y TCX para tejidos (Textil Color eXtended)

TPX para papel (Textil Paper eXtended)

Q para plsticos opacos (opaQue)

T para plsticos transparentes (Transparent).

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

Diseo grfico y entornos multimedia 2015/2016

CARACTERSTICAS DEL COLOR