{"id":54617,"date":"2019-12-30T00:00:00","date_gmt":"2019-12-29T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu"},"modified":"2020-02-18T14:02:39","modified_gmt":"2020-02-18T11:02:39","slug":"piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","status":"publish","type":"post","link":"https:\/\/prohoster.info\/es\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel art para principiantes: gu\u00eda de aplicaci\u00f3n","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixel
\n
\nA menudo, los desarrolladores independientes tienen que asumir varios roles a la vez: dise\u00f1ador de juegos, programador, compositor, artista. Y, cuando se trata de la parte visual, muchos eligen el pixel art, que a primera vista parece simple. Pero para hacerlo bien se necesita mucha experiencia y ciertas habilidades. He encontrado un tutorial para quienes reci\u00e9n comienzan a aprender los fundamentos de este estilo: con una descripci\u00f3n de software espec\u00edfico y t\u00e9cnicas de dibujo a trav\u00e9s de dos sprites.<\/a><\/noindex><\/p>\n

Fondo<\/h2>\n

\nEl pixel art es una forma de arte digital en la que las alteraciones se realizan a nivel de p\u00edxeles. Principalmente se asocia con la gr\u00e1fica de los videojuegos de los a\u00f1os 80 y 90. En ese entonces, los artistas ten\u00edan que considerar las limitaciones de memoria y la baja resoluci\u00f3n. Hoy en d\u00eda, el pixel art sigue siendo popular en los juegos y como estilo art\u00edstico en general, a pesar de la posibilidad de crear gr\u00e1ficos 3D realistas. \u00bfPor qu\u00e9? Incluso dejando de lado la nostalgia, crear una gran obra dentro de tales l\u00edmites es un desaf\u00edo agradable y valioso.<\/p>\n

La barrera de entrada al pixel art es relativamente baja en comparaci\u00f3n con el arte tradicional y la gr\u00e1fica 3D, lo que atrae a los desarrolladores independientes. Pero eso no significa que sea f\u00e1cil terminar<\/b> un juego en este estilo. He visto a muchos desarrolladores independientes con metroidvanias de pixel art en plataformas de crowdfunding. Pensaron que terminar\u00edan todo en un a\u00f1o, pero en realidad, necesitaban otros seis a\u00f1os m\u00e1s. <\/p>\n

\"Pixel
\nMetal Slug 3 (Arcade). SNK, 2000<\/i><\/p>\n

El pixel art al nivel en el que la mayor\u00eda quiere crearlo requiere mucho tiempo, y hay muy pocos tutoriales breves. Al trabajar con un modelo 3D, puedes rotarlo, deformarlo, mover partes individuales, copiar animaciones de un modelo a otro, y as\u00ed sucesivamente. El pixel art de alto nivel casi siempre consume una gran cantidad de esfuerzo para colocar meticulosamente los p\u00edxeles en cada cuadro.<\/p>\n

En resumen, lo advert\u00ed.<\/p>\n

Ahora hablemos un poco de mi estilo: principalmente, dibujo arte en p\u00edxeles para videojuegos y en ellos encuentro inspiraci\u00f3n. Soy fan\u00e1tico de Famicom\/NES, consolas de 16 bits y arcades de los a\u00f1os 90. El arte en p\u00edxeles de mis juegos favoritos de esa \u00e9poca se puede describir como brillante, seguro y limpio (pero no demasiado), no se puede considerar r\u00edgido ni minimalista. En este estilo trabajo yo mismo, pero puedes aplicar f\u00e1cilmente ideas y t\u00e9cnicas de este tutorial para crear cosas completamente diferentes. \u00a1Explora las obras de diferentes artistas y crea arte en p\u00edxeles que te guste!<\/p>\n

Software<\/h2>\n

