Teoría Inkscape 4 ESO

4º ESO INKSCAPE

Curso 09 - 10

INKSCAPEEDITOR DE GRÁFICOS VECTORIALES

Colegio San Antonio

INKSCAPE EDITOR DE GRÁFICOS VECTORIALES

Colegio San Antonio - Carcaixent

C O L · L E G I S A N A N T O N I O D E P A D U A Franciscans � Carcaixent

2

Ficha 1 :// Empezando con Inkscape.

Introducción

Inkscape es un programa de diseño vectorial de código abierto, con capacidades similares a otros editores gráficos como Illustrator, Freehand, CorelDraw o Xara Xtreme (también gratuito). Utiliza el formato de archivo

Scalable Vector Graphics (SVG).También tiene la capacidad de exportar lo que dibujemos a un formato de mapa de bits para utilizarlo en cualquier aplicación, como fondo de pantalla, en una página web, etc.

Elementos de Inkscape (versión 0,46)

Cuando abrimos Inkscape, nos aparece la siguiente pantalla:

Barra de menús. Permite acceder a todas las funciones a través de menús desplegables.

Barra de comandos. Consta de una serie de iconos que permiten la realización de las acciones más frecuentes con un solo clic.

Barra de herramientas. Contiene iconos con todos los útiles de dibujo

Barra de control de herramienta. Contiene iconos que cambian según la herramienta seleccionada.

Barra de estado. Muestra la ampliación del documento, las coordenadas del cursor, la capa de trabajo, el bloqueo de la capa y el selector de la capa activa.

Paleta de colores.

Área de dibujo o lienzo.


3

Preparación del lienzo

En Menú Archivo/Propiedades del documento, podemos cambiar las unidades de medida, color del fondo, tamaño, orientación, bordes, rejilla, etc.

Con la opción Menú Archivo / Nuevo, podemos ver algunas de las posibilidades de tamaños para un documento nuevo.

Se puede trabajar con varios documentos a la vez, Inkscape abre una ventana aparte para cada documento que se ven en la barra de tareas de Windows. A cada documento le da un nombre por defecto que podemos cambiar. Para navegar a través de las ventanas se pincha barra de tareas de Windows o puede usar Ctrl+Tab.


4

Ficha 2 :// Dibujando Formas.

Dibujar Líneas a mano alzada

Para dibujar líneas tenemos que hacer clic en el botón de la barra de Herramientas, o bien pulsar F6.

• Línea Recta

Se hace clic en el punto inicial y clic en el final.

• Trazo Libre

Se hace clic y se arrastra el ratón (sin dejar de pulsar), como si fuera un lápiz, dibujando la forma.

Para cambiar las propiedades de la forma seleccionada hacemos clic derecho sobre ella, y seleccionamos relleno y borde, aparecen tres pestañas que nos permiten cambiar el variar el color, anchura, puntas, guiones, marcas de inicio, etc.

Práctica # 1 Abre un archivo nuevo de Inkscape. Dibuja 5 líneas rectas y 5 trazos libres, utilizando diferentes colores de trazo, anchuras, tipos de punta, guiones, marcas de inicio y marcadores finales. Cierra el documento y guarda los cambios con el nombre: inkscape01.svg

Las líneas no tienen relleno, solo tienen color de trazo.


5

Crear Rectángulos y Cuadrados

Para crear rectángulos y cuadrados haz clic sobre el botón de la barra de Herramientas, o bien, pulsa F4.

• Rectángulos: Se hace clic y se arrastra el ratón (sin dejar de pulsar).

• Cuadrado: Se hace igual pero con la tecla Ctrl pulsada mientras se arrastra. De esta forma también se hacen rectángulos de radio-entero (2:1, 3:1, etc).

El rectángulo o cuadrado seleccionado muestra tres controladores en tres de sus esquinas.

• El de la esquina superior derecha permite redondear las esquinas.

• Los otros dos (superior izquierdo e inferior derecho) permiten cambiar el tamaño.

Cuando tenemos seleccionado el botón de la barra de Herramientas, en la barra de controles de Herramienta aparece:

Para cambiar las propiedades de la forma seleccionada hacemos clic derecho sobre ella, y seleccionamos relleno y borde, aparecen tres pestañas que nos permiten cambiar el color de relleno, color del trazo (borde) y el estilo del trazo (borde).

Ancho Alto Unidades

Afilar esquinas

Redondear esquinas


6

Práctica # 2 Abre un archivo nuevo de Inkscape. Dibuja 3 cuadrados y 3 rectángulos de diferentes tamaños, y con diferentes esquinas redondeadas, utilizando diferentes colores de relleno, colores de trazo, anchuras, guiones. Cierra el documento y guarda los cambios con el nombre: inkscape02.svg

Crear Círculos, Elipses y Arcos

Para crear círculos, elipses y arcos haz clic sobre el botón de la barra de Herramientas, o bien, pulsa F5.

• Elipses: Hacer clic y arrastrar el ratón.

• Círculos: Hacer clic y arrastrar el ratón mientras se mantiene pulsado Ctrl.

La elipse o círculo seleccionado muestra tres controladores.

• Los que tienen forma cuadrada sirven para cambiar el tamaño.

• El controlador representado con un circulito permite dibujar arcos

Cuando tenemos seleccionado el botón de la barra de Herramientas, en la barra de controles de Herramienta aparece:

Arco con radios Arco sin radios

Grados desde la horizontal al punto

inicial del arco

Grados desde la horizontal al punto

final del arco

Arco con radios

Arco sin radios Cerrar

círculo


7

