100 Días de Código en Python — Día 85: Proyecto de portafolio — Aplicación de escritorio para agregar marcas de agua

📝 Contenido original del curso#

Usando lo que aprendiste de Tkinter, crea una aplicación de escritorio con interfaz gráfica (GUI) en la que puedas cargar una imagen y usar Python para agregarle una marca de agua (un logo o un texto).

Normalmente tendrías que usar un programa de edición como Photoshop; tu programa lo hará automáticamente.

Caso de uso: quieres empezar a publicar tus fotos en Instagram, pero quieres que todas lleven tu sitio web. Con tu software puedes agregar tu sitio o logo automáticamente a cualquier imagen. Un servicio en línea parecido es watermarkly.com.

Quizá necesites: la librería Pillow (pypi.org/project/Pillow), la documentación de tkinter (docs.python.org) "y algo de Google".

Pregunta de la tarea — Momento de reflexión: cómo abordaste el proyecto; qué fue difícil y qué fácil; cómo mejorarías; tu mayor aprendizaje; qué harías distinto.

Prerequisitos: Tkinter: ventanas, botones, etiquetas, entradas y grid (Días 27–29); funciones y parámetros (Días 8 y 10); manejo de archivos y rutas (Día 24); excepciones (Día 30); instalar paquetes con pip (Día 15).

🔍 Antes de programar#

Dos capas separadas: lógica e interfaz#

Un error típico es mezclar todo dentro de la función de un botón. Separa:

marcas.py (lógica, sin Tkinter)          app.py (interfaz)
┌───────────────────────────────┐        ┌──────────────────────────┐
│ agregar_marca_texto(...)      │ ◄───── │ botón "Aplicar"          │
│ agregar_logo(...)             │        │ botones "Abrir"/"Guardar"│
│ se prueba sin abrir ventanas  │        │ vista previa             │
└───────────────────────────────┘        └──────────────────────────┘

Ventaja: puedes probar marcas.py con assert y, en el futuro, reutilizarlo en una página web (Día 92) o en un script que procese una carpeta entera.

🎯 Objetivo de aprendizaje#

Explicar qué es el canal alfa y por qué la marca de agua se dibuja en una capa aparte.

📖 Explicación conceptual#

Una imagen digital es una cuadrícula de píxeles. Cada píxel guarda números según el modo:

Una marca de agua "semitransparente" es un texto con alfa intermedio (por ejemplo, 128). Para que la transparencia se mezcle bien con la foto:

1. Convertir la foto a RGBA.
2. Crear una capa del mismo tamaño, totalmente transparente.
3. Dibujar el texto en esa capa.
4. Componer ambas capas con Image.alpha_composite.

Es la misma idea de las capas de un editor de fotos.

Coordenadas: en Pillow (como en Tkinter y en turtle con otro origen), el punto (0, 0) es la esquina superior izquierda; x crece hacia la derecha y y hacia abajo.

🔎 Ejemplo explicado: texto en la esquina inferior derecha#

from PIL import Image, ImageDraw, ImageFont

