Foros del Web » Creando para Internet » Diseño Gráfico »

Imágenes pixel por pixel (PixelArt)

Estas en el tema de Imágenes pixel por pixel (PixelArt) en el foro de Diseño Gráfico en Foros del Web. Hola a todos. Algunos quizás hayan jugado Habbo Hotel, o hayan visto esas imágenes que parecen estar hechas por puros puntitos, como por ejemplo esta ...
  #1 (permalink)  
Antiguo 16/12/2004, 09:08
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
Imágenes pixel por pixel (PixelArt)

Hola a todos.

Algunos quizás hayan jugado Habbo Hotel, o hayan visto esas imágenes que parecen estar hechas por puros puntitos, como por ejemplo esta web:

http://www.electriconland.com/

¿Cómo se hace eso?...

¿AutoCAD?... No creo que se haga con Photoshop!
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.

Última edición por Takitei; 16/12/2004 a las 11:59
  #2 (permalink)  
Antiguo 16/12/2004, 09:55
Avatar de ea00d009  
Fecha de Ingreso: junio-2003
Ubicación: bariloche
Mensajes: 853
Antigüedad: 21 años, 4 meses
Puntos: 9
hola! te referis al pixelart? fijate en las faq's se habla mucho de ese tema.
__________________
You were everything, everything that I wanted We were meant to be, supposed to be, but we lost it.
  #3 (permalink)  
Antiguo 16/12/2004, 09:57
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
No sabia que se llamaba "pixelart". Es muy bonita la arte esa!...

Realmente llama mucho la atención, además... es muy delicada y suave. Relaja la vista.
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #4 (permalink)  
Antiguo 16/12/2004, 11:19
Avatar de ea00d009  
Fecha de Ingreso: junio-2003
Ubicación: bariloche
Mensajes: 853
Antigüedad: 21 años, 4 meses
Puntos: 9
si si si, a mi tambien me gusta mucho ese tipo de graficos, busca en google y el los foros, hay muchos artistas que se zarpan de buenos en ese estilo, fijate en la pagina de deviantart que tambien hay muchos.
Como soft recomendable el paint?
Saludos!
__________________
You were everything, everything that I wanted We were meant to be, supposed to be, but we lost it.
  #5 (permalink)  
Antiguo 16/12/2004, 11:58
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
Parece que en el mismo Photoshop se puede hacer, solo hay que aprender las técnicas básicas. Voy a editar el nombre del post para inicializar una conversación constructiva sobre el tema.

Links:

Pelicula realizada con la técnica pixelart: http://movie.nascimpact.com/
Página interesante sobre pixelart: http://pixel.nascimpact.com/
Tutorial para hacer isometrias en pixelart: http://www.pixelfreak.com/v3/en/tutorial0.html

Sigan posteando. Coloquen cosas interesantes, tutoriales directos. Por favor no coloquen links vagos. Un saludo!
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.

Última edición por Takitei; 16/12/2004 a las 12:13
  #6 (permalink)  
Antiguo 16/12/2004, 14:02
 
Fecha de Ingreso: diciembre-2004
Mensajes: 27
Antigüedad: 19 años, 11 meses
Puntos: 0
sabes donde púedo encontrar estos tutoriales en español
  #7 (permalink)  
Antiguo 16/12/2004, 14:17
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
Ni idea, la mayoría estan en ingles!
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #8 (permalink)  
Antiguo 16/12/2004, 20:42
Avatar de ea00d009  
Fecha de Ingreso: junio-2003
Ubicación: bariloche
Mensajes: 853
Antigüedad: 21 años, 4 meses
Puntos: 9
Sonrisa

Consejos básicos para trabajar con Pixelart

En primer lugar, como ya saben, en pixelart se trabaja pixel por pixel, así que nuestro espacio de trabajo será pequeño para la vista original del objeto y necesitaremos aplicarle un buen zoom para trabajar con cada zona.

En segundo lugar, tendremos en cuenta que todos los rasgos de nuestros objetos creados con Pixelart han de ir CONTORNEADOS CON UN COLOR OSCURO.. el color NEGRO es el más usado. De esta forma conseguiremos una mayor definición de las formas de nuestro objeto.

En tercer lugar, tener en cuenta que las líneas diagonales que usemos, tendrán que formarse con dos pixels, las líneas de esta forma quedan mucho mejor.

Lo de las líneas es importante.. no se olviden como tienen que colocar los pixels al crear líneas diagonales.

Una vez que tengamos los contornos de la figura procedemos a rellenar con color.

