Manual grafico

Manual 88Software Gráfico

Manual 8 Software Gráfico 1

Puede descargar una versión editable de este documento desde:http://www.moquegua.edu.pe

http://www.moquegua.edu.pe/

Derechos de autorEste documento está protegido por los derechos de autor de sus contribuyentes, mencionados en las secciones tituladas Autores, Traductores y Editores. Puede distribuirlo y/o modificarlo bajo los términos de la Licencia Pública General (General Public License - GNU), versión 3 o posterior (http://www.gnu.org/licenses/gpl.html) o la Licencia de Atribuciones de Creativos Comunes (Creative Commons Attribution License) versión 3.0 o posteriores (http://creativecommons.org/licenses/by/3.0/deed.es_PE).

Todas las marcas mencionadas en esta guía pertenecen a sus propietarios legítimos.

AutoresAlgunas secciones han sido tomadas de la ayuda de cada software: OpenOffice.org Draw, Inkscape, Tuxpaint, Openclipart.org, Gimp, Kompozer.

Creado, modificado y/o ampliado por Meridian S.A.

ColaboraciónYsrael Chávez, Hugo Gómez, Danny Pari.

EditorJorge L. Tupac-Yupanqui

RealimentaciónMantenedor: Jorge L. Tupac-Yupanqui Por favor dirija cualquier comentario o sugerencia sobre este documento a:[email protected]

Fecha de publicaciónPublicado el 30 de Abril del 2009.

Puede descargar una versión editable de este documento desde:http://www.moquegua.edu.pe

http://www.moquegua.edu.pe/

mailto:[email protected]

http://creativecommons.org/licenses/by/3.0/deed.es_PE

http://creativecommons.org/licenses/by/3.0/deed.es_PE

http://www.gnu.org/licenses/gpl.html

http://www.gnu.org/licenses/gpl.html

Manual 8

Manual 8 Software Gráfico iv

Manual 8

ContenidoManual 8Software Gráfico................................................................................................................1

Derechos de autor...................................................................................................iiiAutores....................................................................................................................iiiColaboración...........................................................................................................iiiEditor......................................................................................................................iiiRealimentación.......................................................................................................iiiFecha de publicación..............................................................................................iii

Capítulo 1: Draw............................................................................................................11Objetivo General....................................................................................................11Objetivos específicos..............................................................................................11

Introducción.....................................................................................................................13Utilizando Draw..........................................................................................................14

Ventana principal de Draw.....................................................................................14Las barras de herramientas.....................................................................................15Barra de herramientas Estándar.............................................................................16Barra de herramientas Líneas y relleno..................................................................16Barra de herramientas Formato de texto................................................................16Barra de herramientas Dibujo................................................................................16Actividad 1-1..........................................................................................................19Escribir texto..........................................................................................................20La paleta de colores................................................................................................20Barra de herramientas Opciones............................................................................22Las reglas...............................................................................................................24Funciones avanzadas..............................................................................................24Duplicación............................................................................................................25Disolvencia.............................................................................................................26Intercambiar objetos con otros programas.............................................................27Actividad 1-2..........................................................................................................28Actividad 1-3..........................................................................................................30

Capítulo 2: Dibujo para niños......................................................................................31Objetivo General....................................................................................................31Objetivo Específico................................................................................................31

Introducción.....................................................................................................................33Tuxpaint......................................................................................................................34

Características........................................................................................................34Objetivos................................................................................................................34Utilizando TuxPaint...............................................................................................35Herramientas Disponibles......................................................................................42Actividad 2-1..........................................................................................................52Actividad 2-2..........................................................................................................53

Drawing for Children .................................................................................................54Utilizando Drawing for Children...........................................................................54Barra de herramientas............................................................................................56Actividad 2-3..........................................................................................................63

Capítulo 3: Colección de clips.......................................................................................65

Manual 8 Software Gráfico v

Manual 8

Objetivo General....................................................................................................65Objetivo Específico................................................................................................65

Openclipart..................................................................................................................67Capítulo 4: Gráficos Vectoriales...................................................................................69

Objetivo General....................................................................................................69Objetivos Específicos.............................................................................................69

Introducción.....................................................................................................................71Inkscape......................................................................................................................72

Utilizando Inkscape................................................................................................72Actividad 4-1..........................................................................................................85Actividad 4-2..........................................................................................................88Actividad 4-3..........................................................................................................90Creación de imágenes uniendo puntos...................................................................95

Capítulo 5: Manipulación de imágenes....................................................................103Objetivo General..................................................................................................103Objetivo Específico..............................................................................................103

Introducción...................................................................................................................105GIMP.........................................................................................................................106

Características .....................................................................................................106Utilizando GIMP..................................................................................................107Actividad 5-1........................................................................................................115

Capítulo 6: Creación 3D..............................................................................................117Objetivo General..................................................................................................117Objetivo Específico..............................................................................................117

Blender......................................................................................................................119Capítulo 7: Creación Web...........................................................................................121

Objetivo General..................................................................................................121Objetivo Específico..............................................................................................121

Introducción...................................................................................................................123KompoZer.................................................................................................................124

Utilizando Kompozer...........................................................................................124Creación de una Página Web................................................................................127Anexo ..................................................................................................................136

Bibliografía...............................................................................................................140Enlaces:................................................................................................................140

Manual 8 Software Gráfico vi

IntroducciónLos diversos software gráficos le permitirán elaborar imágenes y crear ilustraciones para que sus trabajos tengan una mejor presentación.

Los usuarios pueden pintar con dispositivos electrónicos de señalamiento en vez de lápices o brochas, pueden dar a sus presentaciones gráfico y color de calidad.


http://www.monografias.com/trabajos11/conge/conge.shtml

DescripciónEl octavo curso brinda conocimientos de diferentes software gráficos para crear y modificar imágenes y páginas web, que le permitirán elaborar material educativo y mejorar su proceso de enseñanza aprendizaje.

A quiénes está dirigidoEl curso está diseñado para profesionales que desean iniciarse en el uso de las TIC y diferentes software de diseño gráfico como herramientas para mejorar su productividad.

Pre-requisitosEl curso está diseñado para estudiantes que ya tienen conocimiento básico de computadoras.

MetodologíaEl enfoque que se utiliza es el constructivismo, por lo que se privilegia la interacción participante – docente – participante, dentro de un ambiente basado en la confianza, el respeto y la tolerancia.

El curso Software Gráfico le enseñará el uso y la aplicación de los diferentes software gráficos para complementar metodologías de enseñanza. Los manuales, el cd multimedia y el uso del portal permiten familiarizarse con los contenidos del curso. El curso se desarrolla a lo largo de 8 horas de participación activa.

El curso maneja las siguientes estrategias:

1. Cada tema se inicia con la presentación y discusión de los conceptos. Facilitada por el instructor.

2. Desarrollo de actividades de laboratorio paso a paso, para conocer los procedimientos. (Apoyo práctico con el uso del manual).

3. Intercambio de experiencias al responder las preguntas de las lecciones al finalizar cada capítulo.

4. Uso de rutas de aprendizaje (Portal) y/o CD multimedia como guía de autoestudio y autoevaluación.

5. Desarrollo de trabajos prácticos individuales y grupales, supervisados a distancia con ayuda del Portal.


Objetivo del CursoConocer y aplicar distintos software gráficos para mejorar la presentación de sus proyectos de clase optimizando la atención en el proceso de aprendizaje.

Objetivos Específicos Aplicar los programas de dibujo motivando la creatividad.

Buscar y modificar imágenes para ilustrar diferentes informaciones.



Capítulo 1: DrawObjetivo General

Conocer Draw y utilizarlo como herramienta de dibujo.

Objetivos específicos

• Crear toda clase de gráficos como dibujos, diagramas y gráficos vectoriales para incluirlos en documentos y presentaciones.



Introducción

Introducción

Draw es una herramienta de dibujo gráfico que le permite crear rápidamente toda clase de gráficos. Los gráficos vectoriales almacenan y muestran una imagen como vectores (dos puntos y una línea) en vez de una colección de píxeles (puntos en la pantalla) y permiten que su almacenamiento y cambio de escala sea más fácil.

Draw se integra perfectamente con las demás aplicaciones de la suite OpenOffice.org, lo que permite intercambiar gráficos entre ellas con gran facilidad.

Draw es funcionalmente muy extenso y completo. Aún cuando no fue diseñado para rivalizar con aplicaciones gráficas de alto nivel, Draw incluso posee más funciones que la mayoría de las herramientas de dibujo que están integradas dentro de las suites de productividad de oficina.

Algunos ejemplos de las funciones de dibujo de Draw:

• Gestión de capas.

• Sistema de grilla magnética de puntos.

• Informe de dimensiones y medidas en pantalla.

• Conectores para hacer organigramas.

• Funciones 3D que le permiten crear pequeños dibujos tridimensionales (con efectos de textura e iluminación).

• Integración de dibujo y estilo de página.

• Curvas Bézier.


Utilizando Draw

Utilizando Draw

Ventana principal de DrawMuestra los principales componentes del interfaz de Draw.

Al lado derecho de la ventana se encuentra el área de dibujo y al lado izquierdo puede observar el desarrollo de su dibujo.

En la parte inferior de la ventana se ubica la barra de dibujo.


Utilizando Draw

Las barras de herramientasRecordemos que las barras de herramientas se pueden mostrar u ocultar de acuerdo a sus necesidades.

Para mostrar u ocultar las barras de herramientas:

Clic en Menú Ver Barra de herramientas. En el menú que aparece, seleccione la barra de herramienta que desea mostrar.

Para personalizar las barras de herramientas:

a) Ir a Menú Ver Barra de herramientas Personalizar

b) Clic sobre la pestaña Barra de herramientas.

c) Seleccione los botones que desea mostrar en esa barra de herramientas. Cada barra tiene una lista diferente de botones.


Utilizando Draw

Si desea mantener visible los menús de funciones adicionales, puede convertir ese menú en una barra de herramientas flotante. Para hacerlo, clic sobre la barra de título del menú, arrástrelo a través de la pantalla, y entonces suelte el botón del ratón.

Barra de herramientas EstándarEs la misma para todos los componentes de OpenOffice.org.

Barra de herramientas Líneas y rellenoLa barra de Líneas y relleno le permite modificar las principales propiedades de un objeto de dibujo: el color de la línea dibujada, el color de relleno, etc., de un objeto seleccionado.

Barra de herramientas Formato de textoSi el objeto que seleccionó es texto, la barra de herramientas anterior se oculta y aparece la que muestra la figura de abajo, la cual es muy similar a la barra de Formato de Writer.

Barra de herramientas DibujoContiene todas las funciones necesarias para dibujar y organizar todo tipo de figuras geométricas y formas libres en la página.


Utilizando Draw

Dibujar líneas rectas:

Clic en el botón Línea de la barra de herramientas Dibujo y coloque el puntero del ratón en el lugar donde quiera comenzar a dibujar. Arrastre el ratón manteniendo el botón presionado. Suelte el botón del ratón cuando quiera detener el dibujo de la línea.

Mantenga pulsada la tecla Shift mientras dibuja el segmento para forzar a que la línea se dibuje en un ángulo múltiplo de 45º desde la horizontal.

Presione la tecla Alt para dibujar la línea simétricamente desde el punto inicial (la línea se extiende por igual hacia ambos lados del punto inicial). Esto le permite dibujar líneas rectas comenzando desde la mitad de una línea.

La línea que dibuja tendrá los atributos predefinidos (tales como color y tipo de línea).

Para cambiar los atributos de línea:

Clic sobre la línea para seleccionarla y luego use las herramientas de la barra de herramientas Líneas y rellenos; o para tener mayor control, clic derecho sobre la línea y elija Línea para abrir el cuadro de diálogo Línea.


Utilizando Draw

Dibujar un rectánguloUsar el botón Rectángulo de la barra de herramientas Dibujo.

Mantenga presionada la tecla Shift para dibujar un cuadrado.

Mantenga presionada la tecla Alt para dibujar un rectángulo comenzando desde el punto central.

Para dibujar un triángulo u otras formas básicas puede proceder de la misma forma utilizando el botón de formas básicas que se encuentra en la barra de dibujo.

Dibujar un círculo

Para dibujar una elipse o un círculo, use el botón Elipse de la barra de herramientas Dibujo (un círculo es simplemente una elipse donde los dos ejes son del mismo largo).

Existen otras maneras de dibujar una elipse o un círculo:

• Mantener presionada la tecla Shift mientras se dibuja, para forzar a que la elipse sea un círculo.

• Mantener presionada la tecla Alt para dibujar una elipse simétrica o un círculo desde el centro, en vez de arrastrar de esquina a esquina.

• Mantener presionada la tecla Ctrl mientras se dibuja, para que la elipse o el círculo no se ajuste a las líneas de grilla.

Si presiona y mantiene la tecla Ctrl antes de hacer clic sobre algunos de estos botones : Línea, Rectángulo, Elipse y Texto, el objeto elegido aparece directamente en la página con un tamaño, forma y color predefinidos, que luego puede cambiar.


Utilizando Draw

Actividad 1-1

Barra de DibujoUsted es profesor de cómputo de los niños de Primaria. Desea que en su clase con los niños de 1er grado creen un dibujo utilizando figuras geométricas similar al modelo entregado.

1. Inicie Draw.

2. Compruebe que la barra de dibujo esté activa.

3. Utilice los botones de línea, rectángulo, círculo, de formas básicas, de símbolos y de conectores.

4. De color a su dibujo.

5. Guarde con nombre Formas Geométricas


Utilizando Draw

Escribir textoUse la herramienta Texto para escribir texto y seleccionar fuente, color, tamaño y otros atributos.

Clic al botón texto y luego sobre el área de trabajo de clic para escribir el texto en el lugar deseado. Si pulsa sobre un objeto, el texto se escribe en el centro del objeto y permanece en su interior. El borde del objeto se convierte en el marco de texto.

Haga doble clic sobre el texto si necesita editarlo.

Cuando escribe texto, la barra de herramientas incluye los atributos de párrafo usuales: identación, primera línea y paradas de tabuladores.

Puede cambiar el estilo de todo o parte del texto. La ventana Estilo y formato también funciona de modo que puede crear estilos que podrá reutilizar en otros marcos de texto, exactamente como lo haría en Writer.

Al igual que cualquier otro objeto en Draw, los marcos de texto también pueden tener colores de relleno, sombra y otros atributos. Puede rotar el marco y escribir el texto en algún ángulo. Estas opciones están disponibles en el menú contextual que se obtiene al hacer clic derecho sobre el objeto.

Use la herramienta Llamadas, localizada en la barra de herramienta Dibujo, para crear llamadas (también conocidas como títulos o etiquetas de figuras).

La paleta de coloresPara desplegar la barra Color, también llamada paleta de colores:

Ver Barra de herramientasBarra de colores. La barra aparecerá entonces en la parte inferior del espacio de trabajo.

Esta barra de herramientas le permite elegir rápidamente el color de los objetos de su dibujo. La primera casilla en el panel corresponde a transparencia (sin color).

La paleta de colores que se muestra de forma predeterminada se puede cambiar al acceder a la opción :

Menú Formato Relleno

Seleccione la pestaña Colores.


Utilizando Draw

Si da Clic en el botón Abrir, se abre la ventana que le pide elegir un archivo de tipo paleta (cuya extensión de archivo es .soc).

De forma estándar se suministran varias paletas con OpenOffice.org. Por ejemplo, web.soc es una paleta de color que está particularmente adaptada para crear dibujos que aparecerán en páginas web, ya que los colores se mostrarán correctamente en estaciones de trabajo con pantallas que puedan mostrar al menos 256 colores.

Además, puede modificar los valores numéricos de los campos de colores, para cambiar colores individualmente.

También puede pulsar el botón Editar para desplegar el cuadro de diálogo que le permitirá elegir los colores con mayor facilidad.


Utilizando Draw

Puede usar los esquemas de colores conocidos como CMAL (Cyan, Magenta, Amarillo, Negro), RVA (Rojo, Verde, Azul) o CSB (Color, Saturación, Brillo).

Barra de herramientas OpcionesEsta barra de herramientas le permite activar o desactivar varias ayudas de dibujo. De forma predefinida la barra Opciones está oculta. Para mostrarla, seleccione Menú Ver Barra de herramientas Opciones.

Las herramientas de ajuste se dividen en 3 grupos: la cuadrícula magnética, las líneas de captura y los puntos de captura.

Mostrar la cuadrícula, las líneas o los puntos requiere de tres pasos:

1. Mostrar la cuadrícula, las guías o los puntos.

2. Dar clic sobre el botón de ajuste correcto.

3. Arrastrar el objeto cerca del punto en que se ajustará.

Usar la cuadrículaDraw provee una cuadrícula de puntos a la que se pueden ajustar los objetos. Para mostrarla:

Clic en el botón Mostrar cuadrícula en la barra Opciones y luego clic sobre el botón Usar cuadrícula para desactivarla. Esta cuadrícula no saldrá impresa ni aparecerá en archivos exportados, tales como PDF.

Cuando la cuadrícula está activa, puede posicionar fácilmente las figuras tomando los puntos como guía.En Herramientas Opciones OpenOffice.org Draw Cuadrícula puede establecer el espacio entre los puntos.


Utilizando Draw

El cuadro de diálogo que muestra le permite fijar los siguientes parámetros:

● Espaciado vertical y horizontal de los puntos en la grilla. También puede cambiar la unidad de medida.

● La resolución es el tamaño de los cuadrados o rectángulos en la cuadrícula. Si la resolución es Horizontal 1 cm, Vertical 2 cm, la cuadrícula consiste de rectángulos de 2 cm de alto y 1 cm de ancho.

● Las subdivisiones son puntos adicionales que aparecen a lo largo de los lados de cada rectángulo o cuadrado en la cuadrícula. Los objetos se fijan tanto a las subdivisiones como a las esquinas de la cuadrícula.

● El tamaño del píxel del área de fijación define que tan cerca se debe traer un objeto de un punto o de una línea de ajuste antes de que se fije a ella.


Utilizando Draw

Las reglasPuede ver reglas en la parte superior y a la izquierda del espacio de trabajo. Éstas muestran el tamaño de los objetos que contiene la página y la ubicación del puntero del ratón para ayudarle a posicionar los objetos con mayor precisión. También se usan para manejar los controles de objeto y líneas de captura que permiten que el posicionamiento sea más fácil.

Los márgenes de página en el área de dibujo también se representan en las reglas. Puede cambiar los márgenes directamente en las reglas arrastrándolos con el ratón. Para modificar las unidades de medida de las reglas, haga clic derecho sobre una de las reglas. Las dos reglas pueden tener unidades diferentes.

Funciones avanzadasDraw contiene diversas funciones avanzadas que son útiles en ciertos casos (imágenes para la web e intercambio de datos).


Utilizando Draw

DuplicaciónEsta función duplica una figura dada, permitiendo cambiar las opciones que se aplican a los duplicados.

Para comenzar la duplicación, haga clic sobre un objeto (o un grupo de objetos seleccionados), luego elija Editar Duplicar.

Aparece el siguiente cuadro de diálogo:

Puede elegir:

● La cantidad de copias.

● El desplazamiento a lo largo de los ejes X e Y entre dos copias.

● El ángulo de rotación entre dos copias.

● Los colores de las copias inicial y final.

El resultado final de una duplicación es un nuevo grupo.


Utilizando Draw

DisolvenciaLa disolvencia permite transformar la forma de una figura en otra, mientras que Draw se encarga de las transiciones intermedias. El resultado es un nuevo grupo de objetos.

Para obtener una disolvencia, seleccione ambos objetos (mantenga la tecla Shift mientras selecciona cada objeto), luego elija Editar Disolución. Aparecerá el siguiente cuadro de diálogo:

Ejemplo.

Comenzamos con dos figuras:

Aplicamos disolvencia para obtener el siguiente dibujo:


Utilizando Draw

Intercambiar objetos con otros programasPara guardar una imagen Draw en un formato foráneo, use ArchivoExportar.

Puede exportar archivos Draw a HTML, PDF y Flash. En todas las aplicaciones de OpenOffice.org se exporta a PDF del mismo modo.

La opción Exportar a Flash crea un archivo .swf.

La opción Exportar a HTML usa un asistente para la conversión, que crea tantas páginas web como páginas haya en su documento Draw. Puede, opcionalmente, elegir desplegar las páginas en marcos con un navegador y puede establecer una página índice.


Utilizando Draw

Actividad 1-2

Trabajar textoUsted es tutor de 6to. Grado y les ha tocado decorar el panel del colegio sobre la primavera. Le gustaría crear el título en Draw.

Abrir Draw.

1. Escriba como título en medio de la hoja: Bienvenida la Primavera.

a) Clic al botón cuadro de texto para escribir el título, con formato:

b) Color: Magenta 3 al carácter.

c) Fuente: Impact, tamaño 40, normal.

2. Duplicar el título:

a) Seleccionar el título, clic en Menú Editar.Duplicar y seguir las indicaciones del cuadro.

3. Crear las flores según el modelo, en la parte inferior de la hoja

Clic al Botón Formas básicas, luego clic al botón flechas de bloque para formar el tulipán. Duplicar:


Utilizando Draw

4. Crear el sol y la nube en la parte superior de la hoja y darles disolvencia.

a) Clic al botón de formas básicas y seleccionar el sol y la nube

b) Dar color amarillo al sol y turquesa 1 a la nube.

c) Seleccionar el sol y la nube

d) Luego Menú EditarDisolución, en el cuadro Disolvencia marcar 2 pasos.

5. Guardar como Primavera.

6. Exportar en pdf.


Utilizando Draw

Actividad 1-3

Crear organigramasUsted es director de un centro educativo y quiere que en el panel de la dirección se muestre un organigrama con las características de los estudiantes al concluir la EBR.

Busque en C://carpeta Estudiante/Organigrama.pdf

Cree el organigrama según el gráfico utilizando los botones de herramientas Formas básicas, flechas y líneas, darle color apropiado.


http://www.moquegua.edu.pe/claroline//carpeta

Capítulo 2: Dibujo para niños

Objetivo GeneralAplicar el software Tuxpaint y Drawing for children para lograr el desarrollo visomotriz de los niños.

Objetivo Específico

• Conocer y aplicar las diferentes herramientas de Tuxpaint.

• Conocer y aplicar las diferentes herramientas de Drawing for children.



Introducción

Introducción

Tux Paint es un proyecto de Código Abierto; un programa libre lanzado bajo las disposiciones de la Licencia Pública General de GNU (General Public License o GPL). Es libre y el código fuente del programa está disponible. Esto le permite a otros agregar funciones, corregir errores y utilizar partes del programa en sus propios programas bajo licencia GPL.

TuxPaint funciona en una variedad de sistemas operativos, incluyendo Windows, Mac OS X, Linux, FreeBSD y NetBSD.

TuxPaint es un programa de dibujo libre diseñado para niños pequeños. Presenta una interfaz simple y fácil de usar, divertidos efectos de sonido y una estimulante mascota de tipo cartoon que ayuda a guiar al niño mientras utiliza el programa. Provee una tela vacía y una gran variedad de herramientas de dibujo que ayudarán al niño a ser creativo.

Este programa gratuito está pensado para que el niño lo entienda y pueda probar sin miedo, garabatear, borrar, colorear, y todas las cosas que al niño se le ocurran. La ventaja es el ahorro de papel, pinturas y que se mancha menos.

El niño encontrará a su izquierda las herramientas: pintar, sellos, la goma de borrar, añadir textos, imprimir y las opciones de Guardar y Abrir; pensadas especialmente para que sólo abra los dibujos del niño y ninguna otra cosa.

A su derecha encontrará los pinceles de diferentes tamaños y pensados para niños, con estrellas, círculos, flechas y gatitos.

Mención especial para los sonidos que acompañan a cada acción que haga el niño y para las “29 herramientas mágicas” de TuxPaint, que sirven para crear un pasto, manchar como si se pasa el dedo por encima sin que esté seca la tinta, rellenar, efecto tiza, oscurecer, etc.


Tuxpaint

Tuxpaint

CaracterísticasUna Interfaz Simple

• Dispone de un conjunto limitado pero útil de herramientas.

• La tela de dibujo es de tamaño fijo, de manera que el usuario no tenga que preocuparse de "pixels" o "centímetros" al crear una nueva imagen.

• El programa completo cabe en 640x480 y puede ser desplegado a pantalla completa para ocultar la interfaz del escritorio de la computadora. También puede ser utilizado en modo 800 x 600.

• La apertura y el guardado de imágenes se realiza mediante miniaturas, de manera que no sea necesario un conocimiento previo de la estructura del sistema de archivos. Hasta los nombres de archivo son innecesarios.

Una Interfaz Entretenida

• Se escuchan divertidos efectos de sonido al seleccionar y utilizar las herramientas.

• Una versión en dibujo animado de Tux, el pingüino de Linux, aparece en la parte inferior de la interfaz para dar consejos, indicaciones e información.

ObjetivosSencillo y Divertido

Tux Paint está concebido como un programa de dibujo sencillo para niños pequeños, para ser divertido y fácil de usar. Efectos de sonido y un personaje de tipo dibujo animado le permiten al usuario saber qué está sucediendo y mantenerse entretenido. También hay punteros de ratón tipo dibujo animado de formas extra grandes.

Extensibilidad

Tux Paint es extensible. Es posible agregar y quitar pinceles y "sellos" con imágenes. Por ejemplo, una maestra puede agregar una colección de figuras de animales y pedirle a sus alumnos que dibujen un ecosistema. Cada figura puede tener un sonido asociado y textos descriptivos, los cuales se despliegan cuando el niño selecciona la figura.


Tuxpaint

Portabilidad

Tux Paint es portable a varias plataformas de computación: Windows, Macintosh, Linux, etc. La interfaz luce idéntica en todas ellas. Tux Paint se ejecuta correctamente en sistemas viejos (como un Pentium de 133MHz) y puede ser compilado para correr mejor en sistemas lentos.

Simplicidad

No hay necesidad de acceder directamente a otras áreas de la computadora. La imagen en curso es conservada cuando se sale del programa y reaparece cuando éste se vuelve a usar. Guardar las imágenes no requiere conocimiento de cómo crear nombres de archivo o utilizar el teclado. La apertura de las imágenes se realiza mediante su selección de entre una colección de miniaturas de las mismas. El acceso a otros archivos de la computadora está restringido.

Utilizando TuxPaint

ConfiguraciónUna vez descargado e instalado Tux Paint aparecerá una ventana de configuración. Aquí, los dos datos más importantes a tener en cuenta son el idioma (está en español y decenas de idiomas más) y si desea que se ejecute a pantalla completa o en ventana. Para el niño, probablemente sea más interesante que sea a pantalla completa.


Tuxpaint

Pantalla de TítuloAl cargarse, Tux Paint muestra una pantalla inicial con los créditos.

Una vez que la carga se ha completado, se presiona una tecla o un clic con el ratón para continuar (o, luego de unos 30 segundos, la pantalla de título desaparecerá automáticamente).

Pantalla PrincipalLa pantalla principal está dividida en las siguientes secciones:

Izquierda: Barra de HerramientasLa barra de herramientas contiene los controles de dibujo y edición.


Tuxpaint

Central: Tela de DibujoLa parte más grande de la pantalla, en el centro, es la tela de dibujo.

Derecha: SelectorDependiendo de la herramienta activa, el selector muestra distintas cosas. Por ejemplo mientras la herramienta Pintar está activa, muestra los varios pinceles disponibles. Al seleccionar la herramienta Sellos, éste muestra las diferentes figuras que pueden ser usadas.

Inferior: ColoresUna paleta con los colores disponibles se muestra cerca de la parte inferior de la pantalla.

Extremo Inferior: Área de AyudaEn la parte más baja de la pantalla, Tux, el Pingüino de Linux, da sugerencias y otras informaciones al dibujar


Tuxpaint

Si bien al ejecutar Tux Paint ya está listo para empezar a dibujar, recomendamos dar clic sobre el botón Nuevo y así elegir un color o dibujo de fondo.

Agregar nuevos dibujos: Se pueden agregar nuevas imágenes que nos sirvan como plantillas para empezar a dibujar, agregando dentro de la carpeta donde está instalado Tux paint: C:\Archivosde programa\TuxPaint\data\starters, las imágenes con formato .png que deseemos, con fondo transparente, obtenidas a partir de imágenes trabajadas con inkscape o gimp y guardadas en formato png.

En la carpeta Actividades Tux Paint, encontrará algunas imágenes de ejemplo que podrá añadir y usar para pintar.


Tuxpaint


http://es.onsoftware.com/p/especial-infantiles-tux-paint/291/

Tuxpaint

Herramientas MágicasDe todas las herramientas que tiene Tux Paint, destacamos las Mágicas ya que ahí se encuentran las más originales y algunas esenciales, como rellenar.

Los divertidos SellosUna de las herramientas que quizá guste más al niño es Sellos.

Tux Paint sólo incluye seis sellos, el pingüino Tux en seis posturas diferentes, pero permite añadir muchísimos sellos más con Tux Paint Stamps. Puede bajarlos de http://tux-paint-stamps.softonic.com/, o copiar la carpeta tuxpaint-stamps-2007-11-21-win32-installer.exe del CD del curso y luego dar doble clic para instalar.

Tux Paint Stamps incluye muchísimos sellos nuevos de animales, ropas, comida, militares, gente, flores, navideños, deportes, símbolos, casas, coches, aviones, etc.

Una enorme ventaja de TuxPaint es que podemos añadir nuestros propios sellos. Por ejemplo, podemos añadir las caras de los miembros de la familia, de las mascotas, de amigos; podemos añadir fotos de muebles o de nuestro automóvil. Para ello, agregar las imágenes en formato png o gif dentro de la carpeta donde está instalado Tux Paint: C:\Archivos de programa\TuxPaint\data\stamps


http://tux-paint-stamps.softonic.com/



Tuxpaint

Luego de instalar, abrir Tux Paint. Los nuevos sellos ya estarán dentro del programa y con ellos podrá crear muchos entretenidos dibujos.

Aquí un ejemplo del uso de los sellos:


Tuxpaint

Herramientas DisponiblesHerramientas de Dibujo

Pintar

La herramienta Pintar permite dibujar a mano alzada, usando distintos pinceles (elegidos en el Selector de la derecha) y colores (elegidos en la paleta de Colores en la parte inferior).

Si se mantiene presionado el botón del ratón y se arrastra el mismo, éste dibujará a medida que se mueve y se escuchará un sonido. Cuanto más grande sea el pincel, más grave será su tono.

Sellos ( de Goma)

La herramienta Sellos se asemeja a sellos de goma o calcomanías. Permite estampar imágenes pre-dibujadas o fotografías (como una foto de un caballo, un árbol o la Luna) sobre la tela.

A medida que se mueve el ratón, un contorno lo acompaña, indicando donde será ubicado el sello. Cada sello puede tener su propio efecto de sonido. Algunos sellos pueden ser coloreados o teñidos y muchos de ellos pueden ser invertidos vertical u horizontalmente, utilizando controles en la parte inferior derecha de la pantalla.


Tuxpaint

Líneas

Esta herramienta permite dibujar líneas rectas usando los pinceles y colores que normalmente se utilizan con la herramienta Pintar.

Dar un clic y mantener presionado para escoger el punto inicial de la línea. A medida que se mueve el ratón, una delgada 'banda elástica' indicará donde será dibujada la línea. Soltar el botón para completar la línea. Se escuchará un sonido tipo "¡sproing!".

Figuras

Esta herramienta permite dibujar figuras geométricass, tanto rellenas como sólo sus contornos.


Tuxpaint

Seleccionar una figura del selector de la derecha (círculo, cuadrado, óvalo, etc.).

En la tela, dar un clic y arrastrar para estirar la figura desde donde se inició la operación. Algunas figuras pueden cambiar su proporción (por ejemplo: el rectángulo y el óvalo), otras no (por ejemplo: el cuadrado y el círculo). Soltar el botón para fijar el tamaño.

Modo Normal

Ahora es posible mover el ratón sobre la tela para rotar la figura. Dar clic otra vez; la figura se dibujará usando el color actual.

Modo Simple

Si el modo simple está activado, la figura se dibujará sobre la tela al soltar el botón del ratón. (Sin el paso para la rotación.)

Texto

Escoger un tipo de letra (de las 'Letras' disponibles a la derecha) y un color (desde la paleta en la parte inferior). Dar clic en la pantalla y aparecerá allí un cursor. Ingresar el texto, éste se mostrará en pantalla.

Presionar [Enter] o [Intro] para que el texto sea dibujado sobre la imagen; el cursor se moverá una línea hacia abajo. Hacer clic en otro lugar de la imagen para que la línea de texto se mueva allí, donde se podrá continuar la edición.


Tuxpaint

Mágicas (Efectos Especiales)

Las herramientas 'Mágicas' son un conjunto de herramientas especiales. Seleccionar uno de los efectos "mágicos" desde el selector de la derecha y luego hacer clic, arrastrando el ratón por la imagen para aplicar el efecto.

Arco iris: Esta herramienta es similar a Pintar, pero a medida que se mueve el ratón, éste pasa por todos los colores del arco iris.

Chispas: Esta herramienta dibuja brillantes chispas amarillas en la imagen.

Espejar: Al hacer clic con el ratón sobre la imagen usando el efecto mágico "Espejar", la imagen entera será invertida horizontalmente, transformándola en una imagen a espejo.

Invertir: Similar a "Espejar". Hacer clic y la imagen entera será invertida verticalmente.

Desenfocar: Esta herramienta deja la imagen borrosa por donde se pase el ratón.

Bloques: Esta herramienta deja la imagen cuadriculada ("pixelizada") donde se haya pasado el ratón.

Negativo: Esta herramienta invierte los colores en donde se pase el ratón. (por ejemplo: el blanco se vuelve negro y viceversa.)

Desvanecer: Esta herramienta desvanece los colores en donde se arrastre el ratón. (Hacerlo sobre el mismo punto varias veces lo tornará finalmente blanco).


Tuxpaint

Tiza: Esta herramienta hace que partes de la imagen (donde se mueva el ratón) luzcan como dibujadas con tiza.

Gotear: Esta herramienta hace que la pintura "gotee" donde se haya pasado el ratón.

Grueso: Esta herramienta hace que los colores más oscuros de la imagen se vuelvan más gruesos por donde se pase el ratón.

Fino: Similar a "Grueso", excepto que los colores más oscuros se vuelven más finos (los colores más claros se vuelven más gruesos).

Rellenar: Esta herramienta inunda la imagen con un color. Permite rellenar rápidamente partes de la imagen, como si se tratara de un libro para colorear.

Otros Controles

Goma de Borrar

Esta herramienta es similar a Pintar. Donde se haga un clic (o clic y arrastrar), la imagen será borrada a blanco o a la imagen de fondo, si se comenzó un dibujo a partir de una 'Plantilla'.

La goma de borrar puede tener varios tamaños. A medida que el ratón es movido, un contorno cuadrado sigue al puntero, indicando la parte de la imagen que será borrada.

A medida que se usa la goma de borrar, se escucha un sonido "chillonamente limpio".


Tuxpaint

Deshacer Dar clic en esta herramienta deshará la última acción de dibujo. ¡Hasta es posible deshacer más de una vez!

Nota: También es posible presionar [Control]-[Z] en el teclado para deshacer

Rehacer

Dar clic en esta herramienta repetirá la acción de dibujo que se acabó de deshacer con el botón 'Deshacer'.

Mientras no se vuelva a dibujar nada, ¡es posible rehacer tantos pasos como se hayan "deshecho"!

Nota: También es posible presionar [Control]-[R] en el teclado para rehacer.

Nuevo

Dar clic en el botón "Nuevo" comenzará un nuevo dibujo. Antes de hacerlo se pedirá confirmar la decisión.

Nota: También es posible presionar [Control]-[N] en el teclado para comenzar un nuevo dibujo.

Abrir

Este botón muestra una lista de todas las imágenes que han sido guardadas. Si hubiera más de las que entran en la pantalla, usar las flechas "Arriba" y "Abajo" en las partes superior e inferior de la lista para desplazarse por la lista de imágenes.


Tuxpaint

• Hacer clic en una imagen para seleccionarla, luego dar clic en el botón verde

"Abrir" en la parte inferior izquierda de la lista para abrir la imagen seleccionada.

(Alternativamente, es posible dar doble clic en la miniatura de una imagen para abrirla.)

• Hacer clic en el botón marrón "Borrar" (la lata de basura) en la parte inferior

derecha de la lista para borrar la imagen seleccionada. (Se pedirá una confirmación).

• O hacer clic en el botón rojo "Atrás" (flecha) en la parte inferior derecha de la lista para cancelar y regresar a la imagen que se estaba dibujando previamente.


Tuxpaint

Si hacemos clic en Diapositivas podemos ver las imágenes guardadas con Tux Paint en una presentación.

Plantillas Además de las imágenes creadas por el usuario, Tux Paint puede proveer 'Plantillas'. Abrirlas es igual que crear una imagen normal, excepto que la imagen no aparece en blanco. Las Plantillas pueden ser, bien como la página de un libro para colorear (un contorno en blanco y negro de una imagen, que se puede colorear), o como una fotografía 3D (con un plano de fondo y uno de frente, para dibujar en medio de ambos).

Las miniaturas de las 'Plantillas' aparecen con fondo verde en el diálogo 'Abrir'. (Las imágenes normales tienen fondo azul.) Al abrir una 'Plantilla', dibujar sobre ella y luego hacer clic en 'Guardar', una nueva imagen es creada (no se sobreescribe la 'Plantilla' original, de forma que se pueda volver a utilizar).

Si se elige abrir un imagen y la imagen actual no había sido guardada, se consultará si se desea guardar o no. (Ver "Guardar", más abajo.)

Nota: También es posible presionar [Control]-[O] en el teclado para obtener el diálogo 'Abrir'.

Guardar

Guarda la imagen actual. Si no había sido guardada anteriormente, creará una nueva entrada en la lista de imágenes guardadas. (Creará un nuevo archivo.)

Nota: No se hará ninguna pregunta (por ejemplo: nombre de archivo). Simplemente se guardará la imagen y se escuchará un efecto de sonido tipo "obturador de cámara".

Si ya se había guardado la imagen con anterioridad, o si la imagen había sido abierta usando el comando "Abrir", se preguntará antes si se desea sobreescribir la versión vieja o crear una nueva imagen (un nuevo archivo).


Tuxpaint

Nota: También es posible presionar [Control]-[S] en el teclado para guardar una imagen.

Imprimir

Hacer clic sobre este botón para imprimir la imagen

Salir Dando clic en el botón "Salir", cerrando la ventana del Tux Paint o presionando la tecla "Escape" se saldrá de Tux Paint.

(NOTA: El botón "Salir" puede ser deshabilitado, pero la tecla [Escape] aún seguirá funcionando. Ver la documentación de las "Opciones" del programa.)

Primero se pedirá confirmar la decisión de salir.

Si elige salir y no se ha guardado la imagen actual, se consultará antes si desea guardarla. Si no fuera una nueva imagen, entonces se consultará si desea guardarla sobre la versión anterior o crear una nueva imagen. (Ver "Guardar" arriba.)

NOTA: ¡Si la imagen es guardada, se volverá a abrir automáticamente la próxima vez que se use el Tux Paint!


Tuxpaint


Tuxpaint

Actividad 2-1Como profesor de inicial 5 años, necesita material para que los niños aprendan a pintar en la clase de cómputo. Decide utilizar el programa Tux Paint que le facilita imágenes y todas las herramientas necesarias para que los niños desarrollen su creatividad.

Ingrese al programa Tux Paint.

Vaya a Inicio Todos los Programas Tux Paint Tux Paint(Full Screen) para entrar al programa en modo pantalla completa

1. Presione el botón NUEVO , en la Barra de herramientas, para empezar.

En la pantalla central, tela de dibujo, moviendo la flecha que hay en la parte inferior de la pantalla, escoja una imagen con la cual empezar un nuevo dibujo, puede ser el avión o la gallina. Hacer doble clic y se abre el dibujo elegido.

2. Empiece a pintar.

Clic en el botón Pintar, escoger color y la forma del pincel

Pintar cada zona de diferente color y si se sale del dibujo, utilizar el borrador.

3. También puede usar las opciones mágicas.

Clic en el botón de herramientas mágicas para elegir el botón rellenar , luego el color según la zona a pintar.

4. Guarde la figura

Si quisiera utilizarla para que los niños pinten en papel, puede imprimirla dando clic en el botón imprimir.


Tuxpaint

Actividad 2-2En la clase de cómputo los alumnos pueden trabajar con Tux paint para crear sus dibujos usando la herramienta figuras.

Crear un dibujo usando las figuras geométricas y líneas, de acuerdo a la imagen, deberá tener un hombre de nieve, un carro, casa y puede agregar un gato, pelota o imágenes de los sellos para luego pintar su dibujo.

Tener en cuenta que en el punto que usted de el primer clic, será el centro de la figura que estará dibujando y luego arrastrar con el ratón para obtener el tamaño deseado.

De manera similar, si usted tiene ya instalados los sellos de Tux Paint Stamps, puede crear sus dibujos usando los diversos sellos y opciones de pintado.


Drawing for Children


Utilizando Drawing for ChildrenDrawing for Children es un programa de dibujo que es especialmente adecuado para niños pequeños presenta una interfaz simple. Al inciar el programa se ve una ventana con las siguientes partes:


Barra de Opciones

Área de Dibujo

Barra deTareas

Una de las desventajas del Drawing for Children es que se encuentra solo en idioma Inglés pero su interfaz sencilla nos permite

utilizarlo sin problemas


ConfiguraciónPodemos modificar la configuración de Drawing for Children según el usuario y sus expectativas de la siguiente forma:

Iniciar Drawing for Children

Vaya a Inicio Todos los Programas Drawing for Children Drawing For Children

1. Damos clic en el botón Setting (Ajustes) de la Barra de Tareas

2. Si el botón no esta visible podemos usar la combinación de teclas [Ctrl]+ [Shift]+[Alt]+[S]

3. De la Ventana Setting (Ajustes) solo daremos importancia a la sección Defaul Setting (configuración predeterminada)

Child Proof (a prueba de niños) Este configuración ajusta a Drawing for Children para que sea utilizado por niños quitando algunos botones de la Barra de Tareas

Normal Ajusta el Drawing for Children para el usuarios con poca experiencia en el uso de un sistema operativo.

Advanced (Avanzado) Ajusta el Drawing for Children para usuario con conocimientos en el manejo del sistema operativo.

4. La configuración que escogeremos será la Advanced



Barra de herramientas

La Barra de Herramientas en ella se encuentran los botones más importantes de Drawing for Children que a continuación se describiremos:

Nuevo dibujo Este botón hace exactamente lo que esperas que haga: borra el dibujo actual y crea uno nuevo, vacío.

Abrir un dibujo Con este botón puedes abrir un dibujo que hayas salvado anteriormente. Se te mostrará la ventana Abrir

Guardar el dibujo Presionando este botón, puedes guardar el dibujo para usarlo más tarde.

Deshacer la última acción Presionando este botón, se deshace la última acción. Por ejemplo, si realizamos cualquier trazo y, a continuación, pulse el botón deshacer, solo el ultimo trazo realizado será eliminado.

También puedes usar la combinación de teclas CTRL + Z para deshacer la última acción.


La ventana de guardar cambia según la configuración predeterminada que seleccionamos


