Sesion04.pdf

4 COMPONENTES GRÁFICOS CON GIMP  Herramientas de mapa de bits  Herramienta GEGL  Herramienta Clonar  Montaje fotográfico  Transparencia con alfa  Máscaras  Inserción de componentes en WIX y Dreamweaver

GUÍA DIDÁCTICA

Descripción En Gimp podrá aplicar diseños muy impactantes y llevarlos a páginas web, aplicando en ellos técnicas de clonado, montaje fotográfico, trabajo con mapa de bits para luego publicarlos y lograr productos de calidad. Iniciaremos la presente sesión con el estudio del uso de las herramientas de mapa de bits, gegl, clonar, montaje fotográfico, máscaras, trasparencia con alfa, máscaras y publicación de componentes en WIX que permitirán mejorar la presentación de una página.

Capacidad 

El participante al final de esta sesión será capaz de producir componentes gráficos con Gimp con el retoque de imágenes, aplicando montajes fotográficos, luego podrá insertarlos en páginas web de forma ordenada y creativa.

Actividad 

Elaborar diseños de banners web aplicando herramientas de mapa de bits, montajes, gegl, clonación, alfa, máscaras, y publicación de componentes en WIX.

Evaluación En esta sesión Ud. será evaluado en: 

Diseño de banners usando componentes gráficos con Gimp de forma ordenada y creativa.

Herramientas de mapa de bits En esta sesión estudiará el tratamiento de imágenes con herramientas de mapa de bits. Trabajará los retoques y el uso de los filtros para mapa de bits, de esta manera obtendrá imágenes de calidad. Ejercicio: Ahora seguiremos el siguiente procedimiento:

1. Abrir el software GIMP 2. Luego abrir la imagen a trabajar.

1. Abrir una imagen desde el menú Archivo/Abrir o presionando (CRTL+O). Ejm: Ingenieros-Inter.jpg

3

2. Seleccione la imagen a trabajar y luego clic en el botón Abrir.

3. Ahora aplique un retoque: a. Duplique la capa con un clic en el botón Duplicar capa (desde la ventana capas) para tener un fondo.

b. Seleccione la capa duplicada para luego cliquear en la Herramienta Escalado, para modificar su tamaño.

1. Clic en escalado 2. Clic en imagen 3. Luego en la ventana redimensionar configure el ancho y el alto para obtener una imagen de menor escala.

1 1

2 1

3 1

4

Ejm.: Ahora dimensionaremos a la mitad de su tamaño para luego centrar esta pequeña imagen:

c.

Luego haga un clic en imagen de fondo desde ventana capas cliqueando aquí:

d. Ahora, aplicaremos el filtro: Menú Filtro/Difuminar/Desenfoque gaussiano.

1 ° 2 1 3 1

5

4 1 5 1

6 1

4. Luego cree una nueva capa debajo de la imagen pequeña: a. Clic en el botón Nueva Capa 7 1

b. Asigna un nombre a la capa y haga clic en el botón Aceptar.

8 1

9 1

6

c.

Se creó la nueva capa.

10 1

5. Clic derecho a la imagen pequeña y clic en la opción Alfa a la selección.

11 1

12 1

6. Crearemos un borde de color a la imagen pequeña: a. Haga clic en el menú Seleccionar/Agrandar 13 1

14 1

b. Asigne al borde un grosor de 13 como se muestra:

7

15 1

16

c.

Luego clic en capa nueva para dar un borde blanco.

17 1

d. Luego agregar color blanco a la capa nueva.

8

Herramienta GEGL

La herramienta GEGL es una aplicación con la cual se puede encontrar operaciones de filtrados. Para aplicar esta operación continúe con la aplicación del tema anterior.

1 1 1. Clic en herramienta 2. Operación Gegl 3. Elija el tipo de operación

2 1

3 1

En la aplicación de operación de la Herramienta GEGL tenemos:           

Bilateral-filter Box-blur Brightnesscontrast C2g Checkerboard Color Color temperature Color to alpha Difference of gussians Display Dropshadow

 Edge laplace  Edge sobel  Fattal02  Fractal explorer  Gussian blur  Grey  Grid  Invert  Lens distortions  Levels  Matiuk06  Matting global

           

