Uno de los aspectos más importantes para hacer que una visita ocasional se convierta en un lector habitual de nuestro blog es la velocidad de carga. Yo nunca agregaría un blog a mis marcadores si cada vez que lo visito pierdo mucho tiempo esperando a que cargue.

Carlos Leopoldo nos mostró una lista de 10 formas para mejorar la velocidad de nuestro blog, pero yo aquí me enfocaré a la cuestión de las imágenes. Porque si en cada post pones dos o tres imágenes de medio mb, pues claro que tu blog tardará muchísimo en cargar.

Así que si quieren saber como reducir sus imágenes a más de la mitad del tamaño usando Gimp, pues sigan leyendo.

Paso 1. Abre la imagen con Gimp

Paso 2. Archivo / Guardar como…

Paso 3. Cambiar la extensión de la imagen a .gif, reducirá su tamaño considerablemente, pero si la imagen es grande, entonces también se reducirá su calidad. Mejor pasamos al paso 4.

Paso 4. Guardamos con extensión .jpg. Si no le cambiaste el nombre, entonces presiona ‘Reemplazar’ en la ventana emergente.

Paso 5. Veremos una ventana como la siguiente.

Ya es cuestión de modificar algunos valores: poner la calidad en 85, no guardar miniatura y en submuestreo poner ‘el menor tamaño de archivo’.

Así, la imagen del post pasado, de 425kb se convirtió un una imagen de 102kb. Y la imagen de esta entrada, simplemente con guardarla con extensión .gif pesó 18kb, frente a 56kb que pesaría con extensión .jpg.

1. Vamos a Archivo/Nuevo y creamos una imagen de 400×400.

2. Creamos una nueva capa transparente (en el dialogo de capas seleccionamos el botón con la hoja en blanco).

2. Escogemos la herramienta de selección elíptica y dibujamos una elipse así:

El color que utilicé es el ffe8bc.

3. Seleccionamos la herramienta de rotación, hacemos clic en la imagen, introducimos un ángulo de 15 y lo demás lo dejamos igual.

4. Duplicamos la capa (en el dialogo de capas seleccionamos el botón con dos imágenes). Con la herramienta de volteo hacemos clic en la imagen duplicada.

5. Con la herramienta mover juntamos los extremos de las dos elipses.

6. Creamos otra capa nueva transparente.

7. Escogemos la herramienta de selección elíptica, seleccionamos la opción ‘Fijo’ y trazamos un circulo del mismo ancho que las dos elipses.

8. Ya tenemos la forma del huevo. Ahora le quitamos la visibilidad a la capa ‘Fondo’ (haciendo clic en el ojo), hacemos clic derecho en cualquier otra capa y seleccionamos ‘Combinar las capas visibles…’

9. De nuevo hacemos clic derecho en la capa que nos quedó y seleccionamos ‘Alfa a selección’

10. Escogemos la herramienta de mezcla y en la opción ‘Forma’ seleccionamos ‘Radial’. Experimentamos un poco hasta que nos quede algo así:

11. Duplicamos la capa, vamos a Editar/Agrandar e introducimos 1pixel. Ahora lo rellenamos de negro.

12. Movemos la capa del huevo negro hacia abajo del huevo normal y bajamos su opacidad hasta 10.

¡Y ya está listo nuestro huevo!

* No todos los huevo son blancos, los huevo rancheros son de este color eh.

Aquí está el antes y el después.

1. Creamos una nueva imagen con fondo blanco y escribimos con la herramienta de texto algún texto. De preferencia que sea una fuente ‘normalita’, yo utilizaré ‘Sans Serif Bold’.

2. En el dialogo de capas, hacemos clic derecho en la capa en que está nuestro texto y ‘Capa a tamaño de imágen’.

3. Le aplicamos un desenfoque gaussiano de 10px. Filtros / Desenfoque Blur / Desenfoque gaussiano.

4. Luego vamos a Colores / Curvas y ponemos el canal en alfa. Nos saldrá una curva como la de la izquierda y la tenemos que modificar como la de la derecha.

5. Listo, ya tenemos nuestro texto redondeado.

Prometo que haré otros tutoriales para trabajar con textos redondeados.

Les recuerdo que estoy usando el Gimp 2.6.2, si no lo tienen lo pueden descargar directamente desde aquí: Gimp 2.6.2. Bien ahora sí empezamos:

1. Creamos una nueva imagen de 400x200px y la rellenamos de negro.

2. Creamos una capa nueva transparente.

