Tema 2.

Diseño gráfico (2)

TEMA 2: DISEÑO GRÁFICO.

1. Diseño gráfico.
El diseño gráfico es una profesión cuya actividad industrial está dirigida a idear y
proyectar mensajes visuales, contemplando diversas necesidades que varían según el
caso: estilísticas, informativas, identificatorias, vocativas, de persuasión, de código,
tecnológicas, de producción, de innovación, etc.
También conocido como "diseño de comunicación visual", pues la actividad excede el
campo de la industria gráfica y los mensajes visuales se canalizan a través de muchos
medios de comunicación, tanto impresos como digitales.
Algunas clasificaciones difundidas del diseño gráfico son: el diseño gráfico publicitario,
el diseño editorial, el diseño de identidad corporativa, el diseño web, el diseño de envase,
el diseño tipográfico, la cartelería, el diseño de señales, el diseño editorial y el llamado
diseño multimedia, entre otros.

2. El gráfico vectorial.
Los gráficos vectoriales o gráficos orientados a objetos están formados por
elementos geométricos como son el punto, las líneas recta o curva y los polígonos.
Estos elementos geométricos son calculados por el ordenador basándose en
ecuaciones matemáticas, por lo que ocupan mucho menos espacio que un mapa de bits.
Los gráficos vectoriales ofrecen una serie de ventajas frente a los tipos rasterizados
(así se denominan a las fotografías que sueles utilizar):
No pierden calidad al ser ampliados, rotados, deformados, etcétera.
Ocupan mucho menos espacio de memoria.
Permiten la animación de objetos utilizando menos cálculos de microprocesador.
La principal desventaja frente a los rasterizados es que no pueden almacenar grandes
cantidades de información ya que requieren de cálculos por parte del microprocesador,
pero esto es algo que va cambiando según va aumentando la potencia de los
microprocesadores y de las tarjetas gráficas.

3. Programas y formatos.
Existen multitud de programas que permiten trabajar con gráficos vectoriales:
Freehand, Adobe Ilustrator, Corel Draw, Indesign, Inkscape, etc; aparte de otros que los
utilizan incidentalmente: Adobe Acrobat, Adobe Flash, Autocad, etc.
Nosotros utilizaremos el Inkscape que es la mejor aplicación de las que se puede
conseguir gratuitamente.
En cuanto a los formatos, los más utilizados son:

Extensiones Definición o programa asociado

PDF Portable Document Format
SVG Scalable Vector Graphics
SWF Adobe FLASH ®
WMF Metaarchivo de Windows®
AI Adobe Ilustrator®
CDR Corel DRAW®
1
 Tema 2. Diseño gráfico (2)

FH Macromedia Freehand®
DFX Drawing eXchange File (AUTOCAD)

4. Generalidades sobre el trabajo con Inkscape.

Al arrancar el programa nos encontramos con la siguiente ventana:

La barra de herramientas vertical que se encuentra a la izquierda muestra todas

aquellas herramientas de dibujo y edición de Inkscape. Justo debajo de la barra de
menús se encuentra la barra de comandos con los botones de control general (abrir y
cerrar documentos, imprimir, deshacer, etc), y debajo de ésta nos encontramos con la
barra de control de herramientas que contiene los botones que son específicos de la
herramienta seleccionada en ese momento. La barra de herramientas vertical que se
encuentra a la derecha sirve para trabajar con los nodos y activar la cuadrícula o
desactivarla. Por último tenemos en la parte inferior dos barras. La primera es la barra de
selección del color de trabajo que en el extremo derecho tiene un triángulo que activa un
menú que nos permite cambiar de barra y formato según el proyecto en el cual estemos
trabajando: páginas web, diseño de iconos, mapas topográficos, colores básicos, etc. La
segunda es la clásica barra de estado donde se dan consejos útiles y comentarios sobre
la forma de utilizar la herramienta seleccionada.

Moverse por la pizarra:

Existen varias formas de moverse por la pizarra. La forma más habitual es pulsando la
tecla Ctrl en combinación con las teclas del cursor. También es posible arrastrando el
ratón con el botón intermedio pulsado o si queremos sólo desplazarnos verticalmente con

2
 Tema 2. Diseño gráfico (2)

la rueda. Además tenemos también unas barras de desplazamiento, que pueden ser
visualizadas u ocultadas simplemente pulsando la combinación: Ctrl + B.

Uso del zoom:

