29 de mayo de 2012

¿Trabajo con imágenes en alta o en baja entonces?

A raíz de la popularización de las publicaciones digitales y de los diferentes modelos de tableta que existen en el mercado, aparece de manera sistemática una pregunta en casi todos los cursos que comparto: "Entonces… ¿tengo que trabajar con las imágenes en alta o en baja, o ambas… o qué?"

La respuesta a esta pregunta puede ser más o menos simple dependiendo si queremos ser rigurosos o expeditivos. "Trabaja siempre con imágenes en alta", puede ser una respuesta para despachar una incómoda interrupción y seguir con un temario.


Una imagen digital tiene un número de píxels que tendrá que repartir dentro del área de impresión (en papel o pantalla) que le digamos. Si este área no coincide en píxels con la de la imagen, ésta se remuestreará.



Ahora bien, si queremos entender el trasfondo de la cuestión de manera sólida en lugar de expender recetas exprés, estaremos obligados a detenernos un tiempo en esta cuestión, que aunque no es difícil, es algo compleja.

Empecemos por definir algún concepto que nos será de utilidad, aunque probablemente ya sean conocidos por la mayoría de vosotros:

Resolución real de una imagen: es la cantidad de puntos o píxels que tiene una imagen por unidad de tamaño física. Pueden ser píxels por centímetro cuadrado, puntos de impresión por milímetro cuadrado… lo más usual es emplear el dpi (Dots Per Inch, o puntos por pulgada) y el ppi (Pixels Per Inch, o píxeles por pulgada).

 La primera unidad hace referencia a la resolución de una imagen en la impresión en papel, ya que informa sobre la densidad de puntos impresos por unidad de longitud del papel, mientras que la segunda sería el equivalente en el entorno de la pantalla. 

 En realidad, el dato más básico en cuanto al tamaño de una imagen digital no es tanto la resolución si no su tamaño real, desprovisto de la información de cómo o dónde irá impresa es imagen. Y el tamaño real es sencillamente su anchura por altura medidas en píxels. Por ejemplo, una fotografía digital de 1200x800 px. La información sobre su resolución solamente aparecerá en cuanto especifiquemos cuál será tu tamaño de impresión, en centímetros, milímetros o pulgadas.

Aspecto del detalle de la ventana de Vínculos de Adobe InDesign donde nos informa de la resolución real de una imagen colocada ("PPI reales") y la resolución que resultará una vez que la hemos encajado en su tamaño de impresión ("PPI efectivos")

Resolución efectiva de una imagen: es la resolución en dpi o ppi de una imagen digital una vez especificado el contexto del área de impresión que ocupará. Es decir, una imagen de 1200x800 px de tamaño tendrá una resolución de unos 300 dpi/ppi si la encajamos en un marco de impresión de unas dimensiones de unos  10 x 6,7 cm. La misma imagen encajada en un recuadro de 20 x 14 cm estará a 150 dpi/ppi de resolución.

Estos términos no son fáciles de visualizar cuando trabajamos en papel donde, una vez fijados los tamaños, éstos no varían. Por ejemplo, podemos decidir maquetar un documento de papel en tamaño A4 (210x297 mm) y dentro insertar esa imagen de 1200x800 px que, si queremos que aparezca en "alta resolución" (300 dpi), dicha imagen tendrá que ocupar un rectángulo de aproximadamente 10 cm de anchura por 6,7 cm de altura. En otras palabras, casi la mitad de la anchura de la hoja de papel por casi un tercio de su altura. Sencillo de imaginar.

Ahora bien, cuando abordamos una publicación digital, la cosa se complica. ¿Por qué? Pues fundamentalmente por la diversidad de soportes de hardware, lo que implica diversidad de pantallas y resoluciones. Diversidad en tamaño físico y por lo tanto, en resolución, en este caso en ppi (píxels por pulgada).

Páginas web, Apps, Revistas digitales, Libros electrónicos... todos estos productos de edición digital pueden verse afectados por los cambios en las resoluciones dependiendo en qué dispositivo las vea el lector final.

Como muestra, podemos citar una breve relación de tamaños físicos de pantalla vs. tamaño el píxels y por lo tanto resoluciones, para algunos los dispositivos móviles más populares del mercado ahora mismo:
  • iPhone 4S.  pantalla de 3.5" , 960x640 px (326 ppi)
  • Samsung Galaxy S3. pantalla de 4.8", 1280x720 px (306 ppi)
  • iPad 1 y 2. pantalla de 9.7", 1024x768 px (132 ppi)
  • Nuevo iPad. pantalla de 9.7", 2048x1536 px (264 ppi)
  • Samsung Galaxy Tab. pantalla de 7", 1024x600 px (170 ppi)