\n\"Pixel
\n
\nHerramientas digitales b\u00e1sicas para el arte en p\u00edxeles: Zoom y L\u00e1piz para colocar p\u00edxeles. Tambi\u00e9n te ser\u00e1n \u00fatiles L\u00ednea, Forma, Seleccionar, Mover y Cubo de pintura. Hay mucho software gratuito y de pago con este conjunto de herramientas. Hablar\u00e9 de los m\u00e1s populares y de los que uso yo mismo.<\/p>\n

Paint (gratis)<\/h3>\n

\nSi tienes Windows, el Paint que viene integrado es un programa primitivo, pero tiene todas las herramientas necesarias para el arte en p\u00edxeles.<\/p>\n

Piskel<\/a><\/noindex> (gratis)<\/h3>\n

\nUn editor de arte en p\u00edxeles sorprendentemente funcional que se ejecuta a trav\u00e9s del navegador. Puedes exportar tu trabajo a PNG o GIF animado. Una excelente opci\u00f3n para principiantes.<\/p>\n

GraphicsGale<\/a><\/noindex> (gratis)<\/h3>\n

\nGraphicsGale es el \u00fanico editor entre los que he o\u00eddo que fue dise\u00f1ado espec\u00edficamente para arte en p\u00edxeles e incluye herramientas de animaci\u00f3n. Fue creado por la compa\u00f1\u00eda japonesa HUMANBALANCE. Desde 2017 se distribuye gratuitamente y sigue siendo muy popular, a pesar del creciente uso de Aseprite. Lamentablemente, solo funciona en Windows.<\/p>\n

Aseprite<\/a><\/noindex> ($)<\/h3>\n

\nTal vez el editor m\u00e1s popular en este momento. C\u00f3digo abierto<\/a><\/noindex>, un mont\u00f3n de caracter\u00edsticas, soporte activo, versiones para Windows, Mac y Linux. Si te has tomado en serio el arte en p\u00edxeles y a\u00fan no has encontrado el editor adecuado, quiz\u00e1s este sea el que necesitas.<\/p>\n

GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n

\nGameMaker Studio 2 es una excelente herramienta 2D con un buen editor de sprites. Si deseas crear arte en p\u00edxeles para tus propios juegos, es muy conveniente hacerlo todo en un solo programa. Actualmente, estoy usando este software para trabajar en UFO 50<\/a><\/noindex>, una colecci\u00f3n de 50 juegos retro: creo los sprites y animaciones en GameMaker, y los tilesets en Photoshop.<\/p>\n

Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n

\nPhotoshop es un software caro, distribuido por suscripci\u00f3n, que no est\u00e1 dise\u00f1ado para pixel art. No lo recomiendo si no te dedicas a crear ilustraciones en alta resoluci\u00f3n o si no necesitas realizar manipulaciones complejas en im\u00e1genes, como me sucede a m\u00ed. Se pueden crear sprites est\u00e1ticos y trabajos en pixel art, pero es bastante complicado en comparaci\u00f3n con software especializado (como GraphicsGale o Aseprite).<\/p>\n

Otros<\/h2>\n

\n\"Pixel
\nMi kit para pixel art. Todo negro, me acabo de dar cuenta ahora.<\/i><\/p>\n

Tableta gr\u00e1fica ($$+)<\/h3>\n

\nRecomiendo tabletas gr\u00e1ficas para cualquier trabajo con ilustraciones digitales, para evitar el s\u00edndrome del t\u00fanel carpiano. Es mucho m\u00e1s f\u00e1cil de prevenir que de tratar. Una vez que sientas dolor, solo aumentar\u00e1 \u2014 cuida de ti mismo desde el principio. Debido a que en su momento dibuj\u00e9 con el rat\u00f3n, ahora me cuesta jugar a juegos que requieren pulsar teclas. Actualmente uso una Wacom Intuos Pro S.<\/p>\n

Soporte de mu\u00f1eca ($)<\/h3>\n

\nSi no puedes adquirir una tableta, al menos compra un soporte de mu\u00f1eca. Me gusta mucho el Mueller Green Fitted Wrist Brace. Los dem\u00e1s son demasiado ajustados o no brindan suficiente soporte. Se pueden ordenar soportes f\u00e1cilmente en l\u00ednea.<\/p>\n