La manera más sencilla de activar el zoom es utilizando las teclas: + para aumentar y -
para disminuir. Otra posibilidad es combinando el teclado y ratón, en este caso para
aumentar tendremos que pulsar simultáneamente la tecla Ctrl y el botón derecho del
ratón, y para disminuir la combinación Ctrl + Shift junto con el botón derecho del ratón.
También se puede realizar la misma función manteniendo pulsada la tecla Ctrl y actuando
simultáneamente sobre la rueda del ratón. A parte de los tres métodos anteriores
disponemos de la herramienta Zoom ( ), que se encuentra ubicada en la parte
izquierda de la barra de herramientas, y que permite hacer un zoom de una área
específica seleccionándola mediante el ratón.

5. Los trazados.
Existen tres herramientas distintas para trazar líneas:
• Dibujar líneas a mano alzada ( ), que permite dibujar líneas siguiendo el
movimiento del ratón.
• Dibujar curvas Bézier y líneas rectas ( ). Las curvas Bézier consisten en
una línea recta que sobre la que se puede actuar para deformarla. Si se quiere
simplemente obtener un línea recta bastará con se pulse el botón izquierdo del
ratón en el lugar donde se quiere que comience y otra vez en el punto final,
confirmando el nuevo trazado al pulsar Intro. En el caso de que se quiera
obtener una línea curva, se tendrá pulsar el botón izquierdo para fijar el punto
inicial y cuando se haya colocado el ratón en el punto final pulsar
continuamente el botó izquierdo, con esto aparecerá una línea recta que nos
permitirá ajustar la curva. Cuando hayamos acabado de ajustarla se deberá
pulsar Intro para confirmar el nuevo trazado. Si no se pulsa Intro se generará
una nueva línea y así continuamente hasta que se pulse. En el caso de
equivocarse, bastará con pulsar Esc para hacer desaparecer lo que hayamos
hecho con la herramienta.
• Dibujar trazos caligráficos o pinceladas ( ). Éste es un pincel muy especial
dado que es capaz de variar el grosor y el ángulo de las curvas ejecutadas en
función de la rapidez con la que se realice el trazo, algo muy parecido a un
pincel real. Además del grosor y el ángulo tiene muchas más opciones como se
puede apreciar en la barra de botones específicos que aparece al tener
seleccionada esta herramienta:

• Edición de estilo ( ), que se encuentra en la barra

comandos, nos permite modificar multitud de parámetros de
una curva a posteriori, para ello bastará con utilizar la
herramienta Seleccionar y transformar objetos ( ) y
pulsar Edición de estilo ( ), para que aparezca la ventana
que se puede ver la página siguiente. En ella se puede
modificar parámetros como los siguientes: color, gradientes,
bordes, opacidad, desenfoque, flechas, estilo de línea, etc.

3
 Tema 2. Diseño gráfico (2)

Y ahora vamos con un ejercicio práctico. Obviamente estamos trabajando con un

programa cuya función fundamental es dibujar con el ratón del ordenador y por lo tanto la
destreza con éste es fundamental, de ahí que tengamos que recurrir a la mejor escuela
que hay sobre el manejo de un pincel: el trazado del kanji (dígase esos insidiosos
ideogramas chinos que nadie entiende). Naturalmente no vamos a hacer un curso de su
trazado porque tardaríamos años en ello pero creo que será un ejercicio de lo más
entretenido.
El primer ideograma que vamos a trazar es el correspondiente a la palabra eternidad
永, para ello vamos utilizar como referencia el fichero Mi primer kanji.gif que se
encuentra en la carpeta de trabajo, ábrelo con el Visor de Windows y verás que se trata
de una imagen animada que nos muestra el orden de trazado. Es importante que sigas el
mismo orden. Vamos por pasos para no perdernos:
1. Activa la herramienta Dibujar trazos caligráficos o pinceladas ( ) pulsa sobre el
botón Sin predeterminados y elige la opción Plumilla, así nos aseguramos de que
todo comience bien.
2. Cambia los siguientes parámetros: Ancho: 20, Fijación: 90, Puntas: 0.50, Masa: 10 y
Relleno: negro.
3. Dibuja los tres primeros trazos, al acabar deberías tener algo parecido a la imagen de
la figura:

4. Cambia ahora el siguiente parámetro: Ancho: 40; y realiza el siguiente trazo.

4
 Tema 2. Diseño gráfico (2)

5. Vuelve a poner: Ancho: 20; y realiza el último trazo.

