¡Bienvenido a Universo Maker!
¿Es esta la primera vez que visitas el foro? Si es así te recomendamos que te registres para tener completo acceso a todas las áreas y secciones del foro, así también podrás participar activamente en la comunidad. Si ya tienes una cuenta, conectate cuanto antes.
Iniciar Sesión Registrarme

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

Reputación del mensaje :100% (3 votos)

LuRen

avatar
Saludos.  Opalo Hola

Se que muchos que manejan el Rpg Maker quieren que su proyecto sea distinto y especial, y uno de los detalles que mas da identidad a un juego son los personajes únicos, pero para obtenerlos se requiere una edición/creación con PhotoShop u otro programa.

Sin embargo, no todos tienen dichos recursos, o no saben usarlos. Por eso presento este breve tutorial sobre “Piskel”, un programa muy útil a la hora de hacer Pixel Art. El programa es gratuito, de código abierto y funciona tanto online como offline.

El link esta al final del tutorial.

Piskel no esta disponible en español y aunque es sencillo de usar, es conveniente saber un poco de sus funciones básicas para empezar rápido. Aquí entró yo, que aunque llevo poco tiempo usándola, al menos puedo ofrecerles las nociones más básicas para quien le resulte útil y no quiera empezar desde cero.  Opalo Enojado

Empezando:

En primer lugar, se puede usar sin problemas los controles deshacer (ctrl+z), rehacer (ctrl+y), cortar (ctrl+x), copiar (ctrl+c) y pegar (ctrl+v) pero para abrir o guardar usaremos las opciones de la parte derecha de la pantalla. Empezaremos con abrir:
Aquí hay varias opciones, pero “Browse images” es la más relevante ya que te permite abrir imágenes que no están formato “.piskel” para editarlas.
Una vez selecciones el archivo que quieres se abrirá una pantalla así:
En mi caso, abriré el sprite de un enemigo de Terranigma. Al hacer click en “Import” veremos un aviso de que los cambios que no hayamos guardado se perderán. Esto sale siempre.

Una vez que el archivo esta abierto, Piskel detecta los colores usados y prepara una paleta con ellos (en la esquina inferior derecha). Con el botón en forma de cruz puedes crear una nueva paleta, y con el botón como lápiz o pincel puedes editar la paleta ya existente. Además, si quieres agrandar la imagen para trabajar mejor puedes situar el cursor encima y usar la rueda del Mouse.
En la esquina superior izquierda veremos una miniatura de la imagen y abajo la opción “Add new frame”. Si hacemos click en esta opción se creará un área de trabajo en blanco, del mismo tamaño que la primera. Esto sirve para hacer animaciones.
Como una nota, si importamos un gif, el programa separará cada imagen que lo compone automáticamente y abrirá un frame para cada una.

Herramientas y opciones:

Ahora, para no hacerlo demasiado largo, repasaré rápidamente las opciones más útiles del programa:
El borde amarillo nos indica en que “frame” estamos, y las otras opciones que se nos presenta nos ayudan a borrar el frame (el tacho de basura), duplicarlo en un nuevo frame (las dos hojas superpuestas) y cambiar el orden moviendo el frame de arriba hacia abajo o viceversa (las flechas en cruz).

Las herramientas de la izquierda son las que usaremos para “dibujar” y cosas así, por lo que le he agregado números a la imagen para explicarla más cómodamente:

1. La siempre confiable herramienta del Lápiz. No hay mucho más que decir al respecto.

2. Lápiz espejo… se usa para cosas simétricas. Tu solo dibujas la mitad, y un lápiz automático va copiando lo que haces como si fuera un espejo.

3. El cubo/bote de pintura. Rellena una zona entera de un mismo color.

4. Este es similar al anterior, solo que remplaza un color por otro en todo el dibujo, aun si no son zonas conectadas.

5. Un borrador. No hay mucho más que decir al respecto.

6. Voy a ser sincero… esta si que no la he utilizado.

7. Haciendo click y moviendo sin soltar hace una figura cuadrada o rectangular.

8. Lo mismo que el anterior, solo que la figura es circular u ovalada.

9. Sirve para arrastrar el dibujo.

10. Esta es para seleccionar y controlar la posición. Lo explicaré con un ejemplo más adelante.

11. Selecciona formas. Tampoco la he usado.

12. Aclara la zona donde la usas. Si presionas control mientras la utilizas, oscurecerá en lugar de aclarar.

13. Selecciona colores para usar con el lápiz.


Ahora, en la parte superior izquierda verás tres zonas (les he puesto números) que tienen algunas opciones más:
1. Aquí se ve como va quedando el proyecto. Si ampliaste la imagen con la rueda para trabajar mejor, aquí puede aparecer un recuadro que te muestra que sector de la imagen estas viendo. Agarrando y arrastrando el recuadro puedes moverte por el resto de la imagen. En la esquina superior de esta zona puedes hacer click a un cuadrito para que te aparezca una vista previa de tu trabajo.

La barra que tiene un 12 al lado es una opción para cuando tienes más de un frame. Va mostrando tus frame en sucesión para que puedas ver como quedaría si fuera un gif. Puedes aumentar la velocidad o disminuirla, aunque lo mas común es disminuirla.

2. Esta zona tiene opciones para agregar “capas”, pero aún no la uso a profundidad.

3. Esta zona tiene opciones para voltear y rotar la imagen (las dos primeras), así como clonar el frame actual en todos los demás frames (la oveja).

Cosas finales.:

Para ir terminando mostrare como usar las opciones de seleccionar y controlar la posición. Usando el rectángulo punteado podemos seleccionar una zona, la cual quedara marcada en blanco.
Hecho esto podemos cortar o copiar la zona. Sin embargo esta seguirá estando marcada en blanco y aparecerá una mano como cursor. ¿Para que sirve esto? Para posicionar donde vamos a pegar la selección. Solo debemos arrastrar la zona blanca y aparecerá una transparencia de lo que estamos cortando/copiando. Esta transparencia estará presente en todos los frames que tengamos.
Así podemos situar la transparencia comparando su posición para que concuerde con la primera imagen y luego ir a otro frame y pegar.
De este modo vemos que comienza a formarse una animación en la zona de la vista previa. Así podemos ir editando los detalles de un chara y además ir viendo como quedaría cuando se moviera. Como este es un tutorial corto sobre el programa, y no sobre edición, no pongo otros ejemplos.  ¡Que no!

Para finalizar, solo queda guardar, para lo cual usamos esta opción:
Se abrirán opciones de cómo guardar el archivo.
"Download png" sirve para sacar una tira con todos los frames pegados lado a lado.

"Download zip" sirve para obtener un comprimido con cada frame como un archivo de imagen. Esta o la anterior pueden ser útiles, pero por supuesto… habría que acomodar todo.

"Download gif" sirve para guardar el proyecto como un gif animado.

Casi lo olvido... un poco más arriba de "Export" e "Import" está la opción "Resize", que sirve para cambiar el tamaño de la imagen (y afecta a todos los frames), pero si la usas es conveniente desactivar la opción "Maintain aspect ratio".

Es todo, espero que si alguien tuvo la paciencia de leer hasta aquí encuentre algo útil.  Opalo Triste

El link es este.
Si quieren el programa sin usar Internet, busquen “offline versions”. Esta casi al final...

Saludos. Opalo Hola
Extra:

Modificando al mencionado enemigo, aquí presento a un personaje de mi proyecto (aún me falta modificar el yelmo, pero...). Contemplad a Crystal Knight.  Ópalo Aplaudiendo

Tomate

avatar
Ópalo Aplaudiendo

Tutorial Completo, con imágenes, explicaciones paso a paso, link de descarga del programa oficial, ilustración con ejemplos propios, muy buena presentación del tema y buena redacción. ¡¡Excelente, Ginrei!!

Este tutorial vendrá genial para próximos concursos de Pixel Art del foro, podríamos dar un link directo a este tutorial para encaminar a aquellas personas no insertas en el mundo de los píxeles. Ópalo Contento ¡Es estupendo!

¡MUCHAS GRACIAS POR TAN BUEN APORTE! Los tutoriales nunca están de más. Ópalo Guiño

Ópalo Reputación Ópalo Reputación

Matimike

avatar
Amigo @Ginrei, te adelantaste (tenía pensado hacer el tutorial del programa en estos días Ópalo Triste, yo ya conocía el programa de hace tiempo), tú has explicado cómo usarlo y demás, pero este programa ya lo anuncié yo en un comentario en el que lo utilizaba para hacer mis primeros battlers.

Tengo pruebas  Ópalo Buscapleitos
http://www.universomaker.net/t3346p10-mis-primeros-battlers-pixelados#18926
Como dice @Tomate, el programa servirá para futuros amantes del Pixel Art y que quieren empezar a hacer sus creaciones (como me pasó a mi cuando encontré el programa)

¡Nos vemos Ópalo Contento!

Bleuw

avatar
Mirá como camina ese caballero : D

Buen tutorial, en general yo uso los tutoriales para ver algo puntual, por lo que siempre que haya un tutorial completo sirve pues porque está todo resumido en un lugar en caso de tener más dudas.
Yo este programa lo tengo bajado y nunca lo usé porque me acostumbré a otro, pero quizá un día lo pruebe ahora que tengo una guía, para ver si quizás me siento más cómodo en él =o

En fin, buen aporte.

Saludos.

LuRen

avatar
@Tomate gracias por el apoyo, que bien que te gustara. Ópalo Sonrisa Grande En un principio quería poner este tutorial desde antes, pero no me animaba (razón: timidez Opalo Triste). Esperemos que sirva a todos y podamos ver mas Pixel art por aquí. Ópalo Sonrisa Grande

@Matimike lo siento... no me habia fijado que ibas a hacer un tutorial sobre este programa.  Opalo Triste Bueno, igual yo solo expliqué lo básico, y puede ser considerado la introducción. Tú, conociendo el programa mejor podrías hacer algo más avanzado y complementar el conocimiento para todos.  Ópalo Aplaudiendo

@Bleuw espero este tutorial te sirva si algún día pruebas el programa. Y si, entiendo lo de estar acostumbrados a otros programas. La verdad es que aunque sea sencillo de usar y todo, yo aún uso photoshop para hacer cosas que requieran más complejidad. Aún así, pongo el programa como opción para que todos puedan tener alguna herramienta de estas a mano. Mejor que sobre a que falte... Ópalo Sonrisa Grande

reyerta

avatar
Vaya, me había dicho que sacaría un espacio para comentar en este tema, pero no lo pensé tan sensacional. ¡Un maravilloso trabajo! Muy bien explicado, con buenos ejemplos y una gran forma de presentarlo.

Un gran tutorial, espero seguir viendo muchos mas aportes tuyos en todos los campos del maker.

Gracias, ten un punto de reputación y cuando halla acabado mi primer pixel te lo.... Nah, quedará muy feo, cuando aprenda a hacerlos te daré uno xD.

LuRen

avatar
@Reyerta me alegra que te pareciera bien Ópalo Sonrisa Grande. Me hubiera gustado poner un ejemplo más detallado, paso a paso. Pero entonces pensé que me saldría de la explicación del programa para convertirlo en un tutorial de pixel art o personalización de charas, y quizás hubiera aburrido a todos. Además creo que aún tengo cosas que aprender en esas áreas... Ópalo Excusa

Opalo Hola

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.