[Gráficos] Cómo usar Aseprite para hacer Sprites Animados Act. 21/11


Like Tree10Gracias
  • 6 Post By Diego Mertens
  • 1 Post By Edstereo
  • 1 Post By KleinStudio
  • 1 Post By EnamoratDeKatie
  • 1 Post By Diego Mertens
Respuesta
 
Herramientas Desplegado
  #1  
12/11/2018
Predeterminado Cómo usar Aseprite para hacer Sprites Animados Act. 21/11
Me motivé a hacer este tutorial, al notar que varias personas preguntan como tres cómo usar el programa, y me decanté a hacerlo, al ver el post de @White, el niño con barba, aquí mismo: Aseprite (V.1.2.10 - Beta) - Programa para Crear Sprites Facilmente - Gratis

Presentación: ¿Qué es Aseprite?
Aseprite es un programa hecho específicamente para el PixelArt, contiene las funciones básicas de un editor de imágenes, junto con otras que lo diferencian del resto. Es perfecto para crear Sprites Animados como estos:



Funciones
Aseprite tiene muchísimas funciones que podremos utilizar para ayudarnos en nuestra labor, tiene tantas, que al principio parece muy complicado y completo.

Opciones de Inicio

Al abrir el programa, nos encontraremos con esto:

Quizás no sepan qué significa cada una, al estar en inglés, pero no se alarmen, se los explico:
  1. Nuevo Archivo y Abrir Archivo
  2. Archivos recientes
  3. Archivo, Editar, Sprite, Capa, Fotograma (cuadro), Selección, Vista y Ayuda

Al Abrir un Archivo


Procederé a abrir un archivo que ya tengo hecho, un Dunsparce:
  1. Capas
  2. Línea del Tiempo, todos los fotogramas que hay para animar
  3. Herramientas típicas de un editor
  4. Paleta, todos los colores de la imagen, servirá para hacer shinies
  5. Opciones de la herramienta seleccionada

Si quieres hacer un Sprite, hacelo, poné al Pokémon en la primer capa, ajustá el tamaño, creá una segunda capa, ¡Y dejate llevar! Es toda la explicación que necesitás para crear un Sprite ESTÁTICO. ¿Qué? ¿Que vinieron acá para aprender a animarlos?
Bueno, en el caso de querer animarlos, sigamos.

Animar
Esto se dividirá en pasos, todos igual de importantes.

Pasos

Paso 1:Divide al Pokémon en sus partes del cuerpo.
¿¡QUÉEE!?Sí, como leíste, dividirlos. Para esto, necesitaremos dibujar cada parte del cuerpo que quieras que se mueva, en capas distintas, y sí, por eso vieron tantas capas en la explicación anterior, sería algo así:

¿Ven como el pobre Dunsparce está todo separado?
Bueno, las partes del cuerpo que se moverán por separado, deberán ser puestas en capas separadas.
Paso 2:Crea otro Fotograma, Fame o Cuadro.
Esto es sencillo, solo toca Alt+N (sin el +) y se copiará el frame anterior. Sólamente mueve/gira un poco la parte del cuerpo que quieras animar y listo. Para girar una, sólo toca Ctrl+T y pon el RotSprite en las opciones de arriba, y el pivot donde esté la articulación de la zona que queremos rotar, osea, si es la cabeza, a donde está el cuello.

Si no te aparece el pivot, no te preocupes, gira un poco la imagen y listo.
Te recomiendo hacer 2 fotogramas iguales y luego otro nuevo, osea, cambiado. Antes de hacer algo, deberán ser 7 u 8 frames iguales.
Paso 3:Andá fijándote cada más o menos 7 frames como va quedando la animación y recuerda que los Pokémon hacen un "bailecito" 5 veces y luego tienen una animación especial, en el caso del Magnemite de antes, el "bailecito" es mover los imanes y subir y bajar un poco, mientras que la animación especial es la electricidad que pasa por su cuerpo.

Atajos de Teclado


Hay numerosos atajos de teclado, con los que podremos acceder a varias características de manera rápida y sencilla. Tomen esta sección como un "extra".

Lord N


Ctrl+N: Crea un nuevo sprite

Aquí aparecen opciones como: El tamaño en píxeles, el modo de color (RGB es normal, GRAYSCALE es blanco y negro, INDEXED es para llevar la cuenta de los colores que tiene el sprite, muy útil a la hora de hacer Shinies) y el fondo (transparente, blanco o negro)
Shift+N: Crea una nueva capa

Es eso, crea una nueva capa y ya, nada del otro mundo.
Alt+N:Cre un nuevo Frame

Si prestaron atención, en imágenes anteriores, había sólo 92 frames, pero ahora hay 93. C van a revisar :v
Esto agrega un frame exactamente igual al anterior. Para que la animación sea como la de BW, hay que modificar un frame por medio.

Propiedades intelectuales


Ctrl+P:Propiedades de sprite

