Trucos y consejos de Adobe InDesign: Exportar gráficos para la Web con la resolución correcta

Hay gente que crea gráficos para la web en Adobe InDesign. Eso se puede hacer.

En una ocasión, un amigo me preguntó cómo era posible que, al exportar un gráfico como JPG y verlo en Photoshop, la resolución ya no fuera la correcta. Primero tuve que ver por mí mismo cómo podía ser.

Primer paso

Te muestro cómo hacerlo correctamente:

Voy a Archivo>Nuevo>Documento y allí ya puedo establecer si lo quiero para impresión, web o publicación digital. Necesito Web.

Se utilizan píxeles como unidad de destino, lo cual es correcto. También podría decir exactamente qué resolución quiero en Formato de página o puedo introducirlo directamente en Ancho y Alto. Digamos 800 × 200 Px y confirme con OK.

Paso 2

Luego tengo el espacio de trabajo aquí y voy a crear un botón aquí, por ejemplo.

Para ello, voy a utilizar la herramienta rectángulo y dibujar una forma.

Luego quiero añadir un degradado de arriba a abajo. Así que selecciono Tipo: Lineal y Ángulo: 90°.

Establezco que no quiero un contorno utilizando campos de color.

Paso 3

Por supuesto, también puedo ajustar el color yo mismo si no me gusta. Pero de momento no se trata de eso.

Pero si lo hago, puedo seleccionar el color yendo a Campos de color>Nuevo campo de degradado. Éste se crea inmediatamente y luego puedo hacer doble clic en él y mover el control deslizante del negro ligeramente hacia la derecha, por ejemplo, para que no se vuelva completamente blanco de inmediato.

Paso 4

A continuación, me gustaría redondear el conjunto e ir a Objeto>Opciones de esquina.

Siempre me gusta hacer esto con Vista Previa, para que pueda verlo de inmediato. Y luego simplemente establezco Redondeado y 20 px.

Entonces todo el asunto se ve así:

Paso 5

Hay otro contorno ahí que no quería y lo vuelvo a quitar. Ahora podría añadir algo de texto, pero vamos a dejarlo como está.

Paso 6

Ahora quiero exportar esto, así que voy a Archivo>Exportar y lo llamo "botón".

Entonces puedo seleccionar el formato de archivo que quiero. PNG es interesante porque también puedo guardar las transparencias allí. Vamos a hacerlo.

Entonces obtengo exactamente la misma ventana que con JPG. Podría exportar varias páginas, pero como de momento sólo tengo una, en este caso es irrelevante.

También puedo ajustar la calidad. La resolución es siempre de 300 ppi - ppi son píxeles por pulgada.

Luego, por supuesto, es importante Fondo transparente y voy a Exportar.

Paso 7

Ahora abro este archivo en Photoshop e inmediatamente me doy cuenta de que es un poco grande.

Si miro en Imagen>Tamaño de imagen, tiene 3334 × 834 píxeles. Pero si no lo había ajustado al crear el documento.

Paso 8

Volvamos a InDesign y vayamos a Archivo>Exportar. Esta vez lo llamaré "botón2".

Y aquí está la cosa: tienes que introducir 72 ppi aquí en Resolución. Eso es todo. Sólo cuando se introduce este valor es exactamente la resolución que hemos creado al principio.

Entonces también tiene los 800 × 200 píxeles deseados en Photoshop.





Eso es básicamente todo. Eso es todo. Básicamente, sólo tiene que asegurarse de que 72 ppi se introduce al exportar.