+ All Categories
Home > Documents > Manual de diseño digital

Manual de diseño digital

Date post: 14-Jun-2015
Category:
Upload: ralupord
View: 1,678 times
Download: 3 times
Share this document with a friend
Description:
Muestra del libro, dedicado al diseño gráfico, la tipografía, la ilustración e imagen digital y el diseño web. Incluye un capítulo completo (dibujo vectorial con Inkscape, Expression y otros programas alternativos) y el índice detallado de toda la obra. El libro se puede conseguir en Lulu Publishing: http://www.lulu.com/content/489305. También disponible en Amazon.
32
Transcript
Page 1: Manual de diseño digital
Page 2: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 2

Índice general

EDITORES DE TEXTO ........................................................................................................................ 4

¿POR QUÉ UTILIZAR UN EDITOR DE TEXTO SIMPLE?............................................................................ 4ALGUNOS EJEMPLOS DE EDITORES DE TEXTO .......................................................................................... 6USO AVANZADO ....................................................................................................................................... 7

EDICIÓN DE (X)HTML Y CSS EN MODO TEXTO ........................................................................ 8

EJEMPLOS DE LA FUNCIONALIDAD DE NOTETAB ................................................................................. 9LIBRERÍAS................................................................................................................................................. 9ESQUEMAS .............................................................................................................................................. 10OPERACIONES DE REPARACIÓN DE TEXTOS............................................................................................ 10INTEGRACIÓN CON TIDY......................................................................................................................... 10EDITOR DE HTML .................................................................................................................................... 10FUNCIONES DE BÚSQUEDA Y REEMPLAZO AVANZADAS ......................................................................... 10OTRAS CARACTERÍSTICAS ...................................................................................................................... 11RECURSOS.............................................................................................................................................. 11

DESCARGAS: ARCHIVOS DE SOFTWARE ................................................................................. 12

INTRODUCCIÓN ..................................................................................................................................... 12PRECACUCIONES A TENER EN CUENTA ................................................................................................ 12VIRUS...................................................................................................................................................... 12ESPÍAS EN CASA ...................................................................................................................................... 13LA ALTERNATIVA OPEN SOURCE.......................................................................................................... 14SOURCEFORGE ........................................................................................................................................ 14OPENOFFICE.ORG ................................................................................................................................... 14SERVIDORES DE PROGRAMAS Y SITIOS CON ENLACES........................................................................ 14PRICELESSWARE ..................................................................................................................................... 15TINYAPPS ................................................................................................................................................ 16CLEAN SOFTWARE.................................................................................................................................. 16LA DESCARGA DE FICHEROS EN REDES DE INTERCAMBIO ................................................................. 16EMULE .................................................................................................................................................... 18

TRADUCCIONES Y BÚSQUEDAS EN INTERNET ...................................................................... 20

TRADUCCIÓN AUTOMÁTICA ................................................................................................................. 20LAS HERRAMIENTAS DE IDIOMA DE GOOGLE ......................................................................................... 21TRADUCCIÓN AUTOMÁTICA AL CATALÁN .............................................................................................. 21BÚSQUEDAS EN INTERNET .................................................................................................................... 22BUSCADORES TEMÁTICOS Y DE BÚSQUEDA LIBRE ................................................................................. 22GOOGLING .............................................................................................................................................. 24DMOZ ...................................................................................................................................................... 25LA BARRA DE GOOGLE ........................................................................................................................... 25SELECCIONAR LA INFORMACIÓN DE INTERNET. ..................................................................................... 25GESTIÓN DE LOS MARCADORES O FAVORITOS (COLECCIONES DE ENLACES)................................... 26

Page 3: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 28

Índice general

INKSCAPE, EXPRESSION Y OTROS PROGRAMAS DE DIBUJO VECTORIAL .................. 31

INKSCAPE............................................................................................................................................... 31PRESTACIONES........................................................................................................................................ 32VECTORIZAR EN INKSCAPE..................................................................................................................... 33EXPRESSION........................................................................................................................................... 34PRESTACIONES Y PRINCIPALES CUALIDADES ......................................................................................... 35OTROS PROGRAMAS DE DIBUJO VECTORIAL....................................................................................... 36OPENOFFICE DRAW ................................................................................................................................ 36DENEBA CANVAS ................................................................................................................................... 37REALDRAW ............................................................................................................................................. 37

EFECTOS AVANZADOS EN DIBUJO VECTORIAL ................................................................... 38

EFECTOS DE TRANSPARENCIA .............................................................................................................. 41CAMBIOS DE COLOR.............................................................................................................................. 44CREAR CONTORNOS MÁS NATURALES ................................................................................................. 46EMBORRONAR EL CONTORNO ................................................................................................................. 47DISTORSIONAR LA FORMA ...................................................................................................................... 47SUPERPOSICIÓN....................................................................................................................................... 47PINCELES CALIGRÁFICOS Y NATURALES................................................................................................. 47TRAMAS Y PATRONES............................................................................................................................ 48TIPOS DE RELLENO APLICABLES ............................................................................................................. 49EFECTOS DE MOLDE.............................................................................................................................. 50TRANSFORMACIÓN TRIDIMENSIONAL ................................................................................................. 53

FILTROS EN PROGRAMAS DE DIBUJO VECTORIAL ............................................................. 54

LOS FILTROS EN CORELDRAW............................................................................................................. 54ISOCALC.................................................................................................................................................. 54OTROS SCRIPTS ....................................................................................................................................... 55EXTRAS EN FREEHAND ......................................................................................................................... 55LOS PLUGINS PARA ILLUSTRATOR ....................................................................................................... 56ALGUNOS EJEMPLOS DE PLUGIN ............................................................................................................. 57OTROS PROGRAMAS AUXILIARES INTERESANTES. ............................................................................. 61LSVG (L-SYSTEM VECTOR GENERATOR).............................................................................................. 61SPRAY ..................................................................................................................................................... 63RECURSOS.............................................................................................................................................. 63PLUGINS PARA ILLUSTRATOR:................................................................................................................ 63CORELDRAW: ......................................................................................................................................... 64OTROS:.................................................................................................................................................... 64

STORYBOARDING ............................................................................................................................ 65

¿QUÉ ES? ............................................................................................................................................... 65EL STORYBOARD COMO TÉCNICA DE CREATIVIDAD .......................................................................... 66STORYBOARDS EN EL CUADERNO DE BOCETOS ...................................................................................... 66

Page 4: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 29

CÓMO DESARROLLAR EL STORYBOARD .............................................................................................. 67HERRAMIENTAS DIGITALES ................................................................................................................. 68

MEDIOS NATURALES ...................................................................................................................... 71

