Locked El color en la Web

[NeoxSys]

Descubriremos el número de colores que podremos usar en una web, y si son estos los mismos se la web se ejecuta en un ordenador o en otro.

Por

This is the hidden content, please

• Sign In
• or
• Sign Up

 

El ojo humano puede distinguir aproximadamente entre 7 y 10 millones de colores, lo que hace que la vista sea para nosotros el principal sentido que nos une con el exterior, pudiéndose afirmar que alrededor del 80% de la información que recibimos del mundo exterior es visual.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Pintores y diseñadores gráficos utilizan esta capacidad humana de apreciar colores para crear obras que profundicen en el alma y que inspiren sentimientos en los seres que las contemplan. Pero ¿qué podemos hacer cuando debemos expresarnos con un número limitado de colores?.

 

Hace tan sólo unos pocos años la mayoría de los ordenadores de los que disponía el público en general eran, con la visión que tenemos hoy en día, unos trastos grandes, lentos y con pocas prestaciones, no sólo a nivel de memorias y procesadores, si no también a nivel de prestaciones gráficas. Y los periféricos eran asimismo muy limitados. Todo ello originaba que a nivel grafico estos equipos trabajaran tan sólo con 256 colores.

 

Actualmente los equipos informáticos aumentan día a día sus prestaciones, y lo normal ahora es trabajar con millones de colores y con monitores de altas prestaciones. La mayoría de la gente dispone ya de avanzadas tarjetas gráficas, con memorias de hasta 64 megas, que desarrollan un trabajo de millones de texels (el téxel, elemento de textura, es a los gráficos 3D lo que el píxel es a los gráficos bidimensionales).

 

Pero a la hora de la verdad ¿de cuantos colores disponemos para trabajar los diseñadores web?.

 

La respuesta a ésta pregunta es desalentadora, ya que nosotros dependemos a la hora de mostrar nuestras páginas de unos programas específicos, los navegadores o browsers, que son los encargados de presentar en pantalla el contenido de las páginas que le llegan desde el servidor mediante el protocolo HTTP.

 

Estos programas, aparte de la gran diferencia a la hora de trabajar que hay entre ellos, interaccionan con el sistema operativo en el que corren, lo que origina al final un galimatías que hace que los colores de nuestras páginas varíen según el ordenador usado, según el navegador y según el sistema operativo en el que éste está montado. Por todo esto, los millones de colores de los que se disponen para trabajar quedan reducidos a tan sólo unos pocos (y tan pocos) a la hora de crear páginas web.

 

El sistema operativo identifica tres colores básicos, a partir de los cuales construye todos los demás mediante un proceso de mezcla por unidades de pantalla (pixels). Estos colores, como ya hemos visto, son el rojo, el azul y el verde, y el sistema por ellos definido se conoce como RGB. Los bits de profundidad de color marcan cuántos bits de información disponemos para definir los colores derivados de éstos colores primarios.

 

A más bits, mayor número de variaciones de un color primario podemos tener. Para 256 colores se precisan 8 bits, para obtener miles de colores necesitamos 16 bits (color de alta densidad) y para obtener millones de colores hacen falta 24 bits (color verdadero). Existe también otra profundidad de color, 32 bits, pero con ella no se consiguen más colores, si no que los que usemos se muestren más rápido.

 

En sus inicios, la mayoría de los usuarios disponían de monitores capaces de interpretar tan solo 256 colores (8 bits). Si tenemos en cuenta que el propio sistema operativo de queda con 40 para su gestión interna, el resultado es que quedaban 216 colores para presentar gráficos en pantalla, colores que por otro lado no estaban definidos de forma estándar.

 

En 1994 la empresa Netscape estableció una subdivisión del círculo cromático en 216 colores equidistantes entre sí, obteniendo un conjunto de colores que denominaron Netscape Color Cube.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Esta división del círculo se corresponde con 6 tonos de rojo, 6 de azul y 6 de verde, a partir de los cuales se obtienen, por mezcla entre ellos, los 216 colores posibles, por lo que todos ellos tendrán un código hexadecimal en el que cada color primario viene definido por una pareja de valores iguales, debiendo estos ser 00,33,66,99,CC o FF.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Con el paso del tiempo los ordenadores fueros aumentando sus prestaciones gráficas, siendo común en la actualidad profundidades de color de 16, 24 y 32 bits.

 

