ENTORNO DE TRABAJO GRÁFICO

EN GIMP
 Fundamentos y entorno de GIMP
3
 Acciones básicas con imágenes
 Propiedades de lienzo
 Caja de herramientas
 Formatos de imágenes
 Capas
 Herramientas de selección y transformación
 Herramienta texto
 Herramienta pintura
 Exportar imagen
 Insertar componentes en WIX y Dreamweaver
GUÍA DIDÁCTICA

Descripción
GIMP es un programa de edición de imágenes digitales basado en pixeles. Es un programa
libre y gratuito. Forma parte del proyecto GNU (Image Manipulation Program) y está disponible
bajo la licencia pública general de GNU una aplicación que se encarga del tratamiento de las
imágenes generadas con dibujos, fotos y vectores. Dispone de herramientas profesionales para el
tratamiento de imagen y logran productos de calidad.

Iniciaremos con la descripción del entorno, el uso básico de las herramientas de mapa de bits,
formatos y estilos de objeto que permitirán mejorar la presentación de una página con un fondo, logo
y banners fijos - animados.

Capacidad
 El participante al final de esta sesión será capaz de preparar el entorno de trabajo de GIMP para
la creación de componentes en forma eficiente y ordenada.

Actividad
 Elaborar una página web que contenga banner publicitarios de encabezados y de contenido así
como fondos de páginas.

Evaluación
En esta sesión Ud. será evaluado en:
 La preparación del entorno de trabajo en GIMP para la creación de componentes en forma
eficiente y ordenada.

2
Fundamentos y entorno de GIMP

El tratamiento de imágenes pretende mejorar la calidad de ellas, a través de un

programa como GIMP, el cual emplea un conjunto de herramientas potenciales de
fácil aplicación. GIMP en comparación de otros programas del mercado es más
versátil, de fácil manejo y de distribución gratuita bajo la licencia pública general de
GNU.
Iniciaremos esta sesión reconociendo el entorno de trabajo y las diferentes
herramientas y propiedades de ellas, como las del lienzo, la caja de herramientas,
los formatos de imágenes, capas, herramientas de selección y transformación,
herramienta texto, herramienta pintura, entre otras.
Si alguna vez usaron Adobe Photoshop se darán cuenta que tiene
características similares debido que desde sus inicios fue un programa clónico de
este. Actualmente, GIMP es potencialmente un software también con algunas
características del GNOME o KDE.

Iniciar sesión con GIMP

1. Haga clic en el botón Inicio y elija la opción Todos los programas.
2. Ahora seleccione la opción GIMP 2.

Entorno de trabajo del GIMP

El GIMP presenta tres paneles separados:
a) Caja de herramientas.
b) Lienzo.
c) Panel de opciones.

Puede descargar GIMP

visitando esta página web:
http://www.GIMP.org/.

a c

3
Administrando ventanas en GIMP
En GIMP las ventanas pueden ser activadas/desactivas de la siguiente manera:
a) Haga clic en la opción Ventanas.
b) Elija la opción a activar / desactivar. Ejemplo: Caja de herramientas.

Los paneles pueden ser

cambiados en sus
dimensiones a nuestro
antojo con clic de arrastre.

b
1

Acciones básicas con imágenes

Trabajar las acciones básicas implica conocer ¿cómo vamos a abrir, crear, guardar,
exportar e imprimir un archivo tipo imagen?

Abrir imagen en GIMP

Para abrir una imagen tenemos 2 formas:

A. Abrir…:
Si se tiene un trabajo guardado en xcf o diversos formatos, usted podrá abrir Abrir aplicando
combinación de teclas:
siguiendo los siguientes pasos: Aplica Ctrl+O y luego
selecciona tu archivo.
1. Haga clic en el menú Archivo y luego en Abrir.
2. Seleccione el archivo imagen con doble clic.
B. Abrir como capas…
Si se tiene una imagen abierta y se desea combinarla con otra, siga el
siguiente proceso:
1. Haga clic en el menú Archivo y luego en Abrir como capas…
2. Seleccione el archivo imagen con doble clic.

1 Abrir aplicando
combinación de teclas:
Aplica Ctrl+ALT+O y luego
selecciona su archivo.
2

4
Crear imagen
Para crear debe preguntarse ¿Qué aplicación crearé? y seguirá los siguientes
pasos:

2 3
4

Se tiene las siguientes opciones:

 Desde el portapapeles  Logotipos

 Captura de pantalla  Nuevos pinceles
 Desde una página web  Patrones
 Escáner/Cámara  Temas de páginas web
 Botones
Guardar imagen en formato XCF (de GIMP).
El archivo origen del GIMP tiene extensión “xcf”, el cual para guardar deberá
seguir el siguiente proceso:
1. Haga clic en el menú Archivo y elija Guardar (Guardar como)
2. Asignar un nombre al archivo. Ej. CIS
3. Luego elegir la ruta (Ej. Escritorio) o carpeta (Ej. LUJAN)