Primero elegimos un color base, y luego vamos aplicando luces y sombras, con líneas de color dentro de la misma gama que el color base pero con tonos más claros u oscuros.

Y con estos conceptos base .. y teniendo en cuenta que el uso de colores ha de ser mínimo... podemos proceder a la creación de nuestras figuras en pixel art.

Muy básico.. pero imprescindible.



-------------------------------------------------------------

TUTORIAL : PISCINA ISOMETRICA

En este tutorial esta explicdo como crear una piscina isometrica. El ejemplo que he creado esta hecho solo con 10 colores.

http://www.speccy.org/remakesgraph/t...sci/piscip.htm

--------------------------------

2 TUTORIAL : REFLEJOS

Este es un tutorial de reflejos que consta de 3 partes, donde se explica como crear reflejos en 2d e isometricos y en la ultima parte crearlos en el suelo.

http://www.speccy.org/remakesgraph/t...ct/reflect.htm

--------------------------------

3 TUTORIAL : RAYOS SOLARES

Este es un tutorial sencillo de como crea rayos solares en nuestras imagenes de pixel art. Claro esta lo pueden aplicar tambien en photoshop.

http://www.speccy.org/remakesgraph/t...ol/rayosol.htm

--------------------------------

4 TUTORIAL : APRENDIENDO PIXEL ART

Este tutorial no esta acabado y esta en constante progreso, donde todas las sugerencias, problemas de la gente en alguna cuestion las voy añadiendo.

Como su nombre indica tratara de explicar y enganchar a la gente en eso del PIXEL ART donde de momento hay 3 partes:

1: VOCABULARIO
2: TRUCOS DEL PAINT
3: CRITICAS CONSTRUCTIVAS

Si hay algun termino que no sepan que tenga relacion con el pixelart y no este explicado posteen y lo añadire a la lista, etc...

http://www.speccy.org/remakesgraph/t...el/vocabul.htm

Mas tutoriales todo es castellano!!:
http://www.speccy.org/remakesgraph/t...io/2dtoiso.htm
http://www.speccy.org/remakesgraph/t...io/circulo.htm
http://www.speccy.org/remakesgraph/t...osio/part2.htm
http://www.speccy.org/remakesgraph/t...el/vocabul.htm
http://www.speccy.org/remakesgraph/t...am/program.htm
http://www.speccy.org/remakesgraph/t...les/smiles.htm
http://www.speccy.org/remakesgraph/t...es/smiles2.htm
http://www.speccy.org/remakesgraph/t...olor/color.htm
http://www.speccy.org/remakesgraph/temp/temp.htm
http://www.speccy.org/remakesgraph/temp/wiso.htm (ejemplos)
http://www.speccy.org/remakesgraph/t.../logo/pro1.htm
http://www.speccy.org/remakesgraph/t.../logo/pro2.htm
http://www.speccy.org/remakesgraph/t.../logo/pro3.htm

Foros sobre pixelart:
http://www.skyforums.com.ar/foro/arc...hp/t-6533.html
http://www.worcel.com/potasiomen/ (en castellano)

Mas sobre pixel art.
http://galeon.com/troubledmind/Pixelart/darkcityv2.gif
http://groups.msn.com/pixelmx
http://www.wireframe.co.za

---------

Bueno creo que con eso ya hay para entretenerse un buen rato, me voy a poner a buscar a fondo, es sitio de un artista que esta armando toda una ciudad, con campos y todo, y el mejor detalle que se puedan imaginar.
Saludos!!
Espero les sea util.

Agregado:
http://jm.jourdane.net/gallerie/pixelart.gif
http://jm.jourdane.net/gallerie/monastere.gif
http://jm.jourdane.net/gallerie/banlieue.gif
http://jm.jourdane.net/gallerie/bubulle.gif (pixelart animado)
http://jm.jourdane.net/gallerie/feteforaine.gif
http://www.pixelzentrum.de/graphics/...mann_block.gif
http://www.hightower.ru/img/pixelart_206_img.gif
http://pixelart.wz.cz/images/dohromady.png
http://www.psistan.com/pixelart/odal...odalar_bg2.gif
http://www.psistan.com/pixelart/pixelart.html
http://www.armyoftrolls.co.uk/new_we...ue_3_Cover.png
http://home.deds.nl/~gtaplant/pictur...art/malibu.gif
http://www.pixelzentrum.de/graphics/pixels/ (varios pixelarts, entre ellos superheroes)
http://le-dantu.ru/portfolio/pixelart/
http://xo.typepad.com/blog/pixeldam.jpg (Los Simpsons Pixelarteados) nose si existe esa palabra o la acabo de inventar :D
http://m.artdesign.free.fr/rubriques...art/ff9_03.jpg