6. Guardemos los que tenemos hecho por ahora por si acaso. Para ello escoge Archivo
> Guardar como.... Ahora selecciona la carpeta Desktop (o Escritorio) y pulsa sobre
el botón Create Carpeta. Creará una nueva carpeta, renómbrala como Ejercicios
resueltos Inkscape (apellidos, nombre) y entra en ella. Ahora en la casilla Nombre
introduce el siguiente nombre Ejercicio 1.svg y pulsa Guardar para guardarlo.
7. Ahora vamos a modificar los trazados para que no parezcan tan artificiosos. Para ello
tienes que activar la herramienta Editar nodos de trayecto o tiradores de control
( ). Al pulsar con el ratón sobre uno de los trazos te saldrán los puntos que delimitan
la curva y pulsando sobre los extremos del trazo, los tiradores que te permiten actuar
sobre la forma en que acaban estos trazos. Juega un poco con ellos para comprender
su funcionamiento.

8. Modifica el trazo superior hasta que obtengas una imagen parecida a la siguiente
(tranquilo sino te sale a la primera se requiere cierta práctica, en el caso de que te
confundas bastará con que pulses Ctrl + Z para deshacerlo):

5
 Tema 2. Diseño gráfico (2)

9. Ahora actúa de la misma forma en el resto de los trazos hasta que obtengas la figura
que puedes ver en la imagen inferior. Ten en cuenta que cuando pulsas sobre uno de
los rombos te aparecen dos circunferencias, una a cada lado, y que si éstas están
sobre el borde del trazo lo dinamizan de tal forma que no te queda el molesto efecto
de punta que aparece al actuar sobre los rombos.

10. Vuelve a guardar el trabajo, para ello bastará con que pulses sobre el botón Guardar
( ).
11. Ahora vamos a colorear los diferentes trazos para que dé el aspecto de haber sido
dibujados con un pincel. Para ello escoge la herramienta Seleccionar y transformar
objetos ( ). Elige el trazo que ves en la figura, pulsa sobre el botón Edición de
estilo ( ) y elige en la ventana que aparece la pestaña Relleno y después la opción
Color uniforme. En ésta elige la paleta RGB y en la casilla R pon 180, con esto
cambiará el color del trazo a un rojo ocre.

6
 Tema 2. Diseño gráfico (2)

12. Repite la operación utilizando los valores que puedes ver en la figura siguiente (todos
en la casilla R):

13. Ahora vamos a agrupar todos los trazos en una única imagen. Para ello selecciónalos
todos haciendo uso del botón Seleccionar todos los objetos o todos los nodos ( )
y agrúpalos mediante el botón Agrupar todos los objetos seleccionados ( ). Con
esto a partir de ahora trataremos con un único objeto.

14. Centra la imagen colocando el cursor sobre ella y pulsando el botón izquierdo del
ratón.

7
 Tema 2. Diseño gráfico (2)

15. Y por último la vamos a guardar como mapa de bits para que pueda ser visualizada
por cualquier persona o retocada mediante un programa adecuado, por ejemplo
Photoshop. Para ello elige Archivo > Exportar mapa de bits... y selecciona el botón
Página. Ahora pulsa el botón Save y tendrás en tu carpeta un nuevo fichero en
formato .png.

6. Los polígonos.
Después de haber trabajado con las líneas pasemos al siguiente nivel. Ahora
trataremos de entender como funciona la creación de polígonos en Inkscape. Éste tiene
las siguientes herramientas básicas para realizar este cometido:
• Crear rectángulos y cuadrados ( ). Con ella podemos realizar un rectángulo
de cualquier tamaño. En el caso de querer dibujar un cuadrado perfecto bastará
con que mantengas pulsado la tecla Ctrl mientras lo dibujas con el ratón.
• Crear círculos, elipses y arcos ( ). Con ella podemos realizar todo tipo de
elipses y arcos de circunferencia. De igual forma que en el caso anterior, si
pulsamos Ctrl durante su trazado obtendremos una circunferencia perfecta.
• Crear estrellas y polígonos ( ). Nos permite dibujar cualquiera de estos
polígonos eligiendo el número de lados o puntas y su redondez.
• Crear espirales ( ). Con la cual podremos dibujar espirales de cualquier tipo y
número de vueltas.
Jugando unos pocos segundos con estas herramientas y las opciones que tienen, y
haciendo uso del botón Edición de estilo ( ) se puede obtener diseños tan interesantes
como los siguientes:

Obviamente estás aburrido de realizar estas figuras en Plástica (no lo utilices para
engañar a tu profesor si aún la cursas, es un favor que te pido), y vamos a ir un poco más
lejos con el siguiente ejercicio:

1. Selecciona la herramienta Crear espirales ( ) y en la barra de botones que

aparece pulsa el botón Reiniciar los parámetros ( ). Ahora pon en las casillas de
parámetros los valores siguientes: Vueltas: 2,000 , Divergencia: 1,500 , Radio
interior: 0,000 . Con esto deberías poder dibujar una espiral como la que se puede
ver en la figura:
8
 Tema 2. Diseño gráfico (2)

