PDF de programación - Taller Gimp/Inkscape - Diseño gráfico con Software Libre

Taller de Gimp e Inkscape

Diseño gráfico con Software Libre

Campus Party

25 de julio de 2006

Taller Gimp/Inkscape
Índice

 1 · ¿De qué va esto?
 2 · ¿Quién soy yo?
 3 · ¿Qué es Gimp?
 4 · ¿Qué es Inkscape?
 5 · Manos a la Obra
 6 · Resumen
 7 · Para terminar...

Pag.2

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿De qué va esto?

 ¿Diseño Gráfico con aplicaciones Libres?
 Inkscape y Gimp

● Gráficos Vectoriales y Raster
● Ventajas y Limitaciones

 Un ejercicio completo para aprender a

manejarlos

Pag.3

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿De qué va esto?

 ¿Diseño Gráfico con software libre?

Gimp

Inkscape

Scribus

Krita

Retoque fotográfico

RGB

Potente

Diseño Vectorial

RGB

Potente

SVG

Maquetación

RGB
CMYK

Spot Color

Retoque

RGB
CMYK

8, 16, 32 bits
ent. y c.flot.

Pag.4

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿De qué va esto?

 ¿Diseño Gráfico con software libre?

Pag.5

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Quién soy yo?

Jesús David Navarro
 www.jesusda.com
 sol.blogia.com
 [email protected]

 Usuario de Linux desde 2001.
 Diseño Gráfico desde hace mucho...

Pag.6

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Quién soy yo?

 I.T.Informática de Sistemas.
 Profesor Cursos L.C. Diseño Gráfico en la U.M.U.
 Trabajo actual:

● Diseño Gráfico (Imprenta Digital y Tradicional).
● Diseño Web basado en estándares.
● Auditoría/Consultoría Accesibilidad y Usabilidad.
● Trabajo exclusivamente con GNU/Linux.

Pag.7

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Qué es Gimp?

 GNU Image Manipulation Program
 Herramienta para Retoque Fotográfico

● “Parecido” (que no igual) a:

Photoshop
Paint Shop Pro

 Trabajo con imágenes Raster
 Creado por Peter Mattis y Spencer Kimball (1995)
 Sven Neumann y Mitch Natterer (En la Actualidad)

Pag.8

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Qué es Gimp?

PROS

 Es muy potente
 Es LIBRE y Gratuito
 Es Multiplataforma
 Ampliable: Scripts
 GIF, JPG, PNG, PDF, TIFF,

etc.

CONTRAS

 Gestión de Color *
 Modelo CMYK
 Acciones
 Gestión del TEXTO *

* Mejorado en versiones futuras

Pag.9

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Qué es Gimp?

Cubre el 200% de las necesidades de un usuario doméstico y el

90% de un profesional

200%

90%

Pag.10

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Qué es Inkscape?

 Diseño y Manipulación de gráficos Vectoriales

● “Parecido” (que no igual) a:

Adobe Illustrator
Adobe Freehand (extinto)

 Trabajo con imágenes Vectoriales
● formato SVG (estándar del W3C)

 Fork de SODIPODI (2003)
 Ted Gould, Bryce Harrington, Nathan Hurst y

MenTaLguY

Pag.11

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Qué es Inkscape?

PROS

 Es potente y Sencillo
 Es LIBRE y Gratuito
 Es Multiplataforma
 Ampliable: Scripts
 Formato SVG  WEB
 PDF, PS, AI, PNG, WMF, etc.

CONTRAS

 Gestión de Color
 Modelo CMYK
 Acciones y Filtros *
 Herramientas de
transformación *

* Mejorado en versiones futuras

Pag.12

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
¿Qué es Inkscape?

Cubre el 200% de las necesidades de un usuario doméstico y el

90% de un profesional

200%

90%

Pag.13

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra · Gráficos Raster

Pag.14

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra · Vectores

Pag.15

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra · GIMP

Pag.16

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra · Inkscape

Pag.17

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Ficheros

Base

Pag.18

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Resultado

Pag.19

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Abrimos

ico-gimp.svg

Pag.20

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Abrimos

ico-gimp.svg

Pag.21

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Desagrupar

Grupos

Mays+Ctrl+G

Pag.22

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Objetos

Desagrupados

Eliminamos
objetos de

fondo y
sombras

Seleccionar y

Suprimir

Pag.23

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Pag.24

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Nos quedamos

sólo con
Wilbert,

la mascota del

Gimp

Taller Gimp/Inkscape
Manos a la Obra

Seleccionamos
a Wilbert y lo
duplicamos

Ctrl+D

Movemos el
duplicado y lo

