{"id":475,"date":"2024-07-02T22:45:00","date_gmt":"2024-07-02T22:45:00","guid":{"rendered":"https:\/\/profe.evilspout.com\/tutos\/?p=475"},"modified":"2024-07-02T22:52:50","modified_gmt":"2024-07-02T22:52:50","slug":"creacion-de-animacion-cuadro-a-cuadro-en-papel-limpieza-de-fotogramas-coloreado-digital-y-edicion-de-secuencias-en-adobe-animate-parte-02","status":"publish","type":"post","link":"https:\/\/profe.evilspout.com\/tutos\/index.php\/2024\/07\/02\/creacion-de-animacion-cuadro-a-cuadro-en-papel-limpieza-de-fotogramas-coloreado-digital-y-edicion-de-secuencias-en-adobe-animate-parte-02\/","title":{"rendered":"Creaci\u00f3n de animaci\u00f3n cuadro a cuadro en papel, limpieza de fotogramas, coloreado digital y edici\u00f3n de secuencias en Adobe Animate (Parte 02)."},"content":{"rendered":"

Una vez ordenados los fotogramas y aprobado el Pencil Test b\u00e1sico procederemos a editar limpiando las im\u00e1genes digitalmente en Adobe Photoshop, dando contraste, agregando elementos y detalles. Es importante considerar que para trabajar solo con el personaje es necesario eliminar el fondo en desuso, para lo cual utilizaremos \u201cvarita m\u00e1gica\u201d (W) para seleccionar el fondo vac\u00edo y lo eliminaremos con \u201csuprimir\u201d. Crearemos un nuevo Pencil Test para evaluar el grado de limpieza de los fotogramas.<\/p>\n

<\/p>\n

Estando la limpieza de fotogramas lista procederemos a aplicar color y texturas al personaje. Para ello establecemos que los colores ser\u00e1n inusuales, llamativos y con una base de textura acorde al cuerpo de una serpiente. Esta decisi\u00f3n va a depender de los conceptos gr\u00e1ficos a utilizar en el Color Script (guion de color) y la relevancia de la figura central (personaje) sobre el fondo (ambiente marino). Establecemos entonces la coloraci\u00f3n final de la serpiente marina y su relaci\u00f3n de contraste y relevancia apreciativa con el fondo.<\/p>\n

\"\"<\/p>\n

Una vez coloreada o texturizada acorde a lo deseado, colocaremos en una primera capa con el arte de fondo marino dise\u00f1ado al fondo debajo de todas las dem\u00e1s. Revisaremos cada fotograma y verificaremos que los contornos est\u00e9n limpios y no con pixeles blancos o de un color que no corresponda. En caso de ser as\u00ed, sugiero utilizar \u201cvarita m\u00e1gica\u201d (W) para seleccionar el fondo vac\u00edo de cada fotograma y aplicar Pesta\u00f1a Selecci\u00f3n \/ Modificar \/ Expandir y elegir valor 1 pixeles. Aplicar OK y luego presionar suprimir para borrar todo pixel que exceda el contorno de la figura que genera el movimiento.<\/p>\n

\"\"<\/p>\n

Con el proceso de limpieza ya listo procederemos a exportar los fotogramas para crear la animaci\u00f3n final en Adobe Animate. Eliminaremos el fondo marino que usamos para testear los bordes sucios de los fotogramas y abriremos la pesta\u00f1a Archivo \/ Exportar \/ Interpretar video.<\/p>\n

\"\"<\/p>\n

En la interfaz que se genera seleccionaremos la carpeta de salida de las im\u00e1genes, idealmente en una subcarpeta del proyecto y consideraremos que sea una secuencia de im\u00e1genes de Photoshop en formato PNG. El n\u00famero de inicio ser\u00e1 el 11 y los d\u00edgitos 4. Mantenemos las medidas y la velocidad de fotogramas (30) y en las opciones de interpretaci\u00f3n utilizaremos salida en canal alfa premultiplicado con negro (traten de seguir el siguiente recuadro para la configuraci\u00f3n de exportaci\u00f3n). Para finalizar la exportaci\u00f3n presionamos el bot\u00f3n “Interpretar”.<\/p>\n

\"\"<\/p>\n

Revisaremos la carpeta de salida de los fotogramas. Deber\u00eda verse como la siguiente imagen. Si ven que los fotogramas se repiten, eliminen los reiterados y nombren las secuencias desde a11 en adelante (a11, a12, a13, a14, etc.), para que as\u00ed sea m\u00e1s f\u00e1cil importar a Adobe Animate.<\/p>\n

\"\"<\/p>\n

La secuencia est\u00e1 lista, con nombres en secuencia numeral y transparente. Ahora es momento de finalizar la animaci\u00f3n. Abriremos Adobe Animate y crearemos un archivo nuevo en la pesta\u00f1a \u201cAnimaci\u00f3n de personajes\u201d de medidas 1920 x 1080 Full HD, 30 fotogramas y ActionScript 3.0.<\/p>\n

\"\"<\/p>\n

La interfaz debe verse como en la siguiente imagen. Se aprecia la escena (rect\u00e1ngulo blanco en donde veremos la animaci\u00f3n) y abajo la l\u00ednea de tiempo en donde cada peque\u00f1o rect\u00e1ngulo vertical es un fotograma. A la derecha la tabla de propiedades y otras herramientas y a la izquierda el panel de herramientas. Renombraremos la primera capa como \u201cPersonaje\u201d y seleccionaremos el primer fotograma (rect\u00e1ngulo vertical con un c\u00edrculo).<\/p>\n

\"\"<\/p>\n

Ahora importaremos el primer fotograma de nuestra secuencia de animaci\u00f3n. Con el primer fotograma seleccionado vamos a pesta\u00f1a Archivo \/ Importar \/ Importar a escenario (Ctrl+R). Buscaremos nuestra carpeta con la secuencia y seleccionaremos el primer fotograma. El software Adobe Animate te consultar\u00e1 si quieres importar la secuencia y responderemos que s\u00ed.<\/p>\n

\"\"<\/p>\n

Se importar\u00e1 la secuencia completa y podremos testearla presionando PLAY en la barra de la l\u00ednea de tiempo o simplemente presionando Enter (Intro). Crearemos otra capa bajo la capa PERSONAJE y la llamaremos FONDO, en ella importaremos el fondo de 1920 x 1080 pixeles y, finalmente procederemos a crear un GIF Animado para testear esta parte del proceso. Para ello iremos a pesta\u00f1a Archivo \/ Exportar \/ Exportar Gif Animado. Aparecer\u00e1 la interfaz de salida en la cual deben aplicar las configuraciones del siguiente ejemplo.<\/p>\n

\"\"<\/p>\n

La secuencia de testeo con los fotogramas coloreados \/ texturizados y limpios, m\u00e1s el fondo, deber\u00eda verse as\u00ed… en el pr\u00f3ximo tutorial agregaremos elementos al fondo, efectos de color y exportaremos en video para postproducci\u00f3n en Adobe After Effects.<\/p>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Una vez ordenados los fotogramas y aprobado el Pencil Test b\u00e1sico procederemos a editar limpiando las im\u00e1genes digitalmente en Adobe Photoshop, dando contraste, agregando elementos y detalles. Es importante considerar que para trabajar solo con el personaje es necesario eliminar el fondo en desuso, para lo cual utilizaremos \u201cvarita m\u00e1gica\u201d (W) para seleccionar el fondo vac\u00edo y lo eliminaremos con \u201csuprimir\u201d. Crearemos un nuevo Pencil Test para evaluar el grado de limpieza de los fotogramas. Estando la limpieza de fotogramas lista procederemos a aplicar…<\/p>\n","protected":false},"author":1,"featured_media":497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,27,21,18,28,35,11,12,13],"tags":[5,29,31,10,6,23,7,25,30,4,3,43,8],"class_list":["post-475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animacion","category-animate","category-composicion","category-diseno","category-fotogramas","category-fps","category-ilustracion-digital","category-vector-gestual","category-wacom","tag-adobe","tag-animacion","tag-animate","tag-anime","tag-color","tag-composicion","tag-digital","tag-diseno","tag-fotogramas","tag-illutrator","tag-ilustracion","tag-secuencia","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":19,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":521,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts\/475\/revisions\/521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/media\/497"}],"wp:attachment":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}