Como en los casos anteriores para cambiar las propiedades de la forma seleccionada hacemos clic derecho sobre ella, y seleccionamos relleno y borde, aparecen tres pestañas que nos permiten cambiar el color de relleno, color del trazo (borde) y el estilo del trazo (borde).

Práctica # 3 Abre un archivo nuevo de Inkscape. Dibuja 3 círculos, 3 elipses y 3 arcos con radio y sin radio de diferentes tamaños, utilizando diferentes colores de relleno, colores de trazo, anchuras, guiones. Cierra el documento y guarda los cambios con el nombre: inkscape03.svg

Crear Polígonos y estrellas

Para crear Polígonos y estrellas haz clic sobre el botón de la barra de Herramientas, o bien, pulsa asterisco (*), a continuación, haz clic y arrastra el ratón.

Crea polígonos

Crea estrellas

Número de lados (polígono) o puntas (estrella)

Solo activo para estrella

Para obtener complicadas e impredecibles formas


8

Los polígonos tienen solo un controlador, mientras que las estrellas tienen dos, moviendo estos controladores y los otros parámetros como esquinas, longitud de radio, redondez y aleatorio, podemos conseguir hermosas formas alocadas, hermosas, complicadas y totalmente impredecibles, vamos a ver algunos ejemplos:

Práctica # 4 Abre un archivo nuevo de Inkscape. Dibuja 5 polígonos y 5 estrellas variando los diferentes parámetros para crear formas divertidas. Cierra el documento y guarda los cambios con el nombre: inkscape04.svg


9

Espirales

Para crear Polígonos y estrellas haz clic sobre el botón de la barra de Herramientas, o bien, pulsa F9, a continuación, haz clic y arrastra el ratón.

Muestran dos controladores, el de inicio y finalización de la espiral. Cuando son arrastrados, simplemente enrollan o desenrollan la espiral.

La divergencia es la medida no lineal de sus giros. Cuando es igual a 1, la espiral es uniforme; cuando es menor a 1 (Alt+arrastrar de manera ascendente), la espiral es más densa sobre la periferia; cuando es mayor que 1 (Alt+arrastrar de manera descendente), la espiral es más densa por el centro:

El número máximo de giros para la espiral es 1024.


10

Si hacemos espirales con borde punteado, podemos conseguir efectos moiré:

Práctica # 5 Abre un archivo nuevo de Inkscape. Dibuja 10 espirales variando los diferentes parámetros para crear formas divertidas. Cierra el documento y guarda los cambios con el nombre: inkscape05.svg

Cajas 3D

Para crear cajas 3D haz clic sobre el botón de la barra de Herramientas, o bien, pulsa shift+F4, a continuación, haz clic y arrastra el ratón.

El relleno y borde se edita haciendo clic en el botón, , de la barra ce comandos (debajo de la barra de menús).

Práctica # 6 Abre un archivo nuevo de Inkscape. Dibuja 5 cajas variando los parámetros para crear diferentes formas. Cierra el documento y guarda los cambios con el nombre: inkscape06.svg


11

Ficha 3 :// Trabajando con las formas y objetos.

Acercar y alejar (Zoom)

La manera más sencilla de activar el zoom es por medio de las teclas - y +. También puede emplear Ctrl+Click del botón central o Ctrl+Clic del botón derecha para agrandar, Mayus+Clic del botón central o Mayus+Clic del botón derecho para alejar o disminuir.

Se puede hacer lo mismo con el campo situado en la parte inferior izquierda, que permite ingresar el valor del porcentaje % para la visualización.

También tenemos la herramienta Zoom, , de la barra de Herramientas, la cual permite hacer un zoom seleccionándola (aparecerá una lupa) y haciendo clic en el punto a aumentar o disminuir.

Mover, escalar y rotar.

Para manipular un objeto o forma, lo primero que hay que hacer es seleccionarlo. Para ello, hay que pinchar en

el botón de la barra de herramientas, se sitúa el cursor del ratón sobre cualquier punto del objeto,

veremos que el cursor se transforma en una cruz, , en este momento si hacemos clic sobre el objeto, éste aparecerá rodeado por unos controladores en forma de flecha (si hacemos clic en una zona del objeto sin relleno, no lo seleccionaremos).

Una vez seleccionado el objeto podemos hacer las siguientes operaciones:

• Mover los objetos arrastrándolos por el área de dibujo. Si mantienes pulsado Ctrl solo se moverá en horizontal y vertical.

• Escalar (aumentar o disminuir el tamaño de los objetos), tirando de cualquier controlador. Si mantienes pulsado Ctrl se conserva la proporción original.

Otra forma de mover y escalar es mediante los campos de numéricos de la barra de control, en ellos podemos dar los valores exactos de la posición (coordenadas X e Y) y del tamaño del objeto, W es el ancho y, H es la altura.

Al hacer clic sobre el objeto cambia el tipo de controladores. En lugar de los controladores de escalar aparecen los controladores de rotar e inclinar.

Escalar


12

• Rotar tirando de los controladores situados en las esquinas. Si mantienes pulsado Ctrl se restringe la rotación a pasos de 15 grados. La marca en forma de cruz que hay en el centro del objeto nos indica la posición del eje de rotación (se puede cambiar de posición).

• Inclinar tirando de los controladores centrales. Si mantienes pulsado Ctrl se restringen las inclinaciones a pasos de 15 grados.

Selecciones Múltiples.

Podemos seleccionar varios objetos simultáneamente de dos formas:

• haciendo Mayus(Shift)+clic sobre cada uno de los objetos.

• Haciendo clic y arrastrando el cursor alrededor de los objetos.