Si usamos una profundidad de 24 bits, correspondiente a millones de colores, disponemos de una amplia gama para trabajar. Cuando usamos una profundidad de color de 16 bits disponemos de miles de colores, pero surge entonces el problema adicional de que la división de esta gama de colores no se corresponde con la de 256 colores ni con la de millones de colores, dando el mismo código colores levemente diferentes. Por ejemplo, #663399 es el mismo color a 256 y a millones, pero no es igual que el obtenido con miles de colores.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Con el paso del tiempo se ha adoptado una lista de colores a los que se le ha puesto un nombre representativo en inglés, de tal forma que los modernos navegadores interpretan el mismo y lo traducen internamente por su valor hexadecimal equivalente.

 

Fuente: desarrolloweb.com

[NeoxSys]

Paletas de color seguras. Websafe y Reallysafe

 

Las paletas de colores dan limitaciones a la hora de presentar los colores que contiene la web. En este capítulo vamos a ver cuales son estas limitaciones.

Por

This is the hidden content, please

• Sign In
• or
• Sign Up

 

La mayoría de los colores obtenidos con 16 bits de profundidad son diferentes a los obtenidos con 8 y 24 bits. Además, si se usan 8 bits (256 colores), el monitor será incapaz de presentar muchos de los colores obtenidos si la página se ha diseñado a millones de colores.

 

Queda patente entonces la necesidad de trabajar con una gama de colores compatible con todas las profundidades. Pero ¿cuántos son estos colores?.

 

Aquí viene la decepción del diseñador web, ya que este número es en realidad muy bajo. Tradicionalmente se ha considerado como paleta de colores segura la que hemos antes mencionado, formada por los 216 colores del tipo #aabbcc, donde a, b y c deben ser 0,3,6,9,C o F, que recibe el nombre de WebSafe.

 

Esta paleta no es en realidad segura, debido al problema con la profundidad de miles de colores. Si ha esto añadimos la variable adicional de que cada sistema operativo y cada navegador interpreta los colores a su antojo, el resultado final es que sólo disponemos de una pequeña paleta, formada por 22 colores. Esta paleta se conoce con el nombre de ReallySafe.

 

En la siguiente imagen tenéis la paleta WebSafe. Dentro de ella, destacados en color rojo, se encuentran los colores de la paleta ReallySafe.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Como comprenderéis, trabajar tan sólo con los 22 colores de la paleta ReallySafe no nos va a permitir construir un sitio web muy atractivo, ya que la limitación impuesta resulta excesiva.

 

Como alternativa podemos trabajar dirigiéndonos al mayor número de usuarios posibles, y para ello podemos diseñar nuestras páginas usando bien la paleta de 216 colores, con lo que tendremos cubierto el rango de usuarios con sistemas de color de 8 bits y de 24 bits.

Esta paleta WebSafe según el sistema operativo usado.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Y también según el navegador web.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Estas limitaciones de colores pueden parecer una traba al diseño de páginas web, pero no debemos darle más importancia de la debido. En primer lugar, 216 colores bien utilizados dan mucho juego. En segundo lugar, podemos diseñar nuestras páginas con toda la gama de 24 bits (millones de colores) ya que actualmente la mayoría de usuarios manejan ordenadores de altas prestaciones.

 

En este punto, el sentido común, la experiencia y el testeo de la página en diferentes sistemas y navegadores son las mejores armas para conseguir el diseño buscado.

 

Fuente: desarrolloweb.com

[NeoxSys]

El problema de las imágenes

 

Los colores de las imágenes pueden sufrir cambios si deben ir encapsulados en estructuras tales como tablas, capas, etc. Esto puede tener una solución aproximada, pero no óptima. Vamos a ver los problemas que se pueden presentar.

Por

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Un problema adicional relacionado con los colores se produce cuando deseamos insertar en nuestra página una imagen dentro de la celda de una tabla, de una capa, etc., especialmente si se trata de una imagen en formato GIF, ya que este tipo de gráficos tienen limitados su gama de colores a 256.

 

El hecho es que frecuentemente nos encontraremos que el color de fondo de la imagen no nos va a coincidir con el color de fondo de la celda o capa, aunque el código hexadecimal empleado en ambos sea el mismo.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Esto es debido a que a veces el formato GIF no es capaz de interpretar debidamente colores que están fuera de la paleta segura, en cuyo caso puede optar por aproximarlo al color más parecido de su paleta o intentar simular el color pedido mezclando dos colores de los que dispone, procedimiento que se conoce con el nombre de dithering.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

