miércoles, 14 de junio de 2017

Cómo quitar el fondo blanco de una imagen en Photoshop

Muchas imágenes en Internet (especialmente las que están en formato PNG) tienen un fondo blanco en lugar de transparente. Con Photoshop se puede eliminar fácilmente ese fondo.



Una vez abierta la imagen seleccionamos la herramienta "Varita mágica", ajustamos la tolerancia para darle un rango más grande o más pequeño de color de selección, comprobamos que estén marcadas las opciones "Suavizar" y "Continua" y hacemos clic en el fondo. En el caso de que no se seleccione entero hacemos clic en otra zona mientras mantenemos "Mayus" para añadirla a la selección



Vamos a "Selección > Invertir" para seleccionar el objeto en lugar del fondo.



Si la selección no ha quedado del todo bien, hacemos clic en "Perfeccionar bor." y ajustamos un poco los parámetros hasta mejorarla.



En la zona inferior de la ventana de capas hacemos clic en el icono "Añadir máscara de capa".



Tener una máscara de capa en lugar de borrar el fondo nos permite hacer ajustes en los bordes del objeto seleccionando la máscara y pintando sobre ella con negro (ocultar) y blanco (mostrar).

Finalmente, para poder guardarla como una imagen con transparencia necesitamos guardarla en formato PNG (u otro que tenga canal alfa).

lunes, 12 de junio de 2017

Cómo utilizar la herramienta Hueso en Adobe Animate

En Adobe Animate la herramienta hueso sirve para formar Esqueletos, que sirven para animar formas o conjuntos de símbolos de forma sencilla (aunque bastante limitada en algunos aspectos).

En rellenos


Para utilizar la herramienta hueso en formas haremos clic en el que queramos que sea su punto central y arrastraremos hasta donde queramos que tenga el primer (cosa que gira) y nos creara una nueva capa de Esqueleto. En donde termina el primer hueso se traza el siguiente y así sucesivamente hasta llegar al ultimo hueso.

En la barra de tiempo podemos incuir poses que animate interpolará automaticamente.


 

 

En símbolos


Los huesos con símbolos funcionan de forma diferente a los rellenos. Para usarla trazamos el primer hueso desde el que queramos que sea el símbolo principal hasta otro símbolo. Un hueso puede unir un símbolo con muchos otros, pero no pueden unirse varios huesos a un mismo símbolo.

En la barra de tiempo podemos incuir poses que animate interpolará automaticamente.


domingo, 11 de junio de 2017

Cómo hacer una rotoscopia en Adobe Animate

Una rotoscopia es un método de animación que consiste en calcar los fotogramas de un vídeo. Se utiliza para conseguir movimientos más realistas.

Para hacer una rotoscopia en Adobe Animate necesitamos importar un vídeo. Para poder trabajar con un vídeo visualizándolo en la barra de tiempo necesitamos convertirlo a formato FLV, para ello podemos usar esta página.


        
Importamos el vídeo, seleccionamos la segunda opción y lo arrastramos a la barra de tiempo.


 

Hacemos clic derecho en la capa en la que está y ajustamos la opacidad si es necesario a una que nos sea cómoda para calcar o escogemos un color que resalte respecto a la imagen (Si la imagen es muy oscura utilizar blanco, si es principalmente verde utilizar rojo, etc.)



En una capa superior calcamos los bordes del personaje o el objeto haciendo un esbozo, desplazándonos entre los fotogramas con "," o ".".



Una vez rotoscopiados todos los fotogramas necesarios, se hace una limpieza de los esbozos en una capa superior.

Cómo importar un gráfico virtual en Adobe Animate

Adobe Animate trabaja principalmente con gráficos vectoriales, por lo tanto podemos importarlos dentro del programa y editarlos como si se trataran de un relleno. Si queremos, podemos convertir una fotografía o un dibujo usando Inkscape para importarlo posteriormente.

Para importarlos se hace como un archivo cualquiera, podemos ir a "Archivo > Importar" o arrastrar el gráfico hasta la biblioteca.



Al importarlo nos dará a elegir entre varias opciones sobre la distribución de los trazados. Si se trata de un simple "line art" es recomendable la primera opción.






Si hacemos clic en el gráfico varias veces podremos ver que Animate lo ha ordenado en grupos y objetos. Para convertirlo en una simple forma y poder editarlo hacemos clic derecho en el gráfico y le damos a "Separar", repetimos eso dos veces más.



Si arrastramos el cursor sobre el borde del trazado podemos comprobar que se comporta como una forma cualquiera.

domingo, 21 de mayo de 2017

Cómo crear fácilmente una fuente de texto propia

Para crear una fuente de texto con nuestras propias letras una página recomendable es MyScriptFont.




El funcionamiento de la página es muy sencillo. Se descarga la plantilla en formato PDF o PNG y se imprime o se abre con un editor de imágenes.


Una vez tengamos la plantilla impresa o abierta en un editor de imágenes escribiremos en cada casilla su carácter correspondiente (no es necesario cubrirlos todos) respetando los márgenes y preferiblemente con un trazo negro y medianamente grueso.

Cuando esté lista se guarda la imagen o se escanea con una resolución de entre 300 y 600 dpi y se sube a la página examinando la imagen.

En el apartado "Name your font:" escribimos el nombre que queramos que tenga la fuente.

Para generar la fuente le damos a "Start" y la página vectorizará y organizara todos los caracteres en un archivo TTF que podremos instalar.

