Editor 9 Patch - Una herramienta WYSIWYG en línea para crear imágenes 9 patch
El Editor 9 Patch es una herramienta WYSIWYG en línea similar a la que se incluye en Android Studio. La herramienta te permite crear imágenes de mapa de bits que se redimensionan automáticamente para acomodar el contenido de la vista y el tamaño de la pantalla. Puedes escalar partes seleccionadas de la imagen horizontal o verticalmente según los indicadores dibujados dentro de la imagen.
Cómo usar
Sigue estos pasos para crear un gráfico NinePatch utilizando el Editor 9 Patch. Necesitarás una imagen de la que deseas crear una imagen NinePatch.
- Haz clic en el botón Seleccionar imagen o arrastra la imagen al editor de la que deseas crear una imagen NinePatch.
En el espacio de trabajo que se abre, el panel central es tu área de dibujo, donde puedes editar las líneas para las áreas de estiramiento y el área de contenido. El panel derecho es el área de vista previa, donde puedes previsualizar tu gráfico cuando se estira.
- Cambia el nombre de la imagen para tu imagen NinePatch. Tu imagen se guardará con la extensión de archivo .9.png.
- Haz clic dentro del perímetro de 1 píxel para dibujar las líneas que definen las áreas de estiramiento y (opcionalmente) el área de contenido.
- Cuando termines, haz clic en el botón Guardar imagen para guardar tus cambios.
Figura 1. Editor 9 Patch mostrando una imagen NinePatch.
Para asegurarte de que tus gráficos NinePatch se escalen correctamente, verifica que las regiones de estiramiento tengan al menos 2x2 píxeles de tamaño. De lo contrario, esas regiones pueden desaparecer al reducirse. Para evitar la interpolación durante el escalado que puede causar que el color en los bordes cambie, proporciona 1 píxel de espacio seguro adicional en los gráficos antes y después de las regiones de estiramiento.
Nota: Un archivo PNG normal (*.png) se carga con un borde vacío de 1 píxel añadido alrededor de la imagen. Puedes dibujar las áreas de estiramiento y el área de contenido dentro del borde. Un archivo NinePatch guardado previamente (*.9.png) se carga tal cual, sin área de dibujo añadida porque ya existe.
Controles opcionales
- Zoom: Ajusta el nivel de zoom del gráfico en el área de dibujo.
- Escala de parches: Ajusta la escala de las imágenes en el área de vista previa.
- Mostrar bloqueo: Visualiza el área no dibujable del gráfico al pasar el mouse.
- Mostrar parches: Previsualiza los parches estirables en rosa en el área de dibujo. El rosa indica un parche estirable, como se muestra en la figura 2.
- Mostrar contenido: Resalta el área de contenido en las imágenes de vista previa. El púrpura indica el área donde se permite el contenido, como se muestra en la figura 2.
- Mostrar parches defectuosos: Añade un borde rojo alrededor de las áreas de parche que pueden producir artefactos en el gráfico cuando se estiran, como se muestra en la figura 2. Si eliminas todos los parches defectuosos, mantendrás la coherencia visual de tu imagen estirada.
Figura 2. Una imagen NinePatch en el editor mostrando contenido, parches y parches defectuosos.