Advertisement
  1. Web Design
  2. Kids

Diseño Web para Niños: Imágenes

Scroll to top
Read Time: 6 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS Layout
Web Design for Kids: Design Basics

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

¡Bienvenidos 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 Tuts+Town, pero aún no hemos hablado en detalle sobre imágenes. En ésta lección abordaremos las tipos de imágenes más comúnmente utilizados en la web y algunas técnicas de edición de imágenes.

¡No olvides formular cualquier pregunta en la sección de comentarios en la parte inferior de la página!

Imágenes en la Web

No somo totalmente extraños al uso de imágenes en la web. Nuestro sitio web Tuts+ Town utilizó cuatro imágenes. Pudimos añadir esas imágenes en nuestro HTML y luego redimensionarlas y posicionarlas con CSS.

Hay muchas cosas en que pensar cuando se usan imágenes en la web, tales como qué formato es mejor, donde obtener las imágenes adecuadas, y cómo usarlas.

A través de ésta lección aplicaremos efectos a la siguiente imagen, un mapa de Tuts+ Town:

Mapa de Tuts+ Town

Tipos de Imágenes

Las imágenes mas comúnmente usadas en la web son JPEGs, PNGs y SVGs. Hablemos de lo que son exactamente.

JPEG

Una JPEG es una imagen con una de las siguientes extensiones de archivo: ".jpeg" o ".jpg" Éstas imágenes probablemente conformarán la mayoría de las que verás y usarás en la web.

Son fantásticas para crear un tamaño de archivo de imagen de foto más pequeño para utilizarse más fácilmente en la web o enviar por correo electrónico, por ejemplo. Sin embargo, éste tamaño de archivo menor, significa que también tendrás una imagen de menor calidad.

PNG

Una PNG es una imagen con una extensión de archivo ".png" Mientras una JPEG te dará una pequeña pérdida de calidad de imagen, una PNG no lo hará. Éstos archivos se verán tan claros y nítidos que la original, pero para mantener ésta calidad el tamaño del archivo puede ser mucho más grande que una .jpg.

PNGs son una buena elección para dibujos lineales, texto, gráficos de íconos que ya tienen un tamaño de archivo más pequeño. Es posible también tener un fondo transparente con una PNG, a diferencia de una JPEG.

SVG

Gráficos Vectoriales Redimensionables, SVG, son imágenes que pueden ser redimensionadas a tamaños grandes y pequeños sin obtener una apariencia desenfocada y pixelada, como lo harían una más tradicional JPEG o PNG. Éstas imágenes son guardadas con una extensión de archivo ".svg" y son perfectas para ilustraciones y logos de compañías.

¡Todas las imágenes utilizadas en Tuts+ Town son SVGs! Si fueramos a regresar al CSS de nuestro sitio y cambiamos la width (anchura) de una imagen a 1000px la haríamos enorme y muy clara.

La SVG está a la derecha-¡mucho más clara!

Dónde obtener Imágenes

Hay muchos lugares útiles para obtener fotos gratuitas y libres de derechos en la web.

Mientras algunas imágenes pueden no costar nada, pueden requerirnos seguir ciertas reglas, tales como mencionar el nombre del fotógrafo donde quiera que la usemos. Otras imágenes pueden ser gratis para usar solamente para proyectos personales y no pueden ser usadas para fines comerciales.

Siempre comprueba la licencia (o permisos) cuando no estés seguro, pero por ahora hablemos de un par de opciones que son gratuitas y libres de derechos.

  • Cupcake ofrece una variedad de fotografías bien hechas. Cuando encuentras una que te satisface puedes solamente hacer click en el enlace Download High Res, nombra el archivo y guárdalo en tu computadora.
  • FancyCrave es otro sitio web para fotografías completamente libres de derechos y tiene una gran cantidad de opciones. Podemos tomar éstas al dar click en el enlace Download y guardarlas al directorio de nuestro proyecto.
  • Para íconos SVG IcoMoon tiene muchas gráficas gratuitas para elegir. Una vez que resaltemos los íconos que queremos al dar click en ellos, podemos seleccionar Generate SVG... en la parte inferior izquierda y luego seleccionar Download.

Editar Imágenes

Muchos diseñadores web usan herramientas de edición de imágenes como Photoshop para realizar cambios a sus fotos antes de usarlas en un sitio web. Éstos cambios pueden ser cualquier cosa desde modificar los colores, quitar sombras, hasta recortar.

La mayoría de los sistemas operativos computacionales tendrán un programa en ellas que pueden manejar algunas tareas básicas de edición. "Vista Previa" es una gran opción si tienes una computadora Mac, que te permitirá redimensionar, recortar, y guardar imágenes en otros formatos. Para accesar a la Vista Previa podemos ejecutar una búsqueda en nuestras computadoras (¡la lupa en la parte superior derecha de tu pantalla!

En una computadora con Windows "Windows Photo Viewer" o "Paint" probablemente será el programa para imagen predeterminado que podemos usar, permitiéndonos hacer algunas alteraciones básicas.

Recortar

Cuando hablamos de recortar queremos decir remover las partes externas de una imagen.

Recortar puede ser realmente útil cuando solo hay una sección de una imagen grande que queremos usar; ¡incluso es aún posible recortar utilizando otras formas, como círculos!

Editar con CSS

Al igual que cambiar el tamaño de una imagen con CSS hay un número de efectos disponibles que incluyen filtros, tales como hacer una imagen a blanco y negro, transparente, o ajustar el nivel de brillo.

Escala de Grises

Podemos convertir imágenes a blanco y negro en nuestro CSS usando la propiedad filter.

Dentro de ésta propiedad incluímos grayscale y luego un porcentaje dentro de los paréntesis.

Aquí está un ejemplo de CSS que producirá una imagen completamente blanco y negro.

Opacidad

La opacidad se refiere a hacer algo transparente, o que permite ver a través. La propiedad opacity toma valores de .0 a 1, con .0 siendo completamente transparente (invisible) y 1 siendo no no transparente en absoluto. Todos los valores intermedios dan un diferente rango de transparencia.

Por ejemplo, si establecemos opacity: .5; en una serie de círculos en un documento CSS, el resultado se vería así:

Éste tipo de efecto en una imagen puede ser magnífico si buscamos hacer una imagen un poco menos notable en una página, para que el texto arriba de ella destaque más.

Desenfoque

También podemos hacer una imagen desenfocada usando filtros CSS. Dentro de la propiedad filter (filtro) necesitamos usar blur, seguido de un valor en pixeles dentro de paréntesis.

Mientras más alto el valor en pixeles, más desenfocada será la imagen.

Nota: Para una lista completa de filtros CSS puedes checar éste recurso. Solo da click en la pestaña CSS de cualquier demo para ver como se hace.

Conclusión

En éste curso exploramos algunos formatos de imágenes comúnmente usados en la web, así como unos cuantos efectos que pueden aplicarse a éstas imágenes. Teniendo nuestras imágenes listas para un sitio puede ser una tarea que varía de super sencillo con mínimas herramientas requeridas, hasta ediciones muy complejas que requieren de herramientas potentes.

Luego discutiremos las bases del diseño, donde hablamos de cómo usar lo que arreglamos en la página web.

¡Nos vemos por la ciudad!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.