¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Bueno, saben que este es un proyecto para hacer la mejor guia en español para pixel art.
Empezando creo que tendríamos que ir primero por el vocabulario:
Vocabulario:
Pixel art (abrevacion PA) (por wikipedia):
El pixel art es una forma de arte digital, creada a través de una computadora mediante el uso de programas de edición de gráficos en raster, donde las imágenes son editadas a niveles de pixeles. Las imágenes de la mayor parte de viejos videojuegos para ordenadores, videoconsola, y muchos juegos para teléfono móvil son consideradas obras de pixel art. Posee similitudes con el puntillismo, difiriendo principalmente en las herramientas para la creación de estas imágenes, computadores y programas en lugar de pinceles y lienzos.
Sketch:
los trazos en bruto recien terminados
Line art: es lo mismo que sketch pero ya mejorado y listo para pintar
Out line: sería el contorno de el dibujo, a diferencia del line art, esto es simplemente la linea que rodea el dibujo
Paleta de colores:
Son los colores que usaremos en nuestro dibujo, hay restricciones para distintas consolas de video juegos
Gradient:
Efecto que usa las variantes de tono de un color para llenar espacios, etc..
Dithering:
Efecto parecido al Gradient con la salvedad de que este alterna los tonos de colores.
Pillow shading:
Es signo de mal sombreado, como si el foco de luz viniese del centro:
Sel-Out:
Tecnica para dejar una outline apta para cualquier fondo... con esta tecnica, el sprite se verá bien en cualquier fondo, es utilizado en los juegos de pelea normalmente por su eficiencia para fusionarse con el fondo:
Anti-Alias (AA):
Aplicar suavidad a la imagen, y como todo tiene una ciencia, de casualidad me se la de esta tecnica y la voy a explicar.
1: Circulo el cual tendrá AA
2: El mismo circulo X2 y pintado de rojo
3: Un circulo de el mismo tamaño que el anterior pero con curvaz automatizadas
4: Los 2 circulos anteriores superpuestos
5: El circulo anterior en cuadricula
6: Valores
7: El primer circulo en cuadricula
8: El mismo anterior, solo que aplicando los valores del circulo X2 en cuadricula
9: El mismo anterior pero sin lo verde
10: Unido de nuevo
Y eso es basicamente la ciencia del AA, obviamente nadie lo hace asi, pero es el mismo principio que sigue photoshop, flash y todos los programas que tienen difuminacion, asique el AA normalmente se aplica a mano (en el pixel art) y no se hace todo este lio, sino que se aplica a gusto del artista
Eso te lo hacen los programas casi automaticamente, pero normalmente se pone a gusto del artista, ese ejemplo solo se puede aplicar a los circulos... y es super jodido.
Graficos isometricos:
Vamos a empezar con historia xD... la isometría es una vista que se utiliza en dibujo tecnico para apreciar la figura entera y no solo una cara.
Estos graficos, en papel tienen una inclinacion de 30 grados, pero en pixel art es de 26.565º ya que la linea de 30 grados es irregular... estos graficos dan la sensacion 3D:
Sprites:
Sprites son los dibujos de los personajes... por ejemplo en el pokemon si te aparece un pikachu, sería el sprite de pikachu. ::)
Frames:
Son cada movimiento de un sprite, sin frames no existiria animacion... ejemplo:
Ahí tenemos 3 frames distintos de un mismo personaje... si los juntamos nos quedaría una animacion del panda, como ésta:
Con eso ya tienes basicamente lo principal en vocabulario, pasemos al siguiente punto...
Colores:
Si tomas un color bien clarito (amarillo clarito)... ese será el color "luz" luego tomas otro color como intermedio, pero que no sea amarillo, o que este cerca del color amarillo pero que no sea de la misma gama... y como color oscuro tomas OTRO color distinto al intermedio, osea... ya sea un azul oscuro o demás, y te quedará algo asi:
Lindos cierto? xD, pero si intentamos hacer un pixel art con esos colores, nos quedará bastante pobre, lo que podemos hacer es crear colores intermedios entre cada tono Como se hace eso?, facil, habre el photoshop, con el cuenta gotas selecciona el color mas oscuro, y luego pone el lapiz (LAPIZ, NO pincel) y pones tamaño del lapiz 1, y entonces sales de ahi como para comenzar a dibujar y precionas con el teclado NUMERICO, 50 y ahi pasas el lapiz por el del medio y se te creara un color intermedio entre el oscuro y el normal... y asi con los demas, y te quedará algo asi:
y asi se tienen colores lindos, y con tan solo cambiar el color intermedio cambia TODA la gama de colores, mira por ejemplo, esos colores los hice hace tiempo y los use para hacer estos:
Sino la mas comun para ir haciendo colores es abrir el photoshop y a la derecha donde estan los colores ir buscando colores que queden lindos...
Y si no otra es tomar una de esas firmas modernas TAN coloridas, tomar un pedacito que te gusten los colores, ejemplo:
Ese pedazo ponerlo en photoshop, e ir a "archivo/guardar para web" o "control + alt + shift + S" y de ahi en la derecha pones las opciones como en la siguiente imagen y te tirará la cantidad de colores especificados, y de esos colores puedes elejir algunos que te gusten:
Colorear:
Hay muuuuchos metodos, aqui veremos los mas comunes, hasta los ilegales y poco comunes. :roto2:
Primero que tenemos nuestro line art para colorear, ponemos un sol en la ezquina superior izquierda o donde quieras el foco de luz... creas los colores que usaras o los creas mientras la marcha... seleccionas un color base y empiezas a pintar:
La siguiente parte es solo para mostrar las posibles soluciones y/o formas de hacer algo, no pretendemos que lo hagan así, y si lo hacen asi, el pixel art pierde su esencia]
OTRA forma de pintar y a mi combeniencia con mejores resultados, pero desonesta jajaja... es seleccionar un par de colores, en mi caso estos:
y de ahi abrir photoshop pegar el line art, con la varita magica seleccionamos el area a pintar
IMPORTANTE, la varita tiene que estar asi sus opciones:
una vez seleccionada el area a pintar creamos nueva capa, y pintamos con el PINCEL con los colores que creamos anteriormente....
y ahora creamos una nueva capa debajo de la de donde pintamos y pintamos el fondo con algun color que contenga la paleta, quedará asi:
Ahora creamos un nuevo documento que contenga SOLAMENTE nuestra paleta, asi:
entonces vamos a guardar para web y en donde nos pregunta cuantos colores le ponemos la cantidad de colores que tenga nuestra paleta, o 256 ya que no cambiará... y luego le damos a la flechita de arriba y seleccionamos "guardar paleta de colores" o algo asi, y la guardamos... y de ahi cancelamos
Luego volvemos a este documento:
y vamos a guardar para web y escojemos "cargar paleta de colores" o algo asi y seleccionamos la que guardamos recien... entonces tendremos nuestro pixel art con los colores reducidos, sacamos una foto a la pantalla y la pegamos en el paint... y encima pegamos el line art, quedará algo asi:
con la varita seleccionamos lo que sobro y lo eliminamos... ahora manteniendo apretado CONTROL le damos click sobre la capa donde quedo nuestro bicho pintado, y se seleccionará... vamos arriba del todo que dice "seleccion", le damos en "modificar" y de ahi en "contraer" y le damos un valor de 1 y luego enter...
ya estamos listos para pintar las lineas negras que quedaron dentro, las pintamos con pincel como una imagen digital y cuando las terminemos de pintar ponemos un fondo con algun color de la paleta y repetimos el proceso de cargar la paleta guardada, y sacamos una foto, pegamos en paint y nos quedará asi:
(notese el ojo y donde tiene los bigotes)
Ya casi está terminado... lo unico que nos faltan son las outlines de fuera... esas las harémos a mano, con practica mejoraras la tecnica, y al terminar nos quedará asi:
y así estará terminado nuestro sprite
Haciendo mas profundidad en el tema de como pintar un sprite o pixel art, recien hablando con un amigo lo voy a hacer por el :-X aqui va:
Para pintar nosotros hoy pintaremos un dibujo de una Calavera echo por *, aca tenemos como lo hize, ahora paso a explicar paso a paso:
El primero es como lo pinto mi amigo, que se excusa con que es dificil pintar con pocos colores.
seguimos... tomé el line art (el segundo dibujo)
luego pinte de color base (el tercero)
pinte la luz, mas o menos de donde venía y a lo bruto
despues profundisé un poco mas la luz y agregué un poco de sombra en donde no llegaba la luz
fui agregando mas sombra y mas luz en lugares especificos y asi
empezé a agregar un poco mas de luz en mas partes del esqueleto para dar mas volumen (octavo dibujo)
y el anteultimo ya tiene algunos detalles mas, como la luz proveniente de la izquierda
y el ultimo es el de mi amigo, aqui pueden ver como se diferencia y tiene mas volumen .
y psss, fue todo echo en el paint en 5 minutos xD, seguro que mi amigo se tardo mucho mas de 5 minutos en hacer todo el dithering que tiene el dibujo de el :o!
Isometrico:
Empezemos, como dije los graficos isometricos son aquellos que simulan ser 3D pero en 2D, se usa originalmente para hacer perspectivas de piezas y objetos pa ver como quedarian ya construido...
no puedo explicar mucho ya que de esto se poco y nada, pero voy a intentar sacar lo mas posible jajaja:
El Isometrico original es de 30 grados, pero en pixel art, una linea de 30 grados queda irregular, asique va a ser de 26,565º y nos quedaría una linea pareja, uno de los metodos mas utilizados es el hacer la pieza primero el lineart y luego pintar, asi:
PERO! hay otros metodos, uno de los que me "descubri" (porque seguramente no soy el primero) es hacer cosas por triangulos, hacemos las bases que son 4 triangulos de distintos colores, por ejemplo asi:
Pueden distinguir los 4 triangulos? uno de cada color, los pueden aumentar para ver sus detalles...
Ahora con eso creamos una plantilla, asi:
Parece un piso de una disco xD
y ahora con 3 colores uno mas oscuro que el otro, empezamos a pintar, yo hice esto:
Tambien hay paginas como esta:
http://www.halfshag.com/iso/
Donde pueden hacer sus bocetos isometricos y despues mejorarlo terminarlo o lo que sea en paint, o en su programa predilecto (hay que registrarse)
Tecnica de X*:
Esto se suele usar muchas veces para ocupar mas espacio y/o que se vean mejores las cosas...
La cosa es hacer que un pixel sea agrandado de tamaño sin ningun metodo de interpolacion, osea... aqui tenemos un ejemplo de un pixel art normal, un pixel art X2 y uno X3:
o sino tambien algunos pixel artistas lo usan para mostrar los detalles de su pixel art, pero un buen pixel art se hace resaltar a simple vista.
Bueno, espero les guste/sirva esta guía, opinen y ayudenme a mejorarla.
Bases: Potaziomen Z 2
Mi intencion es que hagamos crecer esta guía, ya que es la única en español sobre P-A y podrían aportar sus conocimientos.
Empezando creo que tendríamos que ir primero por el vocabulario:
Vocabulario:
Pixel art (abrevacion PA) (por wikipedia):
El pixel art es una forma de arte digital, creada a través de una computadora mediante el uso de programas de edición de gráficos en raster, donde las imágenes son editadas a niveles de pixeles. Las imágenes de la mayor parte de viejos videojuegos para ordenadores, videoconsola, y muchos juegos para teléfono móvil son consideradas obras de pixel art. Posee similitudes con el puntillismo, difiriendo principalmente en las herramientas para la creación de estas imágenes, computadores y programas en lugar de pinceles y lienzos.
Sketch:
los trazos en bruto recien terminados
Line art: es lo mismo que sketch pero ya mejorado y listo para pintar
Out line: sería el contorno de el dibujo, a diferencia del line art, esto es simplemente la linea que rodea el dibujo
Paleta de colores:
Son los colores que usaremos en nuestro dibujo, hay restricciones para distintas consolas de video juegos
Gradient:
Efecto que usa las variantes de tono de un color para llenar espacios, etc..
Dithering:
Efecto parecido al Gradient con la salvedad de que este alterna los tonos de colores.
Pillow shading:
Es signo de mal sombreado, como si el foco de luz viniese del centro:
Sel-Out:
Tecnica para dejar una outline apta para cualquier fondo... con esta tecnica, el sprite se verá bien en cualquier fondo, es utilizado en los juegos de pelea normalmente por su eficiencia para fusionarse con el fondo:
Anti-Alias (AA):
Aplicar suavidad a la imagen, y como todo tiene una ciencia, de casualidad me se la de esta tecnica y la voy a explicar.
1: Circulo el cual tendrá AA
2: El mismo circulo X2 y pintado de rojo
3: Un circulo de el mismo tamaño que el anterior pero con curvaz automatizadas
4: Los 2 circulos anteriores superpuestos
5: El circulo anterior en cuadricula
6: Valores
7: El primer circulo en cuadricula
8: El mismo anterior, solo que aplicando los valores del circulo X2 en cuadricula
9: El mismo anterior pero sin lo verde
10: Unido de nuevo
Y eso es basicamente la ciencia del AA, obviamente nadie lo hace asi, pero es el mismo principio que sigue photoshop, flash y todos los programas que tienen difuminacion, asique el AA normalmente se aplica a mano (en el pixel art) y no se hace todo este lio, sino que se aplica a gusto del artista
Eso te lo hacen los programas casi automaticamente, pero normalmente se pone a gusto del artista, ese ejemplo solo se puede aplicar a los circulos... y es super jodido.
Graficos isometricos:
Vamos a empezar con historia xD... la isometría es una vista que se utiliza en dibujo tecnico para apreciar la figura entera y no solo una cara.
Estos graficos, en papel tienen una inclinacion de 30 grados, pero en pixel art es de 26.565º ya que la linea de 30 grados es irregular... estos graficos dan la sensacion 3D:
Sprites:
Sprites son los dibujos de los personajes... por ejemplo en el pokemon si te aparece un pikachu, sería el sprite de pikachu. ::)
Frames:
Son cada movimiento de un sprite, sin frames no existiria animacion... ejemplo:
Ahí tenemos 3 frames distintos de un mismo personaje... si los juntamos nos quedaría una animacion del panda, como ésta:
Con eso ya tienes basicamente lo principal en vocabulario, pasemos al siguiente punto...
Colores:
Si tomas un color bien clarito (amarillo clarito)... ese será el color "luz" luego tomas otro color como intermedio, pero que no sea amarillo, o que este cerca del color amarillo pero que no sea de la misma gama... y como color oscuro tomas OTRO color distinto al intermedio, osea... ya sea un azul oscuro o demás, y te quedará algo asi:
Lindos cierto? xD, pero si intentamos hacer un pixel art con esos colores, nos quedará bastante pobre, lo que podemos hacer es crear colores intermedios entre cada tono Como se hace eso?, facil, habre el photoshop, con el cuenta gotas selecciona el color mas oscuro, y luego pone el lapiz (LAPIZ, NO pincel) y pones tamaño del lapiz 1, y entonces sales de ahi como para comenzar a dibujar y precionas con el teclado NUMERICO, 50 y ahi pasas el lapiz por el del medio y se te creara un color intermedio entre el oscuro y el normal... y asi con los demas, y te quedará algo asi:
y asi se tienen colores lindos, y con tan solo cambiar el color intermedio cambia TODA la gama de colores, mira por ejemplo, esos colores los hice hace tiempo y los use para hacer estos:
Sino la mas comun para ir haciendo colores es abrir el photoshop y a la derecha donde estan los colores ir buscando colores que queden lindos...
Y si no otra es tomar una de esas firmas modernas TAN coloridas, tomar un pedacito que te gusten los colores, ejemplo:
Ese pedazo ponerlo en photoshop, e ir a "archivo/guardar para web" o "control + alt + shift + S" y de ahi en la derecha pones las opciones como en la siguiente imagen y te tirará la cantidad de colores especificados, y de esos colores puedes elejir algunos que te gusten:
Colorear:
Hay muuuuchos metodos, aqui veremos los mas comunes, hasta los ilegales y poco comunes. :roto2:
Primero que tenemos nuestro line art para colorear, ponemos un sol en la ezquina superior izquierda o donde quieras el foco de luz... creas los colores que usaras o los creas mientras la marcha... seleccionas un color base y empiezas a pintar:
La siguiente parte es solo para mostrar las posibles soluciones y/o formas de hacer algo, no pretendemos que lo hagan así, y si lo hacen asi, el pixel art pierde su esencia]
OTRA forma de pintar y a mi combeniencia con mejores resultados, pero desonesta jajaja... es seleccionar un par de colores, en mi caso estos:
y de ahi abrir photoshop pegar el line art, con la varita magica seleccionamos el area a pintar
IMPORTANTE, la varita tiene que estar asi sus opciones:
una vez seleccionada el area a pintar creamos nueva capa, y pintamos con el PINCEL con los colores que creamos anteriormente....
y ahora creamos una nueva capa debajo de la de donde pintamos y pintamos el fondo con algun color que contenga la paleta, quedará asi:
Ahora creamos un nuevo documento que contenga SOLAMENTE nuestra paleta, asi:
entonces vamos a guardar para web y en donde nos pregunta cuantos colores le ponemos la cantidad de colores que tenga nuestra paleta, o 256 ya que no cambiará... y luego le damos a la flechita de arriba y seleccionamos "guardar paleta de colores" o algo asi, y la guardamos... y de ahi cancelamos
Luego volvemos a este documento:
y vamos a guardar para web y escojemos "cargar paleta de colores" o algo asi y seleccionamos la que guardamos recien... entonces tendremos nuestro pixel art con los colores reducidos, sacamos una foto a la pantalla y la pegamos en el paint... y encima pegamos el line art, quedará algo asi:
con la varita seleccionamos lo que sobro y lo eliminamos... ahora manteniendo apretado CONTROL le damos click sobre la capa donde quedo nuestro bicho pintado, y se seleccionará... vamos arriba del todo que dice "seleccion", le damos en "modificar" y de ahi en "contraer" y le damos un valor de 1 y luego enter...
ya estamos listos para pintar las lineas negras que quedaron dentro, las pintamos con pincel como una imagen digital y cuando las terminemos de pintar ponemos un fondo con algun color de la paleta y repetimos el proceso de cargar la paleta guardada, y sacamos una foto, pegamos en paint y nos quedará asi:
(notese el ojo y donde tiene los bigotes)
Ya casi está terminado... lo unico que nos faltan son las outlines de fuera... esas las harémos a mano, con practica mejoraras la tecnica, y al terminar nos quedará asi:
y así estará terminado nuestro sprite
Haciendo mas profundidad en el tema de como pintar un sprite o pixel art, recien hablando con un amigo lo voy a hacer por el :-X aqui va:
Para pintar nosotros hoy pintaremos un dibujo de una Calavera echo por *, aca tenemos como lo hize, ahora paso a explicar paso a paso:
El primero es como lo pinto mi amigo, que se excusa con que es dificil pintar con pocos colores.
seguimos... tomé el line art (el segundo dibujo)
luego pinte de color base (el tercero)
pinte la luz, mas o menos de donde venía y a lo bruto
despues profundisé un poco mas la luz y agregué un poco de sombra en donde no llegaba la luz
fui agregando mas sombra y mas luz en lugares especificos y asi
empezé a agregar un poco mas de luz en mas partes del esqueleto para dar mas volumen (octavo dibujo)
y el anteultimo ya tiene algunos detalles mas, como la luz proveniente de la izquierda
y el ultimo es el de mi amigo, aqui pueden ver como se diferencia y tiene mas volumen .
y psss, fue todo echo en el paint en 5 minutos xD, seguro que mi amigo se tardo mucho mas de 5 minutos en hacer todo el dithering que tiene el dibujo de el :o!
Isometrico:
Empezemos, como dije los graficos isometricos son aquellos que simulan ser 3D pero en 2D, se usa originalmente para hacer perspectivas de piezas y objetos pa ver como quedarian ya construido...
no puedo explicar mucho ya que de esto se poco y nada, pero voy a intentar sacar lo mas posible jajaja:
El Isometrico original es de 30 grados, pero en pixel art, una linea de 30 grados queda irregular, asique va a ser de 26,565º y nos quedaría una linea pareja, uno de los metodos mas utilizados es el hacer la pieza primero el lineart y luego pintar, asi:
PERO! hay otros metodos, uno de los que me "descubri" (porque seguramente no soy el primero) es hacer cosas por triangulos, hacemos las bases que son 4 triangulos de distintos colores, por ejemplo asi:
Pueden distinguir los 4 triangulos? uno de cada color, los pueden aumentar para ver sus detalles...
Ahora con eso creamos una plantilla, asi:
Parece un piso de una disco xD
y ahora con 3 colores uno mas oscuro que el otro, empezamos a pintar, yo hice esto:
Tambien hay paginas como esta:
http://www.halfshag.com/iso/
Donde pueden hacer sus bocetos isometricos y despues mejorarlo terminarlo o lo que sea en paint, o en su programa predilecto (hay que registrarse)
Tecnica de X*:
Esto se suele usar muchas veces para ocupar mas espacio y/o que se vean mejores las cosas...
La cosa es hacer que un pixel sea agrandado de tamaño sin ningun metodo de interpolacion, osea... aqui tenemos un ejemplo de un pixel art normal, un pixel art X2 y uno X3:
o sino tambien algunos pixel artistas lo usan para mostrar los detalles de su pixel art, pero un buen pixel art se hace resaltar a simple vista.
Bueno, espero les guste/sirva esta guía, opinen y ayudenme a mejorarla.
Bases: Potaziomen Z 2
Mi intencion es que hagamos crecer esta guía, ya que es la única en español sobre P-A y podrían aportar sus conocimientos.
¡Soy el fantasma de Habtium! Me dedico a reemplazar aquellas cuentas que han sido eliminadas. 👻