PAINTER................................................................................................................................................. 72PHOTOSHOP........................................................................................................................................... 74LOS PINCELES EN PHOTOSHOP................................................................................................................ 75IMITACIÓN DE GRABADOS Y OTRAS TÉCNICAS ....................................................................................... 75OTROS PROGRAMAS.............................................................................................................................. 75VECTORES Y BITMAPS .......................................................................................................................... 76TRUCOS Y IDEAS.................................................................................................................................... 76

TÉCNICAS DE PHOTOSHOP .......................................................................................................... 78

UTILIZAR LOS CANALES ....................................................................................................................... 78TRAZADOS ............................................................................................................................................. 80SELECCIONES ........................................................................................................................................ 80MÁSCARAS............................................................................................................................................. 80CAPAS .................................................................................................................................................... 81GRUPOS DE RECORTE.............................................................................................................................. 81MÁSCARAS DE CAPA............................................................................................................................... 82ENRIQUECER EL ASPECTO DE LAS IMÁGENES CON SUPERPOSICIONES ............................................. 83EFECTOS DE DESGASTE Y ENVEJECIMIENTO ...................................................................................... 83ACCIONES .............................................................................................................................................. 84

FILTROS EN PHOTOSHOP ............................................................................................................. 86

¿QUÉ SON LOS PLUGINS DE PHOTOSHOP?........................................................................................... 86CÓMO UTILIZARLOS ............................................................................................................................. 87ALGUNOS FILTROS, COMENTADOS ...................................................................................................... 88COMBINAR FILTROS.............................................................................................................................. 89FILTROS EN GIMP................................................................................................................................ 89RECURSOS.............................................................................................................................................. 90

TÉCNICAS AVANZADAS PARA ESCANEAR .............................................................................. 91

PREPARACIÓN DE IMÁGENES SEGÚN LA SALIDA................................................................................. 91IMÁGENES MUY PEQUEÑAS O DE ESCASA CALIDAD ............................................................................ 91PREPARACIÓN DE IMÁGENES PARA VECTORIZACIÓN ........................................................................ 92FORMATOS PARA GUARDAR ................................................................................................................. 93

ROTULACIÓN DE LOS CÓMICS DIGITALES ............................................................................ 94

TIPOGRAFÍAS ADECUADAS ................................................................................................................... 95INTRODUCCIÓN DEL TEXTO.................................................................................................................. 95PREPARACIÓN DE LOS BOCADILLOS .................................................................................................... 96EFECTOS ESPECIALES ........................................................................................................................... 97RECURSOS.............................................................................................................................................. 98

Page 5: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 30

APLICACIÓN DE COLOR AL CÓMIC DIGITAL ........................................................................ 99

CÓMICS IMPRESOS Y CÓMICS EN PANTALLA........................................................................................... 99VENTAJAS DEL CÓMIC DIGITAL .............................................................................................................. 99INCONVENIENTES ................................................................................................................................. 100FORMATO DEL CÓMIC DIGITAL ............................................................................................................. 100TÉCNICAS.............................................................................................................................................. 101PREPARACIÓN DE ORIGINALES .......................................................................................................... 102MÉTODOS DE COLOREADO ................................................................................................................. 102COLOREADO SIMPLE UTILIZANDO UNA CAPA CON EL ARTE LINEAL .................................................... 102COLOREADO UTILIZANDO LOS CANALES DE COLOR............................................................................. 103RESOLUCIÓN........................................................................................................................................ 103

SISTEMAS DE RETÍCULAS EN EL DISEÑO GRÁFICO .......................................................... 105

COMPOSICIÓN DE PÁGINA Y TEXTO ................................................................................................... 105DISTRIBUCIÓN DE LAS RETÍCULAS..................................................................................................... 107FLEXIBILIDAD DE LA RETÍCULA ......................................................................................................... 109

Page 6: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 31

Inkscape, Expression y otrosprogramas de dibujo vectorialInkscape

Inkscape es un proyecto opensource (código abierto, lo que significa que la distribución delprograma es completamente libre y también lo és el código fuente del programa) de aplicaciónde dibujo vectorial, semejante a otros programas tan conocidos como Illustrator o Freehand.

Después de largo tiempo de preparación, el programa empieza a dar sus frutos y ya es posibledisponer de una versión funcional, tanto en entornos Linux como MacOSX o Windows.

