Wikiproyecto:Ilustración/Taller gráfico/Introducción al dibujo vectorial
De Wikipedia, la enciclopedia libre
| Taller gráfico |
Tareas
|
Apoyo
|
| Software |
No olvides
|
Tabla de contenidos |
[editar] Introducción
¡Bienvenido a esta introducción a los gráficos vectoriales! Esta guía está hecha pensando en los principiantes que estén interesados en empezar a realizar gráficos vectoriales.
[editar] ¿Qué son los gráficos vectoriales?
Una letra A vectorial. La computadora almacena la “forma” de la A y a partir de ella determina el color de cada píxel.
¿Qué son los gráficos vectoriales? Quizá quede más claro si explicamos antes cuál es la alternativa: los mapas de bits. En los mapas de bits la imagen está formada por una cuadrícula de pixels. La computadora almacena el color de cada pixel por separado y a partir de esta información “dibuja” la imagen. Los gráficos vectoriales funcionan de forma muy diferente: definen la imagen matemáticamente. Los ficheros contienen instrucciones que dicen “dibuja un círculo en tal posición con tal radio” o “dibuja una curva con estos parámetros”. En ambos casos el monitor, la impresora ó el plotter representan la figura por medio de un mapa de bits, pero hasta antes de ese paso, el gráfico vectorial almacena la información necesaria con la más alta resolución posible, la figura geométrica. Solo en el momento de representar la figura en un dispositivo para el ojo humano se transforma el gráfico vectorial en un mapa de bits.
Por la naturaleza de los gráficos vectoriales son idóneos para dibujos con formas simples (¡aunque combinándolas se pueden obtener imágenes complejas!). Diagramas, como logos, escudos, símbolos y mapas suelen ser más apropiados para representaciones vectoriales que para mapas de bits.
Aquí tienes algunas imágenes de ejemplo que muestran las clase de imágenes que pueden dibujarse mediante gráficos vectoriales:
[editar] Formatos de fichero
Se pueden emplear varios formatos de fichero. El más común es el SWF de Macromedia Flash. Sin embargo, en wikimedia se prefiere usar un estandar abierto, el SVG (Scalable Vector Graphics). SVG es un lenguaje de etiquetas XML para describir gráficos vectoriales bidimensionales. Es un estándar abierto del World Wide Web Consortium.
[editar] Obtención de Inkscape
Usaremos Inkscape por varias razones. La primera es que es software libre. La segunda es que tiene soporte nativo de SVG. Muchas distribuciones de linux vienen con Inkscape instalado, y si no se puede obtener fácilmente. También hay versiones para Windows y Mac en http://www.inkscape.org/. El interfaz de usuario de Inkscape está traducido al castellano.
[editar] Abriendo Inkscape por primera vez
Una vez has instalado Inkscape ábrelo y echaremos un vistazo al interfaz.
Tiene una apariencia razonablemente despejada. Esto es porque los desarolladores de Inkscape ocultan las herramientas que no necesitas en ese momento. Hay barras con herramientas a la izquierda y arriba. También hay una línea con informaciones abajo:
- la barra horizontal superior (Menu) ofrece casi todas las herramientas en forma de menus desplegables.
- la segunda barra horizontal (Command Bar) contiene herramientas para modificar los objetos, así como herramientas. referentes al archivo, accesibles directamente.
- en la tercera barra horizontal (Tool Control) puedes configurar a tus necesidades la herramienta elegida, por eso cambia cada vez que cambias la herramienta.
- en la barra vertical de la izquierda (Tool Box) están las herramientas para crear objetos nuevos.
- en la barra inferior (Status Bar) se pueden leer informaciones como la posición del cursor (Pointer Position), el aumento de la imagen (Zoom), operaciones hechas o alternativas según la tecla pulsada e informaciones sobre el plano (Layer) en el que estás trabajando.
[editar] Herramientas de forma
La variedad de funciones de Inkscape es tal que necesitamos varias formas de representación para poder usarlas todas. Debemos distinguir entre "Trazo" (path) y "Objeto" (object).
Un objeto nos ofrece la posibilidad de considerar "lo" que estamos tratando (un texto, una línea, una figura, etc) como un todo y así manipularlo: aumentar o disminuir su tamaño, trasladarlo, rotarlo, colocarlo en un plano más visible ó detrás de otros objetos, etc). Es decir, modificar sus características exteriores.
Un trazo, en cambio, nos permite considerar un objeto como una figura geométrica cuya forma podemos variar a nuestro gusto. Con ello modificamos las características interiores de la forma. Algunas características, como el color y el espesor de una línea, pueden ser cambiados en ambos estados (trazo u objeto).
La mayoría de las herramientas de Inkscape crean primero un objeto:
- herramienta rectángulo, elipse y estrella.
- herramienta texto, caligrafía
- herramienta espiral
Con excepción de la espiral, todos los objetos primitivos pueden ser convertidos a trazos
Algunas herramientas crean un trazo:
- herramienta líneas
- herramienta curvas
Ya sean trazos u objetos, Inkscape permite definir una orden en que los objetos son mostrados en el dibujo. Con ello es posible que alguna imagen se sobreponga a otra y hasta alguna quede totalmente cubierta por las demás.
[editar] La herramienta rectángulo
Empecemos a explorar la barra lateral de la izquierda por la herramienta rectángulo.
Selecciona la herramienta del rectánculo azul (sabrás que está seleccionada porque aparece un rectángulo rodeándola), ahora clica y arrastra en el lienzo para dibujar un rectánculo. No te preocupes por su color, ya nos ocuparemos de eso más adelante.
Mira los puntos de control de la esquina. Los cuadrados te permitirán cambiar la forma y tamaño del rectángulo. El circular te permitirá redondear las esquinas. Mira la barra informativa de la parte superior. Cambia dependiendo de la herramienta seleccionada. En el caso de la herramienta rectánculo te dice el tamaño del mismo y la curvatura de los bordes. Puedes cambiar los números manualmente. Esto resulta útil si quieres dibujar un rectánculo con un tamaño exacto. Otra cosa importante es la información de la parte inferior de la pantalla (junto al botón de capas). Aunque en muchos programas puedes simplemente ignorar este tipo de información, en Inkscape deberías habituarte a leerla, pues proporciona información útil.
[editar] La tecla Ctrl
Si necesitas crear un cuadrado perfecto mantén pulsada la tecla Ctrl en el teclado mientras clicas y arrastras. Esta tecla limita los posibles rectángulos que puedes dibujar a cuadrados perfectos o rectángulos con proporciones enteras entre los lados. Esta tecla también resulta útil en muchas otras operaciones. Por ejemplo, si la pulsas mientras mueves un objeto restringe la dirección de movimiento a horizontal o vertical únicamente. Si no estás seguro de qué hace en una circunstancia particular púlsala, mira en la barra de abajo e Inkscape te lo dirá.
[editar] Las herramientas de elipse, polígono/estrella y espiral
Estas herramientas funcionan exactamente de la misma forma que la herramienta rectángulo. La tecla Control restringirá la herramienta elipse para qué sólo puedas dibujar círculos o elipses inscritas en rectángulos de proporciones enteras. Veamos la herramienta polígono/estrella.
Puedes cambiar el número de esquinas, su curvatura, el radio interior y la aleatoriedad de la forma manualmente cambiando los valores de la barra superior. También puedes cambiar el radio exterior y el “giro” de la estrella (es difícil de explicar, ¡mejor prúebalo!) arrastrando los puntos de control del propio polígono. Pon los valores como en la imagen, necesitaremos este triángulo redondeado más tarde en esta guía.
[editar] Herramientas de dibujo de trazos
Las siguientes tres herramientas se usan para dibujar trazos. Un trazo es una curva matemática especificada por ciertos parámetros, como el número de puntos por los que tiene que pasar. Empezaremos por la curva bezier.
[editar] Herramienta de curva bezier
Para cerrar la curva debes clicar en el punto nodo final. Arriba tienes un ejemplo de curva bezier. Puedes ver dos nodos. Son el nodo inicial y final de la curva. Pero hay otros nodos que no puedes ver que determinan la forma de la curva. Para verlos necesitas clicar en la herramienta nodo.
[editar] Herramienta nodo
Clicando en la herramienta nodo se muestra otro nodo en el medio de la curva.
Si clicas en el nodo central verás aparecer los tiradores bezier.
Estos tiradores te permiten cambiar la trayectoria que sigue la curva al pasar por los nodos. Fíjate que en la parte superior aparece una lista de herramientas de nodos. Puedes usarlos para cambiar los nodos. No los trataremos con detalle.
La herramienta nodo puede emplearse en todos los objetos creados con otras herramientas para mostrar sus nodos.
[editar] Más sobre herramientas de dibujo
Las otras dos herramientas de dibujo también crean trazos. La primera de las tres es la herramienta lápiz. Si clicas y arrastras en el lienzo la computadora calculará la posición de los nodos y los tiradores.
La última herramienta del grupo es la herramienta caligráfica. Permite hacer una especie de escritura caligráfica.
Estas dos herramientas no son demasiado útiles para usarlas con ratón.
[editar] El resto de herramientas
[editar] Herramienta selección
Esta herramienta te permite crear objetos, cambiar su tamaño y moverlos. Si clicas dos veces en un objeto los tiradores cambian y te permiten rotarlo. 
[editar] Herramienta zoom
El icono de herramienta es una lupa. Arrastra formando un rectángulo para hacer zoom. Mayúsculas + click aleja el zoom.
[editar] Herramienta texto
El icono es una letra A. Pulsa y arrastra en el área donde quieras que vaya el texto y empieza a escribir. Si las letras son demasiado pequeñas pulsa en el botón de selección y arrastra los tiradores para hacerlas mayores. Con texto se pueden hacer muchas cosas, pero aquí por ahora no explicaremos más.
[editar] Herramienta conector
Usa esta herramienta para dibujar una conexión entre dos objetos. Por ejemplo entre un dibujo y una etiqueta.
Lo mejor de esta herramienta es que si quieres mover los objetos el conector siempre los mantiene unidos.
[editar] Herramiente gradiente
Pulsa y arrastra sobre un objeto y crearás un gradiente desde color opaco a transparencia total.
[editar] Cuentagotas
Usa esta herramienta para obtener una muestra de color de otro objeto. Arrastrando se formará un círculo. La herramienta obtendrá la media de color entre los colores del círculo.
[editar] Dibujar una figura, paso a paso
Hay muchas otras herramientas. No hemos mencionado áquellas que están en la barra de herramientas superior, siendo que éstas son esenciales para un principiante. La mejor manera de aprender sobre ellas es úsandolas. Vamos a dibujar una figura simple usando Inkscape. La imagen que procederemos a dibujar es un símbolo no beber/no alcohol similar a este símbolo de no fumar. El dibujo consistirá en una copa de vino (que contiene vino) con un signo de entrada prohibida encima de él.
[editar] Preparando la página
Lo primero que necesitamos es preparar el área de trabajo.
- Necesitamos un canvas cuadrado, para eso ir a File-->New-->CD cover.
- Vamos a crear dos capas. Una capa para la copa con vino, y la otra con el círculo de prohibición. El separar por capas no afecta a la imagen resultante, sólo facilita el trabajo.
- En la barra de menú ir a Layer --> Rename Layer y nombrar a la capa Wine.
- Ahora ir (otra vez) a Layer--> Add layer y nombra la nueva capa No!
Ahora dibujaremos un círculo en la capa No!. Lo primero que debemos hacer es proteger la capa Wine de tal manera que no pueda ser editado casualmente.
En la base de la ventana encuentra la herramienta capa. Debería titularse No!. Clica el triángulo que apunta hacia abajo y elige wine. Cambiará a negrilla una vez que lo elijas. Ahora, ¿ves el candado negro abierto a la izquierda de la herramienta capa? Clica sobre él para proteger la capa. Por ahora no podremos editar esa capa. Clica la herramienta capa y elige nuevamente No!.
Ya podemos comenzar a dibujar.
[editar] Dibujar un círculo con una barra transversa
Clica la herramienta elipse y mantén pulsada la tecla Ctrl. Dibuja el círculo razonablemente grande. Podemos cambiar la talla posteriormente.
[editar] Cambiar el color
Debemos elegir el color rojo y el margén negro. Eso lo hacemos con la herramienta "color y línea" (fill and stroke) que está ubicada en la barra superior con esta apariencia: 
. Clicas una vez y aparece una ventana en la que puedes editar las características tanto del contenido de la elipse como de la línea que la define, el margen. Las características son el color, la transparencia, el estilo y otras más según hayas elegido la cartola "Color" (fill), "Color de línea" (Stroke paint) ó "Tipo de línea" (Stroke style).
En el pantallazo superior el botón de "color y línea" esta en la barra superior al lado de la letra "A". Inkscape te ofrece varias maneras de elegir o definir el color. La más fácil es la "rueda" (wheel). Elige el rojo brillante y cerciórate que el canal A está en 255 y que la opacidad maestra está en el máximo 1.000 (en la versión anglosajona de Inkscape, el punto sirve para separar las décimas de la unidad. En catellano usamos para eso la coma). Para las características de la línea clica la cartola "Estilo de línea" y "Tipo de línea". Elige negro como color de línea y 2,5 pixel como espesor de línea.
[editar] Crear un anillo a partir de la forma círculo
Para crear una forma anillo hacemos otro círculo al interior del primero y luego la sustraemos de la primera usando la función "Combina trazos" (combine paths) de Inkscape. Antes de usar esa función cada "objeto" debe ser convertido a "trazo". Vé al menu y elige
- path--> object to path
Nada cambia aparentemente en el círculo, pero sabrás que ahora es un trazo porque aparece en la línea más inferior de la ventana de Inkscape: esta muestra la información de la operación más reciente que has hecho.
Ahora copiaremos y pegaremos un segundo círculo.
- Edit --> copy (copia la imagen)
- Edit --> paste in place (pega la imagen copiada)
Ahora tenemos dos trazos con forma de círculo, uno encima del otro. Clica sobre el superior, al que haremos más pequeño. Hay varias maneras de hacerlo. Para demostrar el uso de la herramienta "reducir" (inset) la utilizaremos aquí. Esta herramienta no puede ser usada en formas, solo en trazos, por eso hemos convertido ambos círculos a trazos anteriormente.
- Path --> inset
Cada vez que clicas sobre esa función, el círculo se achica. Hasta ahora no hemos utilizado atajos de teclado, sin embargo en este caso es el más apropiado por que se debe repetir la operación varias veces.
- Clica Ctrl y ( hasta que obtengas el tamaño adecuado.
Selecciona ambos círculos arrastrando la herramienta "seleccionar"" sobre ambos círculos ó pulsando la tecla de mayúsculas y clicando una vez sobre cada uno de ellos. Ahora ve a la barra de menu y elige
- Path--> Difference.
Esta función combina ambos trazos restando el más pequeño (que está arriba) del más grande.
[editar] Crear una barra sobre el anillo
Dibuja un rectángulo rojo del mismo ancho que el círculo y de un espesor igual al del anillo. selecciona el anillo y la barra arrastrando la herramienta de selección sobre ambas figuras. Luego elige "alinear" para que la barra quede en el centro del anillo.
El siguiente paso consiste en unir ambas figuras en un solo trazo. Selecciona ambos y luego realiza:
- path--> union
Finalmente debemos rotar el objeto en 45 grados en el sentido de los punteros del reloj.
- Object -->transform --> cartola rotate --> ingresa -45 en la ventana.
La imagen que debemos lograr debe ser esta:
[editar] Dibujar la copa de vino
Primero debemos proteger (bloquear) la capa No!. Clica una vez sobre el icono "ojo" al lado del candado en la barra inferior de la ventana para esconderla. Ahora desbloquea la capa wine.
- Dibuja un triángulo de lados oblicuos con la herramienta "Estrella".
- cambia el tamaño del triángulo para formar la base de la copa.
- Dibuja un rectángulo para el vástago de la copa.
- Dibuja una elipse para el tazón de la copa.
Selecciona los tres objetos y ponlos en una vertical con la función
- Object-->Align
Combina los trazos de los tres objetos y define el espesor de la línea como 1 pixel, elige el color gris y la transparencia A a cerca de un tercio (prueba hasta quedar satisfecho con el resultado).
Ahora debemos cortar la parte superior de la elipse, dejando solo un tazón. Dibuja un rectángulo que cubra completamente la mitad superior de la elipse.
Para cortar usa la función
- path--> difference
¿Quieres agregar un poco de vino? Dibuja una elipse y córtala como en el paso anterior usando el rectángulo. Selecciona "color y línea" y usa el gradiente como forma de colorear. Al editar el gradiente elige un color vino tinto para un extremo y el color blanco para el otro extremo. (Vamos a crear un brillo sobre el vino). Selecciona reflejado (reflected) para la opción Repetir (repeat). Finalmente usa la herramienta nodo para ver los nodos de el gradiente y luego gira el nodo blanco a la derecha y un poco hacia abajo para crear el gradiente requerido.
[editar] Almacena tu trabajo para Wikipedia
Almacena tu archivo en un directorio que te permita encontrarlo con facilidad y rapidez, es decir donde este junto a otros trabajos análogos. Si es necesario crea un nuevo directorio. Dale a tu trabajo un nombre adecuado, puede incluir un número para señalar la versión.
Antes de almacenar el archivo que has creado, cerciórate de que los objetos estén a la distancia correcta considerando que diferente navegadores web tienen diferentes renderizaciones. También asegúrate de la secuencia de aparición de las capas, la ortografía, etc.
Para almacenar ejecuta las siguientes funciones:
- edit --> select all (click)
- Object-->group (click)
- File--> Document Properties--> Page Tab-->Fit Page to Selection Button (click)
- File--> Save As (click)
Cuando subas tu imagen a Commons no olvides darle el tipo correcto de licencia. También debes darle por lo menos una categoría para que alguien que la necesita la pueda encontrar bajo esa categoría.
- Nota: Almacena tu trabajo como svg plano antes que el el svg por defecto. Al parecer se obtiene una imagen más estable.
[editar] Respuestas a preguntas frecuentes
- ¿Como ingreso símbolos que no están en mi teclado?
| Código en archivo |
Símbolo en SVG |
Código en archivo |
Símbolo en SVG |
|---|---|---|---|
| 00f1 | ñ | 00d1 | Ñ |
| 00e1 | á | 00c1 | Á |
| 00e9 | é | 00c9 | É |
| 00ed | í | 00cd | Í |
| 00f3 | ó | 00d3 | Ó |
| 00fa | ú | 00da | Ú |
Inkscape utiliza la tabla Unicode para su herramienta "Texto". Aquí encuentras todas las tablas unicode. Contiene símbolos (letras) de muchos idiomas. Elige la que contiene el símbolo que quieres dibujar. Para ingresarlo debes pulsar "Ctrl" + "u" y luego ingresar los cuatro números hexadecimales que definen el símbolo en unicode. Por ejemplo para ingresar la "ñ" la secuencia es: "Ctrl+u" y luego "00F1".
Las letras castellanas que más frecuentemente nos faltan están en la tabla a la derecha. Para Unicode es igual si usas minúsculas o mayúsculas en el código hexadecimal.
Recuerda usar sólo tipos de letras que estén presentes en el dispositivo destino de la imagen, el plotter, la impresora o más comúnmente el monitor. No basta que se vea bien en tu monitor. Esto es válido tanto para el estilo de la letra (Courier, Sans Serif, etc) como para el símbolo mismo: si el computador es un modelo de museo es probable que no tenga las letras de aquel lenguaje recien comienza a ser conocido en Internet.
- ¿Como crear y mantener ilustraciones para diferentes idiomas?
Muchas ilustraciones son útiles en diferentes idiomas ó varían solamente en el texto que contienen (por ejemplo tarjetas de invitación que contengan el nombre del invitado). En esos casos es aconsejable utilizar el hecho de que Inkscape es un formato XML. Esto significa que solo debemos extraer desde el archivo las cadenas de texto (objetos tipo texto), traducirlas y luego volverlas a insertar en el archivo xml. En GNU/Linux esta es una tarea ya resuelta y existen las herramientas para ello.
Si has terminado la ilustración de una lista de productos en castellano en svg, ListaDeProductos.es.svg, y la deseas ahora en alemán, entonces:
-
- Instala el paquete "gnome-doc-utils" en tu sistema GNU/Linux, si es que no tienes
xml2po. - Extrae las cadenas de carácteres con el mandato
- Instala el paquete "gnome-doc-utils" en tu sistema GNU/Linux, si es que no tienes
xml2po -a -o es-ES.po ListaDeProductos.es.svg.- El archivo
es-ES.po(nombre opcional) contiene todas las cadenas de texto en castellano y bajo cada una de las cadenas, en la línea siguiente, un espacio para la traducción.
-
- Ahora crea un archivo para la traducción alemana
cp es-ES.po de-DE.po
-
- Edita
de-DE.poy traduce los nombres de los productos al idioma destino en la segunda línea. La cadena “image/svg+xml” NO debe ser traducida. Se cuidadoso al editar un archivo *.po. No alteres la estructura xml. - Ya puedes crear el archivo .svg con los nuevos textos en alemán con:
- Edita
xml2po -a -p de-DE.po ListaDeProductos.es.svg > ListaDeProductos.de.svg
Debes considerar que diferentes idiomas necesitan diferente cantidad de espacio para un mismo nombre. Aquí está el original de estas instrucciones.
- ¿Por que Inkscape falla cuando intenta importar archivos ps?
Lamentablemente no todos los archivos "ps" son compatibles con todos los programas lectores de "ps". La solución esta descrita aquí.
- ¿Como unir dos nodos extremos de trazos diferentes?
Dibuja los trazos, selecciona el primero con la herramienta para seleccionar objetos, oprime la tecla mayúscula (shift) de tu teclado y selecciona el segundo trazo otra vez con la herramienta para seleccionar objetos. Elije el menu "Path"->"Cominar". Ahora tienes ambos trazos en sólo un objeto. Para unir ambos extremos sólo necesitas seleccionar ambos extremos con la herramienta para trabajar con nodos: seleciona el primer nodo, oprime la tecla para mayúsculas ('shift') y luego selecciona el segundo nodo. Listo!.
[editar] Ver también
Esto es solo el comienzo de una introducción a las funciones de Inkscape. El proyecto Inkscape ofrece su propia documentación, en buena parte en castellano, en la siguiente dirección:
