El diseño es cuestión de detalles

Esto lo lei de un forumlo escribio JoanM claro que puse su nombre porque ahi que darle reconocimiento a este articulo se los dejo para que lo lean:

Este artículo, publicado recientemente en A List Apart, me ha parecido muy notable y aquí tenéis una traducción autorizada.
La simplicidad en el diseño, junto con los detalles cuidados es algo que me atrae mucho. A menudo, después de dar muchas vueltas a un trabajo, y siguiendo un largo proceso de refinamiento y elecciones, uno llega a una solución aparentemente simple que encierra un valor más concentrado y potente del diseño.

El diseño está en los detalles

por Naz Hamid

Estás reunido en torno a una mesa de trabajo con tus colegas diseñadores, el director de arte y un director creativo. La pantalla de proyección muestra diseños que vais a analizar críticamente en grupo. Esta es la primera vez que tomais la palabra. Los diseños pasan, uno a uno, y las palabras empiezan a fluir.

Es una frase que oyes a menudo: el diseño está en los detalles. Con el diseño, prestar atención a los pequeños detalles —y, en algunos casos, fijarse obsesivamente en “lo que no está bien”— puede llevar un diseño de “casi está” a “eso es” y más allá.

Asisto a reuniones en las cuales los diseñadores presentan sus diseños, normalmente los primeras pruebas, por primra vez. La mitad de las veces, el diseñador que hace la presentación muestra un producto a medio hacer en pantalla, y normalmente piensan que el trabajo de diseño ya está hecho en un 90-100%. Pero para el diseñador que se fija en los detalles, el trabajo está sólo completo en un 50-70% en esa fase. Puedes apreciar los fundamentos y la intención del diseño que tienes ante tí, pero sabes que simplemente no está acabado.

El propósito de utilizar los detalles es hacerte pensar de forma crítica y presentar el mejor diseño posible ya desde el principio. Esencialmente, quieres que tu diseño esté listo para una presentación real al cliente.

Así que ¿cómo puedes hacer llegar el diseño hasta ese 100%? Necesitas perfeccionarlo y liberar al cliente de cualquier duda acerca de que el diseño esté inacabado. Es muy frecuente que los diseñadores se sientan apurados: tienes una fecha de entrega, notas la presión del proyecto. Pero si realmente te preocupas por tu trabajo y tus ideas, asignarás algo de tiempo adicional, quizás trabajando hasta algo más tarde, como todos hacemos alguna vez, y añadiendo los toques que sabes que harán brillar el resultado final. Conoces esa sensación que tienes cuando piensas “Oh, sabía que debería haber intentado eso”? Házlo la primera vez que te venga a la cabeza. No dejes que alguien saque una idea en la que tú pensaste primero durante la revisión del diseño.

Los trucos y técnicas fortalecen los recursos de cualquier diseñador, pero debo insistir que el pensar críticamente sobre el diseño es tan importante como las herramientas y habilidad necesarios para producirlo.

Aquí está una lista de revisión para guiarte e inspirarte para que hagas que el diseño esté bien hecho. No dejes ningún aspecto sin tratar y no permitas que haya dudas acerca del diseño que presentas. Haz que luzca.

Experimenta

No es raro que prepare hasta cuatro propuestas incluso para la primera vuelta de presentación interna de diseños. Utilizo estas propuestas para esquematizar los diseños. Una navegación o el tratamiento de un logo que no acaba de funcionar en una propuesta puede hacerlo en otra. Esto te puede llevar a lo que llamo “El error hermoso”: colocar elementos en un entorno distinto que crea nuevas posibilidades. En lugar de sentir que tienes el bloqueo del diseñador, pasa las ideas que ya tienes en las propuestas y mira a dónde te llevan.

Empezar es la mitad de la lucha

Del mismo modo, no temas empezar de nuevo. Si algo no funciona, déjalo y abandónalo. Si crees que la navegación te llevó demasiado trabajo, recuerda cómo lo hiciste, y empieza a partir de ese punto en el siguiente diseño. El objetivo es refinar, una y otra vez.

Opciones

Hay muchas opciones que se pueden hacer cuando estás diseñando: desde la tipografía a los colores, el tono global del sitio. A veces me gusta incluir un montón de cosas en un diseño para ver qué funciona y qué no, y con frecuencia empiezo con algo minimalista. Esfuérzate en tomar decisiones simples e inteligentes. Si hay una forma más sencilla de diseñar algo, házlo. La alternativa más complicada le parecerá demasiado compleja al cliente y a la audiencia prevista a menos que seas capaz de hacer que una interacción compleja parezca sencilla.