Mirrors Mono mixer Motion blur Noise reduction Opacity Perlin noise Pixelize Polar coordinates Posterize Reflect Reinhard05 Ripple

     

Rotate Scale Shear Snn mean Stress Stretch contrast  Threshold  Transform  Translate  Unsharp mask  Value invert  Vigenette  Waves

9

Aquí se ubican, desglosando tendremos una relación continua de operaciones para el retoque de manera fácil.

Ejercicio: Una vez entendido la aplicación de las operaciones GEGL se procede a continuar con la aplicación anterior: 1. Seleccione la imagen pequeña y elija el menú Herramientas 2. Elija la opción Operación GEGL 1 1

2 1

10

3. Elija la operación a aplicar. Ejm: gaussian-blur

3 1

4. Haga sus ajustes 5. Luego clic en el botón Aceptar.

4. Configuramos tamaño del efecto gaussiano en x como y. 5. Aceptar para terminar la operación. 6. Inserte el texto “Feliz día del Ingeniero” 7. Dale formato y color que se desea. 8. Archivo. 9. Guardar como .xcf.

4 1 5 1

6. Agrega un título, clic en la herramienta Texto. 7. Haga clic dentro de la imagen y escriba su texto. Ejm.: FELÍZ DÍA DEL INGENIERO.

6 1

7 1

11

8. Grabar el archivo fuente en formato xcf así: menú Archivo/Guardar como 8 1

Herramienta Clonar La acción de clonado se establece cuando se espera capturar zonas de una misma imagen y pasarla a otra, de esta manera estaremos provocando un montaje, retocado y ocultaciones de zonas en mapa de bits, verá que se te hará muy sencillo.

Ejercicio: Limpiar los textos y duplicar los ballenatos en la siguiente imagen. 1. Abrir la imagen con menú Archivo/Abrir o (Ctrl+O) seleccionas la imagen luego con doble clic en ella.

2. Cree una duplicación de capas para luego clonar:

12

a. Seleccione la capa fondo y luego haga clic en el botón Duplicado de capa. b. Seleccione la copia de la capa fondo c.

Active la herramienta Clonado. Regule el tamaño del diámetro.

b 2

