Blog / Tutoriales

Crea un PNG circular con esquinas transparentes, calcula un recorte 4:5 y comprueba cada foto antes de descargar por lotes.

Elige un logotipo transparente, comprueba fotos claras y oscuras, aplica una posición relativa y revisa las excepciones antes de exportar un ZIP.

Separa errores de formato, tamaño de archivo y dimensiones; convierte HEIC por lotes y revisa las copias antes de compartir.

Comprende el revelado RAW, distingue una copia renderizada de una miniatura y elige JPG o PNG sin descartar el DNG.

Compara por separado la corrección del color mate, la eliminación de píxeles tenues y el recorte; después comprueba el PNG sobre fondos claros y oscuros.

Trabaja con una cuadrícula medida de 4 × 3, distingue bordes de separaciones y conserva posiciones al omitir o eliminar duplicados.

Diagnostica los orígenes de recorte y el orden de fotogramas antes de cambiar los FPS; conserva un anclaje significativo sin eliminar el movimiento intencional.

Por qué los rectángulos de actualización GIF dejan rastros, cómo obtener PNG completos y cuándo conservar los retardos originales en vez de exportar solo una cuadrícula.

Usa frame, spriteSourceSize y sourceSize de una exportación correspondiente de Aseprite para reconstruir PNG completos alineados en vez de poses recortadas que saltan.

Parte de píxeles limpios, filtra colores tenues de borde y convierte los recuentos exactos en gamas de sombra, base y luz.

Crea el orden de lectura final página a página, inserta una página fotografiada, elimina las hojas que no quieras y comprueba la descarga antes de compartir.

Calcula celdas iguales, comprueba el orden y la alineación de los fotogramas, elige la velocidad de reproducción y comprende qué hace GIF con los colores y la transparencia.

Instagram ajusta tu foto a una de sus pocas proporciones compatibles y recorta el resto desde el centro; por eso desaparece la parte superior. Esta guía explica las proporciones que sobreviven, la trampa del carrusel, las zonas seguras de Stories y por qué una subida 4K no aporta nada.

La eliminación por color, la segmentación con IA y la selección manual resuelven problemas distintos, y elegir mal es la razón por la que tu recorte tiene un halo o un agujero. Esta guía explica qué hace realmente cada método y cómo saber cuál necesita tu imagen.

HTTP/2 eliminó el argumento de reducir solicitudes que motivó los sprites CSS, así que muchas guías defienden la solución a un problema que ya no tienes. Esta explica qué sigue justificando realmente un sprite, los cálculos de background-position y background-size para retina y cuándo un sprite SVG es mejor.

Los generadores de imágenes con IA rara vez colocan los sprites en una cuadrícula uniforme, por lo que un corte simple por filas y columnas corta cabezas y pies. Esta guía explica por qué varía la separación, cómo lo resuelve la detección basada en contenido y cómo obtener fotogramas limpios para Unity o Godot.

Una publicación en cuadrícula de nueve piezas convierte una imagen en un banner que recorre tu perfil. Esta guía explica cómo dimensionar el original, cortarlo en nueve piezas iguales y subirlas en orden inverso para que la imagen no quede desordenada.

Ese halo blanco fino casi nunca es un fallo del recorte. Esta guía explica cómo los bordes suavizados adquieren el color equivocado, qué formatos conservan alfa y cómo eliminar un halo ya incorporado.

Texture Type, Sprite Mode, Pixels Per Unit, Filter Mode y compresión tienen valores predeterminados inadecuados para arte 2D. Esta guía explica cada ajuste, la división en Sprite Editor y cuándo dividir antes supera la detección automática.

Godot 4 lee una hoja de sprites de tres formas diferentes: AnimatedSprite2D con SpriteFrames, regiones de AtlasTexture y hframes/vframes en un Sprite2D. Esta guía explica cuál usar, los ajustes de filtrado de pixel art y por qué una hoja irregular falla en las tres.

La mayoría de las hojas de sprites generadas por IA tienen cuadrículas desalineadas, fondos incorporados y etiquetas de texto ilegibles. Esta guía ofrece instrucciones concretas para corregir cada problema, dos prompts de ejemplo completos y el flujo de trabajo posterior a la generación.

"Usa WebP para todo" se equivoca con suficiente frecuencia como para tenerlo en cuenta. Esta guía explica cómo comprime cada formato, cuáles conservan un canal alfa y el caso habitual en el que un WebP con pérdida resulta más grande que un PNG con paleta.

Tres ajustes controlan el tamaño: dimensiones, formato y calidad. Esta guía los explica por prioridad, con valores óptimos, cuantización de paleta, eliminación de metadatos y recetas para tamaños habituales.

El escalado normal emborrona el pixel art porque mezcla colores que no debían tocarse. Esta guía explica el vecino más cercano, los factores enteros y qué hacen realmente el renderizado pixelado CSS, los filtros puntuales y algoritmos como hqx.

Los atlas reducen las llamadas de dibujo empaquetando muchos sprites en una textura, pero colocarlos borde con borde hace que los colores vecinos se filtren por las uniones. Esta guía explica el empaquetado, los márgenes y la extrusión, cuándo siguen importando las dimensiones potencia de dos y cómo afecta el recorte a los pivotes.

Una vista previa de enlace vacía casi siempre se debe a unas pocas causas concretas: dimensiones incorrectas, un formato no compatible, una URL relativa o una caché desactualizada. Esta guía explica el estándar 1200x630, el recorte de la zona segura, por qué WebP no es adecuado en este caso y cómo obligar a cada plataforma a volver a obtener los datos.

Un conjunto de piezas es más difícil que una hoja de sprites porque las uniones deben coincidir al colocar las piezas una junto a otra. Esta guía explica cómo elegir el tamaño de pieza, encontrar el desplazamiento de la cuadrícula cuando la ilustración no empieza en el píxel cero, resolver la filtración de colores sin separación e importar en Unity o Godot.

El número de fotogramas y la velocidad de reproducción son decisiones independientes, y confundirlos hace que las animaciones queden lentas o sean costosas de dibujar. Esta guía explica cómo se perciben realmente 8, 12 y 24 fps, las tasas por tipo de acción, los fotogramas mantenidos y cómo separar los fps de animación de los del juego.

Los favicons siguieron siendo complicados mucho después de que el resto de la web evolucionara, y la mayoría de las guías enumera muchos más archivos de los necesarios. Esta guía explica el conjunto mínimo real, lo que solicita cada plataforma, site.webmanifest, cómo diseñar una marca legible a 16 píxeles y cómo superar la caché.

Pide a un modelo el mismo personaje dos veces y la armadura cambia de color, aparece una capa y varían las proporciones. Esta guía explica qué hace fijar la semilla y cuándo deja de ayudar, cómo fijar colores y materiales en la instrucción, cómo usar imagen a imagen con una referencia y cómo corregir las variaciones después.