En el diseño web es muy importante el manejo de las imágenes.
Hay que considerar que su uso y tratamiento es completamente distinto de cuando se usarán para medios impresos.
Para trabajar imágenes en web es importante que éstas tengan el peso y dimensiones adecuadas.
2. UNA IMAGEN DICE MÁS QUE
MIL PALABRAS
UNA IMAGEN DICE MÁS QUE MIL PALABRAS
3. UNA IMAGEN DICE MÁS QUE MIL PALABRAS
USO DE IMÁGENES
▸ Sin duda las imágenes son cruciales en el diseño web pero
esto sólo se puede lograr si cada imagen colocada está
ahí por una razón.
▸ Deben tener un
propósito claro
4. UNA IMAGEN DICE MÁS QUE MIL PALABRAS
USO DE IMÁGENES
▸ Tener consistencia con el concepto, objetivo,
organización y estilo de la página web.
▸ Enriquecer el diseño sin desviar la atención.
▸ Ayudar al usuario a ubicar contenido importante en la
página.
5. UNA IMAGEN DICE MÁS QUE MIL PALABRAS
USO DE IMÁGENES
Evitar:
▸ Usar imágenes que no relación
▸ Usar demasiadas imágenes que impliquen un mayor
tiempo de carga de la página
6. EN LA CONSTRUCCIÓN DE UN SITIO WEB USANDO HTML Y CSS
USO DE IMÁGENES
Recomendaciones:
▸ Optimizar las imágenes.
▸ Proporcionar un texto alterno que indique el contenido de
la imagen.
▸ Evitar sustituir texto por imágenes
12. DISEÑO WEB RESPONSIVE
TENDENCIAS EN EL USO DE IMÁGENES
▸ Imágenes responsivas
▸ Uso de zonas “Hero”
▸ Uso de imágenes como fondo de pantalla “Background
image”
19. CREATIVE COMMONS
¿QUÉ ES CC?
▸ Creative Commons es una organización sin fines de lucro que permite el
intercambio y uso de la creatividad y el conocimiento a través de herramientas
legales gratuitos.
▸ Nuestras licencias de derechos de autor además de fáciles de utilizar, de
manera gratuita proporcionan una manera sencilla y estandarizada para dar el
permiso para compartir y utilizar su trabajo creativo en condiciones de tu
elección. Las licencias CC permiten cambiar fácilmente los plazos del copyright
del incumplimiento de “todos los derechos reservados” a “algunos derechos
reservados”.
▸ Las licencias Creative Commons no son una alternativa al copyright.
▸ Trabajan junto a los derechos de autor y le permiten modificar los términos de
los derechos de autor que mejor se adapte a sus necesidades.
http://www.creativecommons.mx/
20. CREATIVE COMMONS
¿CÓMO FUNCIONA CC?
▸ Es el sistema del derecho de autor que promueve la
libertad creativa que plantea un esquema en el que no hay
que pedir permiso para usar las obras.
▸ ¡Porque el permiso ya ha sido otorgado!
http://www.creativecommons.mx/
21. CREATIVE COMMONS
¿CUÁNDO DEBO DE UTILIZAR LAS LICENCIAS CC?
▸ Si deseas dar a la gente el derecho a compartir, usar, e
incluso construir sobre una obra que has creado, debes
considerar publicarlo bajo una licencia Creative Commons.
▸ CC le da la flexibilidad (por ejemplo, puedes prohibir o
permitir únicamente los usos comerciales) y protege a las
personas que utilizan tu trabajo, por lo que no tienes que
preocuparse acerca de la infracción de derechos de autor,
siempre y cuando cumplan con las condiciones que tiene
especificado.
http://www.creativecommons.mx/
24. CONCEPTOS BÁSICOS
PIXEL
▸ El píxel es la unidad mínima de visualización de una
imagen digital.
▸ Si aplicamos el zoom sobre ella observaremos que está
formada por una parrilla de puntos o pixeles.
▸ Las cámaras
digitales y los
escáneres capturan
las imágenes en
forma de cuadrícula
de píxeles.
25. CONCEPTOS BÁSICOS
RESOLUCIÓN DE IMAGEN
▸ Es el grado de detalle o calidad de una imagen digital ya sea
escaneada, fotografiada o impresa.
▸ Este valor se expresa en ppp (píxeles por pulgada) o en inglés dpi
(dots per inch).
▸ Cuantos más píxeles contenga una imagen por pulgada lineal,
mayor calidad tendrá.
▸ La resolución de un monitor se refiere al número de píxeles por
pulgada que es capaz de mostrar.
▸ La resolución de una pantalla es de 72 ppp.
26. CONCEPTOS BÁSICOS
RESOLUCIÓN DE IMAGEN
▸ En una impresora se habla del número de puntos por
pulgada que puede imprimir: 600, 1200, etc.
▸ Las cámaras digitales prestan una calidad que se expresa
en MegaPíxels. Así por ejemplo una cámara de 8 MP es
aquella capaz de tomar una fotografía con 8 millones de
píxeles.
28. ¿Te has preguntado cuál es la diferencia entre un archivo JPEG, GIF o PNG?
FORMATOS DE IMAGEN
Como diseñador - y en especial como diseñador web - es
importante saber la diferencia entre los diferentes formatos
de imagen y saber cómo usarlos en cada situación.
30. GRAPHICS INTERCHANGE FORMAT
FORMATO GIF
▸ Diseñado específicamente para comprimir imágenes digitales.
▸ Reduce la paleta de colores a 256 colores como máximo
(profundidad de color de 8 bits).
▸ Admite gamas de menor número de colores y esto permite
optimizar el tamaño del archivo que contiene la imagen.
▸ No es recomendable para fotografías de cierta calidad ni
originales ya que el color real o verdadero utiliza una paleta
de más de 256 colores.
31. GRAPHICS INTERCHANGE FORMAT
FORMATO GIF
▸ Los archivos GIF son reconocidos por los llamados GIFs
animados.
▸ Cuando se combinan varias imágenes mostrándose
consecutivamente pueden crearse pequeñas escenas.
▸ La compresión de este tipo de archivos es la que permite
soportar la animáción.
▸ Permite trabajar con transparencias pero únicamente al
100%
32. JOINT PHOTOGRAPHIC EXPERTS GROUP
FORMATO JPG-JPEG
▸ A diferencia del formato GIF, admite una paleta de hasta 16 millones de
colores.
▸ Es el formato más común junto con el GIF para publicar imágenes en la
web.
▸ La compresión JPEG puede suponer cierta pérdida de calidad en la
imagen. En la mayoría de los casos esta pérdida se puede asumir porque
permite reducir el tamaño del archivo y su visualización es aceptable. Es
recomendable utilizar una calidad del 60-90 % del original.
▸ Cada vez que se modifica y guarda un archivo JPEG, se puede perder
algo de su calidad si se define cierto factor de compresión.
33. JOINT PHOTOGRAPHIC EXPERTS GROUP
FORMATO JPG-JPEG
▸ Las cámaras digitales suelen almacenar directamente las
imágenes en formato JPEG con máxima calidad y sin
compresión.
▸ Es ideal para publicar fotografías en la web siempre y
cuando se configuren adecuadamente dimensiones y
compresión.
▸ Si se define un factor de compresión se pierde calidad. Por
este motivo no es recomendable para archivar originales.
34. PORTABLE NETWORK GRAPHICS
FORMATO PNG
▸ Basado en un algoritmo de compresión sin pérdida para
bitmaps no sujeto a patentes
▸ Desarrollado para solventar las deficiencias del formato
GIF
▸ Permite almacenar imágenes con una mayor profundidad
de contraste y otros importantes datos.
▸ Una de las principales características de los archivos PNG
es la capacidad de manejar transparencias
35. FORMATO RAW
FORMATO RAW
▸ Formato de archivo digital de imágenes que contiene la
totalidad de los datos de la imagen tal y como ha sido
captada por el sensor digital de la cámara fotográfica.
▸ Generalmente lleva aplicada compresión de datos sin
pérdida de información.
▸ El gran inconveniente de este formato es la falta de
estandarización: cada fabricante de cámaras usa su propia
versión del formato.
36. SCALABLE VECTOR GRAPHICS.
FORMATO SVG
▸ Especificación para describir gráficos vectoriales
bidimensionales, tanto estáticos como animados.
▸ Los gráficos SVG se construyen a partir de puntos, ángulos
y distancias.
▸ Escalable
▸ Por ser un lenguaje vectorial, SVG permite crear imágenes
complejas.
38. OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ Al crear una página web interesa que los archivos que
contienen las imágenes sean lo menos pesados posibles
para agilizar su descarga y visualización por Internet.
39. OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ El tamaño de un archivo gráfico viene determinado por las
dimensiones de la imagen, su resolución, el número de
colores y el formato (JPG, GIF, PNG).
40. OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ Crea y guarda imágenes en resolución no superior a 72
ppp. Es la resolución que se suele usar en las pantallas de
ordenador.
41. OPTIMIZACIÓN Y COMPRESIÓN
ORGANIZACIÓN Y COMPRESIÓN
▸ Conviene utilizar un programa de edición gráfica para
definir las dimensiones concretas de la imagen antes de
insertarla en la página web.
▸ Lo más conveniente es guardar los originales de las
imágenes sin comprimir. A partir de ellas se puede crear
una copia en formato GIF (PNG) o JPEG con las
dimensiones, resolución y paletas adecuados para
publicarlas en la web.
42. OPTIMIZACIÓN Y COMPRESIÓN
HERRAMIENTAS PARA COMPRESIÓN
▸ Además de las herramientas más conocidas como
Photoshop e Illustrator podemos encontrar herramientas
que específicamente nos ayudarán a optimizar imágenes
▸ Kraken Image Optimizer
▸ JPEG Optimizer
▸ Opti PNG