Sie sind auf Seite 1von 25

COMPONENTES GRÁFICOS CON GIMP

4
 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
1 2. Clic en imagen
1 3. Luego en la ventana
redimensionar
configure el ancho y
el alto para obtener
una imagen de
menor escala.
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  Edge  Mirrors  Rotate


 Box-blur laplace  Mono mixer  Scale
 Brightness-  Edge sobel  Motion blur  Shear
contrast  Fattal02  Noise  Snn mean
 C2g  Fractal reduction  Stress
 Checkerboard explorer  Opacity  Stretch
 Color  Gussian blur  Perlin noise contrast
 Color  Grey  Pixelize  Threshold
temperature  Grid  Polar  Transform
 Color to alpha  Invert coordinates  Translate
 Difference of  Lens  Posterize  Unsharp
gussians distortions  Reflect mask
 Display  Levels  Reinhard05  Value
 Dropshadow  Matiuk06  Ripple invert
 Matting  Vigenette
global  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
4 que se desea.
1 8. Archivo.
9. Guardar como .xcf.
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
c de capa
3 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
a clonación
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
Limpiaremos el texto: se produce el clonado.

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).

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)

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

c. Luego seleccione menú Editar/Copiar (Ctrl+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…

4. Tendrá el siguiente resultado:

5. Inserte la herramienta Texto: Jesús

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. 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.

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)

b
2

21
c

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

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.

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