El color - Herramientas y detalles

Bienvenidos seáis todos un día mas  a este blog ^^

Con este post terminare, al menos por ahora, con el tema del color infografico, explicando como podemos utilizar algunas cualidades de las capas y de determinadas herramientas de Gimp.

Los modos de fusión de capas

He dicho muchas veces que para conseguir tal o cual efecto hay que utilizar los modos de fusión de capas, estos modos de fusión son la manera en que las capas superiores interactúan con las capas que hay bajo ellas.

El modo activo por defecto es "Normal" lo que significa que la capa no tiene ningún sistema especifico de interacción (es decir que la parte opaca sera opaca y la transparente transparente, y punto)

Por ejemplo, el modo "Multiplicar" hace que el color de la capa oscurezca los colores de las capas inferiores, de tal manera que si pintamos en una capa con este modo de fusión el resultado sera muy similar a pintar con acuarela.

La mejor manera de aprender a utilizar todos los tipos de fusión es, como de costumbre, practicar y ver que resultado obtenemos.

Herramientas útiles para aplicar color

Veamos algunas de las herramientas de Gimp que mas podemos utilizar a la hora de colorear nuestras ilustraciones (aparte del pincel, por supuesto)

La Herramienta de emborronado (la que tiene forma de dedo) sirve para difuminar los colores y puede ser muy útil para lograr determinados efectos de sombras o luces.

La Herramienta de selección libre nos resultara imprescindible para crear selecciones que tengan una forma determinada, podemos utilizarla trazando lineas rectas, haciendo sucesivos clics hasta que cerremos la forma y se genere la selección o haciendo un clic y arrastrando el ratón para dibujar la forma que queramos conseguir (esto es mas sencillo si utilizamos una tableta digitalizadora y un lápiz óptico)

La Herramienta de tinta se utiliza para lograr trazos caligráficos, aunque puede que resulte un poco difícil de dominar.

Y la Herramienta de mezcla nos permitirá realizar degradados increíbles, o podemos descargarlos directamente de alguna de las muchas paginas web de recursos para Gimp que podemos encontrar en Internet.

Cuidado con los detalles

Al aplicar el color determinados elementos no formaran parte del dibujo original y los crearemos con el propio programa, ya sea utilizando pinceles, filtros o otros elementos como partes de una fotografía o dibujos vectoriales.

Cuando incluyamos esos elementos deberemos tener en cuenta que deben encajar correctamente en el dibujo que hayamos realizado previamente.

Así por ejemplo en la imagen superior el pelo de la chica ondea hacia la izquierda, así que la lluvia, que he creado con Gimp, también debe caer inclinada hacia esa dirección (podéis ver los post de agosto del 2010 par ver como crear lluvia o nieve) y el efecto de desenfoque de las hojas que arrastra el viento también debe hacerse teniendo en cuenta esto, ya que de lo contrario la imagen final resultaría poco natural.

El color - Luces y sombras

Bienvenidos seáis todos un día mas a este blog ^^

En los dos post anteriores os he hablado de como preparar un dibujo para poder colorearlo digitalmente con Gimp, y de los dispositivos que podíamos utilizar, en este veremos las distintas maneras en que podemos aplicar el color.

En el ultimo articulo ya dejamos la imagen lista para empezar a aplicarle el color, de manera que ya podemos empezar a trabajar con ella, en la ultima capa que creamos para ir pintando los diferentes colores.

Ahora con la Herramienta de selección difusa (el equivalente a la barita mágica en Photoshop) tenemos que ir seleccionando las diferentes partes del dibujo y rellenandolas pintando con la Herramienta de pincel o Aerografo, o simplemente con la opción Rellenar con color de frente del menú Editar (habiendo elegido previamente el color que queramos, evidentemente)

Dependiendo de lo complejo que sea nuestro dibujo, y de lo limpios y cerrados que sean los trazados tardaremos mas o menos en completar esta "primera aplicación de color" aunque con la practica iremos cada vez mas rápido.