Esto despliega las propiedades del sprite que no sabía de su existencia y podemos apreciar las siguientes opciones:
  1. Nombre y ubicación del archivo
  2. Tipo de color
  3. Tamaño (en píxeles) y el peso
  4. Cantidad de fotogramas o Frames del archivo
  5. Color transparente (usado para imágenes indexed, usualmente para ROMHacking)
  6. Forma de píxeles, si querés que el pixel sea normal, más ancho que alto o más alto que ancho (ni idea para qué lo usarán)
Shift+P:Propiedades de capa

Esto despliega las propiedades de capa, como cambiarle el nombre, el modo (próximamente les explicaré) y la opacidad (para hacerlo más o menos transparente, recomendable para alas de insecto o humo).

Misceláneo


Ctrl+C:Copia lo seleccionado
Shift+C:Centra la imagen
Alt+C:Borra un frame
Ctrl+V:Pega lo copiado
Shift+V:Gira la capa verticalmente
Alt+V:Abre la pestaña de vista


¡Con eso sería todo! Si creen necesario que les explique algo más, editaré el post para agregarlo, pero pídanlo amablemente.
Mi Fangame
Mis Recursos y Tutoriales

no me abras :v

...
Reshiram y Yo hemos perdido.
¿Significa eso que tus convicciones o ideales nos han superado?
Zekrom y Reshiram...
Cada uno ha escogido a un héroe...
¿Cómo es posible tal cosa?
¿Querrá decir esto que ambos héroes, tanto el defensor de los ideales como el paladín de la verdad, tienen razón?
No lo entiendo...
Quizá no se trate de negar el pensamiento diferente, sino de integrarlo y combinar ambos...
Como en una reacción química...
¿Es esa la fórmula para
cambiar el mundo?
~ N... Negro y Blanco... ~ 2010

Última edición por Diego Mertens; 22/11/2018 a las 02:51 Razón: Arreglos Menores
  #2  
12/11/2018
Predeterminado Respuesta: Cómo usar Aseprite para hacer Sprites Animados
OMG!!!!!

Mirad, que si te digo que estaba a punto de hacer eso pero no se mucho ingles,ademas de que pensé que era crear frames desde cero.

En verdad se agradece.

En un momento lo pruebo a ver que tal.

(No,prometo no poner EDIT:mierda)
Gracias: Diego Mertens
Here in the Garden
Let's play a game
I'll show you how it's done
Here in the Garden
Stand very still
This'll be so much fun
And then she smiled
That's what I'm after
A smile in her eyes
The sound of her laughter
Happy to listen
Happy to play
Happily watching her drift away
Happily waiting
All on my own
Under the endless sky
Counting the seconds
Standing alone
As thousands of years go by
Happily wondering
Night after night
Is this how it works?
Am I doing it right?
Happy to listen
Happy to stay
Happily watching her drift away
If keep on turning pages for people who don't care
People who don't care about you
And still, it takes you ages to see that no one's there
See that no one's there
See that no one's there
Everyone's gone on without you
Finally something
Finally news
About how the story ends
She doesn't exist now
Survived by her son
And all of her brand new friends
Isn't that lovely?
Isn't that cool?
And isn't that cruel
And aren't I a fool to have
Happily listened
Happily stay
Happily watching her drift
Drift
Drift away
Spinel
  #3  
12/11/2018
Predeterminado Respuesta: Cómo usar Aseprite para hacer Sprites Animados
Aunque el tutorial podría estar mejor organizado se entiende bastante bien.
En todos estos años he visto unos cuantos tutoriales de animación de sprites y diría que este es de los pocos que te explican como hacer el tipo de animación que se usa en quinta generación, muchos sprites que he visto animados como si fuesen de la quinta generación eran creados frame a frame lo que hacía que, aunque se viesen bastante bien, destacasen demasiado en comparación a los originales que usan esta técnica de coger las partes e ir girandolas y distorsionandolas.
Si alguien le pilla el truco a esto podríamos al fin empezar a crear todos los sprites faltantes de la sexta y séptima generación al estilo de la quinta o incluso rehacer los que están hechos con el estilo de animación diferente.
Gracias: Diego Mertens
  #4  
12/11/2018
Predeterminado Respuesta: Cómo usar Aseprite para hacer Sprites Animados
Dicho por KleinStudio Ver mensaje
Aunque el tutorial podría estar mejor organizado se entiende bastante bien.
En todos estos años he visto unos cuantos tutoriales de animación de sprites y diría que este es de los pocos que te explican como hacer el tipo de animación que se usa en quinta generación, muchos sprites que he visto animados como si fuesen de la quinta generación eran creados frame a frame lo que hacía que, aunque se viesen bastante bien, destacasen demasiado en comparación a los originales que usan esta técnica de coger las partes e ir girandolas y distorsionandolas.
Si alguien le pilla el truco a esto podríamos al fin empezar a crear todos los sprites faltantes de la sexta y séptima generación al estilo de la quinta o incluso rehacer los que están hechos con el estilo de animación diferente.
Pues, sí, podría estar mejor organizado, pero es que posteo una vez cada mil años y usualmente es un comentario o una duda XD.
¡Muchas gracias, de todas formas! Es significativo para mí que alguien como usted me diga algo bueno, quiero suponer que lo era, a grandes rasgos. Pero aún así, debo agregar un par de cositas que no han quedado claras.
Mi Fangame
Mis Recursos y Tutoriales