El problema se acentuará más aún si el usuario dispone de un sistema de 256 colores, ya que entonces el sistema no será capaz de interpretar correctamente ni el color del fondo del GIF ni el color de fondo de la tabla o contenedor, con lo que el contraste entre imagen y celda o capa se acentúa.

 

Para solucionar este problema podemos hacer tres cosas:

• Usar colores e fondo pertenecientes a la paleta WebSafe.
  
• Usar imágenes GIF de fondo transparente.
  
• Situar las imágenes fuera de celdas de tabla o capas que deban tener color de fondo.
  

Ninguna de estas soluciones es óptima, pero son las únicas de que disponemos.

 

Si optamos por usar una imagen de fondo transparente, deberemos pensar que si ésta va a funcionar como un enlace y hemos configurado un estilo para el estado hover de estos elementos, al color de fondo de la imagen cambiará cuando el puntero del ratón se sitúe sobre ella.

 

Si estamos diseñando para millones de colores podemos guardar la imagen en formato PNG, que teóricamente soporta millones de colores y transparencias, aunque hay ocasiones en que la interpretación del color de fondo de la imagen no es correcta en este formato.

 

Por lo tanto la mejor solución al problema de las imágenes es utilizar siempre para los fondos colores de la paleta WebSafe, ya que de esta forma tendremos garantizada la compatibilidad entre fondos a 256 colores y a millones de colores.

 

Fuente: desarrolloweb.com

[NeoxSys]

Colores y partes de una página

 

Es importante saber escoger los colores que definirán una parte de la página para que sea factible el cometido de ésta. Veremos que colores son los más apropiados para cada sección del sitio.

Por

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Cada elemento de una página web y cada agrupación de ellos debe desempeñar en la misma un papel perfectamente definido, que además debe corresponderse con su peso visual dentro del total de la página. Una de las herramientas más potentes con las que cuenta el diseñador web para cumplir este objetivo es el uso adecuado de los colores.

 

En los casos de páginas más complejas, y desde el punto de vista de lo que observa el usuario, podemos dividir estas en cuerpo o sección principal, dintel, menú y pie de página.

 

Sin duda alguna la parte más importante de las mencionadas es el cuerpo de la página , ya que en él va a figurar la información que queremos transmitir al visitante. Por esto, los colores dominantes en ella deben permitir una lectura de contenidos clara y amena, así como una perfecta visualización de sus elementos gráficos. Para ello, deberemos usar un color para el texto que contraste adecuadamente sobre el del fondo de la página.

 

Buenos contrastes se obtienen: - Con fondos claros y textos oscuros, o al revés.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Con fondos fríos y textos cálidos, o al revés, siempre que no sean análogos.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

El tema del contraste entre fondo y texto es difícil de manejar en las páginas web, debido fundamentalmente a la poca resolución que tenemos en la pantalla del monitor, que suele ser de unos 5.200 puntos por pulgada cuadrada, casi 300 veces menos de la resolución que tiene una página de revista tradicional.

 

Por esto, el típico conjunto fondo blanco-texto negro sigue siendo en las páginas web el mas idóneo para conseguir un contraste óptimo. Los fondos negros o muy oscuros pueden dar un buen contraste con casi cualquier color de texto que sea luminoso, mientras que los fondos coloreados pueden llegar a trabajar bien si son apagados y de baja saturación, como es el caso de tonos pasteles, grises o tierra.

 

Por otro lado, no es recomendable usar imágenes de fondo en las páginas web, salvo que esta sea de un color y tono muy apagados y con poco contenido gráfico por unidad de pantalla, ya que despistan mucho al usuario y enmascaran excesivamente el texto y los demás elementos de la página. Sólo se deben usar cuando se realiza un buen estudio del mismo por un profesional del diseño web, ya que además de lo antes expuesto ralentizan mucho la carga de la página.

 

Los enlaces que figuren en esta sección deben ser claramente diferenciados por el usuario, sobre todo si la página va dirigida a un público muy general. Si no usamos los colores de enlace estándares (azules vivos con texto subrayado), sí que deberemos usar un color que destaque claramente del texto informativo y del fondo.

 

 

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

