• Categories
• Software libre
• Color
• Informática
• Tecnología
• Software

Citation preview

 

Diseño Digital Con software libre The Gimp El objetivo del curso es introducir a los alumnos de bachillerato en el diseño digital, y retoque fotográfico utilizando software libre. Por: José Carlos Barceló Fernández 2010-10-05

Diseño  Digital  

DISEÑO   DIGITAL  

 

Índice 1.-¿Por qué software libre?  .............................................................................................  3   1.1   El movimiento de software libre  ...................................................................................  3   1.2 Licencias GNU  .....................................................................................................................  5   Actividades:  ................................................................................................................................  5  

2. Fundamentos de imagen digital  ...............................................................................  6   2.1 Tipos de imagen vectores vs mapas de bits  ...................................................................  6   2.2 formatos de archivo de imagen  .........................................................................................  8   2.3 Modos de Color  ...................................................................................................................  9   2.3.1 Síntesis Aditiva el color lux  .........................................................................................  9   2.3.2 Síntesis substractiva el color materia  .......................................................................  9   2.3.3 RGB vs CMYK  ............................................................................................................  10   Actividades:  ..............................................................................................................................  10  

3.-The Gimp  ..........................................................................................................................  11   3.1 La Historia de GIMP  .........................................................................................................  11   3.1.2 Versiones y derivaciones de GIMP:  ........................................................................  11   3.2. Limitaciones de GIMP  .....................................................................................................  13   3.3. La instalación GIMP  .........................................................................................................  14   3.4 La interfaz del programa  ..................................................................................................  14   3.4.1 La ventana de herramientas:  ...................................................................................  15   Actividad:  ...................................................................................................................................  17   3.4.2 La ventana de lienzo o área de trabajo.  .................................................................  17  

4.- Iniciándose en el uso de The GIMP.  ....................................................................  19   4.1 Herramientas de pintura, dibujando formas simples.  ..................................................  19   Práctica uno.  .............................................................................................................................  19  

5.-Obtención de imágenes libres de derechos  ......................................................  25   Actividad  ....................................................................................................................................  26  

6.-Creación de gráficos Multilayer.  .............................................................................  26   Práctica Dos  .............................................................................................................................  26  

7.-Aplicando Pintura digital a una fotografía.  ........................................................  33   Práctica  3  ....................................................................................................................................  33   Práctica  4  ....................................................................................................................................  35   Practica  5  ....................................................................................................................................  37   Práctica  6  ....................................................................................................................................  40   Práctica  7  ....................................................................................................................................  43   La  Fotografía  ...............................................................................................................................  45   La  cámara  fotográfica:  ................................................................................................................  45   Práctica  8  ....................................................................................................................................  47   Práctica  9  ....................................................................................................................................  48   Práctica  10  ..................................................................................................................................  51   Práctica  11  ..................................................................................................................................  53   Práctica  12  ..................................................................................................................................  56  

Por:    José  Carlos  Barceló  

2  

Diseño  Digital     Práctica  13  ..................................................................................................................................  58   Práctica  14  ..................................................................................................................................  62   Practica  15  ..................................................................................................................................  67   Práctica  16  ..................................................................................................................................  70   Practica  17  ..................................................................................................................................  75   Práctica  18  ..................................................................................................................................  77  

1.-¿Por qué software libre? Actualmente el mayor obstáculo para el aprendizaje y aprovechamiento pleno de las tecnologías de información y comunicación, es el alto costo del software especializado: por ejemplo una licencia comercial de PhotoShop, programa líder en diseño digital, tiene un costo aproximado de mil dólares; lo cual deja no solo a muchas escuelas y estudiantes, si no inclusive a países enteros, al margen del avance tecnológico, o peor aún los orilla a recurrir a la piratería. 1.1 El movimiento de software libre Para universalizar el acceso a la tecnología en 1985, se creó la Free Software Foundation (Fundación para el software libre), y un extenso grupo de desarrolladores de distintos países se dieron a la tarea de crear programas de libre distribución.

FSF Logo VECTORIZAR

Por:    José  Carlos  Barceló  

3  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

Richard Mathew Stallman Fundador de FSF VECTORIZAR Hoy en día la FSF cuenta con un repertorio de más de 5000 aplicaciones gratuitas que van desde procesadores de texto, a programas de uso industrial altamente complejos, y por supuesto programas de diseño gráfico digital. Incluso la UNESCO (United Nations Educational, Scientific, and Cultural Organization)aporta ayuda financiera al proyecto, y han surgido nuevas organizaciones como la Open Source Foundation que también promueve la creación de software libre, lo cual ha aumentado la oferta de aplicaciones. La FSF mantiene varias campañas para promover el uso de software libre tales como: •

• • •

• • • •

BadVista: Campaña en defensa de la libertad de los usuarios de computadoras, oponiéndose a la adopción de Microsoft Windows Vista y promoviendo alternativas libres. DefectiveByDesign: Campaña para eliminar el DRM (Digital Rights Management) que impide copiar algunos archivos digitales. PlayOgg.org: Para promocionar Ogg, un formato de audio alternativo a formatos comerciales como MP3 y AAC. Resist the imposition of Digital Restrictions Management: Campaña para "Resistir a la imposición de la gestión de Restricciones sobre lo Digital".Esto además del DRM también incluye la llamada Trusted Computing (que en la FSF denominan Computación traidora). Free BIOS: "BIOS libre". Campaña de apoyo al proyecto de creación de una BIOS libre. Hardware devices that support free software: Campaña para promocionar la compra de "hardware que de soporte al software libre". High Priority Free Software Projects: para llamar la atención sobre los "proyectos de software libre prioritarios". Encourage governments to adopt OpenDocument': Para "Alentar a los gobiernos a adoptar OpenDocument", algunos gobiernos que se han sumado a esta iniciativa, utilizan únicamente software libre en sus oficinas, como son los casos de Brasil, Venezuela, Alemania, China y en México el gobierno del Distrito Federal.

Por:    José  Carlos  Barceló  

4  

Diseño  Digital    

1.2 Licencias GNU Es el tipo de licencia que utilizan los programas creados por la licencia FSF, está diseñada para asegurar todos los usuarios puedan no únicamente usar de manera gratuita los programas, si no incluso modificarlos y distribuirlos. La idea se conoce en Inglés como copyleft 'copia permitida', en oposición a copyright 'derecho de copia reservado', así nace la Licencia General Pública de GNU, originalmente los programas con licencia GNU eran exclusivamente para el sistema operativo libre Linux, pero hoy los hay también para los sistemas Windows y Macintosh.

GNU LOGO VECTORIZAR Actividades: 1.-Investiga en Internet si la FSF (Free Software Foundaton) tiene presencia en tu país y anota su sitio Web. _______________________________________________________________ ______________ 2.-Investiga que gobiernos de tu región están usando software libre _______________________________________________________________ 3.-Investiga a ¿Quiénes hacen wikipedia? _______________________________________________________________ 4.-Explica el concepto de trabajo wiki

_______________________________________________________________ _______________________________________________________________ 5.-¿Crees que el software libre sea un ejemplo de trabajo wiki?, explica tu respuesta. _______________________________________________________________ _______________________________________________________________ Por:    José  Carlos  Barceló  

5  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

6.-Investiga en Internet el concepto de Web 2.0 _______________________________________________________________ _______________________________________________________________ _______________________________________________________________ 2. Fundamentos de imagen digital 2.1 Tipos de imagen vectores vs mapas de bits Digitalizar una imagen significa convertirla e una serie de datos de código binario, que es el único lenguaje que comprenden las computadoras, sin embargo estos pueden tomar l a forma de más de una docena de formatos gráficos digitales diferentes; en éste capítulo vamos a analizar los diferentes tipos de archivos digitales que existen, así como los métodos más comunes para generar imágenes digitales. Para empezar debemos aclarar los archivos de imagen digital pueden clasificarse en dos grandes categorías. ARCHIVOS DE MAPA DE BITS (BITMAP) Están formados por puntos llamados pixeles (picture element) cada uno de distinto color, lo cual permite lograr imágenes realistas, pero que se deterioran al ampliarse.

ARCHIVOS VECTORIALES Están formados por líneas curvas (vectores) que representan ecuaciones matemáticas, lo que permite escalar esas imágenes sin que se deterioren.

Ejemplos de ellos son: BMP, GIF, Ejemplos de ellos son: SVG, EPS PNG, JPEG, PIC, TIFF,

Por:    José  Carlos  Barceló  

6  

Diseño  Digital  

DISEÑO   DIGITAL  

 

Aquí se aprecia la diferencia entre ambos mas claramente como puedes observar la letra S en bitmap está formada por puntos y al ampliarse se observa un efecto de diente de sierra en los bordes cosa que no sucede con la letra S vectorial pues está compuesta por vectors que se reajustan al escalar su tamaño. Cada uno de estos archivos tiene características que lo distinguen y lo hacen más adecuado para determinados fines; los archivos bitmap permiten reproducciones fotográficas con alto grado de detalle 100% realistas, mientras que los archivos vectoriales son mas adecuados para reproducir dibujos. De manera que pese a ser susceptibles a deformarse (pixelarse) al ser ampliados los archivos bitmap son los únicos que e adaptan al trabajo fotográfico.

Por:    José  Carlos  Barceló  

7  

Diseño  Digital  

DISEÑO   DIGITAL  

 

2.2 formatos de archivo de imagen • AI: Es l formato propietario del software de diseño vectorial Adobe illustrator • BMP: (Bitmap) Es el formato nativo de Windows soporta profundidad de color hasta de 24 bits. Su principal ventaja es no tener pérdida de color y es utilizado por todos los programas que corren en Windows, un inconveniente de éste formato es el gran tamaño de los archivos. • EPS: (Encansulated Post Script) formato de archivo vectorial creado por Adobe Systems para facilitar la impresión con impresoras post script. Tiene gran capacidad para especificar tonos de grises utilizando patrones de puntos. • GIF: (Graphics Interchange Group) formato bitmap de 8 bits lo que permite un rango tan solo de 256 colores en modo indexado. Entre sus ventajas está el permitir fondos trasparentes y archivos de muy bajo peso por lo que es muy utilizado en aplicaciones Web, ademas de permitir la creación de secuencias animadas. • PNG: (Portable Network Graphics) archivo bitmap diseñado especialmente para manejar gráficos para Web, permite gran compresión, trasparencias y acepta hasta 24 bits de color; es el formato nativo del software Fireworks de Adobe Systems. • JPEG : (Joint Photographics Expert Group) Es el formato más utilizado para fotografías de Internet, permite alta calidad y compresión sin pérdida evidente de calidad excelente para imágenes de color o en escala de grises pero no adecuado para blanco y negro. • PIC: (Picture) formato bitmap empleado por el programa Paint de la PC . • PSD. (PhotoShop) Es el formato propietario del software Adobe PhotoShop. • RAW : () Formato bitmap utilizado por la cámaras digitales profesionales, permite gran calidad pues trabaja prácticamente sin compresión y soporta todos los modos de color, y permite redimensionar Por:    José  Carlos  Barceló  

8  

Diseño  Digital    

•

•

•

las imágenes sin pérdida de calidad , así como incluir en ellas metadatos diversos. SVG : (Scalable Vector Graphics) Formato vectorial basado en lenguaje XML muy utilizado para gráficos Web vectoriales: es el formato nativo de la aplicación de diseño GNU Inkskape y para los trazos vectoriales de Gimp. TIFF: Formato bitmap de gran calidad y escasa compresión, soportado por TODOS los programas de imagen y utilizado por todos los scanners incluye todos los tipos de color, (RGB, CMYK, Indexado, Escala de grises) hasta 32 bits de profundidad. XCF : Archivo propietario del software libre de diseño digital Gimp, es equiparable al PSD de Photoshop aunque son incompatibles entre sí.

