¿Cómo puedo exportar una imagen de una imagen de Illustrator en varios tamaños?

Soy nuevo en Adobe Illustrator y tengo una imagen de logotipo que necesito usar en 5 o 6 tamaños diferentes. La imagen del logotipo se creó en Adobe Illustrator, pero cuando intento guardar la imagen en PNG o JPEG, lo que debería haber sido simple resulta muy complicado.

Entiendo que Adobe Illustrator quiere tratar la imagen como de cierto tamaño y luego quiere multiplicar ese tamaño por un factor de escala de píxeles por pulgada para dar como resultado la cantidad real de píxeles que guarda. Tiene algunas opciones de factor de escala limitadas que dan un conjunto muy limitado de tamaños de píxeles de salida resultantes.

Sin embargo, para muchos usos web, el usuario ya conoce las dimensiones de píxeles de salida que se necesitan. ¿Hay alguna forma de especificar el ancho de píxel o la altura del gráfico guardado que se necesita?

He visto sugerencias para exportar la imagen y luego usar Photoshop para cambiar su tamaño, pero eso da como resultado una calidad de imagen más pobre en comparación con la creación de la imagen final a partir de la imagen vectorial.

hay varias formas de hacerlo, la mía es seleccionar todo, luego la imagen que desea exportar, luego está la opción de ancho y alto en el encabezado, solo cámbielo y luego expórtelo

Respuestas (5)

Archivo > Guardar para Web y luego ingrese las dimensiones en píxeles haciendo clic en la Image Sizepestaña a la derecha de la ventana Guardar para Web.

¿O no te estoy entendiendo bien?

Perfecto gracias. Acabo de pasar alrededor de 15 minutos con la función "exportar", pero como se niega a usar menos de 72ppi, tuve que cambiar la escala de la obra de arte y la mesa de trabajo para exportaciones muy pequeñas, eso es probablemente lo que hizo el autor de la pregunta.
Dado que esta es la respuesta 'aceptada', permítanme aumentarla casi una década. Las versiones contemporáneas de AI (en 2021) considerarán 'Guardar para Web' como legado , ofreciendo una (nueva) función de exportación adicional. Aquí puede hacer clic en la casilla de verificación 'Incluir sangrado' (suponiendo que su mesa de trabajo especifique las dimensiones correctas) y luego seleccionar cualquier tamaño y formato de archivo que desee (JPEG, PNG, SVG, PDF). AI los guardará por lotes en todos los tamaños.

Usar File → Save for Webe ingresar las dimensiones hará lo que está buscando. Además, Illustrator utiliza la escala vectorial, por lo que los resultados son mejores que si intentara lo mismo en Photoshop: ingresar dimensiones que no coincidan con el documento en Photoshop significa que la imagen se escalará en mapa de bits.

Tenga en cuenta que debe hacer clic en Aplicar después de cambiar las dimensiones, si está utilizando una versión de Illustrator anterior a CS6.

Guardar para Web en Illustrator

Ah, y hay muchas posibilidades de que desee Convert to sRGBdesactivarlo: convierte destructivamente su imagen del espacio de color actual a sRGB, lo que hace que los colores cambien.

ingrese la descripción de la imagen aquí

