uso de imágenes en diseño web

USO DE IMÁGENES EN DISEÑO WEB

UNA IMAGEN DICE MÁS QUE MIL PALABRAS

UNA IMAGEN DICE MÁS QUE MIL PALABRAS

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

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.

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

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

TENDENCIAS

TENDENCIAS EN EL USO DE IMÁGENES

USO DE MONOCROMAS

TENDENCIAS EN EL USO DE IMÁGENES

GRÁFICOS, INFOGRAFÍAS, INFOGRAFÍAS ANIMADAS

TENDENCIAS EN EL USO DE IMÁGENES

HIPERREALIDAD

TENDENCIAS EN EL USO DE IMÁGENES

IMÁGENES EN 360

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”

HERO IMAGE

IMÁGENES RESPONSIVAS

TENDENCIAS EN EL USO DE IMÁGENES

MENOS USO DE IMÁGENES DE STOCK Y MÁS INTEGRACIÓN DE IMÁGENES DE PERSONAS Y SITUACIONES “REALES”

BANCOS DE IMÁGENES

BANCOS DE IMÁGENES

▸ Shutter stock

▸ Bigstock

▸ Adobe Stock

▸ Dreamstime

▸ Pexels

▸ Pic Jumbo

20 BANCOS DE IMÁGENES GRATIS DE GRAN CALIDAD Y ALTA RESOLUCIÓN

BANCOS DE IMÁGENES

▸ #11-. Super Famous

▸ #12.- Every Stock Photos

▸ #13.- Flickr

▸ #14.- Foter

▸ #15.-Morgue File

▸ #16.- Photogen

▸ #17.- Picjumbo

▸ #18.- Pixabay

▸ #19.- Stockvault

▸ #20.- Death to the Stock Photo

▸ #1.- Designer Pics

▸ #2.- Foddies Feed

▸ #3.- New Old Stock

▸ #4.- Unplash

▸ #5.- Little Visual

▸ #6.- Gratisography

▸ #7.- Picography

▸ #8.- Public Domain Archive

▸ #9.- Startup Stock Photos

▸ #10.- Pexels

CREATIVE COMMONS

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/

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/

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/

CREATIVE COMMONS

HTTPS://SEARCH.CREATIVECOMMONS.ORG/

CONCEPTOS BÁSICOS

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.

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.

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.

FORMATOS DE IMAGEN

¿Te has preguntado cuál es la diferencia entre un archivo JPEG, GIF o PNG?

FORMATOS DE IMAGENComo 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.

FORMATOS DE IMAGEN

FORMATOS DE IMAGEN

▸ TIFF

▸ BMP

▸ RAW

GIF

JPG

PNG

SVG

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.

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%

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.

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.

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

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.

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.

OPTIMIZACIÓN Y COMPRESIÓN DE IMÁGENES PARA WEB

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.

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).

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.

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.

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