2.3 Modos de Color Seguramente has escuchado que hay colores primarios o básicos y secundarios que son producto de la mezcla de colores básicos; y estás convencido de que el verde es un color secundario, pero en realidad esto depende del modo de color con el que estemos trabajando. Porque resulta que existen dos modos o formas de crear colores, la síntesis aditiva y la substractiva. 2.3.1 Síntesis Aditiva el color lux El modo de síntesis aditiva, es aquel en el cual la suma de TODOS los colores produce el color blanco. Éste es el moso de color que se utiliza en las computadoras, monitores de video, televisores y todos aquellos medios en los cuales el color sea producido por un haz luminoso. Tal vez en alguna de tus clases de Física has observado que al pasar por un prisma de cristal, la luz de una linterna se descompone en colores, lo mismo pasa con la luz solar al pasar por las gotas de lluvia, y por ello se forma el arcoiris; a éste fenómeno se le conoce como refracción de la luz. Pero esto sólo sucede con los colores luz. 2.3.2 Síntesis substractiva el color materia Cuando pintas con lápices de colores sobre una hoja de papel mientras mas colores mezclas, el color resultante se obscurece y va semejándose al color negro. Esto sucede porque los colores materia, es decir aquellos formados por pigmentos, funcionan de manera inversa a los colores luz y en vez de sumar su luminosidad, la restan; es por ello que los colores materia usan el modo de color de síntesis substractiva, donde la suma de colores resulta en la ausencia de luz, es decir el negro. Este es el modo de color utilizado para cualquier clase de pintura desde acuarela, óleo, hasta la pintura para casas o automóviles, así como para plasmar el color en papel ya sea con una impresora un lápiz o un crayón, mientras más colores mezcles más obscuro será el color que obtengas.

Por:    José  Carlos  Barceló  

9  

DISEÑO   DIGITAL  

Diseño  Digital    

2.3.3 RGB vs CMYK Los colores primarios y los secundarios derivados son diferentes para cada modo de color, pues como explicamos anteriormente los colores luz suman su luminosidad, mientras los colores materia la restan; de tal forma que para los colores luz los colores básicos son tres Red (rojo) , Green (verde) y Blue (azul), y por eso a éste esquema se le denomina RGB, mientras que el sistema de colores materia es llamado CMYK por las siglas de sus colores primarios Cyan, Magenta, Yellow (amarillo) y Black (negro). He aquí un diagrama en el que puedes observar como se forman los diferentes colores en cada esquema.

Actividades: Busca en la Web ejemplos de los siguientes archivos de imagen: jpeg, gif, gif animado y png. Crea con ellos una biblioteca de imágenes Construye un disco de Newton, para observar y comprobar como se mezclan los colores luz produciendo el blanco.

Investiga como se hace la igualación de colores en una tienda de pinturas Responde brevemente las siguientes preguntas: 1.- ¿Qué modo de color se emplea para crear imágenes de computadora? _______________________________________________________________ 2.- ¿Qué modo de color utilizan las impresoras de inyección de tinta?

Por:    José  Carlos  Barceló  

10  

DISEÑO   DIGITAL  

Diseño  Digital    

_______________________________________________________________ 3.-¿Crees que esto podría ocasionar algún problema al imprimir tus dibujos creados en computadora?. Explica la razón de tu respuesta. _______________________________________________________________ _______________________________________________________________ 3.-The Gimp 3.1 La Historia de GIMP The Gimp (GNU Image Manipulation Program), conocido simplemente como Gimp, es un programa libre y gratuito de edición de imágenes digitales en forma de mapa de bits, tanto dibujos como fotografías; es considerado por algunos como la alternativa gratuita a Photoshop, y es el programa que utilizaremos para realizar los ejercicios de éste curso. GIMP, está englobado en el proyecto GNU y disponible bajo la Licencia pública general de GNU, fue creado en 1995 como un ejercicio semestral en la Universidad de Berkeley por lo estudiantes Spencer Kimball y Peter Mattis, ambos se encuentran hoy en día en el staff directivo de Google y un equipo de voluntarios se encarga del desarrollo del programa.

Spencer Kimball y Peter Mattis vectorizar GIMP, es el programa de manipulación de gráficos disponible en más sistemas operativos, Unix, GNU/Linux, Windows, Mac OS X, y está disponible en varios idiomas, entre ellos: Español, Alemán, Inglés, Catalán, Gallego, Euskera, Francés, Italiano, Ruso, Sueco, Noruego, y Coreano. Es una alternativa firme, potente y rápida a Photoshop para muchos usos, aunque no se ha trata una copia de dicho software, y su interfaz es diferente. 3.1.2 Versiones y derivaciones de GIMP: AÑO DE VERSION CARACTERISTICAS PUBLICACION soportaba la 0 Enero1996 ampliación por Por:    José  Carlos  Barceló  

11  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

1.0

Junio 1998

1.2

Enero 2001

1.2.5

Agosto 2003

2.0

Marzo2004

2.4

Mayo2008

2.6

Octubre 2008

3.0

En desarrollo

plugins para añadir efectos, filtros y herramientas se mejoró la gestión de la memoria Incluye herramientas de medidas, un nuevo visualizador de imágenes Mejora errores de la versión anterior Cambió al toolkit GTK+ 2.x. Una interfaz retocada más pulida Mejora en otros idiomas Incluirá soporte nativo de CMYK

Además de dichas versiones algunas personas han creado derivaciones de GIMP adaptadas para necesidades especiales, éste tipo de modificaciones están expresamente prohibidas en los programas con licencia comercial, pues el usuario únicamente tiene permiso de usar el programa, pero en programas Open Source o con licencia GNU sucede lo contrario pues es precisamente la comunidad de usuarios quien mejora el programa. Derivación Gimp Shop

Características Se trata de una modificación de GIMP para hacerlo más parecido al Adobe Photoshop. Está basado en la versión 2.2. de GIMP. Gimphoto Otra modificación de GIMP retocada para parecerse al Adobe PhotoShop, pero basado en la versión 2.4. Seashore Es un programa basado en GIMP diseñado para el sistema operativo Mac OS, es decir las versión nueve del sistema operativo de Macintosh. Por el momento solamente un conjunto limitado de los filtros disponibles en GIMP. CinePaint, Es una modificación de GIMP que (antiguamente conocido como Film añade soporte para 16 bits de Gimp) profundidad por canal de color, y posee un gestor de fotogramas especiales para ser utilizado en la

Por:    José  Carlos  Barceló  

12  

Diseño  Digital  

DISEÑO   DIGITAL  

 

industria cinematográfica.

GIMP interfaz GIMP como todos los programas con licencia GNU o de Código abierto, los usuarios de todo el mundo colaboran para mejorar el software y para ello publican versiones “beta”, es decir versiones de prueba que no son totalmente confiables contienen pues errores de programación; por ésta razón es aconsejable obtener de preferencia la versión estable más reciente1, y solo usar las versiones de prueba cuando tus conocimiento de programación te permitan colaborar para mejorarlas, por esta razón algunos plugins o funciones del programa salen primero en un país únicamente incluso la documentación del producto está solo parcialmente traducida al español, ¡participa!. Mejorar el software libre es responsabilidad de TODOS los usuarios; de hecho uno de los objetivos del proyecto GNU es “volver al espíritu de cooperación que prevaleció en los tiempos iniciales de la comunidad de usuarios de Internet”. 3.2. Limitaciones de GIMP Si bien GIMP es una excelente opción, no es un Photoshop gratuito, pues no posee toda la gama de opciones y herramientas que ésta aplicación comercial brinda a sus usuarios, entre sus limitantes están las siguientes. 1. GIMP no maneja imágenes de 16 bits, por lo cual os archivos RAW de algunas cámaras digitales profesionales deben ser convertidos a 8 bits para procesarlos con GIMP. 2. No maneja el modo de color substractivo CMYK, lo cual hace que los ajustes de color para salida impresa no sean tan precisos como lo requiere la industria editorial y en si toda forma de impresión profesional. Aunque se planea ofrecer ésta funcionalidad en la versión 3 de GIMP.                                                                                                                         1

 Al  momento  de  escribir  estas  líneas  la  versión  mas  estable  de  GIMP  es  la  que  en  2.6.10  que  es  la  que   se  utilizará  en  éste  curso.   Por:    José  Carlos  Barceló  

13  

Diseño  Digital    

3. GIMP no tiene capas de ajuste, como Phothosop lo que permite modificar el color, brillo y otros parámetros de la imagen sin alterar la original, en GIMP siempre es recomendable hacer copias de seguridad. Aunque también está previsto incluir esto en próximas versiones. 4. Si bien Script –Fu el lenguaje de programación de GIMP, es más poderoso que las acciones de Photoshop, es más complejo se requiere tener nociones de programación en computadoras para usarlo. 5. Por último PhotoShop es un estándar en el mundo del diseño gráfico profesional, por lo tanto existe una gran cantidad de información respecto a su uso libros, revistas especializadas, tutoriales en Internet, cursos y certificaciones, mientras que para GIMP no hay tanta información disponible, de hecho uno de los objetivos de éste libro, es contribuir a llenar ese vacío. La gran mayoría de éstas limitantes pronto se verán superadas por la misma naturaleza colaborativa del software libre, pues miles de usuarios en todo el mundo, se encuentran diseñando las funciones y capacidades que presentará The GIMP en su próxima edición, solo es cosa de esperar, o mejor aún de colaborar y unirte a éste gran movimiento del software libre. 3.3. La instalación GIMP Obtener la última versión de The Gimp , es bastante sencillo, basta descargarlo de la siguiente dirección. http://www.gimp.org Aunque el sitio está en inglés, el software funcionará en español. Para descargarlo, simplemente busca el link que dice download, y selecciona la versión adecuada para tu sistema operativo. Haz doble clic en el instalador y deja que te guíe en el proceso. No cambies los valores predeterminados. 3.4 La interfaz del programa Al abrir GIMP por primera vez te encontrarás con una serie de ventanas a continuación explicaremos las funciones de cada una.

Por:    José  Carlos  Barceló  

14  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

gimp fullscreen bmp 1. La ventana numero uno es la ventana de herramientas principal, en ella puedes seleccionar la herramienta adecuada para cada tarea, copiar, clonar, mover, recortar, pintar , borrar etc. Así mismo en la parte inferior de esa ventana están los controles para seleccionar los colores frontal y de fondo. 2. La ventana número dos es la de opciones de herramienta. Donde puedes por ejemplo ajustar el tamaño y opacidad de un pincel. 3. La tercera ventana es el lienzo o área de trabajo donde se desplegarán las imágenes que manipules con el programa. 4. La cuarta ventana tiene varias pestañas, una para las capas del documento, otra para los diferentes canales de la imagen y una más para las rutas o trazos vectoriales. 5. La quinta y ultima ventana, tienes tras iconos que funcionan de manera similar a las pestañas de la ventana anterior, uno de ellos es para modificar las opciones de pincel, otro para modificar y seleccionar los patrones y texturas de relleno, mientras que el tercero sirve para manejar los degradados (gradientes). Cada ventana tiene a su vez gran cantidad de opciones e incluso menús propios, además de los numerosos cuadros de dialogo que el programa muestra en cada operación. 3.4.1 La ventana de herramientas: Para seleccionar la herramienta simplemente haz clic sobre el icono deseado , si sostienes el puntero del Mouse sobre ellos aparecerá una breve descripción de su utilidad. Tóate tiempo para descubrir cada una de ellas.

Por:    José  Carlos  Barceló  

15  

Diseño  Digital  

DISEÑO   DIGITAL  

 

