Y el Pixel Art no para, en esta publicacion les traigo 8 videos que me han parecido bastante interesantes, donde se pueden ver algunas creaciones, la mayoria opta por el paint jejeje.
Ahi a la izquierda estoy yo sentado en mi PC xD
Los videos....
miércoles, 30 de diciembre de 2009
8 videos de Pixel Art
Y el Pixel Art no para, en esta publicacion les traigo 8 videos que me han parecido bastante interesantes, donde se pueden ver algunas creaciones, la mayoria opta por el paint jejeje.
Tutorial Pixel Art Español
Nuevamente aqui intentando mantener el nuevo blog actualizado, podriamos decir que me ''emocione'' con el Pixel-ART por eso es que nuevamente les traigo algo relacionado al tema.
Esta vez no son imagenes de Pixel Art sino que es un muy completo tutorial de pixel art en español.
Espero que les guste :D
Pixel art
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.
Bueno ahora unas cosas basicas
Vocabulario Especifico
PIXELART : Técnica de dibujo realizada punto por punto donde se pueden crear dibujos, imágenes, animaciones etc..
Line-Art : Es el dibujo o imagen hecho con líneas en blanco y negro.
Sel-Out : Técnica aplicada mayoritariamente en sprites de lucha tipo Strets Fighters, pero que puede ser aplicada a cualquier imagen y que como veis en el ejemplo, este donde este el dibujo parece como si estuviera hecho para ese color fondo pero no es así.
Gradient : Efecto que usa las variantes de tono de un color para llenar espacios, etc..
Pillow Shading : es cuando haces líneas consecutivas de color para simular sombras : 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.
OUTLINE : Esto seria el contorno del grafico, a diferencia del Line-art es simplemente la línea que rodea al dibujo.
Paleta De Colores : Serán todos los colores que usemos para nuestro dibujo. Hay gente que selecciona los colores, hacen sus propias paletas para luego dibujar u otros hacen el dibujo probando colores a 24bits luego reducen etc...
Vocabulario General
AA/Anti-Alias : Efecto que proporciona a una imagen sensación de suavidad y se utiliza un color medio entre el color que queremos suavizar y el fondo.
Gráficos Isométricos : Son aquellos gráficos hechos en perspectiva isométrica vistos a 26.565º
Sprite : Los sprites son las imágenes de los personajes, bichos, etc. Por ejemplo los personajes del Streets of fighter son Sprites, el muñeco que manejas en los rpg es un sprite, se podría decir que todo lo que puedas manejar/controlar es un sprite (un coche en el gta1, un personaje del final fight....). Como ejemplo esto serian los frames del sprite de un juego.
Frames : Los frames son los componentes de la animación de un "sprite" al andar, correr, saltar... por lo cual gracias a los frames podemos ver al personaje moverse por la pantalla. También decir que cuando mas frames tenga una animación mejor suavidad le dara a los movimientos y mas realista será el Sprite.
Con esto ya tenéis unos conocimientos "técnicos" por decirlo de alguna manera del Pixel-Art, así que ahora no os extrañareis si os dicen "Si le aplicas Sel-out al sprite quedara mejor" "Eh! eso esta hecho en perspectiva isométrica" "Mejor será que le cambies el Outline negro por otro color..." "Has usado demasiado dithering" etc....
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.
Bueno ahora unas cosas basicas
Vocabulario Especifico
PIXELART : Técnica de dibujo realizada punto por punto donde se pueden crear dibujos, imágenes, animaciones etc..
Line-Art : Es el dibujo o imagen hecho con líneas en blanco y negro.
Sel-Out : Técnica aplicada mayoritariamente en sprites de lucha tipo Strets Fighters, pero que puede ser aplicada a cualquier imagen y que como veis en el ejemplo, este donde este el dibujo parece como si estuviera hecho para ese color fondo pero no es así.
Gradient : Efecto que usa las variantes de tono de un color para llenar espacios, etc..
Pillow Shading : es cuando haces líneas consecutivas de color para simular sombras : 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.
OUTLINE : Esto seria el contorno del grafico, a diferencia del Line-art es simplemente la línea que rodea al dibujo.
Paleta De Colores : Serán todos los colores que usemos para nuestro dibujo. Hay gente que selecciona los colores, hacen sus propias paletas para luego dibujar u otros hacen el dibujo probando colores a 24bits luego reducen etc...
Vocabulario General
AA/Anti-Alias : Efecto que proporciona a una imagen sensación de suavidad y se utiliza un color medio entre el color que queremos suavizar y el fondo.
Gráficos Isométricos : Son aquellos gráficos hechos en perspectiva isométrica vistos a 26.565º
Sprite : Los sprites son las imágenes de los personajes, bichos, etc. Por ejemplo los personajes del Streets of fighter son Sprites, el muñeco que manejas en los rpg es un sprite, se podría decir que todo lo que puedas manejar/controlar es un sprite (un coche en el gta1, un personaje del final fight....). Como ejemplo esto serian los frames del sprite de un juego.
Frames : Los frames son los componentes de la animación de un "sprite" al andar, correr, saltar... por lo cual gracias a los frames podemos ver al personaje moverse por la pantalla. También decir que cuando mas frames tenga una animación mejor suavidad le dara a los movimientos y mas realista será el Sprite.
Con esto ya tenéis unos conocimientos "técnicos" por decirlo de alguna manera del Pixel-Art, así que ahora no os extrañareis si os dicen "Si le aplicas Sel-out al sprite quedara mejor" "Eh! eso esta hecho en perspectiva isométrica" "Mejor será que le cambies el Outline negro por otro color..." "Has usado demasiado dithering" etc....
TRUCOS DEL PAINT DE WINDOWS
Truco 1 : Como hacer de manera fácil círculos y cuadrados perfectos?
Con la herramienta del cuadrado o elipse seleccionada se mantiene presionada la tecla "Tab" mientras se arrastra el puntero del Mouse.
De esta forma no tenéis que estar pendientes de los píxeles que se marcan abajo.
Truco 2:
Con la herramienta de crear polígonos, si mantenéis presionado "Shit izquierda" podréis crear ángulos de 45º y 90º de una forma sencilla.
Truco 3: Basta de tanto "Control+C" y "Control+V"
Ahora para copiar y pegar un grafico lo que hacéis es seleccionar parte de una imagen "Control+C" copiáis y "Control+V" para pegarlo donde queráis. Pues para mas rapidez simplemente seleccionáis la parte de la imagen, presionáis la tecla "control" y con ella presionada arrastráis la copia a otro lugar, así de sencillo.
Truco 4: Efectos Paint.
Si queréis hacer un efecto extraño con Paint, seleccionar una imagen cualquiera, mantener presionada la tecla "Shit izquierda" y al comenzar a arrastrar la imagen veréis que cosa mas copada.
Truco 5 : Cambio de color
Imaginaros que estáis trabajando con paint, y tenéis un circulo con 2 colores que se alternan rojo y blanco... ¿como cambiáis el color de rojo a azul? píxel a píxel ?.... mejor hacer esto que os digo:
Ponéis el color rojo de primer plano y el color azul de 2 plano. seleccionáis la goma, y dejando pulsado el botón derecho del ratón y pasando la goma por el circulo rojo, veréis como en lugar de borrar cambias a color azul todo lo que haya en rojo.
Truco 6 :
Imaginaros que dentro de un cuadrado, circulo o selección de una imagen queréis poner una textura hecha con paint etc... y que pasa si hacemos lo que ocurre en el 1 caso?, pues que nos tocara quitar píxel a píxel hasta recortar toda la textura que sobra del circulo lo que nos llevara un ratito y mas si el circulo fuera de dimensiones mayores. Una forma mas fácil seria ponerle al circulo un cuadrado azul como veis y ponerlo encima de la textura y luego borramos el color azul y en un segundo tenemos el circulo listo.
Truco 7 : Eliminar colores molestos
Imaginaros que tenéis hecha una palabra con una plantilla isométrica, ¿Como la sacaríais? borrando con la goma cuidadosamente?. ¿Como borrarías el contenido en color rojo del circulo superior? ¿También con la goma despacio para no borrar parte del circulo?, ¿ Y en el circulo de abajo ?.
Pues bueno se puede hacer en menos de 5 segundos, seleccionáis como color de 2 plano el que queráis eliminar, seleccionáis la imagen, pulsáis control y la lleváis a otro sitio con lo cual tendréis el mismo dibujo pero sin el color de 2 plano. Claro esta si queréis eliminar 3 o 4 colores también podréis hacerlo de esta manera.
También como podéis ver en la segunda imagen lo podéis utilizar para eliminar el outline negro después de haber acabado una imagen, o si después de hacer un resize o una imagen donde habéis cometido un error y en un circulo os salgan unos colores molestos que queréis eliminar haced esto.
Truco 1 : Como hacer de manera fácil círculos y cuadrados perfectos?
Con la herramienta del cuadrado o elipse seleccionada se mantiene presionada la tecla "Tab" mientras se arrastra el puntero del Mouse.
De esta forma no tenéis que estar pendientes de los píxeles que se marcan abajo.
Truco 2:
Con la herramienta de crear polígonos, si mantenéis presionado "Shit izquierda" podréis crear ángulos de 45º y 90º de una forma sencilla.
Truco 3: Basta de tanto "Control+C" y "Control+V"
Ahora para copiar y pegar un grafico lo que hacéis es seleccionar parte de una imagen "Control+C" copiáis y "Control+V" para pegarlo donde queráis. Pues para mas rapidez simplemente seleccionáis la parte de la imagen, presionáis la tecla "control" y con ella presionada arrastráis la copia a otro lugar, así de sencillo.
Truco 4: Efectos Paint.
Si queréis hacer un efecto extraño con Paint, seleccionar una imagen cualquiera, mantener presionada la tecla "Shit izquierda" y al comenzar a arrastrar la imagen veréis que cosa mas copada.
Truco 5 : Cambio de color
Imaginaros que estáis trabajando con paint, y tenéis un circulo con 2 colores que se alternan rojo y blanco... ¿como cambiáis el color de rojo a azul? píxel a píxel ?.... mejor hacer esto que os digo:
Ponéis el color rojo de primer plano y el color azul de 2 plano. seleccionáis la goma, y dejando pulsado el botón derecho del ratón y pasando la goma por el circulo rojo, veréis como en lugar de borrar cambias a color azul todo lo que haya en rojo.
Truco 6 :
Imaginaros que dentro de un cuadrado, circulo o selección de una imagen queréis poner una textura hecha con paint etc... y que pasa si hacemos lo que ocurre en el 1 caso?, pues que nos tocara quitar píxel a píxel hasta recortar toda la textura que sobra del circulo lo que nos llevara un ratito y mas si el circulo fuera de dimensiones mayores. Una forma mas fácil seria ponerle al circulo un cuadrado azul como veis y ponerlo encima de la textura y luego borramos el color azul y en un segundo tenemos el circulo listo.
Truco 7 : Eliminar colores molestos
Imaginaros que tenéis hecha una palabra con una plantilla isométrica, ¿Como la sacaríais? borrando con la goma cuidadosamente?. ¿Como borrarías el contenido en color rojo del circulo superior? ¿También con la goma despacio para no borrar parte del circulo?, ¿ Y en el circulo de abajo ?.
Pues bueno se puede hacer en menos de 5 segundos, seleccionáis como color de 2 plano el que queráis eliminar, seleccionáis la imagen, pulsáis control y la lleváis a otro sitio con lo cual tendréis el mismo dibujo pero sin el color de 2 plano. Claro esta si queréis eliminar 3 o 4 colores también podréis hacerlo de esta manera.
También como podéis ver en la segunda imagen lo podéis utilizar para eliminar el outline negro después de haber acabado una imagen, o si después de hacer un resize o una imagen donde habéis cometido un error y en un circulo os salgan unos colores molestos que queréis eliminar haced esto.
CRITICAS CONSTRUCTIVAS
1- Añadiendo mas contraste!!!!
¿Porque la gente que empieza hace los dibujos sin contraste ?. Hay varias razones, pero la mayor de ellas es porque no saben detallar. Lo voy a explicar de una forma simple.
Como veréis en la imagen la pelota esta hecha con 6 colores pero parece que solo haya 2 o 3 como mucho, pero queda como suave y bien hecha y mientras no se vean los píxeles pues bien. Ya que si pusiera un buen contraste le quedaría de la otra manera, digamos algo "horrible" jeje. Pero cuando una persona sabe detallar los objetos etc, ponle el contraste que quieras que en global quedaran bien
.
2- Evitar siempre los colores de la paleta de Windows.
Cuando se empieza en el Pixelart se suele usar mucho los colores de la paleta de Windows, así que tenéis que habituaros a crear vuestras propias paletas de colores cuando antes, ya que una imagen puede cambiar muchísimo si utilizáis colores Windows o una hecha por vosotros. A colores Windows me refiero a todos los colores que tenéis en la paleta de Windows y sus variantes de tono.
3- Quitar el contorno negro "Outline" y sustitúyelo por un color oscuro dependiendo de la zona donde este.
Esto ya depende del dibujo, por ejemplo si quieres hacer un juego y te gusta que los objetos tengan contorno negro se lo puedes poner, pero si es un dibujo normal y corriente o también para juegos es preferible quitarlo. ej:
4- Añadiendo AA /Anti-Alias a las líneas de Dentro/Fuera.
Lo que hay que hacer es simplemente lo que se dice añadirle AA a las líneas de dentro de la imagen para que queden suaves y quede el dibujo mejor detallado. Dependiendo del dibujo podremos hacer el AA con colores que usa la imagen (1), en otros caso necesitaremos añadir 1 o 2 colores para crear este efecto (2).
DENTRO
FUERA
Y por ultimo recuerda grabar tus creaciones en formato GIF o PNG ya que si lo hacen en jpg perderán calidad y para el Pixel-Art se debe mostrar la imagen sin perdida de datos.
COLOREANDO NUESTRAS IMÁGENES
1 - EJEMPLO
Os voy a poner algunos ejemplos de como colorear nuestros pixelarts y pasos a seguir.
1 - Seleccionamos la zona que queremos colorear y la apartamos de la imagen que estamos haciendo, aplicando el color mas brillante y utilizando los demás colores creando el volumen del objeto.
2 - Añadimos como detalle 2 líneas y haciendo en los laterales un efectos de redondeo para que no se vea tan plano el dibujo.
3 - Coloreamos esas rayas pintándolas de un color intermedio y creando con un color el brillo y con el otro la sombra.
4 - Retocamos partes de la imagen donde podemos añadir anti-alias, retocar algunas líneas, mejorar el efecto de profundidad del objeto como se ha hecho en este caso etc...
2 - EJEMPLO
1 - Se hace un primer intento de sombreado para darle forma al objeto.
2 - Añadimos todos los colores que creamos convenientes para que quede un buen contraste sin sobrecargarlo detallando mejor las zonas de brillo y sombras.
3 - Aplicamos detalles y un poco de dithering a la imagen.
4 - Cambiamos el color de las partes del objeto que no nos gustan hasta dejarlo perfecto.
3 - EJEMPLO
Para hacer dibujos mas grandes es mejor separarlo por partes e ir coloreando una por una y después juntarlo. Como podéis ver poco a poco se va formando lo que será la imagen final, podemos empezar una idea de color y que no nos guste y cambiarla o hacer varias pruebas, combinarlas etc y seguir el estilo usado en todas las demás.
Bueno esto es lo basico despues voy a hacer otros posts con mas tutoriales de efectos
1- Añadiendo mas contraste!!!!
¿Porque la gente que empieza hace los dibujos sin contraste ?. Hay varias razones, pero la mayor de ellas es porque no saben detallar. Lo voy a explicar de una forma simple.
Como veréis en la imagen la pelota esta hecha con 6 colores pero parece que solo haya 2 o 3 como mucho, pero queda como suave y bien hecha y mientras no se vean los píxeles pues bien. Ya que si pusiera un buen contraste le quedaría de la otra manera, digamos algo "horrible" jeje. Pero cuando una persona sabe detallar los objetos etc, ponle el contraste que quieras que en global quedaran bien
. 2- Evitar siempre los colores de la paleta de Windows.
Cuando se empieza en el Pixelart se suele usar mucho los colores de la paleta de Windows, así que tenéis que habituaros a crear vuestras propias paletas de colores cuando antes, ya que una imagen puede cambiar muchísimo si utilizáis colores Windows o una hecha por vosotros. A colores Windows me refiero a todos los colores que tenéis en la paleta de Windows y sus variantes de tono.
3- Quitar el contorno negro "Outline" y sustitúyelo por un color oscuro dependiendo de la zona donde este.
Esto ya depende del dibujo, por ejemplo si quieres hacer un juego y te gusta que los objetos tengan contorno negro se lo puedes poner, pero si es un dibujo normal y corriente o también para juegos es preferible quitarlo. ej:
4- Añadiendo AA /Anti-Alias a las líneas de Dentro/Fuera.
Lo que hay que hacer es simplemente lo que se dice añadirle AA a las líneas de dentro de la imagen para que queden suaves y quede el dibujo mejor detallado. Dependiendo del dibujo podremos hacer el AA con colores que usa la imagen (1), en otros caso necesitaremos añadir 1 o 2 colores para crear este efecto (2).
DENTRO
FUERA
Y por ultimo recuerda grabar tus creaciones en formato GIF o PNG ya que si lo hacen en jpg perderán calidad y para el Pixel-Art se debe mostrar la imagen sin perdida de datos.
COLOREANDO NUESTRAS IMÁGENES
1 - EJEMPLO
Os voy a poner algunos ejemplos de como colorear nuestros pixelarts y pasos a seguir.
1 - Seleccionamos la zona que queremos colorear y la apartamos de la imagen que estamos haciendo, aplicando el color mas brillante y utilizando los demás colores creando el volumen del objeto.
2 - Añadimos como detalle 2 líneas y haciendo en los laterales un efectos de redondeo para que no se vea tan plano el dibujo.
3 - Coloreamos esas rayas pintándolas de un color intermedio y creando con un color el brillo y con el otro la sombra.
4 - Retocamos partes de la imagen donde podemos añadir anti-alias, retocar algunas líneas, mejorar el efecto de profundidad del objeto como se ha hecho en este caso etc...
2 - EJEMPLO
1 - Se hace un primer intento de sombreado para darle forma al objeto.
2 - Añadimos todos los colores que creamos convenientes para que quede un buen contraste sin sobrecargarlo detallando mejor las zonas de brillo y sombras.
3 - Aplicamos detalles y un poco de dithering a la imagen.
4 - Cambiamos el color de las partes del objeto que no nos gustan hasta dejarlo perfecto.
3 - EJEMPLO
Para hacer dibujos mas grandes es mejor separarlo por partes e ir coloreando una por una y después juntarlo. Como podéis ver poco a poco se va formando lo que será la imagen final, podemos empezar una idea de color y que no nos guste y cambiarla o hacer varias pruebas, combinarlas etc y seguir el estilo usado en todas las demás.
Bueno esto es lo basico despues voy a hacer otros posts con mas tutoriales de efectos
Por ahora esto es todo :D creo que ya fue demasiado, espero que les haya gustado, si encontraste este post buscando en Google mucho mejor, asi se nota que el titulo del post funciona para las busquedas.
lunes, 28 de diciembre de 2009
'' Enfermos '' del Pixel Art
Ayer les presentaba el sitio Pixelians, el cual presentaba algunos personajes de series, peliculas o juegos reconocidos como Mario y Luigi.
Sinceramente puedo decirles a todos ustedes que me encanta el Pixel Art, es increible el esfuerzo y la dedicacion para poderlos crear, pero he visto a lo largo de internet, algunas imagenes realmente impactantes, que me encantaria realmente compartir con todos ustedes.
Creo que despues de ver estas imagenes, aun mejor si las vieron ampliadas, se daran cuenta el por que del titulo del post '' ENFERMOS '' creo que no hay que explicar nada o si ?
Se acuerdan del captcha de Rapidshare
Se acuerdan del viejo Captcha de Rapidshare, navegando por internet me encontre esta vieja imagen, y no pude evitar publicarla, que dias molestos para descargar con ese Captcha.
Y ustedes, ¿ Lo recuerdan?
El número primo de Google
El número primo de Google
Consideren esto como un dato muy nerd, pero es muy interesante. Todos ya sabemos que en Google aman las matemáticas, y no pierden ocasión para demostrarlo. Pues bien, aquí va algo interesante. Si toman el logo de dicha compañía y lo giran (180 grados), obtienen algo así:
Es el número 379009. Y es coincidencia que éste es un número primo. Aunque la verdad no es tan fortuito como parece y de seguro alguien con mucho tiempo libre, pensó en esta singular forma de hallar un número.
Es el número 379009. Y es coincidencia que éste es un número primo. Aunque la verdad no es tan fortuito como parece y de seguro alguien con mucho tiempo libre, pensó en esta singular forma de hallar un número.
Vía: ElGeek
[Pixelians] Dibujos Pixel Art
Pixelians es un proyecto artístico de pixel-art (dibujos hechos pixel por pixel) y se basa mas que nada en recrear personajes de juegos o películas de esta manera tan original.
Yo siempre quise aprender a dibujar en ese estilo pero... demasiado trabajo XD
Les dejo algunos de muestra:
Los personajes de Star Wars
Batman
Mario y Luigi
En fin... en total hay 110 hasta el momento y cada tanto se actualiza la lista. La última actualización fue hace unos dias debido a un nuevo diseño de navidad.
Link: Pixelians
Suscribirse a:
Entradas (Atom)