Tutorial de Gimp para efectos en Web

Si eres diseñador, webmaster, un blogger como yo o incluso solo un usuario al que le gusta retocar sus fotografias, este tutorial tal vez te puede interesar. Aqui comento alguno de los efectos que le doy a las imagenes que cuelgo en este sitio. Retocando tus imagenes consigues que luzcan mas y esteticamente quedan mejor en tus articulos. Pero bien, empecemos…Uno de los efectos que mas me gustan es el Reflejo aqui os copio uno de los mejores tutoriales que me encontrado en la red:

EFECTO REFLEJO

Seguro que desde hace no mucho tiempo has empezado a ver como se han popularizado logos y headers de páginas web que presentan efectos como el que se encuentra en esta imagen:

Este acabado se consigue mediante la aplicación de un efecto que podríamos denominar “espejo + degradado”, ya que consiste básicamente en aplicar el efecto espejo a la imagen original y realizar un degradado sobre la imagen reflejada para que la intensidad de ésta sea menor.

Como seguro que has podido ver en multitud de webs, es una técnica bastante extendida y que siempre viene bien conocer.

Por ello, aquí te presento los pasos básicos, como siempre con Gimp, para que puedas conseguir este acabado sorprendente en aquellos logos o rótulos que lo desees:

1. Abre la imagen original con Gimp, en mi caso he optado por la mascota de Linux, Tux:

   

2. Incrementa el tamaño del lienzo para que al aplicar el efecto pueda verse la imagen entera (Imagen -> Tamaño del lienzo…). Las dimensiones más adecuadas para la ampliación será mantener el ancho y duplicar el alto, pero todo depende de a qué distancia desees colocar la imagen reflejada. Ten en cuenta que al modificar las dimensiones del lienzo debes quitar el bloqueo de relación de aspecto (icono en forma de “ocho” que está a la derecha de los campos de introducción de la dimensión), para poder modificar el alto, sin que ello influya en el ancho.

   

3. Una vez ampliado el lienzo, accede al diálogo de capas, duplica la capa existente (Capa -> Duplicar la capa)y gírala verticalmente (Capa -> Transformar -> Voltear verticalmente).

   

4. Selecciona la herramienta Mover capas y selecciones en la ventana principal de Gimp y desplaza la capa duplicada hacia abajo para conseguir el efecto espejo. Para desplazar la capa emplea los cursores y así podrás colocar la capa con precisión.

   

   Hasta aquí has aplicado lo que podríamos denominar “efecto espejo”, pero si continúas con los siguientes pasos verás como la aplicación de un degradado le proporciona un efecto mucho más atractivo a tu imagen.

5. Para aplicar el degradado crea una máscara de capa blanca sobre la capa que tiene la imagen invertida (Capa -> Máscara -> Añadir máscara de capa… -> blanca (opacidad total)).
6. Selecciona la herramienta Degradado con el negro como color de frente y el blanco como color de fondo y despliega el degradado desde la cabeza del pingüino hasta la base (por supuesto, estoy hablando de la imagen reflejada, ya que la original permanece intacta a lo largo de todo el efecto).

   

   La herramienta Degradado se utiliza haciendo click en la zona origen desde la que desees aplicar el degradado y arrastrando el ratón hasta la zona destino. En este caso, cuanto más agresivo desees que sea el degradado más larga deberás hacer la línea mediante la que se establece el degradado. Haz varias pruebas y deshaz tantas veces como sea necesario hasta que obtengas el resultado que deseas.

7. Una vez establecido el degradado, es el momento de que ajustes la opacidad de la capa de máscara para que el nivel de intensidad de la imagen reflejada sea el adecuado. Para ello accede al diálogo de Capas (Diálogos -> Capas) y establece el nivel de opacidad de la capa al valor que desees (yo he optado por 40).

   

8. En este punto ya podría considerarse el efecto terminado, sin embargo, la aplicación de un cierto desenfoque sobre la imagen reflejada le aporta un toque muy atractivo. Para ello aplícale un filtro de desenfoque gausiano (Filtros -> Desenfoque [Blur] -> Desenfoque gausiano… [Blur]) eligiendo el grado de desenfoque que consideres más apropiado, yo he optado por 20 px.

   