HERRAMIENTAS.BMP A grandes rasgos, podemos clasificar las herramientas de ésta ventana en seos grandes grupos.

herramientas index 1.-Herramientas de selección, 2.-Herramientas de movimiento, 3.Herramientas de perspectiva, 4.-Herramientas de pintura, 5.herramientas de exposición y enfoque, y por último las herramientas restantes las llamaremos, 6.- Herramientas diversas.

Por:    José  Carlos  Barceló  

16  

Diseño  Digital  

DISEÑO   DIGITAL  

 

noindex Actividad: Investiga el nombre de cada una de la herramientas leyendo la breve descripción que sale al detener el puntero sobre cada una de ellas y anota los nombres a continuación. 1.-Herramientas de selección. _______________________________________________________ 2.-Herramientas de movimiento _______________________________________________________ 3.-Herramientas de perspectiva _______________________________________________________ 4.-Herramientas de pintura _______________________________________________________ 5.-Herramientas de exposición y enfoque _______________________________________________________ 6.- Herramientas diversas _______________________________________________________

3.4.2 La ventana de lienzo o área de trabajo. Ésta ventana aporta información muy importante sobre la imagen con la cual estás trabajando en ese momento.

Por:    José  Carlos  Barceló  

17  

Diseño  Digital  

DISEÑO   DIGITAL  

 

canvas.bmp

1. Barra de título, muestra el nombre y tipo de archivo con el que se está trabajando, así como su dimensión en pixeles. 2. El menú de opciones de imagen , mismo que puede ocultarse y activar las opciones con el clic derecho del ratón. 3. Botón para ocultar el menú de imagen, es como una pequeña flecha en el borde superior izquierdo del margen de la ventana. 4. Reglas muestran en distintas unidades (pixeles, centímetros, pulgadas etc.) las dimensiones del lienzo sirven como guía para ubicar objetos. 5. Quick Mask, éste pequeño botón, en el extremo inferior izquierdo de la ventana, a manera de asterisco sirve para activar la herramienta de máscara en la imagen. 6. Coordenadas de puntero, indica el punto exacto donde está colocado el puntero del ratón en ése momento. 7. Selector de unidades es un pequeño menú desplegable, que permite elegir en que unidades se muestran las reglas de la ventana. 8. Zoom o acercamiento sirve para elegir el tamaño al que se desea visualizar la imagen, siempre medido en porcentaje, 9. Área de status aquí se indica que operaciones está realizando la computadora en ese momento es especialmente útil en procesos que requieren mucho tiempo de procesamiento (render).

Por:    José  Carlos  Barceló  

18  

Diseño  Digital    

10. Botón de cancelar bajo el número diez aparece un botón para detener o cancelar los procesos. 11. Control de navegación es una pequeña cruz que aparece en el extremo inferior derecho de la ventana, con ella se pueden realizar paneos y movimientos para moverse dentro de imágenes muy grandes, sin alterar la posición real de la imagen en el lienzo. 12. Área activa de la imagen, es el espacio visible de una imagen, cualquier elemento fuera de el será invisible. 13. Área inactiva estos espacios ya no están contemplados en la imagen. 14. Botón para redimensionar la ventana, es decir hacerla más chica o más grande sin alterar el nivel de zoom en el se está trabajando. 4.- Iniciándose en el uso de The GIMP. Antes de comenzar, debo hacer una advertencia, en GIMP tal como sucede con otros programas de diseño digital, hay muchas maneras de conseguir un mismo resultado, he seleccionado para cada práctica aquellos métodos que considero ayudan al estudiante a familiarizarse con el software y conocer a fondo las herramientas, aunque he de reconocer que para la realización de algunos ejercicios, seguramente hay caminos más fáciles y rápidos. Por otra parte el diseño digital es un tema muy amplio para ser abordado en un solo libro, razón por la cual en éste texto nos vamos a concentrar en los aspectos relacionados al retoque y edición de fotografías digitales, dejando a un lado aspectos relacionados al dibujo y la creación gráfica, que se tratarán a fondo en otros libros de ésta serie. El objetivo del curso, es darte las bases para que por tu cuenta vayas experimentando y descubriendo todo lo que te ofrece éste programa de diseño digital; dicho esto entremos en materia. 4.1 Herramientas de pintura, dibujando formas simples. Dibujar con una computadora, parte del mismo principio que hacerlo a mano, primero debes observar el objeto, y después reducirlo a formas geométricas simples. En ésta práctica vamos a dibujar una botella de vino, y posteriormente le añadiremos una etiqueta. Práctica uno. 1. Primero abre un archivo nuevo con el menú archivo nuevo, en el cuadro de dialogo emergente elige una plantilla de 800x600 pixeles.

Por:    José  Carlos  Barceló  

19  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

archivo nuevo

plantilla 800x600 2. En el menú imagen busca la opción transformar y elige rotar en el sentido horario.

transformar rotar 3. Utiliza la herramienta de selección rectangular selección rectangular y traza un rectángulo que formara el cuerpo de la botella, y a continuación con la herramienta de relleno aplícale el color gris cubeta para seleccionar el color gris, haz doble click en el recuadro de color frontal bajo la ventana de herramientas y en el cuadro emergente selección el gris.

Por:    José  Carlos  Barceló  

color frontal.

20  

Diseño  Digital  

DISEÑO   DIGITAL  

 

botella 4. Con la herramienta de selección elíptica, traza un circulo sobre el rectángulo de manera que una mitad quede dentro de la figura existente y la otra fuera, es importante que el circulo no rebase el borde de la botella.

5. Con la cubeta rellénalo de gris, ¡ahora solo falta crear el cuello de la botella!, traza un rectángulo y rellénalo.

botella terminada 6. Para hacer más realista nuestra botella vamos a añadirle líneas blancas que simulan el brillo del cristal. Para ello en la ventana capas, deberás crear una capa nueva.

capa nueva 7. Selecciona en la ventana de capas imagen de fondo, con la herramienta se varita mágica selecciona el fondo blanco, en el menú selección elige la opción invertir selección.

selección invertir

Por:    José  Carlos  Barceló  

21  

Diseño  Digital    

De ésta forma quedará seleccionada la imagen de la botella, también podríamos haber seleccionado la botella pero el truco de invertir la selección es muy útil cuando tenemos una imagen compleja que no se puede seleccionar fácilmente y resulta más sencillo seleccionar el fondo e invertir la selección. 8. Con la herramienta pincel y el color frontal en blanco, traza algunas líneas como las que a continuación se muestran, tal vez no te parezcan similares a los brillos del cristal, pero eso es algo que corregiremos posteriormente. Es muy importante que al empezar a dibujar verifique que está seleccionada la capa nueva

capa activa

botella con brillos 9. Hora vamos a aplicar un filtro a los brillos para que se vean realistas, en el menú filtro, selecciona la opción desenfoque y elige el desenfoque gausiano.

nivel de desnfoque escribe 31.o en los recuadros de ajuste y la imagen se verá más realista.

Por:    José  Carlos  Barceló  

22  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

desenfoque gausiano 10. Ahora acopla ambas capas como una sola, en el menú capa elige combinar hacia abajo.

11. Ahora crea una nueva capa y repite la operación selecciona la capa de fondo con la vara magica selecciona el color blanco,en el menu seleccionar invierte la selección, cambia a la nueva capa y rellenala de color verde, este cubrirá toda la botella. 12. En la parte superior de la ventana de capas están los modos de fusión vamos a cambiar la capa nueva de normal a solapar.

solapar capa

botella verde con área

Por:    José  Carlos  Barceló  

23  

Diseño  Digital  

DISEÑO   DIGITAL  

 

13. A continuación con la herramienta seleccionar traza un rectángulo en la capa de color verde y recorta esa área, es en ella donde posteriormente colocaremos nuestra etiqueta. 14. Acopla las capas como lo hicimos anteriormente y crea una nueva, y utilizando las flechas verde que están en la parte inferior de la ventana de capas envía la capa nueva debajo de la capa de fondo. 15. Selecciona la capa de fondo y con la varita mágica selecciona el fondo blanco y córtalo con el menú edición, la imagen quedará con un fondo trasparente, de hecho en todos los programas de imagen esa cuadricula que ahora se ve tras la botella indica que el fondo es trasparente.

botella sin fondo 16. Rellena la capa nueva de blanco, y vuele a seleccionar la capa de la botella y duplícala con el botón duplicar capa en la ventana de capas.

duplicar capa 17. Selecciona la copia de la imagen de fondo, ve al menú colores y elige brillo y contraste en el cuadro de dialogo lleva los controles deslizables, hasta los extremos brillo a la izquierda contraste a la derecha de manera que la imagen se vuelva negra.

brillo contraste 18. Busca las herramientas para deformar la imagen y usando perspectiva y rotar inclínala como se muestra en la imagen.

botella con sombra 19. Envía la capa de color negro detrás de la capa de color y aplícale un desenfoque gausiano para que sea una sombra más realista, también en los controles de la ventana de capa bajale la opacidad al 50%.

Por:    José  Carlos  Barceló  

24  

Diseño  Digital  

DISEÑO   DIGITAL  

 

botella terminada color De ésta manera terminamos nuestro primer ejercicio. 5.-Obtención de imágenes libres de derechos Un punto que debes tomar en cuenta para poder utilizar cualquier imagen legalmente y poder difundir tu trabajo sin problemas, son los derechos del autor de dicha imagen; no se trata únicamente de derechos económicos, porque suele pensarse que si algo se usa sin fines de lucro no hay problema, pero un autor también tiene derechos morales y puede negarse a que su obra se use para promover ideas y valores contrarios a los suyos; por lo cual el autor tiene el monopolio legal del derecho de copia de su obra. Frente a las imágenes con copyright, (todos los derechos reservados), están las imágenes con algunos derechos reservados; la Free software foundation, promovió una iniciativa para crear contenidos digitales de libre atribución así surgieron las licencias Creative Commons. Éste tipo de licencias se aplican lo mismo a textos, que a música, video o imágenes fijas cuyos autores deciden reservar para si solo algunos derechos, básicamente se trata de 4 tipos de licencia. De Atribución: Se permite su libre copia y distribución con la condición de dar crédito al autor original. No comercial: Se permite su libre copia y distribución únicamente con fines no comerciales. Obras No derivadas: Se permite su libre copia y distribución únicamente de copias exactas no de obras derivadas en las que se use la obra para hacer algo más. Compartir con la misma licencia: Se permite su libre copia y distribución con la condición de que el trabajo en el que se use, sea compartido con una licencia igual.

Por:    José  Carlos  Barceló  

25  

Diseño  Digital    

Actividad Investiga en la página www.creativecommons.org, que tipo de combinaciones se pueden hacer entre los diferentes tipos de licencia y con que logotipos se indica cada una. 6.-Creación de gráficos Multilayer. En ésta práctica aprenderás a crear una imagen agregando elementos en varias capas, así como algunos recursos de manipulación fotográfica; además reafirmarás tus habilidades en el uso de algunas herramientas de pintura como el pincel y la cubeta de relleno. Práctica Dos En esta segunda práctica, vamos a crear una etiqueta a partir de una fotografía y la integraremos con la botella creada en la primera práctica. 1. Lo primero que debemos hacer es buscar en Flikr.com la fotografía de un racimo de uvas, recuerda que en internet es más fácil encontrar información en inglés, así que búscala usando la palabra grapes, recuerda que debe tener licencia Creative Commons para poder ser usada legalmente. 2. Abre la imagen en Gimp con el menú archivo/ abrir.

gimp uvas 3. Ve al menú colores/ umbral para convertir la foto en una imagen de blanco y negro de alto contraste.

color-umbral Mueve el control de ajuste de manera que las uvas se aprecien claramente

Por:    José  Carlos  Barceló  

26  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