Dibujar Trazos Este botón ofrece un gran número de maneras distintas para realizar Trazos. Al hacer clic en él, la Barra de Opciones cambia, ofreciendo trazos de diferente estilo y grosor: líneas normales; trazos de líneas especiales, que dibujan con múltiples colores; trazos que dibujan formas, como estrellas, cuadrados... trazos que dibujan caminos

También permite la posibilidad de rellenar zonas con el bote de pintura, crear hierba y burbujas. La única manera de encontrar todas las posibilidades es probarlo.

• Es importante recordar que, en muchos casos, el botón izquierdo del ratón hace algo más de lo que hace el botón derecho.

• Manteniendo presionada la tecla SHIFT (Mayúsculas) y/o CTRL cuando se comienza a dibujar, se pueden conseguir diferentes efectos más.

Para conocer los distintos tipos de trazos posibles, mira (dentro de la sección Opciones de Trazos de la Barra de Opciones en los apartados:

Líneas Normales

Zona del Portapapeles

Líneas Especiales

Trazos con Formas

Caminos



Para poder observar cada apartado de los distintos trazos del botón Dibujar Trazos

tendremos que seguir los siguientes pasos:

1. Clic sobre el botón Dibujar Trazos de la Barra de Tareas

2. En la Barra de Opciones observaremos los siguientes botones dando clic sobre estos botones veremos las diferentes opciones del botón Dibujar Trazos .

Dibujar Formas Con esta opción, puedes dibujar formas simples, como líneas, flechas, círculos, rectángulos, etc (ver Opciones de Formas). Para dibujar algo, elige la forma, haz clic en el lugar donde debe empezar y arrastra el ratón. Suéltalo cuando esté a tu gusto.

• Con el botón izquierdo del ratón se rellenan las formas de color. Con el botón derecho del ratón, quedan vacías.

• Presionando la tecla SHIFT (Mayúsculas) al comenzar a dibujar, se cambia el ancho del borde.

• Presionando la tecla CTRL al empezar a dibujar, haces que el ancho y el alto de la forma sea el mismo



Texto Con este botón, puedes introducir textos, indica la posición de inicio en el dibujo haciendo clic con el ratón, y escribe el texto con el teclado. Termina el texto presionando ESC para terminar. Mientras no hayas terminado el texto, puedes cambiar su posición en el dibujo haciendo clic con el ratón en donde quieras. Puedes también mantener el ratón y arrastrar el texto a su posición correcta.

• Si usas el botón derecho del ratón, el texto cambiará a cursiva.

• Presionando la tecla [SHIFT] (Mayúsculas), el texto aumentará de tamaño.

• Presionando la tecla [CTRL], cambiará a negrita.

Puedes cambiar la fuente y el estilo, haciendo clic en el icono Font (fuente) en la parte superior de la pantalla

También es posible girar el texto:

1. haz clic con el botón derecho del ratón sobre alguna de las opciones de texto de la Barra de Opciones. Aparecerá el siguiente cuadro

2. En él puedes seleccionar la dirección, usando uno de los 8 botones,

3. Ahora, haz clic en alguna parte de la imagen y empieza a escribir

Sellos Con esta opción, puedes añadir a tu dibujo un gran número de diferentes imágenes pequeñas. Hay animales, flores, planetas, etc.

Haz clic en este botón: Primero tienes que escoger la colección de sellos que te interesa. Después, elige el sello de la Barra de Opciones que quieres añadir. Entonces, haz clic con el ratón en el lugar de tu dibujo donde quieres agregar el sello.

• Presionando el botón derecho del ratón, se volteará el sello horizontalmente.



• Manteniendo presionada la tecla SHIFT (Mayúsculas), se agrandará.

• Finalmente, con la tecla [CTRL] se coloreará con el color preseleccionado.

• También puedes usar cualquier combinación de teclas de las descritas.

Cliparts Cliparts son imágenes que pueden ser escaladas y mantener perfectamente su forma.

1. Haz clic sobre el icono :

2. Primero tienes que elegir la colección de clipart que quieras.

3. Después, escoge el clipart que te guste para añadir a tu dibujo y arrástralo hacia él Área de Dibujo. Entonces, mantén pulsado el ratón y muévalo hacia abajo y hacia la derecha. Cuando el clipart tenga el tamaño deseado, suelta el botón del ratón.

• Si mantienes pulsada la tecla [ SHIFT] (Mayúsculas) mientras haces clic con el ratón, el clipart se rellenará de color que este seleccionado



• Si mantienes pulsada la tecla [CTRL], las medidas del clipart se mantienen proporcionales

Fondos / Texturas En esta opción encontrarás la manera de crear diferentes texturas. Verás que al elegir una, cambiara el dibujo que estemos elaborando pero debemos tener en cuenta que este herramienta se debe usara al inicio del dibujo si lo usamos en pleno dibujo todo lo realizado sera borrado.

• Para la mayoría de texturas, cuando haces clic sobre el icono usando el botón derecho del ratón, la textura se colorea del color preseleccionado. Con esto, puedes crear grandes efectos (por ejemplo, nubes rojas).

• Prueba también con las teclas [CTRL] y [SHIFT] (Mayúsculas) para realizar pequeños cambios en las texturas.



Formas especiales Con esta opción, puedes dibujar distintas formas especiales, como estrellas, casas, espirales, etc., haciendo clic con el ratón en algún sitio de tu dibujo. Para ver todas las posibilidades.

Efectos Con esta opción puedes aplicar toda clase de efectos a tu dibujo.

En primer lugar, están los efectos de color, que pueden aclarar u oscurecer la imagen, o suavizándola. También puedes voltear horizontal o verticalmente, inclinar , copiar varias veces.

• No olvides hacer clic sobre el icono con el botón derecho del ratón, o mantener presionadas las teclas SHIFT (Mayúsculas) o CTRL. A veces, ocurren cosas diferentes...

Imprimiendo el dibujo

Al presionar este icono, aparece una pequeña ventana de diálogo

Marca LANDSCAPE si quieres imprimir en formato horizontal.

Marca CENTER para centrar en la página.

SIZE puedes modificar el tamaño en se quieres imprimir tu dibujo, por si quieres que llene toda la página o sólo una parte.

Presionando PRINT te aparecerá el cuadro de diálogo de impresión estándar, que te permitirá seleccionar una impresora diferente y cambiar las opciones de impresión.



Actividad 2-3Como profesor necesitara cortar o modificar algunas imágenes para complementar sus actividades o contenidos que se desarrollaran en las sesiones de aprendizaje.

1. Empiece capturando el escritorio de Windows XP.

Hacer clic en el botón [Impr Pant]

2. Ingrese al programa Drawing for Children

Vaya al menú Inicio Todos los Programas Drawing for Children Drawing for children

3. Damos clic en la opción Pegar de la Barra de Opciones el puntero cambia de forma a una cruz + Ubicamos el cursos en el Área de Dibujo damos clic y se pegará lo capturado anteriormente damos clic las veces que queramos asta ubicar lo deseado en el área de dibujo.

4. Seleccionamos la opción Tijeras y de la imagen capturada solo copiamos el botón Inicio para lo cual damos clic en el botón izquierdo del mouse



5. Podemos complementar la imagen capturada con texto:

• Creamos una nueva imagen haciendo clic en el botón Nuevo Dibujo

pegamos lo capturado

• Ingresamos en texto hacemos clic en el botón Texto luego seleccionamos de la Barra de Opciones el formato de texto deseado

• Hacemos clic en el lugar donde vamos a ingresar el texto sabemos que si presionamos Shift y hacemos clic el texto sera más grande

6. Grabar el dibujo con el nombre Botón Inicio

Hacemos clic en el botón Guardar el dibujo donde aparece la ventana Guardar Como, en la cual especificaremos donde se guardará la imagen y con que nombre guardaremos la imagen


Podremos pegar lo seleccionado cuantas veces queramos,También podremos pegar esta selección en otros software

de aplicación como OpenOffice, Microsoft Office, etc.

Capítulo 3: Colección de clips

Objetivo GeneralUtilizar imágenes de OpenClipart en diversas actividades.


• Usar las imágenes en diferentes aplicaciones para crear libros de colorear, imágenes para unir puntos entre otras actividades.



Openclipart

OpenclipartOpenClipart es una galería de clipart (imágenes prediseñadas) de dominio público bajo los términos de CreativeCommons (http://creativecommons.org/licenses/publicdomain/), que podemos utilizar en cualquier proyecto que realicemos.

Estas imágenes están diseñadas en vectorial en formato “.svg”, aunque también se encuentran en “.png”.

Está compuesto por los siguientes paquetes:

openclipart - Es un metapaquete que por dependencias nos instala todos los paquetes siguientes. Sólo es necesario si queremos instalar todo.

openclipart-svg - Clipart originales en formato .”svg”, que podremos editar en aplicaciones como Inkscape. Generalmente no es necesario a menos que queramos realizar modificaciones sobre los archivos originales.

openclipart-png - Son los clipart exportados a “.png”. Generalmente son estos los que utilizaremos para nuestra Web, documentos, etc.

Todos los dibujos son donados por una gran cantidad de artistas a través de Internet y pasan a ser de dominio público, bajo licencia Creative Commons.

Los cliparts pueden ser consultados a través de un árbol de categorías, aunque también pueden descargarse el archivo actual con más de 3000 dibujos y tener así una copia en nuestro ordenador.

Libros creados

Con la ayuda de las imágenes disponibles de Openclipart, es posible crear libros de coloreado de diferentes temas (los animales, paisajes, fantasía, halloween, etc.). La idea es que estos libros sean publicados en formato PDF y sean de bajo tamaño (aproximadamente 12 hojas por libro). Para mayor información visite: Coloring Books (http://www.openclipart.org/wiki/Coloring_Books)

De igual forma y con la ayuda de las imágenes de Openclipart es posible crear libros de imágenes de unión de puntos, con las mismas características de los libros de coloreado que los padres pueden adquirir. Para mayor información visite: Joining Dots (http://www.openclipart.org/wiki/Joining_Dots



Capítulo 4: Gráficos Vectoriales

Objetivo GeneralUtilizar el software Inkscape para crear imágenes que no cambien de calidad con el cambio de resolución.

Objetivos Específicos

• Conocer y utilizar las diversas herramientas de Inkscape.

• Crear imágenes para colorear.

• Crear imágenes para unir puntos.



Introducción

Introducción

Inkscape es una herramienta de dibujo de software libre con capacidades similares al Illustrator, Freehand, y Corel Draw que utiliza el formato estándar “.svg”, para elaborar y editar gráficos vectoriales. Las aplicaciones SVG permiten tres tipos de objetos: a) formas gráficas vectoriales (líneas rectas y curvas, y áreas limitadas por ellas); b)imágenes digitales; y c) texto.

Los mapas de bits son las imágenes más usadas, las que ve siempre en Internet, o las que toma con la cámara de su móvil. Están formadas por diminutos puntos de color llamados píxeles. Cada píxel es de un color y todos juntos forman una imagen.

Las imágenes vectoriales, en lugar de estar compuestas por píxeles, están formadas por coordenadas matemáticas. La ventaja de estas imágenes es que son independientes de la resolución; es decir, puede agrandarlas todo lo que quiera y no perderán un ápice de calidad. Más que un sustituto, las imágenes vectoriales son un complemento a los mapas de bits. Mientras estas últimas son perfectas para fotografías y para varias clases de dibujo artístico, las vectoriales son excelentes para logos, imágenes con textos, ilustraciones técnicas, etc.

Los gráficos vectoriales describen las formas y objetos reales que ve en la imagen, independientemente de la resolución de la misma. Un motor de rasterización utiliza esta información para determinar cómo dibujar cada línea y curva en cualquier resolución o nivel de acercamiento.Esto contrasta con los gráficos rasterizados, que siempre están atados a una resolución específica y almacenan la imagen como una grilla de píxeles.

Sin embargo Inkscape también puede importar y mostrar gráficos rasterizados. Una vez importado, éste se convierte en otro objeto dentro del gráfico vectorial y se puede hacer con él todo lo que es posible con otros tipos de objetos (moverlo, transformarlo, recortarlo, etc).


Inkscape

Inkscape

Utilizando InkscapeInkscape es un programa de diseño vectorial. Esto significa que los gráficos así creados se podrán escalar a cualquier tamaño sin que pierdan calidad o reformar una vez hechos sin tener que borrar cada línea. También tiene la capacidad de exportar lo que dibujemos a un formato de mapa de bits para utilizarlo en cualquier aplicación, como fondo de pantalla, en una página web, etc.

Para empezar, abra Inkscape. Verá una ventana única. En esta ventana hay varias zonas importantes, muchas de ellas con botones o menús desplegables. La siguiente figura muestra la ventana e indica sus partes principales.


Inkscape

En esta primera imagen se puede observar la explicación de la utilidad de cada herramienta. También vemos en la parte inferior: el zoom al que estamos trabajando, la posición en la que está el ratón y un mensaje de ayuda para saber qué podemos hacer en cada momento. En la parte superior hay una barra de menús que convendría que usted mismo investigue, una barra de botones de tareas más frecuentes y una barra contextual que irá cambiando según la herramienta que usted haya seleccionado. A continuación las posibilidades de esta barra contextual.

Herramienta "puntero":

Función de cada botón, de izquierda a derecha:

Rotar izquierda Rotar derecha


Inkscape

Espejar horizontal

Espejar vertical

Enviar al fondo

Bajar una capa

Subir una capa

Enviar arriba de todo

Posición horizontal (1)

Posición vertical (1)

Ancho

Alto

Unidad de medida

(1) Del vértice superior izquierdo de la figura o lo seleccionado.

El pequeño "candado" que se ve entre "Ancho" y "Alto" es para mantener la proporcionalidad entre estas magnitudes cuando se cambia una de ellas.

Herramienta "Editor de nodos":


Agregar nodo (2)

Sacar nodo (2)

Cerrar figura

Cerrar con un segmento

Sacar un segmento

Crear un corte

Cúspide

Empalme

Empalme simétrico

Convertir a recta

Convertir a curva

Objeto a curvas

Contorno a curvas

(2) Entre dos nodos seleccionados.

Herramienta "Rectángulos":


Radio horizontal de las esquinas


Inkscape

Radio vertical de las esquinas

Unidad de medida y esquinas en punta

Herramienta "Elipses":


Ángulo de inicio (3)

Ángulo de fin (3)

Arco o Porción

Figura cerrada

(3) Medido desde la línea horizontal sobre el lado derecho de la figura y en el sentido de las agujas del reloj.

Herramienta "Polígonos":


Cantidad de puntas

Polígono o estrella

Distancia del centro a la cuenca de la estrella

Convierte en curva las caras

Vuelve a los valores del principio

Herramienta "Espirales":


Vueltas del espiral

Aumento de radio progresivo (4)


Inkscape

Punto interior donde comienza la espiral


Herramienta "Líneas caligráficas":


Máximo ancho de la pluma

Ángulo de la mano

Suavidad del trazo

Lentitud del trazo



Inkscape

Desplazandonos por la pizarraExisten varias maneras de desplazarnos por la pizarra de Inkscape.

a) Presionado la conbinación de teclas [Ctrl]+Teclas de direccionales para desplazarse por la pizarra en cualquier dirección.