JE! otro dia sigo agregando.
__________________
You were everything, everything that I wanted We were meant to be, supposed to be, but we lost it.

Última edición por ea00d009; 17/12/2004 a las 05:31
  #9 (permalink)  
Antiguo 16/12/2004, 22:57
Avatar de Neo009  
Fecha de Ingreso: julio-2004
Mensajes: 113
Antigüedad: 20 años, 4 meses
Puntos: 2
de pelos........ la verdad que has publicado una mina de oro aca
__________________
:cool:
  #10 (permalink)  
Antiguo 17/12/2004, 11:19
Avatar de ea00d009  
Fecha de Ingreso: junio-2003
Ubicación: bariloche
Mensajes: 853
Antigüedad: 21 años, 4 meses
Puntos: 9
chan! hice mi primer pixelart use photoshop, la herramienta de linea, siempre manteniendo shift, para hacer horizontales, verticales y oblicuas a 45º, despues un poco de goma de borrar, y pincel a 1px, en fin, crei que hiba a ser mas dificil o que hiba a llevar mas tiempo, de cualquier forma lo que hice es una pabada, le falta muchisisiisismo detalle.
Aca se los dejos


Cualquier dia lo voy a continuar, y les muestro como queda.
Adios!
__________________
You were everything, everything that I wanted We were meant to be, supposed to be, but we lost it.
  #11 (permalink)  
Antiguo 17/12/2004, 14:28
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
Joder!.. pues esa es la idea. Ir creando e irle mostrando a los demás para que ayudarte. Fijate...

No todas las lineas que hagas tienen que ser de 45º ni de 90º. Puedes hacer líneas de 22,5º también.

A continuación les dejo los tipos de líneas permitidos en pixelart:

http://www.pixelfreak.com/v3/en/tutorial0.html

Hay que tratar siempre de usar ese tipo de líneas y evitar al máximo las que son con más de 2px.

En resumen, cuando tengamos líneas de 22,5º, tenemos que asegurarnos de que sean de 2px para que se vean bien.
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.

Última edición por Takitei; 17/12/2004 a las 14:36
  #12 (permalink)  
Antiguo 17/12/2004, 14:57
Avatar de ea00d009  
Fecha de Ingreso: junio-2003
Ubicación: bariloche
Mensajes: 853
Antigüedad: 21 años, 4 meses
Puntos: 9
siii que la hice sin leer nada,, jajajajaja, solo probando, y como photoshop te hace las lineas a 45º ya use esas y listo, asi era mas rapido
Saludos!
__________________
You were everything, everything that I wanted We were meant to be, supposed to be, but we lost it.
  #13 (permalink)  
Antiguo 17/12/2004, 15:00
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
Pero te quedó muy bien bro!...
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #14 (permalink)  
Antiguo 17/12/2004, 15:03
Avatar de ea00d009  
Fecha de Ingreso: junio-2003
Ubicación: bariloche
Mensajes: 853
Antigüedad: 21 años, 4 meses
Puntos: 9
pues gracias.. no sabia que mas agregarle, estaba pensando en un autito a punto de entrar al tunel loco ese, pero ya veo que se me va a complicar dibujarlo, pero veo que onda.. luego lo posteo cuando lo tenga terminado,
__________________
You were everything, everything that I wanted We were meant to be, supposed to be, but we lost it.
  #15 (permalink)  
Antiguo 17/12/2004, 15:08
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
Al parecer las cosas se complican cuando se quieren dibujar formas no geométricas. Por ejemplo un teléfono, un auto, una persona...
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #16 (permalink)  
Antiguo 17/12/2004, 16:12
Avatar de ea00d009  
Fecha de Ingreso: junio-2003
Ubicación: bariloche
Mensajes: 853
Antigüedad: 21 años, 4 meses
Puntos: 9
si señor! de verdad se complica... me puse a ver si me salia un autito y me judiaron los pixeles :D


adiiooss
__________________
You were everything, everything that I wanted We were meant to be, supposed to be, but we lost it.
  #17 (permalink)  
Antiguo 18/12/2004, 01:19
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 20 años, 2 meses
Puntos: 5
Sin embargo se ve muy bien. En uno de los links que coloqué, en uno de mis posts anteriores hay un vínculo a una película en pixelart que tiene un autito muy bien hecho. Quizás pueda servirte de referencia.
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:06.