Es fácil apreciar la gran disparidad de tamaños y resoluciones. ahora bien ¿qué sucede con los contenidos bitmap, es decir, con las imágenes? ¿se verán bien? ¿se verán "pixeladas"?

La respuesta es: DEPENDE. Y, por desgracia, depende de varios factores, algunos a priori que no podemos controlar del todo. Pero que nadie se alarme: hay soluciones.

Podemos ilustrarlo con el caso más popular a día de hoy: la divergencia de resoluciones entre los iPads 1 y 2 (1024x768 px) y el Nuevo iPad (2048x1536 px). A partir de ahora, hablaremos de resoluciones 1024 y 2048 respectivamente para hacer referencia a los iPads 'viejos' y el Nuevo iPad. En el caso de las aplicaciones ("apps"), el nuevo iPad simplemente adapta los contenidos a la nueva resolución, aprovechando que la proporción de aspecto es la misma y el tamaño físico de la pantalla es el mismo (9.7"). Esto hace que las imágenes de una app que, en el iPad 1 y 2 se veían bien, en el Nuevo iPad se vean "mal", o sea, pixeladas.

¿Qué quiere decir que una imagen se ve pixelada?  Pues que el ojo humano es capaz de resolver los píxels individuales de esa imagen. Es decir, podemos distinguir los pixels uno a uno y eso hace que las curvas y figuras de esa imagen no se vean suaves si no con ese efecto rasgado o de "diente de sierra".

Tanto en el iPhone 4 como en el Nuevo iPad, el principal argumento de venta de Apple fue el de la Retina Display. ¿Qué quiere decir esto? Precisamente que la densidad de píxels por pulgada de esas pantallas es tan elevado que hace que el tamaño del píxel sea tan pequeño que el ojo humano no es capaz de resolver los píxels individuales.

En este punto hemos llegado al meollo de la cuestión. La clave está en este concepto: el tamaño del píxel. Y éste es un tema puramente de optometría.

A más grande es el tamaño real de una pantalla, más lejos la situamos de los ojos (autor: Ignacio Lirio)


Está claro que las unidades de medir imágenes digitales son los píxels. Pero el ojo humano ¿en qué unidades ve? ¿en milímetros? ¿en puntos? La respuesta es que nuestros ojos ven ángulos. Grados, minutos de arco, segundos de arco... ya que el tamaño de un objeto a nuestra vista depende obviamente de a qué distancia se encuentre:

Es por eso que en el caso de una pantalla que es físicamente pequeña, como la del iPhone, la resolución para que sea Retina Display es mayor (326 ppi) que para el iPad (236 ppi). Un tablet con una pantalla más grade habría que leerlo a más distancia y bastaría una resolución menor (150 ppi quizá) para que su resolución fuera "Retina".

 Esto es así porque el iPad tiene una pantalla de mayor tamaño físico y por lo tanto se suele situar a una distancia mayor de los ojos para leer que en el caso de un iPhone. A mayor distancia del plano de enfoque, mayor puede ser el tamaño del píxel para que no seamos capaces de resolverlo.

Geometría de la resolución de píxels de una pantalla a la vista. La columna de cuadrados representa los píxels de la pantalla. El ojo humano no puede resolver los píxels contiguos si la distancia entre ellos es menor de un valor límite ("Retina"), que está relacionado con su tamaño angular según la expresión de la imagen. (autor: Ignacio Lirio)

Ahora bien, ¿En qué afecta esto a la hora de diseñar o maquetar documentos digitales?

Depende del entorno. No es lo mismo una página web que un libro EPUB, o una App. En el caso particular de una página web y el iPhone/iPad (es decir, navegador Safari), éste — Safari — adapta automáticamente el contenido de toda la página HTML al tamaño estándar del denominado viewport, que son 980px de anchura.  Esto quiere decir que el tamaño relativo de impresión de nuestras imágenes de nuestra página web será variable, por lo que la resolución efectiva de las imágenes también lo será. 

Así que, según cómo hayamos hecho la maquetación CSS, la imagen que ocupaba 500 px de anchura en el iPad 1 y 2 ocupará 1000 px (el doble) de anchura en el Nuevo iPad, o 250 px (la mitad). O sea, que por más que desde Photoshop o similar hayamos creado esa imagen a una resolución determinada, puede ser que según donde se vea y en qué contexto se vea, esa resolución acabe siendo enriquecida o empobrecida.

En el caso de las Apps que se escalan proporcionalmente del iPad antiguo al nuevo, este cambio de tamaño es proporcional y es justo el doble.

Esto quiere decir que una imagen cuadrada que en la maquetación de la App a 1024x768 px (iPad 1 y 2) está diseñada para ocupar un área de 500 x 500 px, en el nuevo iPad ocupará la misma área proporcional (no dejará márgenes en blanco, el diseño no fluye...) y por lo tanto ocupará un área de 1000 x 1000 px. Esto es confortable para el usuario que verá que la misma imagen ocupa la misma proporción de su campo visual. Ahora bien, este aumento proporcional se hace a costa de los píxels de la imagen. Y aquí es donde entra la idea central de resolución real vs. resolución efectiva.

El cuadrado de 500 x 500 px es el marco que cobija a nuestra imagen. Esto no quiere decir que nuestra imagen tenga que tener exactamente 500 x 500 px. Esto solamente sería así si la imagen tuviera una resolución real de 132 ppi, la del iPad 1 y 2 a 1024.

Photoshop trabaja a una resolución de pantalla estándar de 72 dpi, que se puede cambiar en las Preferencias del programa.


Cuando hay un cambio de entorno, en este caso a una pantalla igual de grande pero con el doble de resolución, se produce un remuestreado de la imagen. Esto quiere decir que hay que representar dicha imagen pero esta vez en un área proporcional de 1000 x 1000 px, para que ocupe exactamente la misma área en pulgadas.

 Si la imagen original medía precisamente 500x500 px, para poder rellenar el mismo espacio el tamaño del píxel tendrá que ser el doble. Ahora bien, si la imagen original estaba encajada en un marco de 500 x 500 px pero realmente era un archivo de, por ejemplo, 2000 x 2000 px ; la imagen tiene suficientes píxels como para poder representarla dentro de una caja de 1000 x 1000 px sin tener que aumentar el tamaño de cada píxel, por lo que podremos visualizar la imagen con el tamaño del píxel de la imagen idéntico al tamaño del píxel de la pantalla. Entonces, si la pantalla está en alta resolución, la imagen, también.

Regresando al plano más práctico, el del diseñador sentado delante de su Nuevo Documento en Photoshop: a la hora de crear imágenes para maquetar en digital, en pantallas... ¿qué cifras pongo en los campos de tamaño de documento campo "resolución"? 


En este ejemplo, se está creando una imagen de 6x3 cm, a la resolución del nuevo iPad (264 ppi). Esto generará una imagen de unos 560x280 px.

La respuesta puede ser: Ajusta el tamaño de tu imagen en unidades físicas: centímetros, milímetros o pulgadas, según el tamaño real que quieres que ocupen. Hay dos resoluciones de iPad ¡pero un mismo tamaño de pantalla! y ajusta la resolución a —por lo menos— 264 ppi , que es la resolución de la pantalla del Nuevo iPad, la máxima.

De este modo tendrás una imagen con unas dimensiones en píxels suficiente para que se vea de manera óptima en ambas pantallas o resoluciones, ocupando el tamaño de maquetación en cm o mm que le des, sin temer porque el tamaño del píxel de la imagen se vea magnificado al punto que los lectores lo puedan distinguir.

14 de mayo de 2012

Curso práctico de diseño web con Adobe Muse



Las profesiones relacionadas con la publicación de contenidos digitales evolucionan muy rápidamente y por ende hay un riesgo real de quedarse 'fuera de juego' en poco tiempo si uno no está atento a estos cambios. Un ejemplo de ello es la profesión de Diseñador de páginas web. ¿Os acordáis de la época en que había que planear un proyecto de Sitio Web desde cero, con páginas en blanco desde Dreamweaver con las típicas secciones de productor-servicios-quiénes somos-contactar? 

Pues bien, ahora la cosa ha cambiado. El mundo de la web se ha vuelto más ligero, volátil, y esos proyectos monstruosos han perdido peso versus el diseño personalizado de microsites, landing pages, etc. Por lo tanto, hay que optimizar los recursos al máximo para optimizar a la vez nuestros presupuestos y no perder el tren.

Es por eso que ahora desde Publicar En Digital hemos añadido a nuestra oferta formativa un nuevo curso: Diseño de Sitios Web atractivos con Adobe Muse.



En este curso, veremos cómo crear fácilmente un sitio web de manera 100% visual, y posteriormente editar cada una de sus páginas, completándolas con toda clase de "widgets" como menús desplegables multinivel, por supuesto sin programar absolutamente nada y con opciones atrayentes para el diseñador gráfico como la inclusión de Fuentes Web para poder hacer diseños realmente atractivos. ¡Lo de hacer páginas HTML que se no sabemos si se verán en una mediocre Times New Roman ya ha pasado a la historia!



Detalle del diseñador visual de Sitios web con páginas conectadas de Adobe MUSE.


Los puntos que cubriremos en este taller presencial son:
  • Diseño VISUAL de la Estructura del sitio 
  • Páginas maestras (como si fuera InDesign!)
  • Añadir Links entre páginas.
  • Añadir imágenes.
  • Inserción de Widgets de menús, paneles, presentación de diapositivas.
  • Creación de estilos de texto con fuentes Web.
  • Insertar html externo.
  • Insertar mapas de Google, videos en streaming, etc.
  • Creación de sitios web adaptados a Móvil y Tablets, visualmente.
  • Publicar tu sitio.
He aquí un breve vídeo introductorio para que te hagas una idea del concepto revolucionario de Adobe MUSE:



¿Cuándo? 

Opción presencial (en Barcelona): 23 y 30 de Mayo de 2013, de 10:00 a 14:00 h

Opción online: 14, 21 y 28 de Mayo; de 18:30 a 20:30

¿Dónde? 

Modalidad presencial: en nuestras instalaciones de Publicar en Digital (c/ Provença, 242 Barcelona)

¿Cuánto?

Presencial: 140€. A este precio puedes aplicar un 10% de dto. si ya has hecho algún curso con nosotros, un 5% adicional si nos sigues en las redes sociales o un 30% si estás actualmente en situación de desempleo (no acumulable)

Online: 70€


Observaciones

Puedes obtener más detalles, así como solicitar tu plaza, puedes rellenar el formulario adjunto o bien solicitarlo por teléfono al 93 323 94 35 o bien por e-mail a: 








2 de mayo de 2012

Taller de Adobe Digital Publishing Suite (DPS)

Dentro del universo de la publicación digital, uno de los cursos más atractivos para los profesionales provinientes del diseño gráfico es el de creación de revistas interactivas para tablets con Adobe Digital Publishing Suite (DPS).




Esta tecnología permite utilizar el software de maquetación por excelencia, Adobe InDesign, junto con unos plug-ins gratuitos y disponibles desde la web de Adobe, para libros, revistas, catálogos... que son auténticas experiencias interactivas táctiles tanto para iPad como para tablets o smartphones Android que posteriormente se pueden distribuir o comercializar a través de los diferentes "markets" (AppStore de Apple o Google Play / Amazon en el caso de Android).




 Ejemplo de App de tipo "quiosco" realizada con Adobe DPS correspondiente a una marca, donde el usuario puede descargar a voluntad la revista que desee.


En este taller de 7 horas de duración, se abordan los siguientes temas clave:
  • Creación de archivos Folio en la nube de Adobe
  • Maquetación adaptada a diferentes entornos, resoluciones y proporciones
  • Inserción de elementos multimedia (vídeos, audio)
  • Widgets interactivos (Pase de diapositivas, Contenido web, Textos con scroll...)
  • Publicación privada de Folios
  • Creación de Apps "Single Folio" o Quioscos.
En la actualidad muchas marcas de todos los tamaños ya están empleando esta tecnología de Adobe Digital Publishing Suite para publicar sus revistas, catálogos, anuarios, etc. a través de AppStore, Google Play (ex Android Market) o incluso el Quiosco de iPad (Newsstand) de manera gratuita o con diferentes precios a la venta. He aquí una galería de apps creadas con esta tecnología para que las puedas descargar y experimentar por tí mismo el tipo de producto que generan.

Adobe DPS provee de una interfaz gráfica sencilla para que el lector pueda hojear los contenidos de la revista multimedia

Lo mejor de DPS es que no requiere de conocimientos extra de programación ni nada similar. De modo que, a partir del día después de asistir a nuestro curso (solo son dos jornadas) ya podrás empezar a crear y compartir tus publicaciones digitales multimedia en tu tablet y en el de tus colegas profesionales.

Además, desde Publicar en Digital te facilitamos que te incorpores al grupo de usuarios oficial Adobe (AUG) de DPS, donde compartimos conocimientos a nivel más avanzado y te ponemos en contacto con editores, diseñadores y desarrolladores de publicaciones digitales de todo el ámbito de España.

Instantánea del curso de Adobe Digital Publishing realizado el pasado diciembre en Madrid.

No sólo eso... en Publicar En Digital estamos a la última en todo y no queremos que vengáis a tomar un curso de revistas electrónicas tomando apuntes en un Moleskine de papel ;-)  así que con el precio del curso ¡te incluimos los apuntes en vídeo! ya que tendrás acceso al curso de Digital Publishing Suite en vídeo realizado por José Ramos para Video2Brain. Aquí puedes ver una muestra:

Las próximas fechas de este curso son:


17 y 24 de Mayo (mañanas) en Barcelona.
23 de Mayo (todo el día) en Madrid.


Más información en nuestra página de formación. , por teléfono al 93 323 94 35 o por e-mail en:


¡Te esperamos!




Consulteu aquí la versió en català d'aquest blog