Cada objeto individual seleccionado dentro de una selección múltiple, aparece rodeado por un marco de puntos. Esto, hace ver qué está seleccionado y qué no lo está.

Rotar

Inclinar

Aquí tenemos seleccionados los tres objetos

Aquí solo tenemos seleccionados el triangulo y el circulo

Mayus+clic sobre un objeto seleccionado, lo excluye de la selección.


13

Relleno y borde.

Para cambiar las propiedades de relleno y borde hay que seleccionar la forma mediante , y hacer clic derecho, y seleccionar relleno y borde, o desde menú objeto / Relleno y borde, o también, desde el icono.

Podemos observar que el dialogo posee tres pestañas: Relleno, Color de trazo y Estilo de trazo.

• La pestaña Relleno permite editar el relleno interior del objeto seleccionado. Se puede seleccionar sin relleno, color uniforme, gradiente lineal o radial.

Color uniforme Sin relleno Gradiente lineal Gradiente radial

RGB, HSL, CMYK, Rueda y CMS, son diferentes formas de seleccionar el color del relleno.

Cuando se seleccionan varios objetos el dialogo muestra su color promedio.

• La pestaña Color de trazo permite editar el color del borde del objeto seleccionado.

• La pestaña Estilo de trazo permite editar la anchura, puntas, guiones, marcas de inicio, etc.

Una forma sencilla de cambiar el color de relleno del objeto que se encuentra seleccionado es hacer clic sobre uno de los colores que nos ofrece la paleta de colores situada en la parte inferior. Si hacemos esto mismo con la tecla SHIFT pulsada, le daremos color al trazo.


14

Otra forma para dar color al relleno y al trazo es coger el color en la paleta y soltarlo encima del objeto correspondiente (aquí también funciona SHIFT para dar color al trazo) La gran ventaja de este método es que no hay que tener seleccionado el objeto que queremos editar.

También tenemos la posibilidad de coger el color y soltarlo en la zona de los atributos propios del objeto que tiene seleccionado y situados en la parte inferior izquierda de la interfaz.

Práctica # 7 Abre un archivo nuevo de Inkscape. Crea un dibujo utilizando líneas, cuadrados, círculos, polígonos, estrellas, etc. Cierra el documento y guarda los cambios con el nombre: inkscape07.svg

Agrupar y desagrupar objetos.

Cuando tenemos varios objetos podemos combinarlos para que se comporten como un único objeto, y así, moverlos o transfórmalos todos al mismo tiempo.

Para agrupar objetos, hay que seleccionar los objetos y presionar Ctrl+G, o ir al menú objetos / agrupar. Para desagrupar, hay que seleccionarlo y presionar Ctrl+U, o ir al menú objetos / desagrupar.

Varios grupos pueden ser agrupados a su vez. Se hace igual que con los objetos individuales. Esto se puede hacer repetidamente y tendremos un grupo dentro de otro grupo. Para desagrupar necesitaremos presionar Ctrl+U repetidamente si queremos desagrupar completamente un grupo dentro de otro grupo.

Duplicar y Clonar.

Se puede duplicar un objeto tantas veces como se quiera. Para ello se va al menú Editar / Duplicar. El objeto duplicado queda encima del original y se puede arrastrar con el ratón donde se quiera.

También se puede clonar un objeto tantas veces como se quiera, desde el menú Editar / Clonar. El objeto clonado queda encima del original y se puede arrastrar con el ratón donde se quiera.


15

Aparentemente al duplicar o clonar obtenemos el mismo resultado, una copia del original. La diferencia radica en que cuando obtenemos copias mediante clonado, los cambios que le hacemos al original, se aplican también al clon, mientras que al duplicar, la copia se comporta de forma independiente.

Hay una opción de clonar muy interesante, Clones en mosaico. Se puede jugar con las filas, columnas, simetría, etc. Los rectángulos de la figura de abajo se han hecho así.

Alinear y Distribuir.

Si tenemos una colección de objetos y queremos alinearlos o distribuirlos de una cierta forma, tenemos esta opción. Para ello se va al Menú Objeto/Alinear y Distribuir.

En el cuadro <Alinear Relativo a:> podemos elegir el objeto de referencia para alinear. Debajo tenemos los iconos que nos indican las diferentes formas de alinear varios objetos.

A continuación tenemos los iconos que nos indican las diferentes formas de distribuir varios objetos


16

Ordenar.

El término orden se refiere al orden de apilado de los objetos.

Se puede acceder desde menú objeto, o bien desde la barra de control de la herramienta seleccionar y transformar objetos.

Podemos variar el orden de los Objetos con las funciones Traer al Frente, Bajar al fondo, Elevar y Bajar.

Rotar, reflejar y transformar.

Con la función rotar 90°, hemos obtenido el 2º rectángulo a partir del primero:

Con la función reflejar horizontalmente, hemos obtenido el 2º triángulo a partir del primero:

Con la función Transformar podemos hacer lo que se indica en la ventana siguiente:

Muchas cosas se pueden hacer estirando con el ratón directamente sobre los controladores escalado/rotación.


17

Práctica # 8 Vamos a crear una señal de prohibido.

1.- Hacemos un círculo (con ctrl pulsado). Una vez hecho podeos cambiar el tamaño estirando de los controladores (con ctrl pulsado para que siga siendo un círculo y, no una elipse)

2.- Hacemos una línea horizontal (con ctrl pulsado). Una vez hecho cambiamos el tamaño estirando de los controladores.

3.- Cambia el color del círculo a color rojo (R:255, G:0 y B:0) y elimina el trazo.

4.- Coloca la línea dentro del círculo y ajusta el tamaño de la línea estirando de los controladores.

