Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Útiles esenciales para diseñar

En esta página hablamos de una serie de herramientas y sistemas de trabajo que son imprescindibles por diferentes motivos: retículas, guías, plantillas y estilos.

Las retículas

Casi todos los programas incorporan una opción de manejar retículas (normalmente una cuadrícula con espaciado configurable.) Esta red —que no se imprime— sirve como referencia para colocar los diferentes elementos del texto, imagen, tablas... se puede activar la opción de aproximar los objetos a las líneas de la red y éstos se desplazarán, como si fueran atraídos por ella, hasta alinearse con la fila y la columna más próximas.

Algunos programas permiten retículas especiales: por ejemplo, Xara 2 tiene la opción de elegir una cuadrícula isométrica (ver la figura.) Si dibujamos respecto de esta cuadrícula podemos fácilmente obtener objetos con aspecto tridimensional.

Retícula isométrica

Muchos programas de ilustración vectorial incorporan un tipo u otro de guías o retícula para facilitar el dibujo en perspectiva: Freehand dispone de una herramienta especial, mientras que para Illustrator existe un plugin especializado; CorelDraw permite fugar en perspectiva los objetos desde las primeras versiones.

Guías.

Igualmente, puede utilizarse una regla vertical y otra horizontal como referencia, para saber la posición en que se encuentra un elemento (o el puntero del ratón.) Respecto de estas líneas se pueden definir unas líneas de guía, que se emplean para colocar con precisión los elementos. La forma habitual de colocar las líneas guía es hacer clic sobre la regla y arrastrar hasta la posición deseada. También puede variarse la posición del punto de origen de coordenadas (0,0) con el mismo sistema.

guíasLas retículas y las guías son herramientas de gran utilidad cuando lo que cuenta es trabajar con precisión y queremos una estructura de base para organizar la disposición del diseño. Si hacemos un esbozo en papel, sobre papel cuadriculado, podemos hacer servir las dos retículas para que se correspondan entre sí el borrador y el producto definitivo.

Debemos tener especial cuidado con las unidades que utiliza el programa. A veces, será necesario cambiarlas en la opción correspondientes del programa (normalmente, se accede a este cambio desde una parte del menú como Preferencias... Opciones... Configuración... o similar.) Si debemos trabajar en un diseño para la pantalla, es más cómodo configurar las unidades como píxels, y elegir un tamaño de página que se corresponda con la resolución de monitor elegida (normalmente 640 x 480, 800 x 600 o 1024 x 768.) Si, en cambio, el proyecto está destinado a la impresión en papel, será mejor definir la red en milímetros o centímetros (cuidado: muchos programas utilizan por defecto pulgadas — una pulgada son aproximadamente 2,54 cm.)

Las guías son también muy útiles para automatizar no sólo la colocación de los elementos en un layout, sino también para el recorte preciso de los elementos; esto tiene especial importancia en el desarrollo gráfico de diseños ara la web o para la pantalla. Más información en “gráficos para la web”.

Las plantillas

Las plantillas ahorran el trabajo de repetir los elementos comunes a diferentes partes de un proyecto. Por ejemplo,  los elementos de la parte superior, e inferior de la página suelen ser constantes: comparten encabezados, números de página, una misma distribución; el área dedicada a los artículos puede tener una distribución que se mantiene constante dentro de cada sección. En este caso vale la pena crear una plantilla para cada sección de la publicación que comparta una misma estructura básica y elementos:

uso plantillas      uso plantillas

Una plantilla nos permite ahorrar mucho tiempo, puesto que evita definir cada vez el diseño de la página o colocar los elementos fijos de la maqueta. Basta con llenar las partes que sí han cambiado. Por otra parte, hace posible una consistencia en el aspecto de la publicación, ayudando al lector a situarse y a sentir una mayor familiaridad.

Si el programa que utilizáis no tiene una opción específica para plantillas (si está en inglés, será templates) podéis hacerlo muy fácilmente. Preparad el documento base y guardadlo con el nombre que os convenga, haciendo referencia a que se trata de una plantilla. Por ejemplo, plantilla_seccion.ext (ext: la extensión correspondiente.) A continuación, abrid el fichero en la aplicación e introducid las modificaciones necesarias para, digamos, un artículo. Para guardar este artículo, el documento con los cambios realizados, cada vez daremos un nombre nuevo, para no escribir sobre la plantilla, que debe mantenerse invariable: (Archivo | guardar como...)

