Con el propósito de adaptar visualmente gráficos
con el resto de la página web,
modificaremos el fondo de una imagen en un proyecto para internet, según las
necesidades del usuario.
Algunas imágenes de páginas,
disponibles en internet, resaltan por su incongruencia con el resto del
contenido, lo cual es causa de inconformidad en el usuario. A fin de evitar
esta situación, realizaremos un procedimiento para ver la diferencia entre
gráficos con fondo normal y con fondo transparente.
Cuando entramos en la página web de la universidad, visualizamos cómo
las imágenes se encuentran diseñadas de una forma armónica, para dar vistosidad
a los contenidos. Al aplicar esto a todo proyecto web es posible favorecer el ingreso recurrente de los usuarios a un
determinado proyecto de internet.
El siguiente código básico de HTML
se encuentra enlazado al documento CSS, con la instrucción creada en la
cabecera:
- Agregamos,
en el documento HTML, la etiqueta de imagen con sus atributos correspondientes.
- Añadimos
el selector con la etiqueta body en
el documento CSS.
- Declaramos
el fondo del cuerpo con la propiedad background,
y color azul celeste en hexadecimal, a fin de ver la diferencia fácilmente.
En la vista del usuario observamos
como, por defecto en un documento web,
una imagen forma un rectángulo con fondo blanco, perteneciente al modelo de
cajas.
061-01_1108_ilu01. Imagen con fondo diferente a la página web
La solución al fondo blanco por
defecto en las cajas CSS, es modificarlo mediante el uso de píxeles
transparentes, procedimiento posible con programas profesionales de edición; por
ejemplo, Photoshop, cuando existe la oportunidad de utilizar software con previos pagos, o también Gimp,
el cual es de libre licencia.
Para ver la diferencia con una
imagen con fondo transparente, entramos al navegador web; en este caso, Google Chrome, aunque otros también pueden
hacerlo:
- Seleccionamos
Tools, para especificar la búsqueda.
- Especificamos
píxeles mayores a 800, para una mayor nitidez.
- Buscamos
una imagen libre de derechos de autor.
- Ubicamos
una imagen con cuadros grises y blancos en el fondo, los cuales representan un
fondo transparente.
- Guardamos la
imagen en la carpeta donde se encuentra el documento HTML.
061-01_1108_ilu02. Ubicación de imagen
con fondo transparente
Al agregar la imagen descargada en
el código HTML, y una vez ejecutado el documento en el navegador web, visualizamos cómo la imagen se
muestra unida al fondo del documento, es decir, no está el rectángulo formado
por el borde de la imagen:
061-01_1108_ilu03. Vista del usuario con
el fondo transparente de una imagen
Es importante saber, cuando
aplicamos el fondo transparente en imágenes mediante un software de edición, cómo en algunos casos se distorsiona su borde.
Por tal motivo, lo ideal es crear las imágenes con el fondo igual a la página web, o ubicarlas con la mayor nitidez
posible.
Keynotes
- Por defecto en un documento web, una imagen forma un rectángulo con
fondo blanco, perteneciente al modelo de cajas.
- La solución al fondo blanco por defecto en
las cajas CSS, es modificarlo mediante el uso de píxeles transparentes,
procedimiento posible con programas profesionales de edición; por ejemplo, Photoshop,
cuando existe la oportunidad de utilizar software
con previos pagos, o también Gimp, el cual es de libre licencia.
- Es importante saber, cuando aplicamos el
fondo transparente en imágenes mediante un software
de edición, cómo en algunos casos se distorsiona su borde. Por tal motivo,
lo ideal es crear las imágenes con el fondo igual a la página web, o ubicarlas con la mayor nitidez
posible.
RetoRealiza un resumen con los beneficios de la
modificación precisa de fondo a una imagen, en un proyecto para internet, según
las necesidades del usuario.
¡Comparte el resultado de tu reto en vBox y ubica un experto del área para
solicitarle un comentario de optimización a tu resumen!
Tiempo disponible: entre 15 y 30 minutos.
CierreA través de la modificación del fondo de una imagen,
en un proyecto para internet, el usuario estará satisfecho cuando visualice las
combinaciones vistosas entre gráficos y el resto del contenido. Con el
conocimiento de adaptar cualquier tipo de imagen al texto y fondo de página web, más constante práctica y
disciplina, crearemos diseños profesionales.
