4ﾂｺ ESO
INKSCAPE EDITOR DE GRﾃ：ICOS VECTORIALES
Curso 09 - 10
Colegio San Antonio - Carcaixent
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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 control de herramienta. Contiene iconos que cambian según la herramienta seleccionada. Barra de herramientas. Contiene iconos con todos los útiles de dibujo Área de dibujo o lienzo. Paleta de colores. 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.
2
C
O L
·
L E G I
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.
3
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
Las líneas no tienen relleno, solo tienen color de trazo.
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
4
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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 Herramienta aparece: Ancho
Alto
de la barra de Herramientas, en la barra de controles de
Redondear esquinas
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).
5
Unidades Afilar esquinas
C
Práctica # 2
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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: Grados desde la Arco con Arco sin horizontal al punto radios radios Cerrar Grados desde la final del arco círculo horizontal al punto inicial del arco
Arco con radios
6
Arco sin radios
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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 (*), a continuación, haz clic y arrastra el ratón. Crea polígonos
Crea estrellas
de la barra de Herramientas, o bien, pulsa asterisco
Número de lados (polígono) o puntas (estrella)
7
Solo activo para estrella
Para obtener complicadas e impredecibles formas
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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
8
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
Espirales Para crear Polígonos y estrellas haz clic sobre el botón continuación, haz clic y arrastra el ratón.
de la barra de Herramientas, o bien, pulsa F9, a
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.
9
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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 continuación, haz clic y arrastra el ratón.
de la barra de Herramientas, o bien, pulsa shift+F4, a
El relleno y borde se edita haciendo clic en el botón, menús).
Práctica # 6
, de la barra ce comandos (debajo de la barra de
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
10
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
Escalar
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.
11
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
• 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).
Rotar
• Inclinar tirando de los controladores centrales. Si mantienes pulsado Ctrl se restringen las inclinaciones a pasos de 15 grados.
Inclinar
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á.
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.
12
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
13
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
14
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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
15
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
16
C
Práctica # 8
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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
17
C
Práctica # 9
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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°.
18
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
19
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
20
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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 29.- Cierra el documento y guarda los cambios con el nombre: inkscape10.svg
21
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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, tener cuidado de pinchar sobre la parte escrita:
, y pinchando en él, pero hay que
Si se selecciona el texto
No se selecciona el texto, sino, lo que hay debajo
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.
22
C
•
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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:
EN UN LUGAR DE LA MANCHA
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. 4.- Cierra el documento y guarda los cambios con el nombre: inkscape10.svg
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. 3.- Seleccionamos los dos objetos: 4.- Se va al menú Texto / Poner en trayecto y, obtenemos lo siguiente:
23
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
De la misma forma he hecho los siguientes ejemplos:
Este, con dos espirales
Este, siguiendo los radios del polígono.
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 3.- Seleccionamos los dos objetos:
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.
24
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
25
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
26
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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
6.-
Cierra el documento y guarda los cambios con el nombre: inkscape15.svg
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.
27
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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-
28
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
• 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...
29
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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:
30
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
31
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
32
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
Si Inkscape no le muestra los tiradores asegúrese de tener activado este botón del menú de opciones
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:
33
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
34
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
• 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
35
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
36
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
37
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
38
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
39
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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.
40
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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 PROYECTO BIG- CURSO DE INKSCAPE -EL BLOG DE JOACLINT ISTGUD 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.
41
C
O L
·
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O
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 PROYECTO BIG- CURSO DE INKSCAPE -EL BLOG DE JOACLINT ISTGUD 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 PROYECTO BIG- CURSO DE INKSCAPE -EL BLOG DE JOACLINT ISTGUD 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.
42
C
61
43
O L
路
L E G I
S
A N
A
D E P A D U A Franciscans Carcaixent
N T O N I O