Archivo Guardar:
a) Elegir ruta. Ej.
Escritorio
b) Crear carpeta. Ej.
LUJAN
c) Elija el formato de la
imagen. Ej. Imagen XFC
de GIMP (*.xfc)
d) Seleccione el tipo de
archivo a guardar. Ej.
b Imagen XFC de GIMP
a

5
Propiedades de lienzo

El lienzo es el área que nos permite diseñar y crear la imagen, es por ello es muy
importante generarla para toda aplicación.
Para acceder a las propiedades del lienzo, siga el siguiente proceso:
1. Haga clic en el menú Archivo y elija la opción Nuevo.
2. Ahora puede personalizar la imagen a crear, a partir del Tamaño de la
imagen y de las Opciones avanzadas.

a) Configura el ancho
del lienzo. Ej. 640
b) Configura el alto del
lienzo. Ej. 400
a c) Elige la unidad de
1 medida. Ej. px
b c d) Elige la orientación
1 1 del lienzo. Vertical /
Horizontal. Ej.
d Horizontal
1 e) Opciones avanzadas
e

Sobre las Opciones avanzadas:

Las opciones avanzadas permiten configurar resolución del lienzo, sistema de
color (RGB: Red-Green-Blue), el relleno del lienzo y agregar un comentario del
trabajo.

f) Configura la
resolución en x
(horizontal)
g) Configura la
resolución en y
(vertical)
h) Elige sistema de
f color: RGB o Escala
de grises
g i) Elige el relleno del
1 h fondo.
j) Elige comentario del
i trabajo del lienzo
1 k) Opción Aceptar
j

6
Caja de herramientas

Contiene las herramientas necesarias para poder aplicar diseños de dibujos,

retoques y montajes a las imágenes digitales. Se agrupan en las siguientes:

Herramientas de selección:

a b c d e f g

a) Herramienta selección rectangular: para seleccionar una zona

rectangular.
b) Herramienta de selección elíptica: para seleccionar una zona elíptica o
circular.
c) Herramienta de selección libre: para seleccionar una región seleccionada
a mano con segmentos libres y poligonales.
d) Herramienta de selección difusa: selección de imagen en color, para
seleccionar una región contigua basándose en el color.
e) Herramienta de selección por color: selección de intensos colores, para
seleccionar regiones con colores similares.
f) Herramientas de tijeras de selección: para seleccionar formas utilizando
un ajuste inteligente de los bordes.
g) Herramienta de selección de primer plano: para seleccionar una zona
que contiene objetos en el frente.

Herramientas de ubicación:

a b c d e f g

a) Herramientas rutas: para crear y editar rutas.

b) Herramienta recoge color: para establecer colores a partir de pixeles de
la imagen.
c) Herramienta ampliación: para ajustar el nivel de ampliación.

7
 d) Herramienta de medida: para medir longitud de distancias y ángulos.
e) Herramienta mover: para mover capas, selecciones y otros objetos.
f) Herramienta de alineación: para alinear o colocar capas u otros objetos.
g) Herramienta de recorte: para quitar zonas del borde de la capa o borde.

Herramientas de modificación:

a b c d e f g

a) Herramientas rotación: para rotar la capa, selección o ruta.

b) Herramienta de escalado: para escalar la capa, selección o ruta.
c) Herramienta de inclinación: para inclinar la capa, selección o ruta
d) Herramienta de perspectiva: para cambiar la perspectiva, selección o ruta.
e) Herramienta de volteo: para voltear la capa, selección o ruta,
horizontalmente o verticalmente.
f) Herramienta Transformar rejilla: deforma una selección con una rejilla.
g) Herramienta de texto: para crear o editar capas de texto.

Herramientas de dibujo:

a b c d e f g

a) Herramientas relleno: para rellenar con un color o patrón el área

seleccionada.
b) Herramienta de mezcla: para rellenar el área seleccionada con un
degradado de colores.
c) Herramienta de lápiz: para dibujar bordes duros mediante un pincel.
d) Herramienta de pincel: para dibujar trazos y bordes suaves mediante un
pincel.
e) Herramienta de borrador: para borrar el color de fondo o transparencia
mediante un pincel.

8
 f) Transformar aerógrafo: para pintar con precisión variable mediante un
pincel.
g) Herramienta de tinta: para escritura tipo caligrafía.

Herramientas de retoque:

a b c d e f g

a) Herramienta de clonado: para copiar selectivamente a partir de una