Para no tener que ir cambiando entre la capa en la que tenemos el dibujo y la capa en la que queremos poner el color a la hora de seleccionar y rellenar, podemos tener activa siempre la capa del color y en la herramienta de selección activar la opción Muestra combinada, de manera que las selecciones afectaran a todas las capas (que en este momento solo son dos)

Ya tenemos nuestra capa coloreada, a este tipo de color se le suele llamar Color plano, ya que no tiene sombras ni brillos, eso lo pondremos ahora, en otra capa que pondremos sobre la capa de color y con el modo de fusión Multiplicar.

las sombras pueden ponerse básicamente de dos formas, la mas sencilla es utilizar un tono gris para todo el dibujo, como un gris al 50% (el código de este color es 808080) y ir pintando todas las sombras del dibujo con este gris.

Al tener esta capa en modo multiplicar el tono gris  oscurecerá el color de fondo y creara el efecto de sombreado.

La segunda forma es similar, pero en lugar de utilizar un único tono de gris para todas las zonas del dibujo, utilizaremos el mismo color que tenga la zona en la que queremos aplicar la sombra, con lo que tendremos que ir cambiando de color continuamente, eso si las sombras que se consiguen de esta forma resultan mas naturales.

De cualquiera de las dos maneras obtendremos un resultado similar al de esta imagen.

Pero aun faltarian los brillos que la luz proyecta sobre los objetos, que como no, crearemos en otra capa , cuyo modo de fusión puede ser Pantalla o Solapar, y que colocaremos sobre la capa de color y la de las sombras.

Los brillos los pintaremos de color blanco o haciendo selecciones con la Herramienta de selección libre y rellenandolas con la Herramienta de mezcla, utilizando la opción de Blanco a transparente, esto nos permitirá crear un efecto de brillo que se desvanece a medida que se aleja del punto de luz.

El modo de fusión Pantalla crea un efecto de brillo mas blanco y intenso mientras que el modo Solapar hace que el brillo sea mas suave y se mezcle mas con el color de fondo, de manera que el primero es muy útil si queremos simular brillos de luz en un cristal o en metal y el segundo es idóneo para la piel o materiales como tejidos o plásticos.

Si queremos utilizar ambos modos de fusión tendremos que utilizar dos capas diferentes para los dos tipos de brillos.

En la imagen superior he utilizado el modo Pantalla para los brillos de la bola de cristal y el modo solapar para el resto de la imagen.

Otra forma, mucho mas profesional de colorear un dibujo seria el de pintar digitalmente, aplicando diferentes capas de color hasta conseguir el resultado que andemos buscando, pero este sistemas requiere la misma habilidad que pintar manualmente y para ello necesitaremos una tableta digitalizadora profesional.

Con la suficiente habilidad y paciencia (y mucha, mucha practica) podemos conseguir resultados sorprendentes, como podéis ver en las paginas web de Cris Ortega y Melanie Delon, dos magnificas artistas digitales.

La mayoría de las obras de estas dos grandes creadoras puede superar ampliamente las 100 horas de trabajos (pero no se puede negar que vale la pena el esfuerzo)

El color - Preparar la imagen

Bienvenidos seáis todos a mi humilde blog sobre ilustración y diseño digital, espero que os sintáis cómodos ^^

En el articulo anterior empecé a hablar sobre las herramientas necesarias para la aplicación de color a un dibujo mediante programas de retoque de imagenes como Gimp, y en este me centrare en el tratamiento que hemos de darle a nuestras ilustraciones antes de empezar a colorearlas.

Lo primero que tenemos que tener en cuenta es que si hemos escaneado un dibujo que hayamos entintado previamente, el formato en que aparecerá esta imagen si la abrimos con Gimp sera Escala de grises, por lo que no podremos aplicarle color, ya que aunque seleccionemos un color determinado al utilizarlo en el dibujo este aparecerá como un tono de gris.