b) Por medio de la rueda del ratón la cual solo nos permite movernos en forma vertical

c) Presionando [Shift] + la rueda del ratón y podremos desplazarnos en forma horizontal en la pizarra de Inkscape

d) También por medio de las barras de desplazamiento (presione Ctrl+B para visualizarlas u ocultarlas).

Acercar y alejar (Zoom)La manera más sencilla de activar el zoom es por medio de las teclas - y + También puede emplear:

1. [Ctrl]+rueda del ratón

2. [Ctrl]+Clic del botón derecho para acercamiento y [Shift]+Clic del botón derecho para alejar

3. Seleccionar en la parte inferior el campo de zoom que le permite ingresar el valor del porcentaje % para la visualización, luego presione Enter

Disponemos de la herramienta Zoom Ubicada en la barra de Herramientas la cual permite hacer un zoom alrededor de un área por medio de un clic sostenido alrededor de ella.

Inkscape también conserva un historial de los niveles de zoom que ha usado en el trabajo, en la última sesión.


Recordemos que al poner el mouse sobre los diferentes botones de las barras del inkscape aparecerá un

pequeño mensaje indicando el nombre de dicho botón

Inkscape

Caja de herramientasContiene las “Herramientas” para seleccionar, dibujar o modificar objetos. Para escoger una herramienta haga clic en el ícono. Con doble-clic se abre el diálogo de preferencias de esa herramienta. El cursor (puntero) cambia de forma cuando se coloca sobre la pizarra, dependiendo de la herramienta seleccionada.

Herramientas disponibles:

Creando y Administrando documentos• Para crear un nuevo documento vacío, use Archivo Nuevo o presione Ctrl+N.

• Para abrir un documento SVG existente, Archivo Abrir (Ctrl+O).

• Para guardar, use Archivo Guardar (Ctrl+S), o Guardar como(Shift+Ctrl+S) para guardar bajo un nuevo nombre. (Inkscape puede aún ser inestable, así que recuerde guardar a menudo)

Inkscape usa el formato SVG (Scalable Vector Graphics/Gráficos de Vectores Escalables) para estos archivos. SVG es un estándar abierto extensamente soportado por software gráficos. Los archivos SVG están basados en XML y pueden ser editados con cualquier editor de XML (aparte de Inkscape, por supuesto). Además de SVG, Inkscape puede importar y exportar muchos otros formatos (EPS, PNG)

Inkscape abre una ventana aparte para cada documento. Usted puede navegar a través de ellas usando su manejador de ventanas (ejemplo por medio de Alt+Tab), o puede usar los atajos de Inkscape Ctrl+Tab, el cual hará un ciclo a través de las ventanas de documentos. (Ahora cree un nuevo documento y cambie entre estos documentos para practicar.)


Algunas operaciones están disponibles a través de atajos de teclado. Abra Ayuda Teclas y ratón para observar la referencia completa.

Inkscape

Creando FormasDar Clic sobre la herramienta Rectángulo o presione F4 y arrastre, en un nuevo documento o aquí:

Como puede observar, los rectángulos por defecto se muestran azules, con un relleno azul y delineado, en parte transparente. Con otras herramientas también podemos crear elipses, estrellas y espirales:

Estas herramientas son, en conjunto, conocidas como herramientas de formas. Cada forma que cree muestran uno o más manejadores en forma de diamante; pruebe arrastrándolos para observar como responden las formas.

El panel de control para una herramienta de forma es otra manera para transformar; estos controles afectan a las formas actualmente seleccionadas (por ejemplo aquellas que muestren los manejadores) y configura por defecto el que aplicará a las formas recién creadas.

Para deshacer su última acción, presione Ctrl+Z. (O, si cambia de parecer, puede rehacer la acción deshecha mediante Mayus+Ctrl+Z.)

Moviendo, Escalando, RotandoLa herramienta más utilizada en Inkscape es el Selector. Clic en el primer botón (con la forma de cursor) sobre la barra de herramientas, o presione F1 o Barra Espaciadora. Ahora puede seleccionar cualquier objeto en la pizarra. Clic sobre un rectángulo.


Inkscape

Usted podrá observar que ocho manejadores en forma de flecha aparecen alrededor del objeto. Ahora puede:

● Mover los objetos al arrastralos. (Presione Ctrl para restringir movimientos a horizontal y vertical.)

● Escalar los objetos mediante el arrastrado de cualquier manejador. (Presione Ctrl para preservar el radio de alto/ancho original.)

Ahora clic en el rectángulo de nuevo. Los manejadores cambian.

Ahora puede:

● Rotar los objetos mediante el arrastrado de los manejadores de las esquinas. (Presione Ctrl para restringir la rotación a pasos de 15 grados. Arrastre la marca en forma de cruz para la posición del eje de rotación.)

● Inclinar (esquilar) los objetos mediante el arrastre de los manejadores no-esquinas. (Presione Ctrl para restringir inclinaciones a pasos de 15 grados.)

Mientras use el Selector, también podrá usar los campos de entradas numéricos en la barra de control (Sobre la pizarra) para configurar valores exactos para coordenadas (X y Y) y tamaño (W y H) de la selección.

Transformación por medio del tecladoUna de las características de Inkscape que lo diferencian de otros muchos editores vectoriales es su énfasis en la accesibilidad por teclado. Existe difícilmente algún comando o acción que sea imposible realizar por teclado y la transformación no es la excepción.

Usted puede usar el teclado para mover (teclas de flecha), escalar (teclas < y >) y rotar (teclas [ y ]) objetos. Las distancias por defecto de mover y escalar es de 2 px; con Mayus, puede mover o escalar por 10 veces. Ctrl+> y Ctrl+< escalan más y menos al 200% o 50% del original, respectivamente. Por defecto la rotación es de 15 grados; con Ctrl, rota por 90 grados.


Inkscape

Considere como más útiles las transformaciones tamaño-pixel, invocadas mediante el uso de Alt con la tecla de transformación. Por ejemplo, Alt+flechas moverá la selección 1 pixel en el zoom actual (1 pixel de pantalla, no se confunda con la unidad px la cual es una unidad de medida SVG independiente del zoom). Esto significa que si usted amplia, un Alt+flecha resultará un movimiento absolutamente pequeño el cual aún se observa como si empujase un pixel sobre su pantalla. Así esto es posible para posicionar objetos con precisión arbitraria simplemente mediante un acercamiento o alejamiento como lo requiera.

Igualmente, Alt+> y Alt+< escalan selecciones haciéndola visibles en un tamaño de un pixel de pantalla, y Alt+[ y Alt+] lo rotan de la manera más alejada del punto central movido mediante un pixel de pantalla.

Selecciones MúltiplesPuede seleccionar cualquier número de objetos simultáneamente mediante Shift+clic sobre los objetos deseados a seleccionar. O, puede arrastrar alrededor de los objetos que requiere seleccionar; esto es llamado Selección elástica. (El selector crea selecciones elásticas cuando se arrastra desde un espacio vacío; sin embargo, si presiona Shift antes de iniciar el arrastrado, Inkscape siempre creará la selección elástica.) Practique mediante la selección de las tres formas a continuación:

Ahora, utilice selecciones elásticas (mediante arrastrado o Shift+arrastrar) para seleccionar las dos elipses pero no el rectángulo:

Cada objeto individual dentro de una selección muestra una señal de selección, por defecto, un marco rectangular. Estos marcos hacen más sencillo el observar que está seleccionado y que no lo está. Por ejemplo, si selecciona ambas elipses y el rectángulo, sin los marcos le sería muy difícil adivinar cual de las elipses están seleccionadas y cuales no.


Inkscape

Shift+clic sobre un objeto seleccionado lo excluye de la selección. Seleccione los tres objetos a continuación, después emplee Shift+clic para excluir ambas elipses de la selección, dejando solo seleccionado el rectángulo.

Presionando Esc deselecciona cualquier objeto seleccionado. Ctrl+A selecciona todos los objetos en la capa actual (si no ha creado capas, esto es lo mismo que todos los objetos en el documento).

AgrupandoMuchos objetos pueden ser combinados en un grupo. Un grupo se comporta como un objeto sencillo cuando usted lo arrastra o lo transforma. adelante, los tres objetos sobre la izquierda son independientes; los mismo tres objetos sobre la derecha están agrupados.

Para crear un grupo, seleccione uno o más objetos y presione Ctrl+G. Para desagrupar uno o más grupos, selecciónelos y presione Ctrl+U. Los mismo grupos pueden ser agrupados, así como cualquier otro objeto; dichos grupos recursivos pueden ir atrás en una profundidad arbitraria. Sin embargo, Ctrl+U sólo desagrupa el nivel superior de agrupación en una selección; necesitará presionar Ctrl+U repetidamente si quiere desagrupar completamente un grupo profundo dentro de un grupo.

No tiene necesariamente que desagrupar, sin embargo, si desea editar un objeto dentro de un grupo. Presione Ctrl+clic sobre el objeto y este será seleccionado y editable solo, o Shift+Ctrl+clic sobre varios objetos (dentro o afuera de cualquier grupo) para múltiples selecciones sea cual sea la agrupación. Intente mover o transformar las formas individuales en el grupo (adelante a la derecha) sin desagrupar, entonces deseleccione y seleccione el grupo normalmente para observar que continua aún agrupado.

Relleno y bordeAlgunas funciones de Inkscape están disponibles vía diálogos. Probablemente la manera más sencilla de pintar un objeto de algún color es con la paleta de colores, seleccione un objeto y clic en un color para pintarlo (cambia su color de relleno).


Inkscape

Es más poderoso el diálogo de Relleno y Borde (Shift+Ctrl+F). Seleccione la forma de adelante y abra el diálogo de Relleno y Borde (Menú: Objeto/Relleno y Borde)

Podrá observar que el diálogo posee tres pestañas: Relleno, Color de trazo y Estilo de trazo. La pestaña Relleno le permite editar el relleno (interior) del objeto(s) seleccionado(s). Usando el botón más abajo de la pestaña puede seleccionar los tipos de relleno, incluyendo sin relleno (el botón con la X), color uniforme, así como gradientes lineales o radiales. Para las siguientes formas, el botón de relleno uniforme será activado.

Más abajo, puede observar una colección de selectores de color, cada uno se encuentra en su propia pestaña: RGB, CMYK, HSL y Rueda.

Considere el Selector de Rueda , donde puede rotar el triángulo para escoger un matiz en la rueda, y después seleccione una sombra que es el matiz del triángulo. Todos los selectores de color contienen un desplazador para configurar el alfa (opacidad) de el/los objeto(s) seleccionado(s).

Cuando selecciona un objeto, el selector de color es actualizado para mostrar su relleno y borde actual (para selecciones de múltiples objetos, el diálogo muestra su color promedio). Trabaje con estos ejemplos o cree sus propios ejemplos:

Usando la pestaña color de borde, remueva el borde (reborde) del objeto, o asigne cualquier color o transparencia:


Inkscape

La última pestaña Estilo de borde, le permite configurar el grosor y otros parámetros del borde:

Finalmente, en vez de un color uniforme, puede usar gradientes para rellenos y/o bordes:

Cuando cambia de color uniforme a gradiente, el nuevo gradiente creado usa el color uniforme previo, presentándolo de opaco a transparente. Cambie a la herramienta Gradiente (Ctrl+F1) para arrastrar el manejador gradiente ( los controles conectados por líneas que definen la dirección y longitud del gradiente). Cuando alguno de los manejadores de gradiente es seleccionado (Azul claro), el diálogo de relleno y el borde configura el color del manejador en vez de todo el color del objeto seleccionado.

Otra manera conveniente para cambiar el color de un objeto es usando la herramienta Balde (F7). Solo haga clic dentro del dibujo con la herramienta y el color seleccionado será asignado al relleno del objeto seleccionado (Mayus+clic asignará el color de borde).


Inkscape

Actividad 4-1

Crear objetos, dar color y agrupar.Vamos a crear objetos básicos que se emplean en cualquier dibujo, para ver las operaciones que se pueden hacer dentro del menú Objetos.

1. Dibujamos un círculo y buscamos que quede como en la figura, para ello abrimos el menú de Objeto donde se ven todas las opciones posibles:

2. Seleccionamos MenúObjetoRelleno y borde

3. Seleccionamos el círculo y damos clic a la pestaña Relleno, escogemos primero el botón de color uniforme, color azul y luego clic en el botón de gradiente radial.

4. Color de trazo: color uniforme, clic en la pestaña HSL y movemos las marcas en las barras para que queden: H(tono)=170, S(saturación)=255, L(claridad)= 63, A(opacidad) =252

5. Estilo de trazo: Ancho 4.100 px, en unión seleccionamos el segundo botón, y escogemos los guiones mostrados.

6. De manera similar se pueden realizar diversos dibujos disponibles en la barra de gráficos, dándoles color de relleno, a los bordes, mover, ampliar y girar.


Inkscape

Duplicado, Alineación, DistribuciónUna de las operaciones más comunes es duplicar un objeto (Ctrl+D teniendo el objeto seleccionado ). El duplicado es colocado exactamente debajo del original y es seleccionado, así se le posibilita el arrastrar mediante el ratón o las teclas de flechas. Para practicar, intente llenar una línea con copias de estos cuadrados negros:

Las opciones, copias del cuadrado, son colocados más o menos aleatoriamente.

El diálogo de Alineación (Ctrl+Shift+A) o Menú /Objeto /Alinear y distribuir, es útil.


Inkscape

Seleccione todos los cuadrados (Shift+clic o arrastre una selección elástica), abra el diálogo y presione el botón "Centrar en el eje horizontal", luego el botón "Igualar los huecos horizontales entre los objetos"(lea los mensajes de las herramientas). Ahora los objetos son alineados ordenados y distribuidos espacialmente. Estos son otros ejemplos de alineación y distribución:

Orden-ZEl término orden-z se refiere al orden de apilado de los objetos en un gráfico, por ejemplo dichos objetos están en la parte superior y son más oscuros que el resto. Los dos comandos en el menú Objetos, Llevar al Frente, (la tecla Inicio) y Llevar al Fondo (la tecla Fin), moverá sus objetos seleccionados al nivel superior o al fondo de la capa del orden-z actual. Otros dos comandos, Arriba (PgUp) y Abajo (PgDn), podrán hundir o emerger la selección un sólo paso, por ejemplo mueve el último objeto no seleccionado en el orden-z (sólo cuente objetos seleccionados; si nada superpone la selección, muévalo Arriba o Abajo hacia la parte superior o el fondo correspondiente).