2. Para darle sensación de profundidad selecciónala con la herramienta Seleccionar

y transformar objetos ( ). En la barra de menús elige Objeto > Transformar... y
en la ventana que aparece la pestaña Escalar, donde debes bajar el porcentaje de
la casilla Altura a 50%. Pulsa el botón Apply y cierra la ventana.

3. Ahora vamos a darle color, volumen y redondear las puntas. Selecciona el botón
botón Edición de estilo ( ) y en la ventana que te aparece la pestaña Color de
trazo, donde en la Paleta RGB elige B: 150 y Color uniforme ( ). Ahora en la
pestaña Estilo de trazo pon en la casilla Ancho el valor 10,000 px y en la Punta el
Tope redondo ( ). Cierra la ventana.

9
 Tema 2. Diseño gráfico (2)

4. Ahora elige Edición > Clonar > Crear clones en mosaico..., aparecerá una
ventana con pestañas. Pulsa el botón Reiniciar y pon los siguientes valores: en la
pestaña Desplazamiento, en la casilla Exponente por fila: 0,500 y el la casilla
Filas, columnas: 6 x 1; en la pestaña Desenfoque y opacidad, en la casilla
Desenfoque por fila: 1,000 % y en la Opacidad por fila: 10,00 %. Pulsa Crear y
deberías haber obtenido el siguiente dibujo:

5. Ahora pulsa dos veces seguidas el botón Desaglomerar para que se distribuyan
más uniformemente los clones, cierra la ventana y pulsa con el ratón fuera de la
figura. Deberías tener el siguiente dibujo:

10
 Tema 2. Diseño gráfico (2)

6. Por último selecciona todo el dibujo mediante el botón Seleccionar todos los
objetos o todos los nodos ( ) y agrúpalos mediante el botón Agrupar todos los
objetos seleccionados ( ). Elige Archivo > Exportar mapa de bits.... En la
ventana que aparece selecciona el botón Selección y pulsa sobre Examinar,
llámalo Ejercicio 2, pulsa Guardar en esa ventana y luego en la inicial Exportar,
con lo cual obtendrás una copia en formato .png de tu trabajo.

7. El color.
El mundo está lleno de colores, donde hay luz, hay color. La percepción de la forma,
profundidad o claroscuro está estrechamente ligada a la percepción de los colores.
El color es un atributo que percibimos de los objetos cuando hay luz. La luz está
constituida por ondas electromagnéticas que se propagan a unos 300.000 kilómetros por
segundo. Esto significa que nuestros ojos reaccionan a la incidencia de la energía y no a
la materia en sí.
Las ondas forman, según su longitud de onda, distintos tipos de luz, como infrarroja,
visible, ultravioleta o blanca. Las ondas visibles son aquellas cuya longitud de onda está
comprendida entre los 380 y 770 nanómetros.
Los objetos devuelven la luz que no absorben hacia su entorno. Nuestro campo visual
interpreta estas radiaciones electromagnéticas, que el entorno emite o refleja, como
colores.

Colores primarios:
La problemática del color y su estudio, es muy amplia, pudiendo ser abordada desde
el campo de la física, la percepción fisiológica y psicológica, la significación cultural, el
arte, la industria etc. El conocimiento que tenemos y hemos adquirido sobre color en la
escuela elemental, hace referencia al color pigmento y proviene de las enseñanzas de la
antigua Academia Francesa de Pintura que consideraba como colores primarios
(aquellos que por mezcla producirán todos los demás colores) al rojo, el amarillo y el azul.
En realidad existen dos sistemas de colores primarios: colores primarios luz y colores
primarios pigmento.
El blanco y negro son llamados colores acromáticos, ya que los percibimos como "no
colores".
• Colores primarios luz: Los colores producidos por luces (en el monitor de
nuestro ordenador, en el cine, televisión, etc.) tienen como colores primarios al
rojo, el verde y el azul (RGB). Con la fusión de estos se crea la luz blanca, por
eso a esta mezcla se le denomina síntesis aditiva y las mezclas parciales de
estas luces dan origen a la mayoría de los colores del espectro visible.

11
 Tema 2. Diseño gráfico (2)

• Colores primarios pigmento: son colores basados en la luz reflejada de los

pigmentos aplicados a las superficies. Forman esta síntesis sustractiva el color
magenta, el cian y el amarillo. Son los colores básicos de las tintas que se usan
en la mayoría de los sistemas de impresión, motivo por el cual estos colores
han desplazado en la consideración de colores primarios a los tradicionales. La
mezcla de los tres colores primarios pigmento en teoría debería producir el
negro, el color más oscuro y de menor cantidad de luz, por lo cual esta mezcla
es conocida como síntesis sustractiva. En la práctica el color así obtenido no es
lo bastante intenso, motivo por el cual se le agrega el pigmento negro
conformándose el espacio de color CMYK. Los procedimientos de imprenta
para imprimir en color, conocidas como tricomía y cuatricomía se basan en la
síntesis sustractiva.

El círculo cromático:
Tradicionalmente los colores se han representado en una rueda de 12 colores: tres
colores primarios, tres colores secundarios (creados por la mezcla de dos primarios), y
seis colores terciarios (la mezcla de los colores primarios y los secundarios). Los artistas
utilizan un círculo cromático basado en el modelo RYB (rojo, amarillo y azul) con los
colores secundarios naranja, verde y violeta. Para todos los colores basados en un
ordenador, se utiliza la rueda RGB; ésta engloba el modelo CMY ya que el cian, el
magenta y el amarillo son colores secundarios del rojo, verde y azul (a su vez, éstos son
los colores secundarios en el modelo CMY). En la rueda RGB/CMY, el naranja es un color
terciario entre el rojo y el amarillo, y el violeta es otro terciario entre el magenta y el azul.

12
 Tema 2. Diseño gráfico (2)

Colores y sus efectos:

El uso de ciertos colores impacta gradualmente en el estado de ánimo de las
personas, muchos de ellos son utilizados con esa intención en lugares específicos, por
ejemplo en los restaurantes es muy común que se utilice decoración de color naranja ya
que abre el apetito, en los hospitales se usa colores neutros para dar tranquilidad a los
pacientes, y para las entrevistas de trabajo es recomendable llevar ropa de colores
oscuros, ya que da la impresión de ser una persona responsable y dedicada; estos son
algunos ejemplos de la relación entre los colores y las emociones.
• Colores armónicos (cercanos en el círculo cromático): se utilizan de manera
adjunta y producen una sensación de armonía.
• Colores complementarios (opuestos en el círculo cromático): cuando son usados
producen un efecto de agresivo, provocado por el máximo contraste al utilizarlos
juntos.
• Colores monocromáticos (único color): al utilizarlos producen una sensación de
unidad y estabilidad se pueden usar con diferente intensidad (más claro o más
oscuro).

Espacios de colores:
Un espacio de color define un modelo de composición del color. Por lo general un
espacio de color lo define un conjunto de coordenadas (por ejemplo, el espacio RGB lo
forman 3 coordenadas: rojo, verde y azul), cuya combinación genera todo el espacio de
color. Los espacios de color más generales intentan englobar la mayor cantidad posible
de los colores visibles por el ojo humano, aunque existen espacios de color que intentan
aislar tan solo un subconjunto de ellos.
Existen espacios de color de:
• Una dimensión: Escala de grises, escala Jet, etc.
• Dos dimensiones: sub-espacio rg, sub-espacio xy, etc.
• Tres dimensiones: espacio RGB, HSV, HSL, YCbCr, YUV, etc.
• Cuatro dimensiones: espacio CMYK, espacio RGBA, espacio HSLA, etc.
De los cuales, los espacios de color de 3 dimensiones son los más extendidos y los
más utilizados. Entonces, un color se especifica usando tres coordenadas, o atributos, las
cuales representan su posición dentro de un espacio de color específico. Estas
coordenadas no nos dicen cual es el color, sino que muestran donde se encuentra un
color dentro de un espacio de color en particular.
Inskcape, además de ofrecernos el círculo cromático, utiliza espacios de cuatro
dimensiones derivados de los tres siguientes:
• Espacio RGB. Éste es un espacio de color aditivo. Los colores rojo, verde y azul
fueron escogidos porque cada uno corresponde aproximadamente con uno de los
tres tipos de conos sensitivos al color en el ojo humano (65% sensibles al rojo, 33%
sensibles al verde y 2% sensibles al azul). Con la combinación apropiada de rojo,
verde y azul se pueden reproducir muchos de los colores que pueden percibir los
humanos. Por ejemplo, rojo puro y verde claro producen amarillo, rojo y azul
producen magenta, verde y azul combinados crean cian y los tres juntos mezclados
a máxima intensidad, crean el blanco. Inkscape utiliza un espacio derivado de éste
que conoce como RGBA el cual añade el canal alpha (de transparencia) al
espacio RGB original.
• Espacio CMY. Éste es un espacio de color sustractivo. En CMY magenta más
amarillo producen rojo, magenta más cian producen azul, cian más amarillo
generan verde y la combinación de cian, magenta y amarillo forman negro. Debido
a que el negro generado por la mezcla de colores primarios sustractivos, no es tan
denso como el color negro puro (uno que absorbe todo el espectro visible). Es por
esto que al CMY original se ha añadido un canal clave (key) que normalmente es
13
 Tema 2. Diseño gráfico (2)