umbral niveles 4. Ahora vamos a crear un ribete texturizado para la parte superior de la etiqueta, primero con la herramienta de selección rectangular, traza un recuadro en la parte central del racimo de uvas y con el menú copiar simplemente copia ésta área y automáticamente esa textura se convertirá en un pincel.

Edición copiar Apareciendo en primer lugar en la ventana de opciones de pincel

Nueva brocha

5. Con la herramienta de selección rectangular, traza un rectángulo en la parte superior del racimo de uvas, y en la ventana de capas abre una capa nueva y sobre ella vamos a pintar con nuestro nuevo pincel. 6. Ahora vamos a aplicar un filtro para darle a esa capa una textura marmoleada, vamos el menú filtros/distorsionar/ondas

Por:    José  Carlos  Barceló  

27  

Diseño  Digital  

DISEÑO   DIGITAL  

 

filtro-dist-ondas En el recuadro emergente ajusta los valores hasta lograr una figura similar a las ondas que surgen en el agua al lanzar una piedra, tal como se muestra en la imagen.

ondas-ajustes 7. Con la herramienta de selección traza un rectángulo sobre ésta imagen y crea una nueva capa misma que con la herramienta cubeta llenarás con un color verde obscuro.

verde

Por:    José  Carlos  Barceló  

28  

Diseño  Digital    

Es muy importante hacer la selección rectangular de otra manera la capa nueva cubrirá toda la imagen. 8. Una vez aplicado el color, cambiaremos el modo de fusión de ambas capas para preservar a la vez el color y la textura. En la parte superior de la ventana de capas elige el modo de fusión obscurecer solo.

obscurecersolo 9. Con el menú capas// combinar hacia abajo vamos a convertir ambas capas en una sola.

combinar haciaabajo 10. Con el botón duplicar capa duplica el ribete y con la herramienta mover arrástralo a la parte inferior de la imagen de manera que quede uno arriba y otro debajo de las uvas.

11. Traza un rectángulo sobre la parte visible de las uvas entre los dos ribetes y con la cubeta cúbrelo con verde claro.

verdeclaro

Por:    José  Carlos  Barceló  

29  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

12. Modifica el modo de fusión de la capa a suma, de ésta forma las uvas serán visibles y tomarán el color de esta capa.

suma 13. Vamos a agregar una capa de texto con el nombre del vino, para ello vamos a seleccionar un color morado y una letra de más de 30 puntos y de apariencia elegante, yo elegí Edwardian Script.

texto

morado

Por:    José  Carlos  Barceló  

30  

Diseño  Digital    

14. Añade otra capa de texto con el año de la cosecha, de manera que tu etiqueta quede como la de la foto.

etiqueta 15. Finalmente con el menú archivo// guardar como, guarda tu imagen como archivo jpg, seleccionando el tipo de archivo en el cuadro de diálogo seleccionar archivo por extensión.

guardarcomo 16. Para integrar la botella y la etiqueta cierra el archivo actual y abre el archivo de la botella y la imagen jpg de la etiqueta.

Abrir Es frecuente que un archivo abra abajo del otro y no sea visible, mueve el archivo visible para poder ver el otro.

Por:    José  Carlos  Barceló  

31  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

abreunobajoelotro

17. Con el menú seleccionar// todo, selecciona toda la imagen de la etiqueta, y después con el menú edición//copiar cópiala y pégala en el archivo de la botella.

edición copiar 18. Con la herramienta escalar redimensiona la imagen para que quede del tamaño adecuado 19. Cambia el modo de fusión de capa a solapar

solapar 20. Con esto terminamos la práctica y tu botella debe quedar similar a la de la foto.

botella con etiqueta

Por:    José  Carlos  Barceló  

32  

Diseño  Digital    

7.-Aplicando Pintura digital a una fotografía. En este apartado, vamos a prender algunos trucos de manipulación fotográfica, tales como cambiar de color a una imagen, o mejor dicho a una parte de la imagen sin afectar el resto, para ello vamos a valernos de herramientas que ya conoces bien como la cubeta de relleno y los modos de fusión de capas, y vas a descubrir el poder y utilidad de las herramientas de selección.

Práctica  3   1. Para iniciar ésta práctica abre en Gimp el archivo miniverde, es la fotografía de un automóvil Mini Cooper, al cual le vamos a cambiar el color utilizando la herramienta de mascara rápida. 2. Para seleccionar únicamente la carrocería del vehículo, vamos a utilizar la herramienta lazo de selección libre.

h.seleccionlibre 3. Traza con el lazo el contorno dando clic en diversos puntos especialmente en aquellos donde la línea cambia de dirección, cuando hayas terminado da doble clic para cerrar el trazado. 4. Ve al menú seleccionar y activa la herramienta de mascara rápida, cuando lo hagas las partes no seleccionadas de la imagen se tornaran de color rojo.

 seleccionaractivasmascara 5. Con la herramienta de pincel, en color negro extiende la máscara en aquellas partes que no quedaron cubiertas, y con la goma borra aquellas partes que quedaron cubiertas, ajusta ambas herramientas al tamaño necesario.

Por:    José  Carlos  Barceló  

33  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

mascara rápida

pincelsize 6. En el menú colores selecciona colorear y ajusta los parámetros con los valores que se muestra en la imagen (Tono “0”, Saturación “67”, Luminosidad “4”).

colorear rojo 7. Listo ahora el automóvil es de color rojo y no verde.

coloreado rojo

Por:    José  Carlos  Barceló  

34  

Diseño  Digital  

DISEÑO   DIGITAL  

 

Práctica  4   En  ésta  práctica,  vamos  a  prende  r  a  usar  las  herramientas  de  distorsión,  escalado  y   perspectiva,    a  la  vez  que  reafirmaremos  el  uso  de  las  capas  para  crear  nuestra   composición,  en  éste  caso  transformaremos  una  fotografía    en  una  imagen  estilo  manga   japones.  

1. Primero  abre  en  Gimp  el  archivo  mi  foto,  se  trata  de  una  fotografía  del  rostro   del  autor  de  éste  texto,  puedes  substituirla  por  una  tuya  o  la  de  un  amigo  para   que  sea  más  divertido  el  resultado,  pero  es  muy  importante  que  la  persona   esté  totalmente  de  frente  como  en  las  fotografías  para  credencial.  

abrirmifoto   2. Acto  seguido  copia  la  capa  con  el  botón  correspondiente  en  la  aprte  iinferior  de   la  ventana  de  capas.   3. Con  la  herramienta  de  perspectiva  vamos    a  deformar  la  imagen  separando  las   esquinas  superiores  y  acercar  las  inferiores,  de  manera  que  la  parte  superior   quede  más  ancha  y  la  inferior  más  delgada.  

perspectiva  

  4. Ahora  oculta  la  capa  superior,  selecciona  la  capa  inferior  y  con  la  herramienta   de  selección  circular  traza  una  elipse  y  selecciona  el  ojo  derecho  de  la  imagen,   cópialo.  

 selecciona  ojo   5. Selecciona  la  capa  superior  y  pégalo  en  una  capa  nueva  sobre  el  ojo  derecho   6. Con  la  herramienta  escalar  agranda  el  ojo    

Por:    José  Carlos  Barceló  

35  

Diseño  Digital  

DISEÑO   DIGITAL  

 

agranda  ojo   7. Con  la  herramienta  de  borrar  borra  el  contorno  de  piel  circundante  al  ojo  de   manera  que  se  vea  integrado  a  la  imagen   8. Una  vez  hecho  esto  con  la  herramienta  voltear  voltéalo  horizontalmente  sobre   el  ojo  izquierdo.  

con2ojos   9. Con  el  menú  capas  combinar  hacia  abajo  une  las  capas  de  manera  que  queden   integradas  en  una  solo  ambos  ojos  y  la  cara  deformada   10. Elimina  la  capa  de  fondo  que  contiene  la  foto  original  

 integrado  

          11. Para  darle  a  la  imagen  una  apariencia  de  dibujo,  ve  al  menú  filtros,  en  el   submenú  artísticos  busca  pintura  al  óleo  y  aplícalo;  con  los  siguientes  valores,   tamaño  de  máscara  15  y  exponente  12.    

Por:    José  Carlos  Barceló  

36  

Diseño  Digital  

DISEÑO   DIGITAL  

 

pinturaoleo   12. Finalmente  aplica  el  filtro,  artístico  viñeta  con  los  ajustes  preestablecidos    

 terminadomanga    

Practica  5   En  ésta  práctica  aprenderás  cómo  utilizar  las  capas  de  GIMP  de  una  manera   diferente.  Usando  GIMP  como  un  paquete  de  animación  vamos  a  crear  un  banner   animado  para  una  página  Web.   1. Comenzaremos  abriendo  un  nuevo  archivo  de  468x160,  pixeles  y  blanco  como   color  de  fondo.  Cree  nueva  capa  transparente.     2. Abre  la  imagen  cola  Bel  Air,  cópiala  y  pégala  en  el  archivo  nuevo,  escala  la   imagen  (215x153  pixeles)  de  manera  que  quede  en  un  extremo  como  se  ve  en   la  foto.  

     

Por:    José  Carlos  Barceló  

banner  uno  

37  

Diseño  Digital    

3. Cada  capa  de  la  nuestro  archivo  Gimp,  va  a  ser  un  cuadro  de  la  animación,  la   idea  es  que  el  fondo  y  la  imagen  de  la  aleta  trasera  del  automóvil,  aparezcan   durante  todos  lo  cuadros  y  únicamente  cambie  el  texto  que  aparecerá  en  el   espacio  en  blanco,  para  ello  selecciona  la  capa  de  la  imagen  pegada  y  en  el   menú  capas  selecciona  la  opción  combinar  hacia  abajo,  de  esta  manera  ambas   se  integraran  en  una  sola  capa.   4. Ahora  en  la  ventana  de  capas  duplica  ésta  capa,  y  ése  será  nuestro  primer   cuadro.  

capasybanner   5. Escribe  el  texto  Autos  Clásicos,  con  una  letra  cursiva  y  de  estilo  antiguo,  duplica   la  capa  de  texto.   6. Combina  hacia  abajo  la  primera  capa  de  texto  y  la  copia  de  la  imagen  de  fondo.   7. Duplica  de  nuevo  la  imagen  de  fondo,  es  decir  la  que  no  tiene  texto  y  muéve  la   copia  hasta  dejarla  bajo  la  capa  del  texto.  

capas  banner   8. Aplica  el  filtro  de  desenfoque  de  movimiento  a  la  capa  de  texto  con  longitud  de   19  y  ángolo  de  90.  

desenfoque  de  movimiento  

Por:    José  Carlos  Barceló  

38  

DISEÑO   DIGITAL  

Diseño  Digital    

9. Combina  hacia  abajo    esta  capa  de  texto  con  la  segunda  copia  de  al  imagen  de   fondo,  éste  será  nuestro  segundo  cuadro.,  mientras  que  el  tercero  será  la   imagen  de  fondo  limpia  es  decir  sin  ningún  texto.   10. Para  darle  el  tiempo  a  cada  cuadro  en  el  menú  de  capas  haz  clic  sobre  la   primera  y  con  el  botón  derecho  del  ratón  en  el  menú  desplegable  elige  editar   atributos  de  capa  y  escribe  un  nombre  y  entre  paréntesis  la  duración  seguida   de  las  letras  ms.  

editar  atributos  de  capa    Al  primer  cuadro  dale  1500ms,  al  segundo  1200ms  y  al  tercero  2000ms  

 cuadros  con  timing   11. Para  probar  al  animación  ,  v  al  menú  filtros  animación  reproducir  