Clonando: 1. Clic en icono duplicado de capa 2. Clic en copia de capa 3. Clic en clonado 4. Incremente el tamaño del puntero clonar (66) 5. Presione Ctrl + Clic (te dará dos punteros una en forma de signo más (+) y otro en forma de círculo (o) 6. Clic de arrastre por los textos para dar clonación

c 3

a 1

Explicación: El puntero más es el que absorbe los mapa de bits y los deposita en el círculo de esa forma se produce el clonado.

Limpiaremos el texto: d. Apuntar sobre el área a clonar y presionando la tecla CTRL haga clic (para capturar los pixeles). Ejm.: área sin texto e. Suelte la tecla CRTL, apunte donde se copiará los pixeles capturados y arrastre o haga clic en diferentes posiciones. Ej.: sobre el texto. f.

Este es el resultado que tendrá hasta el momento:

c 1

13

Clonaremos el ballenato: a. Ahora se seguirá clonando a la ballena pequeña, pero tenga en cuenta la ubicación dentro de la imagen, y si necesita desactivar la herramienta para intentar nuevamente entonces cliquee en cualquier herramienta de la caja de herramienta y ahora puede volver a intentarlo (de esa manera desactiva para volver activar el clonado).

+

o

b. Este es el resultado final de un clonado, ahora guarde el archivo.

14

Montaje Fotográfico

Una vez que ya estudió el uso de la caja de herramientas podrá guardar en GIMP en diversos formatos para que el documento en GIMP sea abierto en diversos programas de diseño desde una imagen o dibujo aplicado. Ejercicio: Proceda a descargar dos imágenes 1 en calidad de fondo y otra en calidad de montaje (para sobreponer se ha descargo en fondo transparente)



Descargue aquí la imagen fondo:



Descargue aquí la imagen nacimiento:

1. A la imagen de fondo lo abriremos desde GIMP así: Active el menú Archivo/Abrir. (Seleccionó la imagen y abrir)

15

2. Abriremos la segunda imagen así: a. Active el menú Archivo/Abrir. (Seleccionó la imagen y abrir)

a

b. Luego seleccione todo el menú Seleccionar/Todo (Ctrl+A) b

c.

Luego seleccione menú Editar/Copiar (Ctrl+C)

c

16

3. Ahora pegue esta imagen dentro de la ventana de la imagen del fondo. a. Active la imagen de fondo b. Seleccione Editar/Pegar como/Capa nueva… b

4. Tendrá el siguiente resultado:

5. Inserte la herramienta Texto: Jesús

8

6. Este es el resultado:

17

Transparencia con alfa

Ahora veremos cómo aplicar fondos transparentes con canal alfa de una manera fácil en GIMP. De un vistazo a la imagen que necesitamos y luego la abrimos en GIMP 

Descargue aquí la imagen fondo:

Ejercicio: Ahora haremos una transparencia a dicha imagen

1

1. Clic en herramienta de Selección elíptica.

18

2. Haga una selección en la imagen

3. Invierta la selección. Elija Seleccionar/Invertir. 3

19

4. Seleccione Capa/Transparencia/Añadir canal alfa a 6 c c b

5. Luego y por último presione la tecla suprimir (Supr)

OK

20

Máscaras Una vez que estudió el retoque de imágenes podrá, aplicar máscaras para lograr montar imágenes de una forma fácil, obtendrá un buen resultado. Ahora de un vistazo de los archivos que necesitamos:



Descargue aquí la imagen moto:



Descargue aquí la imagen fondo:

Ejercicio: 1. Primero debe cargar el software, luego clic en el Menú Archivo/Abrir (abrirá el archivo de imagen de fondo)

a b 2

21

c

d

2. Luego la segunda imagen pero la abrirá en otra capa

a b

3. Tendrá este resultado, ahora hacemos clic derecho a la capa moto para enmascarar.

22

4. Ahora enmascaramos, luego hacer clic en la capa que contiene la moto y cliqueamos el menú Capa/Máscara/Añadir máscara de capa (o clic derecho a la capa) y por último clic en añadir.

8

5. Luego clic en la herramienta pincel para pintar los lados de la imagen moto que serán transparentes.

6. Este es el resultado luego de pasar pincel.

O K

23

Inserción de componentes en WIX y Dreamweaver En WIX: 1. Acceder a su sitio web en WIX y elija el botón Administrar sitio, del sitio a editar 2. Hacer clic en el botón Editar sitio 3. En el editor de WIX, active la página web donde insertará el componente 4. Elija la opción + Agregar y seleccione el componente. Ejemplo: Imagen 5. Seleccione Mis imágenes cargadas o Imágenes gratis de WIX 6. Seleccione su imagen (puede usar el botón Cargar imágenes).

7. Hacer clic en el botón Abrir, elija Continuar 8. Hacer clic en el botón Agregar a la página para insertar la(s) imágenes. 9. Desplace con arrastre la imagen a su ubicación respectiva en la página. En DREAMWEAVER: 1. Active su sitio web 2. Abrir la página web y hacer clic dentro de la etiqueta DIV donde se insertar el componente 3. Seleccione el menú Insertar, luego en Imagen y localice la imagen a insertar. 4. Hacer doble sobre ella para insertarla.

24

Gimp, tiene dos pasos para enmascarar: la primera es por Menú Capa/Máscara/Añadir máscara de capa y la segunda con Clic derecho a la capa/añadir máscara de capa.

REFERENCIAS: 

Ramón Marino. “Diseño De Páginas Web Y Diseño Gráfico: Metodología y Técnicas para la Implementación de Sitios Web y Diseño Gráfico”. Edición Sep 30, 2005.

INTERNET: 

Clonado: ver



Retoque y filtros en Gimp: ver



Máscara: ver



Transparencias con canal alfa: ver

25