Tutorial de Inkscape

Programa de dibujo vectorial de cdigo abierto

Coleccin de aplicaciones gratuitas para contextos educativos

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Ministerio de Educacin

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 2

Prlogo

Este tutorial se enmarca dentro de los lineamientos del Plan Integral de Educacin Digital (PIED) del Ministerio de Educacin del Gobierno de la Ciudad Autnoma de Buenos Aires que busca integrar los procesos de enseanza y de aprendizaje de las instituciones educativas a la cultura digital. Uno de los objetivos del PIED es fomentar el conocimiento y la apropiacin crtica de las Tecnologas de la Informacin y de la Comunicacin (TIC) en la comunidad educativa y en la sociedad en general . Cada una de las aplicaciones que forman parte de este banco de recursos son herramientas que, utilizndolas de forma creativa, permiten aprender y jugar en entornos digitales. El juego es una poderosa fuente de motivacin para los alumnos y favorece la construccin del saber. Todas las aplicaciones son de uso libre y pueden descargarse gratuitamente de Internet e instalarse en cualquier computadora. De esta manera, se promueve la igualdad de oportunidades y posibilidades para que todos puedan acceder a herramientas que desarrollen la creatividad. En cada uno de los tutoriales se presentan consideraciones pedaggicas que funcionan como disparadores pero que no deben limitar a los usuarios a explorar y desarrollar sus propios usos educativos. La aplicacin de este tutorial no constituye por s misma una propuesta pedaggica. Su funcionalidad cobra sentido cuando se integra a una actividad. Cada docente o persona que quiera utilizar estos recursos podr construir su propio recorrido.

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape

ndice
Qu es?................................................................................................ Requerimientos tcnicos ..................................................................... Actividad propuesta ............................................................................. Nociones bsicas.................................................................................. p.5 p.5 p.6 p.7 p.7 p.7 p.7 p.14 p.14 p.15 p.15 p.17 p.18 p.19 p.20 p.21 p.23 p.24 p.25

Infografa................................................................................................
Diferencia entre imgenes vectoriales y mapas de bits.......................... Principales funcionalidades..................................................................... Instalar el programa. ................................................................................ Barra de herramientas.............................................................................

Paso a paso......................................................................................... Ejecutar el programa............................................................................ Modificar la orientacin del rea de trabajo...................................... Insertar una imagen de fondo. ........................................................... Organizar la informacin en capas.................................................... Crear rectngulos y cuadrados. ......................................................... Insertar un cuadro de texto................................................................. Aplicar un filtro...................................................................................... Utilizar conectores................................................................................ Alinear imgenes..................................................................................
Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape

Guardar la infografa............................................................................ Exportar la imagen............................................................................... Enlaces de inters..............................................................................

p.28 p.29 p.30

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 5

Qu es?

Inkscape es un programa de dibujo vectorial, es de cdigo abierto y trabaja con la extensin de archivo vectorial SGV. Es posible crear infografas, diagramas de flujo, organigramas, dibujos e interfaces para diferentes dispositivos digitales, ilustrar revistas y libros. Puede importar la mayora de formatos de imagen (JPG, PNG, GIF, etc.). URL para descargar el programa: http://inkscape.org/download/?lang=es

Requerimientos tcnicos
Disponible para los sistemas operativos Windows y GNU/Linux.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 6

Actividad propuesta

Idea: Que los alumnos construyan

en internet imgenes y textos relacionados.

3. Los alumnos crearn una

una infografa sobre el proceso de erupcin del volcn Puyehue.

Nivel educativo: Segundo ciclo de primaria y nivel medio. Materiales: Netbooks, Inkscape,

infografa utilizando el programa Inkscape, recursos paratextuales, imgenes y textos.

conexin a internet.

Desarrollo de la actividad: 1. El docente abordar el tpico 4. Se exportarn las imgenes

del proceso de erupcin del

reas: Plstica, Prcticas del lenguaje, Ciencias sociales, Ciencias naturales.

finales como PNG.

5. Las infografas obtenidas se

volcn Puyehue y las nociones bsicas sobre las infografas.

2. Se les propondr a los alumnos

subirn a las redes sociales y al blog escolar. que en pequeos grupos busquen

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 7

Nociones bsicas Infografa

La infografa es uno de los medios ms importantes que poseen los peridicos y las revistas para transmitir informacin clara y precisa, mediante textos, imgenes, mapas, grficos y todo tipo de conos.

Nociones bsicas Diferencias entre imgenes vectoriales y mapas de bits