5.- Centra la línea con el círculo.

6.- Selecciona la línea y aplícale color blanco (R:255, G:255 y B:255).

7.- Selecciona los dos objetos y agrúpalos.

8.- Cierra el documento y guarda los cambios con el nombre: inkscape08.svg

Una forma de optimizar el trabajo es usar los iconos de la barra de comandos:

Editar objetos de texto

Relleno y borde

Alinear y distribuir Agrupar / Desagrupar


18

Práctica # 9 Vamos a crear el logotipo de Mitsubishi.

1.- Hacemos un triángulo con CTRL pulsado, y así nos aseguramos que queda la base quede completamente horizontal.

2.- Elimina el trazo y aplícale color rojo de relleno.

3.- Duplica el triangulo y haz clic en menú Objeto / Reflejo vertical. A continuación abre Alinear y distribuir /

Alinear Relativo a: Selección / y haz clic en .

4.- Agrupa los dos triángulos. Y selecciona Menú Objeto / Transformar / Rotar / 120°.

5.- Duplica este último objeto y crea su simétrico con reflejo horizontal.

6.- Colócalo este último objeto en la posición adecuada con Alinear y distribuir / Alinear Relativo a: Selección

/ y haz clic en .

7.- Duplica uno de los dos objetos que forman la figura y, selecciona Menú Objeto / Transformar / Rotar /

−120°.


19

8.- Separa el último objeto duplicado y agrupa los dos primeros objetos.

9.- Selecciona los dos objetos. En primer lugar este objeto y, a continuación este otro. Y haz clic en Alinear y distribuir / Alinear Relativo a: Último seleccionado / centrar en el eje vertical y en Alinear los bordes superiores.

10.- Selecciona solo el objeto central y, haz clic en Alinear y distribuir / Alinear Relativo a: Selección / y haz clic

en , .

11.- Por último agrupa todos los objetos, cierra el documento y guarda los cambios con el nombre: inkscape09.svg

Práctica # 10 Vamos a crear un logotipo para utilizar en temas posteriores (maquetación de una revista).

1.- Abre un archivo nuevo de Inkscape, desde el menú Archivo, accede a propiedades del documento.

Prepara la página con las siguientes características:

2.- Menú Archivo / Propiedades del documento / Página / Tamaño personalizado / Anchura: 100 mm y altura: 60 mm. Fíjate en las unidades, es una página bastante pequeña, así que, debes utilizar el zoom, para poder trabajar mejor.

Dibuja la esfera del reloj:

3.- Dibuja un círculo (no importa si es un círculo perfecto, ni el tamaño).

4.- Cambia el color de relleno del círculo por el color negro. Relleno /Color uniforme / RGB / R : 0, G : 0 y B : 0.


20

5.- Elimina el borde del círculo. Color de trazo / sin relleno.

6.- Selecciona el círculo con la herramienta seleccionar y ahora desde la barra de control de herramienta puedes darle las mediadas exactas: 47 mm de diámetro (W: 47,000; H: 47,000; unidades: mm).

7.- Centra el círculo, en vertical y horizontal, Relativo: a página.

8.- Selecciona el círculo y, haz clic en menú Edición / Duplicar. Ahora tenemos dos círculos, la copia se sitúa sobre el original.

9.- Con el círculo duplicado seleccionado vamos a la barra de control de la herramienta seleccionar y, cambiamos el tamaño del círculo duplicado, diámetro: 43 mm (si hacemos clic sobre el candado, este se cierra y al cambiar W, también cambia H).

10.- Cambia el color de relleno del círculo de menor tamaño por un gris oscuro. Color uniforme (RGB), R : 51, G : 51 y B : 51.

11.- Centra el círculo de menor tamaño, en vertical y horizontal, Relativo: a página.

Crea las marcas horarias (3, 6, 9 y 12 horas):

12.- Dibuja una línea recta vertical (ayúdate de la tecla Ctrl)

13.- Selecciona la línea y, mediante la barra de control le ponemos un tamaño aproximado de: 1 mm de ancho y 4 mm de alto.

14.- Selecciona la línea y, abre la ventana Relleno y borde / Estilo de trazo / Punta / tope redondo.

15.- Selecciona la línea y, abre la ventana Relleno y borde / Color de trazo / Color uniforme / RGB / R: 255, G: 255 y B: 255.

16.- Seleccionar primero la línea y luego el círculo de menor tamaño (para seleccionar varios objetos hay que hacer clic + shift).

17.- Menú Objeto / alinear y distribuir… / Alinear relativo a: Último seleccionado / centrar en el eje horizontal / alinear los bordes superiores.

18.- Duplica la marca de las 12 horas y repite los pasos del punto 13, con la única diferencia que al final hay que alinear los borde inferiores

19.- Duplica la marca de las 12 horas, gírala 90° mediante menú objeto / Rotar 90° a la derecha, ahora hay que centrar en el eje horizontal y alinear lados derechos.

20.- Duplica la marca de las 9 horas y, ahora alinear lados izquierdos.

Crea el eje del reloj:

21.- Crea un círculo de 6 mm de diámetro, sin borde y asígnale color negro, R : 0, G : 0 y B : 0.

22.- Centra el círculo en la página.

Crea las manecillas.

23.- Con la herramienta Dibujar líneas a mano alzada, dibuja una línea recta desde el centro del círculo más pequeño, hasta casi tocar el lugar que marca las 10.

24.- Selecciona la línea y, abre la ventana Relleno y borde / Estilo de trazo / Punta / tope redondo.

25.- Relleno y borde / Estilo de trazo / Ancho / 1,000 / mm

26.- Asignar color rojo, R : 0, G : 0 y B : 0.