imagen o diseño utilizando un pincel.
b) Herramienta de saneado: para sanear irregularidades de la imagen.
c) Herramienta de clonación de perspectiva: para clonar desde una imagen
de origen tras aplicar una transformación de perspectiva.
d) Herramienta de enfoque y desenfoque: para emborronar o
desemborronar selectivo utilizando un pincel.
e) Herramienta de emborronado: para emborronar selectivamente usando
un pincel.
f) Herramienta de marcado a fuego/quemar: para iluminar u oscurecer
selectivamente usando un pincel.
g) Colores de frente y fondo:

Color de frente Para intercambiar colores

Para reiniciar colores Color de fondo

blanco y negro

Formatos de imágenes

Creada una imagen en GIMP, podrán guardarla en diversos formatos, de tal forma
que pueda ser utilizado en diversos programas de diseño.

9
Formatos de la imagen al guardar

A continuación se muestra la siguiente lista de opciones:

Formatos de la imagen al exportar:

Los formatos:
Cuando son exportados,
nos brindan mayores
beneficios al poder
abrirlos en programas
como:
_ Corel Draw
_ Photoshop
_ Fireworks
_ Adobe Reader

Capas

Las capas son una técnica que nos permiten construir una imagen a partir de la
composición de diferentes imágenes superpuestas. Cada capa se podría ver como
una hoja de papel con imágenes y zonas transparentes. El resultado final es el que
se obtiene de poner todas estas hojas de papel una encima de otra en un orden
determinado. Una capa que se superpone sobre otra dejará visible el contenido de
la capa inferior en aquellas zonas en las que sea transparente. Como veremos, es
fundamental el uso de zonas transparentes en la composición basada en capas.

Activando la ventana Capas

1. Haga clic en el menú Ventana.

10
 2. Elija Diálogos Empotrables.
3. Ahora elija Capas.

Otra forma es:

Combinado las teclas
1 CTRL+L.

Elementos de la ventana de Capas:

Capas:
6 Describimos la ventana
capas:
1. Observar/Ocultar
2. Fijar
3. Capa
5 4. Nombre de capa
1 5. Opacidad (39.0%)
6. Modo (efectos de
capas)
2 4 7. Crea capa
8. Carpeta (agrupa
capas)
9. Subir Nivel
3
10. Bajar Nivel
11. Duplicar capa
8 9 10 12 12. Ancla (capa flotante)
13. Eliminar capa

7 13

11

Ejemplo:

11
Herramientas de selección y transformación

Herramientas de Selección
Las herramientas de selección permiten seleccionar regiones a las que se aplicarán
otras herramientas. Por ejemplo, "Difuminar", que redondea y difumina los bordes
de la selección.
Para usar una herramienta de selección debemos seguir el siguiente proceso:
1. Haga clic en el menú Herramientas.
2. Seleccione la opción Herramientas de Selección.
3. Elija la herramienta adecuada. Ej.: Selección Libre.

4. Seleccione el área deseada haciendo clic en diferentes posiciones o

arrastrando sobre la imagen hasta unir con el punto de inicio.

Tenemos otras herramientas disponibles:

 Con la herramienta Selección Rectangular, hace una selección en un
documento de forma rectangular para poder mover, copiar, cortar y modificar.
 Con la herramienta Selección Elíptica, hace una selección circular en un
documento de forma circular para poder mover, copiar, cortar y modificar.
 Con la herramienta Selección Libre, puede seleccionar cualquier forma por
donde pase el trazado.

12
 Con la herramienta Selección Difusa, puede seleccionar por color una parte
del área de imagen de forma automática y está definida por el nivel del umbral
o expansión.
 Con la herramienta Selección por Color, puede seleccionar por color de forma
automática toda el área de imagen y está definida por el nivel de expansión.
 Con la herramienta Tijeras Inteligentes, puede seleccionar formar usando
ajustes inteligentes en los bordes.

Desactivar la seleccionar un área de imagen

1. Tener activada la herramienta de selección.
2. Haga clic derecho sobre el área seleccionada.
3. Elija Seleccionar y luego Ninguno.

Herramientas de transformación
La herramienta de transformación es la que permite transformar selecciones
rotándolas, cambiándoles el tamaño, ajustándolas a trapecios o creando una
perspectiva con la selección.
Para usar una herramienta de transformación debemos seguir el siguiente proceso:
1. Haga clic en el menú Herramientas.
2. Seleccione la opción Herramientas de Transformación.
3. Elija la herramienta adecuada. Ej. Voltear.

4. Haga clic en la imagen y observe el resultado

13
 Observe que se volteó toda la imagen, pero si quisiera que solo se
volteé el pez, debe seleccionar el pez previo al proceso anterior.

Tenemos otras herramientas disponibles:

 Con la herramienta Alineado, puede alinear o colocar capas de otros objetos.

 Con la herramienta Mover, puede seleccionar, mover las capas y otros objetos.
 Con la herramienta Recortar, puede quitar zonas del borde de la capa o