Lo que tenemos que hacer para poder trabajar con todos los colores es cambiar el modo de la imagen a RGB, lo que podemos hacer desde la opción Modo del menú Imagen.

Ahora que ya tenemos nuestra ilustración en el modo de imagen adecuado, podemos empezar a colorearla, pero lo mejor es aplicar el color en una capa aparte, de esta forma podremos retocar el color cuando queramos sin alterar las lineas del dibujo original.

Para ello clicamos en el icono con forma de folio que se encuentra bajo la ventana donde aparecen las miniaturas de las capas, y al abrirse el cuadró de dialogo correspondiente podremos introducir el nombre de la capa nueva, por ejemplo, color (lógico, no).

Si no le ponemos un nombre Gimp la nombrara como Capa nueva (y a medida que añadamos mas capas las ira nombrando como Capa Nueva#1, Capa nueva#2 ...)

Lo mejor es poner esta capa bajo la capa en la que tenemos el dibujo, que por defecto aparece con el nombre de Fondo resaltado en negrita.

Para poder ver la capa en la que vamos a aplicar el color antes de empezar a colorear tendremos que borrar el color blanco de la capa Fondo, de manera que solo queden los trazados negros, y el resto de la capa quede transparente.

Para ello primero tendremos que darle un canal de transparencia, o canal alfa a esta capa (ya que por defecto la capa de fondo carece de canal alfa y por lo tanto no podemos crear en ella efectos de transparencia)

Para añadirle este canal solo tenemos que clicar sobre miniatura de la capa con el botón derecho del ratón y en el cuadro de dialogo que se despliega seleccionar la opción Añadir canal alfa.

Y finalmente, la manera mas fácil de eliminar todo el color blanco de la capa Fondo el utilizar la Herramienta de seleccionar por color, clicar en cualquier parte blanca de esta capa y pulsar Supr.

Ya tenemos nuestra imagen lista para empezar a trabajar con ella, de momento solo contiene dos capar, una con el dibujo y otra en la que iremos aplicando el color, pero a medida que vayamos añadiendo detalles podremos ir utilizando mas capas así como sus diferentes modos de fusión.

Para realizar la imagen de ejemplo que tenéis sobre estas lineas he utilizado 22 capas diferentes, pueden parecer muchas pero como ya he dicho antes trabajar con capas nos da la ventaja de poder retocar un determinado elemento sin alterar los que se encuentran en el resto de las capas, ya que los cambios que hagamos solo afectara a la capa que se encuentre activa en ese momento.

Y si unas 22 capas os parecen muchas tened en cuenta que algunos  profesionales del diseño o la ilustración pueden llegar a utilizar en sus obras mas de 100 capas.

A todo color ...

Bienvenidos seáis una vez mas a este blog, pasad y servíos vosotros mismos ^^

Recuerdo que en uno de mis primeros post, hace como año y medio (que rápido pasa el tiempo) explique como se podía colorear un dibujo con un programa de manipulación de imagenes de mapa de bits, como Gimp, Photoshop o Painter.

En este post (y alguno que otro mas) me gustaría tratar ese tema, pero esta vez mas detalladamente y añadiendo detalles que entonces me deje en el tintero, o que he ido aprendiendo en este tiempo.

Lo mejor sera empezar por el principio, y hablar de las diferentes formas que tenemos para colorear un dibujo, que básicamente se podrían dividir en dos grandes grupos, coloreado tradicional y coloreado digital.

Para colorear una ilustración con métodos tradicionales, los de toda la vida, podemos utilizar muchos tipos de materiales, desde la acuarela o los lapices acuarelables hasta tipos de coloreado mas típicos de la pintura como el oleo.

 

 

Cualquier tipo de ilustración que realicemos manualmente siempre podemos escanearla y retocarla digitalmente, esta seria una tercera opción que uniría la ilustración manual y la digital.

 

En cuanto al color digital, podemos aplicarlo con el ratón de nuestro ordenador, aunque resulta mucho mas cómodo si disponemos de una tableta digitalizadora con un pen, ya que el sistema resulta mucho mas similar al dibujo manual, y aunque las tabletas profesionales resultan muy caras, existen algunas destinadas mas a principiantes o aficionados a la ilustración que resultan bastante asequibles y son perfectas para iniciarse en el manejo de este tipo de herramienta de diseño.

 

Trabajar con una tableta digitalizadora puede resultar complicado al principio, pero una vez nos acostumbremos podremos realizar nuestras ilustraciones de una manera mas rápida, precisa y profesional que si utilizáramos el ratón.

Mas rotulos para ofertas

Bienvenidos seáis todos una vez mas a este blog sobre dibujo, diseño y Infografía ^^

Al igual que en el post anterior en este artículo veremos como crear con Gimp mas de los típicos  rótulos y etiquetas que se pueden ver en algunos negocios, para anunciar rebajas, chollos y ofertas.

Para empezar veremos como se puede crear un efecto similar al de la ultima imagen del post anterior, pero utilizando un circulo en lugar de una rectángulo.

Esta vez no podemos utilizar el filtro Pagina doblada, ya que este filtro solo es útil con figuras rectangulares, de manera que tendremos que crear el efecto de doblez de manera "manual"

Lo mejor es activar la Cuadricula (menú Ver, opción Mostrar rejilla) o utilizar las Guias para poder establecer facilmente el centro del documento.

Creamos una nueva capa en la que trazamos un circulo con la herramienta de selección elíptica y la pintamos del color que queramos, o le aplicamos un degradado, ya sea lineal o circular.

Con la selección aun activa creamos otro circulo del mismo tamaño (sera fácil si nos guiamos por la cuadricula) que quede por encima del circulo anterior de forma que se intersecte con este, teniendo la Herramienta de selección elíptica en modo Intersección (de esta manera la selección resultante sera la elipse donde ambos círculos se superponen)

Rellenamos la elipse resultante del color que queramos, o con un degradado, en una nueva capa, que quede por encima del circulo y  borramos la parte superior de la elipse y del circulo, lo mejor es trazar una selección rectangular que incluya la parte de la elipse que queramos borrar y pulsamos el botón Supr (hacemos lo mismo en la capa que contiene el circulo, ya que tenemos que eliminar la parte del circulo que quede por encima del doblez))