3. Ahora seleccionamos la herramienta de rutas. Esta herramientas sirve para señalar el camino que después será trazado con un pincel y es ideal para hacer curvas. Tal ves necesiten un poco de práctica para dominar las rutas, pero en realidad no es complicado.
Nota: Recuerden que ctrl+z = Deshacer y ctrl+y = Rehacer.

4. Hacemos clic en una parte de la imagen, veremos un pequeño círculo verde. Ahora hacemos clic en otra parte para completar una línea.

5. Ahora, presionando al mismo tiempo la tecla ctrl, hacemos clic en el medio de nuestra línea. Ya tenemos un nuevo círculo, ahora lo ‘jalamos’ hasta obtener una curva.

Nota. El círculo sin relleno (la circunferencia pues), es el que está activo.

6. Hacemos clic en el círculo de la orilla para activarlo y luego repetimos los pasos para crear otra curva. Esta vez un poco más grande.

7. Seleccionamos el color de frente que queramos, yo voy a utilizar el ffe29b (en notación HTML).

8. Seleccionamos la herramienta pincel. Y en la opción ‘Pinceles’ escogemos el ‘Calligraphic Brush#1′

9. Volvemos a escoger la herramienta de rutas y presionamos el botón ‘Trazar ruta’. Si se encuentra desactivado, tenemos que seleccionar la ruta que hicimos hace un rato. En el dialogo de capas abrimos la pestaña de rutas y hacemos clic en donde debería estar el ojo, para hacer la ruta visible.

10. Ahora sí, hacemos clic en la ruta y luego presionamos el botón ‘Trazar ruta’. Seleccionamos la opción ‘Trazar utilizando una herramienta de pintura’, seleccionamos el pincel y también activamos la opción ‘Emular la dinámica del pincel’. Trazo.

Nuestra línea debe haber quedado en la capa transparente

11. Le aplicamos un desenfoque gaussiano: Filtros / Desenfoque Blur / Desenfoque gaussiano, con un radio de 25. Y bajamos su opacidad hasta 50.

12. Ahora es cuestión de trazar la misma ruta otras dos veces, pero con diferentes valores en algunas cosas ¡y en capas nuevas!.

1. → Pincel: Calligraphic Brush → Desenfoque: Gaussiano, radio 8 → Opacidad: 70 2. → Pincel: Circle (01) → Desenfoque: Blur → Opacidad: 100

Debe de quedarles algo así:

Con algunas variaciones y algo de imaginación se pueden hacer cosas chidas.

1. Abrimos Gimp (jaja), vamos a Archivo/Nuevo, creamos una imagen de 400x400px blanca.

2. Seleccionamos el primer color negro y el segundo gris.

3. Seleccionamos la herramienta de mezcla, en ‘Degradado’ escogemos ‘Frente a fondo’. Trazamos una linea que atraviese nuestra imagen.

Nota: Al paso 2 y 3 se le llama resumidamente ‘Aplicar un degradado de negro a gris’.

4. Creamos una capa nueva transparente y la ponemos en modo ‘Diferencia’.

5. En la capa nueva, vamos a Filtros/Renderizado/Nubes/Ruido sólido, seleccionamos ‘Turbulento’ y ‘Enlosable’, el ‘Tamaño X’ lo ponemos en 15 y el ‘Tamaño Y’ en 6 más o menos.

6. Combinamos las capas: Imagen/Combinar las capas visibles.

7. Vamos a Colores/Niveles y movemos los triángulos hasta que queden más o menos así:

8. Vamos a Colores/Colorear y movemos los controles hasta obtener una imagen entre roja y naranja.

9. Volvemos a entrar en Colores/Niveles y dejamos los triángulos más o menos así:

10. Con el lápiz con color negro podemos borrar las manchas que quedaron sobre el fuego.

11. Listo, ya podemos disfrutar de nuestro fuego.

Como ven es cuestión de jugar con los niveles y colores en los últimos pasos para obtener imágenes diferentes.

1. Abrimos una imagen de 300×300 en blanco.

2. Creamos una nueva capa transparente.

3. Seleccionamos la herramienta de selección elíptica, seleccionamos la opción ‘Difuminar los bordes’ y dibujamos un elipse de la forma que queramos y lo rellenamos de color negro (Editar / Rellenar con el color de frente).

Siempre puedes ver más grande una imagen si haces clic sobre ella.

4. Con la misma herramienta creamos otra elipse más o menos del mismo tamaño, así:

Nos fijamos en la ventana de herramientas, en la parte de abajo. Hay algo así:

5. Vamos a seleccionar el tercer botón de izquierda a derecha, ‘Extraer de la selección actual’ y dibujamos otra elipse así:

6. Ahora seleccionamos el cuarto botón, ‘Intersectar con la selección actual’ y dibujamos otra elipse así:

7. Ahora sí, rellenamos la selección con color negro.

Espero que le hallan entendido a los ‘modos de selección’

8. Hacemos clic en los cuadros de color y seleccionamos para el frente el color que queramos y para el fondo, ese mismo color pero más claro.

9. Hacemos clic derecho en la capa del globo y seleccionamos ‘Alfa a selección’.

10. Escogemos la herramienta de mezcla y escogemos el degradado ‘Frente a fondo (RGB)’. Rellenamos nuestro globo con el degradado, trazando una linea que atraviese al globo.

11. Volvemos a hacer ‘Alfa a selección’ sobre el globo. Escogemos la herramienta de selección elíptica y deseleccionamos la opción ‘Difuminar los bordes’. Escogemos y modo ‘Extraer de la selección actual’ y dibujamos una elipse así:

12. Ahora escogemos el modo ‘Intersectar con la selección actual’ y dibujamos otra elipse así:

13. Vamos a Seleccionar / Encoger y seleccionamos 4. Creamos una nueva capa transparente y ahí rellenamos la selección con color blanco. Le bajamos la opacidad a un 80%.

14. En el dialogo de capas, seleccionamos la capa que contiene el globo. Escogemos la herramienta de selección elíptica en modo ‘Remplazar la selección actual’ (es el modo normal) y trazamos una elipse más o menos así:

15. Lo copiamos (ctrl+c), creamos una capa nueva transparente y lo pegamos (ctrl+v). Damos clic en ‘Anclar la capa flotante’ (una ancla en el dialogo de capas). Esta capa debe quedar encima de todas las demás.

16. Vamos a Filtros / Desenfoque [Blur] / Desenfoque gaussiano y escogemos un radio de 10. Si es necesario, movemos esta capa un poco hacia arriba.

Listo, ya hemos terminado. No fue tan complicado como parecía ¿verdad?.

1. Creamos una imagen color blanco de 500×200 (Archivo/Nuevo).

2. Escribimos algo con la herramienta de texto y le cambiamos el color, tamaño y tipo de letra.

3. Seleccionamos la capa del texto y hacemos clic derecho/Capa a tamaño de imagen.

4. Clic derecho en la capa del texto y seleccionamos ‘Alfa a selección’. Veremos cómo el texto es rodeado por puntitos, esto significa que únicamente el texto está seleccionado y cualquier cambio sólo afectará a la selección.

5. Vamos a Seleccionar/Encoger y escogemos 7px más o menos. Creamos una nueva capa transparente y nos aseguramos de que esté seleccionada en el dialogo de capas.

6. Rellenamos la selección de color blanco. Nos debemos asegurar que el texto reducido y de color blanco halla quedado en la capa que recién creamos.

7. Deseleccionamos todo, podemos ir a Seleccionar/Nada. Le aplicamos un desenfoque gaussiano a la capa nueva, Filtros/Desenfoque[Blur]/Desenfoque gaussiano, con radio de 17 y bajamos su opacidad a 50% más o menos.

Hasta paso ya se ve bien, pero podemos hacer algo más.

8. Clic derecho/Alfa a selección a la capa del texto (la original). Creamos una capa nueva transparente.

9. Seleccionamos la capa nueva y luego rellenamos la selección con color negro. Luego vamos a Seleccionar/Encoger y escogemos 1px. Luego oprimimos ctrl x para eliminar la que halla adentro de la selección, de este modo nos queda un pequeño contorno.

10. Por último le bajamos la opacidad a esa capa hasta el 30%.

Nota: Hay una capa que se llama ‘Fondo’, si oprimen el ojo que acompaña a esa capa, el fondo dejará de verse (se verán cuadros grises). Si guardan su imagen así, tendrá fondo transparente, sólo que tienen que guardarla en formato gif o png.

En este tutorial vamos ver cómo hacer un texto reflejado en el piso, tan común de las webs 2.0. También les recuerdo que estoy usando la versión 2.6.2 de Gimp, pero en realidad no hay mucha diferencia entre versiones.

1. Creamos una imagen en blanco de 500×200 (Archivo/Nuevo).

2. Escribimos algo con la herramienta de texto y le cambiamos el color, tamaño y tipo de letra.

3. En el dialogo de capas, hacemos clic derecho en la capa del texto y luego seleccionamos ‘capa a tamaño de imagen’. Después le damos clic en ‘duplicar capa’.

4. Con la herramienta ‘mover’ (flecha con cuatro puntas), movemos la capa recién duplicada y la ponemos debajo de la otra.

5. Ahora seleccionamos la herramienta de rotación (dos cuadros con flechas), hacemos clic en el texto y en el ángulo introducimos 180º.