el canal negro (black) para formar el espacio CMYK o CMYB. Actualmente las
impresoras de cuatro colores, utilizan un cartucho negro además de los colores
primarios de este espacio, lo cual genera un mejor contraste. Sin embargo el color
que una persona ve en una pantalla de computador difiere del mismo color en una
impresora, debido a que los modelos RGB y CMY son distintos. Inkscape utiliza el
espacio CMYK.
• Espacio HSL. El modelo HSL (del inglés Hue, Saturation, Lightness – Tonalidad,
Saturación, Luminancia), también llamado HSI (del inglés Hue, Saturation,
Intensity – Tonalidad, Saturación, Intensidad), define un modelo de color en
términos de sus componentes constituyentes. El modelo HSL se representa
gráficamente como un cono doble o un doble hexágono. Los dos vértices en el
modelo HSL se corresponden con el blanco y el negro, el ángulo se corresponde
con la tonalidad, la distancia al eje con la saturación y la distancia al eje blanco-
negro se corresponde con la luminancia. Es un sistema bastante complejo.
Inkscape utiliza un derivado al que se le ha añadido el canal alpha (de
transparencia).
Puedes verificar todo esto simplemente pulsando sobre el botón Edición de estilo
( ). Además puedes utilizar también la barra de selección del color de trabajo que en el
extremo derecho tiene un triángulo que activa un menú que nos permite cambiar de barra
y paleta según el proyecto en el cual estemos trabajando. Las barras que tiene
predefinidas son: Blues (azules), Gold (dorados), Gray (escala de grises), Green
(verdes), Hilite, Inkscape default (barra por defecto), Khaki, LaTeX Beamer (específica
para el programa LaTeX), Reds (rojos), Royal, SVG (básica del formato .svg), Tango
icons, Topographic (mapas topográficos), Ubuntu (colores básicos de este sistema
operativo), WebHex, WebSafe22 y Windows XP icons (colores de los iconos de este
sistema operativo).

8. Los textos.
Un elemento fundamental del diseño gráfico es el tratamiento que se haga del texto,
ya que en fondo es la información más importante que queremos transmitir en nuestra
imagen en la mayoría de las ocasiones.
Elementos como la fuente, su color y su distribución son básicos en este contexto, y
por lo tanto Inkscape nos deja operar con completa libertad sobre ellos.
Para escribir textos se utiliza la herramienta Crear y editar objetos de texto ( ), al
pulsar sobre ella se activa la siguiente barra de botones:

donde las diferentes opciones son de izquierda a derecha: fuente, tamaño, tipo, alineación
superíndice, subíndice, propiedades del texto y dirección del texto.
Al tratar de escribir con otra fuente te pasará que no te deja cambiarla y mantiene
siempre la predeterminada. Esto es producto de que nos encontramos utilizando una
versión no definitiva del programa, para cambiar la fuente de trabajo bastará con que
pulses en el botón Ver y seleccionar familias tipográficas... ( ), y elijas en ésta la
fuente que quieras, automáticamente se seleccionará, o después de escribir el texto lo
selecciones y elijas la fuente que quieras.
Los textos se pueden modificar en cualquier momento haciendo doble clic sobre ellos
y se les puede cambiar el color seleccionándolos y haciendo uso de la paleta de color
inferior.
Pero ahí no acaban las posibilidades del programa, además de poderse modificar el
aspecto de las diferentes letras actuando sobre los nudos que las definen (de igual modo

14
 Tema 2. Diseño gráfico (2)

que realizamos con el kanji eternidad), se puede hacer que el texto siga cualquier trayecto
(lo que veremos en la actividad dirigida posterior) o que fluya dentro de un objeto (por
ejemplo dentro de una estrella o cualquier figura irregular). Para ello simplemente habrá
que hacer uso del menú Texto (donde existen muchas más posibilidades que en este
curso no podemos abarcar, además de los filtros específicos para textos).
El ejercicio que vamos a hacer en esta ocasión consiste en crear un efecto espiral con
dos versiones distintas del comienzo de “El ingenioso hidalgo Don Quijote de la Mancha”,
la primera en castellano antiguo y la segunda en su versión actual:

1. Lo primero que tienes que hacer es seleccionar la herramienta Crear espirales