imagen.
 Con la herramienta Rotar, puede rotar la capa, la selección o ruta.
 Con la herramienta Escalar, puede escalar la capa selección o ruta.
 Con la herramienta Inclinar, puede inclinar la capa, selección o ruta.
 Con la herramienta Perspectiva, puede cambiar la perspectiva de la capa
selección o ruta.
 Con la herramienta Voltear, voltea la capa selección o ruta horizontal o
verticalmente.
 Con la herramienta Transformar Rejilla, deforma una selección con una rejilla.

Herramienta texto

Esta herramienta crea y edita capas de textos pudiendo cambiar sus

propiedades como fuente, tamaños, borradas de estilo, justificadas,
negritas, cursivas, subrayadas y color.

Crear un texto
Para ingresar un texto al lienzo, siga el siguiente proceso:
1. Haga clic en la herramienta Texto.
2. Si lo desea puede seleccionar los formatos a aplicar al texto antes
de escribirlo. Ej.: Tamaño, color, alineación.

14
 3. Haga clic en el lienzo y escriba el texto a mostrar. Ej.
COMPUTACIÓN III.

Editar un texto
Si desea cambiar los formatos del texto ingresado puede seguir el siguiente proceso:
1. Seleccione la herramienta Texto.
2. Haga clic en el texto y selecciónelo con arrastre.
3. Puede usar las opciones de la barra de herramientas

15
Herramienta pintura

Las herramientas de pintura que se muestran permitirán editar la imagen cambiando

su apariencia.

Para usar una herramienta de pintura debemos seguir el siguiente proceso:

1. Haga clic en el menú Herramientas.
2. Seleccione la opción Herramientas de Pintura.
3. Elija la herramienta adecuada. Ej. Relleno.

2 3

 Con la herramienta Relleno, rellena con un color o patrón el área seleccionada.

 Con la herramienta Mezcla, rellena el área seleccionada con un degradado de
colores
 Con la herramienta Lápiz, permite el dibujo de bordes duro mediante un pincel.
 Con la herramienta Pincel, pintar trazos de borde suaves mediante un pincel.
 Con la herramienta Goma de borrar, borra el color de fondo o transparencia
 Con la herramienta Aerógrafo, pinta con presión variable mediante un pincel
 Con la herramienta Tinta, puede realizar escritura tipo caligrafía.
 Con la herramienta Clonar, puede rotar la capa, la selección o ruta.
 Con la herramienta Sanear, puede rotar la capa, la selección o ruta.
 Con la herramienta Clonar con perspectiva, clona desde una imagen de
origen, tras aplicar una transformación de perspectiva.
 Con la herramienta Difuminar/Perfilar, difumina o perfila una selección.
 Con la herramienta Emborronar, emborrona una selección.
 Con la herramienta Marcar a fuego/quemar, iluminar o oscurecer una
selección

16
Ejercicio:
Se desea aplicar un color de relleno de fondo a la siguiente imagen.

Solución:

1. Seleccione el área donde aplicará la herramienta Relleno. Use la

herramienta Selección Difusa (haga clic en cada área blanca de la imagen
presionando la tecla SHIFT).

2. Seleccione la herramienta Relleno.

3. En la caja de herramientas elija el color de fondo (haga doble clic en el color
de fondo). Eje. Celeste, asimismo elija la opción: Relleno con color de
fondo.

Color de fondo

4. Haga clic en cada área que seleccionó. Obteniéndose el siguiente

resultado:

17
Exportar el archivo de imagen
Puede también exportar el documento de la siguiente manera:
Exportar:
1. Haga clic en el menú Archivo y luego seleccione Exportar (Exportar Aplicaremos cuando
trabajamos por primera
como…) vez.
2. Siga el proceso siguiente en la ventana Exportar la imagen:
Exportar como:
Cuando trabajaremos una
exportación por segunda
vez en diferente formato.

Exportar la imagen:
a) Dar el nombre del
archivo (también
puede elegir la ruta).
Ej. CIS
b
b) Elegir el tipo de archivo
a mostrar. Ej.: Todas
las imágenes
exportadas.
c c) Elegir el tipo de archivo
a exportar. Ej.: Imagen
GIF

3. Por último, haga clic en el botón Exportar.

Insertar 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

18
 6. Seleccione su imagen (puede usar el botón Cargar imágenes).

7. Hacer clic en el botón Agregar a la página, para insertar la(s) imágenes.

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

GIMP, es un software libre por la cual podrás instalar este software

de diseño sin necesidad de permisos del fabricante.

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:
 Introducción a la interfaz: ver
 Pasos básicos: ver
 Capas y su administración: ver
 Herramientas de selección de rutas: ver

19