reproducir  animación   12. Antes  de  salvar  nuestra  animación  debemos  optimizarla,  para  ello    vamos  a   seleccionar  el  menú  filtros,  el  submenú  animación    y  elige  la  opción  optimizar   (para  GIF),acepta  los  valores  predeterminados.     13. Finalmente  en  el  menú  archivo  elige  guardar  como  y  en  el  botón  de  seleccionar   formato  elige  GIF.    

  Por:    José  Carlos  Barceló  

guardar  como  gif  

39  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

Práctica  6   En  ésta  práctica  aprenderemos  a  añadir    efectos  a  una  capa  de    texto  para  darle  una   apariencia  metálica,  utilizaremos  varias  capas  y  distintos  modos  de  fusión  para  lograr   el  efecto.   1. Primero  vamos  a  crear  un  nuevo    archivo  de  500x200  pixeles.   2. Crea  una  nueva  capa    donde  escribirás  el  texto,  usa  un  tipo  de  letra  grueso,  y   una  altura  de  80pix   3. Duplica  la  capa  de  texto  dos  veces  una  para  el  efecto  de  luz  alta,  y  la  otra  para   el  efecto  de  luz  baja,  en  la  ventana  de  capas  selecciona  el  cuadro  bloquear  pon   el  color  frontal  en  blanco  y  arrástralo  sobre  la  capa.  

bloquear  transp     4. Vuelve  a  copiar  la  capa  de  texto  original  y  colócala  sobre  todas  las  demás  y   aplícale  el  filtro  desenfoque  gausiano  a  10  pixeles  .  

Gausiano  aplicado   5. Duplica  la  capa  de    texto  con  efecto  y  mueve  la  capa  duplicada  ligeramente  a  la   derecha  con  las  flechas  del  cursor  en  el  teclado  de  manera  que  el  efecto  se   expanda.  

duplicar  efecto  

Por:    José  Carlos  Barceló  

40  

 

Diseño  Digital  

DISEÑO   DIGITAL  

 

capa  movida     6. Selecciona  en  la  ventana  de  capas    la  capa  que  movimos  en  el  paso  anterior  con   el  botón  derecho  abre  editar  atributos  de  capa  y  en  el  menú  desplegable  elige   alfa  a  selección  y  se  creará  una  selección  precisa  del  texto.  

alfa    a  selección   7. Una  vez  hecha  la  selección,  en  la  ventana  de  capas  selecciona  la  capa  luz  alta   aquella  que  previamente  llenamos  con  blanco  y  córtala  con    el    atajo  de  teclado   Ctrl-­‐X  

selección    En  la  siguiente  imagen  puedes  ver  cómo  queda  la  imagen  para  que  se  aprecie   mejor  ocultamos    las  demás  capas.  

Por:    José  Carlos  Barceló  

41  

Diseño  Digital  

DISEÑO   DIGITAL  

 

 

Luz  alta  recortada   8. Ahora  repite  la  operación  con  l  a  otra  capa  con  efecto  pero  ahora  muévela   ligeramente  a  la  izquierda  y  recorta  la  selección  pero  esta  vez  en  la  capa  de   texto  luz  baja.  A  continuación  te  mostramos  como  se  ve  la  imagen  ocultando   las  capas  de  texto  con  efecto  de  blur.  

texto  con  capas  sin  blur   9. Borra  las  dos  capas  de  texto  con  blur  ya  no  las  vamos  a  requerir,  en    el  archivo   adjunto  de  este  ejercicio  no  las  borraremos  simplemente  las  vamos    a  dejar   ocultas.   10. Crea  una  nueva  capa  y  baja  la  justo  arriba  de  la  capa  de  fondo,  nómbrala  línea   exterior;  selecciona  la  capa  del  texto  original,  y  tal  como  lo  hicimos   anteriormente  crea  una  selección  a  alfa.  Una  vez  hecha  la  selección  ve  al  menú   de  selección  y  elige  la  opción  agrandar  y  aumenta  2  pixeles.  

agrandar  seleccion   11. En  la  ventana  de  capas  selecciona  al  capa  que  nombramos  línea  exterior,  aquí   puedes  observar  como  se  ve  la  selección  ligeramente  más  grande  que  el  texto  

selección  agrandada   Ahora  con  la  herramienta  de  cubeta  de  relleno,  aplícale  con  color  negro  y   aparecerá  un  bisel  negro  en  la  imagen.  

Por:    José  Carlos  Barceló  

42  

Diseño  Digital  

DISEÑO   DIGITAL  

 

 terminado   12. Vamos  a    añadirle  una  sombra  que  le  de  profundidad,  duplica  la  capa  línea   exterior  aplícale    el  filtro  desenfoque  gausiano  a  30  pixeles,  en  la  ventana  de   capas  bájale  la  opacidad  al  50%  

opacidad  50%   Así  es  como  queda  nuestro  logo  terminado  finalmente  sálvalo  como  jpg.  

con  sombra  

Práctica  7   En  ésta  práctica  aprenderás  a  usar  una  poderosa  herramienta  de  Gimp,  las  rutas  mismas  que     utilizaremos  para  crear  un  forma  geométrica  de  apariencia    tridimensional.  Aunque  la  pluma   de  Bezier  con  la  que  se  crean  las  rutas  es  muy  apreciada  por  las  curvas  que  puede  crear,  en   éste  caso  la  usaremos  para  crear  un  cubo.  

1. Primero  crea  un  archivo  nuevo  de  256  x  256  pixeles,  en  modo  de  color  RGB  y   con  fondo  blanco.   2. Crea  una  nueva  capa  trasparente  y  llámala  “lado  izquierdo”,  y  con  la   herramienta  de  rutas   ,  traza  el  primer  lado  del  cubo  tal  como  se  muestra  en   la  imagen.  

Por:    José  Carlos  Barceló  

43  

Diseño  Digital  

DISEÑO   DIGITAL  

 

lado  izquierdo    Para  crear  cada  línea    simplemente  da  un  clic  en  el  punto  inicial  y  otro  en  el   punto  final.,  una  vez  que  termines  el  cuadro  en  la  ventana  de  herramientas,   elige  crear  selección  a  partir  de  ruta.  

crear  selección  a  partir  de  ruta   3. Para  darle  color,  utilizaremos  la  herramienta  de  degradado   ,  poniendo  como   color  frontal  el  blanco  y  como  color  de  fondo  un  azul  obscuro,  traza  el   degradado  desde  la  esquina  superior  izquierda  a  la  esquina  inferior  derecha.  

4. 5. 6. 7. 8.

lado  izq  terminado   Ahora  crea  una  nueva  capa  trasparente  y  traza  en  ella  el  lado  derecho  del  cubo.   Una  vez  trazado  el  segundo  lado,  lo  rellenaras  pero  ahora  el  color  azul  úsalo   como  frontal  y  elige  un  azul  más  obscuro  de  fondo.   Reacomoda  las  capas  para  que  el  lado  derecho  quede  arriba  del  otro  y   reacomódalas  para  no  dejar  un  hueco  entre  ellas.     Crea  una  nueva  capa  para  el  lado  superior,  sigue  el  mismo  procedimiento  de  las   anteriores  pero  ahora  usa  un  azul  más  claro.     Cuando  estés  satisfecho  con  el  resultado  ve  al  menú  imagen    y  selecciona  la   opción  aplanar  imagen  y  todas  las  capas  se  fusionarán  en  una  sola.  

     

Por:    José  Carlos  Barceló  

44  

Diseño  Digital  

DISEÑO   DIGITAL  

 

La  Fotografía   La  principal  función  de  un  software  como  Gimp,  es  la  manipulación  de  archivos  fotográficos,  ya   sea  para  corregir,  retocar  o  crear  un  efecto  visual,  antiguamente  este  tipo  de  manipulación  se   realizaba  por  medio  de  complejos  procesos  ópticos  y  de  revelado.   Aunque  la  tecnología  ha  avanzado  mucho  los  principios  de  la  fotografía    los  principios  físicos  de   la  fotografía  son  en  esencia  los  mismos,  por  ello  dedicaremos  éste  apartado  a  analizarlos.   Etimológicamente  fotografía  significa  escribir  o  dibujar  con  luz  (photo=luz    graphos=  escribir),   es  una  técnica  que  nos  permite  grabar  imágenes  sobre  un  material  sensible;  en  los    inicios  se   usó  papel  foto  sensible,  después  se  utilizó  la  película  fotográfica,  y  en  la  actualidad  las  cámaras   digitales  utilizan  sensores  de  imagen  electrónicos  similares  a  los  que  ,usan  las  cámaras  de   video    y  transforman  los  impulsos  lumínicos  en  código  binario  transformando  las  imágenes  en   archivos  de  computadora  que  se  almacenan  en  una  tarjeta  de  memoria.   A  continuación  te  presentamos  una  línea  de  tiempo  con  los  hitos  más  importantes  en  la   historia  de  la  fotografía.  

  Foto-­‐time  line  para  rehacer  vectorial   Actividad:   Completa  la  línea  de  tiempo  investigando  los  siguientes  sucesos:   1.-­‐Surgimiento    de  la  fotografía  en  color   2.-­‐  Lanzamiento  del  primer  celular  con  cámara  fotográfica   3.-­‐Lanzamiento  de  Gimp   4.-­‐  ¿Cuándo  suspendió  Kodak  la  fabricación  de  cámaras  con  película?   5.-­‐  ¿Cuando  se  creó  el  estándar  cuatro  tercios  para  cámaras  digitales  profesionales?  

La  cámara  fotográfica:    El  antecedente  más  antiguo  de  las  cámaras  fotográficas  son  las  llamadas  cámaras  obscuras   utilizadas  por  los  pintores  del  renacimientos,  que  no  eran  más  que  cajas  negras  con  un   pequeño  orificio  por  donde  entraba  la  luz,  y  una  pantalla    en  la  que  se  proyectaba  la  imagen,   los  pintores  la  usaban  como  guía  para  componer  la  imagen  en  el  cuadro.     Por:    José  Carlos  Barceló  

45  

Diseño  Digital  

DISEÑO   DIGITAL  

 

  Cámara  obscura   En  las  cámaras  digitales  es  en  esencia  el  mismo,  la  imagen  se  refleja  en  un  sensor  de  imagen     (CCD  o  CMO),  se  transforma  en  impulsos  eléctricos    y  posteriormente  en  código  binario,  el   archivo    resultante  se  guarda  en  la  memoria  de  la  cámara.  

  Obtenida  de  http://www.victordiaz.com.mx/academico/archivos.html  © 2010 Derechos reservados por nadie.com Protegido por Todoesdetodos A.C., si deseas tomar algún material de aquí tan solo dale buen uso y sino pásalo a quién si lo pueda hacer =)  

En  la  fotografía  digital,  la  computadora  hace  las  veces  de  cuarto  obscuro,  si  bien  no  hay   necesidad  de  revelar  la  imagen;  en  la  computadora  se  realiza  la  corrección  de  color,  se  corrige   el  encuadre  o  se  super  ponen  elementos  a  la  imagen,  en    éste  apartado  vamos  a  aprender   algunas  de  esas  técnicas.          

Por:    José  Carlos  Barceló  

46  

Diseño  Digital  

DISEÑO   DIGITAL  

 

Práctica  8                                                                                                     Uno  de  los  recursos  más  comunes  en  la  fotografía,  para  fijar  la  atención  sobre  un  objeto,  es  el   enfoque,  al  desenfocar  el  fondo  la  mirada  se  concentra  en  el  sujeto  principal:  Además  el  filtro   desenfoque  puede  añadirle  dinamismo  a  una  fotografía.   En  ésta  práctica,  le  añadiremos  un  desenfoque  de  movimiento,  a  la  fotografía  de  un  automóvil   para  dar  la  ilusión  de  movimiento  y  concentrar  la  atención  en  el  auto  y  no  en  los  elementos   circundantes.   1. Abre    en  Gimp  el  archivo  “mustang  verde”,  a  continuación  sálvalo  en  el  escritorio  con   otro  nombre,  esto  es  muy  importante  hacerlo  ya  que  a  diferencia  de  otros  programas   de  gráficos  Gimp  guarda  los  cambios  en  el  archivo  original,  por  lo  que  siempre  es   recomendable  crear  una  copia  de  seguridad  de  ésta  manera  salvándolo  con  un   nombre  diferente  antes  de  comenzar  a  trabajar.  