21

27.- Selecciona la manecilla de los minutos (la que acabamos de crear) y, duplícala, a continuación haz clic en menú Objeto / Reflejo horizontal, seguidamente haz clic en menú Objeto / Transformar… / Escalar / Ancho: 50 % y pulsa el botón <apply>, posteriormente, desde Relleno y borde aumenta el ancho hasta aproximadamente 1 mm, y por último, utilizando las teclas de desplazamiento (flechas del teclado), muévela hacia la derecha, hasta colocar el extremo inferior de la manecilla en el centro del reloj.

28.- Ahora vamos a hacer que las manecillas queden por debajo del eje (círculo pequeñito). Seleccionamos una de las manecillas y, hacemos clic en menú Objeto / Bajar, luego seleccionamos la otra manecilla y hacemos lo mismo pero desde la barra de control de la herramienta seleccionar



22

Ficha 4 :// Escribiendo texto. Para crear un texto, lo más sencillo es ir a la Barra de Herramientas y seleccionar la herramienta crear y editar

Texto, , (F8), a continuación, nos posicionamos en el lugar donde queremos poner el texto y escribimos.

Una vez escrito cualquier texto, se puede seleccionar haciendo clic en, , y pinchando en él, pero hay que tener cuidado de pinchar sobre la parte escrita:

Cuando el texto está seleccionado podemos realizar las siguientes acciones:

• Abrir la ventana de diálogo de texto con el botón, , que se encuentra en la barra de comandos (debajo de la barra de menú) y modificar cualquier propiedad como fuente, estilo, tamaño, formato y espaciado de líneas. Este diálogo tiene la pestaña texto donde podemos modificar el propio texto, cambiándolo o añadiendo texto. En algunas situaciones, esta forma puede ser más conveniente que hacerlo sobre la pizarra.

Con la herramienta Texto podemos posicionarnos en algún lugar dentro del texto para modificar o escribir sobre él.

• Mover los controladores del texto, para modificar el texto a nuestro gusto, como vemos abajo.

No se selecciona el texto, sino, lo que hay debajo

Si se selecciona

el texto


23

• Hacer clic en el botón, , de la barra ce comandos (debajo de la barra de menús) para cambiar el relleno, color de trazo y estilo de trazo:

Práctica # 11 Abre un archivo nuevo de Inkscape, y:

1.- escribe el texto:

2.- Utiliza fuente Bookman Old Style, Bold Italic, tamaño 48, centrar líneas.

3.- Duplica el texto dos veces y, realiza cambios en las características de la fuente, trazo, relleno y, mueve los controladores.


Caligramas

Una posibilidad que nos da Inkscape es, asociar un texto a un trayecto o trazo. Para hacer esto, hay que tener un trazo y un texto; seleccionamos el texto, pinchando en él, a continuación seleccionamos el trazo pinchando en él con la tecla de mayúsculas presionada y, a continuación se va al menú Texto y Poner en trayecto. Es imprescindible tener seleccionados los dos objetos, texto y trayecto.

Vamos a hacer un ejemplo sencillo:

1.- Dibujamos una línea a mano alzada.

2.- Escribimos el texto: En un lugar de la Mancha …

3.- Seleccionamos los dos objetos:

4.- Se va al menú Texto / Poner en trayecto:

De la misma forma podemos asociar un texto a cualquier contorno o trayecto: rectángulo, elipse, espiral, etc.

Como segundo ejemplo vamos a asociar un texto a una espiral. Siguiendo los mismos pasos:

1.- Dibujamos la espiral.

2.- Escribimos un texto cualquiera.


4.- Se va al menú Texto / Poner en trayecto y, obtenemos lo siguiente:

EN UN LUGAR DE LA MANCHA


24

De la misma forma he hecho los siguientes ejemplos:

Práctica # 12 Abre un archivo nuevo de Inkscape. Dibuja un caligrama. Cierra el documento y guarda los cambios con el nombre: inkscape12.svg

Otra posibilidad que nos da Inkscape es, asociar un texto a una forma. Para hacer esto, hay que tener una forma y un texto; seleccionamos el texto, pinchando en él, a continuación seleccionamos la forma pinchando en ella con la tecla de mayúsculas presionada y, a continuación se va al menú Texto y Fluir en el marco. Es imprescindible tener seleccionados los dos objetos, texto y forma.

Vamos a hacer un ejemplo sencillo:

1.- Dibujamos una elipse.

2.- Escribimos el texto: En un lugar de la mancha de cuyo nombre no quiero acordarme


4.- Se va al menú Texto y Fluir en el marco:

De la misma forma podemos asociar texto a cualquier forma: rectángulo, elipse, espiral, etc.

Este, con dos espirales

Este, siguiendo los radios del polígono.


25

Ejemplo hecho con Texto/ Fluir en el marco dentro de una vasija hecha a mano alzada:

Práctica # 13 Abre un archivo nuevo de Inkscape. Dibuja un caligrama con una forma. Cierra el documento y guarda los cambios con el nombre: inkscape13.svg

Práctica # 14 Abre el archivo Inkscape08.

1.- Crea dos objetos de texto como los de la figura, con una fuente Arial Rounded MT Bold y un tamaño de 40.

2.- Oriéntalas en la misma dirección que las manecillas.

3.- Cambia el color de las letras, según se ve en el dibujo. Utiliza el mismo color que en las manecillas.

4.- Haz clic en menú Archivo / Guardar como … / con el nombre: inkscape14.svg

5.- Cierra el documento.


26

Ficha 5 :// Diferencias Con Objetos (Fagor)

