Ejercicio Práctico

 

Fotomontaje "El Astronauta Perdido"

Lo que necesitas antes de empezar (Preparación):

  • Imagen A (El Fondo): La foto de un paisaje (un desierto, una montaña o una ciudad de noche).

  • Imagen B (El Sujeto): Una foto de un astronauta, un excursionista o tú mismo de cuerpo completo.

PASO 1: Preparar el lienzo y las capas

  1. Abre GIMP.

  2. Ve a Archivo > Abrir y selecciona la Imagen A (El Fondo). Este definirá el tamaño total de nuestro proyecto.

  3. Ahora, ve a Archivo > Abrir como capas y selecciona la Imagen B (El Sujeto).

  4. Mira tu panel de capas a la derecha: verás la Imagen B justo encima de la Imagen A.

  5. Haz doble clic sobre los nombres de las capas y renómbralas como "Fondo" y "Sujeto".

PASO 2: Ajustar el tamaño del sujeto

Si tu sujeto es demasiado grande o pequeño para el fondo:

  1. Selecciona la capa "Sujeto".

  2. Activa la herramienta Transformación Unificada (Shift + T) y haz clic sobre el sujeto.

  3. Usa las esquinas de la cuadrícula para cambiar el tamaño (mantén presionada la tecla Ctrl mientras arrastras para mantener las proporciones sin deformar a la persona).

  4. Haz clic en el centro de la cuadrícula para mover al sujeto a su posición ideal. Cuando termines, pulsa el botón Transformar o la tecla Enter.

PASO 3: El Recorte No Destructivo (Máscara de Capa)

Vamos a eliminar el fondo original del sujeto sin usar la goma de borrar.

  1. Selecciona la herramienta Rutas (B).

  2. Haz zoom (Ctrl + rueda del ratón) e ir haciendo clics seguidos alrededor del contorno de tu sujeto. Recuerda arrastrar un poco el ratón si quieres crear curvas en los hombros o cabeza.

  3. Para cerrar la ruta, mantén presionado Ctrl y haz clic en el primer punto que pusiste.

  4. En el panel izquierdo (Opciones de herramienta), haz clic en Crear selección a partir de la ruta. Verás la línea punteada parpadeando alrededor de la persona.

  5. Ve al menú superior Seleccionar > Difuminar (Feather), pon 2 píxeles y acepta. Esto suavizará el corte.

  6. En el panel de capas de la derecha, haz clic derecho sobre la capa "Sujeto" y elige Añadir máscara de capa. En la ventana flotante, selecciona Selección y dale a Añadir.

¡Listo! El fondo original del sujeto habrá desaparecido y ahora lo verás integrado en el nuevo paisaje.

PASO 4: Unificar el color y la iluminación (El truco profesional)

Normalmente, el sujeto y el fondo tienen luces de colores diferentes (por ejemplo, el fondo es un atardecer naranja y el sujeto se fotografió con luz blanca de estudio). Vamos a arreglarlo.

  1. Selecciona la miniatura de la imagen de la capa "Sujeto" (asegúrate de hacer clic en la foto, no en el cuadro blanco de la máscara).

  2. Ve al menú superior Colores > Curvas.

  3. En la parte superior de la ventana de Curvas, verás un menú que dice Canal: Valor. Haz clic ahí y selecciona el canal del color que predomine en tu fondo. (Ejemplo: Si tu fondo es un atardecer, elige el canal Rojo).

  4. Haz clic en el centro de la línea diagonal y arrástrala ligeramente hacia arriba para inyectar ese color en el sujeto, o hacia abajo para restarlo. Verás cómo el sujeto empieza a tomar la tonalidad del fondo.

  5. Cambia el canal a Valor (que controla la luz general). Haz una ligera "Curva en S" (baja un poco las sombras en el tercio inferior y sube las luces en el superior) para que el contraste del sujeto coincida con la atmósfera del fondo. Haz clic en Aceptar.

PASO 5: Crear la Sombra Cohesionadora

Para que el sujeto no parezca que está "flotando", necesita proyectar una sombra en el suelo.

  1. Crea una capa nueva vacía (Shift + Ctrl + N), llámala "Sombra Suelo" y colócala en el panel entre la capa "Fondo" y la capa "Sujeto".

  2. Selecciona la herramienta Pincel (P). En las opciones de herramienta, elige un pincel de bordes suaves (Hardness 025 o similar).

  3. Asegúrate de que el color frontal sea el Negro.

  4. Reduce la Opacidad del pincel al 30% aproximadamente en el panel izquierdo.

  5. Pinta suavemente justo debajo de los pies o la base del sujeto. Da varias pasadas donde el cuerpo toque el suelo directamente (ahí la sombra es más oscura).

  6. Si la sombra queda muy marcada, ve al panel de capas y reduce la opacidad de la capa "Sombra Suelo" al 60% o 70% hasta que se vea natural.

PASO 6: Guardar tu obra

  1. Ve a Archivo > Guardar. Nómbralo astronauta_perdido.xcf. Este archivo guardará tus máscaras y capas por si mañana quieres mover al sujeto de lugar.

  2. Ve a Archivo > Exportar como. Nómbralo astronauta_perdido.jpg. ¡Esta es la imagen final lista para compartir en tus redes sociales!

Reto para el alumno:

Si quieres subir de nota este ejercicio, añade una capa por encima de todo el proyecto, usa la herramienta Degradado (G) con un color naranja a azul, y pon esa capa en modo de combinación Superponer (Overlay) con una opacidad del 15%. Verás cómo toda la composición se unifica por completo de forma mágica.

HERRAMIENTA EDUCATIVA

Explorador Interactivo de CSS

Aprende CSS modificando código real y viendo los resultados al instante.
Incluye conceptos clave y ejercicios.

¡Aplicado ✓
CSS editable
HTML editable
Vista previa
1
La cascada — la "C" de CSS
Cuando dos reglas contradictorias afectan al mismo elemento, gana la más específica. Si tienen igual especificidad, gana la que aparece más abajo en el archivo. Eso es la cascada.
2
El modelo de caja (Box Model)
Todo elemento HTML es una caja con 4 capas:
contenidopaddingbordermargin
Controlar estas capas es la clave para manejar espacio y tamaño.
3
Selectores: quién recibe el estilo
p → selecciona etiquetas  |  .clase → selecciona por clase  |  #id → elemento único  |  a:hover → selecciona estados interactivos.
4
Herencia
Algunas propiedades como color y font-family se heredan automáticamente de padres a hijos. Otras como border o padding no se heredan.
5
Flujo y layout
Por defecto los bloques (div, p) ocupan toda la línea; los elementos en línea (span, a) fluyen junto al texto. display: flex y display: grid dan control total sobre la distribución.
En Google Sites: ve a Insertar → Incrustar y pega el código generado.
Presiona "Cargar en editor" para ver y editar cada ejercicio antes de usarlo.
01
Tarjeta de presentación
Crea un div con nombre, descripción y color de fondo. Practica padding, border-radius y font-family.
02
Botón animado
Un botón que cambia de color con :hover y escala con transition suave. Aprende estados interactivos.
03
Galería con Flexbox
Tres tarjetas alineadas con display: flex, que se reorganizan en pantallas pequeñas con flex-wrap.
04
Tipografía expresiva
Importa fuentes de Google Fonts y practica jerarquía visual con font-size, font-weight y letter-spacing.
05
Línea de tiempo
Lista vertical con border-left y puntos decorativos con ::before. Proyecto integrador de múltiples conceptos.