( ) y en la barra de botones que aparece pulsa el botón Reiniciar los
parámetros ( ). Ahora pon en las casillas de parámetros los valores siguientes:
Vueltas: 5,000 , Divergencia: 1,200 , Radio interior: 0,000 . Con esto deberías
poder dibujar una espiral como la que se puede ver en la figura:

2. Ahora pulsa fuera de la espiral y pon en la casilla de parámetros los siguientes

valores: Vueltas: 5,000 , Divergencia: 1,200 , Radio interior: 0,300 . Y haciendo
centro en el inicio de la espiral anterior traza una nueva espiral de forma que sea
casi paralela a la anterior (en la figura con línea punteada). En el caso de que
salga a la primera vete variando el Radio interior hasta que lo consigas. Al final
deberías tener lo siguiente:

15
 Tema 2. Diseño gráfico (2)

3. Ahora minimiza el programa Inkscape y dirígete a la carpeta de trabajo, en ella

encontrarás un fichero de texto llamado quijote.txt que contiene los dos textos
que vamos a utilizar. El primero se encuentra en castellano moderno y el segundo
en castellano antiguo. Déjalo abierto y vuelve al programa de diseño gráfico.
4. Selecciona la herramienta Crear y editar objetos de texto ( ), y pulsa en la
parte inferior del texto, ahora copia el texto en castellano moderno del fichero de
texto y pégalo. Pulsa sobre el botón Ver y seleccionar familias tipográficas...
( ), y elige como fuente tipográfica Courier New (si no la encuentras utiliza la
FreeMono) con un tamaño de 24 píxeles (puede que tengas que agrandar o
encoger la fuente a posteriori). Deberías tener algo parecido a lo siguiente:

5. Ahora mediante la Paleta de color dale un tono rojizo oscuro al texto. Después
activa la herramienta Seleccionar y transformar objetos ( ), selecciona el
texto y después manteniendo pulsada la tecla Shift añade la primera espiral que
dibujamos. Con la doble selección hecha elige en la barra de menús Texto >
Poner en trayecto. Deberías haber conseguido que el texto se disponga de la
siguiente forma:

16
 Tema 2. Diseño gráfico (2)

6. Ahora repitamos la operación con el otro texto. Pulsa fuera del conjunto, copia el
texto en castellano antiguo, pero cambiando la fuente a URW Chancery L, con
un tamaño de 24 píxeles y color negro. Y ahora asígnalo a la segunda espiral
que dibujamos. Tendrías que tener al final lo siguiente:

17
 Tema 2. Diseño gráfico (2)

7. Ahora selecciona el texto que está en rojo y añade al principio lo espacios que
sean necesarios para que quede de la siguiente forma:

8. Obviamente el último paso consiste en hacer desaparecer las espirales de

referencia, pero cuidado porque si las suprimimos el texto dejaría de seguir sus
trayectos. Para ello simplemente las ocultaremos, selecciona cada una de ellas
mediante la herramienta Seleccionar y transformar objetos ( ), pulsa el botón
Edición de estilo ( ) y elige en la ventana que aparece la pestaña Color de
trazo. Ahora simplemente pulsaremos el botón Sin relleno ( ) y desaparecerá la
espiral sin afectar al texto. En definitiva que el resultado final tiene que ser el
siguiente:

9. Por último como siempre guarda el trabajo realizado, esta vez con el nombre
Ejercicio 3.svg.

18
 Tema 2. Diseño gráfico (2)

5.9. Vectorización de imágenes.

Alguna vez te habrás encontrado en la situación de que te dan una foto de algo para
que lo dibujes. Dependiendo de tus actitudes artísticas el trabajo será una obra maestra o
una birria. Pero de lo que estoy seguro es que te habrá llevado bastante tiempo realizarlo.
Obviamente la primera reacción que tuviste al enterarte que íbamos a utilizar un
programa de diseño gráfico fue que para poder utilizarlo con soltura tendrías que saber
dibujar bien. Pues no, ya que gracias a la herramienta de vectorizado de imágenes que
nos proporciona el programa Inkscape no hace falta saber dibujar para hacer los diseños
más impactantes.
Actualmente Inkscape emplea el motor de vectorizado de mapa de bits Potrace,
aunque en el futuro soportará alguno más (quiero recordar que éste es un programa
gratuito que está en sus inicios, aún lejos de las aplicaciones profesionales de pago).
La idea es sencilla, se abre una imagen en forma de mapa de bits y se le aplica la
herramienta Vectorizar mapa de bits... que se encuentra en el menú Trayecto. Lo que
hace es convertir mediante procesado matemático y reducción de colores la imagen
original a una imagen vectorial, con el mismo comportamiento que el kanji que dibujamos
en el primer ejercicio, es decir a un conjunto de trazos controlados mediante nodos y
tensores. El único problema que tiene esto es que al ser entidades matemáticas necesitan
muchos recursos tanto de la memoria como del microprocesador. Veamos un ejemplo
práctico para comprender todas las implicaciones de lo que estoy diciendo.
1. Tenemos la siguiente fotografía de una jirafa, obtenida de Internet:

2. El primer paso sería utilizar un programa de retoque fotográfico para quedarnos

solamente con la jirafa. Jugando un poco con la goma, la varita mágica y el lazo
magnético, sin tener que hacer un trabajo perfecto (pueden quedar puntas,
entradas, etc.) se debería obtener la siguiente imagen después de unos 10 minutos
de trabajo:

19
 Tema 2. Diseño gráfico (2)

3. Guardándola al final en el programa de retoque fotográfico con el formato .png

(estos tres pasos ya los he realizado yo para ahorrarte trabajo).
4. Abre el programa Inkscape y elige Archivo > Abrir para cargar el recorte de la
fotografía en el programa, lo considerará como un objeto único.
5. Selecciónala mediante la herramienta Seleccionar y transformar objetos ( ), y
elige Trayecto > Vectorizar mapa de bits..., aparecerá la siguiente ventana,
donde debes pulsar el botón Actualizar para cargarla en la ventana de
previsualización.

20
 Tema 2. Diseño gráfico (2)

6. Existen varias opciones que exigirán más o menos potencia del ordenador y darán
más o menos verosimilitud al dibujo obtenido. Todo depende de la calidad que
necesitemos más adelante. Debe quedar claro que esta herramienta no es mágica
y no tiene que realizar el dibujo con precisión milimétrica. La mejor forma de
obtener lo que se quiere es ir probando diferentes configuraciones hasta que se
obtenga lo que se desea. Veamos cuatro ejemplos distintos para que te hagas una
idea de su funcionamiento. El primero consistirá en pedirle el máximo de procesado
posible, es decir: Pasadas múltiples > Colores, Colores: 64, Pasadas: 64. La
imagen obtenida tendrá el siguiente aspecto, el dibujo vectorial es el de la derecha
(por cierto, fíjate que la herramienta crea un copia sin destruir el original):

7. Ahora con: Pasadas múltiples > Grises, Colores: 8, Pasadas: 8.

21
 Tema 2. Diseño gráfico (2)

8. Ahora con: Pasadas múltiples > Pasos de luminosidad, Colores: 4, Pasadas: 4.

9. Y por último con: Detección de bordes, Umbral: 0.650.

10.Bueno dado que lo que pretendo en este ejercicio es realizar una señal de peligro
por el paso de jirafas, al estilo de la imagen que se puede ver debajo, los atributos
que daré a la herramienta serán: Pasada simple > Reducción de colores,
Colores: 2, Invertir imagen.

22
 Tema 2. Diseño gráfico (2)

11. Al aplicar los atributos anteriores y eliminando la imagen de referencia deberías

tener esto:

12.Dibuja con la herramienta Crear estrellas y polígonos ( ) un triángulo y con el

botón Edición de estilo ( ) elimina el Relleno, ponle de Color de trazo rojo y en
Estilo de trazo pon un Ancho de 40 píxeles y Unión redonda ( ).

23
 Tema 2. Diseño gráfico (2)

13.Ahora reduce y mueve la jirafa hasta que quede dentro de la señal. Selecciona
ambas imágenes y agrúpalas haciendo uso del botón Agrupar todos los objetos
seleccionados ( ). Por último reduce la imagen y céntrala.

14.Guárdala como Ejercicio 4.svg.

Ejercicios de ampliación (no son obligatorios, sirven para subir nota)

1. Utilizando el fichero Artesano.gif que se encuentra en tu carpeta de trabajo, repite el
proceso realizado con el kanji eternidad. Tienes libertad en la elección de los colores
siempre que aparente haber sido trazado a pincel (tonos ocres). Guárdalo como Ejercicio
5.

2. Trata de realizar en siguiente dibujo con el programa. Tienes una imagen en la carpeta
de trabajo llamado Art Attack.jpg como referencia. Guárdalo como Ejercicio 6.

24
 Tema 2. Diseño gráfico (2)

3. Utilizando de nuevo el fichero quijote.txt realiza una alternancia circular de ambos

textos variando tanto el tamaño de la fuente como el color. Cada círculo debe estar
cerrado sobre si mismo y debe tener al menos 10 circunferencias de texto. Guárdalo
como Ejercicio 7.

4. Utilizando como referencia el fichero Sirena.png trata de realizar una señal como la
que puedes ver en la fotografía inferior. Guárdalo como Ejercicio 8.

25