Share
Bienvenido a la séptima lección de nuestra serie Diseño web para niños, todo sobre imágenes!
Hemos agregado varias imágenes a nuestro sitio web de Tuts + Town, pero aún no hemos hablado de las imágenes en detalle. En esta lección, abordaremos los tipos de imágenes más utilizados en la web y algunas técnicas de edición de imágenes..
No olvide hacer cualquier pregunta en la sección de comentarios al final de esta página.!
No somos completamente extraños al uso de imágenes en la web. Nuestro sitio web Tuts + Town utilizó cuatro imágenes. Pudimos agregar esas imágenes en nuestro HTML y luego cambiar el tamaño y colocarlas con CSS.
Hay muchas cosas en que pensar cuando se usan imágenes en la web, por ejemplo, qué formato es mejor, dónde obtener las imágenes correctas y cómo usarlas..
A lo largo de esta lección, aplicaremos efectos a la siguiente imagen, un mapa de Tuts + Town:
Tuts + mapa de la ciudadLas imágenes más utilizadas en la web son JPEG, PNG y SVG. Vamos a hablar de lo que son exactamente.
Un JPEG es una imagen con una de las siguientes extensiones de archivo: ".jpeg" o ".jpg" Estas imágenes probablemente conformarán la mayor parte de lo que encontrará y utilizará en la web..
Son fantásticos para crear una más pequeña. foto El tamaño del archivo de imagen se puede usar más fácilmente en la web o enviar por correo electrónico, por ejemplo. Sin embargo, este tamaño de archivo inferior significa que también obtendrá una imagen de menor calidad.
Un PNG es una imagen con una extensión de archivo ".png". Mientras que un JPEG le dará una pequeña pérdida de calidad de imagen, un PNG no lo hará. Estos archivos se verán tan nítidos y nítidos como el original, pero al mantener esta calidad el tamaño del archivo puede ser mucho más grande que un .jpeg.
Los PNG son una buena opción para los dibujos lineales, texto y gráficos de iconos que ya tienen un tamaño de archivo más pequeño. También es posible tener un fondo transparente con un PNG, a diferencia de un JPEG.
Los gráficos vectoriales escalables, SVG, son imágenes que pueden redimensionarse a tamaños grandes y pequeños sin obtener todo pixelado y de aspecto borroso, como lo haría un JPEG o PNG más tradicional. Estas imágenes se guardan con una extensión de archivo ".svg" y son perfectas para ilustraciones y logotipos de empresas..
¡Todas las imágenes utilizadas en Tuts + Town son SVG! Si tuviéramos que volver al CSS para nuestro sitio y cambiar el anchura de cualquier imagen a 1000px Lo haría enorme y claro como el cristal..
SVG está a la derecha - mucho más claro!Hay muchos lugares prácticos para obtener gratis y libre de usar fotos en la web.
Si bien algunas imágenes pueden no costar nada, pueden requerir que sigamos ciertas reglas, como mencionar el nombre del fotógrafo donde sea que lo usemos. Otras imágenes pueden ser de uso gratuito solo para proyectos personales y no pueden usarse para un negocio.
Siempre asegúrese de revisar el licenciamiento (o permisos) cuando no está seguro, pero por ahora hablemos de un par de opciones que son ambos Gratis y libre de usar.
Muchos diseñadores web utilizan herramientas de edición de imágenes, como Photoshop, para realizar cambios en sus fotos antes de usarlas en un sitio web. Estos cambios pueden ser desde cambiar los colores, deshacerse de las sombras, hasta cultivo.
La mayoría de los sistemas operativos de computadoras tendrán un programa que puede administrar algunas ediciones muy básicas. "Vista previa" es una excelente opción si tiene una computadora Mac, que le permitirá cambiar el tamaño, recortar y guardar imágenes en otros formatos. Para acceder a la Vista previa, podemos realizar una búsqueda en nuestras computadoras (¡lupa en la parte superior derecha de la pantalla!) O abrir una imagen haciendo doble clic en ella, ya que es probable que esté configurado como nuestro programa predeterminado de visualización de imágenes.
En una computadora con Windows, "Windows Photo Viewer" o "Paint" probablemente serán los programas de imagen predeterminados que podamos usar, nuevamente, permitiendo algunas modificaciones básicas.
Cuando estamos hablando de cultivo Nos referimos a eliminar las partes exteriores de una imagen..
El recorte puede ser realmente útil cuando solo hay una sección de una imagen grande que deseamos utilizar; Incluso es posible que el recorte tome otras formas, como círculos.!
Además de cambiar el tamaño de una imagen con CSS, hay una serie de efectos de filtro disponibles, como hacer que una imagen sea en blanco y negro, transparente o ajustar su nivel de brillo..
Podemos convertir imágenes a blanco y negro en nuestro CSS usando el filtrar propiedad.
Dentro de esta propiedad incluimos escala de grises y luego un valor porcentual entre paréntesis (paréntesis).
Aquí hay un vistazo rápido a algunos CSS que producirán una imagen completamente en blanco y negro:
img filtro: escala de grises (100%);
La opacidad se refiere a hacer algo transparente, o transparente. los opacidad propiedad toma valores de .0 a 1, con .0 siendo completamente transparente (invisible) y 1 no ser transparente en absoluto. Todos los valores intermedios dan una fuerza diferente de transparencia..
Por ejemplo, si configuramos opacidad: .5; en una serie de círculos en un documento CSS, el resultado se vería así:
Este tipo de efecto en una imagen puede ser excelente si buscamos hacer que una imagen sea un poco menos notable en una página, de modo que el texto en la parte superior sobresalga más..
También podemos hacer una imagen borrosa usando filtros CSS. Dentro de la propiedad de filtro necesitamos usar difuminar seguido de un valor basado en píxeles entre paréntesis.
img filter: blur (5px);
Cuanto mayor sea el valor de píxel, más borrosa será una imagen..
Nota: Para obtener una lista más completa de los filtros CSS, puede consultar este recurso. Simplemente haga clic en la pestaña CSS de cualquier demostración para ver cómo se hace.
En este curso exploramos algunos formatos de imagen de uso común en la web, así como algunos efectos que se pueden aplicar a estas imágenes. Preparar nuestras imágenes para un sitio puede ser una tarea que varía desde súper sencilla con herramientas mínimas requeridas hasta ediciones bastante complejas que requieren herramientas poderosas..
A continuación vamos a discutir conceptos básicos de diseño, donde hablamos acerca de cómo usar lo que organizamos en la página web.
Te veo por la ciudad!
Accentsconagua