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

29

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 trato de guardar la imagen en PNG o JPEG, lo que debería haber sido simple resulta ser muy complicado.

Entiendo que Adobe Illustrator quiere tratar la imagen como un cierto tamaño, y luego quiere multiplicar ese tamaño por un factor de escala de píxeles por pulgada para obtener el número real de píxeles que guarda. Tiene algunas opciones de factores de escala limitados 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 manera de especificar el ancho o la altura del píxel 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.

Howard
fuente
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, simplemente cámbiela y luego

Respuestas:

26

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 correctamente?

Scott
fuente
Perfecto gracias. Acabo de pasar unos 15 minutos con la función de "exportación", pero como se niega a usar menos de 72ppi, tuve que reescalar la obra de arte y la mesa de trabajo para exportaciones muy pequeñas, eso es probablemente lo que hizo también el autor de la pregunta.
Kjeld Schmidt
12

Usar File → Save for Webe ingresar las dimensiones hará lo que buscas. Además, Illustrator utiliza la escala de vectores, por lo que los resultados son mejores que si hubiera intentado lo mismo en Photoshop: ingresar dimensiones que no coinciden con el documento en Photoshop significa que la imagen tendrá una escala de 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 una muy buena posibilidad de que quieras Convert to sRGBapagarlo: convierte destructivamente tu imagen del espacio de color actual a sRGB, haciendo que los colores cambien.

ingrese la descripción de la imagen aquí

Marc Edwards
fuente
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.
Scott
2
Gracias por el consejo CS6. Dejar Convertir a sRGB activado es absolutamente el enfoque equivocado para el trabajo web y de interfaz de usuario. Aquí hay un artículo completo sobre por qué: bjango.com/articles/photoshopCompártame sobre esto bajo tu responsabilidad!)
Marc Edwards
2
¿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 color, DEBE aparecer 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 entiendes lo que implica.
Marc Edwards el
1
Scott, por favor, no tomes esto como un ataque ad hominem, pero de discusiones similares creo que puedes haber captado algunas ideas erróneas sobre la representación del color RGB. Consulte también graphicdesign.stackexchange.com/questions/7815/… .
e100
3
Convertir a sRGB es la elección incorrecta en casi todas las situaciones posibles cuando se trabaja para la web. "Hay una RAZÓN por la que el equipo de Save for Web implementó la opción Convertir a sRGB": es hora de solucionarlo. feedback.photoshop.com/photoshop_family/topics/…
Marc Edwards
1

Cuando necesito admitir múltiples tamaños de píxeles, duplico y escalo el arte dentro del mismo archivo AI. Cada tamaño va en una mesa de trabajo separada del tamaño correcto. Adjunto el nombre de la placa con el formato de archivo que se exportará. Luego ejecuto un jsx que exporta cada mesa de trabajo y recoge 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, iconos y anuncios gráficos.

vestido de civil
fuente
Por favor, ¿puedes compartir el .jsx?
Kelin
@kelin me temo que no puedo. Ha pasado mucho tiempo desde que me he molestado con los productos de Adobe.
vestidos de civil
1
No es un problema, encontré un excelente script aquí: stackoverflow.com/a/28067227/3050403
kelin
0

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 renderizarla. 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 base de los elementos de texto del logotipo en un límite de píxeles (una forma de sugerencia).

e100
fuente
0

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.

numediaweb
fuente