abrirmustang  verde  

 

2. Con  la  herramienta  de  rutas   ,  traza  el  contorno  del  automóvil,  incluyendo  las   ruedas,  una  vez  que  lo  hayas  hecho  en  la  ventana  de  herramientas  elige  la  opción   crear  selección  a  partir  de  una  ruta.  

  autoseleccionado   3. En  el  menú  seleccionar  elige  al  opción  invertir,  de  ésta  forma  quedara  seleccionado   todo  lo  que  rodea  al  automóvil.  

  seleccioninvertir   4. En  el  menú  filtros  busca  los  filtros  de  desenfoque  y  elige  desenfoque  de  movimiento   Elige  un  tipo  de  desenfoque  lineal  con  longitud  de  43  y  ángulo  de  o  grados.  

Por:    José  Carlos  Barceló  

47  

Diseño  Digital  

DISEÑO   DIGITAL  

 

  paremetrosdesenfoque   5. Con  la  herramienta  de  selección  libre,  selecciona  una  a  una  las  ruedas  visibles  del   auto  y  aplícales  desenfoque  de  movimiento    del  tipo  radial  con  un  ángulo  de  7  grados   en  la  rueda  delantera  y  3  en  la  trasera.  

  desenfoqueradial   6. Finalmente  guarda  el  archivo  como  auto  en  movimiento  en  formato  jpg.  

 

Terminado    

Práctica  9   Otro  tipo  de  operación  muy  común  en  el  tratamiento  de  fotografías  es  el  virado  a  blanco  y   negro  o  a  color  sepia,  para  lograr  una    apariencia  de  fotografía  antigua.  En  ésta  práctica  vamos   virar  al  sepia  la  fotografía  de  un  auto  clásico.          

Por:    José  Carlos  Barceló  

48  

Diseño  Digital     1.-­‐Abre  en  Gimp  la  fotografía  Ford  1920,  crea  una  copia  de  seguridad  tal  como  lo  hicimos  en  el   tutorial  anterior  

  Abriendo  ford1920   2.-­‐Primero  convierte  la  imagen  en  blanco  y  negro,  esto  se  puede  hacer  de  dos  maneras,  la   primera  usando  el  menú  imagen  en  la  opción  modo  selecciona  escala  de  grises,  la  segunda  en   el    menú  colores  elige  la  opción  desaturar;  en  ambos  casos  deberás  regresar  al  menú  imagen  y   seleccionar  el  modo  RGB  para  poder  añadirle  el  color  sepia  ala  fotografía.  

ajustedecolor   3.-­‐  En  la  ventana  de  herramientas  da  doble  clic  al  color  frontal  y  selecciona  .estos  parámetros     (R)  rojo=162,  (G)  verde  =138  y    (B)  azul=101,  siéntete  libre  de  experimentar  tus  propios  ajustes.   Abre  una  capa  nueva  y  llénala  con  este  color  y  nómbrala  mascara  sepia.  

  Mascarasepia   4.-­‐Haz  clic  con  el  botón  derecho  del  mouse  sobre  el  icono  de  la  capa  y  de  el  menú  desplegable   elige  añadir  máscara  de  capa;  en  el  cuadro  de  dialogo  emergente  selecciona  blanco  opacidad   total;  no  te  extrañe  que  aparentemente  no  pase  nada.  

Por:    José  Carlos  Barceló  

49  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

                           

 

Añadirmascaradecopa                                                          blanco  opacidad  total   5.-­‐  En    la  ventana  de  capas,  selecciona  la  capa  de  fondo,  es  decir  la  foto,  y  con  el  atajo  de   teclado  control+  “A”  selecciona  todo  y  con  el  atajo  de  teclado  control+”C”  cópialo,  en  seguida   haz  clic  sobre  el  pequeño  recuadro  adyacente  a  ala  mascara  de  capa  y  pégalo  con  el  atajo  de   teclado  control+  “V”.    

   

             

                                                                                                                                                         

selecciónflotante                                                                    carrosepia1      

7. Haz  clic  con  el  botón  derecho    sobre  el  icono  de  la  selección  flotante  en  la   ventana  de  capas  y  en  el  menú  deplegable  elige  anclar  capa,  de  ésta  manera  la   máscara  sepia  y  la  selección  se  fusionarán  en  una  sola  capa.          

  Anclar  capa    

Por:    José  Carlos  Barceló  

50  

Diseño  Digital  

DISEÑO   DIGITAL  

 

8. Selecciona  la  capa  que  se  creó,  en  el  menú  colores  elige  invertir,  y  en  el  modo   de  fusión  de  capa  elige  color    

        Carrosepia  2   9. Finalmente  guarda  la  imagen  al  hacerlo  Gimp  te  mostrará  un  cuadro  de  dialogo   que  indica  que  para  guardar  al  imagen  deberá  aplanarla  acepta  esta  opcion.  

              aplanar                                          

   Práctica  10   En  èsta  práctica,  vamos  a  darle  a  una  fotografía  apariencia  de  dibujo  a  lápiz,  para  ello   utilizaremos  una  fotografía  blanco  y  negro  .  

1. Vamos  a  abrir  con  Gimp  la  imagen  “yobb”,  y  como  lo  hemos  estado  haciendo   crear  una  copia  de  seguridad.   2. Vamos  a  crear  una  imagen  de  alto  contraste,  es  decir  donde  se  pierdan  los   gradientes  y  se  conserven  los  detalles,  para  ello  vamos  a  copiar  la  capa  de   imagen.   3. A  la  capa  copiada,  se  le  aplicará  un  filtro  de  desenfoque  gaussiano  a  siete   pixeles.  

Por:    José  Carlos  Barceló  

51  

Diseño  Digital  

DISEÑO   DIGITAL  

 

bbdesenfoque   Gausianoabb   4. En  el  menú  colores  seleccionamos  la  opción  invertir  de3  manera  que  los  colores   se  inviertan,  y  disminuiremos  la  opacidad  de  la  capa  al  50%.  

bbinverso          

bbal50%  

5. Acopláremos  ambas  capas  dando  clic  con  el  botón  derecho  en  la  capa  superior   y  seleccionando  del  menú  desplegable  la  opción  de  combinar  hacia  abajo.  

bbcombinahaciabajo   6. Con  el  el  menú  niveles  ajusta  los  niveles  de  salida  tal  como  se  indica  en  la   imagen  

Por:    José  Carlos  Barceló  

52  

Diseño  Digital  

DISEÑO   DIGITAL  

 

bbniveles

bbnivelado  

7. Por  medio  del  menú  colores  vamos  a  desaturar  la  imagen,  una  vez  realizada  la   operación  vamos  a  ajustar  los  niveles  nuevamente.  

nivelesbb2

bbnivelado2  

8. Finalmente  utilizando  el  pincel  retocaremos  algunos  detalles  para  que  nuestra   imagen  se  vea  mejor,  cuando  salves  la  imagen  gimp  te  pedirá  guardarla  como   jpg.  

Práctica  11   Quizás  una  de  las  funciones  más  populares  de  los  programas  de  edición  de  imágenes  como   Gimp    es  la  realización  de  fotomontajes,  en  ésta  práctica,  realizaremos  un  fotomontaje  muy   sencillo,  para  crear  un  efecto  de  reflejo.     Para  ello  utilizaremos  una  foto  libre  de  derechos  del  monte  Shasta,  de  California  en  los  Estados   Unidos.  Tú  también  puedes  obtener  cientos  de  fotografías  libres  de  derechos  en  flikr.com,   buscando  fotos  con  licencias  creative  commons.   Por:    José  Carlos  Barceló  

53  

Diseño  Digital  

DISEÑO   DIGITAL  

 

    derechios  foto  montaña  

1. Como  ya  lo  hemos  hecho  en  otras  prácticas,  abre  el  archivo  “montaña”  y  crea   una  copia  de  seguridad.   2. El  objetivo  es  crear  un  fotomontaje  de  manera  que  parezca  que  la  imagen  de  la   montaña  se  está  reflejando  en  el  lago,  para  ello  vamos  a  duplicar  la  capa  con  la   imagen.   3. Con  la  herramienta  rotar, quede  de  cabeza.  

 voltearemos  la  imagen  180  grados  hasta  que  

  De  cabeza   4. Utilizando  la  herramienta  de  selección  rectangular,  cortaremos  en  ésta  imagen   el  espacio  del  lago  y  la  arena,  posteriormente  con  la  herramienta  mover  baja   esta  capa  hasta  que  semeje  un  reflejo  de  la  imagen  de  fondo.  

Reflejo1     Por:    José  Carlos  Barceló  

 

54  

Diseño  Digital  

DISEÑO   DIGITAL  

 

5. Si  observas  la  imagen  del  reflejo  no  corresponde  con  la  de  arriba,  con  la   herramienta  volteo horizontalmente.  

damos  clic  en  la  imagen    ésta  se  volteará  

  volteo  horizontal   6. Para  simular  que  la  imagen  se  está  reflejando  en  un  lago,  vamos  a  añadirle  un   filtro  de  distorsión    y  en  las  opciones  elige  onda,  aplícalo  con  los  parámetros   que  se  muestran  en  la  imagen.  

filtroondas   7. Baja  la  opacidad  de  la  capa  de  re3flejo  al  80%  

      Por:    José  Carlos  Barceló  

opacidad  montaña  

55  

Diseño  Digital  

DISEÑO   DIGITAL  

 

 

montañaterminada  

Práctica  12   En  esta  práctica  realizaremos  el  primero  de  varios  fotomontajes,  es  éste  ejercicio  vamos  a   crear  una  forma  decorativa  a  partir  de  la  fotografía  de    la  hoja  de  un  árbol.  

1. Primero  abre  en  GIMP  el  archivo    hoja  1,  a  continuación,  selecciona  con  la   herramienta  de  selección  rectangular,  una  de  las  3  hojas  cópiala  y  pégala  en   una  capa  nueva.  

abre  hoja1   2. Una  vez  hecho  esto  oculta  la  capa  de  fondo  y  con  la  herramienta  de  selección      difusa  selecciona  el  contorno  blanco  de  la  hoja  y  bórralo  para  que  quede   tan  solo  la  hoja.  

 contorno  hoja   3. Copia  la  capa  tres  veces  y  utilizando  las  herramientas  de  rotación  acomoda  las   hojas  de  manera  que  semejen  un  abanico.  

abanico  hoja   4. Con  el  botón  derecho  del  ratón  a  continuación  acopla  las  tres  capas  en  una   sola.   Por:    José  Carlos  Barceló  

56  

Diseño  Digital  

DISEÑO   DIGITAL  

 

combinar  hacia  abajo   5. Con  la  herramienta  escalar  

,  reduce  el  tamaño  de  las  hojas  acopladas  al  

50%,  y  después    duplica  la  capa  y  con  la  herramienta  rotar  ,  rótala  90  de   manera  que  se  forme  un  semi  circulo  con  las  hojas  de  la  capa  anterior.  

semicirculo   6. Continúa  duplicando    las  capas  y  acoplándolas  hasta  formar  en  especie  de   corona  de  hojas  como  las  que  se  usan  para  la  decoración  navideña.  