Las imgenes vectoriales pueden ser modificadas en tamao sin afectar la calidad final de la misma. Estn formadas por vectores matemticos y a diferencia de los archivos de mapas de bits, un archivo vectorial de alta calidad suele ocupar poco espacio en disco. Una imagen de mapa de bits est compuesta por una serie de puntos (tambin llamados pxeles), que contienen informacin acerca del color. Las imgenes de alta calidad estn formadas por millones de pxeles y su tamao en disco es mucho mayor.

Nociones bsicas Principales funcionalidades

Crear imgenes vectoriales. Generar capas con diferentes imgenes. Crear dibujos. Importar imgenes, editarlas y exportarlas. Crear infografas.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 8

Nociones bsicas Instalar el programa

Luego de ingresar a la pgina http://inkscape.org/download/?lang=es elegir Descargas de Sourceforge.

Se abrir una nueva pgina en la que se deber elegir la carpeta Inkscape. A continuacin seleccionar la versin a descargar.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 9

A continuacin se abrir la ventana de descarga del programa.

Una vez descargado el archivo, seleccionar el cono para comenzar la instalacin.

En primer lugar elegir el idioma y presionar OK.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 10

Comenzar el asistente para la instalacin del programa. Seleccionar Siguiente>.

La prxima ventana mostrar las condiciones de licencia del programa. Luego de leerlas, presionar Siguiente>.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 11

A continuacin, tildar o destildar los componentes a instalar. Presionar Siguiente>.

Indicar el lugar de instalacin. El programa, por defecto, define una ubicacin que puede ser modificada seleccionando Examinar Luego presionar Instalar para comenzar la instalacin.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 12

Una vez finalizada la instalacin, presionar Siguiente>.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 13

Una vez finalizados los pasos del asistente, presionar Terminar.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 14

Nociones bsicas Instalar el programa

1 3 2 4

1. Barras de herramientas 2. Caja de herramientas lateral 3. Regla 4. Espacio de trabajo 5. Paleta de colores

Nociones bsicas Barra de herramientas

5 6

10 11

12

13

14

15

16

17

18

19

20

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 15

1 Nuevo 2 Abrir 3 Guardar 4 Imprimir 5 Importar 6 Exportar 7 Deshacer 8 Rehacer 9 Copiar

10 11

Cortar Pegar a la ventana Duplicar objetos seleccionados Crear clones Cortar clones Desagrupar Editor de colores Editor de textos y distribuir

12 Ajustes 13 14 15

16 Agrupar 17 18 19

20 Alinear

Paso a paso Ejecutar el programa

El programa se abre desde el men Inicio Todos los programas Graficacin y diseo Inkscape_diseo grfico vectorial.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 16

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 17

Paso a paso Modificar la orientacin del rea de trabajo

La infografa puede realizarse en formato vertical u horizontal. Para trabajar con diseo horizontal: a. Seleccionar del men Archivo Propiedades del documento. b. En la solapa Pgina elegir Orientacin: Horizontal. c. Cerrar la ventana emergente desde el cono Cerrar.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 18

Paso a paso Insertar una imagen de fondo

Para insertar imagen de fondo: a. Seleccionar del men Archivo Importar... b. En la ventana seleccionar el archivo a importar, buscar la imagen que se tiene guardada y seleccionar Abrir. c. Se abrir un nuevo cuadro. Seleccionar Incrustar y Aceptar.

d. Arrastrando desde el interior la imagen, es posible moverla hasta ubicarla en el centro.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 19

Paso a paso Organizar la informacin en capas

En primer lugar, ir al men Capa y seleccionar la opcin Capas a. Presionar dos veces la Capa 1 y cambiar el nombre a Mapa . b. Seleccionar el candado abierto para bloquear la capa.

c.

b.

a.

c. Seleccionar Crear una nueva capa desde el cono con el signo ms. Escribir Referencias en Nombre de la Capa, y elegir la opcin Posicin: Encima de la actual. Finalizar presionando Aadir.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 20

Paso a paso Crear rectngulos y cuadrados

A continuacin, crear otra capa debajo de todas las anteriores. Colocar un rectngulo de color para el fondo. a. Con la herramienta Crear rectngulos y cuadrados presionar en la esquina superior izquierda del documento y arrastrar hasta la esquina inferior derecha. Quedar conformada la figura.

b. Elegir un color en la Paleta de colores.

c. Para ms opciones se abre una ventana a la derecha con opciones de trazo y relleno. Se puede abrir presionando Maysculas +Ctrl + F.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 21

Imagen de ejemplo: Mapa con rectngulo de color de fondo.

Paso a paso Insertar un cuadro de texto