Practique usando estos comandos mediante el revertimiento del orden-z de los objetos de adelante, de manera que la elipse más a la izquierda está en el nivel superior y la elipse de más a la derecha está en el fondo:

Un atajo de selección muy útil es la tecla Tab. Si no hay nada seleccionado, este selecciona el objeto de más al fondo; de otra forma este selecciona el objeto debajo del objeto(s) seleccionado(s) en orden-z. Shift+Tab trabaja a la inversa, iniciando desde el objeto en el nivel superior y procede con los siguientes. Los objetos que crea son agregados al nivel superior de la pila, presionando Shift+Tab con nada seleccionado convenientemente seleccionará los últimos objetos que usted ha creado. Practique con las teclas Tab y Shift+Tab en la pila de elipse de abajo.


Inkscape

Actividad 4-2

Duplicar, agrupar Muchas veces al crear un gráfico o dibujo es necesario agrupar objetos, ordenarlos o duplicarlos, vamos a practicar realizando estas acciones en figuras básicas.

1. Cree las imágenes que se muestran en la figura con las características apropiadas.

2. Agrupar seleccionando todos los objetos, para luego duplicarlos.

3. Desagrupe los objetos, dando clic en cada uno de ellos o con clic derecho.

4. Con los botones Shift, Ctrl +A, abra la ventana Alinear y distribuir para ordenar los objetos.

5. Seleccione los cuatro objetos y de clic en alinear el lado derecho de los objetos y luego en alinear el lado inferior de los objetos para obtener la imagen mostrada.


Inkscape

Seleccionando debajo y arrastrando seleccionados¿Qué hacer si el objeto que requiere está oculto tras otro objeto? Usted podría aún observar el objeto del fondo si el del nivel superior está (parcialmente) transparente, pero dando clic en el seleccionará el objeto superior, no el que usted requiere.

Esto es para lo que Alt+clic está hecho. Primero Alt+clic selecciona el objeto superior como un sencillo clic sin embargo, el siguiente Alt+clic en el mismo punto seleccionará el objeto debajo del superior; el siguiente, el objeto bajo siguiente, etc. Muchos Alt+clic en una línea hará un ciclo, superior-al-fondo, a través de la pila de objetos en orden-z en el punto del clic. Cuando el objeto del fondo es alcanzado, el siguiente Alt+clic naturalmente, seleccionará el objeto más superior.

Esto es bueno, pero una vez que usted selecciona un objeto bajo-la-superficie, ¿Qué puede hacer usted con él?. Puede usar teclas para transformarlo y puede arrastrar los manejadores de selección. Sin embargo, arrastrando sobre el objeto mismo deseleccionará el objeto superior de nuevo (esto es como el clic-y-arrastrado está diseñado para trabajar, este selecciona el objeto (superior) bajo el primer cursor, entonces arrastre la selección). Para indicarle a Inkscape el arrastrar que está seleccionado ahora sin seleccionar nada más, use Alt+arrastrar. Esto moverá la selección sin importar donde arrastra usted el ratón.

Practique Alt+clic y Alt+arrastrar, para ello cree un rectángulo y las dos formas como la figura que observa más abajo; practique seleccionando sobre las dos formas cafés debajo del rectángulo verde transparente.

ConclusiónAsí concluye el tutorial básico. Hay mucho más en el Inkscape, sin embargo las técnicas descritas aquí le permitirán crear gráficos simples muy útiles. Para conceptos y utilidades más complicadas, vaya a través del tutorial Avanzado en el menú AyudaTutoriales.


Inkscape

Actividad 4-3

Creación de imágenes para coloreadoEsta guía pretende mostrar de una manera sencilla, la creación de imágenes para coloreado, utilizando imágenes y el editor de imágenes vectoriales Inkscape.

En esta guía se mostrarán dos técnicas para modificar la imagen original y obtener el resultado esperado.

Técnica No.1: Detección de bordesPara utilizar esta técnica se necesita trabajar inicialmente con una imagen de mapa de bits, convirtiéndose luego en vectorial. En nuestro caso utilizaremos una de tipo PNG , se puede usar las imágenes que vienen dentro del grupo de imágenes de Openclipart.

Iniciamos Inkscape.

1. Importamos la imagen de tipo PNG para iniciar con la edición (ArchivoImportar). En este caso se importó la imagen de nombre tux1.png. que se encuentra en la carpeta de Actividades Inkscape. Se puede utilizar las teclas + o - para ampliar o disminuir el porcentaje de visualización para trabajar más fácilmente con la imagen.


Inkscape

2. Luego convertimos la imagen en vectorial,teniendo la imagen seleccionada vamos al Menú Trazo Vectorizar mapa de bits.

En la nueva ventana observe la pestaña Modo y las dos categorías incluidas en ella: Pasada simple: crea un trazo y Pasadas múltiples: crea un grupo de trazos así como los filtros disponibles en ella:

Corte de luminosidad

Detección de bordes

Reducción de colores

3. Pruebe con las diferentes opciones y observe su resultado pulsando sobre el botón Actualizar. Aumente o disminuye los valores numéricos dispuestos en Umbral hasta obtener una imagen nítida y que considere adecuada para sus necesidades.

4. Por ejemplo, nosotros hemos marcado “Detección de bordes” y seleccionamos un umbral intermedio de 0.50 (El umbral determina el grosor del borde y puede ser modificado de acuerdo a las necesidades).

Cuando tenga un resultado adecuado, de clic en Aceptar y cierre la ventana para volver a la aplicación.


Inkscape

3. Cuando aplicamos la vectorización, la imagen obtenida queda detrás de la imagen original y tenemos que arrastrarla para poder observar la imagen vectorizada.

4. Para obtener un mejor resultado sobre los bordes podemos utilizar el Menú ObjetoRelleno y borde y en la pestaña color de trazo seleccionamos la opción color uniforme (representado por un cuadrado de color uniforme) y luego ajustamos el ancho del borde para que sea uniforme, utilizando la opción estilo de trazo.

5. Por último ampliamos la imagen vectorizada y le agregamos un nombre usando la herramienta texto y dándole un formato adecuado.

6. Guardar el dibujo. Darle un nombre y luego exportar como mapa de bits a la ubicación deseada.


Inkscape

Técnica No.2: Relleno y borde

Para utilizar la herramienta relleno y borde se debe trabajar directamente con imágenes vectoriales.

1. Importamos la imagen de tipo SVG para iniciar con la edición (ArchivoImportar). En este caso se importó la imagen de nombre pinguino_col_piccolo_arc_01.svg de open clipart. que se encuentra en la carpeta Actividades Inkscape

2. Antes de utilizar la herramienta de relleno y borde debemos colocar la imagen en modo edición, dando doble clic sobre ella y luego empezamos a seleccionar cada una de las partes de la imagen para ser editadas.


Inkscape

3. Seleccionamos la parte de la imagen a editar y luego abrimos la herramienta Relleno y borde dando clic en menú Objeto / Relleno y borde. En la pestaña Relleno podemos seleccionar la opción sin pintura (representado por una X), si esta opción no deja el objeto de color blanco, entonces debemos seleccionar color uniforme (representado por un cuadrado de color uniforme) y escribir los valores R-G-B-A (Rojo-Verde-Azul-Alpha) cada uno en 255, o en sistema hexadecimal ffffffff. También verificamos que el trazo del borde sea adecuado y en caso de modificación utilizamos las opciones Color de trazo y Estilo de trazo

4. Para evitar que la imagen se desagrupe, damos doble clic fuera de la imagen para poderla arrastrar y ampliar uniformemente. Por último le ponemos un nombre al dibujo usando la herramienta texto.


Inkscape

Dependiendo de la imagen a editar una de las dos técnicas puede dar mejores resultados que otra.

Guardamos la imagen como svg o la podemos exportar como imagen png.

Creación de imágenes uniendo puntosAntes de leer este tema es recomendable que vea primero Creación de imágenes para coloreado, ya que para crear imágenes de unir puntos es necesario trabajar con imágenes sin color.

A continuación vamos a describir de una forma sencilla, la creación de imágenes de unión de puntos, utilizando el repositorio de imágenes de Openclipart y el editor de imágenes vectoriales Inkscape.

1. Importamos la imagen de tipo vectorial SVG, que no posea colores y la ampliamos al tamaño deseado. La imagen es la que trabajamos en la parte de coloreado y está en la carpeta Actividades Inkscape, con el nombre pinguinos.svg.

Archivo Importar Actividades Inkscape pingüino.svg


Inkscape

2. Añadimos una nueva capa dando clic en Capa Añadir capa, colocamos como nombre (Borde), y verificamos que la posición sea: Encima de la actual. Podemos habilitar la vista de capas dando clic en Capa Capas para poder trabajar con ellas posteriormente.


Inkscape

3. Sobre la nueva capa “Borde”y utilizando la herramienta Bézier empezamos a crear los puntos (nodos) alrededor de toda la imagen (con cada clic se crea un nuevo nodo). Es recomendable ampliar la visualización de la imagen un poco (oprimiendo la tecla +) para poder manipular más fácilmente la herramienta. Para ver la silueta obtenida a través de los puntos creados, ocultamos la capa principal (capa 1) dando clic al icono que está representado por un ojo (dentro de la ventana capas).


Inkscape

4. Ahora creamos una nueva capa llamada puntos y copiamos la silueta creada en la capa borde. Debemos tener en cuenta que al pegar la silueta en la capa puntos quede en la misma posición donde se encuentra la silueta de la capa borde, para ello verificamos las coordenadas X y X que se muestran en la parte superior de la pantalla.

5. La capa borde será utilizada para ocultar la silueta de la imagen original y la capa puntos para crear los puntos numerados de la imagen.

Ahora empezamos a trabajar con la capa borde. Para ello es recomendable ocultar las otras dos capas (puntos y capa1) para estar seguros de estar trabajando en la capa correcta. Seleccionamos la silueta dando clic en ella y luego abrimos la herramienta Relleno y borde para cambiar el color y el ancho del trazo de la silueta. Elegimos la pestaña Color de trazo y damos clic en la opción color uniforme (representado por un cuadrado de color uniforme) y escribimos los valores R-G-B-A (Rojo-Verde-Azul-Alpha) cada uno en 255, o en sistema hexadecimal ffffffff, para convertir la silueta a blanco.


Inkscape

6. Ahora la idea es ocultar la silueta de la imagen original, sobreponiendo las capas borde y capa 1. Primero seleccionamos Estilo de trazo de la herramienta Relleno y borde y activamos la visualización de la capa 1, dando clic en el icono del ojo cerrado. Luego empezamos a subir el valor del ancho del Estilo de trazo hasta que desaparezca por completo la silueta de la imagen original (en nuestro caso el ancho quedo en 16.9px).


Inkscape

7. Activamos la visualización de la capa puntos (dando clic en el icono del ojo cerrado) para aplicar el efecto numerar nodos. Primero seleccionamos la silueta de la capa puntos dándole clic y luego activamos el efecto dando clic en Efectos Mostrar trazo Numerar nodos. Escribimos en Tamaño de tipografía 14 y en Tamaño de punto 5px y luego aceptamos. El sistema automáticamente nos genera los puntos y la numeración de cada uno de ellos.


Inkscape

8. Finalmente eliminamos el número que queda sobrepuesto en el nodo 1 (que es donde se encuentran el nodo inicial y final de la silueta) dando doble clic sobre él y oprimiendo luego la tecla supr o delete y trazamos una línea guía entre el nodo 1 y el final (en este caso fue el nodo 42). También es posible reordenar un poco el número de los nodos para evitar que se crucen posteriormente al hacer los trazos de los puntos a mano alzada.


Inkscape


Capítulo 5: Manipulación de

imágenes

Objetivo GeneralConocer el programa Gimp para modificar imágenes.


• Buscar y modificar imágenes para ilustrar diferentes informaciones.



Introducción

Introducción

La siglas GIMP originalmente significan (General Image Manipulation Program - Programa de manipulación de imágenes general). Este nombre cambio en 1997 a (GNU Image Manipulation Program - Programa de manipulación de imágenes de GNU) para pasar a formar parte oficial del proyecto GNU.

GIMP es un programa que sirve para la edición y manipulación de imágenes, es muy similar a Photoshop pero con la diferencia de ser un software libre.

Además es un software multiplataforma ya que se puede utilizar en varios Sistemas Operativos. La primera versión fue desarrollada para sistemas Unix, inicialmente fue pensada específicamente para GNU/Linux, sin embargo actualmente existen versiones totalmente funcionales para Windows y para Mac OS X.

Proceso de gráficos y fotografías digitales

GIMP incluyen la creación de gráficos y logos: el cambio de tamaño y recorte de fotografías, el cambio de colores, combinación de imágenes usando un paradigma de capas, la eliminación de elementos no deseados de las imágenes y la conversión entre distintos formatos de imágenes. También puede ser utilizado para crear imágenes sencillas animadas.

GIMP es también conocido por ser quizás la primera gran aplicación libre para usuarios finales. Trabajos anteriores, como GCC, el núcleo de Linux, etc. eran principalmente herramientas de programadores para programadores. GIMP es considerado por algunos como una prueba de que el proceso de desarrollo de software libre puede crear aplicaciones que los usuarios no especializados puedan usar productivamente; de esta forma, abrió el camino a otros proyectos como KDE, GNOME, Mozilla Firefox, OpenOffice.org y otras aplicaciones posteriores.


GIMP

GIMPGIMP fue desarrollado como una alternativa libre al Photoshop, pero este último todavía domina el mercado en las industrias de impresión y gráficas.

Además del uso interactivo, GIMP permite la automatización de muchos procesos mediante macros. Incluye un lenguaje llamado Scheme que se puede usar para esto, existen otras alternativas como Perl, Python, Tcl y experimentalmente Ruby.

De esta manera se pueden escribir guiones y plugins para GIMP que se utilicen interactivamente o simples imágenes estáticas. GIMP usa GTK+ como biblioteca de controles gráficos.

El espacio requerido para ser instalado es, relativamente, mucho menor al necesario por otros programas, alrededor de unos 10 Mb en el disco duro son suficientes.

Gimp está optimizado para una pantalla de 1024 x 800 pixeles, pero se puede ejecutar en menores resoluciones. Durante la instalación, si se tiene un monitor menor a dicha cantidad, basta con maximizar la ventana y los controles de la instalación quedan visibles.