def agregar_marca_texto(ruta_entrada, ruta_salida, texto, opacidad=128):
    with Image.open(ruta_entrada) as original:
        imagen = original.convert("RGBA")
    capa = Image.new("RGBA", imagen.size, (255, 255, 255, 0))
    dibujo = ImageDraw.Draw(capa)

    tamano = max(12, imagen.width // 20)
    try:
        fuente = ImageFont.truetype("arial.ttf", tamano)
    except OSError:
        fuente = ImageFont.load_default(size=tamano)

    izquierda, arriba, derecha, abajo = dibujo.textbbox((0, 0), texto, font=fuente)
    ancho, alto = derecha - izquierda, abajo - arriba
    margen = tamano // 2
    posicion = (imagen.width - ancho - margen, imagen.height - alto - margen)

    dibujo.text(posicion, texto, font=fuente, fill=(255, 255, 255, opacidad))
    resultado = Image.alpha_composite(imagen, capa)
    resultado.convert("RGB").save(ruta_salida, "JPEG", quality=95)

Qué hace cada parte:

• with Image.open(...) abre el archivo y lo cierra al terminar (Día 24).
• Image.new("RGBA", imagen.size, (255, 255, 255, 0)): capa del mismo tamaño, blanca pero con alfa 0 (invisible).
• tamano = imagen.width // 20: el texto se adapta a la imagen. Con un tamaño fijo, en una foto de 4000 px la marca sería diminuta y en una de 300 px, gigante.
• ImageFont.truetype("arial.ttf", ...) busca la fuente Arial (existe en Windows). Si no la encuentra (Linux, macOS), load_default(size=...) usa la fuente incluida en Pillow. El try/except evita que el programa se cierre (Día 30).
• textbbox((0, 0), texto, font=fuente) devuelve la "caja" que ocupa el texto: con ella se calcula dónde ubicarlo para que no se salga.
• alpha_composite mezcla la foto y la capa respetando la transparencia.
• .convert("RGB") antes de guardar como JPEG: el JPEG no acepta alfa.

Tu turno: el logo#

La idea para un logo PNG con transparencia es parecida (verificada): abrir el logo en RGBA, redimensionarlo proporcionalmente (por ejemplo, al 20 % del ancho de la foto) con logo.resize((ancho, alto), Image.Resampling.LANCZOS) y pegarlo con imagen.paste(logo, posicion, logo). El tercer argumento (la máscara) hace que las partes transparentes del logo no tapen la foto.

Pregunta: si el logo mide 200 × 100 y quieres que tenga 160 px de ancho, ¿qué alto debe tener para no deformarse?

⚠️ Errores frecuentes#

Problema#

Construir una aplicación de escritorio que agregue una marca de agua (texto y/o logo) a una imagen.

Contexto#

El club de fotografía del colegio publica las fotos de los eventos en su cuenta y quiere que todas lleven su nombre, sin tener que editarlas una por una.

Objetivo#

Una aplicación Tkinter que abra una imagen, muestre una vista previa, aplique una marca configurable y guarde una copia.

Requisitos funcionales#

1. Abrir una imagen JPG o PNG con un diálogo de archivos.
2. Escribir el texto de la marca y aplicarlo; ver el resultado en la vista previa.
3. Guardar el resultado como archivo nuevo.
4. Mostrar mensajes claros si algo falla (archivo no válido, nada que guardar).

Restricciones técnicas#

• Lógica de imágenes en un módulo separado de la interfaz (sección 2).
• La marca debe escalar con el tamaño de la imagen.
• Nunca sobrescribir la imagen original sin preguntar.

Planificación#

1. Comprender el caso de uso (prueba watermarkly.com o un editor). 2. Entradas: imagen, texto/logo, opciones. 3. Procesos: abrir → componer → mostrar → guardar. 4. Salidas: la vista previa y el archivo. 5. Dividir en lógica e interfaz. 6. Bocetar la ventana. 7. Implementar por versiones. 8. Probar. 9. Corregir. 10. Mejorar.

Construcción paso a paso#

• Versión 1 — Lógica en consola: marcas.py con agregar_marca_texto; pruébala con una imagen fija, sin ventanas.
• Versión 2 — Ventana y vista previa: abrir una imagen y mostrar su miniatura.
• Versión 3 — Aplicar texto: campo de texto y botón "Aplicar" que actualiza la vista previa.
• Versión 4 — Guardar: "Guardar como" con el formato adecuado.
• Versión 5 — Opciones: posición (menú con esquinas y centro), opacidad (tk.Scale), color.
• Versión final — Logo y pulido: agregar logo PNG, mensajes de error, README.md con capturas antes/después, diario.

Pruebas#

Prueba automática de la lógica (sin ventanas):

from PIL import Image
from marcas import agregar_marca_texto

Image.new("RGB", (800, 600), (30, 90, 160)).save("prueba.jpg")
agregar_marca_texto("prueba.jpg", "prueba_marca.jpg", "@club_foto")
with Image.open("prueba_marca.jpg") as resultado:
    assert resultado.size == (800, 600)
    assert resultado.mode == "RGB"

🧪 Prueba y depuración#

def aplicar():
    imagen = Image.open(ruta_actual)
    dibujo = ImageDraw.Draw(imagen)
    dibujo.text((10, 10), entrada.get(), fill=(255, 255, 255, 100))
    imagen = imagen.resize((500, 500), Image.ANTIALIAS)
    foto = ImageTk.PhotoImage(imagen)
    vista.config(image=foto)
    imagen.save(ruta_actual)

Encuentra cinco problemas: el alfa no tiene efecto al dibujar directo sobre una imagen RGB (hace falta la capa y alpha_composite); ANTIALIAS ya no existe; resize((500, 500)) deforma la imagen (mejor thumbnail sobre una copia); no se guarda la referencia a foto; y se sobrescribe el original (¡con la versión reducida!).

⭐ Extensión del proyecto#

• 🟢 Reto 1 — Aplicación: agrega una sombra al texto para que se lea sobre fondos claros y oscuros.
• 🟡 Reto 2 — Ampliación: marca de agua en mosaico (el texto repetido en diagonal por toda la imagen); pista: rota la capa con capa.rotate(...).
• 🟠 Reto 3 — Desafío: procesamiento por lotes: elegir una carpeta (askdirectory) y marcar todas sus imágenes, guardándolas en una subcarpeta con_marca/ (Día 24: pathlib). Muestra el progreso.
• 🔴 Reto 4 — Pensamiento computacional: diseña una forma de elegir automáticamente el color de la marca (blanco o negro) según el brillo de la zona donde irá. ¿Cómo mides el brillo de una región? (Pista: imagen.crop(...) y el promedio de sus píxeles en modo L.) Prueba tu regla con 5 fotos distintas.

Situación#

Para la feria de ciencia del colegio se necesitan carnés para los expositores: una plantilla con el logo de la feria, el nombre del expositor, su proyecto y su mesa.

Requisitos#

1. Leer los datos desde un CSV (nombre, proyecto, mesa) con csv o pandas (Día 25).
2. Generar una imagen PNG por persona sobre una plantilla, centrando el texto (pista: textbbox).
3. Una interfaz Tkinter para elegir la plantilla y el CSV y ver la vista previa del primer carné.

Decisiones que debes tomar (y justificar)#

• ¿Qué pasa con un nombre muy largo? ¿Reduces la fuente, lo cortas o lo divides en dos líneas?
• ¿Cómo nombras los archivos para que no se repitan si hay dos personas con el mismo nombre?

Casos de prueba#

• Un nombre de 40 caracteres cabe en el carné.
• Nombres con tildes y "ñ" se ven bien (la fuente debe tener esos caracteres).
• Una fila del CSV sin mesa se reporta en lugar de generar un carné incompleto.

🏫 Usa datos ficticios para las pruebas; los datos reales de estudiantes solo con autorización.

Conceptuales#

1. ¿Qué es el canal alfa? ¿Por qué el JPEG no sirve para guardar transparencia?
2. ¿Por qué conviene separar la lógica de las imágenes de la interfaz?
3. ¿Qué diferencia hay entre resize y thumbnail?
4. ¿Por qué hay que guardar una referencia a PhotoImage en Tkinter?

Análisis de código#

tamano = max(12, imagen.width // 20)

¿Qué tamaño de letra resulta para imágenes de 2000, 400 y 100 px de ancho? ¿Para qué sirve max?

Predicción#

Una imagen de 1000 × 500 se procesa con thumbnail((500, 500)). ¿Qué tamaño queda? ¿Y con resize((500, 500))?

Depuración#

"Mi marca debería verse semitransparente, pero se ve totalmente blanca y opaca." ¿Qué paso de la sección 3 falta probablemente?

Modificación#

Cambia agregar_marca_texto para que reciba un parámetro esquina ("sup_izq", "sup_der", "inf_izq", "inf_der", "centro") y calcule la posición según él.

Creación#

Escribe nombre_salida(ruta) que reciba "fotos/playa.png" y devuelva "fotos/playa_marca.png" (pista: pathlib.Path, atributos .stem y .suffix).