Mantén la consistencia

Una vez que elijas una opción, manténla. Si decides envolver los items de la barra lateral con 10 pixels, pero utilizas 15 pixels en las áreas de texto más grandes, asegúrate de que las propuestas reflejan esas decisiones. Toma notas mientras diseñas: te servirán como base para tu guía de estilo. La consistencia muestra tu sofisticación e indica que entendiste bien las exigencias del diseño y tomaste decisiones fundadas. La consistencia debe ser evidente.

Integridad

Acaba bien el diseño. No pases por alto un pie de página o un detalle. No digas “esto es para rellnar más tarde, no tuve tiempo.” Saca el tiempo necesario. No des un motivo a los demás para torpedear el diseño o que permita a alguien fijarse en un pequeño detalle, oscureciendo el resto del trabajo. Son estos pequeños detalles los que merecen tu atención. Los directores creativos, los directores de arte, y en especial, los clientes, se fijan en especial en detalles así, de manera que es mejor que te asegures de que esos detalles están ahí.

Dentro, fuera, adelante, atrás: equilibrio

A lo largo de un trabajo de diseño, es mejor alejarse ocasionalmente del diseño —aunque sea sólo durante el almuerzo o para una pausa de 15 minutos para tomar un café. Fíjate en algo distinto. Vuelve y contempla tu diseño de nuevo. Piensa en tus primeras impresiones. Tu propia reacción visceral probablemente será similar a las impresiones iniciales de aquellos que lo vean por primera vez. Toma nota y revisa o cambia tu diseño a partir de esas impresiones. Sin importar lo impactante o interesante que pueda ser un elemento en particular, si no tiene una función específica en tu diseño, libérate de él o prueba algo nuevo. Siempre vuelve sobre tus pasos y reevalúa.

Sé tu propio crítico

Si estás acostumbrado al equipo con el que trabajas normalmente, el cliente o las necesidades de éste, contempla tu diseño a medida que te acercas a su culminación y piensa sobre qué partes pueden suscitar dudas o cuestiones. Ten una respuesta sólida para las decisiones que tomes.

Complejidad en la simplicidad: menos es más

Cuando hablamos de que “menos es más”, podemos indicar diferentes cosas. Por ejemplo, a veces el diseño necesita eliminación de partes sobrantes. Tiene demasiados elementos. O un diseño se asfixia con un exceso de colores. Cuando hagas un trabajo detallista, “menos es más” consiste en dejar sólamente todo aquello que es necesario y hacer que funcione en conjunto, armónicamente. Deja que la complejidad esté en la simplicidad —un diseño no es útil si se percibe como algo complejo. Un diseño debe ser útil, simple y directo —deja que la complejidad se entrevea a través de la simplicidad.

La obsesión es saludable

Si no estoy seguro acerca de un esquema de navegación o un elemento de flash que muestra unas fotos, me siento y trabajo en el boceto hasta que encuentro algo que encaja. El diseño es un rompecabezas que creas para tí mismo: tienes todas las piezas, y debes decidir cómo hacerlas encajar. La perfección no es algo que debas perseguir, pero sí llegar a algo próximo a la perfección, dejando sitio a la exploración, el diálogo y el aprendizaje.
A menudo me pongo a pensar en los sobre diseños en los que estoy trabajando en momentos inusuales del día: en la ducha, preparando la cena, o paseando hasta la tienda de la esquina. Es en estos pequeños y tranquilos momentos cuando suelo avanzar y resolver problemas. En estos momentos se definen los detalles correctos. Ciertamente, no es un tiempo que puedas facturar al cliente, pero es un buen ejercicio: pensar sobre un diseño antes de abordarlo. No hago demasiados esbozos a lápiz sobre papel; me gusta dejar que un diseño se filtre y crezca en mi mente antes de pasar a trabajar en la pantalla del ordenador. Imagino el aspecto, la sensación y los detalles. Cuido en especial los detalles.

El trabajo de los detalles no es fácil, pero te asegura que fomentas un ojo crítico que te ayuda a ti mismo y a tus colegas diseñadores. Cuida los detalles y tus diseños funcionarán.

Publicado en on Abril 30, 2008 at 5:43 pm Dejar un comentario

El mundo del color

El mundo del color

Los niños tienen un sentido del color mucho más espontáneo y libre que los adultos. En ocasiones es necesario volver atrás y manejar el color con la alegría de los pequeños (dibujo de Isabel, 6 años.)