El dintel se localiza por costumbre en la parte superior de la página, y en él suele (y casi debe) figurar el logotipo de nuestra página, asociación o empresa. Es importante la presencia de un logotipo, ya que crea un signo de continuidad y de identidad en nuestras páginas, mostrando a los visitante rápidamente dónde se encuentran. El color de este debe ser tal que destaque claramente sobre el fondo.

 

 

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

En los idiomas occidentales se leen las páginas de arriba abajo y de izquierda a derecha, motivo por el cual el logotipo se sitúa casi siempre en la esquina superior izquierda. Si el color de nuestro logo es parecido al que vamos a dar al fondo de la página podemos crear un entorno alrededor del mismo que permita su correcta visión, lo que se suele conseguir situando una banda en la zona superior de la página, con un color de fondo diferente al del cuerpo de la misma y tal que el logo destaque adecuadamente sobre él.

 

También es normal situar en esta zona, a la derecha del logo, un mensaje claro y directo sobre la identidad y contenido de la página.

 

El menú de navegación es tal vez el elemento más interactivo de una página, facilitando al visitante una rápida navegación por todo el contenido del sitio web. Sus enlaces deben aunar el ser fácilmente visibles con el no ser demasiado impactantes, ya que no deben quitarle importancia ni al cabecero ni al texto del cuerpo.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Podemos crear para esta zona una banda vertical de un color diferente al del cuerpo, que puede ser igual al del cabecero o no. Sus enlaces pueden fundirse un poco con el fondo, dando así una sensación de continuidad. Muchos diseñadores se basan el los menús de imágenes para conseguir esto, pues les permiten tener un mayor control sobre el resultado final. En contrapartida, tardarán más en cargar.

 

Una buena solución es el uso de textos o imágenes que inicialmente no destacan demasiado sobre el fondo, pero que al situar el cursor sobre ellas se iluminan o cambian de color, produciéndose un efecto positivo con ello.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

También es corriente usar la parte baja del dintel para insertar en ella el menú de navegación. En este caso, su color no debe destacar en exceso sobre el del dintel, debiendo buscar siempre la plena integración visual entre ambos.

 

Por último, el pie de página es el elemento menos importante de la página, de tal forma que muchos autores ni siquiera lo consideran. Caso de usarse, no conviene que su color cambie respecto al del fondo del cuerpo, y si lo hace debe ser muy ligeramente, ya que si no podemos distraer la atención del usuario y crear un cuerpo de página encajonado.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

En el pie de página se suelen colocar enlaces de tipo terciario, enlaces de correo o accesos a servicios secundarios que proporcione nuestro sitio web.

 

Fuente: desarrolloweb.com

[NeoxSys]

Elección de la paleta para un sitio web

 

Es necesario escoger colores acordes con los que lleva el logotipo de la página. En este capítulo vamos a ver relaciones posibles para conseguir la funcionalidad esperada.

Por

This is the hidden content, please

• Sign In
• or
• Sign Up

 

A la hora construir una página lo primero que tenemos que tener claro es la gama de colores que vamos a emplear en sus distintas partes, y para ello debemos comenzar siempre con seleccionar un color o colores base, que será el que de un espíritu propio a nuestro sitio.

 

Es importante la elección de esta gama, que, por regla general, será conveniente mantener en todas las páginas del sitio, logrando con ello establecer una identidad propia y una continuidad entre todas las páginas que lo forman.

 

Si tenemos elegido o impuesto un logotipo, sus colores van a ser los que marquen la guía para el resto de la página, trabajando en las diferentes partes de la página con los degradados claros y oscuros de estos colores base.

 

De ser necesaria la introducción de otros colores (uno o dos), tendremos que elegir estos de forma que sean equilibrados con los del logotipo y trabajen juntos en buena armonía.

 

Es conveniente que nos basemos en una de las gamas de colores estudiadas en el capítulo anterior (monocromáticas, análogos, tríadas, etc.), sobre todo si no tenemos gran experiencia en el diseño con colores, y que apliquemos los conceptos ya estudiados (jerarquía visual, escala, contrastes, etc.).

 

Como ejemplos, podemos considerar las siguientes paletas genéricas:

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Además, podemos seguir una serie de reglas generales que nos orientarán:

 

- Los colores primarios, puros, brillantes, son demasiado comunes, por lo que dan muy poca información al ojo. Por esto no conviene basarse nunca en ellos para construir nuestras páginas.

 