El programa se instala de una manera ultra-simple. De hecho ni siquiera hace falta instalaciónalguna. Conseguimos el fichero necesario en la web del proyecto (http://www.inkscape.org ).Se descomprimen todos los archivos en una carpeta y listo: bastará hacer doble clic sobre elfichero ejecutable. Para mantenerlo al día, ya que está todavía en desarrollo y se va añadiendofuncionalidad y correcciones continuamente, basta visitar de nuevo el sitio y comprobar si hayalguna versión nueva. Normalmente no hace falta descargar toda la distribución, sino que essuficiente con el ejecutable nuevo.

Page 7: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 32

Fig. 4.1. Inkscape posee algunas funciones que en otros programas de ilustración estándisponibles sólo mediante plugins comerciales, como la capacidad de crearcomposiciones repetitivas simétricas.

Prestaciones

La interfaz de Inkscape es muy parecida a la de los programas de dibujo vectorial conocidos.Tiene una barra de menú con las opciones que cabe esperar: Archivo, edición, ver, capa,objeto, trazo, texto y ayuda.

El formato nativo de Inkscape es el estándar SVG, con inclusión de metadatos detallados(comentado en detalle en un artículo de nuestro manual en línea.), si bien también puedeguardar como EPS, PS, AI y POVray, y exportar a mapa de bits. Si guardamos como EPS esfácil obtener después un PDF a partir de Ghostscript. Es posible importar una amplia variedadde formatos, entre ellos todos los formatos de mapa de bits habituales y algunos vectoriales.

Algunas de las funciones más destacables de Inkscape son:

� Menús contextuales para las principales opciones relevantes en cada momento.

� Barra de herramientas sensible al contexto.

� Herramientas de dibujo habituales, y además pincel caligráfico sensible a la presión.

� Funciones avanzadas de distribuir, alinear y transformar.

� Rellenos planos, degradadados y de patrones que se pueden crear a medida.

� Transparencia en cualquier elemento del dibujo.

� Organización del dibujo en capas.

� Editable en forma de xml, con un editor incorporado.

� Clones (como los “símbolos” en otros programas). Al editar el objeto maestro, sus clonesse actualizan automáticamente.

� Expansión de trazos a objetos cerrados muy precisa.

� Opciones de unir, recortar, intersectar, excluir... etc. los trazados seleccionados.

� Avanzado creador de motivos basados en simetrías geométricas, con posibilidad de añadirfactores de aleatoriedad para conseguir efectos más artesanales.

� Simplificación de trazos por eliminación de los nodos superfluos.

� Excelente vectorizador de mapas de bits integrado.

� Rejilla, guías, diferentes herramientas para visualizar la ilustración...

Es decir, Inkscape es ya un programa con una excelente serie de funciones que no harán másque mejorar y perfeccionarse sucesivamente. La limitación más evidente es la de aceptarsólamente ilustraciones en una sola página (si bien admite una gran variedad de formatos y sepuede personalizar el tamaño.)

Page 8: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 33

Fig. 4.2. Inkscape es apto para cualquier tarea que se pueda hacer en un programa deilustración vectorial avanzado, incluyendo sofisticadas transparencias.

Vectorizar en Inkscape

La utilidad de vectorización de mapas de bits que Inkscape incorpora es POTrace, una utilidada su vez open source que realiza su función de manera admirable. Para acceder al vectorizador,debemos importar al documento un mapa de bits en cualquier formato, o bien arrastrarlo ysoltarlo sobre un punto cualquiera de la ilustración i a continuación ir al menú Trazo >Vectorizar un mapa de bits.

Las opciones de vectorización son: Luminosidad de la imagen; reducción de colores;detección de bordes y Múltiple scanning (a su vez según luminosidad, color o monocromo.)Para cada opción es posible invertir los valores de la imagen, es decir, vectorizar a modo denegativo.

La opción de luminosidad crea una imagen monocroma, en base al tono. Se puede ajustar elumbral, de modo que cuanto más bajo sea más se desplaza el equilibrio hacia los tonos clarosy genera menos trazados en negro, y viceversa.

Si se vectoriza en modo detección óptima de bordes, aparece un dibujo formado por pequeñosobjetos cerrados y combinados que reproducen un dibujo de apariencia lineal, pero que, adiferencia de lo que sucede en Streamline o Corel Trace no está formato por líneas separadassin relleno. Esto significa que si vectorizamos de esta manera un alfabeto, obtendremosdirectamente formas vectorizadas para cada carácter que pueden ir directamente a un archivo

Page 9: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 34

de tipografía.

Finalmente, con la opción de múltiple scanning se puede conseguir una vectorización óptimade imágenes en color, incluso de fotografías bien contrastadas.

La primera aproximación de la vectorización puede crear muchos objetos y ser altamentecompleja, pero es fácil aplicar el comando trazo > simplificar que reduce muchísimo elnúmero de nodos sin alterar demasiado el aspecto general del dibujo.

Fig. 4.3. Uno de los aspectos clave de Expression es su excelente implementación desofisticados pinceles.

Expression

Expression es un programa que ha tenido una historia curiosa y escaso éxito, a pesar de poseeruna tecnologia muy innovadora y potente. Se trata de nuevo de una aplicación de dibujovectorial con una lista de prestaciones inacabable, equiparable a los mejores programas delmercado, pero que nunca ha tenido el empuje necesario para hacerse un lugar entre laspreferencias de los profesionales.

Tras varios cambios de propietario, en el año 2004 Expression pasó a manos de Microsoft, yesta compañía ofreció durante un tiempo la posibilidad de descargar libremente el programa acualquiera que así lo deseara, aunque se había tratado siempre de un programa comercial, depago. Podéis comprobar si todavía existe la posibilidad de descargar el programa yendo a ladirección http://www.creaturehouse.com; el programa se podía descargar incluso en la fechade revisión de este material, enhttp://www.microsoft.com/products/expression/default.asp?pg=dl.

Page 10: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 35

Fig.4.4 Expression permite sofisticados efectos de transparencia.

Prestaciones y principales cualidades

Sería un poco reiterativo enumerar las prestaciones de cada programa; baste decir queExpression tiene todas las capacidades que esperamos en un programa como Illustrator. Supunto fuerte es la capacidad de utilizar avanzados efectos de trazos que se pueden personalizarde una forma total.

La tecnología de Expression es la llamada “skeletal strokes”, de la que fueron pioneros. Setrata de mantener un dibujo de tipo vectorial, muy rápido de generar y editar, pero que vaasociado a formas de cualquier tipo y transparencia que se aplican en tiempo real a los objetosvectoriales. Se le saca el máximo partido con una tableta digitalizadora, de manera que lasensación que se tiene al dibujar es muy próxima al medio real que imitamos, sea lápiz,acuarela, óleo, etc. Los trazos de pincel pueden estar asociados a una imagen en mapa de bits,por ejemplo de un trazo en acuarela o tinta, de manera que al dibujar el aspecto es totalmentenatural, gracias a los exhaustivos controles que se pueden aplicar a un pincel determinado. Lostrazos son siempre editables, ya que sea cual sea su aspecto, realmente lo que hay detrás esinvariablemente una curva de bézier ordinaria.

Para dibujantes de cómics, Expression tiene algunas capacidades especialmente atractivas,como la creación automática de “líneas de movimiento” que van asociadas a las formasdibujadas; así, cambiar la ilustración para corregir una postura, implica que el programareajusta las líneas de movimiento y mantiene así la corrección en todo momento. Estos efectosde líneas no están limitados a simular movimiento, sino que se pueden aplicar a texturas confusiones de líneas y cualquier otra aplicación que se imagine; para definir los efectos

Page 11: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 36

simplemente se tiene un trazado patrón, con un forma inicial y otra final que definen todas lasformas intermedias por interpolación.

Para coloreados naturalistas, los objetos admiten bordes al estilo de las manchas de acuarela.Este efecto, junto con el control de la transparencia, permite crear efectos de ilustración únicosy completamente editables. Otro efecto increíble es el mapa de reflexión, que puede crear unaspecto metálico realista.

La lista de cualidades de Expression es muy larga, de modo que aconsejamos conseguir bien elprograma completo (si aún es posible), bien una versión de evaluación.

Otros programas de dibujo vectorial

OpenOffice Draw

Es la aplicación de dibujo vectorial incluida en la suite ofimática OpenOffice. Es un programabásico, pero bastante decente, en especial para crear esquemas y mapas conceptuales, puestoque incluye una serie de herramientas expresamente pensadas para conectar los elementos deun diagrama. Los objetos conectados se pueden mover, y las líneas conectoras elegidas serecolocan automáticamente. También tiene un tratamiento bastante bueno y sencillo de lasformas tridimensionales, y una larga serie de herramientas y funciones que esperamos en unprograma de dibujo vectorial Dado su coste (gratis) merece la pena tenerlo, aunque sea sólopara usos puntuales.

Fig.4.5. Deneba Canvas es un clásico programa de ilustración que tiene excelentesherramientas para el dibujo.

Page 12: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 37

Deneba Canvas

Este programa también tiene una larga historia. Siempre ha tenido una avanzada capacidad demanejar simultáneamente objetos vectoriales y mapas de bits, y fue un precursor en laintroducción de efectos de transparencias y distintos efectos especiales. El principal problematal vez ha sido ofrecer una mezcla demasiado dispersa de capacidades que en el fondodifícilmente aprovecha ningún profesional. En los últimos tiempos, el programa se haenfocado muy especialmente a la cartografía y a la ilustración de tipo científico y técnico, conprestaciones que son apreciadas por este colectivo de diseñadores. En alguna ocasión ha sidoposible hacerse con una copia gratis del programa, obsequiado con revistas de informática,aunque siempre la versión última és comercial. Disponible en el web: http://www.deneba.com,el sitio ofrece muchos tutoriales y ejemplos de uso de Deneba.

Realdraw

Un sorprendente programa que es capaz de generar efectos realistas de reflexiones, texturas yaspecto material con unos pocos comandos. Efectos que llevarían horas en otros programas, enRealdraw pueden aplicarse en cuestión de segundos. Lleva unos pocos años en el mercado y setrata de un programa comercial. Se puede probar descargándolo del web:http://www.mediachance.com

Page 13: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 38

Fig.5.1. Los programas de dibujo vectorial han acabado por ofrecer una inagotablevariedad de transparencias y otros efectos que permiten enriquecer considerablementelas ilustraciones.

Efectos avanzados en dibujo vectorialLos programas de dibujo vectorial ofrecen una funcionalidad esencial que es común a todosellos, y data de hace ya muchos años, desde las primeras versiones. Este núcleo deoperaciones, herramientas y opciones corresponde con la verdadera esencia de lo que es eldibujo basado en formas vectoriales: curvas de bézier, objetos definidos geométricamente...

Las principales limitaciones que se imponen en los programas de ilustración suelen serdebidos a los posibles problemas en el proceso de impresión comercial. Para trabajos que vandestinados a la pantalla (diseño web, diseño para televisión o multimedia) las limitaciones sonescasas. El motivo esencial de estas limitaciones hay que buscarlo en que se persigue quetodos los elementos creados en un programa de dibujo vectorial deben ser reproduciblesperfectamente en postscript para evitar problemas en la filmación e impresión comercial.

En los últimos años se ha avanzado mucho en las características que admiten los servicios depreimpresión, con la adopción de las recientes versiones de postscript y pdf que son muchomás versátiles en temas como transparencias. Por este motivo, los programas de ilustraciónhan hecho una apuesta decidida por eliminar las limitaciones que durante años se habían

Page 14: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 39

impuesto, con el razonamiento “¿por qué ofrecer una característica que luego va a frustrar lasexpectativas?”. Ahora, programas como Illustrator ofrecen una extensa gama de opciones a lahora de guardar el trabajo, para evitar problemas con los efectos más complicados, las mallasde degradados (gradient mesh) y las transparencias.

En este artículo comentamos algunas opciones de que disponemos para enriquecer lasilustraciones vectoriales con efectos que los hacen algo más naturales, menos fríos ycomputerizados.

Page 15: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 40

Page 16: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 41

Fig.5.2. Los degradados o gradientes son otra de las herramientas clave en el dibujovectorial.

Efectos de transparenciaDurante mucho tiempo, la transparencia era tabú en la ilustración vectorial. Y sin embargo, losefectos de transparencia y superposición son esenciales en muchas imágenes, como yaapuntamos de manera sumaria en nuestros artículos del manual original. CorelDraw 5 fue elprimer programa de dibujo vectorial que se atrevió a ofrecer una opción de transparencia, perono tenía ninguna posibilidad de imprimirse fiablemente, y por ello era necesario convertir amapa de bits. El primer programa que ofreció una solución robusta y fiable para crearpostscript con transparencias fue Freehand, versión 8.

La manera en que habitualmente se simulaba un efecto de transparencia antes de estainnovación era creando una máscara. Efectivamente, si colocamos un círculo amarillo delantede un círculo rojo, y el primero es semitransparente, esperamos que la zona de superposiciónse vea naranja. En este caso lo que se hacía era crear una forma enmascarada en el círculo dedebajo y que tuviera el color esperado según el grado de transparencia. De hecho, esto era loque, detrás de la escena, hacía Freehand cuando se aplicaba un efecto de transparencia. Algenerar el efecto simplemente a base de los métodos aceptados por postscript en ese momento,el gráfico se podía imprimir sin problemas, si bien la complejidad iba aumentandoconsiderablemente, en especial si la transparencia afectaba a varios objetos a la vez, ya que esoimplicaba generar un número equivalente de máscaras y podía llegar a ser una gran carga parael procesador de postscript.

Las opciones más avanzadas de transparencia las encontramos en las versiones actuales deprácticamente todos los programas; ahora podemos trabajar con una libertad casi total a lahora de aplicar efectos de veladura, transparencia, superposición, etc.

De hecho, tanto en CorelDraw como en Illustrator, los parámetros de transparencia permitenuna infinidad de interacciones distintas entre los objetos superpuestos, algunas de ellas congran atractivo visual, y en otros casos con una evidente funcionalidad para conseguirdeterminados efectos: brillos, sombras, reflejos...

Los modos de transparencia reciben diferentes nombres en cada programa, y esto supone unproblema a la hora de entender realmente qué hace cada uno. Por si no fuera suficiente con losproblemas de una nomenclatura que confunde, algunas de las opciones de transparencia sonrealmente muy poco intuitivas: se trata de operaciones de tipo más bien matemático queresultan difíciles de entender para cualquiera que no sea el programador. Al menos enIllustrator, los nombres y la manera de aplicar la transparencia es idéntica a Photoshop, lo quesimplifica su conocimiento. Lo mejor es tener a mano una hoja de referencia con ejemplos delo que hace cada tipo de transparencia.

Los modos de fusión de CorelDraw son:

Modo de fusión Descripción

Normal Aplica el color de transparencia sobre el color de base

Añadir Suma los valores del color de transparencia y del color de base

Sustraer Suma los valores del color de transparencia y del color de basey resta 255 al resultado

Page 17: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 42

Diferencia Resta el color de transparencia del color de base y multiplicapor 255 el resultado. Si el valor del color de transparencia es 0,el resultado siempre será 255.

Multiplicar Multiplica el color de base por el color de transparencia y divideentre 255 el resultado. Esto tiene el efecto de oscurecer elcolor, a menos que lo esté aplicando al blanco. Lamultiplicación de negro por cualquier otro color da comoresultado negro. La multiplicación de blanco por cualquier otrocolor deja el color intacto.

Dividir Divide el color de base entre el color de transparencia oviceversa, según el color que tenga el valor más alto

Si más claro Reemplaza los píxeles del color de base que sean más oscurospor el color de transparencia. Esto no tiene efecto en los píxelesdel color de base que sean más claros que el de latransparencia.

Si más oscuro Reemplaza los píxeles del color de base que sean más clarospor el color de transparencia. No tiene efecto en los píxeles delcolor de base que sean más oscuros que el de la transparencia.

Texturizar Convierte el color de la transparencia en una escala de grises, ydespués multiplica el valor de escala de grises por el color debase

Matiz Hace uso del matiz del color de transparencia y de la saturacióny la luminosidad del color de base. Si añade color a una imagenen escala de grises, no se produce ningún cambio porque loscolores están desaturados.

Saturación Hace uso de la luminosidad y el matiz del color de base y de lasaturación del color de transparencia

Luminosidad Hace uso del matiz y la saturación del color de base y de laluminosidad del color de transparencia

Invertir Hace uso del complementario del color de transparencia. Si elvalor del color de transparencia es 127, no habrá ningúncambio porque dicho valor de color está en el centro delespectro de colores.

AND lógico Convierte el color de transparencia y el color de base envalores binarios y aplica a estos valores la fórmula algebraicabooleana AND

OR lógico Convierte el color de transparencia y el color de base envalores binarios y aplica a estos valores la fórmula algebraicabooleana OR

XOR lógico Convierte el color de transparencia y el color de base envalores binarios y aplica a estos valores la fórmula algebraicabooleana XOR

Rojo, Verde, Azul Aplica el color de transparencia al canal rojo / verde o azul,respectivamente, de los objetos RGB

En Illustrator los modos de fusión son semejantes, pero los nombre son diferentes. NormalPinta la selección con el color normal, sin interacción con el color de la base, pero deja

Page 18: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 43

entrever ésta según el grado de transparencia. Multiplicar efectúa esta operación entre losvalores del color de base y el color superpuesto. El color resultante siempre es más oscuro,pero multiplicar por blanco deja el color inalterado y multiplicar por negro siempre da negro.Esta opción es especialmente útil para superponer un dibujo en blanco y negro, ya que elblanco deja ver todo lo que hay detrás al convertirse en 100% transparente. Los otros modosde fusión son los llamados en la versión original Screen, Overlay, Soft Light, Hard Light,Color Dodge, Color Burn, Darken, Lighten, Difference, Exclusion, Hue, Saturation, Color,Luminosity.

Page 19: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 44

Fig. 5.3 y 5.4. La ventaja de definir colores en la paleta de muestras o en la de estilosradica en que cualquier cambio que afecte a éstos se traduce en una actualizaciónautomática en el documento. En el ejemplo, el color base cambia y con él sus tintas ocolores derivados.

Cambios de colorMuchos proyectos exigen cambios de color globales que sería deseable no exigieran irseleccionando los objetos individuales uno a uno para aplicar los cambios. Algunasoperaciones de este tipo, por fortuna, son posibles con unos pocos comandos, y afectando a unconjunto de objetos a la vez, e incluso a toda la ilustración.

Hay muchas situaciones en las que es deseable efectuar este tipo de cambios, aplicados porejemplo a un vestuario, que se quiere cambiar en bloque. Podemos tener, por ejemplo, unpersonaje que copiamos y pegamos repetidas veces, modificamos mínimamente y ahoraqueremos acabar de dotar de algunas diferencias a cada una de las copias, a partir de cambiosen los colores que tienen. O bien hemos creado un prototipo de identidad corporativa, conquizás un logo y unas paletas de colores, y nos encontramos con la misma situación: copiamosrepetidamente el original e intentamos obtener variaciones que puedan tal vez darnos algunasolución óptima para el proyecto. Existen muchos otros ejemplos, sin duda, en los que uncambio de color a nivel de partes del archivo que estamos editando, o incluso de todo elconjunto, es exactamente lo que necesitamos.

Para efectuar estos cambios de color en bloque existen diferentes posibilidades. Si el dibujocontiene varios colores de base y tintas de ese color, cualquier modificación del color básicoinmediatamente cambiará todas las tintas que procedan de él. Por ello, para cambiar todos loscolores en la imagen, una manera fácil es crear una copia del dibujo con un nombre nuevo,abrir este y trabajar en la paleta de colores, alterando la composición de un color dado. Porejemplo, en CorelDraw podemos obtener automáticamente una definición de los estilos decolor. Se puede especificar cuántos colores principales se desean, y el resto de coloresfigurarán como derivados de los principales. Si modificamos el color principal, todos aquellosque derivan de él quedan automáticamente actualizados. Esta opción de estilos de color esmuy útil en trabajos de identidad corporativa. Por ejemplo, disponemos de unas paletas decolores para utilizar en el programa de identidad y diferentes elementos creados en base a esoscolores: logotipos, ejemplos de aplicación en papelería, etc. Si queremos experimentar connuevas combinaciones de colores, basta con crear una copia del archivo, y en dicha copiamodificar los colores base, con lo cual quedará cambiado todo objeto que tenga esos colorescomo relleno o color de línea.

También se pueden emplear los filtros y opciones del programa que permiten efectuar cambiosen los colores de los objetos seleccionados. Todos los programas más importantes de dibujovectorial tienen esta capacidad en mayor o menor medida, o recurrir a algún xtra o plugin(como se detalla en el artículo siguiente.)

En Freehand existe una serie de utilidades muy interesante para el cambio de los colores de lailustración. Para empezar, uno de los extras de color da nombre automáticamente a todos loscolores presentes en la ilustración, con lo que se evita tener que añadirlos de uno en uno a lapaleta de muestras. Aparte, es posible con las opciones de xtras > colores:

� convertir la imagen a tonalidades de gris;

� randomize colors altera de manera aleatoria la definición de cada uno de los colores de la

Page 20: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 45

paleta, con lo cual es pan comido conseguir variaciones de la ilustración básica (aunquerealmente conseguir algo válido trabajando al azar es algo imprevisible.)

� control de color: se modifican todos los colores de los objetos seleccionados en una mismamedida (por ejemplo, se les añade a todos ellos una misma proporción de cián.)

� añadir o quitar saturación a los colores

� oscurecer o aclarar colores

� importar paletas en formato act de photoshop

� ordenar la lista de colores según su nombre.

En CorelDraw es posible efectuar las mismas operaciones, prácticamente, y además tambiénse puede invertir la imagen (obtener un negativo de los colores.) y otras transformaciones. Lomismo sucede en Illustrator, donde existe un submenú de efectos de color con muchasopciones.

Fig.5.5 Los tipos de línea posibles son muchos, y con ellos se puede dotar al dibujo deuna expresividad totalmente nueva.

Page 21: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 46

Fig. 5.6. Los efectos de distorsión permiten crear formas menos frías, con un aspectomenos mecánico.

Crear contornos más naturalesLos dibujos realizados en un programa de ilustración vectorial pueden tener muchos aspectosdistintos, en función de las técnicas que se hayan empleado. Lo que identificamos más con undibujo vectorial es, sin duda, un aspecto impecable en los trazos, suaves colores planos odegradados perfectos. Todo este acabado puede ser exactamente lo que buscamos, perotambién puede suceder que deseemos un aspecto más manual, más similar a lo queconseguimos con las técnicas convencionales de dibujo y pintura. Y es que incluso el dibujomanual más esmerado es bastante irregular comparado con la perfección y constancia de lostrazos en los dibujos vectoriales.

Si queremos, pues, dotar a nuestra ilustración vectorial de una mayor expresividad medianteun acabado que recuerde más las técnicas tradicionales (tinta, lápices de colores, acuarelas,gouache...) debemos adoptar algunas formas de trabajo o procesamiento de la imagen para

Page 22: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 47

evitar la frialdad del trazo computerizado. Esto es posible mediante diversas estrategias:

� Vectorizar un dibujo manual por el método de contornos. El vectorizado respeta los anchosirregulares de las líneas dibujadas y deja unos objetos en blanco en las zonas cerradas entretrazos, donde podremos aplicar color.

� Vectorizar el dibujo por el método de línea central, aplicar un trazo caligráfico,preferentemente con anchos algo variables; en este caso será necesario colorear dibujandoformas cerradas detrás de estas líneas; o bien colocar las formas coloreadas a partir de unacopia vectorizada según el método descrito antes.

� Crear una imagen vectorial sin ninguna medida especial y después procesarla en forma demapa de bits en un programa como Photoshop, para añadir algún efecto que le confiera elaspecto deseado.

� Utilizar opciones dentro del programa de ilustración vectorial para intentar que los trazosno sean tan monótonos y constantes.

emborronar el contorno

Pràcticamente todos los programas de dibujo vectorial cuentan con alguna opción para hacerque el contorno sea más “rugoso”. Esta modificación supone añadir puntos de ancla o nodos,ya que para desplazar la curva hacia fuera y hacia dentro alternativamente —consiguiendo asíuna apariencia irregular— es necesario colocar más puntos. Para conseguir un resultadoaceptable hay que probar diferentes niveles de rugosidad, optando bien por salientes angulososo curvos. Esta es una buena manera de hacer el dibujo más parecido a un trazo manual, enespecial si las irregularidades se añaden con una cierta aleatoriedad.

distorsionar la forma

Algún tipo de distorsión en formas muy geomètricas también ayuda a conferir una imagen másnatural, más manual. Podemos deformar levemente la formas geométricas, ya que cuando lailustración se hace manualmente difícilmente se consiguen círculos, cuadrados u otras formascon una perfección total.

superposición

Otra manera de lograr el objetivo marcado es superponer varias copias de la ilustración; porejemplo, una copia base solamente con los colores interiores, pero sin contornos; y porencima, varias copias con diferentes gruesos en sus contornos, pero sin relleno, con distintostipos de contorno caligráfico y colores algo distintos. Esto da una apariencia de boceto condiferentes trazos.

pinceles caligráficos y naturales

En los programas que disponen de pinceles de estilo natural puede dar excelentes resultadosaplicar este tipo de líneas a la ilustración, ya que pueden imitar bastante convincentemente lostrazos de un pincel cargado de tinta, una línea de grafito, de pluma estilográfica, etcétera.

Page 23: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 48

Page 24: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 49

Fig.5.7 Existe una gran variedad de tipos de relleno en los programas de ilustración, asu vez completamente personalizables.

Tramas y patronesMuchas ilustraciones exigen rellenos de tipo modular, como patrones que se van repitiendo, otexturas de diferentes tipos. En un programa de ilustración vectorial se dispone de diferentesmaneras de aplicar texturas regulares o irregulares, en color o blanco y negro.

tipos de relleno aplicables

Es bastante típico que dispongamos de varios tipos de relleno para los objetos:

� El relleno más normal es un color plano (si bien puede estar a su vez definido segúnmuchos modelos diferentes de color, o bien puede tener diferentes grados de opacidad ymodos de fusión distintos, todo lo que hace que, de hecho, incluso con colores planos lasopciones creativas ya sean enormes.)

� Se puede rellenar con un gradiente o degradado. Esta forma de relleno también admitemúltiples variantes. En el caso más sencillo, el gradiente cambia linealmente desde uncolor a otro que ocupan las posiciones extremas en el objeto. Pero rápidamente podemosvariar este relleno cambiando la pauta de variación del degradado (por ejemplo, estádesplazada la variación hasta uno de los extremos, de modo que varía más lentamente deun lado que de otro); se pueden añadir pasos intermedios que dan una variación más sutil ycontinua; puede ser un degradado de otros tipos (radial, cónico, etc.)

� Rellenar con una imagen de mapa de bits que se enmascara dentro de la forma. En algunosprogramas la única manera es precisamente realizar este enmascaramiento, mientras queotros disponen de toda una paleta que permite elegir directamente motivos que segenerarán en el programa para rellenar la forma automáticamente.

� Rellenos de patrón repetitivo a base de un objeto vectorial, en blanco y negro o en color,que se repite enmascarado dentro del objeto a rellenar. Nuevamente, el caso más sencilloes una repetición regular, pero puede variarse el espaciado, rotación y separación de filas ycolumnas, etc. con lo que en efecto las posibilidades aumentan mucho.

� Rellenos a base de código PostScript. Existe toda una serie de efectos de relleno que sepueden lograr con unas líneas de código que aplican formas vectoriales de muy diversotipo en el interior de los objetos. Evidentemente, para sacar partido a este tipo de rellenosdebe utilizarse una impresión compatible con PS; también funciona creando archivos PDF.

Page 25: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 50

Fig.5.8. Las tramas continuas exigen unos márgenes que puedan fundirse sin cortes.

Efectos de molde

En muchas ocasiones debemos adaptar un logotipo, una rotulación o una imagen a una formaque actúa a modo de molde. Por ejemplo, un logotipo que al aparecer en un póster que estácolgado en la pared se ve con la perspectiva de éste; o bien unas letras que se quieren adaptar auna forma determinada, quizás como en el “rubber soul” de los Beatles, dentro de una formade gota. Existen una infinidad de situaciones de este tipo.

Para adaptar una forma vectorial a un molde, existen soluciones diversas. No se trata de unaoperación compleja, ya que simplemente se trata de modificar las posiciones de losmanejadores o puntos de control de los diferentes nodos de la forma vectorial, de manera quese adapten lo mejor posible a la forma que actuará como molde.

De esta manera, en los diferentes programas existe esta opción de moldear. Recibe nombresdiversos, pero prácticamente siempre funciona de una manera idéntica. En algunos programasel efecto es siempre reversible y se puede editar en cualquier momento para que se puedaconseguir exactamente el efecto deseado.

Un caso particular muy importante de moldeado es aplicar una perspectiva a un objeto. Unaperspectiva convincente y bien realizada es esencial para que un dibujo sea realmenteprofesional, si es que se ha creado en un estilo en el cual uno espere una perspectivacompetentemente representada (dibujos de estilo más informal o infantil no exigen tanto!) Esposible aplicar efectos de perspectiva fáciles en la mayoría de programas. El que tiene unmayor control sobre el efecto sin duda es Freehand, el cual a partir de su novena versiónaporta una retícula para perspectivas que controla a la perfección la forma que debe tener cadaobjeto que se dibuje o coloque respecto de ellas. Para efectos de perspectiva individuales, paraun objeto simple, CorelDraw lo resuelve muy bien, lo mismo que hacen muchos otros

Page 26: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 51

programas.

Si la perspectiva, en lugar de la cónica —la normal en dibujos realistas, y que es la másparecida a nuestra forma de ver— ha de ser de tipo isométrico, la que suele utilizarse enrepresentaciones arquitectónicas o de diseño industrial, la manera normal de trabajar esactivando las restricciones en la colocación de los nodos, de manera que se puede ir dibujandocon atracción a los puntos que verifiquen una situación coincidente con los ángulos en que setrabaja en isometría. Existen también soluciones especializadas para el dibujo en perspectiva,las cuales son comentadas en el artículo sobre filtros vectoriales.

Page 27: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 52

Fig. 5.9. Las operaciones booleanas con los objetos son esenciales para creardeterminados efectos.

Page 28: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 111

Índice General

LA SUITE MOZILLA Y FIREFOX ................................................................................................ 114

INTRODUCCIÓN A MOZILLA............................................................................................................... 114MOZILLA FIREFOX ............................................................................................................................. 114VENTAJAS ESENCIALES DE FIREFOX Y MOZILLA ............................................................................. 116NAVEGACIÓN CON PESTAÑAS............................................................................................................... 116BLOQUEO DE VENTANAS EMERGENTES ................................................................................................ 116BÚSQUEDA INTEGRADA........................................................................................................................ 117PRIVACIDAD Y SEGURIDAD .................................................................................................................. 117MARCADORES DINÁMICOS ................................................................................................................... 117DESCARGAS SIN COMPLICACIONES ...................................................................................................... 117SE AJUSTA COMO UN GUANTE .............................................................................................................. 117PERSONALIZABLE Y AMPLIABLE .......................................................................................................... 118INSTALADO EN UN INSTANTE ............................................................................................................... 118EL MEJOR AMIGO DE UN DESARROLLADOR .......................................................................................... 119MOZILLA SUITE: EL NAVEGADOR...................................................................................................... 119MOZILLA SUITE: COMPOSER............................................................................................................. 119MOZILLA SUITE: EL CLIENTE DE CORREO Y THUNDERBIRD .......................................................... 120LAS EXTENSIONES PARA MOZILLA .................................................................................................... 120

BLOGS Y CMS .................................................................................................................................. 122

SISTEMAS DE GESTIÓN DE CONTENIDOS ............................................................................................ 122BASES DE DATOS Y SOFTWARE NECESARIO....................................................................................... 123SOLUCIONES POSIBLES. ........................................................................................................................ 123CREACIÓN DE GRÁFICOS A PARTIR DE BASES DE DATOS ...................................................................... 124ESTRUCTURA DE LAS BASES DE DATOS ................................................................................................ 125EJEMPLOS PRÁCTICOS .......................................................................................................................... 125BLOGS .................................................................................................................................................. 126BLOGGER............................................................................................................................................. 129

RSS ...................................................................................................................................................... 131

QUÉ ES ................................................................................................................................................. 132CÓMO APROVECHARLO ...................................................................................................................... 132LECTORES DE RSS .............................................................................................................................. 133DIRECTAMENTE EN EL NAVEGADOR..................................................................................................... 133EN EL LECTOR DE CORREO ELECTRÓNICO (THUNDERBIRD)................................................................. 135PROGRAMAS ESPECIALIZADOS ............................................................................................................. 135WEBS..................................................................................................................................................... 136CREAR RSS.......................................................................................................................................... 136

FORMULARIOS EN (X)HTML ...................................................................................................... 137

COMPONENTES DE LOS FORMULARIOS EN HTML ............................................................................. 137INTRODUCIR ELEMENTOS DE FORMULARIO ..................................................................................... 138CASILLA DE VERIFICACIÓN................................................................................................................... 138

Page 29: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 112

BOTÓN DE OPCIÓN (RADIO BUTTON) .................................................................................................... 138MENÚ DESPLEGABLE ............................................................................................................................ 138CUADRO DE TEXTO DE UNA LÍNEA ....................................................................................................... 139CUADRO DE TEXTO CON DESPLAZAMIENTO (MÚLTIPLES LÍNEAS) ....................................................... 139CAMPO DE CONTRASEÑA ...................................................................................................................... 139BOTÓN / IMAGEN ENVIAR .................................................................................................................... 139BOTÓN RESTABLECER .......................................................................................................................... 139CAMPO OCULTO .................................................................................................................................... 139APLICAR ESTILOS A LOS FORMULARIOS............................................................................................ 141

CSS APLICADO ................................................................................................................................ 142

CREAR UNA HOJA DE ESTILOS BÁSICA............................................................................................... 142UTILIZAR CSS PARA LA MAQUETACIÓN DE LA PÁGINA ................................................................... 144CREAR LISTAS PARA MENÚS DE NAVEGACIÓN .................................................................................. 146GALERÍAS DE IMÁGENES .................................................................................................................... 147TIPOGRAFÍA SOFISTICADA CON CSS ................................................................................................. 148

REFERENCIA BÁSICA DE CSS ..................................................................................................... 149

LA ESTRUCTURA Y REGLAS DE CSS................................................................................................... 149PROPIEDADES QUE SE PUEDEN ESPECIFICAR .................................................................................... 149PROPIEDADES DE FUENTES ................................................................................................................... 149PROPIEDADES DE TEXTO....................................................................................................................... 150PROPIEDADES DE COLOR Y FONDO ....................................................................................................... 150PROPIEDADES DE CUADROS DE CAJA.................................................................................................... 150PROPIEDADES DE LISTAS ...................................................................................................................... 151UNIDADES ............................................................................................................................................ 151INDICAR AL HTML CÓMO APLICAR EL ESTILO .................................................................................. 152ENLAZÁNDOSE A UNA HOJA DE ESTILO EXTERNA ................................................................................ 152INCRUSTANDO UNA HOJA DE ESTILO .................................................................................................... 152IMPORTACIÓN DE UNA HOJA DE ESTILO................................................................................................ 152ESTILO EN LÍNEA................................................................................................................................... 153ATRIBUTO CLASS................................................................................................................................ 153ATRIBUTO ID........................................................................................................................................ 153ELEMENTO SPAN................................................................................................................................. 153ELEMENTO DIV .................................................................................................................................... 153ALGUNOS RECURSOS........................................................................................................................... 153

XHTML Y ESTÁNDARES PARA EL WEB .................................................................................. 154

VENTAJAS DE LOS SITIOS QUE CUMPLEN CON LOS ESTÁNDARES .................................................... 154ACCESIBILIDAD .................................................................................................................................... 154VALIDACIÓN ......................................................................................................................................... 155REUTILIZACIÓN .................................................................................................................................... 155ESTABILIDAD ........................................................................................................................................ 155VENTAJAS PARA EL DESARROLLADOR Y LAS EMPRESAS...................................................................... 155ESTÁNDARES Y DISEÑO CON TABLAS ................................................................................................. 156TÉCNICAS PRÁCTICAS......................................................................................................................... 156HTML TIDY ........................................................................................................................................... 157ALGUNOS RECURSOS........................................................................................................................... 159

Page 30: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 113

HTML PARA PRESENTACIONES ................................................................................................ 160

VENTAJAS ............................................................................................................................................ 160ALGUNAS LIMITACIONES.................................................................................................................... 161CÓMO PREPARAR LA PRESENTACIÓN ................................................................................................ 162APPLETS DE JAVA. ................................................................................................................................ 162FLASH Y SHOCKWAVE. ......................................................................................................................... 162SCRIPTS Y DHTML. ............................................................................................................................. 162

ACCESIBILIDAD DE CONTENIDOS ........................................................................................... 164

THE WEB ACCESSIBILITY INITIATIVE (WAI)................................................................................... 166POR QUÉ CREAR SITIOS ACCESIBLES ................................................................................................. 166TÉCNICAS PRÁCTICAS PARA MEJORAR LA ACCESIBILIDAD ............................................................. 167PRINCIPALES REQUISITOS ..................................................................................................................... 167ANÁLISIS DE LA ACCESIBILIDAD WEB .................................................................................................. 169RECURSOS............................................................................................................................................ 170

Page 31: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 173

Índice

CONSTRUCCIÓN DE ALFABETOS ............................................................................................. 175

LA IDEA ................................................................................................................................................ 175BOCETOS.............................................................................................................................................. 175LAS DIMENSIONES BÁSICAS DE UNA TIPOGRAFÍA ............................................................................. 176EL TRAZO CALIGRÁFICO .................................................................................................................... 177DIBUJO VECTORIAL ............................................................................................................................ 178TÉCNICAS ESENCIALES PARA CREAR LOS TIPOS Y DIBUJAR EN POSTSCRIPT ........................................ 179RECICLAR PARTES .............................................................................................................................. 179

ASOCIACIONES Y CONNOTACIONES ...................................................................................... 181

ASOCIACIÓN AL TIEMPO..................................................................................................................... 181ASOCIACIÓN A UN LUGAR ................................................................................................................... 182SACAR PARTIDO .................................................................................................................................. 183LOS ELEMENTOS DE LA ASOCIACIÓN................................................................................................. 184ROMPER LOS ESQUEMAS .................................................................................................................... 184EJEMPLOS PRÁCTICOS........................................................................................................................ 186

REUTILIZACIÓN DE FORMAS .................................................................................................... 188

CREAR ALFABETOS RECICLABLES ..................................................................................................... 188PROCEDIMIENTO................................................................................................................................... 188CONSTRUCCIÓN MODULAR DE ALFABETOS ...................................................................................... 190

LOS DINGBATS ................................................................................................................................ 191

VENTAJAS ............................................................................................................................................ 191TEMAS.................................................................................................................................................. 191CÓMO UTILIZARLOS ........................................................................................................................... 192TÉCNICAS Y TRUCOS ........................................................................................................................... 192DÓNDE USARLOS .................................................................................................................................. 192TRUCOS E IDEAS PRÁCTICAS................................................................................................................. 193RECURSOS............................................................................................................................................ 194

CLASIFICACIÓN DE LAS TIPOGRAFÍAS ................................................................................. 195

CRITERIOS HISTÓRICOS Y FORMALES ............................................................................................... 196UN EJEMPLO DE CLASIFICACIÓN: BRITISH STANDARDS....................................................................... 196Humanist (Romanas antiguas) ............................................................................................................. 196Garalde (Romanas antiguas) ................................................................................................................ 197Transitional (Romanas de transición).................................................................................................. 197Eje vertical o ligeramente inclinado hacia la izquierda en las curvas. Gracias en forma de cuña, y en losascendentes de las minúsculas son oblicuas. El nombre de transicional hace referencia a suscaracterísticas intermedias entre los tipos antiguos y los didon, posteriores........................................ 197Didone (Romanas modernas) ............................................................................................................... 197

Page 32: Manual de diseño digital

Manual de diseño digital de Typephases Design — Ampliación y actualización

© 2005 Joan M.Mas / Typephases Design. 174

Slab-serif o Egipcias............................................................................................................................ 197Lineale (de palo seco, sans).................................................................................................................. 197Lineale: Grotesque, Grotescas............................................................................................................. 197Lineale: Neo-grotesque o neo-góticas ................................................................................................. 197Lineale: Geometric, Geométricas........................................................................................................ 198Lineale: Humanist , Sans Humanísticas ............................................................................................... 198Glyphic ................................................................................................................................................. 198Script .................................................................................................................................................... 198Graphic ................................................................................................................................................. 198OTROS SISTEMAS DE CLASIFICACIÓN ................................................................................................ 198¿CÓMO CLASIFICAR EN EL AÑO 2005?.................................................................................................. 198RECURSOS............................................................................................................................................ 199

COMBINACIÓN DE TIPOS ............................................................................................................ 200

REGLAS (Y CÓMO QUEBRANTARLAS) ................................................................................................ 200CRITERIOS ESENCIALES PARA CREAR UNA PALETA DE TIPOS ......................................................... 202PALETAS CON UN SOLO TIPO................................................................................................................. 202EJEMPLOS Y RECURSOS ...................................................................................................................... 204

RECURSOS PARA EL DISEÑO DE TIPOGRAFÍAS .................................................................. 205

DESCARGA DE FUENTES GRATUITAS.................................................................................................. 205PARA ADQUIRIR TIPOGRAFÍAS ........................................................................................................... 206APRENDER SOBRE TIPOGRAFÍA.......................................................................................................... 207ORGANIZAR LAS TIPOGRAFÍAS .......................................................................................................... 207CREAR TIPOGRAFÍAS .......................................................................................................................... 208


Recommended