Unimos

Ctrl++

Pag.25

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Al unirlo queda
un solo objeto
con el contorno

de Wilbert

Seleccionamos
el contorno y
ampliamos
varias veces

Ctrl+)

Pag.26

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Pag.27

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Colocamos el

contorno

ampliado bajo

el Wilbert
original

Lo

colorearemos

de blanco
finalmente

Taller Gimp/Inkscape
Manos a la Obra

Pag.28

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

exportamos

como PNG con
una anchura de

Y lo

800px.

Taller Gimp/Inkscape
Manos a la Obra

Hacemos lo mismo

con

e

ico-inkscape.svg

ico-tux.svg

Pag.29

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Pag.30

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

En Gimp,
usamos el
Script-fu

Drop-shadow
(sombra base)
para añadir una

sombra al

icono

Taller Gimp/Inkscape
Manos a la Obra

Aplicaremos el
mismo filtro a

todos los
iconos

Pag.31

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Pag.32

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Para diseñar el

banner,

creamos una
imagen nueva

de

3000x1000 px.

el color de

fondo ha de ser

blanco

Taller Gimp/Inkscape
Manos a la Obra

insertamos
gphoto.png

lo situamos en
la izquierda y
lo aumentamos

de tamaño

Pag.33

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

aplicaremos el

filtro

Máscara de
Desenfoque

(Unsharp Mask)

Pag.34

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

insertamos
alta-badia.jpg

lo situamos en
la derecha y la
aumentamos
de tamaño
también

Pag.35

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

insertamos
algún texto
decorativo

Por ejemplo:
La palabra
“Diseño”
y una “D”
bien grande

Pag.36

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Pag.37

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Añadimos
algunos

círculos, una
línea, algunos

efectos ...

Podemos jugar

con la

transparencia

de algunas
capas...

Taller Gimp/Inkscape
Manos a la Obra

Pag.38

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Añadimos una
capa de color
Naranja encima

de todas las

demás

y cambiamos el

modo de
mezcla a
COLOR.

Conseguimos
así que todo

quede

anaranjado

Taller Gimp/Inkscape
Manos a la Obra

Creamos una
nueva imagen
en Inkscape

El tamaño: A3
Unidades: cm

Pag.39

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Pag.40

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Insertamos dos
rectángulos, uno

arriba y otro

abajo

de color negro

y tamaños 7 y 3

cm

respectivamente

Taller Gimp/Inkscape
Manos a la Obra

Importamos los
iconos, el banner

y brush.svg

para organizarlos
podemos usar la
herramienta de

alinear y
distribuir

Pag.41

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Pag.42

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Añadiremos dos
rectángulos con

banner

degradados

para decorar el

Taller Gimp/Inkscape
Manos a la Obra

Insertamos
varios textos

en la cabecera y

en el pié

Pag.43

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Manos a la Obra

Para terminar
insertamos

algunas líneas
punteadas y un
detalle gráfico
en la esquina

superior
izquierda

¡El póster está

terminado!

Pag.44

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Resumen

El futuro del Diseño Gráfico con

aplicaciones Libres

 Mejoras derivadas de la colaboración entre proyectos

● Iconos Tango – formatos gráficos – recursos – etc.

 Mejora de Usabilidad y Herramientas.
 Filtros y Scripts.
 Mejora en Gestión del Color.

Pag.45

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Resumen

El futuro del Diseño Gráfico con

aplicaciones Libres

 Mejora en Estabilidad y Rendimiento.
 Integración entre Aplicaciones:

● Inkscape – Gimp – OpenOffice – Scribus – Krita - ...

 Mejora en los Sistemas y Control de Impresión.
 Mayor integración en procesos web.

Pag.46

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Para terminar...

Este documento está licenciado bajo
Creative Commons (Attribution-NonCommercial-ShareAlike)

Puedes:
 Copiar, reproducir, mostrar públicamente y modificarlo,

siempre y cuando cites al autor (o sea, yo),

 no lo uses para fines comerciales,
 y las obras derivadas se mantengan bajo esta misma licencia.

Pag.47

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller Gimp/Inkscape
Para terminar...

Puedes descargar esta presentación en:
http://jesusda1.f2o.org/docs/tallerdg/taller-dg-gi.pdf

Más información y referencias en:
http://jesusda1.f2o.org/docs/tallerdg/

Noticias y contacto en mi blog:
http://sol.blogia.com

Pag.48

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin

Taller de Gimp e Inkscape

Muchas Gracias!

jEsuSdA 8)

Pag.49

Índice · 1 · 2 · 3 · 4 · 5 · 6 · 7 · fin