corona  completa   7. En  el  menú  colores  elige    tono  y  saturación  y  ajusta  lo  con  los  siguientes   parámetros.  Tono  6,  Luminosidad  -­‐68  y  Saturación  11.  

Por:    José  Carlos  Barceló  

57  

Diseño  Digital  

DISEÑO   DIGITAL  

 

tono  saturación  

Práctica  13     En  esta  práctica  vamos  a  crear  una  felicitación  navideña  integrando  varias  imágenes,   entre  otras  la  corona  de  hojas  que  acabamos  de  crear  en  la  práctica  anterior.  En  primer  lugar   vamos  a  crear  una  esfera  con  una  fotografía  dentro.  

1. Primeramente  vamos  a  abrir    en  GIMP  la  imagen  titulada  “santas”.  

santas  abierto   2. Crea  una  capa  nueva  y  con  la  herramienta  de  selección  circular  traza  un  círculo   sobre  la  imagen  y  rellénalo  con  color  rojo.  

esfera  roja   3. Crea  una  capa  nueva  y  con  el  pincel  en  color  negro  traza  una  sombrea  en  el   contorno  de  la  esfera.  

Por:    José  Carlos  Barceló  

58  

Diseño  Digital  

DISEÑO   DIGITAL  

 

esfera  con  sombra   4. En  el  menú  filtros  busca  en  los  filtros  de  desenfoque  el  desenfoque  gausiano  y   aplícalo  con  un  rango  de  28  pixeles,  después  combina  esta  capa  con  la  de  abajo,   es  decir  la  esfera  roja.  

desenfoque  gausiano   5. En  una  nueva  capa,  traza  ahora  un  contorno  blanco    para  que  simule  el  brillo  de   nuestra  esfera,  del  mismo  modo  aplícale  desenfoque  gausiano  pero  esta  vez  a   35  pixeles,  de  ésta  manera  nuestra  esfera  adquiere  volumen,  combina  hacia   abajo  esta  capa  de  brillo  con  la  esfera  roja.  

 esfera  3d   6. Ahora  vamos  a  simular  que  la  fotografía  está  dentro  de  la  esfera,  para  ello   selecciona  la  capa  de  la  imagen  y  oculta  las  demás,  en  el  menú  seleccionar  elige   invertir  selección  y  con  el  menú  edición  elige  borrar,  de  esta  forma   desaparecerán  todos  los  elementos  de  la  fotografía  que  no  caben  en  la  esfera.  

invertir  selección   Por:    José  Carlos  Barceló  

59  

Diseño  Digital  

DISEÑO   DIGITAL  

 

selección  circular   7. En  la  ventana  de  capas  coloca  la  capa  de  fotografía  sobre  la  esfera,  aplícale  el   modo  de  fusión  “combinar  granulado”,  y  baja  la  opacidad  al  75%  ,  ahora  parece   que  la  foto  está  dentro  de  la  esfera.  

combinar  capas   8. Para  reforzar  la  ilusión  sobre  la  capa  de  la  fotografía  aplicaremos  un  filtro  de   distorsión  llamado  distorsión  de  lente  con  los  siguientes  parámetros:  principal   1.163,  borde  6.997,  Ampliación  17.442,  Aclarar  -­‐6.977,  Desplazamiento  en  X  -­‐ 15.116    y    Desplazamiento  en  Y  37.209.  De  ésta  forma  la  imagen  se   distorcionará  como  si  se  reflejase  en  la  esfera.  

distorsión  de  lente   9. Acopla  las  capas  y  salva  la  imagen  en  formato  png  

Por:    José  Carlos  Barceló  

60  

Diseño  Digital  

DISEÑO   DIGITAL  

 

 esfera  con  imagen   10. Abre  el  archivo  de  la  corona  de  flores  creada  en  la  práctica  12,  abre  la  imagen   PNG  de  la  esfera  cópiala  y  pégala  en  una  capa  NUEVA  el  archivo  de  la  corona  de   flores,  una  diferencia  importante  de  GIMP  con  otros  programas  de  gráficos  es   que  al  copiar  un  objeto,  este  se  copia  como  selección  flotante  por  lo  que  es   necesario  usar  el  botón  derecho  del  mouse  y  en  la  ventana  de  capas  sobre  el   recuadro  que  dice  selección  flotante  elegir  la  opción  anclar  capa  de  manera  que   el  objeto  se  fije  en  la  capa  nueva.  

anclar  capa   11. Con  la  herramienta  escalar  reduce  la  esfera  de  manera  que  quepa  en  el  centro   de  la  corona  de  flores,  y  en  la  ventana  reacomódalas  de  manera  que  la  corona   quede  sobre  la  esfera.  

corona+esfera   12. Crea  una  capa  nueva  llena  la  con  un  patrón  de  mármol  para  eelo  en  las   opciones  de  la  herramienta  cubeta  de  relleno  elige  llenar  con  patrón  y  en  la   ventana  de  patrones  elige  el  que  te  guste  

Por:    José  Carlos  Barceló  

61  

Diseño  Digital  

DISEÑO   DIGITAL  

 

 rellenar  con  patron

patrones  

 

 composición  con  fondo   13. El  toque  final  será  añadir  un  letrero  de  felicidades  con  un  efecto  que  crearemos   en  un  archivo  nuevo  aplicando  un  script  fu,  que  es  una  especie  de  macro  pre   programado  para  crear  efectos.   14. Abrimos  un  archivo  nuevo  trasparente  de  640x480  pixeles  y  con  un  tipo  de   letra  grueso  escribe  el  texto  felicidades  con  un  tamaño  superior  a  los  100   puntos,  para  el  ejemplo  usamos  letra  tipo  Segoe  UI  Bold  Italic  de  106  puntos.   15. En  el  menú  filtros  busca  en  el  submenú  alfa  a  logotipos  la  opción  cromar,  el   efecto  se  aplicará  automáticamente  tan  solo  te  pedirá  elegir  un  color  de  fondo.  

felicidades   16. Usando  el  botón  derecho  combina  hacia  abajo  las  dos  primeras  capas,  y  copia   esta  imagen.   17. Pégala  en  el  archivo  dónde  estás  creando  la  tarjeta,  recuerda  que  se  añadirá   como  selección  flotante  y  en  la  ventana  de  capas  deberás  usar  la  opción  anclar   capa  como  lo  hicimos  anteriormente  en  esta  práctica.  

Práctica  14   1. En  esta  práctica  vamos  a  simular  un  marco    de  madera  para  una  fotografía,   para  ello    vamos  a  abrir  el  archivo  casa  faro.  

Por:    José  Carlos  Barceló  

62  

Diseño  Digital  

DISEÑO   DIGITAL  

 

abre  casa  faro   NOTA  PARA  EDUCARE  ESTA  FOTO  ES  DEL  LIBRO  DE  PHOTOSHOP  QUE  USTEDES   PUBLICARON   2. Abre  una  capa  nueva  y  con  la  herramienta  de  selección  rectangular  traza  el     extremo  izquierdo  del  marco,  utilizando  el  menú  edición  rellena  el  rectángulo   con  un  patrón  tipo  madera  clara.  

rellenar  con  patron

con  un  lado   3. Abre  una  nueva  capa,  traza  un  rectángulo  más  delgado    y  rellena  con  un  patrón   de  madera  más  obscuro  para  simular  un  desnivel  en  el  marco  lateral  y  darle   más    volumen.  

Por:    José  Carlos  Barceló  

63  

Diseño  Digital  

DISEÑO   DIGITAL  

 

con  borde     4. Copia    esta  capa  y  coloca  un  segundo  borde  obscuro  al  centro  del  rectángulo  de   color  claro  y  combina  hacia  abajo  las  tres  capas  para  que  los  elementos  de  el   marco  queden  todos  agrupados  en  una  sola  capa.  

con  borde  doble   5. Duplica  la  capa  del  marco  con  sus  bordes  y  con  la  herramienta  rotar  gírala  de   manera  que  forme  un  ángulo  de  90  grados  para  formar  el  extremo  superior  del   marco.  

angulo  recto   6. Con  la  herramienta  de  selección  rectangular    traza  un  pequeño  cuadrito  en  el   ángulo  formado  por  los  dos  segmentos  del  marco  y  borra  un  segmento  del   marco  de  manera  que    los  bordes    obscuros  coincidan  formando  ángulos   rectos.  

Por:    José  Carlos  Barceló  

64  

Diseño  Digital  

DISEÑO   DIGITAL  

 

angulo  cuadrito  

angulo  completo   7. Combina  hacia  abajo  los  dos  extremos  en  una  sola  capa  y  duplícala  con  la   herramienta  rotar  gírala  para  completar  el  marco,  te  aconsejamos  disminuir  el   zoom  de  la  imagen  al  25%  para  que  puedas  observar  el  movimiento  del  marco   fuera  de  los  contornos  de  la  imagen.  

           

Por:    José  Carlos  Barceló  

marco  completo  

65  

Diseño  Digital    

8. Como  se  aprecia  en  la  imagen,    los  extremos  donde  se    empalman  ambas  capas   los  bordes  obscuros  e  la  imagen  no  coinciden  con  la  herramienta  de  goma   borra  partes  de  la  imagen  hasta  hacerlos  coincidir.  

marco  corregido   9. Acopla  ambas  capas  y  crea  una  copia  con  el  menú  colores  y  el  ajuste  de  brillo  y   contraste  reduce  el  brillo  al  mínimo  y  el  contraste  al  máximo,  hazlo  dos  veces   para  que  la  copia  del  marco  se  vuelva  totalmente  negra.  

marco  negro   10. Aplica  al  filtro  de  desenfoque  gausiano  a  31%.  

Por:    José  Carlos  Barceló  

66  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

gausiano  al  31   11. Con  la  herramienta  escalar  reduce  un  poco  el  tamaño  del  marco  negro  y  en  la   ventana  de  capas  colócalo  bajo  el  marco  de  madera  para  que  haga  el  efecto  de   sombra  entre  la  foto  y  el  marco.  

marco  con  sombra  

Practica  15   1. En  ésta  práctica  vamos  a  crear  un  marco  creativo  no  convencional  para  una   fotografía,  primero  vamos  a  crear  un  matte,  toma  una  hoja    blanca  de  papel  y   con  una  brocha  de  cerdas  gruesas  haz  varios  trazos,  cuando  seque  la  tinta   escanea  la  hoja  y  guárdala  con  el  nombre  de  matte.  También  puedes  usar  la   imagen  que  aquí  te  proporcionamos.  

matte     Por:    José  Carlos  Barceló  

67  

Diseño  Digital  

DISEÑO   DIGITAL  

 

2. Abre  en  GIMP  la  imagen    titulada  Barcelona.  

abrebarcelona     3. En  el  menú  archivo,  encontrarás  una  opción  que  dice  abrir  como  capas,  de  ésta   manera  vamos  a  abrir  la  imagen  titulada  matte;  si  usas  al  imagen  que  te   proporcionamos    ya  está  dimensionada  al  tamaño  de  la  fotografía,  si  usas  tu   propia  creación  deberás  adecuarla  al  tamaño  con  la  herramienta  escalar.  

abrir  comocapas   4. Con  la  herramienta  de  selección  difusa ,  selecciona  la  parte  obscura  de  la   imagen,  crea  una  capa  nueva  e  invierte  la  selección  con  el  menú  selección,   invertir;  usando  el  menú  editar  rellena  la  selección  con  el  color  de  fondo  es   decir  el  blanco  y  oculta  la  capa  de  matte.  

 relleno  blanco       5. Al  igual  que  lo  hicimos  con  el  marco  anterior,  vamos  a  crear  una  sombra  para   darle  profundidad  al  marco,  copiando  la  capa  donde  pusimos  el  relleno  de  color   Por:    José  Carlos  Barceló  

68  