Uno de los principales alicientes de utilizar los medios digitales en lugar de impresos es poder utilizar el color sin que suponga un lujo. Ciertamente, en la comunicación audiovisual, el color no es un lujo, sino una necesidad (sin renunciar, naturalmente, al blanco y negro para determinados proyectos.)

Todos los estudios sobre percepción y comunicación evidencian que un correcto uso del color hace la información más atractiva, permite que se capte más rápidamente y mejor (con una mejor comprensión y retención.) ¿Qué es un uso correcto del color? Básicamente usarlo para una función determinada, como por ejemplo destacar selectivamente las partes esenciales del mensaje o evocar una sensación determinada (alegría, frescor, seriedad, calidad…) : el color no debe ser una simple decoración.

Connotaciones y uso del color.

Aunque el color nos rodea por todos lados y es un elemento clave en la comunicación natural —basta pensar en todas las variantes de coloración del mundo animal y vegetal— dominar su manejo en el arte o el diseño no es una tarea simple. La mejor forma de utilizarlo es de forma selectiva, para acentuar determinadas partes de la página, y evitar un caos de colores que compitan por llamar la atención.

El significado del color en comunicación es, pues, muy importante, y un uso adecuado o inadecuado pueden suponer la diferencia entre transmitir un mensaje tal como se pretende y obtener el efecto opuesto. Por este motivo es importante consultar diferentes referencias bibliográficas o de la red, para saber más sobre la importancia de la percepción del color y la forma en que conviene usarlo.

Paletas de color.

La selección de colores para un proyecto constituye una paleta, por analogía con los colores escogidos por el artista. La mejor forma de asegurar la consistencia entre los colores de diferentes imágenes o documentos es utilizar colores de una paleta compartida. Esto es fácil, porque muchos programas permiten usar unas mismas paletas. Las de los sistemas de color Pantone o Trumatch incluyen centenares de colores diferentes, y trabajando en modalidad de color de 24 bits siempre es posible definir nuevos colores, de entre más de 16 millones de posibilidades.

En los programas de diseño para la web, tanto gráficos como de html, suele utilizarse una paleta formada por 216 colores que se denomina paleta web o paleta segura para la web (websafe colours.) Estos colores se muestran por igual en cualquier plataforma, sea Mac, sea PC, incluso con tarjetas gráficas de baja resolución (las que permiten sólo color de 8 bits.) ya que este conjunto de colores son comunes a la paleta mínima de colores que muestran ambos tipos de sistema Si bien este número de colores es minúsculo en comparación con los colores de otras paletas, es más que suficiente para muchos propósitos. Y si comparamos esta cantidad con el número de colores de una caja de acuarelas o lápices de color… ¡pocos diseñadores tienen tanta variedad!

paleta
Debe tenerse en cuenta, sin embargo, que estos colores de la paleta segura no son los únicos que se pueden ver en un sistema con tarjeta capaz de mostrar sólo 256 colores. Puede simularse muchos más colores mezclando puntos de los colores básicos. A simple vista el resultado es un tono continuo (al fin y al cabo, también los materiales impresos tienen colores conseguidos a base de puntos minúsculos de tinta de cuatro colores.) Estos tonos obtenidos por mezcla los prepara el mismo programa de gráficos, en el momento de guardar una imagen que contenga algún color no presente en la paleta de 256 colores del sistema. Sirva de ejemplo el gráfico adjunto. Como curiosidad, vale la pena visitar la página web del Color Mixer, una interesante aplicación Java que produce al instante una mezcla de 2 ó 3 colores de la paleta segura para simular el color que se le indique. Economía en el uso del color.

Ahora bien, tener tantos colores a su disposición no obliga a los diseñadores a usar una gran cantidad de ellos. Tienen mucho donde elegir, pero para cada proyecto, los profesionales suelen seleccionar una paleta limitada: una combinación de unos pocos colores que mantienen constantes en todo el trabajo, favoreciendo así la consistencia en el diseño general. Una de las ventajas de utilizar una paleta limitada es el hecho de que resulta simple destacar elementos del diseño con una aplicación selectiva de un color determinado. Resulta curioso que muchos diseños o pinturas que, a primera vista parecen tener colores vivos o intenso, de hecho están elaborados con una mayoría de colores neutros, y unos pocos toques de énfasis con colores más vibrantes. Por ejemplo, un cuadro pintado en casi su totalidad a base de ocres, grises, blancos y negros, aparenta ser mucho más colorido con un ligero toque de colores más vivos, como naranja más azul celeste.