no me abras :v

...
Reshiram y Yo hemos perdido.
¿Significa eso que tus convicciones o ideales nos han superado?
Zekrom y Reshiram...
Cada uno ha escogido a un héroe...
¿Cómo es posible tal cosa?
¿Querrá decir esto que ambos héroes, tanto el defensor de los ideales como el paladín de la verdad, tienen razón?
No lo entiendo...
Quizá no se trate de negar el pensamiento diferente, sino de integrarlo y combinar ambos...
Como en una reacción química...
¿Es esa la fórmula para
cambiar el mundo?
~ N... Negro y Blanco... ~ 2010
  #5  
14/11/2018
Predeterminado Respuesta: Cómo usar Aseprite para hacer Sprites Animados
¡Actualización del 14/11/2018!
Le agregué los atajos de teclado, con un poco de humor XD.
Mi Fangame
Mis Recursos y Tutoriales

no me abras :v

...
Reshiram y Yo hemos perdido.
¿Significa eso que tus convicciones o ideales nos han superado?
Zekrom y Reshiram...
Cada uno ha escogido a un héroe...
¿Cómo es posible tal cosa?
¿Querrá decir esto que ambos héroes, tanto el defensor de los ideales como el paladín de la verdad, tienen razón?
No lo entiendo...
Quizá no se trate de negar el pensamiento diferente, sino de integrarlo y combinar ambos...
Como en una reacción química...
¿Es esa la fórmula para
cambiar el mundo?
~ N... Negro y Blanco... ~ 2010
  #6  
21/11/2018
Predeterminado Re: Cómo usar Aseprite para hacer Sprites Animados Act. 14/11
Bueno, bueno, bueno... Lo primero será felicitarte por tan útil tutorial que has posteado. ¡Muchas gracias! Está genial.
Luego, debo decirte que has explicado todo muy bien y que, si bien como dice Kleini, podría estar más ordenadito, se entiende. Eso es un gran mérito y lo primero que debes lograr en un tuto.

También diré que el método es muy interesante y que me ha quedado claro cómo animar sprites.
Además, te has pasado dándonos ese tour por la herramienta, contándonos para qué funciona cada parte de ella. Y en esta actualización, has profundizado con los atajos de teclado, algo que es sumamente útil para todo el que use la herramienta. ¡Qué bieen!

¡A traernos más tutoriales así! Que me encanta.
Gracias: Diego Mertens
VISCA CATALUNYA!
LLIBERTAT


"Lluitem pacíficament, perquè és l'essència de la llibertat. Dubtem com qualsevol persona, perquè és l'antídot a la temeritat. Parlem com a demòcrates, perquè és la clau de l'èxit. Confiem els uns amb els altres, perquè serà la derrota dels tirans"
  #7  
22/11/2018
Predeterminado Respuesta: Re: Cómo usar Aseprite para hacer Sprites Animados Act. 14/11
¡Actualización de 21/11!:
Arreglos menores y agregué la descripción de la forma de píxeles:
Forma de píxeles, si querés que el pixel sea normal, más ancho que alto o más alto que ancho (ni idea para qué lo usarán)

Dicho por EnamoratDeKatie Ver mensaje
Luego, debo decirte que has explicado todo muy bien y que, si bien como dice Kleini, podría estar más ordenadito, se entiende. Eso es un gran mérito y lo primero que debes lograr en un tuto.
Pues, no termino de entender cómo organizar bien el tuto... Pero le he puesto Spoilers para que si no entienden alguna función específica, que pinchen el spoiler, y lo verán.
Luego agregaré más cosas, quizás cuando entienda los modos de fusión XD.
Mi Fangame
Mis Recursos y Tutoriales

no me abras :v

...
Reshiram y Yo hemos perdido.
¿Significa eso que tus convicciones o ideales nos han superado?
Zekrom y Reshiram...
Cada uno ha escogido a un héroe...
¿Cómo es posible tal cosa?
¿Querrá decir esto que ambos héroes, tanto el defensor de los ideales como el paladín de la verdad, tienen razón?
No lo entiendo...
Quizá no se trate de negar el pensamiento diferente, sino de integrarlo y combinar ambos...
Como en una reacción química...
¿Es esa la fórmula para
cambiar el mundo?
~ N... Negro y Blanco... ~ 2010
Respuesta

Herramientas
Desplegado

Permisos para publicar mensajes
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los BB code están Activado
Los Emoticones están Activado
El código [IMG] está Activado
El Código HTML está Desactivado
Trackbacks are Activado
Pingbacks are Activado
Refbacks are Desactivado



Extra
Estilo clásico
La franja horaria es GMT +1. Ahora son las 02:03.