Y con esto ya habrías aplicado a tu imagen el efecto “espejo + degradado”. Este efecto es bastante útil, no sólo por el acabado que ofrece (incluso no aplicando todos los pasos, ya que podrías no haber aplicado el desenfoque o ni siquiera haber modificado el nivel de opacidad y haberte quedado satisfecho con el resultado alcanzado), sino por el uso de herramientas muy importantes como el Degradado o la aplicación de una Máscara de capa, herramientas que muy probablemente empiecen, si no lo eran ya, a ser utilizadas por ti en otros trabajitos.

Y nada más, ahora te toca a ti aplicar el efecto a tus imágenes, iconos, logos, rótulos…

Otro efecto que suelo usar mucho es el de:

BORDES REDONDEADOS

Este es muy sencillo de aplicar. Primero cargas en Gimp la imagen sobre la que quieres aplicar el efecto.

Entonces desde el menu seleccionamos: Script-Fu > Decoracion > Esquinas redondeadas

Yo suelo dejar un radio de borde de tamaño 1:

Y tras aplicar el efecto, aqui el resultado:

(mejora su presentacion, con respecto a la primera imagen, ¿no crees?)

SOMBRAS EN TEXTOS

Otro efecto que no queda muy mal si queremos aplicar textos a una imagen son las Sombras. Si te fijas en el Logo de ubuntu life en el header de esta pagina web podras comprobarlo.

Tambien es muy sencillo de aplicar, con la herramienta texto (icono con una “T”) escribes el texto que quieres (puedes seleccionar el color y fuente de texto que quieras) y despues con el texto seleccionado usas la opcion de menu: Script-fu > Sombra.

Se presentan 3 opciones:

- Efecto Xach. Sombra difuminada.

- Perspectiva. Te aplica una sombra la fuente de texto. Puedes cambiar el angulo de la misma.

- Sombra base. Otro tipo de sombra difuminada.

Ejemplo de aplicarlos:

(Perdon por poner Sach en lugar de Xach pero ya tenia la imagen generada y la deje asi)

Y para terminar unos enlaces sobre otros efectos que me han gustado:

En la web de Roxana (excelente sitio) me encuentro un muy buen tutorial de efectos con Gimp:

• Texto Mac: Creación de Texto estilo MAC.
• Efecto de Rayos: Realizando rayos con distintas formas.
• Sombra arrojada: Efecto de sombra en objetos y textos.
• Textura en textos: Aplicando texturas personalizadas a nuestros textos.
• Esquinas redondeadas: Cómo realizar esquinas redondeadas.
• Efecto TV: Aplicando efecto de TV en fotos.
• Brochas: Aprendiendo a crear brochas comúnes y dinámicas
• Reflexion: Creando texto con apariencia reflectante.
• Metal: Como hacer textos con apariencia de metal.
• QuickMask: Utilizando Quickmask para efectos en fotos.
• Iconos: Creando iconos para nuestras aplicaciones favoritas.
• Cold: Efecto de frío en textos.
• Rayo: Creando rayos.

Y tambien me han gustado estos dos que me he encontrado en Instalaches:

EFECTO 3D EN FOTOGRAFIA

En este artículo pretendo mostrar una técnica que te permitirá aplicar efectos 3D a tus fotografías, por supuesto, con Gimp. Aunque es fácil aplicar la técnica con otras aplicaciones como Photoshop, Paint Shop Pro…

Si sigues esta técnica podrás conseguir resultados tan espectaculares como la transformación que se aprecia en las siguientes fotografías:

Como puedes ver, el resultado es muy llamativo y produce en el observador la sensación de que la imagen sale de un plano de 2D para cobrar formas tridimensionales.

COLOR ENTRE BLANCO Y NEGRO

La idea de este post surgió al ver este artículo en dzoom. En él se presenta una técnica para resaltar elementos de una fotografía mediante la sustracción del color (convertirla a blanco y negro) a la fotografía y posterior devolución del color a aquel elemento sobre el que se desea llamar la atención.

Un ejemplo es el de la transformación sufrida por la siguiente imagen:

En el artículo presentado en dzoom, indicaban los pasos que era necesario seguir para lograr el efecto con Photoshop (gracias a su herramienta History Brush). Por mi parte, he optado por conseguir el efecto con el uso de Gimp, programa que como ya sabes es multiplataforma, gratuito y con un conjunto de posibilidades muy cercanas a las de Photoshop.

Espero que os guste la seleccion, con GIMP se pueden hacer cosas muy chulas.

Tomado de: Ubuntulife