Es muy habitual en el mundo del diseño (sobre todo en el 3D) denominar operaciones booleanas a las operaciones de suma, resta e intersección de objetos. En Inkscape este tipo de operaciones se extienden a la división, exclusión y cortar Trayecto; se encuentran en el menú Trayecto.

Su uso es muy intuitivo pero conviene tener algunos detalles en cuenta:

• El resultado de una operación booleana es un único objeto por lo que sólo tendrá un relleno y un borde.

• La Unión (suma) es la única operación booleana que admite tener seleccionados más de dos objetos.

• El resto de las booleanas sólo funcionan con dos objetos seleccionados y se entenderá que el situado más abajo es el objeto dominante y prevalecerá en el resultado.

En el ejemplo siguiente se ve la consecuencia de esto último. En los dos casos se ha realizado, una vez seleccionados los dos objetos, la secuencia de comandos Trayecto / Unión. Geométricamente el resultado es el mismo pero la herencia del color es relativa al objeto que estaba debajo en el momento de la operación.

En otras operaciones como Trayecto/ Diferencia, este detalle será trascendental.


27

Práctica # 15 Vamos a realizar el logotipo de FAGOR

1.- Primero creamos un círculo sin borde de 75 mm de diámetro y después un rectángulo, también sin borde, de 100 mm de ancho y, 30 mm de alto.

2.- Ahora seleccionamos el rectángulo y hacemos clic en el menú Objeto / Transformar / Inclinar / horizontal:

−45° deg.

3.- Crea un nuevo rectángulo, también sin borde, de 150 mm de ancho y, 10 mm de alto.

4.- Coloca el nuevo rectángulo centrado respecto al rectángulo inclinado.

5.- Selecciona los dos rectángulos y haz clic en menú Trayecto / Diferencia. Coloca el objeto resultante sobre el círculo y después selecciónela junto con el círculo y repite Trayecto/Diferencia


Práctica # 16 Abre inkscape09 y desagrupa todos los objetos y efectúa trayecto / Unión; de esta manera se evitan esas líneas de unión. Haz clic en menú Archivo / Guardar como … / con el nombre: inkscape16.svg y cierra el documento.


28

Ficha 6 :// Ordenando Objetos En Rejilla En esta ocasión vamos a trabajar con un nuevo método para ordenar objetos de una manera controlada. Se trata de ordenar objetos dentro de una supuesta red de filas y columnas en la que los espacios pueden ser editables. Para la práctica vamos a copiar un logotipo en el que los objetos están ordenados dentro de una rejilla de 2x2.

• Crear cuatro cuadrados alineados en una rejilla 2x2. Haz un cuadrado de 3,4 cm de lado; Para ello dibuje un rectángulo, seleccione las unidades, cm, y escriba 3,4 de ancho (W) y de alto (H).

Luego haga tres duplicados

Seleccione los cuatro cuadrados y haga la línea de comandos Objeto/filas y columnas. Esto hará aparecer un cuadro con las opciones necesarias. Los datos son, lógicamente 2 filas y 2 columnas, también hay que modificar la separación horizontal y vertical de los cuadrados (ajustar espaciado); En nuestro caso 9.0 unidades son suficientes.

Use las flechas para subir y bajar los valores, si los introduce con el teclado a veces se produce un bug -error de programación-


29

• Edición de los colores. Seleccione dos cuadrados y aplíqueles color negro tanto al relleno como al trazo. Después seleccione los otros dos y póngales relleno blanco y trazo negro. Después seleccionamos los cuatro cuadrados y en estilo de trazo regule el ancho a 2,00 px.

• Crear efecto sombra en los cuadros negros. Duplica los cuadrados negros y desplaza los duplicados (a la vez) un poco a la derecha y hacia abajo. Saque el cuadro de Relleno y borde y aplique desenfoque y disminuya la opacidad maestra de los objetos. Mándalos al fondo con Objeto/Bajar al fondo,

No agrupe de momento. Vamos a necesitar los cuadrados para alinear los textos dentro.

• TEXTO. Con la herramienta de texto escriba CON y desde Texto/Texto y tipografía elija la fuente “Arial

Narrow”, estilo “Normal”, tamaño de tipografía “56”.

Coloque el texto en su sitio. Seleccione color blanco tanto para el relleno como para el trazo. Después use Alinear y distribuir...


30

Haga lo mismo para los restantes textos utilizando las mismas características y sabiendo que las letras sobre cuadro blanco llevan relleno y trazo negro.

Pero ahora hay que prestar atención a algo importante. Imagino que no le habrá pasado desapercibido que todos los textos tienen igual ancho en el logotipo original y los que ha escrito usted, no. Vamos por tanto a igualar. Pare ello seleccione CON y haga la línea de comandos

Edición/Copiar. Después seleccione los otros tres textos y haga Edición/Pegar tamaño.../Pegar ancho por

separado

Después de usar las herramientas que ya se estudiaron en prácticas anteriores relativas a Alinear y distribuir un resultado aceptable podría ser el siguiente:


31

Sólo un detalle más. Para la exportación en mapa de bits del logotipo se va a producir un problema con el desenfoque de abajo y de la derecha. Si usted exporta el grupo tal y como queda seleccionado se producirá este efecto:

Esto es debido a que el efecto de desenfoque va más allá de la caja de selección. Hay varias opciones para solucionar esto. Una de ellas es añadir un rectángulo sin relleno y sin contorno al grupo formado por el logotipo y asegurar así que el desenfoque queda dentro de la caja de selección. Otra es hacer el mencionado rectángulo y, teniéndolo seleccionado, ir a Archivo/Propiedades del documento... y en la pestaña Página presionar el botón Ajustar la página a la