Para comprobar que nuestra fuente funciona basta con ir a un editor de texto, buscarla, seleccionarla y probar a escribir algo con ella.


domingo, 14 de mayo de 2017

Cómo vectorizar un mapa de bits con Inkscape

La diferencia entre un mapa de bits y un gráfico vectorial es que el mapa de bits está formado por un conjunto de píxeles mientras que el gráfico vectorial está formado por formas geométricas definidas por ciertas instrucciones. Con Inkscape se pueden convertir imágenes de mapa de bits en gráficos vectoriales con distintos ajustes.



Una vez que se tenga la imagen en un documento de Inkscape se va a Trayecto > Vectorizar mapa de bits y se abrirá esta ventana.


 
En el caso de que lo que queramos sea obtener un gráfico vectorial con diferentes colores seleccionamos "Colores" y en el apartado "Pasadas" seleccionamos el numero de colores que queramos. Una vez ajustado se le da a "Aceptar" y nos generará el mapa vectorial



Este es el resultado



Otro caso distinto es si tenemos por ejemplo un escaneo de un dibujo que queremos pasar a trazos vectoriales.



En este caso se selecciona "Corte de luminosidad" y se ajusta el "Umbral" hasta encontrar uno que se adecue a nuestras necesidades.


  

Este es el resultado

Herramienta Cámara | Adobe Animate CC (Flash)

Anteriormente, si se quería hacer un efecto de movimiento de cámara en flash o en las primeras versiones de animate se tenia que recurrir a mover todos los símbolos del documento a la vez o utilizar un script. Pero ahora tenemos la herramienta "Cámara" que nos permite hacer movimientos, zooms y giros de la pantalla fácilmente.

Para aplicar una cámara a la linea de tiempo se selecciona la herramienta "Cámara" y automáticamente se añadirá una nueva capa a la linea de tiempo que contendrá la cámara.



 Mientras tengamos esa capa seleccionada aparecerá en la parte inferior del escenario un deslizable junto a unos botones.


 Con ese botón seleccionado el deslizable ajustará el zoom de la cámara.


  Con ese botón seleccionado el deslizable ajustará la rotación de la cámara.



La cámara funciona de forma similar a los símbolos, ya que se le puede poner interpolaciones de movimiento y algunos efectos de color.

lunes, 8 de mayo de 2017

Animación con Adobe Animate | Prinicipios adicionales de la animación | Smears

Además de los 12 principios de la animación originales existén algunos más que se han ido desarrollando con los años, en este caso comentaremos el "smear".

En la animación 2D se conoce como smear a un tipo especial de interpolación. En ellos se presenta una gran deformación del objeto (estirándolo o duplicándolo), pero al tener una duración muy corta no se llegan a apreciar directamente. El efecto es similar al desenfoque entre los fotogramas que graba una cámara de vídeo con poca velocidad de obturación (motion blur).

15-05-23-Berlin-Sachsendamm-Tesla-RalfR-N3S 7354.jpg
"Smear" en la vida real (motion blur). Tomado de Wikipedia.

Con este principio evitamos hacer varios fotogramas con la interpolación exacta entre los fotogramas, lo que nos puede ahorrar mucho tiempo. Por esa razón se suele incluir esté principio dentro de la animación limitada, sin embargo, no es extraño encontrarla dentro de animaciones completas.

Existen dos tipos básicos de smears:

Smear de estiramiento


Su realización depende mucho de la animación, pero básicamente se trata de activar el papel cebolla y entre el fotograma inicial y final hacer un dibujo que, en lugar de una posición intermedia, sea un alargamiento entre el dibujo inicial y final. Luego entre el fotograma del smear y los extremos se duplican los extremos y se mueven ligeramente hacia el smear.

Los extremos y el smear estirado


Smear de repetición


Su realización es igual a la del estiramiento, pero en lugar de un estiramiento es una fusión de todos los fotogramas intermedios que debería tener entremedias. Este es un poco más complicado de hacer que el anterior, pero suele dar mejores resultados.

Los extremos y el smear repetido

jueves, 30 de marzo de 2017

Animación con Adobe Animate | 12 principios de la animación | Índice

Los 12 principios de animación son unas reglas básicas que se deben de seguir para cear animaciones más realistas. Estos principios ayudan a crear una ilusión de que los personajes y los objetos obedezcan a leyes físicas.

Hemos recogido, explicado, y puesto ejemplos de cada uno de los principios en diferentes entradas del blog:
  1. Estirar y encoger
  2. Anticipación
  3. Puesta en escena
  4. Animación directa y pose a pose
  5. Acción continuada y superposición
  6. Entrada y salida lenta
  7. Arcos
  8. Acción secundaria
  9. Ritmo
  10. Exageración
  11. Dibujos sólidos
  12. Appeal 
Estos principios fueron descritos por los animadores de Disney Ollie Johnston y Frank Thomas en su libro The illusion of life.

Animación con Adobe Animate | 12 principios de la animación | Appeal 12/12

Mal appeal
El principio de appeal (lo que puede ser traducido como algo similar a atractivo o carisma) se refiere al diseño de los personajes, de como este comunica su personalidad, su simpleza y como resultan "interesantes" al espectador.

Aunque se pueda traducir como lo atrictivo o carismático que es un personaje, no tiene porque ser así. Un personaje malvado o un monstruo no suele ser atractivo o carismático, pero sí que pueden tener appeal, refiriendose a lo interesante que sea su diseño y las sensaciones que su apariencia transmita.