Crear una nueva capa sobre las anteriores y nombrarla Texto. Agregarle un rectngulo con borde negro y relleno de color claro. Utilizar la opcin Crear y editar objetos de texto para crear un cuadro de texto. Seleccionar el extremo superior izquierdo del rectngulo de fondo y arrastrar hasta la esquina inferior derecha del mismo. Luego, escribir el texto de referencia. En la barra de herramientas superior modificar el tipo de letra a Arial y cambiar el tamao a 18.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 22

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 23

Paso a paso Aplicar un filtro

Agregar el filtro Sombra paralela desde el men Filtros Sombras y Brillos Sombra Paralela... En el cuadro Sombra paralela elegir: Radio de desenfoque: 2px; Opacidad: 50%; Desvo Horizontal: 8px; Desvo Vertical: 8px. Seleccionar Aplicar y luego Cerrar.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 24

Imagen de ejemplo: con cuadro de texto y efecto de sombra paralela aplicado al rectngulo de fondo.

Paso a paso Utilizar conectores

Crear un rectngulo para cada una de las referencias (Volcn Puyehue, Villa La Angostura, Bariloche). Agregar el filtro de sombra paralela utilizado anteriormente y crear un cuadro de texto en cada uno, con el correspondiente texto. Seleccionar el Conector de la barra de herramientas lateral. Se encuentra ubicado en el ltimo lugar de la barra. Seleccionar la flecha inferior para ver todas las opciones de herramientas.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 25

Presionar en el mapa y arrastrar hasta el rectngulo de referencia. Cambiar el ancho de trazo a 4px.

Paso a paso Alinear imgenes

Estas son las capas creadas para organizar mejor la infografa. La figura del ojo cambia el estado de la capa de visible a invisible (abierto es visible, cerrado invisible). El candado bloquea las capas para poder trabajar solo en la capa en la cual estamos interesados. a. Seleccionar la capa Fotos. b. Ir al men Archivo Importar y buscar la imagen correspondiente.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 26

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 27

c. Con la herramienta de seleccin ubicar la foto a la derecha del cuadro de texto. d. Repetir el procedimiento para ubicar una segunda foto debajo de la primera. e. Modificar el tamao de las imgenes. Utilizar los controles o flechas del contorno de la imagen, presionando la tecla Ctrl para no deformarla. f. Alinear a la izquierda: Seleccionar una imagen y utilizando la tecla que activa las maysculas (Bloq Mays) presionar en la segunda imagen a alinear. En el men Objeto elegir Alinear y Distribuir. Seleccionar Alinear lados izquierdos.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 28

g. Para finalizar la actividad, agregar un filtro de sombra paralela, explicado anteriormente. h. Elegir la capa pie de fotos y bloquear las otras capas. i. Seleccionar el cuadro de texto y escribir el pie de cada foto.

Paso a paso Guardar la infografa

Los diseos se crearn en formato .svg (scalable vector graphic) y el programa guardar toda la informacin relativa a los distintos objetos que lo componen. Tambin permite guardar en formato .png y .pdf, entre otros. En el men Archivo elegir Guardar como Colocarle un nombre al trabajo, determinar la carpeta en donde se desea guardar el archivo y presionar Save.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 29

Paso a paso Exportar la imagen

Una vez finalizado el diseo, se puede exportar en un formato de mapa de bits .png, que permite guardar las zonas no dibujadas como transparentes. Para exportar, en el men Archivo elegir Exportar mapa de bits... Se abrir un cuadro de dilogo en el que se elegir Examinar para buscar la carpeta donde se guardar. Elegir la extensin .png. Luego seleccionar Exportar.

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

Inkscape | pg. 30

Enlaces de inters

Tutorial bsico, sitio oficial http://inkscape.org/doc/basic/tutorial-basic.es.html Logo a logo. Proyecto Big - Curso de Inkscape - Blog de Joaclint Istgud http://joaclintistgud.files.wordpress.com/2008/05/logo_a_logo.pdf La infografa, un instrumento para el anlisis Universidad de Huelva http://www.uhu.es/cine.educacion/periodico/12infografiaperiodico.htm Directorio de infografas escolares (estticas) Aula de El Mundo http://aula2.elmundo.es/aula/laminas.html

ndice

Plan Integral de Educacin Digital Direccin Operativa de Incorporacin de Tecnologas (InTec)

Coleccin de aplicaciones gratuitas para contextos educativos

IncSkape | pg. 31

www.educacion.buenosaires.gob.ar Contacto: asistencia.pedagogica.digital@bue.edu.ar

Esta obra se encuentra bajo una Licencia Attribution-NonCommercial-ShareAlike 2.5 Argentina de Creative Commons. Para ms informacin visite http://creativecommons.org/licenses/by-nc-sa/2.5/ar/

Ministerio de Educacin