Esta escrito bajo una licencia de software libre, que permite que el usuario distribuya, copie o modifique el programa sin tener que pagar derechos de autor ni tener que atenerse a otras licencias, que no permitan la libre distribución y mejoramiento del programa.

Características Sus principales características son:

● Completo conjunto de herramientas para dibujar, incluyendo pinceles, lápiz, aerógrafo, reproducción, etc.

● Gestión especial de memoria cuando el tamaño de la imagen está sólo limitado por el espacio disponible en disco.

● Muestreo de sub-píxel para todas la herramientas de dibujo para antialiasing de alta calidad.

● Soporte completo para canal Alfa.

● Capas y canales.

● Base de datos procedural para llamadas a funciones internas GIMP desde programas externos, como Script-Fu.

● Capacidades de scripting avanzadas.


GIMP

● Múltiple hacer/deshacer (sólo limitado por el espacio en disco).

● Herramientas de transformación incluyendo rotación, escala.

● Formatos de archivos soportados: GIF, JPEG, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP y otros.

● Carga, visualización, conversión y salvaguarda de diferentes formatos de archivos.

● Herramientas de selección, incluyendo rectángulo, elipse, libre, difuso, bezier e inteligente.

● Complementos que permiten añadir fácilmente nuevos formatos de archivos y nuevos filtros de efectos.

● Respecto a la interfaz de usuario, GIMP utiliza las bibliotecas gráficas GTK2+.

Utilizando GIMPLa ventana al iniciar GIMP varía continuamente según la versión.


GIMP

Se puede iniciar Gimp desde Inicio Todos los Programas GIMP Gimp2 o en el acceso directo del escritorio.

Cuando se inicia la aplicación aparecen en el escritorio una serie de ventanas. La más importante de ellas es la "Ventana principal de Gimp". Acoplada a ella en la parte inferior aparece la ventana de "Opciones de herramienta" que varía según la herramienta que seleccionemos. La otra ventana la conforman "Capas, canales, rutas, deshacer" y "Brochas, patrones, degradados".

También puede aparecer al iniciar Gimp una ventana llamada "Consejo del día de El Gimp" en la cual se nos muestran consejos útiles sobre el funcionamiento de la aplicación. Podemos consultar otros consejos pinchando sobre Consejo anterior o Consejo siguiente, o Cerrar la ventana. También podemos hacer que la ventana de Consejos no aparezca las próximas veces que iniciemos la aplicación desactivando la opción "Mostrar un consejo la próxima vez que inicie El Gimp".

En realidad puede desplegarse en pantalla un número variable de ventanas, en función de las necesidades de edición.

Cuando arranca Gimp por primera vez aparece una pantalla con varias ventanas (configuración predeterminada). Será parecida a la de la imagen.


GIMP

Se puede configurar de la forma que más le convenga: abriendo más diálogos, y empotrándolos si desea a los existentes y distribuyendo las ventanas.


GIMP

Las ventanas y los diálogosVemos las ventanas individualmente.

1. Consejo del día de Gimp: puedes marcar la casilla "Mostrar un consejo.....", cuando arranque Gimp, en otra ocasión, aparecerá de nuevo esta ventana con un nuevo consejo. Puede ver, en cualquier momento, los consejos anteriores o siguientes; después, si quiere, la puede cerrar. También, se puede abrir esta ventana desde Ayuda/Consejo del día, en la Caja de Herramientas.

La siguiente ventana es:

2. La Caja de Herramientas. Es el corazón de Gimp y la ventana más importante. No se puede duplicar ni borrar (obviamente, esto cerraría Gimp). En ella se encuentran la mayoría de herramientas de Gimp (las cinco primeras filas de iconos ).

Si sitúa el ratón sobre los distintos iconos aparecerá información sobre ellos y, en el caso de las herramientas, también muestra un atajo de teclado.

Desde el Menú ArchivoPreferencias opción Caja de Herramientas se pueden habilitar que se muestren: Color de fondo y frente, Brochas, Patrones y Degradados, y Mostrar Imagen activa.

Bajo las herramientas , los cuadrados negro y blanco, muestran el color de fondo y frente seleccionado, dando dos veces clic sobre cualquiera de ellos, se accede al diálogo para seleccionar un nuevo color, lo mismo con el otro.


GIMP

A la derecha de estos, brochas, patrones y degradados seleccionados; dando clic sobre ellos, se abre el diálogo correspondiente. Luego observamos, una pequeña imagen de la imagen activa. Al dar clic sobre ella se abre el diálogo de imagen con una lista de las imágenes abiertas .

Desde el Menú ArchivoDiálogos se puede acceder a los distintos diálogos disponibles.

En el l Menú ArchivoAbrir navegue hasta la carpeta “Actividades Gimp” y de clic a la imagen th_2086.jpg para observar las características de las siguientes ventanas de diálogo.

3. Opciones de Herramientas, es un diálogo empotrable, situado en la parte inferior de la Caja de Herramientas, le permite configurar distintos parámetros de la herramienta seleccionada, en este caso la herramienta activa es el Pincel.

4. Capas, Canales, Rutas, Deshacer. Un diálogo empotrable con cuatro solapas( solo podrá estar activa una solapa). La capa, canal o ruta activa se muestra resaltada.

Desde los tres primeros diálogos puede manipular diversos aspectos, como son editar, modificar y manejar:

Capas: la capa o capas que componen la imagen.

Canales: los canales de color de la imagen y las máscaras de selección.

Rutas: las rutas que haya creado. Puede convertirlas en selecciones y viceversa.

El diálogo Deshacer le permite volver a un estado anterior o posterior de la manipulación que hace sobre una imagen.

Estos cuadros de diálogo resultan básicos en cualquier programa de edición y retoque digital.

5. Brochas, Patrones, Degradados. Otro diálogo empotrable con tres solapas que le permite seleccionar los distintos tipos disponibles de Brochas, Patrones y Degradados.


GIMP

6. La ventana de imagen

Es el área de trabajo principal en el que se desarrollan las tareas de GIMP. En el interior del área se muestra la imagen que se va a editar.

En la barra superior de esta ventana (barra de título)se muestra una serie de informaciones: el nombre del archivo, el número de veces abierta, el modo de color y número de capas (RGB y 1 capa).

Hasta aquí, hemos visto una descripción, muy general, de las ventanas y diálogos que tenemos al arrancar Gimp por primera vez.

Añadir un diálogoSi quiere añadir un diálogo a una ventana, pulsando sobre este icono, (resaltado en la imagen) se abre el menú de diálogo activado. Seleccionar Añadir solapa, elegir la opción deseada y luego el diálogo deseado, se añadirá.

En la imagen vemos un detalle, donde se han añadido el diálogos Paletas y Tipografías.


GIMP

La disposición de la pantallaCon lo visto hasta ahora, ya podemos tener una disposición de pantalla similar a la de la captura.

Ahí están abiertas: a la izquierda, La Caja de Herramientas Principal, empotrada debajo está Opciones de Herramienta; en el medio, La Ventana de Imagen; y a la derecha, Capas, Canales, Rutas y Deshacer, empotrada debajo está Brochas, Patrones y Degradados.

Hay muchas configuraciones posibles, esta es una. Lo mejor es, que puede disponer de los distintos diálogos de la manera que mejor se adapte a sus necesidades. Una vez tenga la configuración que le interesa, guárdela siguiendo las indicaciones de guardar preferencias que se indica a continuación.


GIMP

PreferenciasAbrimos el menú Archivo/Preferencias: Aquí tenemos diálogos para personalizar algunos de los comportamientos de Gimp.

De momento podríamos fijarnos en los siguientes diálogos:

Imagen nueva Predeeterminada Ajustar diferentes parámetros para la imagen como ( tamaño, resolución, color, etc. ) cuando creamos una imagen nueva (Archivo/Nuevo o Ctrl N). En Comentario podemos poner algún dato de interés: autor, programa, fecha, etc.

Gestión de la ventana: No marcar la casilla “Guardar posiciones de ventanas al salir”.

Hacer clic sobre Guardar posiciones de ventana ahora.

IMPORTANTE : Cuando termine la configuración pulse Aceptar para guardar los cambios hechos.


GIMP

Actividad 5-1Usted desea colocar la imagen de una persona en un paisaje, para ello debe tener las dos fotografías que desea combinar y guardarlas en la carpeta de Actividades Gimp.

Dos fotografías (o una si el fondo lo quiere negro). Recortar a una persona y la coloca en otra foto, ya sea un lugar que conozca o no.

Paso 1: Escoger la foto y copia la selección:

1. Abre Gimp, espera a que cargue. ArchivoAbrir y buscar la foto de una persona para copiarla y pegarla en otra foto.

2. Se abrió la ventana de la foto, pero las herramientas están en la otra ventana de Gimp.

3. Escoge la herramienta tijeras inteligentes (el dibujo de las tijeras).

4. Clic en una parte del cuerpo de la persona, y agrega otros cuatro puntos de manera que rodee a la persona aunque queden dentro del cuerpo, lo importante es rodear el cuerpo, luego se corrigen los puntos.

5. Ajuste estos cinco puntos para que queden mejor ajustados en el cuerpo.

6. Ahora en las lineas agrega más puntos donde cree que requiera y los mueve para que se adapten mejor al cuerpo (con unos 5 o 10 es suficiente).

7. Ahora doble clic en el centro del círculo para que se efectué la selección.

8. EditarCopiar (Control C), para copiar la selección.

Paso 2: Abra la segunda foto (el fondo) y pega a la persona:

1. En la ventana de imagen, ir al menú ArchivoAbrir, escoger la foto del fondo, abrir. Aparecerá otra ventana de foto (manipulación de imagen).

2. En la misma ventana: EdiciónPegar (o Ctrl V). Aparecerá la persona recortada dentro de la foto.

3. Con la herramienta mover, mueva de posición la persona si lo prefiere.

4. Menú ArchivoGuardar como, le da el nombre y el formato.

Extra: Si desea en el paso dos, primero crea una nueva capa transparente, para poder borrar algunas partes de la nueva foto pegada y que se vea el fondo.



Capítulo 6: Creación 3D

Objetivo GeneralConocer el uso de Blender para crear objetos en tres dimensiones.


• Crear gráficos tridimensionales y escenas de animación 3D.



Blender

Blender

http://www.blender3d.com/overview/products_overview.php.

Es un programa multiplataforma, dedicado especialmente al modelado y creación de gráficos tridimensionales; Blender es un software de animación 3D. Con el podemos crear escenas y vídeos generados por computadora con muchas prestaciones y facilidades.

El programa fue inicialmente distribuido de forma gratuita pero sin el código fuente, con un manual disponible para la venta. Actualmente es compatible con todas las versiones de Windows, Mac OS X, Linux, Solaris, FreeBSD e IRIX.

Tiene una muy peculiar interfaz gráfica de usuario, que se critica como poco intuitiva, pues no se basa en el sistema clásico de ventanas; pero tiene a su vez ventajas importantes sobre éstas, como la configuración personalizada de la distribución de los menús y vistas de cámara.


Blender

La ultima versión, la cual es hasta la fecha Blender versión 2.28, es llamada GameBlender y posee una interfaz para la programación de juegos, con la misma automatización provista por el soporte al lenguaje Python.

La interfaz del software es, digamos algo inusual. No es fácil de entender para los que nunca han utilizado un software de animación 3D. Ni siquiera para los que conocen otros programas, pero una vez que se acostumbra, todo es fácil.


Capítulo 7: Creación Web

Objetivo General

Conocer el software Kompozer y sus herramientas.


• Crear páginas web sin necesidad de codificar.



Introducción

Introducción

Como respuesta a Adobe Dreamweaver de Mac OS X y Windows, surgió NVU, pero su desarrollo se detuvo. De los restos de NVU es que nace KompoZer, un editor HTML del tipo WYSIWYG.

KompoZer es el sucesor no oficial de NVU 1.0. Consiste en NVU 1.0 con una serie de correcciones y parches no oficiales desarrollados por moderadores y usuarios muy activos de los foros en inglés de NVU

KompoZer está diseñado para ser fácil de usar, y que las personas con escasos conocimientos técnicos puedan crear sitios Web profesionales y atractivos sin necesidad de codificar. Quizá no posea el glamour ni las avanzadas capacidades del editor de Adobe, pero resulta una interesante alternativa libre de costo y en constante desarrollo que cumple con las funciones para las que fue creado. Está disponible para Linux, y recientemente salieron versiones para Windows y Mac.

Tanto KompoZer como NVU tienen las mismas características, aunque KompoZer ha depurado algunos errores y mejorado ligeramente el editor CSS.

Entre las funcionalidades más interesantes destacan:

• Editor web WYSYWIG con la representación del motor Gecko 1.7.

• Opciones especiales para la inserción de imágenes, tablas, formularios.

• Generador automático de tablas de contenido basado en los niveles de encabezado.

• Editor CSS avanzado, con capacidad de crear y usar tanto archivos CSS externos como hojas incrustadas en el archivo HTML mediante etiquetas <style>. Limpiador de código HTML.

• Posibilidad de definir y usar plantillas.

• Admite etiquetas PHP sin alterar su contenido.

• Enlace directo con el validador HTML de W3C.

• Completa ayuda incorporada en el programa.


KompoZer

KompoZer

Utilizando KompozerAl iniciar la aplicación se abre la ventana inicial que presenta las barras de título, de menú, de redacción y de formato. En la parte inferior observamos dos ventanas:

Ventana administración de sitios web: Esta situada a la izquierda y en ella se configuran los sitios web, para poder acceder de forma rápida a sus distintas páginas web. A través de ella también podremos publicar en Internet Webs y editar directamente las páginas ya publicadas sin necesidad de tenerlas guardadas en nuestro disco local.

Ventana de área de edición: Situada en el lado derecho, esta área es la que permite el diseño y la edición de las páginas web. Es el espacio de trabajo. Cada página que se edite se mostrará en esta área, pudiendo cambiar de una a otra mediante las pestañas que se muestran en la parte superior con el titulo de cada página. También podemos mostrar las reglas en esta área, que nos ayudarán a dimensionar diversos objetos.


KompoZer

También observamos:

Barra de modo de edición: Formado por cuatro pestañas que permiten cambiar el modo de edición:

• Normal (o modo Wysiwyg)

• Etiquetas HTML (muestra de forma esquemática las etiquetas utilizadas)

• Código Fuente (acceso al código HTML de la página)

• Vista Preliminar (Como se vería la página en el navegador)

Barra de estado: Proporciona información como la relativa a dentro de qué etiqueta nos encontramos. Además a través de ella podemos seleccionar etiquetas con sus contenidos para realizar acciones sobre ellos como dar formatos, eliminar, etc.

Creación de un sitio web local y remotoKomposer permite trabajar directamente sobre el sitio web en Internet, aunque además puede trabajar con archivos en el sistema local.