Sistemas de definición del color.

Para definir los colores con los que trabaja un programa determinado, existen tres modelos principales: color RGB, color HSV y CMYK. Además, existen sistemas comerciales de definición de colores, como el sistema Pantone. En el sistema Pantone existe una serie de colores que se obtienen mediante mezclas predeterminadas de unas tintas proporcionadas por el fabricante. Para conseguir los resultados esperados es imprescindible disponer de un libro de muestras de esos colores sobre papel satinado y papel no satinado. Los colores pantone se simulan en pantalla y tienen una equivalencia en cmyk sólamente en parte.

Muchos programas de diseño incorporan utilidades completas de gestión del color, para asegurar una correcta visualización en pantalla, y una correspondencia entre los colores del monitor y los que se imprimen, puesto que hay mucha diferencia entre los colores que aparecen de forma aditiva (por luz emitida, como en el monitor) o de forma sustractiva (a partir de luz reflejada, en materiales impresos o cualquier objeto.)

Los valores asignados a cada componente del color se miden en diferentes unidades. Es corriente asignar valores numéricos decimales (de 0 a 256) o hexadecimales (un sistema en base 16, de uso general en los programas informáticos que utiliza las cifras 0-9 y las letras A-F). Por ejemplo, un color puede ser RGB (15, 150, 256) en binario y otro color ( cF, cc, 00) en hexadecimal. Por lo que respecta a los colores de sistemas patentados, como Pantone , se definen por un número de catálogo, como por ejemplo, “Pantone 350C”. Naturalmente, éste es un color que puede obtenerse de forma más o menos fiel, con una combinación RGB, HSV o CMYK.

En el sistema RGB , el color se define en términos de luz cromática: es decir, una mezcla de luz roja, verde y azul que, en combinación, da todos los colores-luz como los de la pantalla o los focos de un escenario. Combinando los tres valores obtenemos todos los colores posibles. Un valor de (0,0,0) supone negro, el máximo valor en cada uno da luz blanca.

Otro sistema con tres parámetros para definir el color es el sistema HSV (de hue, saturation, value). Los tres parámetros están relacionados con los del sistema RGB. El tinte (hue) es el color de partida; saturación significa qué concentración tiene el pigmento y el valor supone una tonalidad más o menos oscura. El sistema CMYK, de Cyan, Magenta, Yellow, BlacK, define los colores de forma aditiva, tal como funciona una impresora de inyección de tinta o una imprenta comercial de cuatricromía. El color resulta de la superposición o de colocar juntas gotas de tinta semitransparente, de los colores cian (un azul), magenta (un color rosa intenso), amarillo y negro. El sistema es aditivo, a diferencia de los anteriores, y aquí (0,0,0,0) es blanco puro (el blanco del papel.) El color en pantalla e impreso es muy diferente, y la gama de colores que se puede representar es muy distinto. Los sistemas de gestión de color en pantalla permiten que al menos los colores simulados en pantalla se parezcan lo máximo a los que se obtendrán a la hora de imprimir.

Trucos para crear paletas. Importar, exportar y compartir paletas.

Un mezclador de colores tal como aparece en un típco programa de ilustración o pintura. Podemos optar por cualquiera de los sistemas RGB, CMYK, HSV e incluso otras opciones, como el diálogo de elección de colores de Windows.

Cada programa (tanto de dibujo como de pintura), tiene su propia forma de generar y administrar las paletas de color. Es frecuente que ya dispongamos de una variedad de paletas para elegir. Si aún así queremos crear colores a medida, en el caso más sencillo, aparece un mezclador de colores y se pueden definir los colores uno a uno para, a continuación, añadirlos a la paleta deseada. Más interesante es usar paletas ya preparadas, por ejemplo, a partir de una imagen que contenga colores que nos interese utilizar.

Una forma rápida de crear una paleta (con un máximo de 256 colores) es guardar una imagen en formato .GIF. Se crea automáticamente una tabla de colores (con un máximo de 256); la paleta asociada puede guardarse para cargarla a continuación al elaborar un nuevo gráfico.

Con los programas de ilustración existen utilidades semejantes: Freehand tiene un “xtra” llamado name all colours que es especialmente útil para crear una paleta a partir de una imagen. También pueden importarse al programa tablas de colores estándar de Photoshop (un fichero .ACT) Illustrator incluye un interesante filtro (creación de mosaico de color) que tiene una aplicabilidad parecida (comentamos más abajo este filtro.) Utilización del cuentagotas de color.

