Cómo trabajar con color en diseño de interfaz de usuario (semana 8 de bootcamp de UI)

1. Adative y sustracción: En la mayoría de los países, Inglaterra es definitivamente uno de ellos. Cuando estás en la escuela alrededor de los cinco o seis años, tu maestro te dirá, estos son los colores primarios, rojo, azul y amarillo. Te enseñarán que no puedes hacer estos tres colores de ningún otro color. Y que puedes mezclar estos tres colores para hacer cualquier otro color. Pregunta rápida. De cuáles de esos tres hechos crees que tu maestra te estaba mintiendo? Estos tres colores son los colores primarios. No puedes hacer estos tres colores mezclando ningún otro color. Y puedes hacer todos los demás colores a partir de estos. Bueno, desgraciadamente, tu maestra te estaba mintiendo sobre todas esas cosas. Si has pasado algún tiempo trabajando con una computadora, probablemente estés consciente de que tiene tres luces diferentes dentro del monitor, rojas, azules y verdes. estos se les suele referir como los colores primarios de la luz, mientras que el rojo , el azul y el amarillo podrían considerarse como los colores primarios de Brian al usar pintura, por ejemplo. Otra forma de pensar en esto podría ser que las luces son colores primarios aditivos. Al igual que en comienzas con una pantalla negra y agregas luz para crear colores. Rojo, azul y amarillo a menudo se llaman incorrectamente colores primarios sustractivos, ya que en comienzan con la luz blanca natural del sol o alguna luz blanca artificial de una bombilla. Y cada objeto que, esa luz golpea le restan color. Hablaremos de esto un poco más lo largo del resto de este módulo y luego entenderás por qué es malo pensar incorrectamente en rojo, azul y amarillo como los colores primarios. No lo son. Si miras estos dos conjuntos de colores primarios por más de un par de segundos, probablemente te des cuenta rápidamente de que es bastante poco probable que ambos conjuntos de colores primarios tengan casi exactamente lo mismo colores en ellos. Veamos solo el rojo, azul, verde por un segundo. Ahora, estos son definitivamente los colores que están en tu monitor en este momento que estás mirando. Esto no significa que podamos crear cualquier color en una pantalla de una computadora. No podemos, en realidad ni siquiera podemos crear tantos, pero podemos crear probablemente varios mil millones de colores. Y eso es suficiente para que estemos trabajando. Los colores primarios no se pueden usar para crear todos los colores, y en realidad podemos crearlos a partir de la mezcla de algunos otros colores. No obstante, utilizamos estas tres luces en una pantalla de computadora simplemente porque pueden crear la mayor cantidad de colores a partir de solo tres luces para obtener los colores primarios con pintura o tinta. O tenemos que hacer es superponer estas tres luces y obtendrás algo que se vea así. Estos tres colores probablemente te sean bastante familiares porque son, por supuesto, los tres colores que pones en una impresora. Y por supuesto que pones estos tres colores en una impresora porque pueden imprimir la mayor gama de colores con tintas. Ahora, ahora mismo, tu monitor de computadora donde está la parte roja, solo está mostrando las luces rojas y donde está la parte verde, solo tiene las luces verdes encendidas. Pero cuando la luz amarilla es, sólo tiene el rojo y el verde en medidas iguales. De igual manera, si lo imprimimos estos tres círculos en un trozo de papel usando nuestra impresora, el círculo inferior derecho solo usaría la tinta amarilla. El círculo inferior izquierdo solo usaría la tinta magenta y el espacio entre sí solo usaría el magenta y el amarillo en medidas iguales. El tramo en el centro muerto usaría un amarillo, magenta y cian. Y por eso ponemos un cartucho de tinta negro en nuestro impreso a, porque sería bastante caro usar las tres tintas cada vez que queremos imprimir unas negras. Para entender esto más a fondo, necesitamos entender exactamente cómo funciona la luz, y de eso vamos a hablar en este módulo. En el siguiente módulo, entenderás por qué podría ser particularmente malo para tus diseños si no entendiste cuáles eran los colores primarios por ahora, todo lo que necesitas saber es que estos otros colores primarios sustractivos, y estos son los colores primarios aditivos. Y tal vez está bien que tu profesor de primaria te enseñara mal los colores primarios porque quien quiere enseñarle a un niño de cinco años la palabra magenta, cian. Hay dos tipos de colores primarios que son Colores primarios sustractivos donde se inicia con una luz blanca y como rebota de pintura, tinta u objetos, restan color del blanco y tú ver los colores que rebotan fuera de ella. Hay colores primarios aditivos donde comienzas con una pantalla negra y agregas luz coloreada, que es lo que ve la persona. Puedes crear colores primarios a partir de algunos otros colores en algunas situaciones, y no puedes crear todos los demás colores a partir de estos colores primarios. Los colores primarios sustractivos son los que pones en tu impresora, cian, magenta y amarillo. Y los aditivos son los que están en la pantalla de su computadora, rojo, verde, y azul. 2. Ondas: Es posible que reconozcas esto como la portada del álbum de Pink Floyd's Dark Side of the Moon. Pero también es un prisma ligero. Ahora si brillan una luz blanca en un extremo, todo un arco iris de colores sale al otro extremo. También un ángulo ligeramente diferente, llamamos a esta refracción. Cuando esto fue descubierto por primera vez, gente pensó que tenía que ver con las impurezas en el interruptor de cristal de alguna manera agregaría colores al prisma. Entonces Isaac Newton intentó algo bastante interesante con esto. Dijo, ¿qué pasa si pongo un prisma diferente al revés justo después de esto? Y Isaac Newton descubrió que si pones el segundo prisma en la posición exacta correcta, realidad combinará todos los colores de nuevo juntos en una sola luz blanca. Excepto que todavía no sabía por qué. Todavía pensaba que la luz era como partículas o algo así. Conseguimos una comprensión mucho mejor de cómo funciona la luz alrededor de 1801, cuando un tipo llamado Thomas Young hizo un experimento muy simple. Tenía una habitación, pero podrías hacer esto con una caja si quisieras. Y cortó dos rendijas muy simples en una sábana. Las habitaciones completamente oscuras. Y cuando brilló una antorcha o realmente usaba la luz de las velas en ese momento. Esperaba que fueran dos rendijas de luces al final, dos líneas de luz. Pero en realidad lo que pasó fue que había toda una gama de luces, diferentes brillos en la parte trasera de la habitación. Puedes replicar este experimento con bastante facilidad solo usando una caja y una antorcha y un par de cortes en la caja. Lo que él por supuesto descubrió, que todos sabemos ahora es que la luz es una ola. El motivo por el cual e hat muchas líneas en la parte posterior, pesar de que cortó dos líneas en la caja, es muy similar a cómo si tienes ondas, algunas áreas de una ola pueden cancelarse entre sí y otras áreas pueden una ola más fuerte como aquí donde se pueden ver estas dos ondas cruzando. Ahora, lo que percibimos como colores diferentes es simplemente diferentes longitudes de esta onda que estimulan diferentes partes de nuestro ojo. Miraremos más tarde. Por ejemplo, una onda azul es mucho más corta que una onda roja. Y si vamos a sumar en un montón de diferentes longitudes de onda, verás que son básicamente todos los colores del arco iris, siendo una violeta muy de onda corta y roja siendo muy onda larga. Por supuesto, la mayoría de las ondas en un haz de luz no se muestran aquí. Hay muchos, muchos, muchos enlaces que son más cortos que violeta y nosotros llamamos a estas ondas ultravioletas. Y hay muchas, muchas, muchas olas que son más largas que las rojas. Y llamamos a estas ondas infrarrojas, pero todas ellas viajaron juntas y simplemente no notamos las que no podemos ver. Es bastante raro que un solo punto de nuestro ojo sea golpeado por una sola longitud de onda a la vez. En realidad, muchas de estas olas estarán montando juntas así. Lo que tu ojo vería aquí es probablemente bastante cerca blanco si todas estas longitudes de onda estuvieran juntas. Cuando vemos un color, casi siempre estamos viendo un rango de diferentes longitudes de onda. Por ejemplo, este tono de rosa en realidad no tiene una longitud de onda en sí misma. Es sólo cuando se tienen muchas longitudes de onda, y la mayoría son las rojas de onda larga y violeta de onda muy corta, que ambos tipo de combinados para crear este rosa. Si yo fuera como funciona la onda de luz. ¿ Por qué hizo el divisor piramidal de Isaac Newton luz blanca en todos los diferentes colores? Bueno, esa luz blanca pura que obtienes de una fuente de luz o del sol es en realidad todas estas diferentes longitudes de onda combinadas. Todos se están uniendo. Ahora supongamos que atraviesan una ventana de cristal. Si miramos sólo el rojo y el violeta para empezar con, al golpear el cristal, van a disminuir la velocidad. Al salir del vaso, van a acelerar la onda larga, la onda roja va a disminuir menos que la onda violeta. Va a golpear menos partículas en el vidrio. Estoy demasiado simplificante, pero digamos porque se está moviendo mucho menos, está haciendo menos contacto con partículas de vidrio. Esto no hace demasiada diferencia ya que viene a través de una ventana de vidrio porque el ángulo entra en el vidrio y el ángulo que deja son los mismos. Y la rápida onda de luz roja simplemente se pondrá al día con algunas de las ondas de luz violeta más lentas por delante. Y tú lo eres, seguiré viendo rosa. Perdona la ligera crudeza de este diagrama aquí. Pero si las aves ligeras se disparan, te golpeas un trozo de vidrio en ángulo, va a cambiar la dirección de las luces cada vez tan levemente. Porque va a disminuir la velocidad en la parte superior antes de lo que se ralentiza en la parte inferior. Imagina que si estás en un auto a un lado del auto va más rápido que el otro, gira. Y debido a que el ángulo, estas dos luces ligeras dejan el vidrio no es lo mismo que el ángulo que entran. Nunca se van a volver a unir. Y es aquí donde esta tangente aparentemente trivial puede llegar a ser útil para ti como diseñador de UI, el color púrpura va a refractar más que el color rojo. Hablaremos más de esto en un momento. Pero ojalá esto al menos explicara cómo funciona esta pirámide. La luz es una onda y lo que percibimos como diferentes colores es en realidad solo diferentes longitudes de ondas casi nunca vieron una sola ola a la vez. Los colores que vemos son una combinación de diferentes ondas. Y hay varias cosas que le pueden pasar a un haz de luz para agregar una longitud de onda o restar una longitud de onda o refractar una longitud de onda independiente de las otras ondas en ese haz de luz. Como diseñadores, estamos tratando hacer un ambiente y que parezca natural para las personas a las que se sienten cómodas mirando. Y para ello, necesitamos entender cómo funciona esta luz. 3. Proceso tricromático: Sabemos que la luz es una ola, pero ¿cómo nos ayuda eso de alguna manera? Si fuera caminando en medio de un bosque y vemos esta hoja. ¿ Por qué es verde? Si miro este, punto muy, muy pequeño y lo voy a agrandar. Actualmente está apareciendo este verde. ¿ De dónde viene esto? Bueno, la planta física real absorbe algunas de las ondas de luz que provienen del sol. Si imaginamos por un segundo que la luz está bajo la luz solar directa, ha sido golpeada por toda una gama completa de diferentes luces luminosas. Si tenemos una oportunidad aquí con todas las diferentes longitudes de onda a lo largo del eje x y cuánto es absorbida por esta hoja a lo largo del eje y, podríamos obtener algo como esto. Es decir que esta hoja está absorbiendo bastantes luces rojas de onda larga y muchas luces azules y moradas de onda corta, pero la hoja no está absorbiendo mucha de esta luz verde de gama media. Ahora si esta es la cantidad de luz Está absorbiendo diferentes longitudes de onda de la cantidad que refleja de longitudes de onda será exactamente lo contrario. Observe que no estoy diciendo que no absorba ninguna de la luz roja de onda larga ni ninguna de la luz azul y púrpura de onda corta, estoy diciendo que absorbe menos de eso. Si volvemos al bosque en medio de la noche y tenemos una antorcha roja, o linternas como algunos de ustedes lo llamen, y la brillamos sobre esa misma hoja, aparecerá roja porque todavía está refleja algo de rojo, apenas menos rojo que verde. También reflejará una gama de tintos diferentes en diferentes áreas de la hoja porque diferentes bits de la hoja se reflejarán en absorber diferentes longitudes de onda. Ahora, lo que sucede dentro de nuestro ojo es aún más asombroso ellos lo que pasó dentro de esa hoja en estos momentos, nuestro ojo tiene millones de receptores que también absorben y reflejan la luz. Pueden identificar cuál es la longitud de onda de la diferente luz que entra en ella. También tienen millones de receptores que identifican cuánta luz está entrando, cómo intensidades, o podríamos pensar como cuán clara u oscura es. Echemos un vistazo a esos receptores que pueden identificar la longitud de onda. Tenemos tres tipos diferentes de conos en nuestros ojos, y pueden identificar diferentes longitudes de onda de luz. Hay uno que identifica solo las luces de onda corta, cualquier cosa en este rango aquí. Entonces uno que identifica la luz de rango medio, este tipo de gama aquí. Y luego uno que pueda identificar luz de onda larga como este tipo de pelo de gama. A veces estos se llaman receptores azules, verdes y rojos. Eso no es del todo cierto. Como se puede ver, en realidad no somos particularmente buenos para identificar diferentes tipos de rojos, pero somos realmente buenos en greens y amarillos. Porque lo que estos conos pueden identificar cruces bastante en el medio. Ahora si miramos esa onda de luz que estaba rebotando de esa hoja, y decidimos que lo que se reflejaba de la hoja se veía un poco así. Cuando miramos este verde en la parte superior izquierda, nuestros conos de gama media se estimularán casi por completo. Están diciendo, sí, esta es definitivamente esta gama de colores. Los receptores de onda larga están diciendo que es una especie de esta área. Sí. Y nuestros receptores de onda corta están diciendo, sí, no hay mucha de esta luz de onda corta entrando. Ahora si simplemente hay menos luces claras en general, entonces solo sabremos que es más oscuro o más sabrá que es más ligero. Pero qué pasa si es una especie del mismo verde pero sólo se ve más verde. El mismo verde, el mismo brillo, pero simplemente se siente más limpio. ¿ Qué pasa con este verde? Bueno, vamos a meternos en esto más en el siguiente módulo, pero esto es sólo un verde más saturado. Es el mismo tono de verde es apenas más saturado. Lo estamos viendo mejor. Estamos viendo una especie de la misma gama de aves ligeras cuando miramos este nuevo verde saturado, pero estamos viendo una distribución diferente. Es más puro. Si alguna vez tuviéramos aquí una distribución completamente plana, parecería gris o no sabría de qué color es y solo se ve gris. Este nuevo verde es muy, muy claro. Cuanto más dominante una onda de luz, menos gris aparece, más saturado es el color. Ahora volvamos a nuestro verde original. Sigamos con esto un segundo y luego miremos lo que nuestro ojo hace a continuación. Bueno, simplemente obtengo algún tipo de datos binarios de cada uno de estos tres tipos de receptores. Vamos a simplificar esto un poco y digamos que tal vez el receptor de onda corta dice, estoy 20% estimulado. El rango medio uno dice 90%, y el de largo alcance dice 80 por ciento. A partir de este punto, perdemos muchos de los datos de matices. Ya no conocemos la forma de la curva y no sabemos la cantidad exacta de diferentes longitudes de onda que estamos obteniendo. Esto sí significa que yo curva completamente diferente podría parecer potencialmente ser exactamente el mismo verde. Entonces hay un puntaje de falla. Nuestro ojo tiene algunas varillas dentro también y estas simplemente identifican cuán intensa es la luz. Hay mucho más varillas que conos. Y entonces somos mucho mejor en identificar cómo son las cosas claras y oscuras que el color exacto de ellas. Entonces digamos que nuestras varillas simplemente nos dicen como una calificación de intensidad del 40% para este poco de luz. Y eso significa que un 100% sería blanco y 0% sería negro. Y estamos en algún lugar entre esos dos. En este punto r, solo tengo estas cuatro puntuaciones, pero esto no es lo que envía al cerebro. Se traduce un poco estos. Lo que nuestro cerebro recibe son estos tres valores calculados, que es cuál es la proporción verde a rojo? ¿ Cuál es la relación azul a amarillo, y cuál es la relación claro-oscuro? Por supuesto, podrías preguntarte ¿cómo hay un amarillo? Se requiere algún cálculo, puede ser, agrega el verde y el rojo. Pero recuerda que ninguno de estos tres receptores estaba recogiendo exactamente un color de todos modos. De hecho, el receptor de onda larga recogió en su mayoría colores de rango medio. Por lo que todos estos cálculos tienen un poco de espacio para la inexactitud. Y aquí es donde entra el daltonismo, donde uno de estos no se calcula correctamente. No obstante, el valor claro a oscuro no requiere mucho cálculo y tenía la mayor cantidad de varillas en primer lugar. Entonces esto es realmente, realmente preciso. Estos tres nuevos valores son enviados a nuestro cerebro y así es como pensamos que estamos viendo color. Todo en el mundo refleja y absorbe diferentes cantidades de diferentes longitudes de onda. Son, tengo algunos receptores que pueden identificar qué rango de longitud de onda diferentes bits del encendedor en. Luego hace algunos cálculos y envía esto al cerebro. También hay receptores que solo identifican cuán clara y oscura es la luz, qué tan intensa es. Y estos son mucho, mucho más precisos. 4. Cromaticidad: Sabemos que podemos crear una gama bastante amplia de colores, solo usando luces rojas, verdes y azules. Si entraste en una habitación completamente oscura y tú Sean, tres luces diferentes en la pared, rojas, verdes y azules. En el centro, te pondrías blanco. Eso es porque el blanco es lo que vemos cuando obtenemos toda la gama de luces ligeras. Y es una alta intensidad porque todas estas luces están encendidas, plena potencia en ella. Si bajara la luz verde, si bajara la intensidad de la luz verde, conseguiría aquí un magenta claro en el medio porque ya no tendríamos todas las luces luminosas en igual equilibrio. De igual forma, si bajé el azul, vamos a conseguir un amarillo claro en el medio. Y si bajo el rojo, vamos a conseguir un cian claro en el medio. Si bajo la intensidad de las tres luces, tendríamos un gris en el medio. Ahora si jugamos por ahí con la intensidad de estas tres luces, conseguiremos un montón horrible de gris y conseguiremos un montón horrible de los mismos colores. Cuando abres un programa de gráficos y ajustas los números para cambiar el color de algo. No quieres que la mayoría de los colores sean grises o la mayoría de los colores sean los mismos. Así que en las décadas de 1920 y 1930, algunas personas hicieron una serie de experimentos cambiando la intensidad de cada una de estas luces individualmente y trazándolas en un gráfico 3D basado en qué colores la gente podría percibir para identificar dónde están el rango de colores perceptibles que puedes crear con rojo, de colores perceptibles que puedes crear con rojo, verde y azul, por supuesto, hay tres ejes, por lo que los resultados son una forma 3D. Y nota que la forma es bastante irregular, nuestra percepción funciona diferente en diferentes niveles de intensidad. Y los cambios a la intensidad en las tres luces diferentes ni siquiera se perciben igual. Ahora podríamos convertir a este niño en algún tipo de coordenadas 3D que son programas gráficos y nuestros sitios web podrían recordar hacer referencia a colores. Pero sólo una pequeña gama de los espacios en este gráfico son colores perceptibles y únicos. Por suerte, notamos que si lo miras en el ángulo correcto, puedes aplanar todo el asunto hacia abajo y obtener todos los colores. La gente intentó dividir esto de diversas maneras. Pero en general notamos que aún no es súper útil porque si usamos estas coordenadas, nuevamente, la mayoría de los colores se repiten. Por ejemplo, si tomara las coordenadas para estas manchas aquí, obtendría exactamente el mismo color que obtuve para este lugar aquí. Lo que la mayoría de los programas informáticos tendían a hacer era simplemente tomar una forma regular del cabello. Esto sí quiere decir que nos estamos perdiendo un montón de colores únicos y perceptibles. Pero aquí hay muchas opciones. Recuerda, en realidad no puedes crear todos los colores de rojo, verde y azul. Simplemente puedes crear una gran cantidad de colores a partir de rojo, verde y azul. Sin embargo, aquí surgió un problema, porque diferentes software y diferentes empresas empezaron a usar diferentes secciones de los colores y haciendo referencia a las coordenadas de diferentes maneras. Por ejemplo, si alguna vez has impreso el diseño, sabrás que es un poco complicado. Establecerás tu programa de gráficos para use colores CMYK, cian , magenta y amarillo porque sabemos que esos son los colores primarios para imprimir. Pero sin embargo cuando imprime el documento, todavía no parece que lo hizo en tu pantalla porque estaba representado en tu pantalla usando luces y fue representado en el papel usando tinta. Pero también porque la sección de colores que usa CMYK no es ni siquiera la misma sección de colores que utiliza nuestro sitio web. Hay algunos colores que literalmente simplemente no existen en el papel, que sí existen en tu pantalla y viceversa. Afortunadamente, sin embargo, todos los sitios web usan el mismo estándar de color, y se llama S, estándar RGB, rojo, verde, azul. Este triángulo es aproximadamente los colores que se pueden mostrar en un sitio web. Digamos que quería mostrar esta naranja en una página web, obtendría tres coordenadas de las tres esquinas. Y esas coordenadas están entre 0255. Esta naranja está cómodamente en la esquina roja, por lo que es 255 de color rojo, está muy lejos de la esquina azul, por lo que es sólo 80 azul. Y está un poco más cerca de la esquina verde, por lo que está alrededor de un verde 150. Ahora puedo usar estos tres números en cualquier sitio web o cualquier programa de gráficos y recrear esta misma naranja exacta que quiero mostrar. Ahora porque creamos esa carta de percepción 3D antes y luego la aplanamos. No estamos incrementando la intensidad de la luz en incrementos iguales cuando pasamos de 78 a 79 y de 79 a 80, porque 255 ni siquiera es ese número mayor. Cuando pasamos de 79 a 80, en realidad estamos saltando sobre bastantes colores que ni siquiera estamos usando. Pero podemos crear más de 16 millones de colores usando sRGB. Srgb es ahora la forma estándar de referenciar colores usando luz roja, verde y azul. Y te da acceso a 16 millones de colores. Utiliza tres coordenadas para rojo, verde y azul entre 0255, cada incremento en estas coordenadas no aumenta uniformemente la intensidad de la luz, sino que se incrementa basado en la percepción humana utilizando ese gráfico 3D original que se creó en la década de 1930. 5. Cómo funciona el color resumen: La luz es una ola. Y cuando cambia la longitud de esa onda, percibimos como un color diferente. Muy raramente vemos una onda de luz por sí sola. Normalmente se mezcla con otras longitudes de onda, que es como podemos ver un color como púrpura que no tiene una longitud de onda propia. Es una mezcla de olas muy largas y muy cortas. Si tenemos una mezcla de montones de luces ligeras sin onda dominante, vemos genial. Cuando hay más luces juntas, parece más cerca del blanco. Y cuando hay menos, parece más cerca del negro. Hablaremos de los nombres específicos para estos en la siguiente sección. Cuando las aves de luz nos golpean los ojos, estimulan las varillas a diferentes cantidades dependiendo de cuántas ondas haya. Estimulan tres tipos de códigos a diferentes grados dependiendo de cuánto tiempo suban las olas. Interpretamos esto como ver color. Diferentes objetos en el mundo aparecen de un solo color porque absorben ciertas luces de luz y reflejan otros mientras las cosas en tu pantalla aparecen un color, es porque el rojo, verde, y los LED azules se muestran a diferentes intensidades para crear algo que se parece a ese color. Agregan las luces ligeras. Llamamos a este aditivo. Si bien la absorción de las aves ligeras llamamos sustractivo. 6. Valores: Cuando piensas volver a clase de arte, cuando eras más joven, cuando aprendes a dibujar por primera vez, probablemente aprendiste a dibujar. Ok. En blanco y negro, si eres algo como yo, probablemente no pudieras dibujar tan bien como estas imágenes en la pantalla. Pero al menos tenía sentido intuitivo para ti. Cuando el área es más oscura, empujas el lápiz más fuerte y obtienes un color más oscuro. Cuando el área es más ligera, no le pones el lápiz en absoluto y lo dejas blanco. Lo que estás tratando aquí se llama valor. Es lo oscuro o claro que es la zona. Y veo mi, su completo sentido intuitivo. Y si está mal, realmente se mete con nuestra cabeza. Podemos detectar cuándo el valor está mal muy rápidamente, como verá muy pronto. El problema que teníamos con la clase de arte cuando éramos más jóvenes. Cuando empezamos a intentar hacer que estos dibujos estén en color. Si eres algo como yo, los pensamientos de tratar de crear la imagen de la derecha es apenas amanecer hundirse y aterrador. Nunca podría dibujar algo que se vea tan bien. Y eso es porque de vuelta en clase de arte, igual que muchos de ustedes, cuando empecé a pensar en los colores, dejé de pensar tanto en el valor, como la imagen de la izquierda donde estoy pensando sobre la oscuridad y la ligereza. Y empecé a pensar mucho más en algo llamado tonalidad. Puedes pensar en tonalidad como los colores para los que tienes nombre. Podrías mirar esta imagen y decir que esto es rosa, esto es azul, esto es blanco. A pesar de que miramos esta imagen mucho más cerca y nos damos cuenta de que hay muchos, muchos tonos de piel diferentes y marrones oscuros y blancos claros en toda la cara. Los valores varían masivamente, aunque el matiz no lo haga tanto. De hecho, voy a argumentar que el matiz no importa en absoluto cuando estás creando una pintura a color. Lo que puedes ver en la pantalla aquí mismo es una sección de una rueda de color que muestra el naranja y el rojo y el verde y el azul y todos los colores para los que tienes nombre. Las que voy a sugerir en tus primeras clases de arte, estabas pensando un poco demasiado. Ahora, los valores por otro lado, esta parte que cruza la rueda de negro a blanco, cuán oscuro o claro es el color. Los tonos, si te gusta, es mucho, mucho más importante. Si volvieras a clase de arte y tratar de pintar una pintura realista. Y es por eso que la mayoría de nosotros nunca pasamos el dibujo en blanco y negro. Sacamos un conjunto de pinturas y empezamos a pensar demasiado en el tono de cada pintura. Empezamos a pensar demasiado en los nombres rojo, azul, verde, y no lo suficiente en cómo necesitamos mezclarlos con blanco y negro para obtener los diferentes valores. El único momento en que un artista piensa matiz es hacer algo más interesante, para agregar algo de emoción a una imagen. Podrías pintar un rostro humano solo usando pinturas azules y todavía puede parecer totalmente realista. Puede parecer físicamente posible. Una de las razones para eso es realista has visto un rostro humano azul en algún momento. Has visto a alguien en una habitación donde la mayoría de las bombillas eran azules, por lo que la luz reflejaba en su rostro era azul. Y así su rostro solo parecía estar en un tono azul. Pero todos los valores de su rostro, cómo las luces y la oscuridad cada área era relativa a las otras áreas nunca cambiaron. Las luces y la oscuridad siempre significan lo mismo, pero el tono puede cambiar drásticamente dependiendo de qué más haya en la habitación. Y como tu posterior aprende simplemente qué color está al lado. El problema es cuando empezamos a pensar en tonalidad, dejamos de pensar en el valor. Si alguna vez volviste a clase de arte, ¿recuerdas esa? Saca una sola pintura y trata de mezclarla con blanco y mezclarla con negro. A estos se les llama tonos. Si le agregas más blanco, lo llamarías un tinte. Y si le agregas más negro, lo llamarías un tono de ese tono. El matiz es lo que normalmente piensas cuando tradicionalmente piensas de qué color es? Verde, azul, rojo, amarillo, etc. Aunque esto es importante, el valor es mucho más importante para hacer que nuestro diseño parezca físicamente posible, lo que hará que nuestros usuarios se sientan más cómodo que estén mirando algo real. El valor es cuán claro u oscuro es el color. A veces llamamos a esto brillo. Pero por el bien de este curso y trabajando con color, vamos a llamarlo valor. Puedes tomar cualquier matiz que estés trabajando con un agregado blanco a ella para hacer un tinte de ese color. O podrías agregarle negro para crear un tono de ese color. Y para tu tarea, para tu primera tarea, quiero que intentes crear un diseño o dibujar una ilustración donde limites el número de tonalidades que usas, pero cambiaste drásticamente los valores. Esto te obligará a pensar el valor de los colores de tu elección. Podrías abrir un programa de diseño si tienes uno, o podrías sacar unos lápices de colores y limitarlo a tal vez tres tonalidades al principio y ver si puedes crear un aspecto realista ilustración, sólo cambiando los valores. 7. Ejercicios de valores: Lo primero que querríamos aprender a hacer al aprender a trabajar con color es aprender a identificar y trabajar con diferentes valores. En la pantalla en este momento hay 11 colores diferentes, pero los 11 colores son exactamente el mismo tono. Simplemente tienen valores diferentes. Son más claros u oscuros en el mismo tono. A ver si puede identificar el pedido. Mira estos 11 colores ahora, ten en cuenta que todos tienen una carta sobre ellos y luego reordena las letras para ir del blanco al negro. Así que pausa el video, echa un vistazo, y luego vuelve a jugar. Y te mostraré las respuestas. Aquí están las respuestas. ¿ Cómo lo hiciste? Mi conjetura es que probablemente lo hiciste bastante bien. Es relativamente intuitivo detectar los diferentes valores entre diferentes colores cuando son exactamente el mismo matiz, razón por la cual fuimos tan buenos haciendo dibujos en blanco y negro con un lápiz, pero no tan bueno cuando empezamos a agregar pintura. También te puedes notar cuando pongo todos estos colores al lado de cualquiera que sí se afecten unos a otros, vamos a hablar de eso un poco más tarde. Comienzan a parecer casi como gradientes. Y en realidad el blanco parece un ligero gris. Y eso es puramente por cómo se ve afectado por los colores al lado. cubriremos en otro video muy pronto. Pero ahora quiero subir el reto. Voy a barajar estos valores de nuevo, pero esta vez voy a traer los tonos de vuelta y todos van a ser tonalidades diferentes. Haz otra vez en clasificarlos en orden de valor, cuánto blanco o negro tienen y ve cómo te pones en esta ocasión. Así que pausa el video y reproducirlo y te mostraré las respuestas en un segundo. ¿ Cómo te subiste esta vez? Mi conjetura es que aunque tengas tantos correctos. A medida que llegaste la última vez, probablemente aún pasaste más tiempo mirándolo, tratando de asegurarte de que estuvieran agrietadas. Y sin embargo siguen siendo exactamente los mismos valores en el mismo orden exacto que tuvimos con el último ejercicio. Este ejercicio puede ser realmente útil para ayudar a entrenar tus ojos para detectar mejor los valores. Esa va a ser una de las cosas más importantes con aprender sobre el color. Por esas razones, he creado un PDF en el que puedes hacer click sobre este mismo ejercicio exacto unas cuantas veces más en lugar de que yo repasándolo y otra vez en este video, puedes descargar que a partir de los recursos. Y sólo para terminar este video, quiero mostrarte cómo esta lista de 11 colores en diferentes tonalidades. Se ve bastante cabello oscuro, parece que los valores en general son bastante altos. Pero una vez que los puse en orden de valor, se ven bastante bajos. De repente se ve bastante ligero en la página. Los valores de estos colores parecen diferentes solo por el orden. Tratar de identificar el orden de valor de diferentes colores es un ejercicio realmente, realmente útil. Va a ayudar a entrenar a nuestros ojos para detectar estas sutiles diferencias en valores que van a marcar toda la diferencia en tu diseño. Entonces en este video muy corto, tuvimos una oportunidad en hacer precisamente eso. Y ahora quiero que descargues el PDF de los recursos y tengas una oportunidad en hacer exactamente lo mismo unas cuantas veces más. 8. Brillo: Espero que hayas conseguido ordenar algunos de esos valores desde el último ejercicio, pero probablemente te equivocaste algunos. Es un ejercicio muy difícil. Normalmente para que sea un poco más fácil para los usuarios, incluso los artistas e incluso la fotografía en realidad dibujarán los valores a los extremos más lejanos y harán que los tonos medios sean más oscuros o más claros. Si tomas una fotografía, sobre todo si dejas tu cámara en la configuración predeterminada, probablemente hará que los colores ligeramente oscuros sean aún más oscuros y los colores ligeramente claros aún más claros y crear contraste extra en la foto. Nuestras cámaras lo hacen parcialmente solo porque es una tendencia reciente y nos gusta la forma en que se ven las fotos de alto contraste. Pero también nos siente bien porque podemos interpretar y entender la imagen más rápido. También significa que nuestros ojos han sido una especie de entrenados sobre valor antinatural en imágenes y probablemente queremos continuar con eso. Tendencia. Los usos se utilizan para ver cosas con alto contraste. Por ahora probablemente te has estado preguntando por qué sigo usando el valor de la palabra cuando la palabra brillo mucho más sentido en esta situación, estamos hablando de lo brillante que es el color, ¿verdad? Bueno, tal vez, pero desafortunadamente brillo cuando hablamos de color, a menudo puede significar algo un poco más perceptivo. Cuán perceptualmente brillante nos parece ser. Por eso esa última actividad que te di es en realidad un poco cruel. Estás muy acostumbrado a poder detectar si algo es más brillante o no, pero no tanto si tiene un valor mayor o menor. Para ayudar a explicar, he creado aquí unos gráficos muy simples. A lo largo del eje x, los enormes cambios y a lo largo del eje y, el valor cambia. Probablemente notarás con solo mirar esto, que hay tres rayas claras abajo a tres rayas brillantes donde parece tener un valor más alto a medida que cruzas de izquierda a derecha, a pesar de que estoy diciendo claramente que no lo hace. Y esos tres colores son cian, magenta y amarillo. Hay cierta importancia esos colores de los que hablaremos más adelante. Es posible que ya hayas notado que existen los tres colores que pones en tu impresora. Pero por ahora, solo tomemos estos tres colores y añadamos de nuevo en los tres colores que encajan perfectamente en el medio entre los espacios de ellos, que es rojo, verde, y azul, y trazarlos en este gráfico si era por brillo en lugar de cuatro valor. Ahora, he exagerado ligeramente esto por el bien de este gráfico, pero se puede ver que estos seis colores que todos tienen exactamente el mismo valor, tienen brillos bastante diferentes. Ahora recuerda lo que eso significa es que tienen la misma cantidad de blanco o negro añadida al matiz básico, pero nos parecen diferentes niveles de brillo, nuestra percepción es diferente. Si agrego todos los diferentes brillos de estos que regresan, notarás algunas cosas. En primer lugar, tenemos tres picos significativos, amarillo, cian y magenta, y tres abrevaderos, rojo, verde y azul. Pero también notarás que ya no hace un cuadrado práctico. Y por eso no ves esto en un programa de gráficos. Hablaremos más de esto en un poco, pero no se puede crear un sistema numérico para hacer referencia a los colores en este nuevo gráfico porque podrías obtener un punto donde no hay color si repetimos el ejercicio del último video, pero esta vez miramos una serie de colores y tratamos de ordenarlos en función del brillo percibido. Y seamos justos, no puedes equivocarte esto porque es la percepción sobre la forma en que cuantificamos el brillo se basa en una serie de experimentos usando cientos de personas en evaluando cuán brillante les parece algo. Si te gustaría intentar arreglarlos en orden de brillo percibido, dale una oportunidad, intenta anotar las letras ahora. Pero deberías encontrar esto mucho más fácil porque no hay amarillos oscuros y no hay ningún blues brillante. Aquí están las respuestas que se acercan. Ahora. Ahora si tuviste algún problema con estos en absoluto, fue realista probablemente por los colores en el medio. La diferencia en el brillo percibido entre cada uno de estos y cada uno de sus vecinos es exactamente la misma. Pero aún vamos a encontrar las áreas en el medio un poco más difíciles de identificar. Y esto podría ser en parte porque artistas e incluso su configuración de cámara, intentaremos evitar mostrar estos mediados de terrenos. Estos son el tipo de colores que quizás se evitarían. Cuando hablamos del brillo del color, no es exactamente lo mismo que el valor, se ajusta para la percepción. Cian, magenta y amarillo naturalmente nos parecen más brillantes, y rojo, verde y azul naturalmente nos parecen más oscuros. Cuando elegimos colores usando un programa de gráficos o incluso CSS, no podemos elegirlos en función del brillo, principalmente porque es mucho más difícil crear un sistema para elegir colores de esta manera. Hablaremos de esto mucho más tarde. Pero eso sí quiere decir que usar nuestros programas gráficos o CSS, podemos elegir con bastante facilidad colores que solo van a quedar mal. Por ejemplo, un amarillo oscuro no va a verse particularmente bonito, ni siquiera nada en medio del rango de brillo, lo que podría no darnos ese aspecto de alto contraste que Todos hemos aprendido a amar y también puede hacer que nuestro diseño sea un poco más confuso y difícil de percibir. 9. Ejemplos de brillo: Aquí hay una gama de rojos. Ahora todos son exactamente el mismo matiz, pero no son valores diferentes. Si utilizo un selgador de color especial para elegir tintos de diferentes brillos, me da mucha menos elección. Hay literalmente estas tres ligeras variaciones, Realmente. Eso es lo que puedo asumir es porque gente simplemente no percibe el color en la parte superior izquierda y el color y la parte superior derecha es incluso realmente ha sido del mismo color. Pero una cosa que definitivamente podemos decir es que el color y el muy arriba a la izquierda y el color en la parte superior derecha simplemente no se ven particularmente bonitos. Probablemente no queremos estar usándolos. Anteriormente dije, realmente no se puede hacer unos bordes amarillos oscuros. No se ve bien. Bueno, lo que querrías hacer en esa situación es hacer un poco marrón, amarillo, y luego se puede quedar bien. Lo que puedo hacer con este rango de rojos son los de menor valor, puedo añadir un poco de tonalidad azul. Y los de mayor valor, puedo añadir un poco de tonalidad amarilla. Esto significa que no sólo el valor es el mismo, sino que en realidad se ve un poco más y menos brillante en los extremos. Y terminamos con algunos colores que no sólo se ven un poco más bonitos, sino que son un poco más cómodos de percibir. Siempre que creas un Rango de Color con el mismo tono, se va a quedar bastante mal en los extremos. Con los colores de alto valor. Vas a querer mezclar un poco de un tono muy brillante ahí dentro. Y con los colores de bajo valor, vas a querer hacer lo contrario y poner un tono menos brillante mezclado con ese color. Digamos que estoy diseñando este sencillo interruptor de alternancia para una aplicación web. Quiero que mi interruptor de alternancia luzca 3D para que gente sepa al instante que es algo con lo que pueden interactuar. Voy a añadir un poco de sombra por dentro por lo que muestra que esta zona gris está sangrada y un poco de luces en el pequeño círculo rojo cosa que se puede ver que está sobresaliendo un poco. Básicamente estoy imaginando que hay una fuente de luz en la parte superior izquierda de la pantalla. Estos son los colores adicionales que he usado. He usado una versión de mayor valor del rojo y una versión de menor valor del gris azulado. Ahora, cuando hablamos de cómo funciona la luz, te darás cuenta de que esto no se ve natural. No es así como la luz rebota naturalmente en absoluto. Pero definitivamente puedes estar de acuerdo que no se ve natural y probablemente no se vea tan bien por un par de razones. Uno, el rojo ahora sólo tiene un poco más de blanco en ella. En cierto modo se ve como cuando te quedas impresoras sin tinta. Ahora lo de menor valor en la página es una sombra creando mucho contraste en un lugar donde realmente no la quiero. Puedo moverme alrededor de ambos problemas ajustando un poco el matiz. El rojo es ahora un poco mayor valor leído, pero tiene algún amarillo mezclado entonces, y el gris ahora es un poco de un valor menor gris, pero en realidad tiene algo de azul mezclado en. Ahora tengo algo con un poco de look 3D, así que sé que puedo interactuar con él, pero en realidad se ve un poco más natural y más fácil de percibir. Voy a empezar a trabajar en una página de inicio para un sitio web que nunca voy a construir. Aquí hay unas estadísticas muy, muy básicas y veamos si podemos hacer algunas mejoras. Bueno, esta naranja brillante para este curso de inicio y el botón de inscripción, son del mismo color que estos, 1234 en la parte inferior. Tienen el mismo brillo. Y me gustaría que estos números tuvieran un brillo más bajo para que salten un poco menos. Voy a bajar el brillo no solo agregando algo de color negro, sino también haciéndolos un poco más de naranja brownie. Ahora los botones aún no son del todo lo más importante de la página. Creo que el texto del encabezado probablemente los esté abrumando un poco. Sólo voy a reducir en realidad los blancos de los textos de encabezamiento. El color morado no es particularmente brillante, sino solo el tamaño puro de las letras combinadas con los brillos, dado un poco demasiada importancia en la página para hacer mis botones realmente se destacan y para que sea para que gente sepa al instante que pueden hacer clic en ellos. Voy a añadir un poco de sombra, pero como lo hicimos antes, voy a poner un poco de azul a la sombra, así que no es realmente abrumador en la página. Y voy a añadir un poco de amarillo en los aspectos más destacados. Ahora eso es genial. Mis botones realmente se destacan. Ahora hay una cosa que simplemente no puedo soportar sobre este diseño aunque. Tiene una especie de gris en el fondo detrás de este personaje de la derecha. Hay como una mancha gris y realmente estoy no quiero gran área de gris y sólo se ve aburrido. Lo que podría hacer es hacer un color mucho más brillante para que no sea súper abrumador, pero solo da un poco de color a la parte posterior de la página. Si solo revisamos nuestro gráfico de brillo, podemos ver que el cian es un color bastante brillante, sólo en segundo lugar a amarillo. Ahora, estamos usando el amarillo como reflejos, así que realmente no lo vamos a utilizar como color de fondo. Pongamos un poco de cian muy claro en el fondo aquí en su lugar. Por último, solo voy a usar mi ojo muy rápido ahora que todo es de un color diferente para realinear las cosas un poquito. Ahora tengo un diseño con el que no estoy súper contento. Vamos a hacer algunas mejoras en los próximos videos. Pero ahora mismo creo que está lejos, mucho mejor que el diseño original. No he cambiado el diseño. No he cambiado ningún contenido. No he cambiado las tipografías, y sólo me he ajustado realmente a los colores de muy, muy pequeña cantidad. Al inicio de este video, me viste crear una gama de color rojo donde para los rojos más oscuros, me puse en una pequeña cantidad de azul. Y para los rojos más ligeros, pongo en una pequeña cantidad de amarillo, escojo un color diferente, tal vez verde, y trato de hacer lo mismo. Mira si puedes crear una gama de colores que luzca un poco más natural y agradable simplemente agregando en un color ligeramente más brillante a los verdes más claros y agregando en un color ligeramente más oscuro a los verdes más oscuros. Si tienes un diseño anterior en el que has trabajado, recoge eso ahora o elige uno de los que has hecho de un video anterior y dale una vuelta con los colores reales en un diseño también. Especialmente buscando elementos que sean negros, blancos o grises. Intenta mezclar un poco de algún otro HEW con estos colores. 10. Combinación de colores: Supongamos que he iniciado sesión en mi aplicación web ahora y por alguna razón es un tablero de gastos, pero tal vez se ve un poco así. Ahora quiero tratar de hacer que este luzca un poco más uniforme. Intenta mejorar el diseño aquí. Una cosa que un artista podría hacer al pintar un retrato es quizás solo usar colores fríos. La idea aquí es de todos los colores de la página. Acabo de agregarle un ligero tinte azul. Acabo de mezclar un poco de tonalidad azul en cada uno de estos colores. O alternativamente, podría simplemente agregar una carpa caliente a todo. Bueno, solo mezclo un poco de naranja en todo y hace que todo se vea uniforme es ciertamente no hace que los botones ni nada se destaque, pero hace que los colores se sientan como si quizá pertenezcan a la misma paleta. El motivo por el que esto podría verse particularmente bien si estuviéramos pintando una composición es que muy raramente solo tienes luz blanca en un área a menos que estés afuera y la luz solar directa. Pero aún entonces en momentos específicos del día, no solo tienes luz blanca como fuente. Estas montañas en esta imagen no son realmente azules. Es sólo que el sol está más bajo en el cielo, está pasando por más atmósfera. Y sabemos que el azul proviene de luces de longitud de onda más cortas y la luz de longitud de onda más corta se desplazará más. Y así pues habrá más luz azul rebotando alrededor. El área alrededor al sol aparece más roja simplemente porque las ondas de luz roja son más largas y así se difundirán menos y luego más propensas a venir directamente hacia ti. Ahora si estás mirando en la otra dirección, dependiendo de si estabas la luz solar directa o no, las cosas que estabas mirando parecerían más azuladas en general o más rojizas en general. Los pintores pueden hablar de darle a una pintura un tono más cálido sobre todo, o un tono más frío en general, porque va a unificar las cosas y aún así hacerlas parecer naturales. Como dijimos, es perfectamente natural pintar una cara azul porque en algún momento acabas de ver una cara con iluminación apenas azul yasí se veían con las dos composiciones que así se veían con acabo de mostrarte. Mencioné que realmente no hace que nada se destaque. Si todo tuviera un tinte azulado, no hace que destaquen nuestros botones anaranjados. Entonces esta quizás no sea una técnica útil. Pero veamos otra foto de algunas montañas. Si miramos aquí esta cordillera, podrías notar que las montañas de la derecha aparecen más azules y las de la izquierda aparecen un poco más rojas y amarillas. Son la misma cordillera. Las luces apagadas de las montañas la derecha simplemente está pasando por más aire con más luces desplazadas que rebotan ya. Esto nos presenta un punto interesante como diseñadores. Esta imagen tiene una amplia gama de colores. Tiene todas las luces que posiblemente queramos. Y, sin embargo, las cosas que son longitud de onda más corta, como el púrpura, el azul y el cian, simplemente aparecen más lejos. Colores como el rojo y el naranja han viajado potencialmente a través de menos aire y por lo tanto están más cerca de nosotros. Y aquí hay un diagrama práctico con todos los colores en orden de longitud de onda, con la longitud de onda más corta a la izquierda y la longitud de onda más larga a la derecha. Para hacer que algo aparezca más lejos, simplemente podemos hacerlo más morado o azul para que aparezca más cerca, podríamos hacerlo rojo o naranja. Refiriéndose a estos colores ya que los colores fríos son colores cálidos está un poco en agrietados y todo el concepto de colores cálidos y fríos ha sido bastante desacreditado. Pero la idea de que los colores de onda más largos aparezcan más cerca de ti es muy real. Si miramos hacia atrás a nuestro sencillo diseño que estaba creando de nuevo, probablemente tenga más sentido usar esos tintes azules en los colores de fondo y usar esos tintes rojos en los colores de primer plano. Si te muestro este mismo diseño con un fondo gris, gris es simplemente luces muy impuras. Simplemente aparecerá en algún lugar en el medio. Pero si lo hago un poco cian, similar a esa imagen de esas montañas de antes. Tal vez hace que ese fondo parezca que se haya empujado un poco atrás sin usar ninguna sombra o reflejos ni nada solo de color plano, puedo agregar una sensación de profundidad a mi diseño. Y de igual manera con mis botones anaranjados brillantes, porque ya son anaranjados, se sienten un poco sacados de la página. Simplemente se siente más cerca de nosotros. Y tal vez estos botones en realidad no necesitan una sombra paralela en absoluto. Siempre y cuando sean un color claro de onda larga. Un error común que veo gente haciendo que puedo demostrar con estos tres botones aquí es éste que dice activo en la extrema izquierda. como hablábamos antes, tal vez se siente un poco sacado hacia nosotros por el color naranja. Con el segundo botón por otro lado, vale la pena recordar que el color es relativo a los colores que lo rodean. Al igual que dijimos, que si agregas un tinte azul a todo, nuestro cerebro se normalizaría un poco los colores al tener el naranja brillante diciendo la palabra inactiva. Pero entonces un fondo ligeramente anaranjado realmente empujará el fondo ligeramente anaranjado más atrás debido al contraste entre los textos anaranjados brillantes y el fondo naranja claro, cerebro normaliza, asumiendo que sólo hay más luz naranja tocando alrededor. Este segundo botón, por lo tanto, se siente casi un poco sangrado. Pero en otro nivel se siente un poco desorientador porque esa luz naranjas luego encima del gris. Este segundo botón simplemente no se siente como parte de una composición natural. Y el botón final, el gris, una especie de simplemente se siente un poco como si no estuviera pegando o sobresaliendo. No tiene ninguna profundidad a ella. A lo mejor mi botón inactivo es gris, pero tiene un poquito de naranja en ese gris. En nuestro último video, agregamos un poco de azul a la sombra y un poco de amarillo a los reflejos de uno de nuestros botones. Estas fueron opciones de color bastante convenientes porque obviamente el azul es más frío y por lo tanto se va a sentir un poco más lejos y tal vez agrega aún más profundidad que una gota sombra o un resaltado normalmente lo haría. Por estas razones, probablemente podamos bajar la intensidad de esas sombras y esos resaltados un poco y aún así obtener ese sentido 3D para que la gente lo identifique fácilmente como un botón lo mancha y haga clic en él. Esto significa que podemos salir con una sombra ligeramente menos intensa, pero tal vez queramos evitar usar la misma intensidad de sombra paralela en botones de diferentes colores. El color de nuestro botón inactivo aquí sugiere que está más lejos un poco sangría incluso quizás, mientras que la sombra paralela sugiere que es la misma distancia. Y esto es un poco desorientador. Si alguna vez miramos un paisaje bajo perfecta luz blanca, las cosas más alejadas de nosotros parecerán tener más azules en ellas y las cosas más cercanas a nosotros parecerán tener más rojas en ellas. Esto es simplemente porque la onda más corta de luz azul se desplaza más. Podemos usar esto para nuestra ventaja a la hora crear una interfaz de usuario porque podemos darle algo un elemento de profundidad y 3D sin usar ninguna sombra en absoluto, si nos gusta, simplemente podemos usar colores para hacer que las cosas se vean diferentes distancias de nosotros. Para que podamos hacer que las cosas aparezcan como sobresalen de la página un poco simplemente usando un color rojo o naranja. Y podemos hacer que algo se sienta más como un fondo simplemente usando un azul o morado. 11. Saturación: Hasta ahora hemos hablado tres atributos diferentes de color, el matiz, el nombre, podría tener azul, verde, amarillo, cian, magenta, o leer el valor en cuánto blanco o negro se mezcla con eso color. Y hemos hablado del brillo que es perceptual. Amarillo, cian y magenta se sienten más brillantes que el rojo, el azul y el verde. Hay otros atributos que probablemente hayas notado de tus programas gráficos cuando estás escogiendo un color que es saturación. Si nos fijamos en la imagen ahora, estoy desaturando lentamente estos colores que el mismo matiz, que el mismo valor. Pero estoy bajando la saturación. Si en cambio escogemos un solo tono, vamos a escoger un rojo y lo miramos con un gráfico con valor versus saturación en el eje x e y, podríamos ver algo como esto. Podemos pensar en la palabra saturación ha sido un poco como la palabra pureza. Estos cinco colores aquí tienen exactamente el mismo tono. Tienen exactamente el mismo valor que en la misma cantidad de blanco y negro en ellos, pero siguen siendo colores bastante diferentes. Y eso es por lo puros que los encendedores, el rojo en la parte superior en el medio es una forma de luz muy, muy pura. La mayoría de las longitudes de onda aquí son una longitud similar que mostraría si rand con muy pocas variaciones en la longitud de onda, mientras que el gris en la parte inferior tiene casi una mezcla igual de todos los diferentes longitudes que son perceptibles por tu ojo. Tu ojo lo interpreta como gris, lo que también podrías pensar en gris ya tu ojo no puede entender de qué color es. lo que he dicho hasta ahora en este curso, podría ser perdonado por pensar que quiero que evite los grises. No quiero que uses muchos grises. Probablemente mucho más de lo que estás usando actualmente. De hecho, demasiado color muy saturado es una especie de trabajo duro para tu ojo. Y podemos usar la saturación como forma de contraste. Vamos por un momento solo mirar algunas pinturas diferentes del mundo del arte. Nuevamente, este cuadro aquí tiene colores muy, muy desaturados. Y sin embargo ninguno de estos colores está completamente desaturado. Se puede ver claramente los azules y verdes y rojos en esta paleta de colores sin ningún color saturado aquí en absoluto, estos en realidad se ve un poco colorido, pero cuando miramos la paleta por su cuenta, parece casi como sólo una carga de grises. No obstante, esta paleta de colores obviamente sería de uso limitado para nosotros como diseñador de interfaz de usuario porque nada se destaca. No hay nada audaz que diga Click on me o mira esto. Esto no nos ayuda a construir una jerarquía visual en nuestras composiciones. A lo mejor un paletas de colores más como esta sería más útil en donde todos los colores están realmente, realmente saturados. Todo es muy dominante. Y sabemos que hay esta naranja brillante que probablemente querríamos hacer click o mirar. Y todo está compitiendo por nuestra atención. problema aquí es que cuando todo parece saturado, lavan un poco simplemente al estar al lado de un color saturado, un color simplemente aparece menos saturado. Y por supuesto que no todo puede captar nuestra atención. Sólo queremos que se destaquen ciertos elementos. Un gran problema que veo hacen los diseñadores principiantes es el mismo problema que hicimos en todas las clases de arte antiguas donde solo pensamos en las diferencias de tonalidad entre colores. En realidad, nunca usaríamos una paleta de colores para diseñar una interfaz de usuario donde todos los colores están realmente saturados. En todo caso, para el diseño de interfaz de usuario, esta paleta de colores es en realidad peor que la última. Probablemente quisiéramos utilizar una paleta de colores más similar a ésta de este cuadro, donde la mayoría de los colores están bastante desaturados con el ocasional rojo brillante en eso. Realistamente incluso esta pintura no sería genial para nuestra interfaz de usuario. Querríamos que este rojo estuviera aún más saturado, pero no fue fácil tratar de encontrar una pintura con una paleta de colores similar a lo que podríamos usar en UI. Si encuentras un selector de color en línea o en una aplicación gráfica, o si buscas en internet buenas paletas de colores, obtendrás algo que se ve un poco así en la pantalla. Cinco colores increíblemente saturados. Los matices podrían contrastar bastante bien. Podrían haber sido todos configurados de esa manera, pero probablemente todos estén un poco demasiado saturados para ser útiles para ti como diseñador de interfaz de usuario. Cuando empecé a diseñar por primera vez, al igual que muchos diseñadores, agarraba una paleta de colores como esta y aplicaría estos colores como son a mis diseños. Y naturalmente se verían como esa pintura de Matisse de antes. Todo está demasiado saturado y por lo tanto se están lavando unos a otros y nada destaca. Y puede ser un trabajo un poco duro mirar e identificar lo que está todo en la pantalla. Digamos que encontré esta paleta de colores en línea con estos cinco colores. Ahora esto podría ser bueno para algunos fines. No va a ser útil para mi diseño de interfaz de usuario. Voy a necesitar desaturar al menos la mitad de los colores. Ahora esto no se ve muy bien, estos cinco colores uno al lado del otro, pero van a verse mucho mejor cuando los aplique a un diseño. La saturación no es lo mismo que el valor. No es lo claro u oscuro que es, es lo puro que es lo gris o colorido que es. Cuando escogemos por primera vez colores para nuestros diseños de interfaz de usuario, puede ser tentador escoger colores demasiado saturados. Estos no sólo se lavan entre sí, no son particularmente prácticos para construir una jerarquía visual. Las paletas de colores ideales que elegiríamos para el diseño va a tener mucho más colores desaturados de los que primero esperamos. Y la única forma de probar eso es poniendo los colores en un diseño y viendo cómo se ven. Hagámoslo a continuación. 12. Ejemplos de saturación: Aquí hay un tablero simple que he creado. Ahora, diría que algunos de los colores aquí están un poco demasiado saturados, no tan malos como algunas cosas que he creado y definitivamente no algo que he visto antes. Pero hay algunos colores que simplemente no necesitan ser así de saturados. Antes de entrar en eso, podría señalar que cada una de las secciones de este diseño, tengo un contorno negro grueso que es bastante abrumador, distrador, probablemente un poco demasiado contraste en lugares donde no lo necesitamos. Tengo, por supuesto Don esto porque no tuve acceso a muchos colores desaturados. Si tuviera un color desaturado en el fondo, ya no necesitaría las líneas negras. Algo como esto. Gris al instante se ve mucho mejor. Puedo quitar esas líneas negras y sigue separa claramente las diferentes áreas en mi página. Ahora en lugar de usar un gris completo, puedo usar un azul muy saturado. Sabemos que eso va a hacer que se sienta un poco más lejos. Y va a hacer que todo nuestro diseño se sienta un poco menos gris, lo cual no siempre es súper agradable de tener. En retrovisor, podría no haber desaturado este color de fondo bastante, pero se puede ver como eso probablemente sea un poco más bonito que ese gris que teníamos antes. Veamos si podemos desaturar algunas cosas más porque en este momento tengo algunas cosas raras de rombo aquí algunas cosas raras de romboque probablemente se parecen más a botones. Están un poco demasiado en tu cara. Por aquí tengo algunos números que son bonitos, más o menos sólo estados que queremos mantener en la pantalla. Para que el usuario no olvide cuántos correos electrónicos tienen en Open y cosas por el estilo. Tenemos algunos gráficos diversos y otros bits de información que están en colores muy, muy saturados en este momento, pero en realidad no necesitan serlo. Se pueden ver todas estas áreas en nuestros menos saturados o estos iconos , pastilleros y diferentes piezas de información en la página, solo podemos desaturar esas bastante. Ahora en la actualidad todo mi texto es el mismo valor y la misma saturación. Podría desaturar y bajar el valor un poco de parte de este texto. Y va a ayudar a crear esa jerarquía un poco en la página también. Tal vez algo de este color púrpura de marca que estoy usando para encabezados, tal vez eso es un poco demasiado saturado también. Vamos a bajar eso. Parece casi un color negro ahora, pero es sólo una versión muy, muy desaturada de ese morado original. Se puede ver que este diseño todavía se ve colorido. Todavía tiene cierta cantidad de profundidad a la misma. Las cosas se sienten cerca de nosotros o lejos de nosotros. Casi se siente 3D, pero todo está mucho menos saturado ahora es más fácil a la vista y es más fácil para nosotros hacer que ciertas cosas se destaquen más. Esto significa que si realmente queremos llamar la atención sobre algo y decir que esto es lo primero que pensamos que debes mirar. Podemos hacer que ese color realmente saturado, como nuestros botones de llamada a la acción o este amarillo brillante que acabo de poner aquí. Y a lo mejor he ido demasiado lejos con este amarillo también. Pero explica mi punto de que ahora podemos hacer que esto realmente destaque. Entonces es lo primero que la gente mira si eso es lo que queremos, solo tenemos esta opción disponible para nosotros desaturando todo lo demás. Ahora podemos usar un poco de color extra para agregar algo de profundidad adicional al desgaste o llamar más atención a ciertas cosas, o simplemente para hacerlo un poco más elegante, tal vez quiero hacer obvio que algo es 3D. Ahora puedo añadir un poco de color a una sombra paralela. Podría seccionar esto teniendo un poco de color en el fondo. Podría hacer que estos gráficos aquí tengan un interesante color degradado en ellos. Estas son opciones que ahora tengo disponibles porque tengo un poco de color de repuesto que puedo usar en todo el sitio, que no podría haber hecho en los diseños originales porque todos los colores que estamos listos para saturado ya miraba en marzo. Si nos fijamos en las paletas de colores reales de algunos de los colores que he añadido y utilizado. A medida que he cambiado este diseño, se puede ver que están realmente desaturados. De hecho, si los miramos fuera del contexto del diseño, los miraremos por su cuenta, por un lado aquí, en realidad se ven demasiado desaturados. Parecen que no van a funcionar todo bien en el diseño. Y por eso siempre queremos estar usando nuestros colores en el contexto de un diseño para ver cómo se ven. Tal vez nunca aprueben las paletas de colores sobre los derechos o como parte de nuestra paleta de colores. Pero probablemente aprobaríamos el diseño de la izquierda, que se ve mucho mejor cuando los vemos en contexto. Como ejercicio. Ahora me gustaría que llevaras algo que ya has diseñado o vayas encontrar un diseño existente en línea en algún lugar. Y prueba y D saturar algunos de los colores, pero trata de evitar hacer nada completamente gris. A ver si puedes conseguir que el diseño aún se vea bien. Si bien solo hay uno o dos colores muy saturados. Y muchos, muchos colores desaturados, casi grises. 13. Contraste: Supongamos que tenemos una pantalla de incorporación para nuestra aplicación móvil, tal vez algo que se vea un poco así. Lo primero que se podría pensar es en realidad estos textos un poco difíciles de leer. Y obviamente una de las cosas que haría que los textos sean difíciles de leer es si no hay muchos contrastes entre el color del texto y el color de fondo. Podríamos por supuesto, eliminar este color de fondo y luego habrá más contraste. El fondo es blanco ahora para que el texto destaque más. Podemos leerlo más fácil. Los textos del párrafo, podríamos simplemente hacer eso más oscuro. Y luego hay más contraste aquí también. Pero no solo creamos contraste con luces y oscuridad. Podemos crear un contraste de tonalidad. Ahora el azul y el amarillo son colores contrastantes. Por lo que podría tener un fondo amarillo con impuesto azul o un fondo azul con texto amarillo. Y esto hará que se destaque aún más. Significa que puedo tener una paleta de colores un poco más interesante mientras sigo haciendo que mi texto sea fácil de leer y todo bastante fácil de percibir y para nosotros ser capaces de ver la diferencia entre diferentes áreas. Ahora claro, tenemos un problema donde todos los colores están excesivamente saturados, por lo que se van a lavar un poco y va a ser trabajo bastante duro para nuestros ojos con todo este color saturado viniendo a nosotros. Por suerte, tenemos otro tipo de contraste de color, que es el contraste de saturación. Entonces podría D saturar el fondo y luego tener texto muy saturado y se vería algo así. Ahora si solo te muestro los fondos saturados y los desaturados aquí, puedes ver que uno de ellos es mucho más fácil a la vista, y yo diría que probablemente sea un poco más fácil de leer también. Estos tres atributos diferentes que son color tiene valor, matiz y saturación se pueden utilizar todos para crear contraste. Pero, ¿por qué el contraste es tan importante para nosotros? Sabemos que va a hacer que nuestro segundo año visualmente interesante mirar. Sabemos que va a hacer más fácil percibir dónde está el texto y cosas así. Pero en realidad es valioso para nosotros por una razón completamente diferente a. Este es el Union Jack, la bandera británica. Y si miras este lugar en el medio durante 30 segundos, lo dejaré en la pantalla mientras hablo. Solo mantén los ojos en ese punto negro. En algún momento probablemente hayas hecho este truco visual antes, pero hagámoslo de todos modos. Mantén tus ojos en las manchas negras. Y luego boom, ¿qué acaba de pasar? Bueno, después de que le quité la bandera de la pantalla, probablemente viste esta bandera para el 2.5º tal vez porque todos los conos en tus ojos se acostumbraron tanto a mirar los colores que estaban ahí. Estaban cansados de mirar esos colores y eran más susceptibles a estos colores. Estaban cansados de mirar la luz amarilla para que cuando consiguieran todas las luces, que están adivinando cuando ven blancas, solo estén viendo el azul. Recuerda que el blanco tiene todas las luces de colores en él. Y la parte que estaba mirando al amarillo ahora está cansada. Por lo que es más probable que tu ojo vea azul. Piénsalo como si llevaras tu cuerpo al gimnasio e hiciste una carga de ejercicio que implicaba usar los brazos. Tus brazos estarían cansados. Probablemente tenga más sentido hacer un ejercicio de carrera a continuación va a ser menos doloroso, pero también va a ser mejor en hacerlo. De igual forma, si tus ojos acaban de mirar mucho amarillo, tiene más sentido mirar algo de azul a continuación. No sólo va a ser más cómodo, vas a ser mejor en percibirlo. Si divido el diseño por la pantalla ahora, mitad de tu ojo está haciendo ejercicios de piernas y la otra mitad está haciendo ejercicios de brazo. Y debido a que tu ojo no se queda particularmente quieto, salta un poco. Tus diferentes bits de tu ojo están cambiando entre los dos, por lo tanto no estresarte demasiado de uno u otro. Los colores contrastantes exactos de los tres la izquierda son los tres colores actualmente a la derecha. Si quisiéramos hacer que la bandera británica sea increíblemente cómoda de mirar, en realidad podríamos hacerlo así. Ahora he visto a la gente dibujarlo así antes. O alternativamente para asegurarme de que estoy molestando a todas las personas en el Reino Unido por igual. También podríamos hacer que se vea así. Una cosa que probablemente notarás con ambos de estos nuevos diseños de bandera que he creado se establece en realidad mirar un millón de millas de distancia de lo que sí existe. De hecho, esta bandera aquí sólo parece que las partes rojas están en el sol un poco demasiado tiempo. Crearemos más intereses visuales al no tener los colores exactamente contrastan entre sí. Porque, principalmente porque la mayoría de los otros diseñadores tienen en algún momento de la historia simplemente no exactamente eso. Es un poco perezoso. Pero por supuesto en el mundo de las banderas, probablemente la razón por la que esta no es la bandera es solo todos los colores que querían tener una cantidad igual de importancia. Y por lo tanto el color en el medio debe estar mucho más saturado. Sabemos que a la gente naturalmente le gusta mirar colores contrastantes porque siempre toman fotos de esto. Todos en la playa actualmente tendrán su cámara fuera desprendiéndose en esta escena exacta. Ya sabemos por la forma que esa luz refracta que nos está dando las luces de onda corta alrededor los lados y las luces de onda larga en medio de la imagen aquí. Y está perfectamente dividiendo los colores contrastantes para nosotros. Esto lo hace bastante agradable para nuestro ojo. Lo hace visualmente interesante y lo hace objetivamente hermoso. Podemos ver fácilmente qué colores contrastan porque deben estar directamente opuestos entre sí en una rueda de color. Como ya he mencionado, estas ruedas de color son casi siempre. Incorrecto. Si solo vas a Google Images y le pones rueda de color, obtendrás una que se parece un poco la de la pantalla, lo cual es completamente incorrecto. Podemos ver aquí que el amarillo que ponemos en nuestras impresoras y las luces azules que tenemos en nuestra pantalla que sabemos que nuestros colores contrastantes exactos no son uno frente al otro en esta rueda de color. En cambio, el amarillo es opuesto a este color granate. Si alguna vez quieres comprobar con certeza si dos colores se contrastan perfectamente entre sí, puedes superponerlos y siempre debes ponerte gris, porque sabemos que el gris es cuando hay una mezcla perfecta de todos los colores diferentes. Si superpongo el amarillo y el azul, obtengo ocho, el gris perfecto. No hay color en este gris absoluto, completamente contrastante. Si superpongo los dos colores que son opuestos en esta rueda de color, el amarillo y el morado, obtengo este tipo de color. Puedo hacer el mismo efecto si creo un degradado entre dos colores. Si se contrastan exactamente entre sí, el color en medio del gradiente siempre será gris. ¿ Por qué hay tantas ruedas de color incorrectas en el mundo? Bueno, una de las razones es porque algunas personas tienen una idea incorrecta de cuáles son los colores primarios. Recuerda, algunas personas no han aprendido nada sobre color desde que tenían cinco años y piensan que el rojo, amarillo y el azul son los colores primarios para la pintura. Al forzar a estos tres colores a ser equidistantes alrededor de un círculo, crean incorrectamente una rueda de color. Por supuesto sabemos que los colores primarios son cian, magenta y amarillo porque todos hemos visto el interior de una impresora antes. Si haces equidistante cian, magenta y amarillo alrededor de la rueda de color, terminas con esto. Y notarás que por supuesto, el rojo, el azul y el verde también son equidistancia alrededor de esta rueda de color. Y por supuesto, nuestra rueda de color tiene esos dos colores contrastantes, amarillo y azul, uno frente al otro. contraste nos hace más fácil identificar cosas en la página. Hace que sea fácil que el texto o los iconos destaquen de su fondo. Se deja en claro que una sección diferente de la página es diferente a la última. Y simplemente hace que sea visualmente más interesante mirar el diseño. Pero también lo hace objetivamente más hermoso porque permite que los conos y varillas y nuestros ojos sean estimulados y luego descansar mientras miran alrededor del diseño, podemos crear contrasta entre dos colores al tener uno muy saturado y otro muy desaturado por uno que tiene un valor muy alto como en tener mucho blanco en ella, y uno siendo un valor muy menor, teniendo mucho negro en ella. Y podemos crear contraste usando diferentes tonalidades. Podemos encontrar tonalidades que contrastan porque son opuestas entre sí en una rueda de color, una gran cantidad de software de diseño tendrá una rueda de color ahí dentro en algún lugar del selgador de color. Pero ten mucho cuidado con estas ruedas de color porque muchas de ellas no son particularmente precisas. Deberías tener el amarillo y azul directamente uno frente al otro. Ese es el tipo de ikea amarillo y el IK Blue debe ser opuestos directos. 14. Ejemplos de contraste: Aquí hay un diseñador creado en un video anterior. Y siento, al desplazarse por la página, es un poco monótono. Todo el fondo es blanco, por lo que tal vez deberíamos simplemente agregar un fondo a esta sección de encabezado. Hagámoslo púrpura. Al instante me luce mucho mejor. Todo este contraste entre la sección de encabezado y las secciones más bajas ahora nos dice de inmediato que este bit superior es algo diferente. Pero tal vez queramos cambiar por ahí algunos de los colores aquí también. Ver ahora mismo tengo un gran botón naranja diciendo iniciar un curso. Pero personalmente siento que este color amarillo me está saltando primero. Eso es captar la mayor atención. Bueno, veamos estos tres colores por separado, el morado, el naranja y el amarillo. Y también los saturemos por completo para que lo que estamos viendo sea el tono real y no estamos mirando diversos niveles diferentes de saturación. Ahora, podemos ver dónde están todos ellos en una rueda de color. Entonces aquí es donde están esos tres colores. Algunas cosas por saber. Obviamente, hay más contraste entre el amarillo y el morado que hay entre el naranja y el morado. Por lo que el tono amarillo naturalmente se destacará más que la naranja. Pero también todos nuestros colores son un poco más de un lado. Si alguna vez quisiéramos agregar un cuarto color a la mezcla, querríamos elegir algo por aquí. Si tuviéramos una composición compuesta enteramente de morado, amarillo y naranja, este verde azulado va a ser lo que realmente se destaca. Ahora, sí, ese verde se destaca muy bien en esta página, pero hay algo en ese amarillo que me está gritando todavía. Tal vez sea porque si miro estos colores en este gráfico de brillo que tenemos aquí, podemos ver que en realidad el mayor contraste en brillo es entre el amarillo y el morado. Y simplemente no podemos hacer que ninguno de los colores sea tan brillante como podemos hacer un amarillo. A lo mejor sólo hacemos que los botones sean amarillos. Ahora, esos botones realmente se destacan. Ahora, otra opción sería por supuesto mantener los botones anaranjados, pero simplemente no tener el amarillo en la ilustración ni en ningún otro lugar de la página como esta. Ahora en cambio puedo usar el amarillo, pero en su lugar voy a usar el amarillo como una versión muy desaturada como fondo aquí. En general, estoy bastante contento con este diseño ahora acabo de hacer algunos cambios para hacer que los colores contrasten mejor y asegurarme esos botones se destaquen en la parte superior. Y aquí está, por supuesto, la comparación con el original. No demasiado para recapitular aquí porque esto fue más una demostración de lo que acabábamos de hablar. Pero podemos usar el contraste para ayudarnos a que las cosas se destaquen más y hacer que las cosas se sientan separadas. Y podemos usar el contraste, no sólo con el matiz, sino también con el brillo, el valor, y por supuesto, la saturación. 15. Resumen: Acabamos de explorar los principales atributos de color, matiz, saturación y valor o brillo. Valor y brillo efecto lo mismo. Cuánto negro o cuánto blanco hay en el color excepto el brillo es perceptual, mientras que el valor es uniforme. Tu software gráfico y CSS no van a poder lidiar con el brillo. Se puede utilizar software de diseño o CSS para definir la saturación o valor de tono, pero no el brillo, porque esto es perceptual y el rango de brillo es muy diferente para diferentes tonalidades. Un tono azul solo tiene bajo brillo. Bueno, un tono amarillo solo tiene acceso a un alto brillo. Podemos usar saturación de tonalidad y valor o brillo para crear contraste. En nuestro diseño, el valor creará más contraste y les dará más definición simplemente porque tenemos muchas más varillas en nuestro ojo entonces tenemos conos. Conseguir las luces y la oscuridad bien en nuestro diseño es con mucho lo más importante que conseguir tonalidad o saturación, ¿verdad? Podemos diseñar primero en escala en blanco y negro y gris primero si eso ayuda a asegurar que se vea bien. Como ya sabemos en la última sección, cada uno de estos atributos de un color, su tono, saturación, y su valor se verán afectados por los colores que lo rodean. Y junto a él, un color saturado. Haremos que el color a su lado parezca menos saturado. Color rojo. Haremos que el color a su lado parezca más azul. Y un color oscuro. Haremos que el color a su lado parezca más claro. Ahora sabemos cómo funciona la luz, y sabemos clasificar y hablar del color. Y ya sabemos intuitivamente cómo el contexto del color lo cambia. Por fin es hora de crear nuestra paleta de colores.