Transcripciones
1. Introducción: Si miramos estos colores
en la pantalla en este momento, podría ser perdonado
por pensar que está
mirando gradientes. No obstante, si
separo el metal, te darás cuenta de
que en realidad son colores planos. Aquí no hay gradientes. En breve estará
hablando de mucha teoría del color, pero todo es muy
subjetivo porque colores dependen del contexto. Un color se ve diferente dependiendo de qué
color esté al lado. Años si Albert
era instructor en la Escuela
de Arte y Diseño Bauhaus, y argumentó que
no tiene sentido aprender la teoría
del color. Es completamente innecesario
porque un color depende del contexto en el
que se ve el color. Un color puede verse completamente diferente
por dónde está. Esos colores que acabamos de mirar
parecían gradientes porque el color se veía diferente dependiendo de
lo que estaba al lado. En un módulo posterior, hablaremos sobre cómo funciona el color y cómo
funciona tu ojo, y por qué sucede eso. Años si se cree, no
necesitamos hablar de eso. No necesitamos
hablar de teoría del color. Pero personalmente, creo que en los estudios de diseño modernos, hay
que entender
por qué tomó decisiones. Necesitas poder
justificar tus opciones de color. Nadie va a
confiar en que solo eres mejor mirando
los colores que ellos. A pesar de que si completas
los ejercicios en este módulo, vas a ser mejor
mirando los colores que ellos. Y todos los ejercicios
en este módulo se toman directamente de años de Alberts libro
interacciones de color.
2. Un color: Tu primer ejercicio
que se ha tomado de las interacciones de color es hacer que un color parezca como dos colores
diferentes. Y podemos hacerlo cambiando el contexto de dónde está
ese color. Los cuadrados interiores aquí son
exactamente del mismo color y puedo ajustar los dos colores de cajas
exteriores para tratar de hacerlos
lucir diferentes. Podrías hacer esto haciendo ajustes
sutiles en
un programa de gráficos. Pero los estudiantes de Joseph Albo lo hicieron originalmente
con papel de color. Habían cortado de un periódico. Si quieres ser
realmente vieja de la escuela, como podría ser un poco divertido. He creado estas plazas verdes usando un programa
de gráficos simplemente dibujando dos cajas más pequeñas
en cajas más grandes y posicionando las
cajas más pequeñas dentro de las grandes,
las dos cajas más pequeñas tienen que ser del mismo color y los dos outs de cajas pueden ser
del color que quieras. Y tu reto es
que parezca que las dos cajas más pequeñas
son de diferentes colores. En este ejemplo, creo
que la caja de la izquierda se ve un poco
más oscura que la de la derecha. Cuando si los pongo juntos, se
puede ver que son exactamente
los mismos verdes
en el medio. Déjame mostrarte un par más de mis ejemplos antes de
irte y crear los tuyos propios. Aquí tenemos un color azulado. He puesto un
azul muy oscuro detrás de él por un
lado y un verde azulado mucho
más ligero por el otro. Creo que el azul oscuro hace que el cuadrado interior
parezca un poco más ligero, mientras que el azul claro hace que ese azul se vea un poco más oscuro. Y por supuesto de nuevo, son del mismo color. En este ejemplo tenemos un rosa
bastante brillante por un
lado y un rosa
rojizo muy desaturado, más oscuro, rojizo por el otro lado. Si no entiendes
la palabra desaturada, lo veremos más adelante, pero esencialmente el color es menos obvio en el
lado derecho. Nuevamente, ambos afectan
el color interior de diferentes maneras a
pesar de que es del mismo color. Y por último, este color grisáceo realidad tiene un
poco de amarillo en él, pero no te das cuenta la izquierda porque el
fondo es amarillo, mientras que a la derecha se puede ver eso amarillo en el gris. Y cuando los
junte, volverás a notar
que son del mismo color. Tu primer reto
es intentar hacer que un color parezca
dos colores diferentes. Podrías usar el
mismo diseño que yo, donde simplemente
pones un cuadrado dentro de
otro cuadrado y
pruébalo con fondos de diferentes
colores. O podrías ponerlo en
cualquier contexto que quisieras. El reto es
aprender intuitivamente qué atributos
en el color. Voy a afectar
el color dentro de él y junto a él
de diferentes maneras. Por lo que se asegura de que pruebes ese color en todo tipo de contextos
diferentes para
ver qué puedes hacer para ajustar tu percepción
de ese color central. Cuanto más diferente puedes hacer que ese color se vea mejor. Así que diviértete un poco con él.
3. Dos colores: El segundo ejercicio con el que
vamos a jugar para mejorar nuestra comprensión intuitiva
y percepción del color es lo contrario lo que hicimos en
el último experimento. Esta vez vamos
a tratar de hacer que dos colores diferentes
aparezcan iguales. Ahora, he hecho esto usando exactamente
el mismo diseño que usamos
para el último experimento. Sólo que esta vez los dos
colores centrales son muy diferentes. Estos dos
cuadrados más pequeños aparecen tipo
del mismo color mientras que en el contexto de
estos cuadrados más grandes. Pero si los muevo fuera
del camino y me uno a ellos de nuevo, se
puede ver que
en realidad esta vez estos son colores drásticamente
diferentes. Y al mirarlos
con un fondo blanco, repente parece raro que
alguna vez luzcan igual. Aquí solo un
segundo ejemplo donde las dos cajas interiores se ven
algo del mismo color. Pero una vez que sacamos
todo del camino, podemos ver que el de
la izquierda es en realidad un poco más naranja y el de la
derecha es un poco más azul. Pero no notamos
esas cualidades en esos colores
porque el contexto, los colores circundantes
eran naranja y azul. Intenta crear dos colores
diferentes en dos contextos diferentes que se
parecen al mismo color cuando
los miras en general, puedes jugar con
otras cosas
así como con los alrededores aquí. Podrías, por ejemplo, hacerlas diferentes formas
o tamaños diferentes. Tal vez un color se ve un poco menos oscuro solo
porque es más grande. Mira si puedes probar algunas
cosas que no probaste con el último experimento y tratar hacer que dos
colores diferentes aparezcan iguales.
4. Transponer color: habilidad muy, muy complicada para los músicos es transponer música de
una tecla a otra. ¿ Serás ahora
músico de color. Como tal, para ayudar a
afinar tu ojo para identificar las sutiles
diferencias de color, podemos intentar transponer
algunos colores. Aquí tenemos cuatro tonos
sutilmente diferentes de rojo para este próximo ejercicio, podría ayudar
pensar en esto como un solo pedazo de papel plegado con diferentes
cualidades y niveles de luz golpeando las
cuatro áreas diferentes. Ahora, imagina que hay
un cuadrado interior en este trozo de papel. Tal vez sea este color azul azulado. Nuestro reto es
tratar de transponer las cualidades de los colores rojos
a este nuevo color azul. El tono exacto de color azul y la parte superior izquierda realmente no
importa. Sólo vamos a intentar copiar
los cambios
en la calidad a medida que vamos de la
izquierda a la plaza derecha. Y luego cuáles son los
cambios de calidad entre el cuadrado rojo superior izquierdo y
la Plaza Roja inferior izquierda. Intenta ajustar ese cuadrado
azul inferior izquierdo para tener esos
mismos cambios de calidad. Esencialmente si se trataba un trozo de papel doblado
y este fondo izquierdo al cuadrado solo tenía una cantidad
diferente o diferentes cualidades de
luz brillando en él. ¿ Cómo se vería ese color azul? Intenta hacer cada uno de estos cambios en tu programa de
gráficos sin siquiera hacer
ningún muestreo de color ni nada por el estilo. Solo vas a ajustar
el color y ver si puedes crear algo
con los
mismos valores que los colores exteriores. Y sólo por referencia, he
creado un segundo ejemplo. Entonces hay cuatro
rectángulos de púrpura. he elegido casi
por completo al azar, cualidades
ligeramente diferentes de púrpura. Y entonces voy a poner
estos cuatro rectángulos de amarillo y tratar de
transponer esos colores. Estamos viendo
los cambios de calidad entre cada cuadrado de púrpura y tratando de copiar los cambios de calidad en
los cuadrados amarillos. Exactamente igual que
si tratáramos de
mover una pieza musical de
la clave de C a la clave de a. para este ejercicio, al
igual que me viste hacer, vas a crear cuatro rectángulos de diferentes
tonos de un solo color. Simplemente elige el verde tal vez, y haz cuatro tonos
diferentes de verde y ponlos uno al
lado del otro. Y luego agrega cuatro cajas más pequeñas y elige un color
para la parte superior izquierda, hazlo un tono de rojo quizás, y trata de transponer los cambios
de calidad de color de las otras cuatro cajas. Y esto ayudará a entrenar
tu ojo para identificar esos cambios de calidad en el color y también
ajustarlos.
5. Transparencia: Para este próximo ejercicio, estaremos imaginando
que estas casillas en la pantalla son semitransparentes. Necesitarás crear una caja
con un color y luego dos cajas
más pequeñas de otro color y colocarlas
similares a ésta. Ahora imagina
que el de la izquierda está frente al morado
en el medio, y en la caja de la
derecha está detrás de él. Y los,
los tres son un poco transparentes sin ajustar ninguna opacidad en tu programa de gráficos
ni nada por el estilo. Intenta crear dos nuevos
colores para simular un, un elemento de transparencia
entre estas cajas. la izquierda, voy a crear un nuevo color que es un poco
más azul que morado. Y a la derecha, voy a
crear un nuevo color, que es un poco más
morado que azul. A medida que tu intuición para la percepción del
color mejora, vas a poder
crear colores que funcionen aquí que por ahora no se ven completamente
naturales, solo intenta crear lo que será
el color natural
entre estos dos colores. Y de nuevo, como segundo ejemplo, aquí hay una con una
caja amarilla en el medio y dos cajas verdes a cada lado. El cuadro verde a la izquierda, vamos a imaginar
que está frente a
la caja amarilla y la caja
verde a la derecha. Imaginaremos que está
detrás de la caja amarilla. Y luego crearé dos nuevos colores para
llenar los huecos y hacer que esto parezca unas transparencias naturales
en estas cajas. Es algo interesante luego
mirar estos dos nuevos colores
fuera de contexto. Y como último ejemplo, voy a hacer uno con
naranja y verde. Vamos a crear de nuevo
dos nuevos rectángulos mostrando las transparencias
y luego miremos
cómo se ven estos nuevos colores
después. Tu reto para este
video es crear una caja grande de colores y
crear dos cajas de
colores más pequeñas. E imaginen que
tienen un elemento de transparencia y
superposición unos a otros. Quiero que creas
el nuevo color que se
hará en medio de
estas cajas de colores.
6. Gama de transparencia: Este ejercicio se basará el ejercicio en el último video, pero esta vez
vamos a tener tres niveles de transparencia. Imagina que estas tres cajas están frente a esta caja beige, pero tienen diferentes
niveles de transparencia. Y hay una diferencia
incremental. Por mucho que esa diferencia opacidad entre estos
colores es que debería sentirse lineal a través
de los tres de ellos para intentar
volver a crear la ilusión que he creado en la
pantalla aquí mismo. Por lo que volveremos a empezar
con dos colores. He elegido el rojo y el beige aquí. Y notarás que he elegido
un fondo azul marino porque el beige no salió muy
bien sobre un fondo blanco. Pero entonces vamos a crear estos tres nuevos colores a
medida que se superponen. Y debería sentirse como una progresión incremental
entre los tres de ellos. A lo mejor cada uno se siente un poco
menos transparente que el último. Así como segundo ejemplo, he superpuesto algunas
cajas azules sobre una caja roja. Esta vez, de nuevo,
intentaré incrementar cómo se siente
la transparencia agregando colores
completamente nuevos sobre la parte superior. Intenta hacer esto
sin jugar con la opacidad en tu programa de
gráficos ni nada por el estilo, intenta crear literalmente
el nuevo color desde cero. Nuevamente, puede ser realmente
interesante ver cómo estos tres colores
luego se ven fuera
del contexto de los otros
colores que los rodean y ver cómo hay un claro
paso incremental de rojo a azul. Muy similar
al último ejercicio. Pero esta vez
quiero que superpongan tres cajas y creen tres mezclas diferentes son
tres niveles diferentes de transparencia
entre estos colores. Intenta conseguir que estos tres
nuevos colores se sientan como incrementos lineales
o para ponerlo de otra manera. El medio se siente medio camino entre el
primero y el último.
7. Composición del color: Como reto final, quiero que jueguemos
con qué relación de colores se ve naturalmente
bien juntos, vamos a crear
un diseño muy similar a este famoso Paul
Smith InDesign, que es tan exitoso, Lo ha puesto en autos
y patinetas y bufandas y perfumes
y todo tipo de cosas. Quiero que demuestres
una paleta
de colores de cinco colores de
online en algún lugar. Podrías copiar los colores de esta imagen exacta
si realmente lo quieres. O podrías usar un sitio web como un color de droga para simplemente elegir
una selección de colores. Entonces tráelos
a tu
programa de gráficos y trata de crear una composición bien equilibrada
donde no haya blanco, todo está cubierto
por estos cinco colores. Así que como siempre, tengo dos
ejemplos que he creado. Y aquí está mi primer diseño de Paul
Smith que he hecho. Por lo que notarás que el verde
lima era realmente, realmente abrumador
en mi paleta de colores. Lo he hecho tener área muy, muy pequeña en la composición
final. Todo lo que me preocupa aquí
es ¿se ve bien o no? El color marrón,
realmente no me sentí abrumador en absoluto. Entonces la mayor parte de la composición está
utilizando el color marrón oscuro. Aquí hay otro ejemplo de una composición de cinco
colores que he creado donde sólo me preocupa tratar de que se vea
bien en la página, hacerla sentir equilibrada. El amarillo y el
naranja fueron ambos muy abrumadores en este cable de paleta de
colores, mientras que el verde oscuro y
el verde claro menos. Y entonces este color gris marrón carbón mucho
menos así de nuevo, acabo de equilibrar
las relaciones de colores dependiendo de lo
poderosos que aparecieran. Como ejercicio un poco más
avanzado, podría ser interesante hacer esto con un fondo coloreado. Se trata de un cuadro Damien Hirst donde tiene muchos círculos
de diferentes colores. Y de nuevo, se
equilibran en función de lo abrumador o
lo poderosos que se sienten en la composición. Nuevamente, tengo una paleta de colores, y he equilibrado el
número de círculos de colores para que la composición general
se sienta algo equilibrada. Notarás que
hay bastantes
de los pequeños puntos beige,
mientras que muy, muy pocos de
los puntos negros en azul marino oscuro. Pero para este ejercicio puedes hacerlo un poco más
interesante cantonés, porque ¿qué pasa si
cambio el fondo a negro? Bueno ahora para que esto
todavía parezca atractivo, para que aún se sienta equilibrado, he tenido que cambiar el
equilibrio de colores por completo. Ahora la mayoría de los círculos
son el color oscuro, muy pocos colores beige sobre eso. Y en realidad el equilibrio de
todos los colores entre sí. Yo también he tenido que cambiar
un poco. Notarás bastantes puntos morados. Ahora bien, este ejercicio no solo nos ayuda a ver el color
intuitivamente, sino que nos ayuda a pensar en
cómo equilibra en una página similar a esos ejercicios de
composición que hicimos justo al principio. Una vez que hayas completado
este módulo, podrías volver a
esas composiciones tempranas e intentar agregar algo de color. Para este ejercicio,
quiero que vayas a Adobe Color y elijas
una paleta de colores. Entonces crea una composición
solo usando estos colores, pero intenta conseguir ese equilibrio
bien para que no se sienta como si un color sea más
abrumador que otros. Podrías crear esto con
líneas como Paul Smith, o podrías crearlo con
círculos como Damien Hirst. Y luego tienes el
reto añadido de que podrías cambiar el color de fondo y ver cómo cambiaría el equilibrio. O si te gusta, ¿por qué
no divertirte un poco y crear una composición completamente
diferente? Pero solo asegúrate de usar estos cinco colores y que
el equilibrio se sienta bien.
8. Resumen: Estos ejercicios fueron
nuevamente elegidos para mejorar tu intuición en
torno al uso del color. Cambios de color en contexto. Sólo podemos mejorar nuestro uso del color
trabajando con él directamente. Y es genial que hayas hecho estos ejercicios antes de aprender demasiado sobre cómo
funciona el color y cómo
hablamos de colores. Porque todas esas
cosas podrían tener un efecto negativo en cómo
ves los colores en contexto. En las próximas secciones, aún
tenemos que aprender
a hablar de color, ya que estaremos trabajando con clientes
reales cuando
creamos una paleta de colores. Similar a cómo necesitamos
saber hablar tipografía para trabajar con un cliente o simplemente internamente
con el equipo de diseño, necesitamos saber
hablar de colores para trabajar entre sí y
trabajar con nuestros clientes. Pero ahora, después de hacer
estos ejercicios, podrás ver mejor el
color y
podrás trabajar de manera intuitiva mejor con el color.
Rob Sutcliffe, UI Designer / Developer