Diseño  Digital  

DISEÑO   DIGITAL  

 

blanco  y  por  medio  de  los  ajustes  de  brillo  y  contraste  del  menú  colores   convertiremos  la  copia  al  color  negro.  

sombra  previa   6. Aplícale  un  filtro  de  desenfoque  gausiano  con  una  intensidad  de  19  pixeles  

desenfoque  bal  19     7.  Re  dimensiona  la  sombra  con  la  herramienta  escalar  y  cambia  el  orden  de  las   capas  de  manera  que  la  capa  de  sombra  negra  quede  debajo  de  la  capa  con  el   marco  blanco.  

    8. Finalmente  con  la  herramienta  mover  mueve  la  capa  de  fondo  hacia  debajo  de   manera  que  se  aprecie    la  cúpula  del  edificio.  

terminado   Por:    José  Carlos  Barceló  

69  

Diseño  Digital  

DISEÑO   DIGITAL  

 

Práctica  16   12. Una  de  las  tareas  más  comunes  en  la  e3dición  electrónica  de  fotografías,  es  

cambiar  el  fondo  de  una  fotografía,  cosa  que  aprenderemos  a  hacer  en  ésta   práctica,  para  ello  abr4e  en  gimp  el  archivo  titulado  Frida  y  yo.   13. Lo  primero  que  haremos  crear  un  duplicado  de  la  capa  de  imagen  y   posteriormente  crearemos  una  máscara.   14. Con  la  herramienta  de  selección  libre

 (lazo)  traza  el  contorno  de  la  imagen.  

selección  libre   15. Invierte  la  selección  y  rellénala  con  el  color  de  fondo  (negro).  

relleno  negro   16. Para  que  nuestra  mascara  sea  eficaz  deberemos  añadir  a  la  selección  esos  espacios,   ente  la  mano  y  el  cuerpo  así  como  entre  las  dos  personas  ,  así  como  invertir  el  color   del  pantalón  para  que  éste  se  separe  del  color  negro  del  fondo.   17. Para  ello  con  la  herramienta  de  selección  difusa  (varita  mágica)    selecciona  el   pantalón,  en  un  primer  momento  no  se  seleccionará  todo  el  pantalón  así  que  oprime     la  tecla    (shift)  y  vuelve  a  seleccionar,  ten  cuidado  que  la  selección  no  se  extienda   sobre  el  área  negra  de  nuestra  imagen    y  con  el  menú  colores  elige  invertir,  después   perfeccionaremos  la  selección.  

pantalón      

Por:    José  Carlos  Barceló  

70  

Diseño  Digital  

DISEÑO   DIGITAL  

  18. Ahora  con  la  herramienta  lazo  traza  las  áreas  entre  la  mano  y  el  cuerpo  así  como   entre  las  dos  personas  y  llénalas  de  color  negro.  

 huecos   19. Asegurate  de  que  no  extista  ninguna  selección  activa  en  la  imagen,  en  ese  caso  ve  al   menú  selección  y  elige  nada;  ahora  haz  clic  derecho  sobre  la  imagen  y  escoge  en  el   menú  contextual  colores,  ajustes,  umbral;  y  ajústalo  de  manera  que  las  partes   correspondientes  a  la  imagen  sean  blancas  y  el  fondo  negro.  

 umbral   20. Ahora  valiéndote  de  las  herramientas  de  selección    de  lazo  y  de  relleno  así  como  de  los   pinceles  ajusta  la  máscara  de  forma  que  ajuste  lo  más  posible  a  la  imagen.  para  mayor   precisión  ajusta  el  zoom  de  la  imagen  de  manera  que  puedas  observar  CLARAMENTE.  

ajustada   21. Ahora  con  la  herramienta  de  pincel  pinta  al  imagen  de  blanco  

mascara  terminada   Por:    José  Carlos  Barceló  

71  

Diseño  Digital  

DISEÑO   DIGITAL  

  22. Aplícale  un  ligero  desenfoque  gausiano  de  5  pixeles  y  luego  invierte  el  color  de  la   imagen.  

 invertida   23. Nombra  la  capa  matte  haciendo  clic  sobre  ella  con  el  botón  derecho  y  elige  editar   atributos  de  capa.   24. Crea  una  capa  nueva  nómbrala  máscara  y  haz  clic  con  el  botón  derecho  sobre  ella   desde  la  ventana  de  capas  y  elige  crear  máscara  de  capa  en  las  opciones  del  cuadro  de   dialogo  selecciona  blanco  opacidad  total.  

añadirmásdalog  

añadir  mascara   25. Copia  la  imagen  de  matte  y  pégala  en  la  capa  de  máscara,  se  creará  una  selección   flotante  sobre  la  capa  de  máscara.  

sel  flotante        

Por:    José  Carlos  Barceló  

72  

Diseño  Digital  

DISEÑO   DIGITAL  

  26. Con  el  botón  del  mouse  sobre  el  icono  de  selección  flotante  elige  la  opción  anclare  a   capa  y  el  recuadro  de  mascara  de  capa  aparecerá  lleno  con  la  imagen  aunque  no  se   verá  ningún  cambio  en  la  imagen.  

anclar  a  capa   27. Con  el  botón  derecho  selecciona  eliminar  el  canal  alfa,  sobre  la  capa  de  máscara  en  la   ventana  de  capas  y  de  ésta  manera  se  ocultará  el  fondo  de  la  imagen  y  en  su  lugar  se   verá  el  color  blanco.  

eliminar  alfa  

alfaeliminado   28. Crea  una  capa  nueva  y  con  la  herramienta  gradiente,  llénala,  utiliza  la  opción  de   gradiente  radial  y  elige  como  color  frontal  un  azul  claro  y  como  color  de  fondo  el   blanco.  

gradiente  radial  

Por:    José  Carlos  Barceló  

73  

Diseño  Digital     29. Selecciona  el  contenido  de  la  capa  nuevo  fondo  y  cópialo,  envía  esta  capa  hasta  debajo   de  todas  pues  ya  no  la  requeriremos  más,  ahora  en  la  capa  de  máscara  selecciona  el   recuadro  en  blanco  y  pega  la  imagen    de  fondo,  ésta  se  pegará  como  selección  flotante   y  deberás  anclar  la  capa,  de  ésta  forma  el  nuevo  fondo  rellenara  el  espacio  en  blanco.  

pegar  fondo fondo  pegado   30. Copia  la  capa  de  máscara  y  renómbrala  como  nubes,  selecciona  el  recuadro  principal  y   aplícale  el  filtro  de  renderizado  nubes  de  diferencia,  después  en  la  ventana  de  capas   elige  el  modo  de  fusión  solapar.   nubes  de  diferencia  

solapar  

terminado  fondo   31. Finalmente  salva  la  imagen  en  formato  JPG  y  guarda  como  archivo  de  gimp  el  ejercicio   seleccionando  al  extensión  xcf.    

Por:    José  Carlos  Barceló  

74  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

Practica  17   1. Uno  de  los  efectos  más  solicitados  en  los  estudios  fotográficos  es  el  eliminar   objetos  y  o  personas  indeseables  en  una  toma.  Para  ésta  práctica  vamos  a  abrir   en  Gimp  la  imagen  titulada  indeseable,  la  persona  a  eliminar  en  éste  caso  es  la   que  aparece  señalada  con  una  flecha  roja.  

objetivo  a  eliminar   2. Lo  primero    que  vamos  a  hacer  es  crear  una  copia  de  la  imagen  original  y  con  la   herramienta  de  selección  rectangular  seleccionaremos    a  las  dos  chicas  del   extremo  izquierdo,  y  la  pegaremos  en  una  nueva  capa.  

seleccionadas.   Observa  que  los  bordes  de  la  selección  respetan  al  100%  la  figura  de  las  dos   chicas.   IMPORTANTE:  Recuerda  que  para  crear  una  capa  nueva  con  la  imagen   copiada  no  basta    crean  una  capa  y  pegarla  debes  anclar  la  imagen  ala   capa   3. Con  la  herramienta  mover   ,  coloca  la  imagen  de  las  chicas  sobre  el   personaje  que  queremos  suprimir  en  la  capa  de  abajo.  

Por:    José  Carlos  Barceló  

75  

Diseño  Digital  

DISEÑO   DIGITAL  

 

sobre  personaje   Como  ves  al  cortar  a  este  personaje  la  fotografía  se  hará  más  pequeña  y   posteriormente  deberemos  re-­‐encuadrarla.   4. Pon  el  zoom  al  200%    y  con  la  herramienta  borrar   del  personaje  en  la  fotografía.  

ve  eliminando  los  restos  

borrar  al200%   5. Las  ramas  del  árbol  de  atrás  ahora  se  ven  cortadas,  para  ello  vamos  a  utilizar  la   herramienta  de  selección  lazo  y  copiaremos  un  segmento  del  árbol  de  la   foto  original  y  lo  pegaremos  en  una  nueva  capa.  

arbol  

  6. Reacomoda  las  capas  de  modo  que  el  árbol  quede  colocado  sobre  la  capa  de   fondo  y  bajo  la  capa  de  las  chicas  y  muévelo  hasta  que  las  ramas  se  vean   completas.  

Por:    José  Carlos  Barceló  

76  

Diseño  Digital  

DISEÑO   DIGITAL  

 

acomoda  capas   7. Acopla  las  tres  capas  utilizando  el  comando  combinar  hacía  abajo.   8. Con  la  herramienta  de  recorte  navaja  vamos  a  re-­‐encudrar  la  fotografía   simplemente  trazando  un  rectángulo  sobre  el  área  que  queremos  conservar  de   esta  forma  desaparecerá  la  parte  duplicada  de  la  imagen  de  abajo.  

 

Terminado  

Práctica  18   1. En  ésta  práctica  aprenderemos  a  retocar  retratos,  aunque  no  utilizaremos  la   fotografía  de  un  ser  humano,  sino  la  de  un  perro.  Abre  en  gimp  el  archivo   llamado  perro.   2. Crea  una  copia  de  la  capa  y  aplícale  desenfoque  gausiano  con  intensidad  de  60   pixeles.    

 antes

Por:    José  Carlos  Barceló  

después  

77  

Diseño  Digital  

DISEÑO   DIGITAL  

 

ajuste  de  filtro   3. En  la  ventana  de  ajuste  de  capas  elige  el  modo  de  fusión  pantalla.  

modo  pantalla

pantalla  aplicado   4. Con  el  botón  derecho  del  ratón  añade  una  máscara  de  capa  y  elige  la  opción   blanco  opacidad  total.  

añade  MASCARA  DE  CAPA  

blanco  opacidad  total   Por:    José  Carlos  Barceló  

78  

Diseño  Digital    

5. Elige  como  color  frontal  el  gris,  y  la  opción  de  pincel  galaxi,  big,  con  un  tamaño   de  0.18.  

ajustes  de  pincel opciones  pincel   6. Pinta  los  ojos  y  la  nariz  del  perro,  al  utilizar  un  color  gris,  se  ocultara   parcialmente  el  efecto  de  la  capa  de  abajo.  Y  se  apreciarán  de  manera  más   nítida.  

ojos  pintados   7. Crea  una  capa  nueva  y  rellénala  de  color  negro  y  con  la  herramienta  de   selección  circular  corta  un  circulo  que  enmarque  el  cuadro.  

circulo  negro   8. Corta  el  circulo  y  aplícale  desenfoque    gausiano  de  60  pixeles  y  baje  la  opacidad   de  la  capa  al  66%.  

Recortado   Por:    José  Carlos  Barceló  

   

 y  con  marco  negro  

 

79  

DISEÑO   DIGITAL  

Diseño  Digital  

DISEÑO   DIGITAL  

 

   

     

Por:    José  Carlos  Barceló  

80