96\u00d796 p\u00edxeles<\/h2>\n

\n\"Pixel
\nFinal Fight. Capcom, 1989<\/i><\/p>\n

\u00a1Comencemos! Empezaremos con el sprite de un personaje de 96\u00d796 p\u00edxeles. Para el ejemplo, dibuj\u00e9 un orco y lo coloqu\u00e9 en una captura de pantalla de Final Fight (la imagen de arriba) para que entiendas la escala. Esto es un gran<\/b> sprite para la mayor\u00eda de los juegos retro, tama\u00f1o de la captura de pantalla: 384\u00d7224 p\u00edxeles.<\/p>\n

Con un sprite tan grande es m\u00e1s f\u00e1cil mostrar la t\u00e9cnica de la que quiero hablar. Adem\u00e1s, el dibujo pixel por pixel se asemeja m\u00e1s a las formas tradicionales del arte (como el dibujo o la pintura), con las que quiz\u00e1s est\u00e9s m\u00e1s familiarizado. Una vez que dominemos las t\u00e9cnicas b\u00e1sicas, pasaremos a sprites m\u00e1s peque\u00f1os.<\/p>\n

1. Elegimos la paleta<\/h2>\n

\n\"Pixel
\n
\nEl pixel es un concepto mucho m\u00e1s profundo en el pixel art que en cualquier otro \u00e1mbito digital. El pixel art se define por sus limitaciones, como los colores. Es importante elegir una paleta adecuada, ya que ayudar\u00e1 a definir tu estilo. Pero al comenzar, sugiero no pensar demasiado en paletas y seleccionar una de las ya existentes (o simplemente unos pocos colores aleatorios) \u2014 puedes cambiarla f\u00e1cilmente en cualquier momento.<\/p>\n

Para este tutorial, voy a utilizar una paleta de 32 colores que creamos para UFO 50<\/a><\/noindex>. Para el pixel art, a menudo se recogen en 32 o 16 colores. La nuestra est\u00e1 dise\u00f1ada para una consola ficticia que podr\u00eda haber aparecido en alg\u00fan lugar entre el Famicom y el PC Engine. Puedes usarla o cualquier otra; el tutorial no depende en absoluto de la paleta elegida.<\/p>\n

2. Contornos gruesos<\/h2>\n

\n\"Pixel
\n
\nComencemos a dibujar con la herramienta L\u00e1piz. Dibujemos un boceto igual que lo har\u00edamos con un bol\u00edgrafo y papel. Por supuesto, el pixel art y el arte tradicional se cruzan, especialmente cuando se trata de sprites grandes. Mis observaciones muestran que los artistas fuertes de pixel art al menos dibujan bien a mano y viceversa. As\u00ed que siempre es \u00fatil desarrollar habilidades de dibujo.<\/p>\n

3. Refinamiento de contornos<\/h2>\n

\n\"Pixel
\n
\nPerfeccionamos los contornos: eliminamos p\u00edxeles sobrantes y reducimos el grosor de cada l\u00ednea a un p\u00edxel. Pero, \u00bfqu\u00e9 considerar exactamente como sobrante? Para responder a esta pregunta, es necesario entender las l\u00edneas de p\u00edxeles y las irregularidades.<\/p>\n

Irregularidades<\/h3>\n

\nEs necesario aprender a dibujar dos l\u00edneas b\u00e1sicas en pixel art: rectas y curvas. Con bol\u00edgrafo y papel, todo se reduce al control muscular, pero nosotros trabajamos con peque\u00f1os bloques de color.<\/p>\n

