Archivo de la etiqueta: imagen

Imágenes de fondo en CSS


Para incluir imágenes de fondo en CSS utilizaremos las propiedades background-image para indicar la ruta de la imagen, background-position para establecer la alineación vertical y horizontal de la imagen y background-repeat.

El uso de background-repeat se debe a que si la imagen es más pequeña que el elemento se repetirá por defecto, horizontal y verticalmente hasta ocupar todo el espacio disponible. Si queremos modificar este comportamiento, se puede hacer con los valores no-repeat (no se repite), repeat-x (se repite horizontalmente) y repeat-y (se repite verticalmente).

Asimismo, con la propiedad background-size especificaremos el tamaño de la imagen.

De esta forma hemos diseñado una web con imágenes de la Mezquita de Córdoba, creando tres bloques <div> de 200px de ancho y 200px de alto. Hemos asignado a cada uno de los bloques una imagen de fondo de 50×50 y un borde distinto. Además, se cumplen los siguientes requisitos:

  • En el primer bloque la imagen de fondo no se repite y está centrada tanto vertical como horizontalmente.
  • En el segundo bloque, la imagen se repetirá horizontalmente y estará situada en la parte inferior.
  • En el tercer bloque, la imagen se repetirá verticalmente y se situará a la derecha.

El resultado es el que aparece en la imagen de abajo.

act1p79

El código HTML y CSS para obtener este resultado se muestra a continuación.

htmlact1p79

cssact1p79

Anuncios

Preguntas para la prueba de multimedia


A continuación os expongo las cuestiones para preparar la prueba de multimedia:

  1. ¿Qué permite la multimedia?
  2. ¿Cómo podemos capturar una imagen de la pantalla?
  3. ¿Qué es gPaint?
  4. Define imagen vectorial.
  5. Define mapa de bits.
  6. ¿Qué es el GIMP?
  7. Escribe tres extensiones de archivos de imagen.
  8. ¿Para qué sirve la caja de herramientas de GIMP?
  9. ¿Qué es la ventana de imagen de GIMP?
  10. Cuando utilizamos GIMP trabajamos con capas. ¿En qué consiste esto?

Trabajando la imagen digital


En la unidad correspondiente a multimedia nos vamos  a centrar en la imagen. Tras una introducción sobre la imagen digital, trabajaremos con el GIMP.

En el enlace de abajo encontraréis el material para trabajar las actividades de introducción planteadas.

MATERIAL PARA TAREAS INTRODUCTORIAS

Gimp_2.4.3

Asimismo, las tareas con GIMP a realizar se encuentran alojadas en la web del Instituto Máquina-Herramienta. Más abajo tenéis los enlaces, divididos en partes.

gimp-tanda1villalba

imágenes_para_tanda1villalba

gimp-tanda2villalba

imágenes_para_tanda2villalba

gimp-tanda3villalba

imágenes_para_tanda3villalba

gimp-tanda4villalba

imágenes_para_tanda4villalba

Retoque fotográfico: GIMP


GIMP es un software libre que nos permite realizar operaciones de retoque fotográfico.

GIMP_2.8_for_Windows_screenshot

En la red podemos encontrar mucha información sobre este programa. Nosotros vamos a trabajar con los apuntes alojados en la web www.edu.xunta.es.

Como complemento a las actividades, en los enlaces de abajo encontraréis las imágenes necesarias:

imágenesGIMP1

imágenesGIMP2

imágenesGIMP3

imágenesGIMP4

Practicando con GIMP


Con el retoque fotográfico vamos a corregir o mejorar imágenes digitales. Uno de los programas que podemos utilizar para realizar el retoque es el GIMP, que además es software libre.

Vamos a realizar una práctica de retoque, eliminando las arrugas de un rostro. Esta práctica la he seleccionado de una colección de actividades del Instituto de la Máquina-Herramienta.

2000px-The_GIMP_icon_-_gnome.svg

En este enlace os podéis descargar el archivo xcf (extensión para un proyecto en GIMP) que contiene el rostro a retocar: ROSTRO A RETOCAR.