This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

11. Las imagenes y el color


Este tema es quiza uno de los más importantes y subjetivos de todos los que vamos a ver en este curso, pues depende de la creatividad y los gustos del diseñador. Cuando iniciamos un proyecto nos tenemos que hacer muchas preguntas: ¿a quién va dirigida mi web?, ¿secciones más interesantes?,  ¿De que forma puedo conseguir más visitas?, ¿cual es la temática principal de la web?, etc... No solo hay que construir una estructura, sino darle forma interesante y sobre todo adaptada a nuestros visitantes.

Este tema lo voy a dividir en tres partes:

  1. Por un lado vamos a ver el color y su significado.
  2. Los tipos de archivos gráficos que podemos utilizar.
  3. La etiqueta <img>.

 

Vamos a empezar viendo los diferentes tipos de colores que tenemos:

  1. RGB o color aditivo: Este color se basa en la particularidad de que todos los colores se consiguen a partir de la mezcla o adicción de tres colores primarios (rojo,verde y azul). Los valores para cada valor oscilan de 0 a 255, por ejemplo el blanco seria. R255, G255, B255.
  2. RGBA: Con las reglas css3 se ha añadido un nuevo tipo de color. Ahora junto al RGB, también se puede utilizar el RGBA. Esta "A" es alfa. Esta nueva característica nos permiteespecificar un valor de opacidad de un color. Haciendo la vida de los desarrolladores web mucho más fácil.
  3. CMYK o color sustractivo: Los colores se generan en base a la capacidad de absorción de  las longitudes de onda del objeto que se ilumina,  Esto parece complicado, pero en resumen para que quede claro, mientras el color aditivo forma el blaco sumando los colores, este lo forma quitando colores. Sus colores básicos son (Cyan, Magenta, Yellow y Black). Este sistema se suele utilizar más en la impresión.

 

El significado del color

Dependiendo de los colores que pongamos en nuestras fotografías o fondos podemos crear una serie de sensaciones a los visitantes de nuestra web. A nadie se le ocurriria hacer una página web para una funeraria con los colores rojo y amarillo chillon. A continuación paso a mostrar una serie de familias de colores y sus connotaciones psicológicas:

  • Cálidos: Son aquellos que van de rojo al amarillo. Estas tonalidades evocan calor, pasión fuerza, agresividad y peligro.
  • Frios: Van del azul al verde. Sobre todo el azul y cuanto más saturación más se acentua esta sensación. Nos recuerdan al invierno, al hielo... Son opuestos a los cálidos y nos hacen estar más relajados y calmados.
  • Claros o pastel: Son colores pálidos que se obtienen rebajando la intensidad en el tono de los colores saturados. Por ejemplo, añadiendo blanco a un rojo puro. Suguieren ligereza, descanso, armonía, suavidad.
  • Oscuros o sucios: Suelen contener gran cantidad de negro en su composición. Provocan seriedad y tristeza. Se asocian al otoño y al invierno.
  • Brillantes: Se logra omitiendo el gris o el negro. Entre ellos se encuentra azules, rojos, amarillos y naranjas con brillo pleno. Son vívidos y atraen la atención.

 

El tipo de color que vamos a utilizar en las páginas web es el RGB o RGBA, y aunque hemos dicho que sus valores van de 0 a 255. En la práctica se suele utilizar el sistema hexadecimal. Por ejemplo el blanco sería:

255, 255, 255

FF, FF, FF ---> Sistema hexadecimal.

Y para terminar vamos a ver la profundidad del color y la resolución de las imágines.

Los píxeles son la unidad mínima de color que forma una imagen digital, y una imagen puede estar formada por miles e incluso millones de estos. A este conjunto de píxeles le llamamos mapa de bits.

La profundidad del color podemos difinirla como la cantidad de bits que necesitamos para representar el color de un píxel. En pocas palabras, la calidad de una imagen. Las más utilizadas son:

  • 1 bit: Utiliza dos colores y se denomina monocromática.
  • 2 bit: Utiliza cuatro colores.
  • 4 bits: Utiliza16 colores y se denomino VGA.
  • 8 bits: Utiliza 256 colores y se denomino SVGA
  • 16 bits: Divide los bit en 5 para el rojo, 6 para el verde y 5 para el azul. Utiliza 65.536 colores.
  • Color verddero 24 bitsa: Utiliza 8 bits para cada canal (rojo, verde, azul). Utiliza 16.777.216 colores.
  • Color verdadero 32 bits: Utiliza 8 bits para cada canal, además de otros 8 bits adicionales para un canal de transparencia.

 

Y la resolución que es el nivel de detalle con el que podemos visualizar una imagen digital. Como diseñador, el primer problema con el que nos encontramos es ver que resolución tendra nuestra página web. Se ha llegado a un acuerdo de utilizar un estandar de 1024x768, pero como siempre pasa, no todos los navegadores muestran esta resolución. Los navegadores disponen de menús, barras, etc... con lo que sus dimensiones varian:

1000 x 648 para internet explorer

1000 x 606 para mozilla firefox

1005x 675 para google chrome

En el próximo tema veremos los distintos tipos de archivos, el jpg, gif y el png. También cuando utilizar uno y cuando otro.

Task Discussion


  • robicho   May 2, 2012, 5:25 p.m.

    Hola.

    Entonces ¿Que resolucion de pagina web es la mas adecuada para diseñar una web ?

    Salu2 !!!

  • jose francisco   May 3, 2012, 6:52 a.m.
    In Reply To:   robicho   May 2, 2012, 5:25 p.m.

    Eso depende de ti y lo que te pida la pagina. Lo que recomiendan es que sea 1024*768, pero es una recomendación.

    Normalmente se le suele poner un ancho y el alto lo va adquiriendo dependiendo de los contenidos que tengamos en la pagina. Mi idea era que vieras como con una misma resolución, cada navegador te hace una interpretación individual de ella.

    Cuando estes diseñando te daras cuenta que lo que tu ves en un navegador perfectamente, lo mismo en otro no es tan bonito. Eso se debe a los motores de renderizado que utilizan los navegadores, pero bueno eso es un tema que veremos más adelante.

    En un principio yo te recomiento un ancho entre 950 y 1000 que es lo que en una resolución de 1024 te premite ver el navegador sin scroll. De echo hay un proyecto el 960 grid que te estructura todas las paginas con un ancho de 960px.

    Y por las demás resoluciones, las moviles y las tablet, no te preocupes que ya veremos como hacer que nuestra web se adapte a cada formato de forma automática, pero eso son temas más avanzados. Es lo que conocemos como responsible design.