Edición de imágenes Digitales y Animación 2D - uv.es · {Todos (todo el lienzo) {Ninguno {Invertir {Flotante (la selección la convierte en capa flotante) {Por color {Desde ruta

1

Edición de imágenes Digitales y Animación 2D

Guillermo Guillermo ViguerasVigueras GonzálezGonzá[email protected]@uv.es

Departament d’InformàticaDepartament d’InformàticaE.T.S.EE.T.S.E

UniversitatUniversitat de de ValènciaValència

Nau dels Estudiants, Universitat de València, Campus de Burjassot. Septiembre-2010

Índice

Diseño 2DTipos de imágenesIntroducción a GimpCapasDibujadoSelecciónBorradoMáscarasFiltros y EfectosAnimación 2D

2


Diseño 2DTipos de imágenes

Sin compresiónRAW

• Comprende todos los formatos propietarios de los fabricantes de cámaras

• Contiene todo la información

TIFF• Formato sin pérdidas como

PNG• Problemas de portabilidad

por no ser standard. El TIFF guardado por un programa puede no abrirlo otro programa

• Hay navegadores web que no lo abren

BMP• Formato de Windows. No

aporta nada con respecto a PNG o TIFF. Interesante sólo para iconos para windows

Con compresiónJPG

• Perdida de info en cada edición• Soportado por todos los navegadores

webGIF

• Max 256 colores. Indexados• Permite

Transparencia (Logos)Animaciones

PNG• Misma func. que JPG o GIF• Full-color: mayor tamaño que JPG

pero sin pérdidas• Index-color: Soporta más colores que

GIF, soportado por web browsers(excepto I Explorer)

• No soporta animación. GIF es la única opción para animaciones


Diseño 2D

HistogramaGráfico que nos indica la distribución de los píxeles de una imagenPuede reflejar valores R,G,B o bien de luminosidad (negro<->blanco)Eje X: valor 0-255 (28)Eje Y: nº de pixeles con valor = X

ConceptosParámetros pixel

Tono: Valor de color del pixel (R,G,B)Saturación: si el color es intenso o difuminadoLuminosidad: si el color es más claro o más oscuro (negro<->blanco)Contraste

Hace referencia al cambio de luminosidad de los píxeles más oscuros y más claros de una imagen Explicar con imagen

3


Diseño 2D

GIMPGNU Image ManipulatorProgramPrograma Open Source(libre y gratis, bajo licencia GNU) de edición de fotografías a nivel profesional.Muy buena alternativa a otros paquetes como Photoshophttp://www.gimp.orghttp://www.gimp.org.es


Diseño 2D. GIMPInterfaz

Toolbox windowVentana de capas,canales,…Ventana de la imagenSucesivas ventanas de parámetros de operaciones que aparezcan

4


Diseño 2D. GIMP.Ventana preferencias (Archivo->Preferencias)

Configurar las características del entorno como nosotros queramos.


Diseño 2D. GIMP.

Operaciones básicasAbrir ficheroReescalado (imagen->Escalar…)Salvar ficheroRecortadoBrillo y oscuridad (capa->colores->brillo-contraste)

(capa->colores->niveles)

5


Operaciones básicasRotación (Imagen->transformar)Rotación libre

Opciones• Dirección de la rotacion (Directa/Inversa)• Vista Previa (Rejilla / Rejilla+imagen)

Enfoque (Filtros->Realzar->Enfocar)

Diseño 2D. GIMP.


Diseño 2D. GIMP.Operaciones básicas

Máscara de desenfoque (Filtros->Realzar->Máscara de desenfoque) mucho más enfoque

RadioCantidad (afecta a cuán fuerte será el enfoque aplicado, si muy alto => imagen granulada)Umbral (afecta a la suavidad de la imagen)

6


Diseño 2D. GIMP.

Operaciones básicasCorregir ojos-rojos (Capa->Colores->Tono-saturacion)

Seleccionar pupilasReducir color rojo con Tono-Saturación


GIMP. Capas

7


GIMP. Capas

¿Qué es una capa?Las operaciones

realizadas tendrán efecto sobre la capa seleccionada

Encadenamiento de capas


GIMP. CapasA tener en cuenta: Modo de la capa

Combina con la capa que esté debajo aplicando funciones matemáticas. Probar cada modo para ver lo que hace. (Lo veremos más adelante).

Botón mantener transparencia (que no se pueda pintar en las partes de la capa que sean transparentes)Iconos: ojo, cadena, vista previa, máscaras.Botones de capa

8


GIMP. Capas

Menú contextual de capaBotón derecho sobre alguna capa

‘Alpha to selection’: convertir partes no transparentes de la capa en la selección actual.Aplanar imagen: pasar todo a una capa

Probar:Dibujar con herramienta ‘lápiz’ y probar la selección y cambio tamaño capa


GIMP. Capas

Menú capa en la ventana de imagen

Nos olvidamos de momento del desplegable Máscara y Colores

9


GIMP. Capas

Menú Capa->PilaOperaciones ya conocidas


GIMP. CapasMenú capa->Transparencia (opciones más import.)

Color a alfa: hace transparente alguna componente de colorAlfa a selección (visto antes)Añadir a selecciónSustraer de selecciónInsertar con selección

10


GIMP. CapasMenú capa->Transformar

VoltearRotar Desplazar

Probar con alguna capa


GIMP. Capas.

Probar el funcionamiento del botón “Anchor layer”Ejemplo de efecto: Añadir texto a una imagen y crear (Script-fu->Sombra->Sombra base). Se creará en una nueva capa.

11


GIMP. Capas

Herramienta moverMoverá la capa en la que estemos ahora. Distintos cursores, para indicarnos si vamos a mover la capa que queremos o no.Importan el parámetro afectar:

CapaSelecciónruta


GIMP. CapasElegir color

Pinchar en el color de frente o de fondoDistintos modos de elegirlo

H (Tono)S (Saturación)V (Valor)R,G,BNotar cómo varía R,G y B al mover el slider H

También se puede elegir con la herramienta cuentagotas Al tener seleccionado una herram. de dibujado+capa selec.+tecla <ctrl> =>selec. Color de frente

Herramienta textoCambio de propiedades una vez el texto está escritoSelec. Herrm. Texto seleccionar el texto y modificar lo que queramos

12


GIMP. Dibujado


GIMP. Dibujado

Herramientas de dibujado

LapizPincelAerógrafoPintar con tintaPintar con patrones

13


GIMP. DibujadoCaracterísticas comunes

Modo de dibujadoNormalDisolver (se supone que añade ‘randomicidad’)Detrás (pinta detrás de la capa, hacerlo en capa con texto, para verlo mejor)Borrar color (busca el color de frente en capa activa y lo borra)

Normal Disolver Detrás Borr. color


GIMP. Dibujado

Cosas a tener en cuentaUsará color de frentePintará la capa que esté activa (Probar a pintar con distintas capas)Seleccionar la brocha (abrir dialogo de brochas en una nueva ventana para mayor claridad)Desvanecimiento (el trazo se desvanece -> configurar largo)Utilizar color desde el degradado (pintará degradado)También podemos crear brocha nueva y establecer parámetros

14


GIMP. Dibujado

Herramienta de borradoUtiliza la brocha que esté activa en ese momentoDos parámetros

Bordes duros (no hace caso a la componente borrosa de la brocha activa)Anti-borrado (Invierte: Transparente<->opaco)

Probar borrado con capa de color de fondo y encima una imagen

Borrado sobre capa opaca

Borrado sobre capa transparente

Anti-borrado(notar el signo

menos en cursor)


GIMP. DibujadoDibujado de figuras

Utilizando herramientas de selección y rellenando luego

ColoreadoRellenado con color de fondo o el principalBucket tool

Rell. Con color o patrónAfecta

• Todo• Colores similares

(umbral)

15


GIMP. DibujadoColoreado (cont.)

PatrónPatrón actualSe puede cambiarRellenará con patrón actualSe puede editar un patrón y modificarloLos bordes han de encajar para que cuando se repita de sensación de uniformidadCreación de patrones (lo vemos más adelante)


GIMP. DibujadoGradiente

ParámetrosModo (los veremos luego)Invertido (No comienza con el color de frente sino con el de fondo)Deslizar (sobre la distancia especificada, que porcentanje de degradado aplicará)Forma (Probar los distintos modos)‘Supermuestreo’ (mayor suavidad, pero mayor coste de cálculo)Repetir:

• Diente de sierra

• Triangular

16


GIMP. Dibujado

Parámetros (importantes)

AfectaDirecta/Inversa

Herramientas de transformación

RotarEscalarInclinar imagenCambiar perspectivaInvertir la imagen


GIMP. Dibujado

Ejemplo: Dibujar árbolTroncoRamasHojasCajaTierra caja

Una vez terminado, crear espacio con él (habitación, fachada casa,…)

17


GIMP. Selección


GIMP. Selección

Herramientas de la Toolbox

RectánguloCirculoLazoRegiones continuasRegiones por coloresTijeras inteligentes (tratan de ajustarse al borde de un objeto)Rutas

Modos de selecciónNuevaAdiciónSustracciónIntersección

Alt+arrastrar con ratón

Mueve la selección pero no el contenido

18


GIMP. Selección

Regiones por coloresEl umbral determinará que rango de color, a partir del color que indiquemos, cogerá.


GIMP. Selección

Regiones continuas¿Cómo determinará que regiones son contínuas? Mediante el umbral

¿Diferencias color/regiones continuas?

19


GIMP. SelecciónRutas

Trabajoso, respecto a métodos anteriores, pero a veces es lo mejor por las características de la imagen

Modos de ediciónDiseño (crear la ruta)Editar

controlar la curva de la línea que une dos puntosAñadir nuevos puntos en una línea entre dos puntos

Mover (mueve todo el camino como si fuese un bloque)


GIMP. SelecciónTijeras ‘inteligentes’

Trata de detectar bordes en la imagen y ajustarse a ellosSi las condiciones de la imagen son buenas, la selección puede ser mejor y más rápida que con las rutasSe crea una selección, no una rutaComenzar en un punto, e ir creado puntos alrededor del objeto a seleccionar. El punto final irá encima del inicial. Una vez creado el contorno, pinchar dentro del camino y se creará la selección

20


GIMP. SelecciónQuickMask

Hacer una selección (ruta o tijeras)Activar máscara rápidaCompletar con herramienta de dibujado ‘lápiz’

Al pintar de blanco, quitamos rojo a la máscara. Añadimos a la selecciónAl pintar de negro, quitamos de la selección


GIMP. SelecciónGuardar selección en un canal

Cuando una selección es muy compleja y la queremos guardar para usarla más tarde, la podemos guardar en un canal<Seleccionar> -> guardar en canalPoner el canal a visible, aparecerá una máscara grisSe puede modificar la ‘máscara’ pero si sólo la selección ya no está activaPara obtener de nuevo la selección: botón derecho en el canal -> ‘canal a selección’Guardar en canal, permite lo mismo que ‘máscara rápida’ y además guardar la selección para recuperarla más tarde

21


GIMP. SelecciónMenú selección

Todos (todo el lienzo)NingunoInvertirFlotante (la selección la convierte en capa flotante)Por colorDesde rutaEditor de selecciónDifuminar (no tan angulosa la selección)Enfocar (el contrario que difuminar, pero mejor deshacer una vez aplicado difuminar)EncogerAgrandarBorde (seleccionará lo que haya dentro del borde)Rectángulo redondeadoMáscara rápida (lo hemos visto)Guardar en canalA la ruta (convertir en ruta, para editar selección. Clicar primer punto ruta para que trace la ruta)


GIMP. SelecciónEjercicios

Extraer planeta e interponerlo entre capas

Resaltar un objeto respecto al resto de la imagen

22


GIMP. Selección

Ejercicio


GIMP. Selección

Ejercicio. Extraer rama y completar árbol del otro día

23


GIMP. SelecciónEjercicio. Seleccionar chispas y fusionar capas

MultiplicarBlanquear…


GIMP. Borrado

24


GIMP. Borrado.Herramienta Blanquear o ennegrecer

Está basada en la idea de cómo la exposición de la luz al hacer una foto influía en la foto obtenida en las cámaras analógicasFactor ‘exposición’ determinará la intensidad del efecto.Sensibilidad de presión (si se usa una tabla de dibujado, lápiz óptico) Pero ¿también se puede modificar intensidad con otras herramientas? Si pero esto es más rápido y sólo afecta a ciertas zonas de la imagen no a todo. Además, a veces es más eficaz en zonas difíciles de seleccionarÚtil para ‘apagar’ o ‘resalta’ zonas de fotografías

La herramienta es ‘inteligente’: todo lo que se haga en una misma pasada (sin soltar el ratón) se verá afectado por igual


GIMP. Borrado.

BorroneoHacemos una foto de una excursión y al llegar a casa descubrimos algo que nos ‘destroza la foto’…Útil para quitar algo de una imagen para que parezca que nunca estuvo allíEl factor ‘Tasa’ influirá en la mezcla del borroneado

Probarlo…

25


GIMP. Borrado.Herramienta de clonado

Para cuando el borroneo no es adecuadoPara clonar tener pulsado ‘Ctrl’También se podría seleccionar la silueta de un objeto y borrarlo clonandoLa dirección de clonado es importante, porque de aquí cogerá el patrón de la imagen origen, para clonar

OpcionesNo Alineado: repite el patrón siempre igualAlineado: comienza a pintar el patrón clonado a partir de dónde te quedases la última vez clonandoRegistrado: Como un papel de calco, copia sobre lo que esté pintando (util: capa transparente encima)

Probarlo…


GIMP. Borrado.

Borrar seleccionandoCrear selección del objeto a borrarMover selección (Alt)CopiarPegar sobre el objeto a borrar

26


GIMP. Máscaras


GIMP. Máscaras

Una máscara es como una plantilla que nos permitirá hacer modificaciones sobre ciertas partes de una imagen y sobre otras no¿Cómo se crea? Sobre la capa en la que queramos añadir la máscara: Botón derecho - > Añadir máscara de capaLas podremos crear de distintos modos

27


GIMP. MáscarasMáscara de degradado

Crear una nueva especie

+


GIMP. Máscaras

Otros tipos de máscaras de degradadoRadialCuadrado

También se puede obtener una máscara creando una selección y pintándolaEfecto interesante a una máscara: Sombra base

Para ello antes ‘Aplicar máscara de capa’Máscara con texto

28


Ejercicio

Con todo lo aprendidoCrear una historia de cómic con power-point

Escenario/fondoMúsica de fondoPersonajes (con imágenes de google, composición cabeza/cuerpo,…)Diálogo


GIMP. Filtros y efectos

29


GIMP. Filtros y Efectos

Son operaciones que nos van a permitir aplicar funciones matemáticas sobre nuestras imágenes para conseguir algún efectoDónde están localizados

Menú FiltrosCapa -> ColoresScript-fu

La mayoría de los filtros están implementados como ‘plugins’ usando algún lenguaje de script (Script-fu es el propio de GIMP)


GIMP. Filtros y EfectosBalanceo de color

Ventana imagenCapa->Colores

Tono saturaciónBalanceo de color

Eliminar la tonalidad púrpuraTono saturación

¿Qué modificación es mejor?Balanceo de color

Modificar los valores de cyan, magenta y amarillo hasta conseguir un cielo más ‘natural’

30


GIMP. Filtros y EfectosNiveles de colores


GIMP. Filtros y EfectosNiveles de colores: convertir un día nublado, en uno soleado

Histograma: no hay casi tonos blancos

31


GIMP. Filtros y EfectosFiltros: Blur

Desenfoque (Blur)Desenfoque gausiano (desenfocar algo)

Con el ‘Radio’ se controla el desenfoqueSe pueden enlazar el radio horizontal y el vertical

Desenfoque gausiano selectivoel desenfoque es aplicado solamente si la diferencia entre el valor del píxel y el de los píxeles adyacentes es menor que el valor definido con Delta. Resultado final: desenfoca objetos manteniendo la forma de éstos

Realzar la mariposa (Desenf. fondo)

Comprobar diferencia entre los filtros



Filtros: Blur (cont.)Desenfoque de movimiento

Tipo de desenfoque• Lineal• Radial• Acercamiento

Parámetros• Longitud• Ángulo

PixelizarConvierte imagen en un mosaico de píxeles más grandes

32


GIMP. Filtros y EfectosEjercicio. Desenfoque de movimiento



Realzar (Enhance)Desentralazado (sólo se queda con líneas pares o impares de la foto, para resolver el problema de algunas camáras)Desparasitar (quitar elementos de ruido pequeños (para imágenes escaneadas o antiguas que están mal conservadas -> radio)Quitar bandas (quitar líneas verticales en imagen escaneada)Enfocar (formas y bordes objetos más definidos)DesenfocarFiltro NL (combinación de los anteriores: desparasitar y enfocar, al mismo tiempo que aplica un suavizado a la imagen)

33


GIMP. Filtros y EfectosDistorsiones (cambiar forma imagen)

PersianaDesplazamiento (ancho de cada ‘lama’ de la persiana)Número de segmentos entre cada lama

Doblar según curvaDeterminar curva de arrivay de abajo

Emboss (Repujado) Grabado en metal

Azimut (dirección de la luz)Elevación (Ángulo de la luz respecto a la imagen)Profundidad (del grabado)Mapa de relieve (lo mismo con color)



Distorsiones (cont.)Grabado

Hace falta añadir canal alfa (Capa->transparencia->Añadir canal alfa)Parámetros

• Altura• Limitar anchura de línea

(traza unas líneas sobre el grabado)

Deformado (varios tipos, pinchar y arrastrar en la imagen vista previa)

MoverCrecerTorbellino (Horario/Antihorario)QuitarEncoger

34


GIMP. Filtros y EfectosDistorsiones (cont.)

Mosaico Convertir en mosaico. Distintos parámetros…probarlos

Papel de periódicoImpresión de la imagen como si fuese la de un periódico

Enrollando páginaSeleccionar parte de la imagen a enrollar



Distorsiones (cont.)Coordenadas polares

Deformar imagen alrededor de un puntoOndulación

Como si olas de agua deformasen la imagenDesplazamiento

Desplaza vertical/horizontal cada fila de la imagenPropagar valor

Extiende los pixels a negro o blanco, según se le diga (interesante para trabajar con máscaras)

35



Distorsiones (cont.)Video

Modificar imagen para que se vea como en un dispositivo de baja resolución

OndasEfecto cuando cae una gota sobre el agua, las ondas que se forman

Remolino y aspiraciónViento

Hace algo parecido al ‘enfoque de movimiento’ pero trata de localizar líneas oscuras o de luz y desplaza la imagen en una misma dirección siguiendolas



Efectos de luzDestello Fx (Destello de luz)Efectos de iluminaciónGdestelloMoteadoSuperNova

Sombras (Script-fu)Sombra base (ya visto)

36


GIMP. Filtros y EfectosEfectos de cristal

Aplicar lentesEfecto de una lente. Controlado por el índice de refracción

Mosaico de cristalConvierte imagen en un muro de ladrillos de cristal

Filtros de ruidoEscogerEsparcir por HSV (ruido salpicado de color) parámetros:

Soltura (Determina cuánto cambiará el color de la imagen)Tono (color a introducir en el ruido)Saturación (saturación del ruido)Valor (brillo)

Esparcir por RGBLanzarManchar


GIMP. Filtros y EfectosDetectar bordes

Arista6 algoritmos distintos para detectar bordesCon parámetro ‘Cantidad’ se configura la sensibilidad del método

Diferencia de Gaussianas: Hace dos desenfoques de la imagen, cada uno con su radio. Luego calcula la diferencia y así obtiene los bordesLaplace (lo aplica sin parámetros)Neón (aspecto más de luz de neón)Sobel (Sobel detecta mejor los bordes que Laplace). Al ejecutarlo fuera de la opción ‘Arista’, se pueden controlar más parámetros

37



Filtros genéricosDilatar: Realza zonas oscuras de la imagen y reduce el tamaño de las zonas luminosasErosionar: lo contrario que ‘dilatar’, realza las zonas con luzMatriz de convolución: A nosotros no nos interesa mucho… Muestra una matriz con valores numéricos. Muchos algoritmos que actúan sobre imágenes usan matrices de convolución. Por lo que con este filtro, se puede ‘testear’ con GIMP cómo funciona un determinado algoritmo o filtro


GIMP. Filtros y EfectosCombinar

Mezcla con profundidadCombina dos imágenes basándose en sus ‘mapas de profundidad’. Un mapa de profundidad determina el grado de oscuridad/claridad de cada pixel de cada imagen. Al combinar cada pixel, el más oscuro gana y será el que se veaFiltro problemático, suele dar erroresLas imágenes a combinar y los mapas de profundidad, han de tener el mismo tamaño

PelículaCombina las capas de la imagen en una película de 35 mm

38


GIMP. Filtros y EfectosFiltros artísticos

Aplicar lienzoSe obtiene una textura como si la imagen estuviese pintada sobre un lienzo

CubismoTransforma imagen en pintura cubista

GIMPresionistaEs complejo: Tiene distintas pestañas de configuración, nosotrosprestaremos atención sólo a la primeraPara aplicar filtro seleccionado, primero presionar ‘Aplicar’ y luego ‘Actualizar’, debajo de la vista previa

FotocopiaEfecto de fotocopiar la imagen

Pintura al óleoTransforma figura en una pintura al óleo

SoftglowBaño de luz

ViñetaSimplifica colores y añade componente negra a los bordes, dando la sensación de estar dibujado a mano


GIMP. Filtros y EfectosFiltros de mapa

Baldosas pequeñasConstruir un suelo con baldosas, pero especificando el número de segmentos

Crear sin costurasModifica la imagen de tal modo que se pueda juntar el lado superior con el inferior y el izquierdo con el derecho

DeformarDesplazar

Desplaza imagen de acuerdo a un mapa de gradienteEl mapa de gradiente se usa del siguiente modo

• Un pixel blanco desplazará hacia izq./arriba• Un pixel negro desplazará hacia der./abajo• Un pixel gris no produce movimiento

Probar a crear mapas de movimiento • Esfera degradada• Múltiples círculos con los bordes degradados (en seleccionar con círculo->Difuminar bordes)• Filtros->Renderizado->Nubes->Ruido sólido

EnlosarEspecificar tamaño mayor que la de nuestra imagen actual y repetirá nuestra imagen en la nueva

EspejismoCrea como un espejismo de nuestra imagen (dos tipos)

Mapa de RelieveCrear texto y capa de fondoSeleccionar la capa de fondoY seleccionar como archivo de mapa de relieve la capa del texto

Mapear objetoMapea nuestra imagen sobre algún objeto

Mosaico de papelDivide la imagen en piezas y las desplaza, estableciendo al mismo tiempo un fondo

Traza fractalConvierte la imagen en un fractal, se hace con ecuaciones. Distintos parámetros para configurar dichas ecuaciones

Van Gogh

39



Web Mapa de imagen

Especificar tipo de enlaceSitios destino a los que nos llevarán cada enlaceSe podrá añadir código javaScript


GIMP. Filtros y efectos.Efectos sobre texto

Script-Fu->Alfa a logo

40


GIMP. Animación 2D.Vuelo de un avión

Recordar que el fotograma superior en la pila de capas será el último en reproducirse

La velocidad de la animación se controla cuando se guarde el gif


GIMP. Animación 2D.

Ejercicio. Crear vuestro propio gif

41


Ejercicio

Crear logo empresa: (empresa de ordenadores, de comida, perfumes, etc.). Mirar ejemplos de logos en google y coger ideas (degradados, sombras, reflejos, formas, etc) -> en google buscar: logotipo.


GIMP. FINALHacer un folleto de vuestra agencia de viajes

42


GIMP

Espero que os haya resultado de interésGracias por vuestra atención

Documents

Edición de imágenes Digitales y Animación 2D - uv.es · {Todos (todo el lienzo) {Ninguno {Invertir {Flotante (la selección la convierte en capa flotante) {Por color {Desde ruta