Variaciones sobre el tema de las plantillas.

plantilla para calcar en DreamweaverUna variante del sistema de plantillas la tenemos en programas que permiten abrir una imagen como esquema para colocar elementos encima, o calcarla, sin posibilidad de alterar aquella imagen de fondo, y sin que ésta interfiera para nada. Por ejemplo, el editor de páginas web Dreamweaver permite abrir una imagen, la coloca al fondo con un color atenuado respecto del original, y así podemos situar los elementos de la página web con una precisión de un píxel. La imagen no formará parte de la página html ni se verá; sólo es un recurso para el diseño. Muchos diseñadores utilizan esta posibilidad, porque preparan un esbozo de cómo quieren la página, al tamaño real de la pantalla (con Photoshop, Illustrator u otro programa), guardan la imagen como .gif o .jpg y la utilizan después de referencia de este modo.

Por su parte, el uso especial de plantillas que hace Adobe Illustrator es emplear una imagen como pauta para dibujar. Nuevamente, no se imprimen ni se alteran para nada con el trabajo del programa, pero permiten dibujar encima como si calcáramos.

Estilos

Los estilos son otra forma de ahorrar tiempo y conferir consistencia a los trabajos dentro de un programa. La idea es, sencillamente, separar los contenidos y el formato. Por ejemplo, decidimos los atributos que ha de tener el texto, los que deben tener los encabezados, un pie de foto... y cada vez que marcamos un texto como uno de estos elementos del documento, automáticamente aplicará todo el formato que previamente hayamos decidido.

Dado que los estilos pueden reutilizarse en diferentes documentos, el ahorro de tiempo puede ser enorme. Aplicar un solo cambio a la definición del estilo puede actualizar todos los textos de tantos documentos como se desee. Además, no nos equivocaremos nunca al elegir tamaños de texto, interlineado, tipos de letra, porque todo lo unifica para todas las partes donde se haya aplicado el estilo.

Cambios automáticos con los estilos.

Uno de los alicientes de usar estilos está en la modificación de todo el aspecto de un gran documento (o de un conjunto de ellos) con sólo modificar los atributos de la definición de estilo. Por ejemplo, si cambiamos el color de los títulos y subtítulos en la definición de estilo, siempre que tengamos uno de estos elementos, aunque sean docenas, dispersos en muchas páginas, todo se actualizará al momento. Razón más que suficiente para emplear este recurso de la mayoría de programas. Para proyectos de una cierta envergadura es imprescindible.

Naturalmente, podemos realizar la definición de estilos así como queramos. Podemos crear nuevos estilos, con un nombre descriptivo, como por ejemplo “encabezado”, “título en rojo” o “sección en cursiva”. A menudo se habla de hoja de estilo para referirse al conjunto de formatos definidos para un documento (o un conjunto de ellos.) Típicamente, pueden contener elementos tales como título, subtítulo, cuerpo de texto, pies de foto, citas...

Para las páginas web, se ha introducido un poderoso sistema de hojas de estilo que se denomina hojas de estilo en cascada (CSS). (de cascading style sheets) Es una tecnología que se utiliza cada vez más, a medida que la mayoría de internautas utilizan versiones actualizadas de los navegadores, que reconocen este avance en el diseño web.

Otras variantes en la idea de estilos.

Aunque en la mayoría de casos al hablar de estilos y hojas de estilo nos referimos al texto, algunos programas como CorelDraw o Freehand aplican también la idea de estilo a los gráficos. En este caso los atributos son el color de los objetos, el color, grosor y forma de las líneas de contorno...

Algunos programas van incluso un poco más allá y usan las plantillas como estilos. ¿Suena complicado? De hecho es algo muy simple, pero que supone una herramienta poderosísima para cambiar automáticamente el aspecto de todas las páginas que comparten una plantilla, modificando únicamente la plantilla maestra. Por ejemplo, es lo que hace NetObjects Fusion (el programa utilizado para el diseño de esta web), al crear una web entera con todas las páginas y secciones que se quieran.