6. Buscamos la herramienta volteo y hacemos clic en el texto que está al revés. Con la herramienta mover, lo acomodamos para que las letras coincidan entre sí.

7. En el diálogo de capas, seleccionamos la capa duplicada y bajamos la opacidad hasta un 45% más o menos. Le aplicamos un pequeño desenfoque, Filtros/Desenfoque[Blur]/Desenfoque (Blur).

8. En el dialogo de capas, hacemos clic en el botón ‘nueva capa’ (hoja blanca) y seleccionamos la opción transparencia.

9. Seleccionamos la herramienta de selección de rectángulos, dibujamos en la capa nueva un rectángulo que cubra la parte de abajo del texto volteado y lo rellenamos de blanco con la herramienta de relleno.

10. Lo deseleccionamos (clic afuera de la imagen) y aplicamos desenfoque gaussiano, Filtros/Desenfoque[Blur]/Desenfoque gaussiano, con radio de 15.

11. Repetimos los pasos 8 y 9, pero el rectángulo lo dibujamos en la parte de arriba. Luego le bajamos la opacidad hasta el 32% más o menos.

Nota: Las últimas dos capas creadas (los rectángulos) deben quedar por encima de las dos capas de texto. Si no es así, en el dialogo de capas arrastra esas dos capas hacia arriba.

12. Listo, ya tenemos nuestro texto con un reflejo y algo de brillo.

Apenas abramos Gimp vamos a ver algo así:

A la izquierda está la caja de herramientas, a la derecha abajo está el dialogo de capas y a la derecha arriba está la ventana en donde veremos nuestra imagen.

Ahora sí, vamos a crear algo parecido a esto:

Sencillo, pero perfecto para empezar.

1. Vamos a Archivo / Nuevo. Y seleccionamos los valores 400 para ancho y 200 para alto.

2. Buscamos en la caja de herramientas la herramienta de texto (es una A), hacemos clic en la imagen y escribimos algo, en este caso yo escribí ‘Gimp’.

3. En la parte de abajo de la caja de herramientas encontraremos las propiedades que podemos modificar. En el caso del texto, podemos modificar el tipo, tamaño y color de letra.

Si su texto desaparece de repente, significa que tienen que hacer más grande la capa, moviendo los recuadros morados, hasta ajustar el tamaño.

Nota: Si ven el dialogo de capas, podrán notar que hay dos capas, una que debe llamarse ‘Fondo’ (lo blanco) y otra que contiene el texto. Para hacer cualquier modificación, la capa debe estar seleccionada.

4. Seleccionamos la capa de nuestro texto y hacemos clic en el botón duplicar.

Ahora tenemos dos capas exactamente iguales.

Nota: El ojo que acompaña a cada capa sirve para visualizar o no la capa.

5. Seleccionamos la capa recién creada y vamos a Filtros/Desenfoque[Blur]/Desenfoque gaussiano y ponemos el radio de desenfoque en 15.

6. Listo, ya tenemos nuestro texto con algo así como un resplandor.

Y ahora ¿cómo guardamos la imagen? Pues es muy sencillo,

7. Archivo/Guardar, seleccionamos la carpeta de destino y escribimos un nombre. En la parte de abajo está la opción ‘Seleccione el tipo de archivo’, la desplegamos y veremos una amplia lista de tipos de archivo, escogemos uno de los más conocidos (png, jpg, jpeg, gif).

8. El tipo de archivo (o extensión) xcf es la propia de Gimp, es decir, si guardamos nuestro trabajo con esta extensión se guardarán todas las capas. Sirve para cuando quieras seguir trabajando con tu imagen en otro momento.

Nota: Puedes escribir la extensión del archivo directamente, es decir, si guardas tu imagen como gimp.png, se guardará como archivo png.

Bien, espero que les haya sido útil a algunos, ya sé que fue algo muy sencillo pero mi objetivo es empezar desde cero. Cualquier duda, ya saben que aquí estoy.

¿Qué es Gimp?
Es un editor de imágenes al estilo Photoshop, pero de distribución gratuita.

¿Qué voy a encontrar en los tutoriales?
Principalmente voy a abordar efectos sobre letras e imágenes, para la creación de banners, headers, etc., empezando desde 0.

¿Dónde lo descargo?
Aquí, (descarga directa).

¿Eres todo un experto?
Claro que no, solamente quiero compartir lo poco que sé y al mismo tiempo buscar más información, trucos, recursos, etc. para compartirlos.

Así que próximamente tendrán un poco de Gimp revuelto entre todo el desorden que tengo aquí.