Diseño Vectorial Inkscape
Transcripción
Diseño Vectorial Inkscape
Diseño Vectorial Inkscape Carlos Zepeda Chehaibar Diseño Vectorial Inkscape Libro del Profesor Autor: Carlos Zepeda Chehaibar Apoyo en Desarrollo y Actividades: Fausto Armando Dalla Chiara Sañudo César Carranza Contreras ISBN 978-607-727-012-6 Primera Edición Coordinación Editorial: Alejandro Flores Ledesma Diseño Editorial: César Carranza Contreras Corrección de Estilo: Jennifer P. Castillo Ascencio Ilustración de Portada: Marco Antonio Solís Ilustración de Interiores: Judith Lourdes Sierra Pérez Miriam Tatiana Zamora Gutiérrez César Carranza Contreras Editado por Grupo Educare, S.A. de C.V. Cerro de Mesontepec #83 Colonia Colinas del Cimatario Querétaro, Querétaro C.P. 76090 DERECHOS RESERVADOS © 2014 MMXIII por Grupo Educare, S. A. de C. V. Esta es una obra protegida por las leyes internacionales de derechos de autor. Prohibida la reproducción total o parcial de esta obra y/o los recursos que la acompañan, por cualquier medio, sin autorización escrita de Grupo Educare, S. A. de C. V. Grupo Educare, el logotipo de Grupo Educare, el logotipo del Programa de Informática y Tecnología, son propiedad de Grupo Educare, S. A. de C. V. El diseño editorial y contenidos gráficos son propiedad exclusiva de Grupo Educare, S.A. de C.V. Todos los nombres de empresas, productos, direcciones y nombres propios contenidos en esta obra, forman parte de ejemplos ficticios, a menos que se indique lo contrario. Las citas, imágenes y videogramas utilizados en esta obra se utilizan únicamente con fines didácticos y para la crítica e investigación científica o artística, por lo que el autor y Grupo Educare, S. A. de C. V. no asumen ninguna responsabilidad por el uso que se dé a esta información, ni infringen derecho de marca alguno, en conformidad al Artículo 148 de la Ley Federal del Derecho de Autor. Microsoft Office, MS DOS, MS Windows, Word, PowerPoint, Excel, FrontPage y Access y sus logotipos son marcas comerciales de Microsoft Corporation. Microsoft y el logo de Microsoft Office son marcas registradas de Microsoft Corporation en los Estados Unidos y/o en otros países. Microsoft no patrocina, endosa o aprueba esta obra. Flash, Illustrator, Fireworks, Freehand, Dreamweaver, Photoshop y sus logotipos son marcas registradas de Adobe Inc. Adobe no patrocina o endosa esta obra. Contenido Diseño Vectorial Inkscape Propuesta Pedagógica Unidad 1 Introducción a Inkscape A Introducción e historia Descarga e Instalación tema I 9 10 10 Video 1-01 Instalación10 B Imágenes Vectoriales Ventajas de los Vectores Desventajas de los Vectores Formatos de archivo tema C Imágenes de mapa de bits tema Lámina 1-01 Vectores vs. Bitmaps 11 11 12 12 13 13 D Descripción del espacio de trabajo Área de documento 14 15 Video 1-02 Descripción del espacio de trabajo Actividad 1-01 Identificando el espacio de trabajo 15 16 tema E Documentos17 Abrir archivos en Inkscape 17 tema Video 1-03 Propiedades de documento Propiedades de documento tema F Opciones de visualización Visualización de gráfico Visualización dentro de la interfaz Modos de visualización Video 1-04 Opciones de Visualización Evaluación 01 18 18 19 19 21 21 21 22 Unidad 2 Herramientas23 A Herramientas24 Herramienta Selector 24 Estos comandos también se pueden aplicar desde el menú Edición.25 Transformaciones con la herramienta Selector 26 tema Video 2-01 Herramientas de Selección Video 2-02 Transformaciones con la herramienta Selector 26 26 Contenido Herramientas para crear formas geométricas 27 Video 2-03 Formas geomértricas 28 Estilo Activo 29 Video 2-04 Color de borde y relleno Proyecto 2-01 Dibujando figuras simples para un diseño 29 29 Herramienta Crear y editar objetos de texto 30 Video 2-05 Crear y editar objetos de texto 30 Herramientas para crear trazos Herramienta editar nodos de trazo o tiradores de control 31 32 Video 2-06 Herramientas de lápiz y pluma Video 2-07 Editar líneas Béizier Proyecto 2-02 Agitador de conciencia social Proyecto 2-03 Haciendo una caja de regalo (Parte 1) 32 33 34 36 Herramientas de Pintura 37 Video 2-08 Herramientas de pintura 37 Otras herramientas 38 Video 2-09 Clonación de objetos Proyecto 2-04 Haciendo una caja de regalo (Parte 2) Evaluación 02 38 38 40 Unidad 3 Cuadros de diálogo 41 A Capas42 Manejo de Capas 42 tema Video 3-01 Capas43 Actividad 3-01 Recordando capas 44 Actividad 3-02 Capas reales 45 Proyecto 3-01 Usando capas para organizar una ilustración 46 B Alinear, distribuir y transformar objetos 47 Alinear y distribuir 47 Transformación49 tema Video 3-02 Alinear, distribuir y transformar objetos 50 Máscara de recorte 51 Video 3-03 Máscaras de recorte Proyecto 3-02 Ejercicio de recorte de imagen 51 52 tema C Agrupar y desagrupar objetos Actividad 3-03 Agrupar y desagrupar Evaluación 03 53 53 54 Contenido Unidad 4 Color55 A Color56 La Psicología del color 56 tema Lámina 4-01 Color57 Actividad 4-01 Comprendiendo el color 58 Clasificación del color 59 Actividad 4-02 El color, la luz y el ojo 59 El Círculo Cromático 61 Actividad 4-03 Diagramas de color Proyecto 4-01 Creando un mural Actividad 4-04 Campaña publicitaria de un producto alimenticio 62 63 64 Paleta de colores Muestras Personalizadas 65 65 Video 4-01 Paleta de color y cuadro de diálogo Muestras Evaluación 04 65 66 Unidad 5 Mejorando diseños 67 A Bordes y Rellenos creativos 68 Estilo de trazo 68 Degradados69 tema Video 5-01 Opciones de trazo Video 5-02 Controles de la herramienta degradado Proyecto 5-01 Papelería de identificación personal tema 69 69 70 B Logotipos71 Lámina 5-01 Logotipos71 Actividad 5-01 Analizando logotipos 71 Proyecto 5-02 Creando un logotipo 73 C Transparencias74 Opacidad74 Máscara de opacidad 74 tema Proyecto 5-03 Degradado transparente en fotografiás 75 Modos de mezcla 76 Proyecto 5-04 Conociendo los modos de mezcla 77 tema D Operaciones de trazos Video 5-03 Operaciones de trazo Proyecto 5-05 Combinación de objetos para crear formas compuestas tema E Filtros y extensiones 78 79 79 80 Contenido Lámina 5-02 Filtros80 Video 5-04 Aplicación de filtros 80 Video 5-05 Extensiones81 Proyecto 5-06 Trabajando con Filtros 81 Evaluación 05 82 Unidad 6 Elementos de dibujo vectorial tema A Los elementos del dibujo vectorial Lámina 6-01 Elementos del dibujo vectorial Actividad 6-01 Técnica de puntillismo y línea Actividad 6-02 Los elementos del diseño gráfico tema B El Espacio Proyecto 6-01 Composición artística libre Actividad 6-03 Reflexión sobre perspectiva Proyecto 6-02 Generando perspectiva Proyecto 6-03 Ilustrando una fotografía Proyecto 6-04 Ilustrando paisajes 83 84 84 85 85 87 88 89 89 90 91 C Organización del texto Creación de contornos Texto en un trazado Fluir texto en un marco 92 92 92 93 Video 6-01 Trabajo con texto Proyecto 6-05 Experimentando con texto Proyecto 6-06 Página interna de una revista 93 93 94 tema tema D Salida de archivos Evaluación 06 95 96 Recursos Material Impreso Este material forma parte de un conjunto de recursos, que conforman el Programa de Informática Educativa (PIE). Está organizado en bloques integrales que incluyen todo lo necesario para aprender, practicar y evaluar habilidades o competencias. Las explicaciones, imágenes, tablas, actividades, notas y tips, apoyados con las láminas y tutoriales, permiten integrar la experiencia de aprendizaje desde múltiples perspectivas. Así, podemos afirmar que el PIE de Grupo Educare es la mejor manera de aprender haciendo. Recursos Digitales Los recursos digitales que acompañan al material impreso, contienen videos que te ayudarán a comprender los conceptos y a poner en práctica las habilidades adquiridas. Adicionalmente encontrarás los archivos que se requieren para realizar las actividades, algunos documentos y aplicaciones útiles. No olvides que los recursos digitales son parte integral del programa, por lo que es muy importante que los conozcas y utilices en el curso. Explicación Iconográfica Actividad Este icono nos indica un ejercicio que refuerza la parte teórica de este material. Proyecto Este icono nos indica un ejercicio que refuerza de manera práctica. Video Es el material digital de los recursos del programa. La representación en video de la parte teórica. Lámina de apoyo La lámina es un recurso del profesor, que sirve como refuerzo dinámico e interactivo a un tema denso, que complementa la teoría del material impreso. Evaluación Este icono indica un elemento fundamental del proceso educativo que sirve para valorar el proceso de aprendizaje. NOTA Nota Las notas que verás dentro de tu texto, puntualizan la teoría o los aspectos más importantes de un tema. Tip Es una sugerencia que complementa un tema del material impreso, dando un panorama más amplio al alumno sobre cómo ejecutar una actividad de manera más sencilla y práctica. Las propuestas didácticas son flexibles, adaptables a la forma personal de trabajo del maestro y necesidades específicas de cada clase maximizando así el empleo de los recursos disponibles. P ropuesta Did áctica NIVEL: Básico DURACIÓN SUGERIDA: 24 SESIONES / 45-50 MINUTOS Este libro lo integran las siguientes Unidades: Unidad 01 Introducción a Inkscape Unidad 02 Herramientas Unidad 03 Cuadros de diálogo Unidad 04 Color Unidad 05 Mejorando diseños Unidad 06 Elementos del dibujo vectorial Diseño Vectorial Inkscape Autor: Carlos Zepeda Chehaibar Diseño Vectorial Inkscape Unidad Tema Subtema tema A Introducción e historia Descarga e Instalación Identificar a Inkscape como programa dedicado a la edición de gráficos vectoriales y el proceso de instalación. tema B Imágenes vectoriales Ventajas de los vectores Desventajas de los vectores Formatos de archivo Conocer las características de las imágenes vectoriales. tema C Imágenes de Mapa de bits Conocer los bitmaps y las diferencias que existen con las imágenes vectoriales. tema D Descripción del Espacio de trabajo Área de documento Conocer el espacio de trabajo, definiendo los elementos que lo componen, para utilizarlos de manera eficiente y facilitar el trabajo con Inkscape. Tema E Documentos Abrir archivos en Inkscape Propiedades de documento Conocer las diferentes maneras para abrir un archivo, cómo importar imágenes y la creación de un documento nuevo. Tema F Opciones de visuallización Visualización de gráfico Visualización dentro de la interfaz Modos de visualización Listar las herramientas capaces de modificar el aspecto visual de los objetos en la pantalla. Unidad 1 Introducción a Inkscape Sesiones sugeridas 4 II Objetivos Propuesta Didáctica Competencias Actividades sugeridas para el alumno A reconocer a Inkscape como editor de gráficos vectoriales de uso libre y la forma de instalarlo. Tutorial Sugerido Recursos Video 1-01 Instalación Que al escalar las imágenes vectoriales no pierden calidad a diferencia y están formadas por curvas de bezier. Diferenciar las imágenes de mapa de bits de las imágenes vectoriales, conociendo sus principales características. A reconocer las áreas que conforman el espacio de trabajo, obteniendo un flujo de trabajo eficiente al conocer a detalle las partes que lo conforman. Lámina 1-01 Vectores vs. Bitmaps Actividad 1-01 Identificando el espacio de trabajo A conocer las diferentes tipos de documentos compatibles con Inkscape y formas para abrir un archivo, importar imágenes, crear un archivo nuevo y modificar las propiedades de los documentos. Las diferentes opciones que posee Inkscape para cambiar el aspecto visual de la interfacse y la apariencia de los objetos. Video 1-02 Descripción del espacio de trabajo Video 1-03 Propiedades de documento Evaluación 01 Video 1-04 Opciones de visualización III Diseño Vectorial Inkscape Unidad Unidad 2 Herramientas Tema tema A Herramientas Sesiones sugeridas 5 Tema A Capas Unidad 3 Cuadros de diálogo Sesiones sugeridas 3 tema B Alinear, distribuir y transformar objetos tema C Agrupar y desagrupar objetos IV Subtema Objetivos Herramientas Selector Transformaciones con la herramienta Selector Herramientas para crear formas geométricas Estilo Activo Herramienta Crear y editar objetos de texto Herramientas para crear trazos Herramienta Editor nodos de trazo o tiradores de control Herramientas de pintura Otras herramientas Identificar las principales herramientas que comprenden la Caja de Herramientas, así como el complemento de las herramientas con la barra Controles de Herramienta, describiendo su uso para realizar una ilustración, diseño, etc., así como conocer los atajos del teclado que harán el flujo de trabajo más rápido, fácil y eficiente. Manejo de capas Utilizar capas para organizar elementos en la pizarra, para tener un proyecto más organizado. Alinear y distribuir Transformación Máscara de recorte Aplicar las funciones: transformar, alinear y distribuir, en varios objetos mejorando la composición de un proyecto. Conocer las opciones para agrupar y desagrupar objetos. Propuesta Didáctica Actividades sugeridas para el alumno Tutorial Sugerido A identificar cada una de las herramientas de la Caja de herramientas, conociendo su uso y la manera de acceder a ellas de forma rápida con el teclado. Proyecto 2-01 Dibujando figuras simples para un diseño Proyecto 2-02 Agitador de conciencia social Proyecto 2-03 Haciendo una caja de regalo (Parte 1) Proyecto 2-04 Haciendo una caja de regalo (Parte 2) Evaluación 02 Video 2-01 Herramientas de Selección Video 2-02 Transformaciones con la herramienta Selector Video 2-03 Formas geométricas Video 2-04 Color de borde y relleno Video 2-05 Crear y editar objetos de texto Video 2-06 Herramientas de lápiz y pluma Video 2-07 Editar líneas Bézier Video 2-08 Herramientas de pintura Video 2-09 Clonación de objetos A identificar las Capas, sus características y cómo se pueden acomodar para facilitar el trabajo. Actividad 3-01 Recordando Capas Actividad 3-02 Capas reales Proyecto 3-01 Usando capas para organizar una ilustración Video 3-01 Capas A utilizar las opciones de los cuadros de diálogo: Transformar y Alinear y Distribuir con la finalidad de organizar los elementos que componen un dibujo en Inkscape. Proyecto 3-02 Ejercicio de recorte de imagen Video 3-02 Alinear, distribuir y transformar objetos Video 3-03 Máscaras de recorte Que mediante el comando de agrupar objetos es más sencillo el trabajo con varios objetos, tanto para desplazarlos, como para transformarlos. Actividad 3-03 Agrupar y desagrupar Evaluación 03 Competencias Recursos V Diseño Vectorial Inkscape Unidad Unidad 4 Color Tema tema A Color Sesiones sugeridas 3 Tema a Bordes y Rellenos creativos Subtema Objetivos La psicología del color Clasificación del color El círculo cromático Paleta de colores Muestras personalizadas Conocer los conceptos del color. Identificar cada una de las herramientas del cuadro de diálogo Relleno y Trazo, así como, ponerlos a la práctica en diferentes actividades y proyectos para reafirmar los conceptos aprendidos. Estilo de trazo Degradados Modificar la apariencia de un objeto mediante, el cambio de estilo de trazo y la aplicación de un degradado al relleno. Aplicar los conceptos aprendidos para la creación de un logotipo, utilizando las herramientas contenidas en esta unidad. tema B Logotipos Unidad 5 Mejorando diseños Sesiones sugeridas 5 tema C Transparencias tema D Operaciones de trazos VI Opacidad Máscara de opacidad Modos de mezcla Conocer el concepto de opacidad al efectuar cambios en parámetros de los cuadros de diálogo y aplicar modos de mezcla en composiciones. Comparar las opciones del menú Trazo, con funciones matemáticas para crear figuras complejas con objetos simples Propuesta Didáctica Competencias Actividades sugeridas para el alumno Tutorial Sugerido A conocer y comprender el concepto de color, su clasificación, psicología y su uso; a identificar herramientas que permiten modificar los parámetros de color de los objetos. Actividad 4-01 Conprendiendo el color Actividad 4-02 El color, la luz y el ojo Actividad 4-03 Diagramas de color Proyecto 4-01 Creando un mural con colores armónicos Actividad 4-04 Campaña publicitaria de un producto alimenticio Evaluación 04 Video 4-01 Paleta de color y cuadro de diálogo Muestras A identificar cada una de las herramientas de diferentes paneles y reforzando los conocimientos adquiridos a través de la realización de diferentes ejercicios. Proyecto 5-01 Papelería de identificación personal Video 5-01 Opciones de trazo Video 5-02 Controles de la herramienta degradado A crear un logotipo utilizando las herramientas de Inkscape en base a los conceptos de diseño adquiridos al desarrollar el tema. Actividad 5-01 Analizando logotipos Proyecto 5-02 Creando un logotipo La aplicación de transparencias y máscaras de opacidad. La integración de imágenes sobrepuestas por medio de los diferentes modos de mezcla. Proyecto 5-03 Degradado transparente en fotografías Proyecto 5-05 Conociendo los Modos de mezcla A realizar composiciónes de elementos empleando los comandos disponibles en el menú Trazo. Proyecto 5-05 Combinación de objetos para crear formas compuestas Recursos Lámina 4-01 Color Lámina 5-01 Logotipos Video 5-03 Operaciones de trazos VII Diseño Vectorial Inkscape Unidad Cont. Unidad 5 Tema Subtema tema E Filtros y estensiones Comprender cada uno de los efectos que maneja Inkscape para conocer cada uno y aplicarlo según el trabajo a realizar. tema A Los elementos del dibujo vectorial Comprender los elementos del dibujo vectorial aplicando conceptos como puntillismo, línea, ritmo, contorno y forma al crear composiciones. tema B El espacio Definir el concepto de espacio al analizar la relación que existe entre los objetos de un plano básico. Unidad 6 Elementos de dibujo vectorial Sesiones sugeridas 4 tema C Organización del texto tema D Salida de archivos VIII Objetivos Creación de contornos Texto en un trazado Fluir texto en un marco Utilizar herramientas para ajustar el texto a figuras geométricas o trazos. Identificar y describir los formatos en que pueden guardarse los archivos creados en Inkscape dependiendo el tipo de salida que tendrán. Propuesta Didáctica Competencias Actividades sugeridas para el alumno A aplicar cada uno de los efectos y las principales extensiones de Inkscape para conocer sus características y uso principal. Proyecto 5-06 Trabajando con filtros Evaluación 05 A reconocer los principales elementos que componen una ilustración vectorial para crear composición que integren estos elementos. Actividad 6-01 Técnica de puntillismo y línea Actividad 6-02 Los elementos del diseño gráfico A identificar la relación de los elementos con el plano y de los elementos entre sí. Proyecto 6-01 Composición artística libre Actividad 6-03 Reflexión sobre perspectiva Proyecto 6-02 Generando perspectiva Proyecto 6-03 Ilustrando una fotografía Proyecto 6-04 Illustrando paisajes Que existen tres tipos de fuentes, aplicar envolventes a texto para crear efectos en texto y que es posible acoplar texto en un trazo. Proyecto 6-05 Experimentando con texto Proyecto 6-06 Página Interna de una revista A identificar y describir los formatos en que se pueden guardar los archivos generados en Inkscape según el uso que se les dará al final. Evaluación 06 Tutorial Sugerido Video 5-04 Aplicación de filtros Video 5-05 Extensiones Recursos Lámina 5-02 Filtros Lámina 6-01 Los elementos del dibujo vectorial Video 6-01 Trabajo con texto IX Diseño Vectorial Inkscape Inventario de habilidades Este inventario se emplea para medir las habilidades de los alumnos que inician el curso. Esto no es una prueba, es un indicador que va del 1 al 5, dónde uno establece poco o nulo conocimiento del tema por parte del alumno y cinco que está completamente familiarizado con el mismo. Habilidad Reconocer diferencias entre mapa de bits y vector. Listar las caracteristicas de las imágenes vectoriales. Reconocer el espacio de trabajo de Inkscape. Abrir y guardar archivos en Inkscape. Diferenciar Color de Relleno y Color de Trazo. Transformar una seleccion. Crear capas. Modificar el tamaño de un objeto. Realizar operaciones con trazos. Utilizar las herramientas de alineación. Emplear clones en Inkscape. Agrupar y desabrupar objetos. Organizar texto en Inkscape. Optimizar archivos para la Web. Diferenciar los modos de color RGB y CMYK. Aplicar efectos en Inkscape. Configurar ajustes de los efectos. Aplicación de filtros a una fotografía. Utilizar máscara de opacidad. Crear composiciones con ritmo y forma. X 1 2 3 4 5 Inkscape es un programa de creación y manipulación vectorial de código abierto. Es posible utilizarlo también desde la línea de comandos. Los formatos nativos de inkscape para abrir o importar archivos son SVG, SVGZ (gzipped SVG). Con la ayuda de extensiones (plug in), Inkscape puede abrir un número más grande de formatos. Un id ad 01 NIVEL: Básico Introducción a In k scape DURACIÓN SUGERIDA: 4 SESIONES / 45-50 MINUTOS Durante el desarrollo de esta unidad aprenderás a: AIdentificar a Inkscape como programa dedicado a la edición de gráficos vectoriales y el proceso de instalación. B Conocer las características de las imágenes vectoriales. C Conocer los bitmaps y las diferencias que existen con las imágenes vectoriales. DConocer el espacio de trabajo, definiendo los elementos que lo componen, para utilizarlos de manera eficiente y facilitar el trabajo con Inkscape. E Conocer las diferentes maneras para abrir un archivo, cómo importar imágenes y la creación de un documento nuevo. F Listar las herramientas capaces de modificar el aspecto visual de los objetos en la pantalla. Diseño Vectorial Inkscape Autor: Carlos Zepeda Chehaibar Diseño Vectorial Inkscape tema A Introducción e historia La historia de Inkscape iniciá en el año 2003, con el objetivo de diseñar una aplicación que sea capaz de aprovechar al máximo las ventajas del estándar SVG. Inkscape es un editor de gráficos en formato vectorial SVG (Scalable Vector Graphics) de código abierto y multiplataforma. Las características soportadas incluyen: formas, trazos, texto, marcadores, clones, mezclas de canales alfa, transformaciones, gradientes, patrones y agrupamientos. También soporta metadatos Creative Commons, edición de nodos, capas, operaciones complejas con trazos, vectorización de archivos gráficos, texto en trazos, alineación de textos, edición de XML directo y mucho más. Actualmente, Inkscape es una aplicación de software de diseño gráfico que proporciona la libertad creativa que se necesita para materializar ideas de forma rápida y eficaz. Definiendo por muchos años el lenguaje gráfico contemporáneo mediante el dibujo vectorial. Las mentes más creativas en el mundo de las artes gráficas, utilizan Inkscape para pintar, trazar, reproducir y automatizar diseños de todo tipo. Además, gracias a la integración con otros programas, permite producir extraordinarios gráficos para formato impreso, video, Internet y dispositivos móviles. Imagen 1-1: Trazo realizado en Ilnkscape Descarga e Instalación Actualmente, el mayor obstáculo para el aprendizaje y aprovechamiento pleno de las tecnologías de información y comunicación es el alto costo del software especializado. Inkscape esta realizado bajo la licencia GNU (General Public License), que esta diseñada para asegurar que todos los usuarios puedan usar de manera gratuita los programas e incluso modificarlos y distribuirlos. Inkscape es una aplicación multiplataforma, esto quiere decir, que exiten paquetes de instalación para distintos sistemas operativos como Linux, Mac OS X® y Windows®. Para obtener la versión reciente de Inkscape ingresa a inkscape.org desde tu navegador. En la página principal, aparece la leyenda “Última versión estable:” da clic en el botón para abrir una página con la liga para descargarlo. 1-01 VIDEO 10 Instalación Introducción a Inkscape tema B Imágenes Vectoriales ¿Recuerdas que en las clases de física se estudian los vectores? En diseño gráfico, un vector está constituido por una serie de puntos y líneas, rectas o curvas, definidas matemáticamente. Las características de un vector son las siguientes: ¤¤ Tienen una línea de contorno (también llamado trazo) y un color de relleno. Las características del contorno y del relleno se pueden cambiar en cualquier momento. ¤¤ Los vectores se pueden agrupar, separar, recortar, intersectar y relacionar con otros vectores en el dibujo. ¤¤ Cada vector se manipula por separado del resto de los objetos. Se puede ordenar de cualquier manera y modificar sin afectar otros vectores. Para comprender mejor por qué se les llama vectores a estos objetos, primero recuerda que, en geometría, un punto del plano se puede definir por sus coordenadas y dos puntos cualesquiera se pueden unir mediante una línea recta. Si en lugar de unir dos puntos con una recta, se hace con una curva, los puntos se denominan nodos o puntos de anclaje. La forma de la curva (suave o pronunciada), se define por otros puntos invisibles en el dibujo llamados puntos de control, manejadores o manecillas. Cualquier forma abierta o cerrada como un polígono, rectángulo, elipse o una curva irregular, se basa en nodos y puntos de control. Para rellenar un gráfico vectorial, es necesario que los puntos estén unidos formando una línea cerrada. Los contornos o trazos pueden ser delgados o gruesos y tener una forma determinada. Esto permite crear dibujos lineales o creaciones artísticas con un contorno caligráfico. El elemento primordial del dibujo vectorial son las curvas de Bézier, utilizadas para crear líneas, arcos y figuras trigonométricas. Imagen 1-2: Ejemplo: ojo vectorizados Ventajas de los Vectores ¤¤ No importa el tamaño en el que se dibuje o despliegue un vector: siempre aparecerá con la misma nitidez y calidad al escalarlo (hacerlo más pequeño o más grande), tanto en la pantalla como en la impresión. ¤¤ Cada objeto está definido por fórmulas matemáticas independientes al resto de los demás. Puede escalarse, distorsionarse, cambiar de forma o resituarse sin afectar a los otros elementos del dibujo. ¤¤ Se puede controlar con gran precisión la forma, orientación y orden de los elementos. 11 Diseño Vectorial Inkscape ¤¤ Las imágenes vectoriales no están limitadas a un área rectangular como los mapas de bits. ¤¤ Cualquier cambio que se aplique a los objetos puede modificarse en cualquier momento: el dibujo siempre es editable. ¤¤ Se puede reutilizar un dibujo vectorial o parte de él en otros proyectos. ¤¤ El peso del archivo es muy reducido, dado que no se almacena información para definir cada punto de la pantalla. ¤¤ Permite trabajar con texto sin limitaciones. Desventajas de los Vectores ¤¤ Los gráficos vectoriales no pueden producir imágenes fotográficas realistas, ya que están hechos de áreas de color sólido o degradado y no pueden representar los tonos continuos de una fotografía. Por eso la mayoría de las imágenes vectoriales tienen una apariencia de caricatura. ¤¤ Los vectores son de aspecto frío, con un contorno o trazo perfecto, sin naturalidad. ¤¤ Un uso frecuente que se da a la conversión de mapas de bits a vectores, es la necesidad de publicarlos en web. Los formatos más comunes y aceptados para la imagen vectorial en web son el Shockwave® Flash® (SWF) y PNG. Imagen 1-3: Fotografía en mapa de bits Imagen 1-4: Imagen vectorizada Formatos de archivo Existen diferentes aplicaciones que trabajan con archivos de tipo vectorial, como Adobe® Illustrator®, Corel® Draw ®, Macromedia Freehand ® o Xara X ®. Aunque cada aplicación maneja sus formatos de archivo nativos, en general es posible abrir y modificar los gráficos creados en una aplicación, utilizando otra aplicación. Los formatos de archivo nativos “principales” reconocidos por otras aplicaciones son: ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ 12 Adobe® Illustrator® (AI) Corel® Draw® (CDR) Corel® Exchange® (CMX) Computer Graphics Metafile® (CGM) Auto CAD® (DXF) Introducción a Inkscape tema C Imágenes de mapa de bits Las imágenes de mapa de bits o bitmaps están compuestas por píxeles. Los píxeles son los elementos mínimos de imagen. Un mapa de bits es una cuadrícula de esos pequeños puntos individuales de color, que están ordenados de una forma determinada para definir un patrón y formar la imagen que observas en pantalla. Las imágenes bitmap dependen de la resolución, es decir, del número de píxeles que existen en un área determinada. La resolución se mide en dpi (dots per inch) o puntos por pulgada. Imagen 1-5: Acercamiento a imagen mapa de bits Debido a que los mapas de bits dependen de la resolución, es difícil incrementar o disminuir su tamaño sin reducir la calidad de la imagen. Cuando se hace más pequeña una imagen bitmap, se eliminan píxeles y cuando se hace más grande, se crean nuevos píxeles. Así, cuando se crean nuevos píxeles, el programa de edición que se esté utilizando, estima el valor del color de los nuevos píxeles basado en los ya existentes. El resultado siempre es una calidad reducida. Imagen 1-6: Imagen de mapa de bits Los bitmaps pueden modificarse con programas tales como: Microsoft® Paint®, Adobe® Photoshop®, Corel® Photo Paint®, Jasc Paint Shop Pro® y Unlead Photoimpact®. Imagen 1-7: Imagen en baja resolución Imagen 1-8: Imagen en alta resolución 1-01 LÁMINA Vectores vs. Bitmaps 13 Diseño Vectorial Inkscape tema D Descripción del espacio de trabajo Al iniciar Inkscape verás la siguiente ventana de trabajo. Los elementos que componen la pantalla de trabajo son los siguientes: 1 5 3 2 4 6 7 Imagen 1-9: Espacio de trabajo de Inkscape 1. Barra de menús: Integrada por un conjunto de menús desplegables que aloja comandos, herramientas u opciones, que se pueden aplicar o configurar al documento o programa. 2. Caja de Herramientas: Contiene las Herramientas para seleccionar, crear o modificar objetos. 3. Controles de Herramientas: Contiene cuadros de entrada, iconos y botones específicos de la herramienta seleccionada. 4. Barra de controles de ajuste: Contiene botones que permiten controlar los ajustes de colocación, permitiendo así, colocar objetos de forma precisa en la Pizarra. 5. Barra de Comandos: Contiene una colección de comandos de uso frecuente, permitiendo seleccionarlos sin necesidad de accesar a los menús. 6. Paleta de colores: Permite hacer una selección rápida de color. 7. Barra de estado: Esta barra nos proporciona información sobre, el estilo, la capa posición del cursor, indicador de nivel de zoom, etc. 14 Introducción a Inkscape Área de documento En Inkscape el área de trabajo de un documento ocupa todo el espacio dentro de la ventana de la aplicación. El área de trabajo se divide de la siguiente forma: a.Página: el área de imagen está delimitada por las líneas internas y es la sección de la página destinada a la impresión. Sólo lo que esté dentro de esta área saldrá en la impresión, aunque debes recordar que la mayoría de las impresoras no pueden imprimir tan cerca del borde del papel. b.Borde de la página: delimita la página, haciendo evidente el cambio de la Página a la Pízarra. c.Pizarra: es la parte que queda por fuera de la Página y que se extiende hasta el borde de la ventana. Representa un espacio donde se pueden crear, editar y almacenar elementos vectoriales antes de colocarlos en la Página. Los objetos colocados en el área de pruebas se verán en la pantalla pero no se imprimirán. d.Reglas: muestran los ejes de coordenadas x,y del dibujo. e.Barras de desplazamiento: permiten desplazar la Pizarra para controlar y ajustar la parte visible. b d c a e Imagen 1-10: Area de documento 1-02 VIDEO Descripción del espacio de trabajo 15 Diseño Vectorial Inkscape ACTIVIDAD 1-01 Identificando el espacio de trabajo 1. En equipos de 2 a 4 personas y en medio pliego de papel bond o cartulina, dibujen las áreas que conforman el entorno de trabajo de Inkscape. Utilicen colores, papeles de color, revistas, periódicos, plumones, textos de computadora o imágenes de Internet. Señalen cada parte del entorno de trabajo y anoten la función de cada una de ellas. ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ Barra de menús Barra de comandos Controles de herramienta Caja de herramientas Paleta de colores Barra de estado 2. Incluye en tu trabajo los siguientes elementos del área de documento: ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ Pizarra Página Borde de la página Reglas Barras de desplazamiento 3. Escribe “Espacio de trabajo” o “Área de documento” según corresponda en cada una de las siguientes afirmaciones. a.La Pizarra es la parte exterior de la Página que se extiende hasta el borde de la ventana. Área de documento b.El área de imagen es imprimible. Área de documento c.Los menús sirven para cambiar aspectos de los elementos del archivo. Espacio de trabajo d.La barra de estado proporciona información como el borde y color de relleno del objeto seleccionado. Espacio de trabajo 16 Introducción a Inkscape tema E Documentos Al ejecutar Inkscape automáticamente crea un documento nuevo Predeterminado, los parámetros correspondientes a este documento en blanco inicial se pueden cambiar modificando el archivo default.svg, ubicado en la ruta \share\templates del directorio donde se instaló la aplicación. Es posible agregar plantillas personalizadas si se guarda el documento en este directorio. Si deseas crear un nuevo archivo, selecciona la opción de menú Archivo/Nuevo y selecciona una de las plantillas de la lista o puedes emplear la combinación de teclas <Ctrl+N> para crear un documento nuevo Predeterminado. Imagen 1-11: Menu/Archivo/Nuevo Abrir archivos en Inkscape El formato nativo de Inkscape es SVG, aunque es posible abrir una amplia variedad de formatos tanto vectoriales como mapa de bits y manipularlos con Inkscape. Para abrir un archivo archivo existente, selecciona el menú Archivo/Abrir o la combinación de teclas <Ctrl+O> y en el cuadro de díalogo selecciona el archivo que quieres abrir. Si el archivo no aparece, selecciona la opción Mostrar todos los archivos en el menú emergente del tipo de archivo. Mediante menú Archivo/Abrir Reciente, permite abrir un archivo usado recientemente al seleccionarlo de la lista. Si ya estás trabajando en un documento y deseas incluir un archivo externo en él, puedes utilizar el menú Archivo/Importar. El cuadro de diálogo que se muestra es similar al de Abrir. 17 Diseño Vectorial Inkscape Propiedades de documento Si ya iniciaste tu proyecto en un documento con los parámetros preestablecidos y requieres modificar el tamaño de Página, puedes modificarla utilizando menú Archivo/Propiedades del documento o la combinación <Ctrl+Shift+D>. b a d c Imagen 1-12: Cuadro de diálogo “Propiedades de documento” En el cuadro de díalogo Propiedades de documento, en la pestaña Página, puedes especificar varios parámetros: a.Tamaño de Página: elige el formato que requieras, dependiendo del tamaño y la forma del documento que se va a realizar. Los formatos más comunes en el diseño impreso son el tamaño carta, el oficio y tabloide. En diseño Web el formato más utilizado es el de 800 x 600 píxeles (para páginas Web) y 480 x 60 píxeles (para banners). b.Unidades predeterminadas: puedes definir las medidas del documento en puntos (unidad utilizada en tipografía que equivale a 1/72 de pulgada), picas (equivale a 12 puntos), pulgadas, milímetros, centímetros o píxeles. c.Tamaño personalizado: si no deseas utilizar alguna de las plantillas que dispone Inkscape, puedes definir el ancho y alto del documento manualmente, antes de asignar las medidas personalizadas, asegúrate de seleccionar la unidad correspodiente. d.Orientación: las dos opciones que direccionan el documento en forma vertical u horizontal. 1-03 VIDEO 18 Propiedades de documento Introducción a Inkscape tema F Opciones de visualización La apariencia que presenta Inkscape se puede modificar de diferentes maneras. Ésta se divide en dos categorías: por los cambios que afectan a la forma en que se visualizan los gráficos y por los cambios que afectan al aspecto de la interfaz del programa. Visualización de gráfico En Inkscape, los gráficos se pueden visualizar de formas distintas. Se puede modificar la vista que ofrece el dibujo desplazando la pizarra y por medio de zoom, ampliando o reduciendo la vista de la misma. Estos son algunos métodos para desplazarnos en la pizarra. Atajo Descripción Ctrl B + Barras de desplazamiento El método más sencillo para desplazarse vertical y horizontalmente dentro de la pizarra Clic + Rueda del ratón Aumenta por defecto la sección de la pizarra, es decir nos acerca al gráfico Mayús + Rueda del ratón Permite el desplazamiento vertical hacia arriba y hacia abajo Clic sostenido + Botón del ratón Nos desplaza dentro de la pizarra. Con un ratón de sólo dos botones, hay que usar la combinación Mayús + Arrastrar con el Botón Derecho del Ratón o Ctrl + Arrastrar con el Botón Derecho del Ratón Ctrl + Flechas Se desplaza hacia arriba y hacia abajo Barra espaciadora + Arrastrar con el botón izquierdo del ratón Permite desplazar la pizarra si la casilla El botón izquierdo del ratón agarra cuando se pulsa Espacio está marcada en la sección Desplazamiento del cuadro de diálogo Preferencias de Inkscape. Cuando esta opción está activada, desaparece la función de la Barra espaciadora para intercambiar la herramienta activa. +ó= Aumenta el zoom - Reduce el zoom Ctrl + Clic con el botón central del ratón ó Clic + Clic con el botón derecho del ratón Aumenta el zoom Mayús + Clic con el botón central del ratón ó Mayús + Clic con el botón derecho del ratón Reduce el zoom Mayús + Arrastre con el botón central del ratón Aumenta el zoom sobre el área encerrada por la goma elástica. Ctrl + Rueda del ratón También aumenta o disminuye el zoom. Este método es muy cómodo y la posición del cursor determina el centro del cambio del zoom. 19 Diseño Vectorial Inkscape Atajo Descripción Barra de estado Esta es la mejor opción para fijar con precisión un nivel de zoom determinado. La sección tiene una casilla para especificar el nivel del zoom y se puede activar por medio del atajo de teclado Alt+Z. F3 (Herramienta Zoom) Para aumentar el zoom hay que aplicar la herramienta y si se quiere reducir el zoom hay que hacer clic manteniendo la Tecla Mayús pulsada o hacer clic con el Botón derecho del ratón (Q por quick, rápido en inglés) Aplica temporalmente un zoom sobre los objetos que están seleccionados en ese momento. Al dejar de pulsar esta tecla, se recupera el nivel de zoom anterior Q Los Controles de la Herramienta Zoom son las mismas incluidas dentro del menú Ver/Zoom. Cuando la herramienta está seleccionada, la barra Controles de Herramienta se activa para mostrar las opciones del zoom. Botón Función Aumenta el nivel zoom. Disminuye el nivel zoom. Aplica un zoom 1:1 (el 100% del tamaño del dibujo, un píxel del dibujo equivale a un píxel de la pantalla). Aplica un zoom 1:2 (50% del tamaño del dibujo). Aplica un zoom 2:1 (200% del tamaño del dibujo). Aplica un nivel de zoom con el cual los objetos seleccionados se ajustan a la ventana. Aplica un nivel de zoom con el cual todo el dibujo se ajusta a la ventana (el área visualizada incluye todos los objetos dibujados, pudiendo ser mayor o menor que el tamaño de la página). Aplica un nivel de zoom con el cual toda la página se ajusta a la ventana. Aplica un nivel de zoom con el cual la anchura de la página se ajusta a la ventana. Aplica el nuevo zoom con el nivel anteriormente utilizado (dentro del historial de niveles de zoom aplicados). El historial de niveles de zoom aplicados se guarda en una lista. Aplica el nuevo zoom con el nivel siguiente dentro del historial de niveles de zoom utilizados. Lógicamente, esta opción solamente funciona si el nivel actual del zoom es uno anterior dentro del historial de niveles. 20 Introducción a Inkscape Visualización dentro de la interfaz Así mismo, es posible hacer que la ventana de Inkscape ocupe toda la pantalla o que se puedan tener visibles múltiples vistas de una misma pizarra. La zona de la pizarra visible se puede cambiar de las siguientes formas: ¤¤ Mostrar/Ocultar: Este submenú se utiliza para activar y desactivar diferentes elementos de la interfaz gráfica de usuario, incluida la Paleta de colores. La combinación de teclas <Mayús+F11> permite ocultar o mostrar a la vez todos los elementos de la interfaz gráfica de usuario, incluida la barra principal de menús. ¤¤ Mostrar/Ocultar Cuadros de Diálogo: Los cuadros de diálogo se puedan ocultar y mostrar cuando presionamos <F12> o bien por medio del menú Ver/Mostrar/ ocultar diálogos. Modos de visualización La combinación de teclas <Ctrl+5 (Teclado numérico)>, permite pasar de un modo de visualización a otro. También es posible con menú Ver/Modo de visualización/Cambiar. ¤¤ M odo de visualización normal: Es el modo actual de la interfaz donde los gráficos se ven con los rellenos y filtros seleccionados. Es la forma de ver el arte final. ¤¤ M odo de Visualización Contorno: En este modo de visualización, todos los trazos y formas se dibujan como contornos, con un ancho de un píxel de pantalla y sin rellenos. Las imágenes se muestran con sus contornos en rojo, los trazos de recortes en verde, y las máscaras en azul. El modo Contorno es útil para ver la estructura global de un gráfico, así podemos editarlo de forma precisa seleccionando esos molestos objetos ocultos que podemos haber creado por accidente. Además este modo es ligeramente más rápido que el modo normal. El modo Contorno se puede activar mediante menú Ver/Modo de visualización/ Contorno y se desactiva con menú Ver/Modo de visualización/Normal. ¤¤ M odo de Visualización Sin Filtros: Inkscape también dispone de un modo de visualización sin filtros. Este modo es útil cuando se trabaja con dibujos complejos en los que la utilización de filtros provoca que la visualización de los gráficos sea demasiado lenta. Este modo se activa mediante menú Ver/Modo de visualización/ Sin filtros y se desactiva con menú Ver/Modo de visualización/Normal. 1-04 VIDEO Opciones de Visualización 21 Diseño Vectorial Inkscape ¿Qué aprendiste? TEMA A:A reconocer a Inkscape como editor de gráficos vectoriales de uso libre y la forma de instalarlo. TEMA B: Que al escalar las imágenes vectoriales no pierden calidad a diferencia y están formadas por curvas de bezier. TEMA C: Diferenciar las imágenes de mapa de bits de las imágenes vectoriales, conociendo sus principales características. TEMA D:A reconocer las áreas que conforman el espacio de trabajo, obteniendo un flujo de trabajo eficiente al conocer a detalle las partes que lo conforman. TEMA E: A conocer las diferentes tipos de documentos compatibles con Inkscape y formas para abrir un archivo, importar imágenes, crear un archivo nuevo y modificar las propiedades de los documentos. TEMA F: Las diferentes opciones que posee Inkscape para cambiar el aspecto visual de la interfacse y la apariencia de los objetos. EVALUACIÓN 01 Contesta las preguntas correctamente: 1. ¿Para qué se utilizan las curvas de Bézier? Son utilizadas para crear líneas, arcos y figuras trigonométricas. 2. ¿Qué es el espacio de trabajo? El espacio de trabajo contiene todos los elementos que componen la pantalla de trabajo, barras, menús y paneles. 3. Explica brevemente, ¿qué es la Pizarra de Inkscape? Es la parte que queda por fuera de la Página y que se extiende hasta el borde de la ventana. Representa un espacio donde se pueden crear, editar y almacenar elementos vectoriales antes de colocarlos en la Página. Los objetos colocados en el área de pruebas se verán en la pantalla pero no se imprimirán. 22 A simple vista Inkscape parece ser una aplicación con pocas herramientas para trabajar, pero cada una de las herramientas disponibles en la Caja de herramientas adquiere mayores características al complementarse su uso con las opciones disponibles en la barra Controles de herramienta. Un id ad 02 NIVEL: Básico Her ra m ientas DURACIÓN SUGERIDA: 5 SESIONES / 45-50 MINUTOS Durante el desarrollo de esta unidad aprenderás a: AIdentificar las principales herramientas que comprenden la Caja de Herramientas, así como el complemento de las herramientas con la barra Controles de Herramienta, describiendo su uso para realizar una ilustración, diseño, etc., así como conocer los atajos del teclado que harán el flujo de trabajo más rápido, fácil y eficiente. Diseño Vectorial Inkscape Autor: Carlos Zepeda Chehaibar Diseño Vectorial Inkscape tema A Herramientas Antes de trabajar cualquier gráfico hay que seleccionarlo. De manera predeterminada, aparece dibujado un recuadro alrededor de cada uno de los objetos que vamos a seleccionar. En Inkscape existen tres maneras de selecciónar uno o varios objetos: con el teclado, con ayuda del cuadro de diálogo Buscar y por último el método más sencillo, por medio de la herramienta Selector. Herramienta Selector Para activarla hay que hacer clic en el icono Acción Clic en botón izquierdo del ratón <Mayús>+Clic en botón izquierdo del ratón de la caja de herramientas o la tecla <F1>. Descripción Se selecciona el objeto dando un clic sobre él. Se agrega o elimina un objeto de la selección. <Alt>+Clic en botón Se selecciona el objeto situado debajo del objeto que está enfrente, es decir el que está debajo del cursor. Habrá que repetir el procedimiento para seleccionar un objeto que se encuentre más abajo. <Mayús>+Arrastre el Selecciona varios objetos si empezamos desde una zona libre de gráficos, así se seleccionan y quedan encerrados en un rectángulo definido por los puntos inicial y final del arrastre. También se le denomina “Goma Elástica”. izquiero del ratón botón izquierdo del ratón <Mayús>+Arrastre el botón izquierdo del ratón <Alt>+Arrastre con el botón izquiero del ratón <Mayús+Alt>+Arrastre el botón izquierdo del ratón Doble clic 24 Imagen 2-1: Objetos seleccionados Los objetos encerrados por la goma elástica se añaden a la selección ya existente. Con la combinación de tecla y ratón se evita que se seleccione un objeto situado en el punto inicial del arrastre. Los objetos previamente seleccionados que quedan dentro de la goma elástica no dejan de estar seleccionados por ello. Con este método se seleccionan “por toque” todos los objetos que el cursor toca durante el movimiento de arrastre. El recorrido se indica con una línea roja seguida por el cursor. Esta técnica es útil cuando hay que seleccionar varios trazos Con esta técnica se añaden a la selección todos los objetos tocados por el cursor. También se puede utilizar cuando el movimiento de arrastre comienza sobre un objeto que ya está seleccionado. Dicho objeto queda seleccionado, cambiando a la herramienta correspondiente para su edición. Por ejemplo, si se selecciona con doble clic un rectángulo se activa la herramienta Crear rectángulos y cuadrados. Herramientas Selecciones con el Teclado Estos comandos también se pueden aplicar desde el menú Edición. Teclas <Tab> <Mayús+Tab> <Ctrl+A> <Ctrl+Alt+A> <!> <Alt+!> <Ctrl+Alt> Descripción Pulsando esta tecla se selecciona el objeto situado inmediatamente por encima del objeto que ya esté seleccionado. Si no hay ningún objeto antes seleccionado, se seleccionará el objeto que esté en la posición más baja. Esto funciona cuando se trabaja en la Capa activa en ese momento. Con esta combinación de teclas se selecciona el objeto anterior, el objeto situado inmediatamente por debajo del objeto que ya esté seleccionado. Si no hay ningún objeto previamente seleccionado, quedará seleccionado el último objeto dibujado. Esto funciona cuando se trabaja en la Capa activa en ese momento. Se seleccionan todos los objetos de la Capa activa. Se seleccionan todos los objetos en todas las Capas visibles y que no estén bloqueadas. Se invierte la selección en la Capa activa. Todos los objetos que estaban seleccionados dejan de estarlo y todos los objetos que no estaban seleccionados se seleccionan. Se invierte la selección en todas las Capas visibles y que no estén bloqueadas. Todos los objetos que estaban seleccionados dejan de estarlo y todos los objetos que no estaban seleccionados se seleccionan. Se desactiva la selección de todos los objetos que estén seleccionados en ese momento. Seleccionar con el cuadro de diálogo Buscar Otra forma de seleccionar objetos es por medio del cuadro de diálogo Buscar, si no está visible lo puedes abrir usando menú Edición/Buscar. El atajo para hacerlo es el comando <Ctrl+F>. La búsqueda se realiza dentro de un archivo SVG y cuando los objetos son encontrados, éstos quedan seleccionados en la pizarra de Inkscape. Este cuadro de diálogo está dividido en dos partes. En la parte superior podemos escoger los objetos que queremos buscar y en la parte inferior dónde buscarlos. Si marcamos la casilla Todos los tipos, la búsqueda abarcará todos los tipos de objetos, forma, trazos, cadenas de texto, etc. Imagen 2-2: Cuadro de diálogo: Buscar 25 Diseño Vectorial Inkscape ¤¤ En la casilla Buscar en la selección permite definir que la búsqueda se limite objetos seleccionados en ese momento. ¤¤ Con la casilla Buscar en la capa actual se puede especificar que la búsqueda se limite a la capa seleccionada en ese momento. ¤¤ La casilla Incluir ocultos permite que los objetos ocultos se incluyan en la búsqueda. ¤¤ La casilla Incluir bloqueados especifica que los objetos bloqueados también deben incluirse en la búsqueda. ¤¤ En el extremo inferior del cuadro de diálogo también hay dos botones. El botón Limpiar es para vaciar los campos que definen los objetos que se quiere buscar. El botón Buscar realiza la búsqueda definida en ese momento. 2-01 VIDEO T IP Herramientas de Selección Pulsando la <Barra Espaciadora> del teclado se activa la selección o la Herramienta Selector si es que estamos utilizando otra herramienta, de esta forma se pueden intercambiar. Funciona con todas las herramientas excepto la de Texto. Transformaciones con la herramienta Selector Al seleccionar un objeto con la herramienta Selector, puedes notar que aparecen una flechas en la caja del objeto. Estos tiradores sirven para modificar la apariencia del objeto seleccionado. Al hacer clic una vez sobre un objeto no seleccionado, este quedara seleccionado y se pueden realizar funciones para cambiar el tamaño y orientación del objeto. Al hacer clic sobre un objeto previamente seleccionado, los tiradores de control cambiaran su apariencia y función, permitiendote ahora realizar tareas como rotar y distorcionar el objeto seleccionad, 2-02 VIDEO 26 Transformaciones con la herramienta Selector Herramientas Herramientas para crear formas geométricas Inkscape dispone de varias herramientas para dibujar formas geométricas. A continuación se explican las herramientas para dibujar formas geométricas regulares (rectángulos, cuadrados, círculos, elipses, polígonos regulares, estrellas y espirales). Crear rectángulos y cuadrados Con esta herramienta con la que se puede dibujar rectángulos y cuadrados. Para activarla, hay que seleccionar el icono de la caja de herramientas, también es posible acceder a ella mediante las teclas <F4> o <r>. Para dibujar un rectángulo hay que realizar un movimiento arrastrando el ratón, desde una esquina del rectángulo hasta la Imagen 2-3: Rectángulo esquina opuesta. Para dibujar un cuadrado hay que mantener pulsada la tecla <Ctrl> mientras se realiza el movimiento de arrastre en diagonal con el ratón. Para cambiar el tamaño de un rectángulo hay que seleccionarlo haciendo clic con la misma herramienta. Una vez seleccionado, aparecen unos tiradores (pequeños círculos y cuadrados) en algunas de las esquinas del mismo. Hay que arrastrar desde uno de los tiradores en forma de cuadrado que están situados en las esquinas superior izquierda e inferior derecha del rectángulo. También se pueden redondear las esquinas utilizando el tirador situado en la esquina superior derecha del rectángulo, aquel que tiene forma de círculo. Éste sólo es visible en un tirador. Si arrastramos este tirador hacia abajo, se crea una esquina redondeada en forma de cuarto de circunferencia en cada uno de los vértices del rectángulo. Además aparece un segundo tirador que nos sirve para redondear las esquinas de forma elíptica. Al arrastrar el segundo tirador, los radios de curvatura en las direcciones vertical (y) y horizontal (x) se pueden modificar de manera independiente. Al mantener presionada la tecla <Ctrl> y mover cualquiera de los tiradores de estilo de esquina, estos se moveran de manera simultánea produciendo un borde redondeado simetrico en ambos ejes. Crear Elipses, Círculos y Arcos La Herramienta Crear elipses, círculos y arcos permite dibujar elipses, círculos y arcos. Para activarla, hay que seleccionar el icono de la caja de herramientas, también podemos acceder a ella con las teclas <F5> o <e>. Para dibujar una elipse o un arco hay que arrastrar el ratón. Aparecerá dibujada una elipse definida por los puntos inicial Imagen 2-4: Elipse y final del movimiento de arrastre y para dibujar un círculo hay que mantener pulsada la tecla <Ctrl> mientras se realiza el arrastre en diagonal con el ratón. 27 Diseño Vectorial Inkscape Cuando se selecciona una elipse con la herramienta activada, aparecen un grupo de tiradores que se pueden utilizar para cambiar el tamaño de la misma o convertirla en un arco. Herramienta Crear Polígonos y Estrellas Con esta herramienta se pueden dibujar polígonos regulares y estrellas. Para dibujar uno de estos objetos. Para activarla, hay que seleccionar el icono de la caja de herramientas, también podemos acceder a ella mediante la tecla <*>. La forma de las estrellas se modifica moviendo los tiradores en forma de pequeños rombos de la estrella, mientras que los polígonos solo tienen uno. El tirador del Radio de punta sirve para controlar la posición de las puntas la estrella o de los vértices Imagen 2-5: Estrella de un polígono. Este es el tirador del que se arrastra cuando se dibuja una estrella o un polígono. El tirador del Radio de base controla la posición de los vértices interiores de una estrella. Si se mantiene pulsada la tecla Mayús mientras se arrastra de cualquiera de los tiradores, se redondearán los vértices de la estrella o del polígono. Herramienta Crear Espirales La herramienta Crear espirales permite dibujar Espirales de Arquímedes. Para activarla, hay que hacer clic sobre el icono en la caja de herramientas o por medio de la tecla <F9>. Para dibujar una espiral hay que realizar un movimiento de arrastre con el Botón izquierdo del ratón. El punto inicial del movimiento será el centro de la espiral. La forma de una espiral ya dibujada se modifica moviendo los tiradores en forma de pequeños rombos de la espiral, o utilizando las opciones que aparecen en la Barra de Controles de Herramienta cuando la herramienta está activada. Imagen 2-6: Espiral de Arquímides La espiral tiene dos tiradores, uno Interior y otro Exterior. Arrastrando estos tiradores se puede enrollar o desenrollar la espiral desde cada extremo. 2-03 VIDEO 28 Formas geomértricas Herramientas Estilo Activo El estilo de un objeto incluye atributos que determinan la apariencia interior (relleno) y el trazo que lo delimita (borde). Dentro de los atributos de apariencia también se incluyen atributos específicos de cada forma, como por ejemplo el número de puntas que conforman al polígono. Al crear un objeto nuevo, a éste se le asignará el Estilo activo en ese momento. Algunos elementos del Estilo activo como son: el color de relleno y el color de trazo, se muestran en la barra Controles de Herramienta, estos también se muestran en la Barra de estado, la cual se encuentra en la parte inferior del espacio de trabajo y recibe el nombre de indicador de estilo. El indicador de estilo esta compuesto por dos rectángulos que corresponden a los colores de relleno y de Imagen 2-7: Indicador borde activo para un objeto y un campo que indica el grosor del trazo. de estilo 2-04 VIDEO Color de borde y relleno PROYECTO 2-01 Dibujando figuras simples para un diseño 1. Inicia Inkscape y selecciona la herramienta Crear rectángulos y cuadrados, arrastra sobre la mesa de trabajo para crear un cuadrado, para que el cuadrado sea perfecto, mientras arrastras la herramienta presiona la tecla <Ctrl>. 2. Localiza el indicador de estilo, haz clic con el botón derecho del ratón sobre el campo Ancho de trazo y haz clic en la opción pt (puntos) del menú emergente. Haz clic repite la operación per ahora selecciona el número 10, para cambiar el grosor del rectángulo a 10 pts. 3. Crea un nuevo cuadrado sobre la página. Con la herramienta Selector arrástralo para que quede sobre el primero. Luego da clic en Objeto/Bajar al fondo. 4. Para modificar el tamaño de las figuras arrastra los puntos de control que aparecen cuando haces doble clic con la herramienta Selector sobre elllos. 5. Escoge un color diferente para el trazo de la barra de colores. Recuerda que debes presionar la tecla <Mayús> al seleccionar el color de la barra para que se aplique como color de trazo. 6. Cámbiale el color de relleno al primer cuadrado. 29 Diseño Vectorial Inkscape 7. Ahora vas a repetir todos los pasos para crear cada una de las figuras geométricas que el programa te permite con las herramientas Crear rectángulos y cuadrados, Crear círculos elipses y arcos y Crear estrellas y polígonos. Que se encuentran en la caja de herramientas. 8. Aplica a cada figura colores de relleno y trazo diferentes. Organiza las figuras en la Página, en una composición interesante y creativa. Puedes utilizar mas de una figura de cada tipo si tu diseño lo requiere. 9. Utiliza menú Archivo/Guardar y guarda el archivo en la carpeta que indique el profesor. Herramienta Crear y editar objetos de texto Para añadir un texto en un documento, hay que activar esta herramienta haciendo clic sobre el icono en la caja de herramientas o por medio de las teclas <F8> o <t> y utilizar alguno de los siguientes métodos: a.Introducir texto mediante el teclado, la caja del texto irá aumentando de tamaño para contener el texto introducido. Los saltos de línea del texto deben añadirse manualmente. b.Introducir texto fluido. En este caso el texto se añade dentro de una caja de texto rectangular previamente creada. Los saltos de línea del texto se crean automáticamente. El texto fluido y objeto que lo incluye, son afectados simultaneamente por las herramientas de tranformación. Si se hace clic con la herramienta Crear y editar objetos de Texto sobre un objeto de texto ya existente en el dibujo, dicho objeto queda seleccionado y el cursor se sitúa entre las dos letras más cercanas al punto donde se ha hecho clic. Entonces ya podemos modificar ese texto. T IP En Inkscape una manera sencilla para editar un objeto de texto la puedes encontrar en la ficha Texto del cuadro de diálogo Texto y tipografía, la cual contiene un campo que muestra el texto del objeto y permite su edición. 2-05 VIDEO 30 Crear y editar objetos de texto Herramientas Herramientas para crear trazos Los trazos se diferencían de las formas geométricas en que no tienen una estructura definida. Estos pueden ser abiertos o cerrados. Por ejemplo, un círculo tiene definidas anchura y altura, en un rectángulo un vértice no se puede moverse independiente al resto de los vértices que forman la figura geométrica. Por otra parte un trazo en forma de rectángulo está integrado por las coordenadas de cuatro nodos, los cuales se pueden mover de forma independiente. Una forma regular u objeto de texto se pueden convertir en un trazo utilizando menú Trazo/ Objeto a Trazo, debes considerar que la operación inversa no es posible. Herramienta para dibujar líneas a mano alzada Es la herramienta más fácil de usar para dibujar un trazo. Para utilizarla sólo hay que activarla haciendo clic sobre el icono en la caja de herramientas o con la tecla <F6>. Haciendo clic y desplazando el cursor libremente sobre la pizarra se dibujará una línea. Una vez realizado un trazo, éste se puede extender, sólo hay que seleccionarlo y cambiar a la herramienta dibujar líneas a mano alzada, aparecerá un cuadro en cada uno de los extramos del trazo, haz clic sobre el cuadro del extremo que desees extender para continuar dibujando. Para borrar un trazo que no se ha terminado hay que pulsar la combinación de teclas <Ctrl+Z>. Los trazos que se dibujan con esta herramienta están formados por muchas curvas de Bézier, de manera que con frecuencia presentan un aspecto errático. Este tipo de curvas se pueden suavizar y simplificar aplicando el menú Trazo/Simplificar o mediante <Ctrl+L> una o varias veces. Imagen 2-8: Trazo simplificado Herramienta para dibujar curvas Bézier y líneas rectas Esta herramienta permite dibujar trazos controlando de forma más precisa los parámetros de las curvas de Bézier que componen el trazo. Para activarla, hay que hacer clic sobre el icono (imagen) en la caja de herramientas o con la combinación de teclas <Mayús+F6> o <b>. Cuando se está utilizando esta herramienta resulta útil consultar la Zona de Información de la Barra de Estado. Ahí se indican a cada paso las Imagen 2-9: Incio de la curva 31 Diseño Vectorial Inkscape opciones disponibles, así como, la distancia y el ángulo de la posición del cursor respecto al último nodo colocado, cuando se va a crear un nodo nuevo, o cuando se arrastra de un tirador. Imagen 2-10: Inicio del dibujo de una curva Béizier Para dibujar una curva hay que hacer clic y arrastrar el cursor sobre la pizarra. El punto donde se ha hecho el clic se convierte en el nodo inicial de la curva. Mientras se arrastra del cursor, se irán agregando nodos y se verá una línea roja entre el nodo inicial y el cursor. Esta línea es una recta tangente en el nodo inicial a la curva que se va a dibujar. Para terminar el dibujo del trazo hay que pulsar la tecla Intro o hacer Clic con el Botón Derecho del Ratón después de colocar el nodo final de la última curva de Bézier del trazo. Para crear una línea recta, basta con hacer solamente clic en cada nodo, en lugar de hacer clic y arrastrar manteniendo pulsado el ratón. Imagen 2-11: Colocación del nodo inicial de la siguiente curva Béizier Para cerrar un trazo hay que hacer clic sobre el primer nodo del trazo cuando se vaya a colocar el último nodo del mismo. Imagen 2-12: Figura hecha con líneas rectas. 2-06 VIDEO Herramientas de lápiz y pluma Herramienta editar nodos de trazo o tiradores de control Esta herramienta nos permite editar los nodos que integran uno o varios trazos. Con ayuda de las opciones disponibles en la barra Controles de herramienta, es posible la creación, eliminación y desplazamiento de los nodos. Para activarla hay que hacer clic sobre el icono de la Caja de herramientas. Después hay que hacer clic sobre el trazo que se quiere editar para mostrar sus nodos. Para poder editar un nodo hay que seleccionarlo, al colocar el puntero de ratón sobre alguno de los nodos, esté temporalmente obtendrá un color rojo, indicando así que el nodo puede se seleccionado. Los nodos seleccionados se representan mediante un color azul y su tamaño es ligeramente mayor. 32 Herramientas Al seleccionar con la herramienta Selector varios trazos y activar la herramienta editar nodos de trazo, los nodos de los trazos seleccionados podrán ser editados. Cuando el nodo está seleccionado aparecen los tiradores de control de dicho nodo, así como los tiradores de los nodos adyacentes. Selección de nodos Para seleccionar un nodo hay que hacer clic con el botón izquierdo del ratón sobre él. Un nodo se vuelve de color rojo cuando el cursor pasa por encima de él, entonces éste puede seleccionarse o deseleccionarse. Una vez seleccionado quedan seleccionados los nodos más próximos a cada lado del punto donde se ha hecho clic. Cuando el cursor está cerca de un trazo y aparece el símbolo de una mano junto al cursor, entonces se puede hacer clic para seleccionar los nodos. Acción Función Arrastre con el botón izquierdo del ratón Para seleccionar varios nodos a la vez hay que realizar un movimiento de arrastre, quedarán seleccionados todos los nodos situados dentro de la caja delimitada por la goma elástica creada con el movimiento de arrastre. <Tabulador> Si se pulsa la tecla Tabulador en un trazo donde se encuentra seleccionado un nodo, entonces se deselecciona ese nodo y se activa el siguiente nodo del trazo. Normalmente el nuevo nodo seleccionado es el nodo adyacente en el sentido en que fue dibujado el trazo. <Mayús+Tabulador> Se seleccionará el nodo anterior en el trazo. <Ctrl+A> Se seleccionan todos los nodos del trazo que se encuentre seleccionado en ese momento. <!> Se invierte la selección de nodos en un sub-trazo que tenga seleccionado al menos un nodo. <Alt+!> Se invierte la selección de nodos en un trazo completo o en un grupo de trazos. Editar Nodos Al seleccionar un nodo es posible modificar su posición con ayuda del ratón o las flechas del cursor del teclado. Es recomendable utilizar el teclado para cambiar la posicón de un nodo de manera precisa y el ratón es de gran ayuda para modificar los tiradores de los nodos y modificar la forma de un trazo entre dos nodos arrastrando de un punto intermedio del trazo. 2-07 VIDEO Editar líneas Béizier 33 Diseño Vectorial Inkscape PROYECTO 2-02 Agitador de conciencia social 1. Abre el archivo Agitador.svg que se encuentra en los Recursos Digitales. Al abrirlo verás que los gráficos tienen líneas guía. Representan las dos caras de un agitador de bebidas que, una vez impreso y recortado, servirá además para promover la conciencia social. 2. Utiliza la herramienta Crear rectángulos y cuadrados para dibujar un rectángulo. Una vez creado el rectángulo con ayuda de la barra Controles de herramienta modifica los siguientes parámetros: ¤¤ ¤¤ ¤¤ ¤¤ Unidad de medida: cm Ancho (W): 0.55 Alto (T): 8.5 Rx y Ry: 0 3. Acomoda el nuevo rectángulo sobre el espacio que le corresponde en el agitador del lado izquierdo. Utiliza la herramienta Acercar o alejar para acercar y alejar el área de trabajo, de modo que puedas ver todos los detalles. 4. Ahora selecciona la herramienta Crear círculos, elipses o arcos para crear una elipse. Presiona la <Barra espaciadora> y en la barra Controles de Herramienta modifica los siguientes parametros: ¤¤ Unidad de medida: cm ¤¤ Ancho (W): 3.7 ¤¤ Alto (T): 3.45 5. Presiona nuevamente la <Barra espaciadora> y de forma similar crea una figura de 2.95 x 2.75 cm. 6. Acomoda las dos elipses sobre las guías en el agitador izquierdo con ayuda de la herramienta Selector. 7. Crea un nuevo rectángulo de 3.7 x 0.8 cm. Cambia a la herramienta Selector y haz clic sobre este nuevo rectángulo para que aparezcan en las esquinas del rectángulo tiradores en forma de flecha curvas, esto significa que puedes arrastrar y girar el rectángulo. Gíralo y hazlo coincidir con el rectángulo guía que está inclinado. 8. Dibuja rectángulos siguiendo la forma del personaje en la parte de arriba (hombros, tronco, brazo, antebrazo, pierna y pie). Acomódalos sobre la figura. Los rectángulos deben traslaparse unos sobre otros, ya que los uniremos en el siguiente paso. 34 Herramientas 9. Selecciona cada uno de los rectángulos, presionando la tecla <Mayús>, de tronco, hombros, espalda, pierna y pie. Utiliza menú Trazo/Unión. Esto hace que los rectángulos seleccionados se conviertan en una sola forma. 10.Haz lo mismo para unir en una sola forma los rectángulos de brazo y antebrazo. 11.Termina creando la cabeza del personaje. 12.Ahora lo vas a colorear. Aplica colores de relleno seleccionando las formas y utilizando la Paleta de colores para lograr una combinación agradable. 13.Cuando el lado izquierdo del agitador esté terminado, selecciona todos los objetos y agrúpalos utilizando el menú Objeto/Agrupar o las teclas <Ctrl+G>. 14.Selecciona la forma y utiliza las teclas <Ctrl+D> para Duplicar los objetos seleccionados. 15.Ahora para reflejarla selecciona la forma que duplicaste y con la herramienta Selector activa presiona el botón Reflejar verticalmente los objetos seleccionados. También puedes presionar simplemente la tecla <H>. 16.Acomoda el agitador derecho con la ayuda de las herramientas Selector y Zoom. Haz un clic en un área vacía del documento para asegurarte de que no hay ningún objeto seleccionado. 17.Para darle más vida, vamos a cambiar el color del círculo del agitador derecho. Como los objetos están agrupados, para seleccionar sólo el círculo, es necesario dar Doble clic sobre el objeto que se va a editar. Selecciónalo y cambia su color. 18.Utiliza la herramienta de Texto para crear dos mensajes como “Ahora manejo mi vida” y “Evito el exceso”. 19.Dale color a los textos y un tamaño adecuado para que los puedas colocar en los agitadores. Puedes usar cualquier área que creas conveniente, así como tipografía, tamaños y colores. Incluso puedes poner cada palabra del mensaje en un lugar diferente del agitador. 20.Guarda tu trabajo con el nombre Mi_agitador.svg en la carpeta que indique tu profesor. 35 Diseño Vectorial Inkscape PROYECTO 2-03 Haciendo una caja de regalo (Parte 1) 1. Inicia Inkscape. Utiliza la herramienta de Crear rectángulos y cuadrados para crear un rectángulo de 6 x 3.5 pulgadas. Recuerda que puedes utilizar los comandos de la barra Controles de herramienta para ajustar el tamaño y configurar las unidades de medida. Este rectángulo será la parte delantera de la caja. 2. El color de relleno del rectángulo debe ser blanco, si es de otro color, selecciona el color blanco de la paleta de colores y el color del trazo debe ser negro, si es de otro color selecciona el color negro de la paleta de colores mientras presionas la tecla <Mayús>. 3. Con ayuda del Indicador de estilo de la barra de Estado, cambia las unidades a puntos (pt) y modifica el ancho del trazo a 0.5 pt. 4. Con la herramienta Seleccionar y transformar objetos mueve el rectángulo hacia la parte de arriba de la página para tener espacio en la parte de atrás de la caja. 5. Duplica el rectángulo con <Ctrl+D> y coloca la copia exactamente debajo del original, de manera que la línea inferior del primero coincida con la línea superior del segundo. Recuerda que puedes presionar la tecla <Ctrl> mientras desplazas el rectángulo hacia abajo para que el movimiento se completamente vertical. 6. Utiliza la herramienta Crear círculos elipses y arcos para crear una elispse de 1.5 x 3.5 pulgadas. El color de trazo debe ser negro y no debe tener color de relleno. Para eliminar el color de relleno haz clic en el cuadro localizado en la Paleta de colores. 7. Activa la opción Habilitar ajuste con la tecla <%>, luego arrastra una guía desde la regla vertical y acomódala en el costado izquierdo de los rectándolos. Si las reglas no están visibles activalas con menú Ver/Mostrar/Ocultar/Reglas y si las guías no se muestran utiliza menu Ver/Guías. 8. Coloca la elipse en el costado izquierdo del rectángulo superior, ayúdate de la guía para que el centro de la elipse coincida con el extemo del rectángulo. 9. Selecciona la elipse y utiliza menu Trazo/Objeto a trazo. Con la herramienta Editar trazos y nodos, selecciona los dos nodos del eje vertical de la elipse y haz clic en la opción Convertir en esquina los nodos seleccionados ubicado en la barra Controles de herramienta. Esto hará que se afilen las orillas de la elipse. 10.Duplica la elipse con <Ctrl+D> y ubica la copia en el extremo derecho del rectángulo superior. 36 Herramientas 11.Selecciona las dos elipses y duplicalas. Desplaza las copias hacia abajo para colocarlas a los extremos del rectángulo inferior. Observa la figura. 12.Crea un círculo perfecto de 1 pulgadas de diámetro, sin relleno. Colócalo al centro de la línea exterior izquierda de la primera elipse, es mejor si utilizas las teclas del cursor para colocarlo en su posición final. Duplica el círculo en el otro extremo. 10.Selecciona el círculo junto con la elipse con la herramienta Seleccionar y transformar objetos y utiliza menú Trazo/Diferencia con tus dos figuras seleccionadas para eliminar el círculo de la elipse contraria. Realiza los mismos pasos para que los dos extremos de la caja queden igual. Ahora tienes la forma básica de la caja. 11.Guarda el archivo con el nombre Caja.svg en la carpeta que indique tu profesor. Utilizaras el archivo en otro proyecto. Herramientas de Pintura Icono Atajo Nombre Función <F7> Seleccionar colores de la imagen Asigna color de borde o relleno existentes en la pizarra a un objeto seleccionado. Al hacer clic directamente sobre el color deseado se asignará como color de relleno. Al hacer clic mientras se pulsa la tecla <Mayús> se asigna color de trazo. <Ctrl+F1> Crear y editar degradados Con esta herramienta se puede asignar un degradado de tipo líneal o radial, al relleno o al borde de un objeto seleccionado utilizando las opciones de la barra Controles de herramienta. <Mayús+F7> Rellenar áreas delimitadas Esta herramienta rellena de color un área definida por dos objetos diferentes y después hacer clic sobre la zona de solapamiento de los dos objetos. Entonces se crea un nuevo objeto con el color de Relleno activo en ese momento. <Ctrl+F6> o <c> Dibujar trazos caligráficos o pinceladas Los trazos que se obtienen con esta herramienta son un poco diferentes de los que se dibujan con las herramientas Dibujar líneas a mano alzada y Dibujar curvas Bézier y líneas rectas, ya que están formados por dos sub-trazos paralelos, de manera que la línea resultante puede tener una anchura variable. 2-08 VIDEO Herramientas de pintura 37 Diseño Vectorial Inkscape Otras herramientas La herramienta Esparcir objetos ( ) permite crear copias de un objeto seleccionado. Con ayuda de la barra Contoles de herramienta es posible modificar la forma en que estos objetos son esparcidos. Cada objeto creado con esta herramienta, tiene cualidades propias, es decir si se modica el objeto original, estos cambios no causaran efecto sobre las copias. Si utilizas el menú Edición/Clonar/Crear Clón o las teclas <Alt+D>, todos los clones sufrirán los cambios que se realicen al objeto original. La Herramienta Eliminar trayectos existentes sirve para borrar elementos de un dibujo. Para activarla hay que hacer clic sobre el icono en la Caja de Herramientas, o bien utilizar el atajo de teclado <Mayús+E>. 2-09 VIDEO Clonación de objetos PROYECTO 2-04 Haciendo una caja de regalo (Parte 2) 1. Abre el archivo Caballito.svg que se encuentra en los Recursos Digitales. Es la silueta de un caballito de mar creada sólo con guías. Las guías no son objetos reales por lo que no es posible colorearlos. 2. Acerca la pantalla para que puedas visualizar mejor los detalles. Utiliza la herramienta Acercar o alejar. 3. Utilizando las herramientas Dibujar curvas bézier y líneas rectas y Dibujar líneas a mano alzada, empieza a trazar el caballito de mar. Comienza por las curvas que adornan la cabeza. Sigue las técnicas para crear líneas y curvas que se explicaron anteriormente. Trata de usar los menos nodos posibles: en muchos casos sólo se requiere uno inicial y uno final para cada segmento de curva como se muestra a continuación. 38 Herramientas 4. Cuando termines de trazar el caballito de mar, abre el documento Caja.svg que creaste anteriormente. 5. Selecciona todo el caballito y cópialo. Pégalo sobre la figura de la caja de regalo y modifica su tamaño utilizando la herramienta Seleccionar y transformar objetos para que quede en una de las caras de la caja. 6. Con la herramienta Selector selecciona el cuerpo del caballito y en la paleta de colores busca algún color rosado para darle color y elimina el borde del caballito seleccionando el cuadro de la Paleta de colores mientras mantienes presionada la tecla <Mayús>. 7. De forma similar ve dando color a las diferentes partes del caballito, usando tonalidades ligeramente diferentes. Verás que hay que organizar las figuras para que unas no tapen a otras, ya sea enviandolas al frente o hacia atrás. 8. Ya que tiene color todo el caballito de mar, dubplícalo con las teclas <Ctrl+D> y en los controles de herramientas da clic sobre la herramienta Reflejar los objetos seleccionados horizontalmente. Acomoda el duplicado junto al original y luego aplica todo el conjunto nuevamente. Debes obtener una composición como en la imagen “Acomodo del caballito de mar” Imagen 2-13: Acomodo del caballito de mar 9. Dale color a la caja, seleccionando un color contrastante puede ser negro o algún otro color oscuro. 10.Detalla la caja y revisa que todo este bien. Guarda el archivo terminado. 11.Imprímela en papel grueso o mándala a imprimir a cualquier tienda que tenga servicio de impresión digital. Recorta la caja dejando un espacio adicional para poder pegarla. Dóblala y ármala. Imagen 2-14: Caja lista para impresión 39 Diseño Vectorial Inkscape ¿Qué aprendiste? TEMA A:A identificar cada una de las herramientas de la Caja de herramientas, conociendo su uso y la manera de acceder a ellas de forma rápida con el teclado. EVALUACIÓN 02 Contesta correctamente las siguientes preguntas selecciona a, b o c según corresponda. 1. Las pequeñas cajas que contienen opciones y comandos para controlar, modificar y mejorar las ilustraciones que se pueden mover, mostrar y ocultar donde se encuentran. a.En la vista del icono b.En la caja de herramientas c.En la opción de mostrar todo 2. Esta delimitada destinada a la impresión. a.Área de imagen b.Pizarra c.Página 3. En la parte inferior del programa hay 2 opciones llamadas Relleno y Trazo, cual es la función de estas opciones. a.Para intercambiar la visibilidad de las capas b.Para mostrar color, estilo y ancho del trazo c.Para editar el color del texto 4. Contiene a detalle todas las operaciones que se le pueden hacer al documento. a.Metadatos del documento b.Propiedades del documento c.Referencias de Inkscape 5. Si ya estas trabajando en un documento y deseas incluir un archivo externo en él, puedes utilizar: a.Archivo/ Importar b.Archivo/ Exportar mapa de bits c.Archivo/ Importar desde Open Clip Art Library 40 Los cuadros de diálogo acoplables de Inkscape nos permiten manipular las imágenes vectoriales en cuanto al color, trazo, texto, etc. Los paneles pueden moverse, agruparse o desagruparse según lo requieras al momento de estar trabajando en Inkscape. Un id ad 03 NIVEL: Básico Cuad ro s de d iá logo DURACIÓN SUGERIDA: 3 SESIONES / 45-50 MINUTOS Durante el desarrollo de esta unidad aprenderás a: AUtilizar capas para organizar elementos en la pizarra, para tener un proyecto más organizado. B Aplicar las funciones: transformar, alinear y distribuir, en varios objetos mejorando la composición de un proyecto. C Conocer las opciones para agrupar y desagrupar objetos. Diseño Vectorial Inkscape Autor: Carlos Zepeda Chehaibar Diseño Vectorial Inkscape tema A Capas El cuadro de diálogo acoplable Capas, se sitúa por lo general en el extremo derecho de la pizarra. Recuerda que si no se encuentra activo, puedes desplegarlo desde el menú Capa/Capas o las teclas <Mayús+Ctrl+L>. Imagen 3-1: Cuadro de diálogo acoplable Capas Las capas sirven para organizar todos los elementos que componen o pueden componer la imagen vectorial, desde las formas básicas hasta el color. Cuando se crea una imagen nueva, Inkscape proporciona un área en blanco en una sola capa inicial, para empezar a trabajar sobre ella. Al estar trabajando con las capas, tendrás la sensación de estar utilizando hojas transparentes, cada una con determinada información. Las capas se pueden combinar y ordenar para que te faciliten el trabajo. En el cuadro de diálogo acoplable Capas, cada capa está identificada con el nombre asignado, el cual se puede cambiar dando clic sobre la capa, o utlizando el menú Capa/Renombrar capa, estableciendo un nuevo nombre. Manejo de Capas ¤¤ Capa actual: En la mayoría de los proyectos se trabaja con muchas capas y aunque se nombren, no siempre podemos recordar en cuál estamos situados cada momento. El cuadro de diálogo acoplable Capas, nos ayuda resaltando la Capa actual con un color gris tenue. También la Barra de estado en la sección Indicador de capa, muestra el nombre de la ésta. T IP 42 Para una mejor organización de tu trabajo es importante nombrar las capas. Basta con dar doble clic sobre el nombre de la capa y escribir el de tu elección. Cuadros de diálogo ¤¤ Crear nueva capa: Para añadir nuevas capas a la composición, haz clic en el menú Capa/ Añadir Capa o las teclas <Mayús+Ctrl+N>. Aparece un cuadro de diálogo donde puedes especificar el nombre de la nueva Capa. El menú desplegable permite seleccionar la posición de la nueva Capa: encima, debajo o como una sub-Capa de la Capa actual, la cual te permite colocar objetos para ser modificados de forma independiente. ¤¤ Ocultar y mover capas: Dentro del documento de trabajo es posible habilitar y deshabilitar temporalmente las capas. La razón es simple, en ocasiones necesitamos imprimir un documento evitando que aparezca cierta información. En este caso sólo se imprimirán aquellas capas visibles, es decir, las que tengan el icono del ojo visible en el recuadro izquierdo. Las capas también se pueden mover para ajustar su posición en el trabajo. Para esto necesitas seleccionar una capa y con los botones situados debajo de la lista de Capas mover la Capa seleccionada hacia arriba o hacia abajo, dependiendo de la composición que quieras realizar. ¤¤ ¤¤ ¤¤ ¤¤ Traer la capa al frente o las teclas <Mayús+Ctrl+Inicio>. Subir la Capa actual un nivel o las teclas <Mayús+Ctrl+Re Pág>. Bajar la Capa actual un nivel o las teclas <Mayús+Ctrl+Av Pág>. Bajar capa hasta el fondo o las teclas <Mayús+Ctrl+Fin>. Si necesitas mover un objeto del dibujo de una capa a otra, puedes utilizar respectivamente: ¤¤ Menú Capas/Mover la selección a la capa superior a la actual o las teclas <Mayús+Re Pág>. ¤¤ Menú Capas/Mover la selección a la capa inferior a la actual o las teclas <Mayús+Av Pág>. ¤¤ Bloqueo: Otra herramienta importante del manejo de capas, es el bloqueo. Su principal función es evitar mover o modificar las capas. Para evitar cambios a los objetos de una capa, haz clic en la casilla que está a la derecha del icono del ojo en cada capa. Un pequeño candado cerrado indica que la capa está bloqueda, el candado abierto indica la acción contraria. ¤¤ Eliminar capa: Para borrar una capa seleccionada, presiona el botón Eliminar capa actual o utiliza menú Capa/Borrar la capa actual. 3-01 VIDEO Capas 43 Diseño Vectorial Inkscape ACTIVIDAD 3-01 Recordando capas Contesta las siguientes preguntas. 1. ¿Cuál es la función de las capas? Las capas sirven para organizar todos los elementos que componen o puedan componer la imagen vectorial. 2. Describe una forma para crear una capa nueva. Dando clic en el icono Create New Layer (Capa nueva). 3. ¿Para qué sirve una sub-capa? Una sub-capa sirve para modificar de forma independiente los elementos de la capa. 4. Describe una situación en la que sería útil ocultar una capa. Explica con un ejemplo en vez de mencionar el objetivo de la función de ocultar. Tengo un texto en la parte de arriba pero no es agradable a la vista o “sale sobrando” de la imagen, se puede ocultar la capa donde se sitúa el texto para ponerlo con o sin texto. 5. Describe una situación en la que sería útil bloquear una capa. Explica con un ejemplo en vez de mencionar el objetivo de la función de bloquear. Al tener el proyecto terminado se pide que se le agreguen más elementos, se bloquea la capa del proyecto, se crea una nueva y sobre esa se añaden esos nuevos elementos. 6. ¿Cómo podemos hacer que todas las opciones de capa se abran en un panel nuevo sin necesidad de utilizar el menú cada que realicemos una función con las capas? Utilizando el cuadro de diálogo acoplable Capas y manipular las capas mediante las opciones disponibles en éste. 44 Cuadros de diálogo ACTIVIDAD 3-02 Capas reales Para esta actividad no se requiere la computadora. Se necesita un acetato transparente tamaño carta y plumones de colores. También se pueden utilizar pinturas. 1. Recorta el acetato en cuatro partes iguales. 2. En el primer cuarto de acetato dibuja con un plumón punto fino o estilógrafo, el contorno de una figura. 3. Usa el segundo cuarto de acetato para darle color a la figura. Coloca este acetato sobre el primero, para que el relleno no pase el área del contorno. 4. En el tercer cuarto de acetato dibuja sombras a la figura. 5. Usa el último cuarto de acetato para escribir un texto pequeño. 6. Ordena los acetatos de manera que formen una sola composición. 7. Anota tus conclusiones: a.¿Cuál es el orden (de arriba hacia abajo) en que mejor quedan acomodados los elementos (relleno, sombra, contorno y texto)? 1. Contorno 2.Relleno 3.Sombra4.Texto b.¿Qué ventajas tiene trabajar cada elemento en una capa independiente? La ventaja de trabajar en capas independientes es que puedes manipular individualmente cada objeto que conforma a la imagen vectorial. c.Esta técnica se ha usado tradicionalmente para la animación o caricatura, incluso antes de la existencia de computadoras. ¿Qué elementos crees que se podrían dibujar en cada capa para facilitar la creación de un dibujo animado? •Los movimientos del personaje •Más personajes •Lugares y fondos 45 Diseño Vectorial Inkscape PROYECTO 3-01 Usando capas para organizar una ilustración 1. Abre el archivo Capas.svg que está en los Recuros Digitales. 2. Localiza o abre el Cuadro de diálogo acoplable Capas. 3. Oculta todas las capas. Ve mostrando una a la vez para revisar su contenido. 4. Normalmente en el Cuadro de diálogo acoplable Capas, se asignan nombres genéricos a las capas. Al darles nombres más descriptivos a estos elementos, resulta mas fácil su identificación. Renombra las capas existentes de forma apropiada. 5. Si es necesario, crea Capas adicionales para mover objetos de una capa a otra para mejorar la apariencia de la ilustración 6. Con ayuda de los botones situados debajo de la lista de Capas, modifica la posición de las capas en la lista y así corregir la ilustración. 7. Crea una nueva capa y en ella introduce un texto con tu nombre y grupo. 8. Crea otra capa y en ella dibuja un rectángulo con borde grueso y relleno claro, para enmarcar la ilustración. Envía esta capa detrás de todas las demás. 9. Guarda los cambios con el nombre Capas_org.svg en la carpeta que indique tu profesor. Imagen 3-2: Archivo Capas_org.svg terminado 46 Cuadros de diálogo tema B Alinear, distribuir y transformar objetos Alinear y distribuir En Inkscape puedes alinear elementos unos con otros o distribuirlos uniformemente en la pizarra. Para estas tareas se usa el Cuadro de diálogo Alinear y distribuir que se despliega con el menú Objeto/Alinear y distribuir o con las teclas <Mayús+Ctrl+A>. La Alineación de objetos seleccionados, se realiza siempre en relación con un ancla. El ancla puede ser: un objeto (primero o último seleccionado, el más grande o el más pequeño), la selección, el dibujo o la página. El elemento ancla se selecciona mediante el menú desplegable Relativo a. La sección Distribuir, permite distribuir el espacio que existe entre objetos tanto horizontal como vertical, basándose en ciertos criterios. La distribución se realiza entre los objetos de los extremos. Tarea Orientación Icono Imagen 3-3: Cuadro de diálogo: Alinear y distribuir Descripción Alinear el lado derecho de los objetos con el borde izquierdo del ancla. Alinear el lado derecho de los objetos con el borde derecho del ancla. Alinear horizontalmente el centro de los objetos con el centro del ancla. Horizontal Alinear el lado izquierdo de los objetos con el borde izquierdo del ancla. Alinear el lado izquierdo de los objetos con el borde derecho del ancla. Alinear horizontalmente las líneas base de los textos con el ancla. Alinear Alinear el borde superior de los objetos con el borde inferior del ancla. Alinear el borde superior de los objetos con el borde superior del ancla. Vertical Alinear verticalmente el centro de los objetos con el centro del ancla. Alinear el borde inferior de los objetos con el borde inferior del ancla. Alinear el borde inferior de los objetos con el borde superior del ancla. Alinear verticalmente las líneas base de los textos con el ancla. 47 Diseño Vectorial Inkscape Tarea Orientación Icono Descripción Distribuir horizontalmente los objetos con sus lados izquierdos a distancias iguales. Distribuir horizontalmente los objetos con sus centros a distancias iguales en dirección horizontal. Horizontal Distribuir horizontalmente los objetos con sus lados derechos a distancias iguales. Distribuir horizontalmente los objetos igualando los huecos entre ellos en dirección horizontal. Distribuir horizontalmente los textos con las anclas de sus líneas base a distancias iguales. Distribuir Uniformemente Distribuir verticalmente los objetos con sus bordes inferiores a distancias iguales. Distribuir verticalmente los objetos con sus centros a distancias iguales en dirección vertical. Distribuir verticalmente los objetos con sus centros a distancias iguales en dirección vertical. Vertical Distribuir verticalmente los objetos igualando los huecos entre ellos en dirección vertical. Distribuir verticalmente los textos con sus líneas base a distancias iguales. Distribuir Horizontal y No UniformeVertical mente T IP 48 Distribuir los centros de los objetos de manera aleatoria en las dos direcciones. Mover los objetos intentando igualar la distancias entre bordes de los objetos Los cuadros de diálogo acoplables se pueden expandir o contraer, permitiendo tener más espacio en la pizarra. Para contraer un cuadro de diálogo presiona el botón y este se mostrará en forma de icono en el costado derecho de la pizarra. Haz clic sobre el icono para expandirlo. Cuadros de diálogo Transformación El cuadro de diálogo acoplable Transformar permite modificar numéricamente y con gran exactitud un objeto seleccionado: moverlo, escalarlo, rotarlo, inclinarlo y su matriz. El panel se puede mostrar usando el menú Objeto/Transformar o las teclas <Mayús+Ctrl+M>, y ofrece diferentes modos u opciones de transformación: Ficha Mover (aplicar desplazamiento a objetos seleccionados): ¤¤ Unidades: Muestra un menú desplegable con unidades de medida. ¤¤ Movimiento relativo: Si la casilla se encuentra activa, el desplazamiento se aplica al objeto en relación a su posición actual. ¤¤ Aplicar a cada objeto por separado: Si la casilla se encuentra desactivada, el desplazamiento se aplicará a todos los objetos seleccionados como si fueran un grupo. Con la casilla activa, al aplicar un desplazamiento positivo aparecerán más separados y al aplicar un desplazamiento negativo, aparecerán más juntos. ¤¤ Horizontal: Mover con exactitud nuestro objeto horizontalmente. ¤¤ Vertical: Mover con exactitud nuestro objeto verticalmente. Imagen 3-4: Ficha Mover Ficha Escalar (permite aplicar cambios de tamaño a objetos seleccionados): ¤¤ Unidades: Muestra un menú desplegable con unidades de medida. ¤¤ Escalar proporcionalmente: Si la casilla se encuentra activa, el cambio se aplica al objeto manteniendo constante la proporciónen entre ancho y alto del objeto. ¤¤ Aplicar a cada objeto por separado: Si la casilla se encuentra desactivada, el cambio de tamaño se aplicará a todos los objetos seleccionados como si fueran un grupo. Con la casilla activa, el cambio de tamaño se aplicará a cada objeto de la selección con respecto al centro de su caja de contorno. ¤¤ Ancho: Nos sirve para dar un valor determinado y con exactitud al ancho del objeto. ¤¤ Altura: Nos sirve para dar un valor determinado y con exactitud al la altura del objeto. Imagen 3-5: Ficha Escalar 49 Diseño Vectorial Inkscape Ficha Rotar (permite girar objetos seleccionados): ¤¤ Unidades: Muestra un menú desplegable con unidades de medida. ¤¤ Aplicar a cada objeto por separado: Si la casilla se encuentra desactivada, la rotación se aplicará a todos los objetos seleccionados como si fueran un grupo. Con la casilla activa, la rotación se aplicará a cada objeto de la selección con respecto al centro de su caja de contorno. ¤¤ Ángulo: Se emplea para determinar ángulo de rotación, en sentido horario y viceversa. Imagen 3-6: Ficha Rotar Ficha Inclinar (permite inclinar objetos seleccionados): ¤¤ Unidades: Muestra un menú desplegable con unidades de medida. ¤¤ Aplicar a cada objeto por separado: Si la casilla se encuentra desactivada, la inclinación se aplicará a todos los objetos seleccionados como si fueran un grupo. Con la casilla activa, la inclinación se aplicará a cada objeto de la selección con respecto al centro de su caja de contorno. ¤¤ Horizontal: Nos sirve para inclinar en dirección horizontal la selección. ¤¤ Vertical: Inclina la selección en dirección vertical. T IP Imagen 3-7: Ficha Inclinar Podemos transformar uno o varios objetos al mismo tiempo, lo único que se tiene que hacer es mantenerlos seleccionados al momento de asignar valores en el panel. 3-02 VIDEO 50 Alinear, distribuir y transformar objetos Cuadros de diálogo Máscara de recorte En los programas de diseño gráfico se utiliza mucho el término máscara. Este nombre se ha heredado de las antiguas técnicas de trabajo con papel o pintura. En muchas ocasiones, un artista tenía la necesidad de trabajar sólo con una pequeña parte de una imagen. Para no correr el riesgo de dañar otras zonas de la imagen, el artista creaba una máscara que consistía en un lienzo que se colocaba sobre todo el documento y que tenía sólo un orificio a través del cual se podía retocar lo necesario. Hoy en día, las personas todavía usan máscaras de este tipo para restaurar obras de arte de la antigüedad, trabajar con fotografías e incluso se usan en procedimientos médicos para enfocarse a una zona específica de trabajo mientras se protege el todo. En Inkscape una Máscara de recorte es un objeto o grupo de objetos cuya forma recorta las ilustraciones que se encuentran en la parte de abajo, de manera que sólo se pueden ver los elementos que están dentro de la forma de la máscara. La máscara y los objetos enmascarados crean un “conjunto de recorte”. Para crear una máscara: 1. En la pizarra coloca la imagen u objetos que deben convertirse en el conjunto de recorte. 2. Organiza los elementos. Recuerda que el objeto que será la máscara de recorte debe ir al frente. 3. Realiza la selección de los elementos y crea la Máscara de recorte mediante menú Objeto/ Recorte/Aplicar, o haz clic con el botón secundario y selecciona Aplicar Recorte del menú emergente. Al seleccionar un objeto que tiene aplicada una Máscara de recorte, la Barra de Estado indica el nombre del tipo de objeto junto con la palabra “recortado”. Este procedimiento es reversible. Para quitar la aplicación de una Máscara de recorte, selecciona el objeto y utiliza el menú Objeto/Recorte/Liberar, o haz clic con el botón derecho del ratón y selecciona Liberar Recorte del menú emergente. 3-03 VIDEO Máscaras de recorte 51 Diseño Vectorial Inkscape PROYECTO 3-02 Ejercicio de recorte de imagen 1. Inicia Inkscape e importa la imagen Globo.tif que se encuentra en los Recursos Digitales. Recuerda que puedes utilizar el comando menú Archivo/Importar. 2. Toma la herramienta Crear círculos, elipses y arcos,y haz un círculo. Al trazar el círculo puedes mantener presionada la tecla <Mayús+CTRL> mientras arrastras el puntero del ratón en diagonal, la figura será creada a partir de su centro y será un círculo perfecto. El color de relleno y trazo del círculo no son importantes. 3. Mueve el círculo para que enmarque al globo que se ve más arriba en la fotografía. 4. Comprueba que el círculo que creaste este por encima de la fotografía del globo. 5. Realiza la máscara seleccionando el círculo y la fotografía mediante el menú Objeto/Recorte/ Aplicar y deberá crearse la máscara de recorte. Imagen 3-8: Ejemplo del círculo enmarcando al globo. 6. Ahora selecciona el objeto y utiliza las teclas <Ctrl+D> para duplicarlo. Observa en la Barra de estado que el objeto duplicado está acompañado del texto “recortado”. 7. Elimina la máscara de recorte del duplicado, mueve el círculo para que enmarque otro de los globos y crea una máscara de recorte. 8. Crea una figura distinta (estrella, polígono, etc). 9. Duplica cualquier conjunto de recorte y retira la máscara de recorte. Puedes eliminar la figura geométrica utilizada para generar el recorte. 10.Utiliza la última figura para crear una máscara de recorte sobre otro de los globos. Si es necesario ordena los objetos, recuerda que el objeto que realizara el recorte debe estar al frente de los polígonos o estrellas. 11.Guarda tu trabajo en la carpeta de costumbre. 52 Imagen 3-9: Ejercicio terminado. Cuadros de diálogo tema C Agrupar y desagrupar objetos Puedes reunir varios objetos para convertirlos en una unidad por medio del comando Agrupar que se activa con menú Objecto/Agrupar o las teclas <Ctrl+G>. Cuando agrupas varios objetos, los puedes mover y transformar al mismo tiempo sin alterar sus posiciones relativas o atributos individuales. Para desagrupar objetos utiliza el menú Objecto/Desagrupar o la combinación de teclas <Mayús+Ctrl+G>. Imagen 3-10: Objetos seleccionados Imagen 3-11: Objetos agrupados seleccionados Después de agrupar los objetos, al seleccionar cualquier parte del grupo con la herramienta Selector, se seleccionará todo el grupo. Al hacer doble clic sobre el grupo es posible seleccionar los elementos por separado para modificarlos, haciendo doble clic nuevamente. Para salir de esta modalidad presiona la tecla <Esc>. ACTIVIDAD 3-03 Agrupar y desagrupar 1. ¿Qué es agrupar varios objetos? Agrupar varios objetos es unirlos para poder moverlos y tranformarlos al Agrupar y desagrupar mismo tiempo sin alterar sus posiciones relativas o atributos individuales. 2. Esquematiza los pasos que se deben seguir para agrupar y desagrupar un objeto en Inkscape. Agrupar 1. Seleccionas los objetos para agrupar 2. Vas al menú Objeto/Agrupar o con <Ctrl+G> Desagrupar 1. Seleccionar el grupo 2. Vas al menú Objeto/Desagrupar o con <Mayús+Ctrl+G> 53 Diseño Vectorial Inkscape ¿Qué aprendiste? TEMA A:A identificar las Capas, sus características y cómo se pueden acomodar para facilitar el trabajo.. TEMA B: A utilizar las opciones de los cuadros de diálogo: Transformar y Alinear y Distribuir con la finalidad de organizar los elementos que componen un dibujo en Inkscape. TEMA C: Que mediante el comando de agrupar objetos es más sencillo el trabajo con varios objetos, tanto para desplazarlos, como para transformarlos. EVALUACIÓN 03 Contesta las preguntas correctamente. 1. ¿Para qué sirve el panel Layers (Capas)? Las capas sirven para organizar todos los elementos que componen o pueden componer a la imagen vectorial, desde formas básicas hasta el color. 2. Explica brevemente ¿cómo se usa una máscara de recorte y para qué sirve? Es un objeto o grupo de objetos cuya forma enmascara las ilustraciones que se encuentran en la parte de abajo, de manera que sólo se pueden ver las ilustraciones que están dentro de la forma de la máscara. 3. Describe brevemente qué opciones encontramos en el cuadro de diálogo Transformar. Mover: desplazar objetos de manera horizontal y vertical. Escalar: modificar el tamaño de los elementos. Rotar: Girar objetos en un ángulo determinado. Inclinar: Permite distorsionar un objeto en sentido horizontal y vertical. 54 El sistema Pantone®, es una guía de color con 1114 colores clasificados por tono y sus variaciones hacia la claridad y oscuridad. Cada uno tiene asignado un número y lleva impresa la fórmula para reproducirlo con exactitud a partir de una serie de 14 colores: Pantone Basic Colors. Un id ad 0 4 NIVEL: Básico C olor DURACIÓN SUGERIDA: 3 SESIONES / 45-50 MINUTOS Durante el desarrollo de esta unidad aprenderás a: AConocer los conceptos del color. Identificar cada una de las herramientas del cuadro de diálogo Relleno y Trazo, así como, ponerlos a la práctica en diferentes actividades y proyectos para reafirmar los conceptos aprendidos. Diseño Vectorial Inkscape Autor: Carlos Zepeda Chehaibar Diseño Vectorial Inkscape tema A Color El mundo está lleno de color que nos ayuda a diferenciar las cosas, los animales e incluso las personas. Pero ¿Qué es el color? ¿De dónde viene? ¿Cómo se hace el color naranja, verde o morado? Cuando no hay luz, todo se ve negro y pareciera que el color ha desparecido, pero no es así. El color realmente no desaparece, pero como el color es sólo una sensación provocada por la luz, sin luz no percibimos el color. El color es muy importante en el diseño gráfico. El color es el medio más subjetivo para expresar las ideas. El color tiene el poder de la atracción o el rechazo, dependiendo del uso que se le dé. Los colores dan sensación de movimiento. Las emociones, sensaciones y todo lo que los colores pueden llegar a expresar y hacer sentir al espectador, forman parte fundamental de un buen diseño. Fotografía cortesía de Thy Bun. Usada con permiso. ¤¤ ¤¤ ¤¤ ¤¤ Imagen 4-1: Color en el diseño La Psicología del color Los colores despiertan emociones y sentimientos específicos en las personas. Hay estudios amplios y serios con respecto al factor psicológico del color, que se basa en las diferentes impresiones que surgen del ambiente creado por el color, como la sensación de calma, recogimiento, plenitud, alegría, opresión, violencia o incluso hambre. La psicología de los colores los clasifica de la siguiente manera: ¤¤ Colores cálidos: Estos colores se proyectan hacia afuera y atraen la atención. Los colores cálidos son fuertes, agresivos y parecen vibrar dentro de su espacio. Se relacionan con el sol, el fuego y el calor. La intensidad de los colores cálidos provoca el aumento de la presión sanguínea y estimula el sistema nervioso. El rojo, naranja y amarillo son ejemplos de colores cálidos. 56 Color Fotografía cortesía de Thy Bun. Usada con permiso. ¤¤ Colores fríos: Los colores fríos remiten a la nieve y el hielo. En su estado más brillante son dominantes y fuertes. Los colores fríos aminoran el metabolismo y aumentan la sensación de calma. El azul claro, el blanco o el turquesa son ejemplos de colores fríos. Imagen 4-2: Colores fríos. ¤¤ Colores claros: Son colores casi transparentes. Cuando la claridad aumenta, las variaciones entre los distintos tonos disminuye. Los colores claros generan la sensación de amplitud en los alrededores y sugieren liviandad, descanso, suavidad y fluidez. Se relacionan con la primavera y el verano. ¤¤ Colores oscuros: Los colores oscuros son tonos que tienen negro en su composición. Encierran el espacio y lo hacen parecer más pequeño. Los colores oscuros son concentrados y serios. Se relacionan con el otoño y el invierno. Fotografía cortesía de Thy Bun. Usada con permiso. ¤¤ Colores brillantes: La claridad de los colores brillantes se logra por la omisión del gris o el negro. Los colores azules, rojos, amarillos y naranjas son colores de brillo pleno. Los colores brillantes son vivos y atraen la atención. Imagen 4-3: Colores oscuros. 4-01 LÁMINA Color 57 Diseño Vectorial Inkscape ACTIVIDAD 4-01 Comprendiendo el color Contesta las preguntas correctamente. 1. ¿Qué enunciado es el correcto para definir el color? a.El color es algo que pinta un objeto. b.El color es una visión óptica del ojo o un espejismo. c.El color es la impresión sensorial capatada por el ojo, que produce la luz sobre cualquier objeto. d.Ninguna de las anteriores. 2. Acomoda las palabras en el enunciado según corresponda: 1666 luz blanca prisma o vidrio rojo amarillo verde azul índigo y violeta Isaac Newton luz del Sol siete 1666 Isaac Newton descubrió en el año luz blanca siete que la estaba formado, por colores: rojo, amarillo, verde, azul, índigo y violeta Demostró su descubrimiento al descomponer un rayo de luz del sol haciéndolo pasar a través de . un prisma o vidrio . 3. Ejemplifica cada una de las dimensiones de color con un solo recorte de alguna revista, señalando con una flecha la característica que quieres representar. Por ejemplo, puedes pegar una fotografía de una playa y señalar zonas con mayor o con menor brillo. 58 Color ACTIVIDAD 4-02 El color, la luz y el ojo Para esta actividad necesitarás una linterna y un lugar oscuro. 1. Asegúrate que el lugar donde harás la actividad esté bien oscuro. Puedes utilizar cartulinas negras o cortinas para cubrir las ventanas o fuentes de luz del salón de clases o bien realizar la actividad en tu casa, ya sea por la noche o en un lugar sin luz. 2. Ilumina con la linterna diferentes objetos y observa cómo surge el color y cómo cambia con diferentes intensidades o ángulos de iluminación. 3. Tomando en cuenta las propiedades o dimensiones del color que hemos visto, realiza un ensayo breve, donde expliques tus conclusiones acerca de la relación entre el color y la luz. Explica también cómo se relaciona el experimento con las propiedades del color. La luz produce una impresión sensorial en cualquier objeto llamado color. Al alumbrar con la linterna (luz) el color va apareciendo, simplemente estaba oculto. Clasificación del color Los colores se clasifican en: ¤¤ Colores primarios: El espectro solar tiene tres colores que se consideran primarios: amarillo, rojo y azul. Se llaman colores primarios porque constituyen la base para formar a los demás colores. Los colores primarios no pueden obtenerse mezclando otros colores. También se les denomina colores puros. Imagen 4-4: Colores primarios. 59 Diseño Vectorial Inkscape ¤¤ Colores secundarios: De la unión de dos colores primarios se obtiene un color secundario o binario. Los colores secundarios son: verde, violeta y naranja. Imagen 4-5: Colores secundarios. ¤¤ Colores terciarios: Se obtienen al mezclar un color secundario con uno primario. Los colores terciarios son: rojo violeta, rojo anaranjado, amarillo anaranjado, amarillo verde, azul verde y azul violeta. Imagen 4-6: Colores terciarios. T IP 60 En el cuadro de diálogo Relleno y Borde, los colores primarios se identifican como Yellow (Amarillo), Pure Red (Rojo puro) y Pure Blue (Azul Puro). Color ¤¤ Colores complementarios: En el círculo cromático, los colores complementarios se encuentran opuestos. Por ejemplo, son colores complementarios: rojo y verde, naranja y azul, violeta y amarillo. Los colores complementarios tienen la propiedad de resaltar en forma notable cuando se colocan uno al lado del otro. Imagen 4-8: Colores complementarios. ¤¤ Colores armónicos: Son los que se encuentran próximos dentro del círculo cromático. Por ejemplo, son colores armónicos: naranja y rojo, azul y verde, amarillo y naranja, violeta y azul, verde y amarillo. Cuando se utilizan los colores armónicos en una composición, el paso de un color a otro es sutil y sin contraste, por lo que el resultado es de agradable tranquilidad. Imagen 4-9: Colores armónicos. El Círculo Cromático El círculo cromático es la representación de todos los colores. En él vienen expresadas las combinaciones de color a partir de los tres colores primarios. El círculo cromático es la forma más práctica de organizar los colores. El círculo cromático que se muestra, representa los colores primarios, secundarios y terciarios. Hay círculos que muestran una gama de colores más amplia, simplemente representando los colores intermedios alrededor de la circunferencia. Imagen 4-7: Círculo cromático. 61 Diseño Vectorial Inkscape ACTIVIDAD 4-03 Diagramas de color 1. En un nuevo documento de Inkscape, tamaño carta, realiza los siguientes diagramas: ¤¤ C olores Primarios ¤¤ Colores Secundarios ¤¤ Colores Terciarios En cada diagrama especifica el nombre del color y pon un título para identificar el diagrama. 2. En los Recursos Digitales se encuentra la aplicación CirculoCromatico.exe. Abre este programa y verás que hay un círculo cromático sin color. 3. Mueve los deslizadores que corresponden a los colores RGB para formar un color. Arrastra el color formado hacia alguna sección del círculo para que se pinte. Iguala en el programa el círculo que se muestra en la imagen “Circulo cromático.exe”. 4. Cuando hayas terminado, imprime tu trabajo en papel. 5. En el siguiente diagrama, anota los valores RGB que tuviste que utilizar para cada una de las secciones del círculo cromático. R=153 G=0 B=0 R=73 G=48 B=173 R=5 G=29 B=171 Imagen 4-10: Círculo Cromático.exe R=245 G=0 B=51 R=255 R=254 R=73 G=0 G=92 G=48 B=0 B=51 B=137 R=5 R=254 G=29 G=255 B=171 B=51 R=2 G=48 B=197 R=10 G=188 B=0 R=254 G=92 B=51 R=254 G=171 B=51 R=254 G=255 B=51 R=10 G=188 B=0 R=0 G=184 B=190 62 R=255 G=0 B=0 R=9 G=216 B=0 Color PROYECTO 4-01 Creando un mural 1. En un nuevo documento de Inkscape, crea 6 rectángulos de 10 cm. de ancho por 1 cm. de alto. Coloca los rectángulos uno sobre otro dejando un espacio entre ellos. Utiliza el cuadro de diálogo Alineación para alinear sus márgenes y distribuirlos uniformemente en la mitad izquierda del documento. 2. Rellena cada uno de los rectángulos con un degradado que vaya de un color cualquiera a su color complementario (opuesto en el círculo cromático). Una forma de crear un relleno degradado es: a.Selecciona uno de los rectángulos. b.En la Caja de Herramientas selecciona la herramienta Crear y editar degradados, en la barra Controles de Herramienta selecciona la opción Degradado Lineal, asegurándote que la opción Crear gradiente en relleno esté seleccionada. c.Para establecer un gradiente se necesitan mínimo dos puntos (llamados paradas) que determinan la región de transición de un color a otro. Haz un clic sostenido, iniciando desde el extremo izquierdo del rectángulo, terminando en el extremo derecho. Puedes notar como se va formando el gradiente a medida que vas avanzando. d.Ahora debes modificar el gradiente para asignar los colores correspondientes a cada parada. En la barra Controles de Herramienta haz clic en el botón Editar para abrir el cuadro de diálogo Editor de degradados. En el editor se muestra una vista previa del degradado, debajo está la Parada activa, al dar clic en este campo se muestra una lista con las paradas que forman el gradiente. Selecciona la parada que deseas editar y utiliza los controles deslizables de la ficha RGB para modificar su color. 3. Asegúrate que los colores inicial y final son complementarios. Utiliza diferentes colores complementarios para cada rectángulo. 4. Ahora crea otro conjunto de 6 rectángulos, alínealos y distribúyelos en la mitad derecha del documento. 5. Rellena este nuevo grupo de rectángulos con degradados, que vayan de un color cualquiera a otro cercano en el círculo cromático (colores armónicos). 6. Utiliza texto para identificar cada grupo de rectángulos y para escribir los nombres del color inicial y final en cada uno de ellos. 7. Guarda tu trabajo con el nombre Colores en la carpeta que indique tu profesor. 63 Diseño Vectorial Inkscape ACTIVIDAD 4-04 Campaña publicitaria de un producto alimenticio 1. Organicen equipos de trabajo de 3 a 5 personas cada uno. Consigan imágenes relacionadas con publicidad de alimentos en revistas, periódicos e Internet. 2. Observen las estrategias adoptadas por los publicistas: tipo de eslogan, forma de atraer la atención del cliente, recursos gráficos o verbales utilizados para la creación de la campaña del producto. Elige alguno y anota algunas conclusiones: a.¿Qué colores son predominantes? b.¿Qué clasificación de color predomina desde el punto de vista de la psicología del color? c.¿Qué sensaciones o emociones consideras que esa combinación de colores genera? d.¿A qué segmento de mercado (personas) está dirigida la publicidad que elegiste? e.¿Crees que la elección del color es importante para la publicidad? ¿Por qué? f. ¿Cómo te imaginas que se eligen los colores para un empaque o anuncio publicitario? 3. Prepara una breve exposición de 5 minutos máximo, donde expliquen a los otros equipos lo que han logrado concluir y muestren el estudio realizado. 64 Color Paleta de colores Recuerda que en la Paleta de colores puedes escoger el color con el que quieras pintar un gráfico. Puedes seleccional una paleta de color predeterminada o una configurada, dependiendo del gráfico y destino que vayas a necesitar. Por otro lado, con la Paleta de colores puedes colorear tambien los bordes y rellenos de las figuras seleccionadas. Esta paleta se puede mostrar con el menú Ver/Mostrar|Ocultar/Paleta. Imagen 4-11: Paleta de colores Muestras Personalizadas Para cada documento, Inkscape crea una paleta llamada Auto con Muestras Personalizadas la que incluye colores uniformes y degradados. Las muestras personalizadas de colores uniformes se muestra como degradados de una sola parada. Para crear una Muestra Personalizada: ¤¤ Selecciona el objeto que tenga el color que deseas agregar a la paleta. ¤¤ En el cuadro de diálogo Relleno y Borde (si no esta visible utiliza las teclas <Mayús+Ctrl+F>), haz clic en el icono Muestra . Para asignar una Muestra Personalizada a un objeto tienes varias opciones: ¤¤ Seleccionar un color de borde o relleno de la paleta Auto. Si no está activa puedes utilizar el menú emergente de la Paleta de colores para hacerla visible. ¤¤ Abrir el cuadro de diálogo Muestras con menú Ver/Muestras o las teclas <Mayús+Ctrl+W>, seleccionar el objeto y después una muestra del cuadro de diálogo. Para establecer el color de Relleno de un objeto haz clic directamente sobre la muestra. Si mantienes presionada la tecla <Mayús> al seleccionar la muestra, ésta se asignara al color de Borde. ¤¤ En el cuadro de diálogo Borde y Relleno, selecciona si quieres afectar el borde o relleno. Después haz clic en el icono y selecciona la muestra que quieres aplicar de la galería Muestra Relleno. La muestra se puede modificar en el cuadro de diálogo Borde y Relleno. Al modificarla, todos los objetos que tengan asignada esta muestra, se verán afectados con el cambio. 4-01 VIDEO Paleta de color y cuadro de diálogo Muestras 65 Diseño Vectorial Inkscape ¿Qué aprendiste? TEMA A:A conocer y comprender el concepto de color, su clasificación, psicología y su uso; a identificar herramientas que permiten modificar los parámetros de color de los objetos. EVALUACIÓN 04 Contesta las preguntas correctamente. 1. ¿Qué es el color y cómo se clasifica? Se llama color a la impresión sensorial que produce la luz sobre cualquier objeto y que es captada por el ojo. La luz reflejada produce una impresión sobre la retina. Dicha sensación se transmite al cerebro por medio del nervio óptico. El color se clasifica en colores primarios, secundarios y terciarios. 2. ¿Qué es el círculo cromático? El círculo cromático es la representación de todos los colores. En él, vienen expresadas las combinaciones de color a partir de los 3 colores primarios. Es la forma más práctica de organizar los colores. 3. Menciona las características de los colores cálidos: Los colores cálidos proyectan hacia afuera y atraen la atención, son fuertes, agresivos y parecen vibrar dentro de su espacio. Se relacionan con el sol, fuego y calor. La intensidad de los colores cálidos provoca el aumento de la presión sanguínea y estimula el sistema nervioso. 4. ¿Cuál es la diferencia entre una tinta plana y una selección de color? •Tinta plana: Es una tinta especial. •Selección de color: Cuatricromía (CMYK), combinación de tintas. 66 Los cuadros de diálogo y la barra Controles de Herramienta, permiten introducir valores numéricos en las casillas que modifican la apariencia del objeto o herramienta. Un id ad 05 NIVEL: Básico Mejora ndo d i seño s DURACIÓN SUGERIDA: 5 SESIONES / 45-50 MINUTOS Durante el desarrollo de esta unidad aprenderás a: AModificar la apariencia de un objeto mediante, el cambio de estilo de trazo y la aplicación de un degradado al relleno. B Aplicar los conceptos aprendidos para la creación de un logotipo, utilizando las herramientas contenidas en esta unidad. C Conocer el concepto de opacidad al efectuar cambios en parámetros de los cuadros de diálogo y aplicar modos de mezcla en composiciones. DComparar las opciones del menú Trazo, con funciones matemáticas para crear figuras complejas con objetos simples E Comprender cada uno de los efectos que maneja Inkscape para conocer cada uno y aplicarlo según el trabajo a realizar. Diseño Vectorial Inkscape Autor: Carlos Zepeda Chehaibar Diseño Vectorial Inkscape tema A Bordes y Rellenos creativos Estilo de trazo Los atributos de trazo se pueden utilizar solamente cuando se dibujan objetos. Los atributos de la pestaña Estilo de trazo determinan si una línea es continua o punteada, así como el estilo de la línea punteada, el grosor de la línea y el estilo de las líneas y el estilo de la punta. Utiliza la pestaña Estilo de trazo del cuadro de diálogo Relleno y borde para optimizar los atributos de las líneas: Ancho de trazo, tipo de unión, límite de inglete, si la línea va a ser continua o con guiones, marcas de inicio, medias o finales y el estilo de la punta de nuestra línea.Para ajustar el trazo sigue estos pasos: 1. Utiliza la herramienta Selector para elegir el objeto cuyos atributos de trazo que deseas modificar. 2. Muestra el cuadro de diálogo Relleno y borde con menú Objeto/Relleno y borde. Después selecciona la pestaña de Estilo de trazo. 3. Para especificar la anchura del trazo: determina las unidades que deseas trabajar, generalmente el trazo se mide en puntos (pt), introduce un valor en el campo de Ancho de trazo. 4. Modifica cualquiera de las opciones del panel: Imagen 5-1: Ficha Estilo de trazo. ¤¤ Unión: Cuando se tienen vértices rectos se pueden modificar a redondos. ¤¤ Unión de tipo inglete: Se debe introducir un valor mínimo comprendido entre 1 y 100, el cual controla los remates. ¤¤ Unión Redonda: Hace las esquinas redondeadas. ¤¤ Unión Biselada: Hace las líneas con extremos en relieve. ¤¤ Punta: Puede cambiar la forma en que finalizan los vectores que no están cerrados. ¤¤ Tope embutido: Hace las líneas con extremos cuadrados. ¤¤ Tope redondo: Hace las líneas con extremos semicírculos. ¤¤ Tope cuadrado: Hace líneas con extremos cuadrados que se extienden más allá del extremo de la figura, con la mitad del grosor. ¤¤ Línea Punteada: Se pueden hacer líneas con aspecto de costura, seleccionando uno de los patrones disponibles en la galería. ¤¤ Marcas: Se puede elegir un adorno de la galería para el inicio, mitad y fin de una línea por separado. 68 Mejorando diseños 5-01 VIDEO Opciones de trazo Degradados Inkscape cuenta con varias opciones para aplicar degradados al relleno y al borde de los objetos. Con la herramienta Crear y editar degradados seleccionada, en la barra Controles de Herramienta es posible elegir: ¤¤ ¤¤ ¤¤ ¤¤ Entre crear degradado lineal o radial . Selecciónar si el degradado se aplicará al Relleno o al Borde . Escoger un degradado de la galeria . Abrir el cuadro de diálogo Editor de Degradado para modificar los parametros de color del degradado . Al crear un degradado, Inkscape toma el color base como color de inicio y para el color final modifica el canal Alfa a cero para crear un color transparente. El canal Alfa modifica la opacidad de un objeto. Los controles de la barra no tiene mezcladores para determinar de forma manual los puntos inicial y final de un degradado, es necesario editarlo. Los colores del degradado se definen con una serie de puntos (un mínimo de dos), que reciben el nombre de paradas. Una parada, es el lugar en que un degradado pasa de un color al siguiente. Con ayuda del cuadro de diálogo Editor de degradado puedes modificar la configuración de cada una de las paradas que conforman el degradado. Para cambiar el color de una parada, selecciónalo y utiliza los controles de Color de Parada. Vista previa Selector de parada activa En la opción Añadir parada podemos añadir paradas para crear degradados más complejos. Desvío Selector de Modo de Color Al tener más de dos paradas en un degradado, con el control Desvío puedes determinar la posición de cada parada adicional. Valor hexadecimal de la parada Utiliza Borrar parada para eliminar la parada activa. 5-02 VIDEO Imagen 5-2: Cuadro de diálogo Editor de gradiente Controles de la herramienta degradado 69 Diseño Vectorial Inkscape PROYECTO 5-01 Papelería de identificación personal 1. Inicia Inkscape y abre el archivo Tarjeta30.svg que se encuentra en los Recursos Digitales. Esta plantilla te servirá para crear una tarjeta de presentación en formato horizontal. 2. Selecciona la herramienta Crear y editar objetos de texto de la caja de herramientas e introduce tus datos: nombre de una empresa, tu nombre completo, cargo u ocupación, dirección, teléfono, correo electrónico y página Web. Recuerda que puedes modificar los atributos de texto desde las opciones de texto desde la barra Control de Herramienta. 3. Para agregar iconos o logotipos a tu tarjeta, los puedes descargar de Internet y vectorizarlos con la herramienta Dibujar curvas Bézier y líneas rectas en Inkscape. Acomódalos de tal manera que queden en armonía con los demás elementos. 4. Utiliza las herramientas Spray y Alinear y distribuir, para hacer más vistosa la tarjeta. organiza los elementos de la tarjeta con ayuda del menú Objeto. 5. Los elementos creados con la herramienta Spray en muchas ocasiones se salen de la página, por lo que es recomendable que hagas una máscara de recorte al proyecto final para que tu tarjeta se vea más atractiva y tenga mejor impacto. Guarda el trabajo terminado con el nombre Papelería_1.svg en la carpeta que indique tu profesor. 6. Cuando esté terminada tu tarjeta de presentación, crea los siguientes elementos de papelería personalizada. Para cada uno hay archivos base que debes tomar como base. Cuida mantener uniformidad en toda la papelería usando los mismos colores, elementos, trazos y diseños. Crea máscaras para cada objeto. Guarda los documentos con nombres consecutivos (Papeleria_2.svg, Papeleria_3.svg, etcétera). Elemento 70 Nombre del archivo base Tarjeta de presentación vertical tarjetas02.svg Exterior de caja para CD (Posterior) cd charola ext.svg Interior de caja para CD cd charola int.svg Frente de caja para CD cd panel frontal.svg CD etiqueta de cd.svg Folder con un sobre interno folder01.svg Folder con dos sobres internos folder02.svg Sobre sobre-mini.svg Mejorando diseños tema B Logotipos El logotipo es un elemento de comunicación visual que tiene como misión facilitar el recuerdo de una marca, imagen o elemento gráfico. En sus orígenes, el logotipo surge de la necesidad de identificar a los productos producidos en serie y actualmente se utiliza ampliamente como identificación de empresas, productos, servicios, artistas y hasta personas. 5-01 LÁMINA Logotipos ACTIVIDAD 5-01 Analizando logotipos 1. Observa con atención y analiza los logotipos de la Lámina Lógotipos 2. Organiza una mesa redonda o discusión para comentar en grupo acerca de cada uno de los logotipos. ¿Qué será lo que los hace fáciles de recordar? ¿En qué década habrán sido diseñados? ¿Han tenido cambios significativos con el paso del tiempo? ¿Crees que representan los valores de una marca? ¿Qué valores? ¿Qué precios? ¿A qué personas están dirigidos? 3. En Internet, usando algún motor de búsqueda (Google®, Yahoo®, Altavista® o cualquier otro), encuentra anuncios, logotipos o cualquier tipo de imagen de marcas reconocidas como: Grupo Educare®, Gatorade®, Microsoft Office®, Mont Blanc®, Palm®, etc. 4. Usando Inkscape, pega las imágenes en un documento, organízalas y etiquétalas. Utiliza máscaras de recorte para delimitarlas en diferentes capas. 5. Elige 3 de las marcas y contesta las siguientes preguntas: Marca 1: a.Analizando exclusivamente la imagen y sin tomar en cuenta ningún otro conocimiento que tengas de la marca ¿A quién crees que va dirigida (niños, niñas, jóvenes, adultos, ancianos)? ¿Por qué? 71 Diseño Vectorial Inkscape b.¿Crees que esta marca ha sobresalido de las demás gracias a su imagen? ¿Por qué? c.¿Cómo mejorarías la imagen de esta marca? Marca 2: d.Analizando exclusivamente la imagen y sin tomar en cuenta ningún otro conocimiento que tengas de la marca ¿A quién crees que va dirigida (niños, niñas, jóvenes, adultos, ancianos)? ¿Por qué? e.¿Crees que esta marca ha sobresalido de las demás gracias a su imagen? ¿Por qué? f. ¿Cómo mejorarías la imagen de esta marca? Marca 3: g.Analizando exclusivamente la imagen y sin tomar en cuenta ningún otro conocimiento que tengas de la marca ¿A quién crees que va dirigida (niños, niñas, jóvenes, adultos, ancianos)? ¿Por qué? h. ¿Crees que esta marca ha sobresalido de las demás gracias a su imagen? ¿Por qué? i. ¿Cómo mejorarías la imagen de esta marca? 72 Mejorando diseños PROYECTO 5-02 Creando un logotipo 1. Crea en una hoja en blanco, dos o tres ideas para un posible logotipo que te represente. Puedes utilizar cualquier elemento de diseño excepto fotografías. Tu logo personal debe tener una razón teorizable; esto quiere decir, debe tener un “por qué” y un “para quién”. No olvides que un logo te diferencia e identifica de los demás. 2. Inicia un nuevo documento de Inkscape en tamaño carta. 3. Comienza a trazar tu logotipo. Considera algunos de estos aspectos: ¤¤ Las orillas filosas indican tensión, fuerza o formalidad. Las orillas suaves muestran fluidez, casualidad o más naturalidad. ¤¤ El cuadrado denota estabilidad, igualdad y honestidad. El triángulo sugiere tensión, conflicto o acción. ¤¤ Puedes dibujar un logo complejo a partir de círculos, cuadrados o triángulos. Los puedes agrupar para obtener interesantes motivos. Alternando dirección de color o interponiendo un motivo con una forma básica alineada o sin alinear, agrega ideas abstractas. 4. Dale color a tu logo tomando en cuenta todo lo que has aprendido acerca de lo que los colores representan y cómo combinarlos. Puedes utilizar los colores sólidos o degradados para darle volumen y mayor presencia. No te excedas en los degradados, ya que un logo se caracteriza por su fácil comprensión y retención, tanto en su forma como en su color. 5. Una vez terminado el logotipo, crea una tarjeta de presentación para ver cómo se ve aplicado en un documento real. Si lo deseas, puedes usar alguna de los archivos de los Recursos Digitales o bien, iniciar un nuevo documento de 9 x 5 cm. para crear la tarjeta. Incluye en la tarjeta tu nombre y datos personales. 6. Guarda la tarjeta de presentación y logotipo en la carpeta de costumbre. 73 Diseño Vectorial Inkscape tema C Transparencias Opacidad Inkscape permite aplicar efectos de transparencia a los objetos, como fusiones y difuminados, sombras paralelas suaves y bordes borrosos. Además, puedes cambiar la opacidad de un objeto, es decir, el grado en que es visible o no. Una opacidad del 100 % hace que el objeto se vea completamente sólido, al 50 % se convierte en semitransparente y se vuelve transparente si llega al 1 % de opacidad. El control deslizable Opacidad esta dispopnible en varios cuadros de diálogo: Relleno y Borde, Capas, etcétera. Su valor está determinado en porcentaje. Imagen 5-3: Control deslizable Opacidad. Máscara de opacidad ¿Recuerdas lo que es una máscara en Inkscape? Ya estudiamos antes que las máscaras son objetos que se colocan sobre las imágenes para mostrar u ocultar diferentes zonas. La máscara de opacidad es un objeto en escala de grises (tonos de blanco a negro) que muestra lo que se pinta con blanco y oculta lo que se pinta con negro. En todos los tonos intermedios de la gama de grises, la máscara actúa como niveles de transparencia. La máscara de opacidad nos permite aclarar zonas de la imagen, fusionando de manera muy suave los elementos. Son muy útiles para lograr efectos detallados. Recuerda que cuando se usan máscaras (para recortar o de opacidad), no se modifican ni eliminan los objetos de la imagen, sólo se ocultan. De esta manera, puedes trabajar en la máscara las veces que sea necesario para mostrar u ocultar diferentes zonas en el futuro. Las siguientes reglas se aplican a las Máscaras: ¤¤ Una máscara y los objetos que se van a enmascarar pueden estar en capas diferentes. ¤¤ El primer objeto de la capa se convierte en la máscara de cualquier elemento que sea un subconjunto de la capa. ¤¤ Los atributos de apariencia del objeto Máscara deben tener claridad máxima, es decir, estar en blanco, tanto trazo como relleno. Para tener como resultado un objeto enmáscarado opaco. Si los atributos tienen algún otro color, la opacidad y claridad resultante variará. ¤¤ Un objeto enmáscadado resulta transparente cuando la Máscara tiene claridad mínima, es decir, es de color negro. ¤¤ Las zonas del objeto enmascarado que están fuera del trazo de la Máscara, serán transparentes. 74 Mejorando diseños Para crear una máscara: 1. En la pizarra coloca la imagen u objetos que deben convertirse en el conjunto de recorte. 2. Organiza los elementos, recuerda que el objeto que será la máscara de recorte debe ir al frente. 3. Realiza la selección de los elementos y crea la Máscara mediante menú Objeto/Máscara/ Aplicar, o haz clic con el botón secundario y selecciona Aplicar Máscara del menú emergente. PROYECTO 5-03 Degradado transparente en fotografiás 1. En un nuevo documento de Inkscape coloca la imagen Ola.tif que se encuentra en los Recursos Digitales. 2. Toma la herramienta de Crear círculos, elipses y arcos, dibuja una forma que abarque casi toda la fotografía. 3. Aplica a la elipse un degradado radial de blanco a negro, situando el color blanco en el centro de la elipse y el color negro hacia el contorno de la elipse. 4. Selecciona los dos objetos, haz clic con el botón derecho del ratón sobre los objetos y selecciona Aplicar Máscara del menú emergente. Recuerda que la máscara es reversible seleccionándola y después usar menú Objeto/Máscara/Liberar. Así se podrá editar de nuevo el degradado para después convertirlo en máscara. 5. Modifica los parámetros del degradado. Prueba con un degradado lineal o intenta agregar más puntos al degradado. Vuelve a colocar la fotografía original, aplícale una máscara de opacidad en forma de estrella con degradado radial de transparencia. 6. Guarda la imagen con el nombre Foto_trans.svg en la carpeta que te indique tu profesor. Imagen 5-4: Ejemplos del proyecto terminado 75 Diseño Vectorial Inkscape Modos de mezcla En Inkscape se puede controlar la manera en que se mezclan los objetos y las capas cuando se superponen. Esto lo controla el filtro Mezclar, el cual de forma predeterminada al crear un objeto o capa se establece en Modo Normal, que equivale a la no aplicación de dicho Filtro. Los modos de mezcla de disponibles son: ¤¤ Normal: es el modo de mezcla que consiste en aplicar el color de relleno seleccionado en el panel de herramientas, es el modo de mezcla predeterminado de capas que nos da el documento. ¤¤ Multiplicar: recoge la información de cada uno de los canales de color que componen a la imagen y la multiplican por el color de relleno, creando un color más oscuro. ¤¤ Pantalla: funciona como el modo de mezcla multiplicar, pero da como resultado colores claros. ¤¤ Oscurecer: la función de este modo es recoger la información de cada uno de los canales de color que componen a la imagen, los vectores más claros que el color de relleno serán reemplazados por un color más oscuro, mientras los más oscuros no serán modificados. ¤¤ Aclarar: modifica aquellos vectores que son más oscuros que el color de relleno, mientras que los colores mas claros permanecen sin modificación. Entre capas el efecto resultante dependerá del Modo de Mezcla que se elija del menú desplegable en el cuadro de diálogo Capas. Esta opción permite aplicar de forma rápida el filtro Mezclar a todos los objetos de la capa seleccionada. Inkscape tiene un problema “bug” que debe resolver para que el filtro trabaje correctamente entre objetos, una solución temporal es crear primero una capa, seleccionar un Modo de Mezcla y borrar la capa. Esto con la finalidad de activar una función “oculta”. Para aplicar un Modo de Mezcla a un objeto seleccionado utiliza menú Filtros/Editor de Filtros, para abrir el cuadro de diálogo Editor de Filtros: Haz clic en Nuevo. En el menú desplegable selecciona Mezclar . Haz clic en Agregar efecto. Selecciona el modo de mezcla. La segunda conexión asegúrate de conectarla con la Imagen de fondo. 6. Si deseas en el Panel Filtro asigna un nombre al filtro y por último activa la casilla de la izquierda. 1. 2. 3. 4. 5. 76 6 5 3 2 1 4 Imagen 5-5: Editor de filtros. Mejorando diseños PROYECTO 5-04 Conociendo los modos de mezcla 1. En un nuevo documento de Inkscape, importa el archivo Foto36.jpg de los Recursos Digitales. 2. Selecciona la herramienta Crear rectángulos y cuadrados, dibuja una forma sobre la fotografía cubriéndola toda. En el cuadro de diálogo Relleno y Borde, cambia el valor de la casilla RGBA por #be7c2aff, esto cambiará el color del rectángulo. 3. Agrupa la fotografía y el rectángulo con las teclas <Ctrl+G>. Duplica el grupo 4 veces con las teclas <Ctrl+D> y organiza los 5 grupos en la pizarra de modo que todos estén completamente visibles. 4. Selecciona los cinco grupos y desagrupalos utilizando menú Objeto/Desagrupar. 5. Prepara los filtros de Modo de Mezcla: a.Abre el cuadro de diálogo Editor de Filtros con menú Filtros/Editar Filtro. b.Utiliza el cuadro de diálogo Capas para crear una capa con el nombre Filtro Mezcla. c.Con la capa Filtro Mezcla seleccionada, cambia el modo de mezcla de la capa, al segundo de la lista. El modo de mezcla Normal no lo consideramos, porque es equivalente a que el filtro esté desactivado. d.Puedes notar en el cuadro de diálogo Editor de filtros, que se creo un filtro. Asígnale el nombre correspondiente al modo de mezcla seleccionado. e.Selecciona uno de los rectángulos y activa el filtro que creaste. f. Repite los pasos anteriores para crear sucesivamente los tres filtros de mezcla restantes, aplicando un modo de mezcla diferente a cada uno de los rectángulos, para tener una muestra de cada uno de los modos de mezcla. 6. Utiliza la herramienta Crear y editar objetos de texto para poner etiquetas encima de la fotografía, el nombre del Modo de mezcla que has utilizado. 7. Organiza todos los objetos en el documento, como muestrario de modos de mezcla. Puedes agrupar objetos, utilizar las herramientas de los cuadros de diálogo Transformar y Alinear para ordenar, distribuir y escalar los objetos para una máxima calidad en la presentación. 8. Guarda tu archivo con el nombre Catálogo_Modos.svg en la carpeta de costumbre. 77 Diseño Vectorial Inkscape tema D Operaciones de trazos Los comandos del menú Trazo, sirven para combinar dos o mas figuras con el fin de obtener nuevas formas y objetos. Al crear una forma compuesta, puedes incluir trazos, trazos compuestos, grupos y otras formas simples. También puedes utilizar texto, deformaciones, etcétera. Todos estos siguen siendo elementos editables. Las formas resultantes varían en función del método utilizado para combinar los trazados. Estos son los métodos de intersección que se encuentran dentro de las Opciones de trayecto: ¤¤ Unión: Define el contorno de todas las figuras como si fueran un único objeto combinado. ¤¤ Diferencia: Resta los objetos situados al frente del elemento situado al fondo. ¤¤ Intersección: Define el contorno del área con la que se superponen los objetos. ¤¤ Exclusión: Define las áreas de los objetos que no se superponen y convierte en transparencia las áreas que se superponen. ¤¤ División: Divide una parte de la ilustración. ¤¤ Cortar trayecto: Divide una ilustración. 78 Mejorando diseños 5-03 VIDEO Operaciones de trazo PROYECTO 5-05 Combinación de objetos para crear formas compuestas 1. Abre el programa Inkscape y crea un documento nuevo de 9 x 9 cm. 2. Selecciona las herramientas de figuras geométricas y dibuja cuatro objetos diferentes superpuestos. Dales a los objetos un color de relleno y un color de contorno. 3. Selecciona todos los objetos con la combinación de teclas <Ctrl+A> y duplicalos con las teclas <Ctrl+D>. 4. Colocalas en otra parte de la pizarra. Después, del menú Trazo da clic en la opción Unión. Haz un clic en cualquier lugar del documento fuera de la figura, para ver el resultado. 5. Aplica a la Unión un degradado de azul oscuro a azul claro tipo lineal y un un contorno azul oscuro. 6. Repite sucesivamente los pasos para crear una galería con todas las opciones de combinación de trazos del menú, aplicando degradados y contornos diferentes a cada una de las figuras resultantes. 7. Con la herramienta Crear y editar objetos de texto, crea títulos para cada uno de los trazos. El título debe corresponder a la operación aplicada. 8. Organiza cada uno de los diferentes trazos en la página de la pizarra. 9. Guarda el archivo con el nombre Galería_operaciones.svg como te lo indique tu profesor. 79 Diseño Vectorial Inkscape tema E Filtros y extensiones Ya trabajaste el filtro de mezcla, el cual permite modificar el aspecto visual al sobreponerse objetos. Existen muchos comandos más que te permiten cambiar el aspecto de los objetos que están disponibles en el menú Filtros. Todas las opciones del menú de filtros tienen submenús. Sin embargo, los filtros dan resultados distintos, así que es importante que identifiques cuándo se recomienda usar cada uno de ellos. 5-02 LÁMINA Filtros Para aplicar un efecto, simplemente selecciona el objeto y da clic en el efecto que deseas, algunos efectos aplican directamente el cambio y otros cuentan con un cuadro de diálogo independiente para su configuración. Los efectos son interactivos e independientes, lo que significa que se puede aplicar un efecto a un objeto sin alterarlo. Después de haber aplicado un efecto a un objeto, el cuadro de diálogo Editor de Filtros lo muestra en el panel Filtro que te permite editarlo, moverlo, duplicarlo ó eliminarlo. La edición de filtros es una opción compleja en Inkscape, por eso es recomendable utilizar de momento, los filtros que vienen predeterminados en la aplicación. 5-04 VIDEO Aplicación de filtros Las Extensiones son scripts o programas que pueden ser ejecutados desde Inkscape, haciendo que las capacidades y recursos del programa se amplíen y mejoren. Las extensiones están agrupadas en varias categorías: ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ ¤¤ 80 Color: Para modificar el color de un objeto o de un grupo de objetos Generar: Para crear un nuevo objeto. Generar desde trayecto: Para crear un nuevo objeto a partir de un trazo. Imágenes: Para extraer o incrustar imágenes de/en un archivo Inkscape. JessyInk: Para crear presentaciones que se pueden visualizar en navegadores de Internet. Modificar trayecto: Para modificar un trazo ya existente. Mostrar trayecto: Para extraer información sobre un trazo. Ordenar: Para reordenar objetos. Texto: Para manipular textos. Tramas: Para manipular los colores de imágenes en formato de mapa de bits. Mejorando diseños 5-05 VIDEO Extensiones PROYECTO 5-06 Trabajando con Filtros 1. En un documento en blanco de Inkscape Importa la imagen Insecto.bmp, que se encuentra en los Recursos Digitales. 2. Duplica varias veces la fotografía hasta llegar a un total de 20. 3. Organiza un mosaico de 4 imágenes horizontales por 5 verticales. 4. Separa las imágenes. Utiliza las funciones del cuadro de diálogo Alinear y distribuir para formar una organización perfecta. 5. Con ayuda del cuadro de diálogo Capas, cambia el nombre de la capa actual a Original. Duplica la capa Original cambiando el nombre de la capa duplicada, de tal forma que, corresponda con el nombre del primer grupo de filtros del menu Filtros. 6. Bloquea y oculta la capa Original. 7. Aplica a cada imagen un filtro diferente del grupo de filtros correspondiente al que le da nombre a la capa. Utiliza la herramienta Crear y editar objetos de texto para etiquetar e identificar el filtro aplicado con su nombre. 8. Bloquea y oculta la capa que contiene las imágenes (ya con el filtro) y el texto con el nombre del filtro. Haz visible la capa Original y repite los pasos para generar tantas capas como grupos de filtros disponibles en el menú Filtros. 9. Para finalizar duplica una última vez la capa Original, cámbiale el nombre a la capa duplicada por Filtros Combinados y aplica más de un filtro a una misma imagen, con ayuda de la herramienta Crear y editar objetos de texto indica el nombre de los filtro aplicados. Detalla tu trabajo, agrégale tu nombre. Cuida al máximo la presentación y limpieza. 10.Guarda el archivo terminado como Galería_Filtros.svg en la carpeta que indique tu profesor. 81 Diseño Vectorial Inkscape ¿Qué aprendiste? TEMA A:A identificar cada una de las herramientas de diferentes paneles y reforzando los conocimientos adquiridos a través de la realización de diferentes ejercicios. TEMA B: A crear un logotipo utilizando las herramientas de Inkscape en base a los conceptos de diseño adquiridos al desarrollar el tema. TEMA C: La aplicación de transparencias y máscaras de opacidad. La integración de imágenes sobrepuestas por medio de los diferentes modos de mezcla. TEMA D:A realizar composiciónes de elementos empleando los comandos disponibles en el menú Trazo. TEMA E: A aplicar cada uno de los efectos y las principales extensiones de Inkscape para conocer sus características y uso principal. EVALUACIÓN 05 Contesta las preguntas correctamente. 1. ¿Para qué sirve la máscara de opacidad? La máscara de opacidad nos permite aclarar zonas de la imagen, fusionando de manera muy suave los elementos. Son muy útiles para lograr efectos detallados. 2. ¿Cuál es la función de las operaciones de trazo? Sirven para combinar dos o más figuras con el fin de obtener nuevas formas y objetos. 3. ¿Qué es un efecto? Los efectos son interactivos e independientes, lo que significa que se puede aplicar un efecto a un objeto sin alterarlo. 4. ¿Qué es un logotipo? Es un elemento de comunicación visual que tiene como misión facilitar el recuerdo de una marca, imagen o elemento gráfico. 82 Las herramientas de dibujo vectorial por excelencia son: Lápiz <F6>: Permite realizar dibujos a mano alzada. Pluma <Mayús+F6>: Realiza un trazado vectorial mediante posición de nodos, a través de clics sobre el área de trabajo. Un id ad 06 NIVEL: Básico E lemento s de d ibu jo vector ia l DURACIÓN SUGERIDA: 4 SESIONES / 45-50 MINUTOS Durante el desarrollo de esta unidad aprenderás a: AComprender los elementos del dibujo vectorial aplicando conceptos como puntillismo, línea, ritmo, contorno y forma al crear composiciones. B Definir el concepto de espacio al analizar la relación que existe entre los objetos de un plano básico. C Utilizar herramientas para ajustar el texto a figuras geométricas o trazos. DIdentificar y describir los formatos en que pueden guardarse los archivos creados en Inkscape dependiendo el tipo de salida que tendrán. Diseño Vectorial Inkscape Autor: Carlos Zepeda Chehaibar Diseño Vectorial Inkscape tema A Los elementos del dibujo vectorial En diseño vectorial hay elementos que constituyen su base y desarrollo. Estos elementos son fáciles de observar. En nuestro entorno estos elementos siempre están presentes en los objetos más comunes y más complejos: puertas, sillas, computadores o vestidos. ¤¤ Punto: En diseño gráfico, un punto es la huella dejada por un lápiz, crayón, plumón, pincel o pluma en una superficie o plano. Es el elemento más sencillo y queda definido por su dimensión o tamaño, forma y color. ¤¤ Línea: En diseño gráfico, un punto en movimiento da como resultado una línea o un trazo. Una línea está formada por una sucesión de puntos, tan próximos uno de otro, que no se alcanzan a distinguir. ¤¤ Ritmo es el movimiento que se le da a la línea: es la repetición entre los elementos de las imágenes vectoriales o bitmaps. ¤¤ Contorno es el conjunto de líneas que limita una figura o composición. Cuando dos extremos de una línea se unen, se forma automáticamente un contorno y un relleno. A este efecto se le conoce como figura-fondo. ¤¤ Forma es la figura externa de los objetos, es decir la apariencia que representan los objetos de mundo sensorial. Por esa apariencia somos capaces de distinguir las cosas, personas, plantas y animales y diferenciarlos entre sí. Toda forma está integrada por: puntos, líneas, superficies y volúmenes. ¤¤ Composición: Toda obra o dibujo vectorial constituye una unidad compleja, integrada y organizada de alguna manera. A esta organización integrada se le denomina composición. La composición se define dentro del diseño como el proceso de adecuar o acomodar los elementos gráficos dentro de un espacio visual. ¤¤ Perspectiva se define como la ilusión visual que ayuda al observador a determinar la profundidad y la ubicación de los objetos a diferentes distancias. En un dibujo, la perspectiva simula la profundidad mediante efectos de reducción de dimensiones y distorsión angular. 6-01 LÁMINA 84 Elementos del dibujo vectorial Elementos de dibujo vectorial ACTIVIDAD 6-01 Técnica de puntillismo y línea 1. Necesitarás buscar en libros, revistas o Internet, una fotografía o un dibujo que te agrade. 2. Saca una fotocopia o imprímelo en escala de grises. 3. Coloca sobre la fotocopia una hoja de papel fabriano, acetato, albanene u otro papel delgado que te permita ver el dibujo que está debajo. 4. Con un lápiz calca el contorno de la imagen con trazado muy suave que después será borrado. 5. Ahora con un lápiz, pluma fuente o tinta de color, empieza a hacer pequeños puntos en la hoja de trabajo. Guíate por los tonos de la fotocopia o impresión: si el tono es muy negro, pon los puntos muy juntos, si es gris separa los puntos y en los espacios blancos deja sin puntos. 6. Trata que se distinga una silueta muy parecida a la original. Utiliza líneas para dar sombreados o texturas especiales. 7. Terminado el proyecto hazle un marco con cartulina o papel de color y expón tu trabajo en clase. ACTIVIDAD 6-02 Los elementos del diseño gráfico Contesta correctamente las siguientes preguntas. 1. Define forma. La forma es la figura externa de los objetos. 2. ¿Para qué sirve la forma de los objetos? La forma de los objetos sirve para distinguir las cosas, personas, plantas y animales. 85 Diseño Vectorial Inkscape 3. Ejemplifica forma, gráficamente. 4. ¿Cuáles son los elementos que componen la forma? a. formas geométricas b. formas orgánicas c. formas rectilíneas d. puntos, líneas, superficies y volúmenes e. a, b y c f. ninguna de las anteriores 5. Ejemplifica con un par de recortes de revistas o periódicos cada uno de los elementos del ritmo: movimiento, dirección, tamaño, proporción, color y superficie. Puedes utilizar una misma imagen para ilustrar más de un elemento, pero debes identificarlos claramente escribiendo el elemento y señalando qué parte de la imagen lo representa. 86 Elementos de dibujo vectorial tema B El Espacio Las formas del diseño gráfico quedan plasmadas en superficies: cuaderno, lienzo, pizarrón, hojas, madera, tela, muro, entre otros. En este espacio llamado también plano básico, se conocen como espacios negativos a las áreas vacías y se llaman espacios positivos a las áreas que tienen formas, figuras o imágenes. El plano básico es un elemento activo en la estructura del espacio. La relación de los elementos con el plano y de los elementos entre sí, obedecerá a uno de estos tres criterios: ¤¤ Superposición: las formas planas que están enfrente impiden la visión de las que están atrás. ¤¤ Transparencia: las formas planas que están detrás se aprecian a través de las formas que se encuentran adelante. ¤¤ Penetración: las formas planas se intercalan entre sí. Si se utilizan estos criterios, la posición relativa de las formas planas en el espacio puede expresar sensaciones de proximidad o lejanía. Debido a que se toma el plano como el soporte en donde se realiza el diseño, la primera elección que debes hacer es asignarle ciertos límites, los cuales determinan las dimensiones del soporte y de la imagen. Mediante las dimensiones que se den al plano, crearemos un espacio cuyas medidas y formas influyen en el resultado final del proyecto. El espacio construido de esta manera adopta diferentes formas geométricas (rectángulo, cuadrado, círculo) y tiene diferentes posiciones (vertical, horizontal o inclinada). 87 Diseño Vectorial Inkscape PROYECTO 6-01 Composición artística libre 1. En un nuevo documento de Inkscape (define el tamaño que consideres apropiado), crea con formas y líneas rectas y curvas una composición simétrica. La simetría se puede dar en la forma, en el color o en ambas. La composición debe adaptarse al espacio elegido (mesa de trabajo). 2. Aplica a las formas diferentes efectos, degradados y transparencias. Puedes usar herramientas de alineación, buscatrazos o cualquiera otra vista en clase, para dar mayor calidad y transmitir sensaciones al espectador. 3. Observa tu dibujo terminado. ¿Qué te hace sentir? ¿Qué te transmite? Anota algunas percepciones: 4. Guarda tu trabajo como Simetrico.svg. 5. Crea en un documento diferente una composición asimétrica, pero equilibrada. Define un espacio de trabajo apropiado. 6. Aplica efectos y otros elementos de diseño. 7. Observa tu composición terminada. ¿Consideras que transmite algún mensaje? Si no lo hace no está cumpliendo su función. Anota algunas percepciones: 8. Guarda la segunda composición como Asimetrico.svg. 9. Crea en un nuevo documento una composición abstracta. Toma en cuenta los conceptos que se han presentado acerca del punto y la línea, el ritmo, la forma, el contorno y el espacio. 10.¿Cuál es el mensaje que genera en el espectador? 11.Guarda la tercera composición como Abstracto.svg. 88 Elementos de dibujo vectorial ACTIVIDAD 6-03 Reflexión sobre perspectiva 1. Define perspectiva. Se define como la ilusión visual que ayuda al observador a determinar la profundidad y la ubicación de los objetos a diferentes distancias. 2. ¿Qué es el punto de fuga? El punto de fuga se localiza a la altura de la vista, sobre la línea de horizonte, ese punto hace que la imagen se abra hacia nosotros. 3. ¿En qué ayuda la perspectiva a un diseño? La perspectiva es fundamental en el diseño ya que crea profundidad y define la ubicación de los objetos. PROYECTO 6-02 Generando perspectiva 1. Abre en Inkscape el documento Siluetas.svg que se encuentra en los Recursos Digitales. El archivo contiene 6 siluetas de animales u objetos. 2. Utiliza la herramienta Crear y editar degradados, para aplicar degradados suaves a los objetos, de modo que den la sensación de tener volumen. Para ello debes elegir un color y aplicar una tonalidad clara para las zonas que deberían estar más cerca del espectador. Este tono se degrada a una tonalidad más oscura para las zonas alejadas o sombras. 3. Cuando hayas terminado de aplicar los degradados a las 6 formas, prueba utilizar las extensiones Generar desde trayecto/Movimiento y Modificar Trayecto/Perspectiva con parámetros suaves de perspectiva. No utilices efectos muy angulosos o pronunciados. 4. Aplica finalmente un efecto de sombra a cada una de las figuras. 5. Guarda tu trabajo con el nombre Perspectiva.svg en la carpeta que indique tu profesor. 89 Diseño Vectorial Inkscape PROYECTO 6-03 Ilustrando una fotografía Observa que interesante ilustración. Está basada en una fotografía (imagen izquierda) que se ha vectorizado con trazos usando la herramienta pluma y coloreado en Inkscape. En esta actividad tienes que hacer una ilustración similar. Imagen 6-1: Fotografía. Imagen 6-2: Ilustración vectorizada. 1. Escanea una fotografía de tu rostro en donde se vean claramente todos los detalles o bien localiza el archivo Rostro.tif que se encuentra en los Recursos Digitales e importalo en un documento nuevo de Inkscape. 2. Con ayuda del cuadro de diálogo Capas, cambia el nombre de la primer capa a Bitmap, aplica el bloqueo de capa y ajusta la opacidad a 30%. 3. Crea una Nueva Capa. 4. Con la herramienta Dibujar curvas Bézier y líneas rectas y la herramienta Dibujar líneas a mano alzada, empieza a trazar los contornos del rostro, como si estuvieras calcandola. a.Comienza por las zonas del rostro que quedarán en el fondo y deja para el final los detalles del frente, como los ojos o labios. b.Si lo requieres, puedes mover los trazos hacia delante o atrás empleando la herramienta Selector con ayuda de la barra Controles de Herramienta. c.También puedes usar operaciones de trazo, para combinar o intersectar formas. d.Incluye trazos para las sombras que se vean en la imagen. 5. Ahora rellena de color la cara, ojos, labios y cejas. Se obtiene un mejor efecto si utilizas degradados muy suaves (de dos o más colores muy cercanos en el círculo cromático). Toma como base los colores originales de la fotografía. 90 Elementos de dibujo vectorial 6. Rellena los trazos de las sombras con un degradado de blanco al color de la piel. Aplica el filtro Mezclar/Multiplicar. Recuerda que debes preparar el filtro para emplearlo. 7. Debes de ajustar el degradado de cada sombra para que quede uniforme. Lo puedes ajustar tomando la herramienta Crear y editar Degradados y arrastrando el cursor de extremo a extremo. 8. Puedes añadir más detalle al pelo. Crea efectos de sombra agregando modos de mezcla Multiplicar. Pon algunas luces de color con degradados o efectos. 9. Trata de hacer el gráfico lo más realista posible, sin olvidar que parte del interés es que se trata de una ilustración y no de una fotografía. 10.Al terminar elimina la capa donde se encuentra la fotografía original. 11.Guarda el archivo en la carpeta que tu profesor indique con el nombre Retrato.svg. TTIP IP Empleando el cuadro de diálogo Capas, puedes agregar capas para cada parte de la ilustración, ojos, cejas, cabello, etc. Las puedes bloquear, ocultar y organizar. Con la finalidad de tener un trabajo limpio y organizado. PROYECTO 6-04 Ilustrando paisajes 1. Elige una de las fotografías de paisaje que se encuentra en los Recursos Digitales. 2. Aplica las técnicas aprendidas para trazarla con vectores y colorearla. 3. Al terminar, elimina la capa donde se encuentra la fotografía original. 4. Guarda el archivo en la carpeta que tu profesor indique con el nombre Paisaje.svg. 91 Diseño Vectorial Inkscape tema C Organización del texto Inkscape es una excelente herramienta para diseño editorial, que te permitirá crear todo tipo de publicaciones como folletos, revistas, volantes y más. Para crear un texto bien estructurado y complementarlo con un trabajo de edición de imágenes, es importante saber organizar la tipografía. Inkscape permite crear texto en columnas y filas, aplicar diferentes formatos de párrafo y usar muchos estilos de letra. En el diseño para impresión sólo hay tres tipos de fuentes o tipografías que las imprentas manejan: ¤¤ Fuente PostScript: En la computadora cada fuente se compone de dos archivos. En uno de ellos se detallan los contornos de la fuente (*.pfb) y en el otro archivo están las medidas (*.pfm). Una tipografía son los estilos: normal, cursiva y negrita, que se componen de seis archivos: tres contornos y tres medidas. Si hay más variables, hay más archivos. ¤¤ Fuentes True Type: Cada fuente está formada por un solo archivo (*.ttf) que es multiplataforma, es decir, funciona en Sistemas Operativos Macintosh® y Windows®. ¤¤ Fuente OpenType: Son las fuentes más modernas. Son multiplataforma y están formadas por un solo archivo en el que va incluida toda la información necesaria. Además estas fuentes incluyen muchos más caracteres que las PostScript clásicas. Creación de contornos La opción de Objeto a trazo, que se encuentra en el menú Objeto, permite convertir textos en conjuntos de trazos compuestos que se pueden editar y manípular como si se tratara de un objeto gráfico, Al crear contornos a partir de texto, los caracteres conservan el formato gráfico, como el trazo y el relleno. Texto en un trazado Inkscape permite utilizar un trazo o trayecto como guía para un objeto de texto. Para esto crea una línea recta o curva con ayuda de las herramientas de dibujo disponibles en la Caja de herramientas de Inkscape, es recomendable realizarlo con la herramienta Crear curvas de Bézier y líneas rectas, debido a que su edición es bastante simple. Con la herramienta Crear y editar objetos de texto, escribe el texto deseado. Por último selecciona el texto y el trazo, utiliza el menú Texto/Poner en trazo para que el texto siga la forma del trazo. Imagen 6-3: Texto en un trazado 92 Elementos de dibujo vectorial Para modificar la apariencia del texto, puedes dar doble clic sobre el texto y con ayuda de la barra Controles de herramienta, cambiar su apariencia.También si modificas el trazo que sirve de base apara el texto, éste se ajustara de forma automática al nuevo trazo. Fluir texto en un marco En el comando Fluir en marco, encontrarás una opción que resulta divertida y de gran utilidad al realizar diseños con texto. Este comando, sirve para enmarcar el texto con un trazo o figura geométrica, respetando sus bordes. Basta con tener seleccionados los objetos, texto y forma geométrica, y luego utilizar Texto/Fluir en marco. Imagen 6-4: Texto fluido en un marco 6-01 VIDEO Trabajo con texto PROYECTO 6-05 Experimentando con texto 1. En un nuevo documento de Inkscape, crea textos y aplícales los siguientes efectos: a.Un texto sobre una línea curva. Elimina la línea para que sólo se vea el texto curveado. b.Un texto dentro de la forma de una elipse. c.Un texto alrededor de un cilindro, simulando ser la etiqueta de una lata. d.Un texto que simule estar en una bandera que ondula al viento. 2. Modifica las propiedades de fuente, tamaño y color de cada texto. 3. Guarda tu trabajo con el nombre Textos.svg en la carpeta que indique tu profesor. 93 Diseño Vectorial Inkscape PROYECTO 6-06 Página interna de una revista 1. Abre el documento Revista.svg incluida en los Recursos Digitales. 2. El archivo base, es una hoja en forma vertical, con un margen y medidas base. El objetivo de las líneas guía es, que al momento de la impresión, no existan errores al no respetar los márgenes de trabajo. 3. Activa las reglas de la aplicación con las teclas <Ctrl+R>. Arrastra una guía vertical desde la regla hasta el centro del documento. Haz lo mismo para crear una guía horizontal a la mitad de la hoja. 4. Ahora tienes cuatro cuadrantes dentro de la página. Dibuja un rectángulo en el primer cuadrante. No debe tener color de relleno, pero sí color de contorno. Debe abarcar todo el primer cuadrante. 5. Toma la herramienta Crear y editar objetos de texto para redactar un texto. Puedes escribir algo sobre ti o cualquier tema que te agrade. 6. Selecciona el rectángulo y el texto, utiliza menú Texto/Fluir en marco, para integrar el texto al rectángulo. 7. Para cambiar el tipo de letra, tamaño, interlineado y rotación usa las opciones de la barra Controles de Herramienta con la herramienta Crear y editar objetos de Texto activa. 8. Crea un rectángulo en el cuadrante opuesto e introduce texto en él. Utiliza los otros dos cuadrantes para colocar imágenes que hayas escaneado, fotografías, imágenes de Internet o ilustraciones creadas directamente en la aplicación. Las imágenes deben complementar el mensaje del texto y servir de apoyo visual. 9. Guarda el archivo con el nombre Revista.svg en la carpeta que te indique el profesor. T IP 94 Si vas a imprimir un documento que contenga texto, usando una computadora diferente a la que se usó para crear el archivo, es conveniente convertir el texto en trazado o Curvas (Create Outlines). Esto garantiza que el texto se imprima correctamente, aún cuando el equipo de impresión no tenga instaladas las fuentes que hayas utilizado. Elementos de dibujo vectorial tema D Salida de archivos En algún momento tendrás la necesidad de mostrar o compartir tu trabajo, ya sea con tu profesor, compañeros de clase o un cliente. En algunas ocasiones imprimir el proyecto no es suficiente ya que pueden surgir cambios que se deban realizar, subir a la Web, etc. Por eso es fundamental que conozcas el destino que tendrá tu trabajo para que le des la salida correcta. El formato nativo en Inkscape es SVG, que está basado completamente en XML (un lenguaje de marcas para intercambio de datos). Con SVG puedes usar XML y JavaScript para crear gráficos Web que respondan a las acciones del usuario, con efectos sofisticados como resaltados, sonido y animación. Esto quiere decir que los archivos con esta extensión se pueden reutilizar o importar fácilmente y conservan todos los datos de Inkscape. Inkscape también cuenta con la posibilidad de guardar documentos en formato Adobe PDF, que es un estándar para distribuir e intercambiar documentos electrónicos en todo el mundo, de forma segura y fiable. PDF es muy eficaz cuando se destina a impresiones. Aunque es posible guardar la ilustración para Web seleccionando la opción PNG, la cual soporta transparencias. es mucho más sencillo usar la opción Exportar mapa de bits o la combianción de teclas <Mayús+Ctrl+E>. Este cuadro de diálogo permite elegir entre varias opciones: ¤¤ Página: Exporta el área delimitada por la página ¤¤ Dibujo: Exporta todos los objetos dispuestos en la pizarra. ¤¤ Selección: Exporta la zona delimitada por todos los objetos seleccionados, tanto en la página como en la pizarrra. ¤¤ Personalizada: Se pueden introducir valores en los campos disponibles en el cuadro de diálogo. ¤¤ Si varios objetos son seleccionados y se activa la casilla Exportar todos los objetos seleccionados por separado se creará automáticamente un archivo PNG para cada uno de ellos. ¤¤ Si deseas exportar algunos objetos, seleccionalos, escoje el área del dibujo con los cuatro botones superiores y activa la casilla Ocultar todos excepto los seleccionados. Utiliza estas características de Inkscape si necesitas usar los archivos que creaste en otro programa y ese programa no admite los formatos nativos de Inkscape. También es altamente recomendable guardar el archivo original para realizar cambios. Después de una revisión algunas veces se requieren cambios. Si vas a realizar cambios a un archivo, procura antes guardarlo con el sufijo de la versión. Por ejemplo, si tienes el archivo Capas.svg y después realizarás cambios, antes de realizar cualquier cambio, puedes guardarlo como Capas_ver_2.svg. De esta forma tendrás el original y una “copia” modificada. Nunca se sabe si los cambios agradarán y si no guardaste un respaldo tendrás que trabajar nuevamente en deshacer los cambios. 95 Diseño Vectorial Inkscape ¿Qué aprendiste? TEMA A:A reconocer los principales elementos que componen una ilustración vectorial para crear composición que integren estos elementos. TEMA B: A identificar la relación de los elementos con el plano y de los elementos entre sí. TEMA C: Que existen tres tipos de fuentes, aplicar envolventes a texto para crear efectos en texto y que es posible acoplar texto en un trazo. TEMA D:A identificar y describir los formatos en que se pueden guardar los archivos generados en Inkscape según el uso que se les dará al final. EVALUACIÓN 06 Contesta las preguntas correctamente. 1. ¿Qué es fluir texto en un marco y en que se puede usar? Es una función de Inkscape que permite ajustar un texto dentro de una figura geoétrica o trazo cerrado. Se puede usar para editar textos con figuras creativas dándole mejor impacto visual a un proyecto. 2. ¿Qué formato es nativo de Inkscape? El formato SVG está basado completamente en XML (lenguaje de marcas para intercambio de datos). 3. ¿Que opción se utiliza para crear una imagen compatible con la WEB? Con las herramientas disponibles en el cuadro de diálogo Exportar como mapa de bits. Ya que se tiene mejor control de los elementos y el formato de salida es PNG, el cual es altamente compatible con la WEB. 96