La clave para dibujar l\u00edneas de p\u00edxeles correctas son las irregularidades. Son p\u00edxeles individuales o peque\u00f1os segmentos que rompen la suavidad de la l\u00ednea. Como he dicho, un solo p\u00edxel tiene un gran impacto en el pixel art, por lo que las irregularidades pueden arruinar toda la est\u00e9tica. Imagina que trazas una l\u00ednea recta en papel, y de repente alguien golpea la mesa: las irregularidades en el pixel art se ven as\u00ed, como un garabato aleatorio.<\/p>\n

Ejemplos:<\/p>\n

\"Pixel
\nRectas<\/i><\/p>\n

\"Pixel
\nCurvas<\/i><\/p>\n

Las irregularidades aparecen en las curvas cuando la longitud de los segmentos de la l\u00ednea aumenta o disminuye de manera no gradual.<\/p>\n

Evitar por completo las irregularidades es imposible; est\u00e1n presentes en todos tus juegos retro favoritos (a menos que, por supuesto, el pixel art consista exclusivamente en formas simples). El objetivo es minimizar las irregularidades, mostrando todo lo necesario.<\/p>\n

4. Aplicamos los primeros colores<\/h2>\n

\n\"Pixel
\n
\nColorea a tu personaje utilizando relleno u otra herramienta adecuada. La paleta simplificar\u00e1 esta parte del trabajo. Si el software no permite el uso de paletas, puedes colocarla directamente en la imagen, como en el ejemplo anterior, y seleccionar colores con el cuentagotas.<\/p>\n

En la esquina inferior izquierda dibuj\u00e9 a nuestro amigo, con\u00f3zcanlo, es \u2014 Shar. Ser\u00e1 m\u00e1s f\u00e1cil entender lo que sucede en cada etapa con \u00e9l.<\/p>\n

5. Sombreado<\/h2>\n

\n\"Pixel
\n
\nEs hora de mostrar las sombras: simplemente a\u00f1adimos colores m\u00e1s oscuros al sprite. As\u00ed, la imagen parecer\u00e1 tridimensional. Supongamos que tenemos una fuente de luz situada sobre el orco, algo a la izquierda. Por lo tanto, estar\u00e1 iluminado todo lo que se encuentra arriba y frente a nuestro personaje. A\u00f1adimos sombras en la parte inferior derecha.<\/p>\n

Forma y volumen<\/h3>\n

\n\"Pixel
\n
\nSi esta etapa te resulta dif\u00edcil, imagina tu dibujo como formas tridimensionales en lugar de simples l\u00edneas y colores. Las formas existen en un espacio tridimensional y pueden tener volumen, que construimos con sombras. Esto ayudar\u00e1 a visualizar el personaje sin detalles y a imaginar que est\u00e1 hecho de arcilla en lugar de p\u00edxeles. El sombreado no se trata solo de a\u00f1adir nuevos colores, es un proceso de construcci\u00f3n de forma. En un personaje bien elaborado, los detalles no ocultan las formas b\u00e1sicas: si entrecierras los ojos, ver\u00e1s varios grandes grupos de luz y sombra. <\/p>\n

Suavizado (anti-aliasing)<\/h3>\n

\nCada vez que utilizo un nuevo color, aplico suavizado (AA). Ayuda a suavizar los p\u00edxeles a\u00f1adiendo colores intermedios en las esquinas, en el lugar donde dos segmentos de l\u00ednea se encuentran:<\/p>\n

\"Pixel
\n
\nLos p\u00edxeles grises suavizan los \"desgarros\" en la l\u00ednea. Cuanto m\u00e1s largo sea el segmento de l\u00ednea, m\u00e1s largo ser\u00e1 el segmento de AA.<\/p>\n

\"Pixel
\nAs\u00ed se ve el AA en el hombro del orco. Es necesario para suavizar las l\u00edneas que muestran la curvatura de sus m\u00fasculos.<\/i><\/p>\n

El suavizado no debe salir del sprite que se usar\u00e1 en el juego o sobre un fondo cuyo color es desconocido. Por ejemplo, si aplicas AA para un fondo claro, en un fondo oscuro el suavizado se ver\u00e1 mal.<\/p>\n

6. Contorno selectivo<\/h2>\n

