¿Cómo generar múltiples tamaños de imagen a partir de un diseño?

Puede usar este script para generar todos los íconos de una sola vez. Fue escrito para CS6, pero debería funcionar bien en CC o CC 2014.

Otro enfoque simple sería registrar el proceso como una Acción, para que pueda reproducirlo en cualquier imagen.

Alternativamente, con un poco de cuidado, podría usar el Generador en CC 2014 para crearlos.

Dado que está utilizando la imagen para una aplicación, supongo que desea guardar la imagen en uno de los formatos de gráficos de trama compatibles con la web (JPG, PNG o GIF).

Si ese es el caso y está utilizando "Guardar para Web" en AI o PS, cambie el tamaño directamente en la ventana "Guardar para Web" conectando las dimensiones deseadas.

1. Seleccione file->Save for Webdel menú.
2. Aparecerá la ventana "Guardar para Web". Seleccione el formato de archivo deseado.
3. Introduzca las dimensiones deseadas o un porcentaje. Por ejemplo, si desea guardar la imagen al doble de su tamaño, ingrese "200%".
4. MUY IMPORTANTE: Haga clic en otro lugar para asegurarse de que la ventana acepte estas nuevas dimensiones. Por ejemplo, si estaba ingresando el Ancho, haga clic en el cuadro Porcentaje. Eche un vistazo a la vista previa y confirme que se ha cambiado el tamaño de la imagen. Si no hace esto y simplemente hace clic Save antes de que se cambie el tamaño de la imagen, la ventana guarda la imagen en sus dimensiones actuales.
5. Haga clic en Save.

Nota:

• Este método no es 100% bueno si su imagen es rasterizada (como en "no vector") y desea guardarla en un tamaño mayor. En ese caso, sugeriría intentarlo, pero si el resultado no es bueno, haga el cambio de tamaño en PS con más cuidado, seleccionando el algoritmo de remuestreo adecuado en función de la imagen.
• Tienes que repetir estos pasos para cada tamaño que necesites, pero al menos tu arte se mantiene en las dimensiones originales. Solo la salida se redimensiona.
• Si utiliza siempre las mismas dimensiones, probablemente este método se pueda combinar con "Acciones" para ahorrar tiempo.

Aquí hay un script que exporta todas las mesas de trabajo a resoluciones de Android e iOS: https://github.com/austynmahoney/mobile-export-scripts-illustrator

El nombre de las imágenes se corresponderá con el nombre de la mesa de trabajo. Si la mesa de trabajo se llama app-icon y selecciona todas las opciones disponibles, el script exportará la mesa de trabajo a la siguiente estructura de directorios.

Selected Directory
├───Android
│   ├───drawable-mdpi
│   │   └───app-icon.png
│   ├───drawable-hdpi
│   │   └───app-icon.png
│   ├───drawable-xhdpi
│   │   └───app-icon.png
│   ├───drawable-xxhdpi
│   │   └───app-icon.png
│   ├───drawable-xxxhdpi
│   │   └───app-icon.png
└───iOS
    ├───app-icon.png
    ├───app-icon@2x.png
    └───app-icon@3x.png

La imagen de referencia utilizada para Android es xhdpi, para iOS es @2x. La secuencia de comandos se escalará hacia arriba y hacia abajo a partir de estos tamaños.

Adobe introdujo una nueva función en CC llamada Extraer activos. Todavía no he jugado con él, pero parece que tiene opciones para exportar en múltiples resoluciones.

En el pasado, usé una aplicación llamada Slicy (me temo que solo para Mac) que te permite generar resoluciones de 1x y 2x. Todavía tenía que crear una versión 1.5x en el mismo archivo (que Slicy generaría como una versión 3x), por lo que hubo cierta duplicación, pero mejor que hacerlo todo manualmente.

Si está haciendo 9 parches, encontrará que las guías son un poco más complicadas, ya que tienen que tener 1 px de ancho, independientemente de la resolución. Los configuré para que fueran de 1px en la resolución más baja (en ese momento solo iba tan bajo como MDPI). Mis guías serían más gruesas en las resoluciones más altas (2px en HDPI, etc.). Pasaría estos PNG a través de un script bash para recortar los píxeles adicionales usando el mogrify shavecomando. Finalmente, lo automatizaría usando Hazel (aplicación de Mac nuevamente) que observaría mi carpeta en busca de cambios y aplicaría el script a cualquier PNG nuevo. No debería ser demasiado difícil encontrar una solución equivalente para ver carpetas en otras plataformas.

En Photoshop, puede hacerlo usando LAYER COMP y en Illustrator usando el número de artwboards