Para mantener organizados todos los archivos, es necesario crear un sitio web.

Seleccionar:

Menú Editar (Edit)Configuración de Publicación

O sino desde el panel izquierdo de Administrador de sitios, seleccionamos el botón Editar Sitios.

En ambos casos aparecerá la siguiente ventana:


KompoZer

A la izquierda, se muestran los sitios definidos, y a la derecha las propiedades del sitio seleccionado

Para crear un nuevo sitio, seleccionar el botón Nuevo sitio, los campos de la derecha se pondrán en blanco para que sean rellenados:

1. Nombre del sitio: Nombre del sitio que se va a crear. Es un texto que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo.

2. Información del sitio web: URL de la página de inicio del sitio web. Por ejemplo, si se tiene una página en geocities, será http://es.geocities.com/usuario/index.html. En caso de que se desee trabajar en el sistema local, la dirección será de tipo file:///home/usuario/sitioweb/index.html.

3. Servidor de publicación: información para publicar en el servidor

• Dirección de publicación: dirección FTP (Protocolo de Transferencia de archivos) de publicación. Esta información la suministra el servidor donde se aloja la página. En el caso de Geocities será ftp://ftp.es.geocities.com/. En el caso de que se trabaje en local, se introducirá una URL local del tipo file:///home/usuario/sitioweb/ o se seleccionará la carpeta pulsando en el botón Seleccionar directorio.

• Nombre de usuario

• Contraseña

Para eliminar un sitio, selecciónelo de la lista y pulse el botón Eliminar sitio.

Para establecer un sitio predeterminado, selecciónelo de la lista y pulse el botón Seleccionar como valor predeterminado. El nombre del sitio se pondrá en negrita indicando que es el predeterminado.

Una vez definido el sitio web, en el panel de la izquierda se mostrarán todos los archivos y sub-carpetas existentes. Haciendo doble pulsación sobre un archivo, se abrirá en una solapa nueva de la zona de trabajo. Si se hace pulsación doble sobre una carpeta, se mostrará el contenido de la misma.


KompoZer

Creación de una Página Web• Para crear una página web se debe pulsar sobre el icono Nuevo en la barra de herramientas de composición. O desde el menú Archivo Nuevo

Aparecerá la siguiente ventana, Seleccionamos: un documento en blanco o una plantilla, finalmente damos clic en el botón “Crear”

• Para abrir una página ya existente ir a: Archivo Abrir archivo.

• Para abrir una página abierta recientemente ir a: Archivo Páginas recientes.

Cómo guardar una página WebUn documento de Kompozer puede guardarse en formato HTML o formato sólo texto. Si se guarda como HTML (Archivo → Guardar como...) se preserva el formato del documento, como estilos del texto, imágenes, etc.

Si se guarda el documento como sólo texto (Archivo →Guardar y cambiar codificación de caracteres) se eliminan todas las etiquetas HTML pero se preserva el texto del documento.


KompoZer

Configuración de Propiedades de PáginaSe configuran las propiedades de página a través de:

Formato→Título y propiedades de página.

Se abrirá la siguiente ventana:

Introducimos el título de la página, nombre del autor, una breve Descripción. Es recomendable ingresar estos datos ya que algunos buscadores lo usan para indexar la página a su BD.

Podemos indicar si esta página se trata de una plantilla que usaríamos en futuros diseños.

Además podremos introducir en el área llamada Internacionalización las opciones referentes al idioma y juego de caracteres utilizados en la página.


KompoZer

Podemos configurar otras propiedades de la página accediendo:

Formato→Colores y Fondo de página.

Disponemos de dos opciones para establecer los colores de la página:

• Usar Colores predeterminados o

• Usar colores personalizados.

Si elegimos usar Colores predeterminados, los textos, enlaces y el color de fondo se mostrarán con los colores configurados en el navegador.

Con la opción: Usar colores personalizados, podemos definir el color en que se mostrarán los textos, enlaces y fondo de la página.

Otra opción es la de poder seleccionar una imagen para el fondo de la página. Esta imagen se mostrará en la página en modo “mosaico”.


KompoZer

Elementos de la Página Web Inserción de Textos

La inserción de textos no tiene ninguna dificultad, es exactamente igual a como cualquier procesador de textos, solamente señalar que los caracteres especiales como vocales acentuadas, eñes, paréntesis, etc. en HTML se escriben de una forma especial, utilizando códigos, incluso el espacio en blanco se trata de forma especial. Si trabajamos en el modo de edición normal, la aplicación NVU se encargara de traducir los caracteres especiales que escribamos al modo de código de caracteres en HTML.

Aplicar Estilos a textos:

Se aplican desde la barra de Formato o desde menú Formato

La barra muestra estilos predefinidos de párrafos o títulos, botón para cambiar color, tamaño, tipo y fondo de letra, cambiar estilo como negrita, cursiva, subrayado; formatos para listas numeradas o viñetas, estilos de alineación, sangría.

Es importante escoger tipos de letras generales como: Arial, Helvética, Times

Inserción de Vínculos

Los vínculos también llamados enlaces, links o hiper-enlaces son los que nos permiten navegar, es decir, ir pasando de una página a otra.

Se puede usar como enlace un texto o una imagen, el procedimiento es similar en ambos casos.

Tenemos 5 tipos de enlaces:

• Interno: Nos lleva a otra parte dentro de la misma página donde se encuentra el enlace. Para ello utilizamos un elemento llamado ancla o anchor

• Local: Se refiere a algún recurso situado en el mismo servidor que nuestra página (URL relativas)

• Externo: Se refiere a algún recurso situado en otros servidores diferentes donde se encuentra nuestra página (URL absoluta)

• De Correo: Cuando se da clic en este tipo de enlaces se abre programa de correo electrónico para enviar un email a la dirección que previamente se haya especificado en ese enlace.

• A Archivos: El recurso señalado es un archivo y al dar clic nos permite que se abran o se descarguen a nuestro ordenador esos archivos.


KompoZer

Enlaces Local y Externo

1. Situamos el cursor donde será el enlace. Por ejemplo seleccionando el texto o imagen que servirá de enlace.

2. Elegimos menú Insertar→ Enlace o pulsamos el botón Enlace

3. En Ubicación del enlace colocamos la URL de la página a la que debe apuntar el enlace. La URL puede ser absoluta (comienza por http://) o relativa, es decir la ruta de un archivo en el propio servidor donde esté alojada la página. En este caso podremos marcar la opción La URL es relativa a la dirección de la página cuando accedamos a las propiedades del enlace.

Enlaces a Correo Electrónico

Al insertar un enlace, simplemente en lugar de escribir la url, escribimos el correo electrónico al cual queremos llegar y marcamos la opción “Lo anterior es una dirección de correo electrónico”


KompoZer

Enlaces Internos

Nos permite ir de una a otra ubicación de la página de forma rápida sin necesidad de usar la barra de desplazamiento del navegador.

I- Primero debemos colocar los marcadores o puntos a donde queremos “saltar”:

1. Situar cursor en el lugar exacto donde queremos que este nuestro destino de enlace, es decir donde debemos colocar el marcador.

2. Ya situados, colocamos el marcador para ello damos clic en el botón de enlace interno en la barra de Menú.

3. Aparecerá la ventana “Propiedades del enlace”

4. Ingresamos el nombre que tendrá nuestro enlace interno, damos OK.


KompoZer

Al pasar el ratón sobre el enlace interno colocado, aparecerá el nombre que le hemos dado.

Para cada destino al que queremos llegar en nuestra página habrá un marcador.

II- Segundo paso, hacer el vínculo entre lo que debemos pulsar para llegar al marcador colocado.

Al igual que para los enlaces externos o locales, seleccionamos el texto o imagen pero en lugar de insertar una URL, se elige el marcador al que va a apuntar.

Como se aprecia, todas los marcadores van precedidos de “#”

Inserción de imágenes

Colocamos el cursor en el lugar donde deseamos insertar una imagen.

Damos clic al botón Imagen o vamos a menú Insertar→ Imagen

Aparecerá una ventana de Propiedades de la imagen.


KompoZer

Esta ventana presenta 4 pestañas:

• Ubicación de la Imagen: Allí elegiremos el archivo de imagen, además se puede agregar un Título Emergente (cuando se pase el mouse sobre la imagen aparecerá un pequeño recuadro con texto que hayamos ingresado).

• Dimensiones de la Imagen: Se puede modificar el largo y ancho.

• Apariencia: Podemos especificar dos tipos de márgenes a la imagen, el superior/inferior y el izquierdo/derecho además de poder añadirle un borde a la imagen. También podemos definir la forma en la que el texto se alineará a la imagen.

• Enlace: para hacer que la imagen funcione como un enlace.

Tablas

Las tablas son elementos muy utilizados en las páginas web. Se suelen utilizar para presentar datos de forma tabulada antes eran útiles para maquetar textos (tablas sin bordes), es decir para situarlos en una ubicación determinada dentro de la página web, sin embargo fueron reemplazados por los CCS, que veremos más adelante.


KompoZer

Dentro de las celdas de una tabla, podemos introducir textos, imágenes e incluso otras tablas.

Para insertar una tabla pulsamos el botón Tabla de la Barra de Redacción o en el menú: Tabla→Insertar. Nos aparecerá una ventana con tres pestañas.

• Pestaña Rápida: Con ayuda del ratón indicamos el número de filas y columnas de la tabla.

• Pestaña Preciso: Se definen los atributos de la tabla con mayor control, como número de filas y columnas, ancho de la tabla y el grosor de sus bordes.

• Pestaña Celda: Para definir atributos de las celdas, como las alineaciones del texto que contengan (horizontal y vertical), el ajuste de texto en la celda, relleno, etc.

Clic en Aceptar, y la tabla estará insertada en nuestra página, podemos modificar sus atributos, cambiar el fondo de la tabla y de las celdas, y los mencionados anteriormente.

Además podemos añadir y borrar elementos de la tabla, combinar o dividir celdas.


KompoZer

Formularios

Los formularios son métodos mediante los cuales los visitantes de una página web pueden enviar datos para que luego otra página pueda realizar alguna función con estos datos . Para ello se utilizan otros lenguajes como javascript.

Damos clic al botón Form de la barra de Herramientas o vamos al menú Insertar→Formulario.

Anexo

Introducción a las Hojas de EstiloUna hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y características que, aplicadas a una página Web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseño de la página de su contenido.

Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el trabajo que supone el diseño de una Web. Podemos definir un estilo para los títulos y otro para el texto, de forma que no tengamos que modificar cada vez el texto y los títulos para que tengan la apariencia que queramos.


KompoZer

Una hoja de estilos puede estar contenida en la misma página donde se utiliza o puede estar definida en un archivo aparte. De la segunda forma, podemos definir estilos para todo el sitio Web, mientras que de la primera tendremos que escribir el mismo código en cada página cada vez que lo necesitemos. Por eso la primera se utiliza cuando se quiere aplicar algún efecto en particular y la segunda cuando ese efecto es el mismo para todas las páginas.

Crear Hojas de Estilo

Kompozer dispone de un editor de hojas de estilo denominado CaScadeS.

CaScadeS puede ser utilizado para producir tanto hojas de estilo internas como externas. A diferencia de los estilos incrustados, las hojas de estilo internas o externas ayudan a mantener separadas la información del contenido de la del estilo.

Consejo: guardaremos siempre el documento html antes de agregar una hoja de estilo local. Guardaremos también el documento inmediatamente antes de cerrar el editor CSS.

Para proporcionar estilo al documento html que se edita, CaScadeS puede iniciarse haciendo clic en el menú Herramientas y seleccionando Editor CSS, apareciendo la siguiente ventana a continuación

KaScadeS permite dos modos de edición de hojas de estilo:

1. Modo para principiantes: este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento.

2. Modo avanzado: este modo permite crear reglas sin restricciones.


KompoZer

En caso de que no haya hoja de estilo, se creará una nueva automáticamente. Al usar CaScadeS, se pueden crear tanto hojas de estilo internas como externas.

Para crear una hoja de estilo interna:

1. Daremos clic en el primer botón de la izquierda y elegir la opción: Elem.estilo. Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.

2. Daremos clic en Crear hoja de estilo.

Para crear una hoja de estilo externa:

1. Daremos clic en el primer botón de la izquierda y elegir la opción: Elem.enlace.

2. Escribiremos la URL de la hoja de estilo en el panel de la derecha. Si no existe ya, se creará un nuevo fichero en el sistema de archivos local o (Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.

3. Activaremos comprobar al crear una hoja de estilo alternativa si ésta es una alternativa.

Utilizaremos el botón Recargar del panel de la izquierda si la hoja de estilo no se descarga inmediatamente.


KompoZer

Crear reglas de Estilo

Después de crear una o más hojas de estilo para el documento html, se pueden crear reglas para cada hoja de estilo de forma individual.

Para usar una hoja de estilos concreta al crear o modificar reglas, selecciónela en el panel de la izquierda haciendo clic sobre ella con el botón izquierdo del ratón. El panel de la derecha mostrará entonces los detalles de la hoja de estilo en la pestaña General. Para crear reglas nuevas:

1. Daremos clic en el botón Regla del panel de la izquierda.

2. El panel de la derecha mostrará opciones para especificar el tipo de regla a crear. Elegiremos una entre las siguientes:

• estilo con nombre (introduzca abajo el nombre de la clase).

• estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo).

• estilo aplicado a todos los elementos coincidentes con este selector.

3. Rellenaremos el nombre de la regla.

4. Daremos clic en Crear regla de estilo.

Las reglas pueden ser definidas usando las pestañas de estilo (Texto, Fondo, Bordes, Caja, Aural) del panel de la derecha. Para ver todas las definiciones de una regla de estilo, seleccionaremos en el panel de la izquierda y haremos clic en la pestaña General del panel de la derecha. La pestaña General mostrará todas las definiciones aplicadas a la regla.


Bibliografía

Bibliografía

Enlaces:http://www.tuxpaint.org/docs/

http://www.openclipart.org/

http://www.inkscape.org/doc/basic/tutorial-basic.es.htmlhttp://www.gimp.org.es/

http://www.blender3d.com/overview/

http://www.gimp.org.es/modules/downloadse/viewcat.php?cid=11

http://www.proyectonave.es/productos/nvu/

http://www.kompozer.net/

http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html


http://www.kompozer.net/

http://www.gimp.org.es/modules/downloadse/viewcat.php?cid=11

http://www.blender3d.com/overview/

http://www.gimp.org.es/

http://www.inkscape.org/doc/basic/tutorial-basic.es.html

http://www.openclipart.org/

http://www.tuxpaint.org/docs/

Education

Manual grafico