\n\"Pixel
\n
\nAntes, los contornos eran completamente negros, lo que hac\u00eda que el sprite se viera muy caricaturesco. La imagen parec\u00eda dividida en segmentos. Por ejemplo, las l\u00edneas negras en la mano contrastan demasiado con la musculatura, y el personaje parece menos cohesivo.<\/p>\n

Si el sprite se vuelve m\u00e1s natural y la segmentaci\u00f3n no es tan evidente, las formas b\u00e1sicas del personaje ser\u00e1n m\u00e1s f\u00e1ciles de leer. Para ello, se puede utilizar un contorno selectivo: reemplazar parcialmente el contorno negro por uno m\u00e1s claro. En la parte iluminada del sprite se pueden usar los colores m\u00e1s claros o, donde el sprite toca el espacio negativo, se puede eliminar completamente el contorno. En lugar de negro, se debe usar el color elegido para la sombra, as\u00ed se mantendr\u00e1 la segmentaci\u00f3n (para delimitar m\u00fasculos, pelaje, etc.).<\/p>\n

Tambi\u00e9n en esta etapa a\u00f1ad\u00ed sombras m\u00e1s oscuras. Se obtuvieron tres gradaciones de verde en la piel del orco. El color verde m\u00e1s oscuro puede utilizarse para el contorno selectivo y el AA.<\/p>\n

7. Toques finales<\/h2>\n

\n\"Pixel
\n
\nAl final, es necesario a\u00f1adir reflejos (los puntos m\u00e1s claros en el sprite), detalles (pendientes, remaches, cicatrices) y otras mejoras, hasta que el personaje est\u00e9 listo o hasta que sea necesario pasar al siguiente.<\/p>\n

Existen varios trucos \u00fatiles que se pueden aplicar en esta etapa. Gira la imagen horizontalmente, esto ayuda a detectar errores en las proporciones y el sombreado. Tambi\u00e9n se puede quitar color: establecer la saturaci\u00f3n en cero para entender d\u00f3nde es necesario modificar las sombras.<\/p>\n

Creaci\u00f3n de ruidos (dithering)<\/h3>\n

\nHasta ahora, hemos utilizado principalmente \u00e1reas grandes y s\u00f3lidas de sombras. Pero hay otra t\u00e9cnica: el dithering, que permite transitar de un color a otro sin a\u00f1adir un tercero. Mira el ejemplo a continuaci\u00f3n.<\/p>\n

\"Pixel
\n
\nEl gradiente superior va de oscuro a claro utilizando cientos de diferentes tonos de azul. <\/p>\n

El gradiente medio usa solo nueve colores, pero a\u00fan tiene demasiados matices de un mismo color. Se produce lo que se llama banding, donde las franjas homog\u00e9neas gruesas hacen que el ojo se enfoque en los puntos de contacto de los colores, en lugar de los colores mismos.<\/p>\n

En el gradiente inferior aplicamos dithering, que evita el banding y utiliza solo dos colores. Creamos ruido de diferente intensidad para simular la graduaci\u00f3n del color. Esta t\u00e9cnica es muy similar al halftone utilizado en impresi\u00f3n; as\u00ed como al stippling en ilustraci\u00f3n y c\u00f3mics.<\/p>\n

En el arte de p\u00edxeles, apliqu\u00e9 disering un poco para transmitir la textura. Algunos artistas de p\u00edxeles no lo utilizan en absoluto, mientras que otros, por el contrario, no dudan en hacerlo y lo hacen con gran habilidad. Me parece que el disering se ve mejor en grandes \u00e1reas llenas de un solo color (f\u00edjate en el cielo de la captura de pantalla de Metal Slug, que fue anterior) o en aquellas \u00e1reas que deben lucir rugosas y desiguales (como la tierra). Decide t\u00fa mismo c\u00f3mo utilizarlo.<\/p>\n