Podemos mejorar el aspecto del doblez añadiéndole una sombra, para darle un aspecto de tridimensionalidad, que podemos pintar en una capa nueva que situaremos sobre el circulo, en modo multiplicar y pintando la sombra con un tono gris oscuro ( si seleccionamos el fondo de la capa del circulo y invertimos la selección nos aseguraremos de no salirnos de la zona que queramos "sombrear")

Ya tenemos la estructura básica de la "pegatina" ahora tenemos que añadir el texto, que tendrá que estar entre el circulo y la capa de la sombra, para que esta también se proyecte sobre el texto.

Utilizando selecciones rectangulares y circulares también podemos crear una imagen como la de el siguiente ejemplo.

Para ello, al igual que la vez anterior, primero de todo activamos la cuadricula, y guiándonos por ella trazamos un rectángulo y a su lado y de modo que quede alineado horizontalmente con el rectangulo, un circulo, con las herramientas de selección en modo Añadir.

Unimos las dos formas con la Herramienta de selección libre, también en modo añadir, trazando lineas  que vaya de la parte superior del rectángulo hasta la parte superior del circulo  y luego de la parte inferior del circulo a la inferior del rectángulo.

Con ello tendremos una selección con la forma de la etiqueta, que tendremos que rellenar del color que queramos.

Con la selección aun activa utilizamos la opción Borde del menú Selección, y le damos el tamaño que queramos, esto dará como resultado una nueva selección que al rellenarla de color en una  capa nueva nos permitirá crear el reborde de la etiqueta.