No hay un botón Aplicar en CS6.... y no estoy de acuerdo con Convertir a RGB, quieres que esté ACTIVADO para las imágenes destinadas a la web.
Gracias con respecto a la sugerencia de CS6. Dejar activado Convert to sRGB es absolutamente el enfoque incorrecto para el trabajo web y de interfaz de usuario. Aquí hay un artículo completo sobre por qué: bjango.com/articles/photoshop (¡Contésteme sobre esto bajo tu propio riesgo!)
Citar su propio artículo como si tuviera más credibilidad que su opinión aquí es un poco ridículo. CUALQUIERA puede crear una página web que apoye CUALQUIER opinión, correcta o incorrecta. Diablos, he visto sitios web completos y detallados dedicados a explicar técnicas de gestión del color completamente inapropiadas. Más de 25 años de práctica significan más para mí. Eso junto con conversaciones directas con personas como Andrew Rodney, Bruce Fraser y Chris Cox. A menos que pueda controlar absolutamente los perfiles de color en CADA monitor en el que se verá su trabajo, desea sRGB. Tendremos que estar de acuerdo en estar en desacuerdo.
¿De verdad leíste el artículo? Cuando realiza trabajos web y de interfaz de usuario, los valores de color exactos DEBEN mantenerse durante todo el proceso. Si ingresa #FF0010 como un color, DEBE salir en el archivo como #FF0010 si intenta hacer coincidir el color en el código. Esto significa que Convertir a sRGB DEBE estar desactivado. Tengo la sensación de que no haces este tipo de trabajo y no entiendo lo que implica.
Scott, por favor, no tome esto como un ataque ad hominem, pero de discusiones similares creo que puede haber recogido algunas ideas erróneas sobre la representación del color RGB. Consulte también graphicdesign.stackexchange.com/questions/7815/… .
Esos comentarios son irrelevantes e100. Estabas siendo un poco cauteloso con los números que usé, aunque dije muchas veces que simplemente estaba generalizando. Y por supuesto, no leí tu artículo, Mark. Ya sea que todos lo piensen o no. De hecho, sé algunas cosas sobre las que publico. No soy un diseñador de 25 años recién salido de la escuela. De nuevo... tendremos que estar de acuerdo en no estar de acuerdo. Hay una RAZÓN por la cual el equipo de Save for Web implementó la opción Convertir a sRGB. Inicialmente no existía.
Sí, para que FF0010 coincida con una imagen que contiene FF0100, puede obtener mejores resultados en su monitor si su monitor está mal calibrado, desactivando la conversión a sRGB. Sin embargo, como he publicado, a menos que pueda controlar la calibración de color de todos los monitores del mundo que verán su trabajo, entonces querrá convertir a sRGB. Eso garantiza que los monitores mal calibrados o los navegadores sin gestión de color también coincidan con los colores. Es fácil si todo lo que haces es para UI e iDevices, ya que todo se administra en color. No es tan fácil para el diseño web.
Al final, me alegro de que lo que todos usáis os funcione. Así que continúa usándolo. Lo que uso me funciona y lo ha hecho durante décadas. Por lo tanto, mi opinión no va a ser alterada. Confío en mi experiencia mucho más que nada. Como he publicado, simplemente tendremos que estar de acuerdo en no estar de acuerdo .
Convertir a sRGB es la elección incorrecta en casi todas las situaciones imaginables cuando se trabaja para la web. "Hay una RAZÓN por la cual el equipo de Save for Web implementó la opción Convertir a sRGB": es hora de solucionarlo. feedback.photoshop.com/photoshop_family/topics/…

Cuando necesito admitir varios tamaños de píxeles, duplico y escalo el arte dentro del mismo archivo AI. Cada tamaño va a una mesa de trabajo separada del tamaño correcto. Adjunto el nombre del tablero con el formato de archivo que se exportará. Luego ejecuto un jsx que exporta cada mesa de trabajo y selecciona el formato de archivo del nombre, usando la última configuración que ingresé para ese formato en ese archivo. Todo esto está en CS5.

Utilizo este flujo de trabajo para algunos logotipos, íconos y anuncios gráficos.

Por favor, ¿puedes compartir el .jsx?
@kelin Me temo que no puedo. Ha pasado mucho tiempo desde que me molesté con los productos de Adobe.
No hay problema, encontré un gran script aquí: stackoverflow.com/a/28067227/3050403

También puede crear un documento del tamaño apropiado en Photoshop (o enmarcar un área con guías) y luego Archivo > Colocar el arte vectorial.

Puede escalar el tamaño de la forma antes de que se represente. Obviamente escalar después de eso reducirá su calidad.

Siempre he usado esta técnica para logotipos con el fin de dar un control preciso sobre el tamaño, por ejemplo, obtener la línea de base de los elementos de texto del logotipo en un límite de píxeles (una forma de sugerencia).

Una adición a este tema que encontré interesante para los diseñadores de aplicaciones móviles es este script que crea activos de retina para iOS y Android en 1 clic.