Inicialmente ésta era una opción de los programas de pintura en mapa de bits, pero ahora la mayoría de programas de dibujo vectorial también incorporan esta útil herramienta, que ahorra mucho tiempo para elegir colores ya utilizados en una imagen. Por ejemplo, en Illustrator, la herramienta alterna su función entre “bote de pintura” y “cuentagotas”. Lo que hace es seleccionar el color, y pasando al bote de pintura, se aplica al objeto elegido. Para pasar de una herramienta a la otra no es necesario ir al menú o a la barra de herramientas; basta apretar la tecla Alt para alternar. En Paintshop Pro también se hace algo similar; las herramientas de dibujo alternan con el cuentagotas apretando la tecla de Control.

Mosaicos de color.

Ya hemos visto que cuando el sistema no dispone de suficientes colores para representar un gráfico, simula los colores que no puede crear en forma pura como una trama de otros colores disponibles. Existen varias formas de crear este mosaico de puntos que crea la ilusión de un tono continuo en pantalla; se pueden agrupar en dos categorías principales: tramas regulares y tramas irregulares.

Además, con los programas de dibujo y pintura existen toda una serie de posibilidades de utilizar los mosaicos de color para obtener efectos interesantes. Por ejemplo, muchos programas incluyen un filtro que simula la trama de cuatricromía que se utiliza en impresión: los tonos continuos de color son así sustituídos por una trama de puntos de los colores cian, magenta, amarillo y negro.

Otros efectos son parecidos: el efecto de mosaico o pixelizar consiste en asignar una cuadrícula de tamaño a elegir para representar la imagen.

Finalmente, una aplicación interesante de estos efectos de mosaico la encontramos en Illustrator. Uno de los filtros del programa crea un mosaico de color a partir de una imagen en mapa de bits. Lo interesante es que, a continuación, pasamos a tener un conjunto de objetos vectoriales (de forma y tamaño determinados por el usuario) y, en definitiva, una paleta de color lista para usar en el programa de dibujo.

Efectos especiales de color. La malla de degradado.

Los programas de dibujo y pintura no solamente pueden aplicar colores planos, los que dan un aspecto más bien frío, que recuerda que el trabajo está hecho en la computadora. Todas estas aplicaciones permiten crear efectos de degradado más o menos logrado. En el caso más simple, un color va fundiéndose con otro, con un aspecto similar a dos lavados de acuarela que se han aplicado uno al lado del otro cuando la pintura aún estaba húmeda. Versiones más sofisticadas del efecto ponen más colores y opciones en juego.

Tradicionalmente se ha considerado que los programas de dibujo no son capaces de crear objetos tan sutiles en su colorido como los programas de pintura en mapa de bits. Sin embargo, algo se ha solucionado con el tiempo y la incorporación de interesantes funciones en los programas de ilustración. Las versiones más recientes de los programas de dibujo vectorial CorelDraw e Illustrator presentan una fascinante herramienta, el relleno de malla, que crea una red sobre el objeto, y los colores van fundiéndose hacia cada uno de los nudos de la red. Esto permite crear efectos sutiles y muy bellos.

Cambios selectivos y globales de color.

Una ventaja añadida de manejar el color con medios digitales es la posibilidad de efectuar tantas copias como se quieran y experimentar variaciones en el color de cada una de ellas. En los programas de ilustración y pintura encontramos filtros que permiten ajustar de forma global los colores de toda la imagen o de las partes seleccionadas: desaturar, añadir un color determinado, crear una imagen con un solo color (en diferentes tonos)…

Recursos interesantes sobre el color.

Para aprender más sobre este fascinante mundo del color, existen numerosos recursos. En los libros de técnicas artísticas y manuales de diseño siempre se incluye un capítulo o varios dedicados al color.

Lo que siempre viene bien es leer un libro de arte, y ver los grandes maestros clásicos y contemporáneos del color… algunos favoritos personales como Matisse, Piero Della Francesca, Willem deKooning, Claude Monet, Paul Klee, Mark Rothko, las pinturas murales mesoamericanas, Vassili Kandinski, los expresionistas alemanes…

En la red existen algunas webs especializadas que contienen abundante información relacionada con el mundo del color, como por ejemplo Colorize. Éste es uno de los recursos más completos, e incluye enlaces a otras páginas relacionadas, tutoriales y mucho más. En la web de Corel, designer.com se están publicando una serie de muy interesantes artículos sobre el tema (The color wheel

, por Gary W. Priester.) Armonías de color.