Si quieres ver un ejemplo de disering a gran escala y de calidad, estudia los juegos de The Bitmap Brothers, un estudio brit\u00e1nico de los a\u00f1os 80, o juegos en PC-98. Solo ten en cuenta que todos ellos son NSFW.<\/p>\n

\"Pixel
\nKakyusei (PC-98). Elf, a\u00f1o 1996
\n\u00a1En esta imagen hay solo 16 colores!<\/i><\/p>\n

8. \u00daltima mirada<\/h2>\n

\n\"Pixel
\n
\nUno de los peligros del arte de p\u00edxeles es que parece f\u00e1cil y sencillo (debido a su estructura y las limitaciones del estilo). Pero al final, gastar\u00e1s una enorme cantidad de tiempo perfeccionando tus sprites. Es como un rompecabezas que necesitas resolver, por eso el arte de p\u00edxeles atrae a los perfeccionistas. Recuerda que un sprite no debe llevarte demasiado tiempo; es solo un peque\u00f1o fragmento de una colecci\u00f3n extremadamente compleja de piezas. Es importante no perder de vista la imagen general.<\/p>\n

Incluso si tu arte de p\u00edxeles no es para juegos, a veces es \u00fatil decirte: \u201c\u00a1Ya es lo suficientemente bueno!\u201d y seguir adelante. La mejor manera de desarrollar habilidades es pasar por todo el proceso de principio a fin tantas veces como sea posible, utilizando tantos temas como sea posible. <\/p>\n

Y a veces es \u00fatil dejar el sprite por un tiempo para mirarlo de nuevo con una perspectiva fresca. <\/p>\n

32\u00d732 p\u00edxeles<\/h2>\n

\n\"Pixel
\n
\nCreamos un gran sprite de 96\u00d796 p\u00edxeles primero, porque a ese tama\u00f1o se asemeja m\u00e1s a la pintura o el dibujo, pero solo con p\u00edxeles. Cuanto m\u00e1s peque\u00f1o es el sprite, menos se asemeja a lo que debe mostrar, y m\u00e1s importante es cada p\u00edxel.<\/p>\n

\"Pixel
\n
\nEn Super Mario Bros., el ojo de Mario son solo dos p\u00edxeles, uno encima del otro. Y su oreja tambi\u00e9n. El creador del personaje, Shigeru Miyamoto, dijo que los bigotes eran necesarios para separar la nariz del resto de la cara. Por lo tanto, una de las principales caracter\u00edsticas de la cara de Mario no es solo el dise\u00f1o del personaje, sino tambi\u00e9n un truco pragm\u00e1tico. Lo que confirma la antigua sabidur\u00eda: \"la necesidad es la madre de la invenci\u00f3n.\"<\/p>\n

Los pasos fundamentales para crear un sprite de 32\u00d732 p\u00edxeles ya nos son conocidos: boceto, color, sombras, y posteriores mejoras. Sin embargo, en estas condiciones, elijo figuras de colores como boceto inicial en lugar de dibujar contornos debido al tama\u00f1o peque\u00f1o. El color juega un papel m\u00e1s importante en la definici\u00f3n del personaje que los contornos. M\u00edralo de nuevo: Mario no tiene contornos en absoluto. No solo los bigotes son interesantes. Sus patillas definen la forma de las orejas, las mangas muestran las manos, y la forma general refleja m\u00e1s o menos claramente todo su cuerpo.<\/p>\n

Crear sprites peque\u00f1os implica constantes compromisos. Si a\u00f1ades un contorno, puedes perder espacio para la sombra. Si tu personaje tiene claramente visibles los brazos y las piernas, es probable que su cabeza no deba ser muy grande. Si utilizas eficazmente el color, el contorno selectivo y el suavizado, el objeto dibujado parecer\u00e1 m\u00e1s grande de lo que realmente es.<\/p>\n