- El color de los enlaces conviene que sea el azul estándar del navegador o al menos permanecer subrayados y con un color bien diferenciado de los del resto de elementos textuales de la página.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Páginas destinadas a un público general deben estar basadas en combinaciones blanco-negro- color logotipo, en colores más bien neutros, que puedan gustar a la mayoría, como colores secundarios o terciarios en tonos pastel, o en una bien estudiada gama de grises. Es fundamental en estas páginas dar a las páginas la identidad corporativa de la empresa u organización que representan.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Páginas orientadas a un público joven pueden adoptar colores vivos, primarios, con altos contrastes entre fondo y contenido, o bien con fondos oscuros y textos claros, con la inclusión de pequeñas animaciones en Flash de tonos vistosos.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Páginas destinadas a un público adulto deben estar diseñadas con colores serios, elegantes, fríos, sin altos contrastes de tono, en colores neutros, incluso tirando a grises. Siempre podemos recurrir en este caso a el típico estándar de fondo blanco y letras negras o gris oscuro.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Páginas de empresa o de instituciones deben estar diseñadas de acuerdo con los colores corporativos de la misma, incluyendo siempre el logotipo.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Páginas divulgativas, como manuales y artículos, deben presentar el texto de forma que destaque adecuadamente sobre el fondo, sin usar colores chillones que cansen la vista, ya que el objetivo fundamental de estas páginas es ser leídas. Consejo: fondo claro y letras oscuras, que destaquen muy bien.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Páginas exóticas y a la vez elegantes se pueden obtener con fondo negro o color muy oscuro y letras y/o motivos dorados, blancos o púrpuras-rojos.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

- Páginas destinadas a ser impresas por el usuario final no deben emplear colores oscuros como fondo, ya que obligaría a dar colores claros a los textos para que se pudieran visualizar. Si se hace así y el usuario no tiene activada la opción de imprimir los colores de fondo, no verá nada en la página impresa, y si la tiene activada, gastará mucha tinta, obteniendo de todas formas un mal resultado. Consejo: fondos blancos o muy claros, con textos oscuros, o versión especial para impresión con estos colores.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Estas consideraciones generales pueden ayudarnos a manejar correctamente los colores en nuestras páginas web. Pero, como siempre, la practica es lo que manda, y afortunadamente podemos navegar y navegar por Internet, visualizando páginas del tipo concreto que queremos diseñar para aprender y ver cómo han resuelto el diseño unos y otros autores.

 

Fuente: desarrolloweb.com

[NeoxSys]

Herramientas básicas para trabajar con colores

 

Existe una gran variedad de herramientas que nos permiten manipular las características de los colores para conseguir los que necesitemos. Abordamos una amplia lista de programas en este capítulo.

Por

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Existen en el mercado multitud de aplicaciones gráficas, tanto para trabajar con gráficos vectoriales y animaciones como para retoque de imágenes, algunas de las cuales estudiaremos de forma general al final de este curso de Diseño Gráfico para la Web.

 

Pero hay también otras que, a pesar de su poco precio y tamaño (algunas son gratuitas y ocupan muy pocos Kb), son muy útiles para el trabajo diario con colores en un ordenador, e imprescindibles para un diseñador web.

 

Entre ellas destacan por sus funcionalidades EyeDropper y 1 st QuickRes, de las cuales vamos a hablar un poco.

 

EyeDropper

 

EyeDropper es básicamente un capturador de colores pantalla, capaz de obtener el código de un punto dado en diferentes modelos de color. Además, permite también capturar una zona de pantalla, copiándola en el portapapeles, con lo que queda disponible para su uso en otras aplicaciones gráficas.

 

Es propiedad de la empresa Inetia, y podéis descargarlo en

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Es de fácil descarga e instalación, y tras la misma aparecerá un pequeño icono del programa en la barra de tareas, junto al reloj del sistema.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Para lanzar la aplicación basta hacer doble click sobre este icono, con lo que aparecerá una ventana propia junto al puntero del ratón, que acompaña a éste en su movimiento por la pantalla. Esta ventana, se cierra haciendo de nuevo doble click sobre el icono.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

En dicha ventana aparecerá aumentada la zona situada alrededor del puntero, así como una cruz que indica el punto exacto sobre el que se encuentra, mostrando el color del mismo. En la parte derecha aparecen los códigos del color, tanto en formato RGB hexadecimal y decimal como en formato CMYK, y las coordenadas del punto respecto la esquina superior izquierda de la pantalla activa del monitor.

 

