La aplicación de esquemas de color requiere verlos de nuevo
Existen muchos recursos en línea para que los diseñadores exploren, modifiquen y descarguen excelentes combinaciones de colores.
Jugar con combinaciones complementarias, análogas, monocromáticas y de otro tipo nos abre a posibilidades emocionantes, y no hay escasez de regalos.
Pero hay una diferencia entre un esquema de color ganador y un diseño ganador que lo usa.
Elegir los colores es el primer paso. Adaptarlos para ajustarse a sus requisitos de diseño es igual de importante.
Lo que se ve bien en un muestrario puede no funcionar bien en una página web, pero eso no significa que deba volver al punto de partida. Vamos a explorar aquí nuevas formas de ver los esquemas de color.
El color juega un papel importante en la forma en que las personas absorben el contenido. Ya sea un diseño reservado o ruidoso, amigable o siniestro, cálido o fresco, los visitantes de un sitio web se ven inmediatamente influenciados por el tono establecido por el diseño, la tipografía, las imágenes y, por supuesto, los matices y valores que componen su combinación de colores.
Elegir colores puede ser el trabajo más subjetivo en diseño web. Algunos colores funcionan bien juntos; otros, no tanto. Algunas combinaciones atraen a ciertas personas. Más de un conjunto de colores puede adaptarse al mismo diseño.
Afortunadamente, existen muchos recursos para ayudar. Generadores de paleta de colores como Diseñador de esquema de color , Adobe Kuler , Aviary Toucan y Esquema de color diario son entre los grandes lugares para encontrar combinaciones de color que establezcan efectivamente un estado de ánimo. Pero encontrar una paleta es solo el primer paso. La eficacia potencial de cualquier combinación de colores puede verse comprometida por la forma en que se aplica .
El número de colores en un esquema hace la diferencia
Un esquema de color es un conjunto de colores que se han elegido para trabajar juntos. Los esquemas suelen tener al menos cuatro colores y, a menudo, se pueden descargar como imágenes simples y, a veces, como
El esquema de colores anterior es típico de cómo se presentan la mayoría de los esquemas: como muestras uniformes de colores planos. Este conjunto podría etiquetarse como tal:
- Alegre
- Amistoso
- Contemporáneo
- Casual
- Primarias
Pero haga que uno o dos colores se destaquen y adivinen diferentes adjetivos.
La imagen de arriba tiene el mismo esquema que se presentó en la muestra, pero es menos informal y más desértica. Esta imagen enfatiza los colores cálidos. Los parches aislados de azul y verde llaman la atención al ser más escaso. El estado de ánimo resultante podría describirse como:
- Arenoso
- Brillante
- Calentar
- Caqui
- Áspero
La elección del color dominante afecta la forma en que aparece el esquema.
De nuevo, aquí estamos usando los mismos colores, pero para un final muy diferente. Esta imagen se parece a un mapa del mundo abstracto, con islas de rojo, verde y marrón. La imagen no es solo más fría: es un poco más oscura , aunque proviene de la misma paleta.
Ser capaz de reconocer buenas combinaciones de colores no es suficiente, porque los colores rara vez se aplican de manera uniforme al diseño de un sitio web. Usar los colores sabiamente y en la proporción correcta es tan importante como elegir los colores correctos.
El fondo establece el tono
El lugar más obvio para causar impacto con el color está en el fondo. Esta amplia extensión puede atraer tanta atención como el contenido colocado encima de ella.
A pesar de tener un contenido idéntico, el diseño de la derecha es mucho más cálido que el de la izquierda. Pero está sucediendo más aquí que un simple intercambio de colores.
Las barras de contenido en el diseño verde (es decir, el texto blanco en rojo) se mantienen firmes frente al fondo verde ancho. Pero el fondo rojo a la derecha elimina las insignificantes barras verdes. Esto se debe a que, además de ser más cálido, este tono de rojo particular está más saturado. De hecho, los únicos elementos con suficiente peso visual para contrarrestar el fondo rojo son los títulos grandes. El texto del cuerpo pequeño y las barras verdes desteñidas palidecen en comparación. Eso no es necesariamente malo; un fondo poderoso le da a la página una presencia sustancial. El diseño verde es más fresco y le da al contenido un entorno más informal.
¿Qué uso de color es mejor? Depende de tu intento. ¿Deberían los visitantes considerar el contenido como relajado o audaz? ¿Quieres restar importancia a las barras de colores? ¿Le preocupa que el fondo dominará la información? ¿Hay un color más importante que otro en tu marca? Las respuestas a estas preguntas determinarán qué color es "correcto". Esta paleta de colores única presenta dos soluciones diferentes.
Color detrás del texto
La interacción del texto y el fondo se ve afectada por el tamaño y la cantidad de cada uno. El efecto del texto en la página depende tanto del color del texto como del color del fondo, a pesar de la tendencia general a preocuparse más por el fondo.
Arriba, el texto claro sobre un fondo oscuro funciona mejor cuando el tipo es grande. Tomado de la combinación de colores con la que comenzamos, este oro es menos apropiado para el texto del cuerpo (es decir, alrededor de 13 píxeles o menos). La solución es simple:
Arriba, el texto pequeño en las últimas dos filas está en un tono más pálido de oro. No es bastante blanco, pero es mucho más legible que las dos líneas de la primera imagen. El contraste agregado evita que el texto pequeño se vea superado por el fondo. La clave es usar su combinación de colores como punto de partida, no una regla fija. Si un color de fondo amenaza con abrumar a los elementos más pequeños, entonces aumente el contraste, lo que mantendrá la integridad del esquema y mantendrá el contenido legible.
Texto en blanco
Muchas páginas web tienen fondos blancos o áreas de contenido en blanco. Pero "blanco" no significa "en blanco". Grandes franjas blancas afectan la percepción del color. Por ejemplo:
Los colores con los que empezamos parecen más claros cuando se usan para texto.
- El azul relativamente oscuro crea suficiente contraste para que el texto sea legible contra blanco.
- Este tono particular de verde se mezcla con el fondo. Si la intención es la armonía, entonces el verde funciona.
- Rojo + blanco = rosa o melocotón.
- El oro se ve casi como un tono sepia.
El blanco tiende a alegrar todo lo que toca. Si desea establecer un estado de ánimo ligero, entonces cualquiera de las combinaciones anteriores podría funcionar. Para obtener más impacto, puede oscurecer el esquema de color.
Jugar con combinaciones de colores en Photoshop
Si su diseño no requiere que todos los colores de su esquema se usen de manera uniforme, entonces debe probar uno o dos colores para dominar. El truco es encontrar un esquema con colores que funcionen tanto entre ellos como con el color dominante.
Afortunadamente, tenemos un proceso sencillo para probar colores. Para ver cómo diferentes medidas de color pueden afectar un diseño, siga estos pasos en Photoshop.
1. Encuentra o crea un esquema de color. Nuestro ejemplo tiene cinco colores, pero cualquier número por encima de uno funcionará.
2. Cree una nueva imagen en Photoshop, 500 x 500 píxeles, con un fondo blanco.
3. Crea cuatro capas nuevas (tu capa de fondo será la quinta). Si su esquema tiene más o menos de cinco colores, agregue o elimine capas en consecuencia.
4. Llene cada capa con un color diferente a su esquema.
5. Agregue una máscara de capa a cada capa sobre la capa de fondo. La paleta de capas debería verse así:
Arriba, la paleta de capas de Photoshop, con una capa por color y con máscaras de capa aplicadas.
6. Ejecute la acción "Thresholdizer" en cada máscara de capa, pero no en las capas mismas.
Arriba, al usar la acción "Thresholdizer", asegúrese de seleccionar la máscara de capa , no la capa real. Si ejecuta la acción en la capa por error, entonces agradezca la función "Deshacer".
Esta acción crea principalmente un patrón aleatorio en una máscara de capa. A partir de aquí, el diseñador se hace cargo: con el control "Threshold". Deslice el control de Umbral hacia la izquierda para revelar más de una capa determinada y el derecho a revelar menos. Aplicar esta acción a cada máscara de capa hará que un color domine a los demás en un patrón aleatorio.
En este caso, el control de umbral determina la cantidad de una capa dada que es visible. Una máscara de capa mayormente negra oculta la capa; sobre todo blanco revela la capa. Al ejecutar la acción Thresholdizer en cada máscara de capa se creará una mezcla de colores como esta:
Este documento de Photoshop muestra cómo se vería un diseño si el amarillo fuera dominante. Ajustar los colores ahora es muy rápido: para dar un color de más (o menos) contraste, simplemente use un comando de Photoshop (como Imagen> Ajustes> Saturación de tono ).
Por ejemplo, el tono verde que funcionó bien con el azul anterior no se ve muy bien ahora que el azul no es dominante. Algunos experimentos revelan lo siguiente:
Aquí tenemos dos variaciones de nuestro esquema de color original. La variación n. ° 1 oscurece ligeramente el verde. Casi funciona. La variación n. ° 2 cambia todo excepto el amarillo para agregar contraste y alinear los colores.
¿Qué pasa si nuestro diseño tiene principalmente azul en lugar de amarillo? Este tono de azul es lo suficientemente oscuro como para contrastar con los otros colores, pero ninguno de ellos se coordina; todos son primarios. Al elegir un nuevo dominante, hemos creado un nuevo problema.
La variación n. ° 1 anterior reemplaza el rojo suave con un azul más oscuro y convierte el tono verde en una menta pálida. La variación n. ° 2 va para otro lado, usando más rojo (o burdeos) en lugar de menos.
El mérito de cualquiera de estas variaciones es subjetivo. Idealmente, los aplicaría al diseño real antes de tomar una decisión final. La clave está en el proceso: obtener una paleta, elegir un color dominante y hacer que los demás trabajen con él.
Acerca de la acción "Thresholdizer"
No hay misterio en esta acción. Puede obtener el mismo efecto aplicando Filtro> Interpretar> Nubes o Filtro> Interpretar> Nubes de diferencia a una máscara de capa. Esta acción simplemente refina el proceso, organizando el comando Umbral en deciles.
Por favor, siéntase libre de descarga la acción "Thresholdizer" . Mejor aún, crea la tuya y compártela con todos proporcionando un enlace en los comentarios a continuación.
Evaluar el color sin la acción
Por supuesto, hay formas de juzgar el color sin jugar con Threshold. Comience por elegir un color principal y luego haga que los demás trabajen con él.
Aquí está nuestro esquema de color original, con el marrón como color primario.
Hemos atenuado el verde y saturado el rojo. Los colores más duros se sostienen solos, como lo hace el azul (que no se ha ajustado).
Aquí, hemos desvanecido el verde, amarillo y rojo. Estos "acentos" discretos se mezclan con el fondo marrón. Oscurece el azul para crear contraste.
Los tres colores primarios más oscuros van bien contra el marrón medio, mientras que el amarillo pálido sirve como un color de acento.
Una vez más, la decisión final se produce cuando el diseñador aplica estos esquemas al diseño real. Hasta entonces, estos son sólo puntos de partida: herramientas útiles para evitar enfrentamientos, referencias útiles para mantener diseños en el tema y una excelente manera de explorar combinaciones.
El color es simplemente un elemento de diseño. El uso del color es una habilidad que uno debe practicar para controlar el estado de ánimo, para cultivar el propio gusto y para poder ver las posibilidades en algunas muestras.
Solo una cosa es cierta: ese verde tiene que irse.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben es un freelance diseñador web quien resuelve los problemas de comunicación con un mejor diseño.
¿Cómo se prueban los colores? ¿Cuáles son tus formas favoritas de crear esquemas de color? Comparte tus puntos de vista en los comentarios a continuación.