A este reborde podemos darle un aspecto de relieve si le aplicamos el filtro Añadir bisel del grupo Decorativos.

Esto mismo podemos hacer también con el texto que le incluyamos a la etiqueta, lo que le dará un efecto de tridimensinalidad que mejorara el resultado final.

En los dos ejemplos anteriores siempre podemos rotar la imagen resultante para darle una inclinación a las etiquetas y que parezcan mas naturales, pero para ello antes hay que enlazar todas las capas que hayamos creado para así poder rotarlas todas a la vez, para ello clicamos sobre el cuadrado que hay en la parte izquierda de todas las  miniaturas de las capas (aparecerá un icono con forma de cadena) a partir de ahora si rotamos o redimensionamos una de las capas enlazadas las demas también experimentaran el mismo cambio.

Para terminar os dejo una imagen similar a las anteriores, con la diferencia de que esta esta creada con Inkscape, utilizado básicamente la herramienta Crear estrellas y polígonos.

Rotulos para ofertas

Una vez mas, bienvenidos seáis todos a este blog, espero que disfrutéis de vuestra visita ^^

En este post veremos como hacer con Gimp, algunos de los típicos rótulos y textos que podemos ver en tiendas y negocios, anunciando ofertas especiales, promociones o rebajas.

Empezaremos con algo sencillo, simular la textura del papiro o de un papel envejecido.

Para crear un efecto similar al de la imagen superior, primero creamos el fondo, en este caso un degradado de grises, luego en una capa nueva trazamos una selección rectangular con la Herramienta de selección de rectángulos, y aplicamos el efecto Rusted paper, del grupo Shapes, que se encuentra en el menú Scrip-fu (tendremos que tener instalado este efecto en concreto, ya que es un scrip que no se incluye de serie con el Gimp) y en su cuadro de diálogos elegimos el color que queremos que tenga el papel resultante y el texto que queremos que aparezca.

Cuando acabe de ejecutarse el efecto ya tendremos nuestro papel envejecido con el texto que hayamos introducido, aunque si queréis podéis no poner un texto y añadirlo después, lo que os dará un mayor control en sus opciones y a la hora de alinearlo.

Como variante de este tipo de rotulo podéis hacer que el texto parezca estar recortado en el papel, como en esta otra imagen.

Esto se consigue simplemente seleccionando el texto después de escribirlo, con la opción Alfa a selección que aparece al hacer clic sobre la miniatura de la capa, luego deshabilitamos la capa de texto (ya que no la necesitamos) y pasamos a la capa en la que hayamos creado el efecto de Rusted paper y borramos la selección (lo que podemos hacer simplemente pulsando Supr) 

Después invertimos la selección, y en una capa nueva que tenemos que colocar entre la capa del papel envejecido y el fondo  rellenamos la selección de negro, con lo que toda la capa quedara pintada  de negro excepto la parte en la que se encuentra el texto.

Finalmente aplicamos un Desenfoque gausiano, que se encuentra entre los Filtros de Desenfoque, y movemos la capa para crear el efecto de sombra, que a su vez dará al fondo de la imagen un efecto de profundidad.

Uno de los recursos mas típicos de estos rótulos es el de crear la apariencia de que una de las esquinas del papel esta doblada, como podéis ver en esta imagen.

Esto se puede crear muy facilmente con Gimp utilizando el filtro Pagina doblada, del grupo de filtros Distorsiones, y en su cuadro de dialogo elegir en que esquina queremos crear este efecto.

Si el doblez que se crea es demasiado grande siempre podemos seleccionar el recuadro al que queremos aplicarle el filtro (la forma mas fácil es seleccionar el fondo y invertir la selección) y crear una nueva selección en modo de intersección en la esquina que queramos que aparezca el efecto, de esta manera al aplicar el filtro este solo afectara a la parte de la imagen que se encuentre seleccionada y el efecto de esquina doblada tendrá el tamaño que nosotros queramos.