Si pulsamos con el botón derecho del ratón sobre el icono de EyeDropper aparecerá un menú emergente con la opción “Properties”, que nos llevará a una ventana de configuración con una serie de pestañas, entre las que destacan las siguientes:

 

- Preferences: Define las propiedades generales de la aplicación.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

En esta ventana podemos fijar en qué modelo de color deseamos que aparezcan los códigos, si deben aparecer las coordenadas del punto y si la aplicación debe inicializarse cuando arranquemos el sistema operativo (aconsejable).

 

- Clipboard: Configura el método de captura del código del color en el portapapeles.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

La opción más aconsejable para el diseñador web es definir la captura en el modelo RGB hexadecimal, usando para ello las combinaciones estándar del sistema, que en el caso de Windows son las teclas CTRL+C para copiar el código en el portapapeles y CTRL+V para pegarlo en otras aplicación.

 

- Screen Capture: Establece la tecla que activa la captura de una zona de la pantalla como una imagen, así como el método de finalización de la misma.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Como tecla de activación es conveniente escoger alguna que no se use normalmente, como una de las teclas superiores F. En cuanto al método de finalización, lo normal es establecer el evento up del botón izquierdo del ratón, habitual en los programas de captura.

 

Si definimos como tecla de captura F2, por ejemplo, para iniciar la capturar pulsaremos dicha tecla, luego el botón izquierdo del ratón y, sin soltarlo, definimos un rectángulo en pantalla, que será la zona capturada. Para finalizar, soltamos el botón del ratón, quedando la imagen capturada en el portapapeles, lista para ser pegada en cualquier otra aplicación, gráfica o no (podemos pegarla en cualquier aplicación de Office, como Word o Power Point).

 

- Convert Colors: Define el tipo de paleta en que queremos capturar el color.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Sus posibles valores son Normal (aconsejado), que utiliza la profundidad de color activa en nuestro ordenador, Grayscale, que captura el color en paleta de grises, y WebSafe, que lo aproxima al color más cercano en la paleta web segura de 256 colores.

 

Como veis, EyeDropper es un programa muy útil, imprescindible para el diseñador, que con un poco de práctica facilita espectacularmente el trabajo con colores.

 

1 st QuickRes

 

En su trabajo diario, el diseñador web debe verificar cómo se visualizan las páginas que está creando a diferentes resoluciones y profundidades de color. Los sistemas operativos ofrecen un panel de configuración propio para estas tareas, pero acceder constantemente al mismo nos hace perder mucho tiempo.

 

Propiedad de la empresa GreenParrots, 1 st QuickRes es una pequeña aplicación que nos ayuda a manejar las propiedades de nuestro monitor de forma rápida y cómoda. Podéis descargarla desde la dirección

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Una vez instalada, la aplicación se lanza desde un icono situado en la barra de tareas, junto al reloj del sistema, pulsando sobre el mismo con el botón derecho del ratón.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Al hacerlo, aparece la ventana de la aplicación mostrando diferentes combinaciones resolución-profundidad de color. Basta entonces pulsar sobre una de ellas para que la configuración de nuestro monitor cambie.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

La aplicación también permite cambiar el fondo de pantalla, el salvapantallas, la apariencia visual del sistema operativo y la tasa de refresco del monitor.

 

Otra de las opciones presentes en la ventana de la aplicación es “Options”, que nos va a permitir definir atajos de teclado para lanzar la ventana o para cambiar rápidamente la resolución de pantalla. Conviene que elijamos para ello algunas de las teclas que no se utilizan normalmente, como las del grupo F presentes en la parte superior del teclado.

 

Un regalito en Flash

 

Para finalizar, la empresa Mundidesign nos ofrece una pequeña animación Flash que nos facilita la composición con colores, al permitirnos visualizar el efecto de diferentes combinaciones de color.

En la esquina inferior derecha tenéis tres opciones de trabajo: combinación de tres colores en vertical, combinación de tres colores yuxtapuestos y combinación de colores en una interfase web. Para definir los colores de las diferentes partes, basta con arrastrarlos desde la paleta izquierda hasta la zona elegida.

 

La versión online de esta animación está disponible en la dirección:

 

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Donde encontrareis también otras animaciones sobre el tema, incluyendo una muy buena sobre los principios generales del diseño gráfico. Muy recomendable.

 

Fuente: desarrolloweb.com