selección.

Una vez hecho esto, a la hora de exportar podemos escoger la opción Página con garantías de que queda al tamaño que hemos decidido nosotros y con el desenfoque sin originar problemas.


32

Ficha 7 :// Logo 5: EDITANDO CUATRO NODOS (nike)

Este logotipo es imposible conseguirlo mediante figuras denominadas primitivas; es necesaria una deformación que va más allá de estirar los transformadores, vamos a crear este logotipo editando los nodos.

1. Dibujar cuadrilátero. Utilizamos la herramienta dibujar curvas Bézier y líneas rectas para hacer un cuadrilátero contorneando el logo de nike. Para hacer líneas rectas haga simples clics y no arrastre el ratón, de lo contrario se generarán curvas. Asegúrese de poner el último nodo encima del primero (para ello Inkscape rellenará el punto inicial de color rojo) De momento no se preocupe de la precisión. La figura resultante es un objeto con contorno y sin relleno.

2. Edición de nodos. Hacer clic en la herramienta editar nodos de control o tiradores de trayecto. Seleccione todos los nodos (mantenga pulsado shift mientras hace clic en cada uno de ellos, ahora aparecen en color azul) y haga clic en la opción convertir los segmentos seleccionados a curvas,; después seleccione dos de los nodos y haga clic en la opción suavizar nodos seleccionados.


33

En la siguiente ilustración se muestra el resultado. También se ha cambiado en color de relleno, se ha eliminado el borde y se ha bajado la opacidad para que se aprecie mejor el modelo.

3. Mover los tiradores. Aquí entran en juego sus conocimientos sobre tangencias. Una ordenación convincente sería esta:

Si Inkscape no le muestra los tiradores asegúrese de tener

activado este botón del menú de opciones


34

Con el color de relleno apropiado ya tiene usted su logotipo en vectores.

Resumen de las propiedades y posibilidades de los tres tipos de nodos que hay aunque aquí sólo hemos usado dos.

Nodo de esquina

• Es un nodo en el que NO se origina tangencia por lo que la entrada y la salida de las curvas queda quebrada.

• La intensidad de entrada y de salida (longitud de los tiradores) puede ser distinta.

• Si se quieren mover los dos tiradores a la vez para conservar el ángulo hay que mover uno con SHIFT pulsado.


35

• Si se mantiene ALT pulsado se puede mover un tirador pero se conservará su longitud.

• Si se edita con CONTROL pulsado los altos son de 15º (a no ser que se especifique otro ángulo en Preferencias de Inkscape)

Nodo suavizado (asimétrico)

• La entrada y la salida de las curvas se hace de manera armónica con un enlace tangencial.

• Su principal característica es que la fuerza de entrada y la de salida (longitud de los tiradores) no tienen por qué ser iguales (por eso la denomino asimétrica)

• ALT pulsado tiene las mismas consecuencias que en el de esquina, igual que CONTROL

Nodo suavizado simétrico

• Se comporta igual que el asimétrico pero en este caso tiene la restricción de tener la fuerza de entrada y de salida exactamente iguales por lo que los tiradores son de la misma longitud.

• Alt tiene el mismo efecto que en los casos anteriores, igual que CONTROL


36

Ficha 8 :// Logo 6: ALINEANDO NODOS Vamos a realizar en esta práctica, de dos modos distintos, es un logotipo muy sencillo que nos servirá para comprender nuevos recursos a la hora de trabajar con nodos.

MÉTODO 1

Copiamos el logo original y lo pegamos en inkscape. Creamos, sobre el modelo original, la geometría aproximada de uno de los elementos con la herramienta de curvas de Bezièr y líneas rectas. Recuerde que para obtener los segmentos rectos debe hacer clic sin mover el ratón, de lo contrario se crearán nodos suavizados.


37

He enumerado los nodos para poder hacer referencia a ellos sin que haya confusión a partir de ahora.

De los cuatro nodos, solo es importante que los nodos 1 y 3 queden "correctamente" colocados según el modelo original.

Seleccione los nodos 1 y 3, y asegure la precisión con la línea de comandos Objeto/Alinear y distribuir. De este modo han quedado colocados en la misma horizontal.

Ahora seleccione los nodos 1, 2 y 3 y con el mismo cuadro Alinear y distribuir haga que las distancias verticales entre puntos sean constantes.

Seleccione, EN ESTE ORDEN, el nodo 4 y después el 2; y haga que estén en la misma vertical.

El orden es importante. Tenga siempre en cuenta que el último nodo seleccionado será el que quede fijo, los demás nodos se moverán.

Desplace los dos nodos 2 y 4 verticalmente con CONTROL pulsado para anclar el desplazamiento al eje Y Si todo ha salido correctamente tiene que tener un contorno preciso y ajustado al original. En el ejemplo se ha rellenado de color y se ha eliminado el contorno del objeto.


38

Seleccione el objeto, duplíquelo y desplácelo con CONTROL pulsado hacia abajo para colocarlo en el lugar adecuado. Después seleccione los dos objetos y haga Trazo/Unión. Considero que en este caso es mejor unir que agrupar porque esto permitiría en el futuro hacer una resta entre el cuadrado y los objetos y así ajustar el color de éstos al color que hubiera de fondo.

Después sólo queda hacer algo que a lo que está acostumbrado: aplique color blanco al objeto resultante, cree el cuadrado, aplique el color con la herramienta Seleccionar colores medios de la imagen, haga la alineación correctamente y agrupe.

MÉTODO 2

El método anterior es completamente correcto pero vamos a ver un nuevo método para poder estudiar conceptos nuevos. Yo, personalmente, optaría antes por este método.