Finalmente escribimos el texto entre la capa donde tengamos el papel y la capa en la que el filtro ha creado la esquina.

Siempre podemos aplicarle a la capa de texto un modo de fusión como, multiplicar, pantalla o solapar, de esta manera el texto quedara mas integrado con el resto de la imagen.

Fuegos artificiales

Bienvenidos seáis todos una vez mas, pasad y poneos cómodos ^^

En este post veremos como podemos crear con Gimp una explosión pirotécnica o de fuegos artificiales como el de esta imagen de ejemplo.

Crear este efecto requerirá un poco de paciencia y utilizar unos cuantos filtros, pero una vez terminado el resultado puede ser muy realista.

• Lo primero sera crear un documento nuevo con las dimensiones que queramos y rellenarlo de color negro, lo que podemos hacer simplemente pintando o con la Herramienta de relleno.
• Creamos un circulo desde el centro con la Herramienta de selección elíptica y lo rellenamos de puntos blancos con el filtro Ruido HSU, del grupo de filtros Ruido, utilizando los parámetros por defecto, excepto Valor que lo ponemos al máximo.
• Ahora lo derenfocamos con el filtro Desenfoque (del grupo de filtros Desenfoque, evidentemente)
• Ajustamos la luminosidad desde la opción Niveles del menú Colores, poniendo los medios tonos entre 0,30 y 0,50 y las iluminaciones  entre 40 y 50 (los medios tonos son la flecha central y las iluminaciones la de la derecha)
• Vamos a convertir el circulo en un rectángulo utilizando el filtro Coord. polares del grupo Distorsiones  y desactivando la opción A polares.
• Rotamos la imagen resultante con la opción Rotar 90º en sentido horario, en el submenú Transformar del menú Imagen.
• Aplicamos el filtro Viento del grupo Distorsiones con los siguientes parámetros:

• Estilo - viento 
• Dirección - Izquierda 
• Borde afectado - Delantero 
• Umbral - entre 6 y 8 
• Fuerza - entre 10 y 12.

• Ahora tenemos que recuperar la forma circular original lo que haremos aplicando Rotar 90º en sentido antihorario y el filtro Coord. polares, pero esta vez activando la opción A polares.
• Las esquinas del documento son ahora blancas así que las rellenaremos de negro utilizando de nuevo la Herramienta de relleno clicando en las cuatro esquinas.
• Duplicamos la capa, desenfocamos la capa resultante y le aplicamos un Desenfoque Gaussiano entre 10 y 15, y ponemos el modo de fusión de capa en Suma.
• Podemos repetir el ultimo paso si queremos dar mas luminosidad a las espurnas de nuestra "explosión pirotécnica" pero dandole a la nueba capa un mayor rango de desenfoque.
• Finalmente unimos todas las capas en una sola (clic botón derecho en la miniatura de la capa y seleccionamos la opción Aplanar la imagen) y le damos el color que queramos con Balance de color del menu Colores, arrastrando los potenciónetros hacia los colores que queramos resaltar.

Ya tenemos nuestros fuegos artificiales, para insertarlos en una fotografía o una imagen tenemos que seleccionarlo (menu Seleccionar, Todo) lo copiamos (Ctrl + C) lo pegamos en la imagen en la que queramos incluirla (Ctrl + V) y clicamos sobre el icono de Capa nueva con lo que la imagen de nuestro efecto pirotécnico quedara anclada en una capa nueva que tenemos que poner en modo Suma o Pantalla, de este modo desaparecerá el color negro de fondo y solo serán visibles las chispas de la explosión.

Lo único que tenéis que tener en cuenta cuando añadáis este efecto a otro archivo de imagen es que al igual que los fuegos artificiales auténticos estos solo se ven correctamente si el fondo sobre el que aparecen es los suficientemente oscuro.