Publicado en on at 5:18 pm Dejar un comentario

Regla Básica para combinar colores

Los colores varían según la intensidad de luz que reciben y el entorno que los rodea. Para lograr combinaciones exitosas en tu decoración es bueno que repases la teoría de los colores que aprendiste en la escuela. A partir de esa primera clasificación, los expertos te proponen las mezclas más efectivas. Conoce primero y experimenta después.

Grupos principales

Colores primarios: (no se consiguen por mezcla)

  • Rojo.
  • Amarillo.
  • Azul.

Colores secundarios: (se obtienen de la mezcla de partes iguales de dos colores primarios que son consecutivos en el círculo de colores).

  • Naranja: rojo

    y amarillo.

  • Verde: amarillo y azul.
  • Violeta: azul y rojo.
  • Bermellón: magenta y amarillo.
  • Azul fuerte: azul y magenta.

Colores intermedios: (mezcla de colores primarios en cantidades desiguales). Ejemplos:

  • Verde-amarillo intenso (chartreuse).
  • Verde-amarillo claro (verde manzana o apple green), etcétera.

Colores terciarios: (mezcla de dos colores secundarios). Por ejemplo:

  • Naranja y verde: oliva.
  • Verde y violeta: pizarra (slate).
  • Violeta y naranja: rojizo (russet).
  • Amarillo y bermellón: naranja.
  • Magena y bermellón: carmín.
  • Magenta y azul fuerte: violeta.
  • Amarillo y verde: verde claro.