Para peque\u00f1os sprites, me gusta el estilo chibi: los personajes lucen muy adorables, con grandes cabezas y ojos. Es una gran manera de crear un h\u00e9roe vibrante en un espacio limitado, y, en general, es un estilo muy agradable. Pero, tal vez necesites mostrar la movilidad o fuerza del personaje, entonces podr\u00edas dedicar menos espacio a la cabeza para que el cuerpo luzca m\u00e1s robusto. Todo depende de tus preferencias y objetivos.<\/p>\n

\"Pixel
\n\u00a1Todo un equipo al completo!<\/i><\/p>\n

Formato de archivos<\/h2>\n

\n\"Pixel
\nTal resultado podr\u00eda poner nervioso a cualquier artista de pixel art<\/i><\/p>\n

La imagen que ves es el resultado de guardar el dibujo en JPG. Parte de los datos se perdi\u00f3 debido a los algoritmos de compresi\u00f3n de archivos. El pixel art de calidad, al final, se ver\u00e1 mal, y recuperar su paleta original ser\u00e1 complicado.<\/p>\n

Para guardar im\u00e1genes est\u00e1ticas sin p\u00e9rdida de calidad, usa el formato PNG. Para animaciones, GIF.<\/p>\n

C\u00f3mo compartir correctamente pixel art<\/h2>\n

\nCompartir pixel art en redes sociales es una gran manera de recibir retroalimentaci\u00f3n y conocer otros artistas que trabajan en el mismo estilo. No olvides usar el hashtag #pixelart. Desafortunadamente, las redes sociales a menudo convierten PNG a JPG sin avisar, perjudicando tu trabajo. Y no siempre es claro por qu\u00e9 tu imagen fue convertida.<\/p>\n

Hay varios consejos sobre c\u00f3mo conservar el pixel art en la calidad necesaria para diferentes redes sociales.<\/p>\n

Twitter<\/h3>\n

\nPara que un archivo PNG no se modifique en Twitter, utiliza menos de 256 colores o aseg\u00farate<\/a><\/noindex>, de que tu archivo sea menor de 900 p\u00edxeles en el lado m\u00e1s largo. Te recomendar\u00eda aumentar el tama\u00f1o del archivo al menos a 512\u00d7512 p\u00edxeles. Adem\u00e1s, aseg\u00farate de que la escala sea un m\u00faltiplo de 100 (200%, no 250%) y que los bordes se mantengan n\u00edtidos (vecino m\u00e1s cercano en Photoshop).<\/p>\n

Los archivos GIF animados para publicaciones en Twitter deben<\/a><\/noindex> no deben pesar m\u00e1s de 15 MB. La imagen debe tener al menos 800\u00d7800 p\u00edxeles, la animaci\u00f3n c\u00edclica debe repetirse tres veces, y el \u00faltimo fotograma debe durar la mitad de tiempo que los dem\u00e1s, seg\u00fan la teor\u00eda m\u00e1s popular. Sin embargo, no est\u00e1 claro cu\u00e1nto de estos requisitos deben cumplirse, dado que Twitter cambia constantemente sus algoritmos de visualizaci\u00f3n de im\u00e1genes.<\/p>\n

Instagram<\/h3>\n

\nHasta donde s\u00e9, no es posible publicar una imagen en Instagram sin p\u00e9rdida de calidad. Pero definitivamente se ver\u00e1 mejor si la aumentas al menos a 512x512 p\u00edxeles.
\n
Fuente: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u043b\u0435\u0439: \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0430, \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u2014 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438. \u041d\u0430\u0448\u0435\u043b \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b \u043f\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f: \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0444\u0442\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-54617","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Arte en p\u00edxeles para principiantes: gu\u00eda de uso | ProHoster","description":"A menudo, los desarrolladores independientes tienen que.","canonical_url":"https:\/\/prohoster.info\/es\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"es_ES","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster","og:description":"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.","og:url":"https:\/\/prohoster.info\/es\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-12-29T21:00:00+00:00","article:modified_time":"2020-02-18T11:02:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"54617","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 12:06:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 20:01:33","updated":"2026-01-24 12:06:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}