Saque a escena un triángulo con su lado inferior correctamente horizontal (CONTROL pulsado) y ajuste las esquinas a la figura original.


39

Convierta el objeto en trazo y seleccione los dos nodos de abajo. En la barra de opciones encontrará un icono con un símbolo + que añadirá un nodo extra justo en el medio entre los dos nodos seleccionados.


40

Ahora puede seleccionar ese nodo y desplazarlo en la vertical hasta su lugar adecuado. A partir de ahí se continuaría con el mismo procedimiento descrito más arriba.

También podría haber añadido este nodo a ojo haciendo doble clic en el lugar que quisiera ponerlo y después hacer los ajustes necesarios. Pero se trata de optimizar el trabajo, por eso yo optaría por el segundo método.


41

Ya vimos en prácticas anteriores las booleanas más comunes (Unión y Diferencia); en esta

ocasión vamos a abordar la resolución de un logotipo en el que la operación fundamental será la

División. Esta es la propuesta:

Antes de entrar de lleno a la resolución del logotipo vamos a detenernos a explicar cómo trabaja la

operación booleana División (y de paso, algún detalle sobre Cortar Trazo)

Como en todas las boolenas la figura que está situada más abajo es la que actúa como

dominante, es decir, será la que se quede en escena una vez realizada la operación. Para que la

booleana Trazo/División funcione correctamante las dos figuras deben ser entendidas por

Inkscape como figuras cerradas (o que se pueden cerrar)

• Si se trata de segmentos rectos, el segmento del corte debe tener al menos tres nodos:

57

PROYECTO BIG- CURSO DE INKSCAPE -EL BLOG DE JOACLINT ISTGUD

• Si el elemento de corte es curvo, puede tener sólo dos nodos porque Inkscape podrá cerrar

la figura internamente (en el ejemplo se ha dado relleno al elemento de corte para

demostrar cómo Inkscape puede considerarlo un objeto cerrado, aunque entenderá que el

último segmento no existe y no lo queremos usar en la operación)

• Si el elemento que va a ser dividido no está cerrado Inkscape no sólo lo cerrará sino que

además creará los segmentos necesarios para ello.

En este caso es muy probable que lo que se esperaba era cortar el trazo sin semejantes

consecuencias. Precisamente para eso existe la opción Trazo/Cortar trazo. Funciona

exactamente igual que la división pero no cierra la figura. En esta operación desaparece el

relleno de la figura en el caso de que la tuviera (cuidado al realizar esta operación en una

figura sin color de trazo porque puede dar la sensación de que desaparece de escena)

58


Una de las mejores opciones y que no da lugar a ningún tipo de duda es usar dos formas cerradas

como en el caso que sigue:

Posiblemente ha sido una introducción un tanto larga para esta práctica pero creo conveniente

dejar claros estos conceptos ya que el recién llegado suele pensar que Inkscape "hace lo que

quiere" cuando estamos haciendo este tipo de operaciones. Un dominio de los conceptos que se

aplican al utilizar estas operaciones garantiza un manejo fiable de la herramienta que tenemos

entre manos

Empecemos por tanto con nuestro logotipo en cuestión.


42

Está compuesto, aparentemente, por dos objetos pero un análisis más detallado debe llevarnos

rápidamente a la conclusión de que eso dependerá de si la parte blanca sobre el cuadrado es

blanca por definición o si es transparente y tomará el color del fondo. Nosotros aquí entenderemos

que esta zona deberá presentarse siempre como blanca independientemente del fondo. Para

Inkscape el logotipo estará formado por seis objetos: dos negros, tres blancos y uno verde.

Cuando se hagan las uniones necesarias estos seis objetos serán reducidos a tres.

El método para conseguir este logotipo conecta perfectamente con el de prácticas anteriores.

Comience por seleccionar la herramienta para crear curvas de bezier y líneas rectas y genere la

forma de la espiral con segmentos rectos. En la siguiente ilustración a la forma resultante se le ha

bajado la opacidad y se le ha eliminado el contorno.

59


Seleccione todos los nodos y conviértalos en curva, después seleccione los ocho centrales y

conviértalos en suavizados asimétricos. Aprovechando que tiene esos ocho nodos seleccionados

use el cuadro de Alineal y distribuir y asegurese de estén alineados en la misma vertical (aunque

no considero esto extrictamente necesario en este caso). Después es el momento de comenzar a

dibujar. Edite los tiradores hasta conseguir una geometria similar a la del modelo.

Es el momento de crear el rectángulo... Después duplíquelo, cámbiele el color (para poder

distinguir después cuál es el que tiene seleccionado) y mándelo al fondo. Recuerde que cuando

hagamos la operación de división el cuadrado va a desaparecer, pero lo necesitamos para el logo.

Por eso hay que duplicarlo ahora.

Seleccione el cuadrado de arriba y la forma espiral y realice la boolena Trazo/División (ya sabe

que en la parte inferior izquierda de la interfaz se le dan los datos sobre el color del relleno y del

borde del objeto seleccionado. Use esa información para saber cuál es el cuadrado que tiene

seleccionado para la booleana). El resultado...

60


Puede apreciarse el conjunto de objetos resultante en la espiral y cómo se conserva el cuadrado

que estaba duplicado abajo.

Es el momento de comenzar a hacer Trazo/Unión con los objetos que tienen iguales propiedades

de color (además de darles el color correspondiente). Para dar el color verde al cuadrado use el

cuentagotas para tomar la muestra de color del logotipo original.

Por último agrupe los tres objetos.


43

61

Documents

Teoría Inkscape 4 ESO