Colores complementarios: (colores que aparecen en lugares opuestos del círculo de colores. Generalmente se usan para reducir el brillo y la intensidad de su opuesto. Ejemplos:

  • Rojo y verde.
  • Amarillo y violeta.
  • Azul y naranja.

Colores cálidos: (relacionados con el fuego y el sol).

  • Rojos.
  • Amarillos.
  • Naranjas.
  • Violetas rojizos.

Colores fríos: (asociados con el invierno, del hielo y del mar).

  • Azules.
  • Azules verdosos.
  • Azules violáceos.
Publicado en on at 5:12 pm Dejar un comentario

Manual digital de diseño

Armonías de color

El color es a menudo el factor clave del éxito de un diseño. Existen una infinidad de colores y matices para elegir. Esto hace que escoger una selección de colores para un proyecto parezca algo complicado. ¡Es de agradecer cualquier ayuda que nos permita restringir la búsqueda! Ciertamente, la apreciación de los colores es algo muy subjetivo y, además, algo sometido al vaivén de las modas. De todos modos, existen algunas ideas básicas que deben tenerse claras para poder trabajar con soltura con los diseños a color. Esta información la podemos encontrar también en nuestra biblioteca: los manuales de diseño incluyen siempre capítulos más o menos extensos dedicados a la elección y combinación de colores.

En la página previa de esta sección tenemos una introducción al mundo del color en el diseño digital. Aquí veremos algunas ideas esenciales para combinar con acierto los colores.

Existen varias opciones a la hora de plantear un diseño. Raramente funciona una combinación de varias de ellas en una sola página, de manera que podemos considerarlas mutuamente excluyentes. Un determinado planteamiento del color se asocia a otras connotaciones y valores del diseño: frescura, seriedad, calidad, espontaneidad, juventud, delicadeza…

De entrada, existen diferentes formas de enfocar el color en un proyecto: un tratamiento monocromo, o a base de grises tintados; colores matizados o apagados; colores pastel; colores vivos… y dentro de cada una de estas posibilidades podemos emplear diferentes combinaciones. Unas funcionan, otras no. Intentaremos aquí presentar algunas orientaciones básicas para la selección de colores dentro de un esquema u otro.

Armonías de color.

La investigación y las experiencias de los pintores a lo largo de los siglos nos permite disponer de diversos conjuntos de colores que armonizan especialmente entre sí. La mejor manera de explorar estos grupos de colores es utilizar la rueda o círculo de color. Una rueda de color básicamente ordena de forma secuencial la progresión de los colores que forman el espectro de la luz, desde el rojo hasta el violeta.

El círculo de color tiene que resultarnos familiar, por poco que hayamos abierto alguna vez un programa de gráficos o hayamos elegido colores en un programa cualquiera. A partir de estos colores y sus variantes (añadiéndoles blanco o negro para obtener colores pastel y colores apagados, respectivamente), podemos hacer nuestras selecciones de colores para un proyecto. Los motivos por los que determinados colores ligan bien entre sí son complejos. Existen diferentes formas de seleccionar colores de manera que formen un grupo armónico: los colores, de una forma agradable a la vista se realzan mutuamente.

La selección cromática para un proyecto suele contar con unos pocos colores dominantes que armonizan entre sí. Una gran cantidad de colores diferentes, aunque sin duda es algo agradable a la vista, resulta difícil de mantener a lo largo de una serie de páginas o pantallas si se pretende enfocar la atención en algo que no sean las manchas de colores.

Existen diferentes tipos de armonías de colores usadas a menudo por los diseñadores y artistas. Veamos algunas de ellas. El ejemplo que proponemos se basa en el círculo cromático básico— es posible obtener las variantes con diferente luminosidad añadiendo blanco o negro.

Armonía monocromática. Muy simple de utilizar, sobria y elegante. Se basa en un solo color y sus diferentes tonos. Es decir, en un círculo cromático, estaríamos en un solo punto y elegiríamos variantes del mismo valor y saturación, con mayor o menor luminosidad. En el editor de colores de windows, la barra auxiliar de la derecha representa esas diferentes tonalidades de un color. Un plugin llamado Pantone Wheel. Este plugin gratuito (de la muy recomendada serie Unplugged Effects), apto para Paint Shop Pro, versión 4 o posterior, o también para Photoshop, crea una rueda semejante a las del sistema Pantone. Lo interesante es que, con un mínimo de manipulación, obtenemos múltiples variantes de esquemas armónicos listos para usar.

Armonía de análogos.

Los colores análogos ocupan posiciones inmediatamente próximas en la rueda de colores. En razón de su parecido, armonizan bien entre sí. Este tipo de combinaciones es frecuente en la naturaleza.

Colores complementarios o contraste

Los colores complementarios se encuentran en puntos opuestos del círculo cromático. Estos colores se refuerzan mutuamente, de manera que un mismo color parece más vibrante e intenso cuando se halla asociado a su complementario. Estos contrastes son, pues, idóneos para llamar la atención y para proyectos donde se quiere un fuerte impacto a través del color.

De complementarios divididos

En lugar de utilizar un par de complementarios, se utilizan los situados en posiciones inmediatamente adyacentes. El contraste en este caso no es tan marcado. Puede utilizarse el trío de colores complementarios, o sólo dos de ellos.

Doble armonía de complementarios

.

Utiliza un par de asociaciones de colores complementarios.

Tríadas o armonía de tres colores

Se eligen tres colores equidistantes en el círculo cromático. Versiones más complejas incluyen grupos de cuatro o de cinco colores, igualmente equidistantes entre sí (situados en los vértices de un cuadrado o de un pentágono inscrito en el círculo.)

Familias de colores. Modelos y paletas.

Conviene recordar que se suelen denominar colores fríos a la mitad del círculo centrada en el polo azul: es decir, desde el violeta hasta el amarillo verdoso. Estos colores dan una sensación de quietud, frescor, lejanía… Los colores cálidos son la mitad opuesta, y dan sensación de calidez, cercanía, viveza. Estos colores forman una gran serie de armonía de análogos y es fácil crear diseños sobrios pero agradables con ellos.

Las familias de colores incluyen colores que armonizan entre sí, basada en un color primario. Por tanto, tenemos tres familias principales: la del rojo, la del amarillo y la del azul.

En general se puede hablar de diferentes modelos básicos de selección de colores para un proyecto. Cada uno tiene sus connotaciones y es adecuado para unos usos, mientras que sería chocante en otros. Aunque nada nos impide intentar romper los moldes:

  • Colores vivos e intensos— colores tomados directamente de la rueda de color.
  • Colores pastel y colores apagados. Versiones matizadas de los colores, con mayor y menor luminosidad respectivamente.
  • Combinación del negro con otros colores. El negro y el blanco combinan perfectamente con cualquiera de las familias de colores y los esquemas de colores vivos, pasteles, apagados. De hecho, el negro, el blanco o los grises acromáticos realzan la percepción de los colores del resto de la composición. También es un truco interesante crear una imagen a base de tonos matizados, de tendencia neutra, y añadir unos pocos toques de colores intensos: esto proporciona una mayor viveza aparente al resto de la imagen.

Herramientas digitales para elegir y combinar los colores.

Evidentemente, elegir colores dentro de un sistema de producción digital es muy diferente de mezclar colores en una paleta de óleos o acrílicos. Pero también es muy diferente el requerimiento de colores para el mundo de la imprenta y el de la pantalla. Obviamente, dentro de un sistema de producción digital, lo más cómodo y flexible es una heramienta que permita combinar colores, a modo de rueda de color, directamente en la pantalla del ordenador. Sin embargo, sistemas de creación directa e intuitiva de armonías no abundan en el software de gráficos.

Existe un formidable programa llamado Color Wheel Pro que genera vistas previas de los resultados de la armonía de colores(admite múltiples tipos de armonías) en formato de Flash. Las opciones del programa son múltiples, desde un ejemplo de paquete de producto a un logotipo o a una interfaz de sitio web. Recomendado por la facilidad de uso y las excelentes posibilidades.

CorelDraw, a partir de la versión 8, cuenta con una excelente rueda de armonías de colores. Pueden elegirse desde armonías simples hasta complejas (incluso con grupos de 5 colores.). La forma en que funciona es muy sencilla; la ventana es una de las opciones de la persiana de control de colores y permite guardar los colores elegidos dentro de una de las paletas del programa. El sistema es muy útil, puesto que además busca variaciones de los colores que se hayan escogido:

Armon�as de color en CorelDraw

Photoshop dispone de un plugin (de momento disponible sólo en la versión Mac) que hace algo parecido a la paleta de armonías de color de CorelDraw. Se llama Hotdoor Harmony y su interfaz es semejante a la ya descrita para el programa de Corel. En este caso, para hacerse una mejor idea, el programa incluye una imagen de muestra en la que se ven los colores de la armonía aplicados.

Existen además muchas otras posibilidades de generar armonías y elegir los colores. Por ejemplo, una serie de aplicaciones (comerciales o gratis), applets de Java y scripts que pueden abrirse en un navegador de Internet.

Los más fáciles de encontrar son scripts gratis para especificar el color de los elementos de una página web, como el color de fondo, color del texto y color de los enlaces. Algunos de ellos son sorprendentes y además, útiles. Veamos un ejemplo (aparecerá en una nueva ventana que se puede cerrar por separado.)

Existe un applet de un proyecto de investigación de la Universidad de Syracuse que genera combinaciones de colores armónicos. En realidad se trata de una herramienta para realizar una encuesta, pero puede descargarse al disco y utilizarse como una utilidad de combinación de colores. Puede encontrarse en http://creativity.syr.edu/colortest/

En easyRGB ofrecen una utilidad interactiva que crea combinaciones armónicas de colores a partir de un color que nosotros introducimos, por ejemplo el color de nuestro logotipo.

New Vision dispone de una utilidad llamada color complementor que también sirve para el mismo fin.

Color Scheme Designer

Color Scheme Designer es una fantástica utilidad gratuita con numerosas opyciones: permite no sólo tomar muestras de color y previsualiza el resultado en un modelo de página; permite exportar a html y css, guardar esquemas, visualiza armonías de colores, y muchas más opciones.

Finalmente, siempre queda el recurso de utilizar cartas de colores en forma de gráfico. Para la mayoría de programas puede utilizarse la herramienta cuentagotas para tomar muestras de los colores. Si el programa no dispone de este útil, puede emplearse un programa auxiliar, como Eyedropper (comentamos este programa en un artículo reciente sobre producción gráfica de páginas web.)

Recordemos, además, que:

  1. Un GIF o cualquier otro formato de color indexado sirve inmediatamente como paleta de colores.
  2. Se pueden exportar paletas de colores a diferentes formatos reconocidos por los editores gráficos (pal, aco, act…)
  3. Para disponer de una paleta de colores dentro de un programa de ilustración vectorial, existen diversas estrategias posibles:
    • Emplear una utilidad que asigne nombres a todos los colores.
    • Utilizar los colores en pequeños “chips” dentro de un documento del programa y guardarlo.
    • Importar la paleta desde un formato reconocido por el programa (pal, act…)
  4. La conversión de sistemas de unidades rgb-hsv-cmyk… suele ser automática dentro del programa, así como el paso de unidades hexadecimales a decimales o viceversa. En caso necesario pueden emplearse utilidades al efecto, o incluso para la conversión dec-hex, la misma calculadora del sistema.
Publicado en on at 5:07 pm Dejar un comentario

Bienvenidos

Bienvenidos a mi blog de diseño espero que les gustes que tengan bonito dia…

Publicado en on at 4:57 pm Dejar un comentario