Aprende pixel art sin salir de aqui!

BIENVENIDOS A MI NUEVO POST! 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. 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 chula . 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. Este ejemplo esta hecho con muy mala leche, pero os puede servir en multitud de cosas!! (ni os lo imagináis) 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. 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.... 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 . A mi me encanta que haya mucho contraste en los dibujos ya que les da vida y son bastante resultones y "agradables de ver" siempre que estén bien detallados. Claro esta, si es un dibujo para un fondo etc tendrá que tener poco contraste. Si pincháis en el link, podréis ver un edit (texto e imagen) que hice sobre el contraste donde creo que lo dejo bastante claro. Foro Potasiomen 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 Tranquilos que en otra parte del tutorial explicare como conseguir unos colores adecuados a cada caso y como aplicar un buen AA . 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. PROGRAMAS PARA PIXELAR PAINT Pues este podríamos decir que es el programa mas sencillo que hay para hacer dibujos píxel a píxel. Para la gente que empieza en esto del píxel-Art y no tengan ni idea de que programa utilizar usen el Paint. Si usáis programas de diseño para otras cosas como photoshop, psp donde tenéis amplios conocimientos y facilidad para dibujar podéis usarlo también. MICROANGELO Este es un programa para crear iconos o cursores animados de tamaños 32x32 y 48x48. Yo he utilizado bastante ese programa y lo sigo utilizando en su versión 5.58, que lo podéis encontrar por ejemplo en www.softonic.com Suelo usarlo para crear colores para el Anti-Alias ya que tiene una opción "Color Blend" que te crea una serie de colores que van desde uno a otro de forma gradual. Y gracias a esto seria fácil elegir el color para el antialias ya que seria +o- el color del centro. también tiene una opción en la ventana "Paint modifiers" llamada Anti-Alias con la que conforme pixelemos el programa automáticamente nos ira poniendo el solito el Anti-Alias jeje. PAINT SHOP PRO Bueno, pues este es otro programa que podéis utilizar para pixelar. A diferencia de Photoshop este programa es más bien para retoque fotográfico pero que perfectamente os puede servir para crear vuestros píxel-Arts. Suelo usarlo mas que nada para cuando tengo que aplicar una capa o transparencia por ejemplo en el tutorial de la piscina o en el de reflejos, además también para conseguir colores mas saturados o conseguir colores para aplicar luego el Anti-Alias. Lo podéis encontrar en www.softonic.com PHOTOSHOP podríamos decir que el programa para crear píxel-Arts profesionales seria Photoshop ya que con este programa no necesitaríamos de programas externos para aplicar el efecto skew, capas ni nada y lo podríamos hacer todo con el. Claro esta todo es cuestión de gustos, habilidad y conocimientos que se tengan de cada programa el cual deberemos elegir para crear nuestros píxel-Arts, pero sin duda photoshop seria la mejor opción. Lo podéis encontrar en www.softonic.com GRAPHICS GALE Este es otro programa mas con el que poder hacer píxel-Arts que yo no conocía pero que tiene cosas bastante curiosas e interesantes. Decir también que sirve tanto para crear imágenes como animaciones dentro del mismo programa. Lo podéis encontrar en www.softonic.com Yo para mis píxel-Arts uso el Paint de Windows y cuando tengo que hacer algo con capas (rara vez) uso el PsP (Paint Shop Pro) además de para conseguir nuevos colores con mas contraste o un color para crear Anti-Alias. PREGUNTAS: ENTONCES, ¿ CON QUE PROGRAMA EMPIEZO ? Si no tienes ni idea de ningún programa pero te gusta el píxel-Art sin duda abre el Paint y ponte a practicar. Si por el contrario usáis habitualmente el Photoshop, PaintShopPro etc.. o cualquier otro programa con el que poder crear imágenes píxel a píxel utilizadlo no pasa nada. SI UTILIZAS EL PAINT ¿QUIERES DECIR QUE ES EL MEJOR PROGRAMA PARA PIXELAR? No, pero si es para mi el mas sencillo y fácil y el que te da una total libertad para crear lo que se te ocurra. Además con todo el tiempo que llevo he adquirido bastante rapidez en mis creaciones además de aprender truquillos o atajos con paint con el cual hacer las cosas mas rápidamente. BIEN YA SE EL VOCABULARIO DE PIXEL-ART, SE QUE PROGRAMA UTILIZAR, PERO.. ¿POR DONDE EMPIEZO? ¿QUE HAGO? Puedes empezar por practicar con tu programa a ver que eres capaz de hacer, por ejemplo creando Smiles, personajes pequeños e ir poco a poco haciendo cosas mas grandes etc... También participar en temas de Pixel-Art haciendo tus creaciones con las normas que indican, o cuando alguien pide ayuda en un grafico editarlo e intentar mejorarlo para recibir criticas, sugerencias etc... o subir tus propios dibujos. 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. El píxel-Art requiere mucha paciencia y claro esta no siempre encontraremos rápidamente la manera perfecta de rellenar alguna parte de un dibujo debido a que no sepamos detallarla o que hacer. 4 - EJEMPLO Para demostrar que yo también soy un ser humano os pongo lo que hice cuando empezaba con el píxel-art y no sabia detallar, ni usar colores ni nada... simplemente lo rellenaba todo de un color y luego le hacia brillos y sombras a todo con dithering y así quedaban los objetos jejeje que ahora los veo y dan pena. Pero claro esta con el tiempo, paciencia y mucha practica uno va cogiendo ideas, sabiendo trucos y los va aplicando a todo lo que hace, se inventa sus trucos, su metodo de trabajo de manera que poco a poco sin darte cuenta uno mismo se va metiendo de lleno en el Pixel-Art. Lo malo que después vas por a calle y no paras de ver puntitos por todos lados o verlo todo en perspectiva isométrica pero vale la pena AA / ANTI-ALIAS Añadiendo AA (Anti-Alias). Para añadir este efecto no debéis tocar el dibujo original. Me explico, para añadir los pixels de colores que harán suavizar la imagen deben de ser añadidos fuera, no dentro, ya que de esta forma deformaríais el dibujo original (1). También como se dijo en el apartado anterior podéis crear AA con colores usados ya en la imagen (2). Pero que pasa si queremos crear un AA y necesitamos conseguir uno o 2 colores intermedios para aplicar el efecto?. Pues yo tengo dos formas, 1 es con el programa Microangelo (3) que pones un color a una parte y el otro en otra y creara una sucesión de colores que va desde 1 al otro, y solo queda elegir cual es el que queda mejor. La otra forma es coger y poner los 2 colores juntos, copiarlo y llevarlo al PSP, y allí aplicar "Resize" y los valores deberían de ser +o- "width= 40" "height=2" y os saldrá algo como esto (4). gracias por pasar!