Logo y textura

A lo largo de esta unidad hablaremos de las diferentes imágenes que podemos obtener con Gimp y que pueden ser utilizadas para la creación de una página web. El objetivo de esta unidad se centra en mostrar las posibilidades que tiene Gimp como programa de tratamiento de imágenes para la web pero no en aprender a realizar páginas web, aspecto en el que es necesario tener unos ciertos conocimientos.

Cuando diseñamos un sitio web debemos comenzar por los elementos comunes que tendrá ese sitio. Esos elementos comunes son, fundamentalmente, las imágenes y deben guardar una unidad de diseño para que nuestro sitio sea fácilmente reconocible.

Vamos a comenzar por la página principal de nuestro sitio y por el diseño de un logo para nuestro centro educativo: "CEIP El Gimp".

Ya hemos visto que GIMP dispone de multitud de posibilidades con los filtros de Logotipo, vamos a crear varios para que posteriormente podamos elegir uno de ellos.

Debemos tener presente que el destino de esta imagen es verse en una página web por lo que debemos elegir el formato en que guardaremos esta imagen. Lo más correcto es una imagen JPEG sobre fondo blanco, aunque en muchas ocasiones se opta por un fondo transparente para situarlo sobre la imagen de fondo de nuestra página; puede ser contraproducente porque puede verse un borde dentado a causa de las limitaciones de las imágenes GIF.

Los logos para la web suelen ser sencillos (pocos colores y sin transparencia) y sin demasiados efectos especiales que dificulten su visión cuando el logo cambia de tamaño, por lo que vamos a utilizar los filtros Logotipos para obtener de forma rápida varios diseños de un logo.

1. Accede a Exts --> Logotipos en la Caja de herramientas y selecciona el logo "Básico II", pon como texto "CEIP El Gimp" y como tamaño de fuente 50 píxeles, deja el tipo de fuente y colores que aparecen por defecto. El resultado se observa a continuación.

   
   
2. Realiza el mismo proceso para obtener otro logo que puede ser el que se obtiene con el Logotipo "Metal frío", con los mismos cambios que para el anterior logo. Aplica la máscara creada en la capa "Reflection" e inclina esta capa con la herramienta de Transformación inclinar para obtener el siguiente resultado.
   
   
   
3. El último logo que vamos a crear lo obtenemos desde el Filtro Extes --> Temas de páginas web --> Patrón biselado --> Cabecera. Cambia el texto y pon el tamaño del texto en 50. Obtienes...
   
   
   
4. Vistos los tres logos, nosotros nos decantamos por el primero, al que añadiremos un pequeño texto en la parte inferior, para que informe algo más sobre nuestra página web. Vamos a poner una línea horizontal y debajo el texto "Un colegio de Diseño".
   
   

   
   Crea una carpeta en tu disco duro para guardar todas las imágenes que vas a utilizar en la página web, por ejemplo "Carpeta web". Guarda tu imagen en formato JPEG. No está de más guardar también el diseño en formato nativo de GIMP (xcf) para poder realizar modificaciones posteriores.
   

5. En pocos pasos y con la ayuda de GIMP has diseñado rápidamente un logotipo sencillo y atractivo para nuestro colegio, que se mostrará en la página de entrada. Para el resto de páginas necesitaremos un logo más pequeño. En la Ventana Imagen elegimos Menú --> Imagen --> Escalar imagen y ponemos una anchura nueva de 200 píxeles, que modifica proporcionalmente la altura. Acepta y guarda el resultado en formato JPEG.
   

2. La textura de fondo

La textura de fondo se suele usar de distintas formas en las páginas web, en ocasiones se utiliza como fondo de la página y en otras como fondo de tablas. Sea el destino que sea, debemos tener en cuenta que debe ser bastante neutro y no molestar la lectura del texto que aparezca en nuestra página. Pero que se vea lo suficiente para saber que el visitante se encuentra en la página de nuestro colegio.

Los fondos de página están anclados en la página, se desplazan con la barra de desplazamiento de la página y se repiten en la página (a tener en cuenta al realizar su diseño). Cuando la imagen forma parte del fondo de una tabla se adapta al lugar donde está situada y no podemos forzar la tabla para que se adapte a la imagen. Estos aspectos son importantes cuando realicemos un diseño de una imagen para el fondo de una tabla.

Para evitar que la imagen del fondo se repita formando un mosaico, podemos crear una imagen de fondo de gran tamaño aunque requeriría excesivo tiempo para ser descargada, por lo que no suele hacerse. Debemos obtener una imagen que se repetirá para formar el fondo de nuestra página. Eso significa que la imagen que creemos debe ser continua, es decir, que el borde derecho y el izquierdo, situados una a continuación de otro, no proporcionen saltos de imagen; lo mismo que para los bordes superior e inferior.

Comencemos la creación de nuestra imagen para el fondo de la página.

1. Crea una imagen de 500x500 píxeles con fondo blanco.
   

2. Accede a la herramienta de color Curvas y desplaza hacia abajo el extremo blanco de la curva hasta llegar a un valor aproximado de 150 en Y, creando un fondo de color gris. Añade un poco de ruido a esta imagen para dotarla de una cierta textura.
   

3. Partiendo del logo que has creado para nuestro centro, sin el texto añadido debajo de la línea, crea el logo que incluiremos en el fondo de la página. Vamos a meter dentro de un óvalo el logo creado anteriormente, dando al texto y al óvalo un aspecto tridimensional. Crea el óvalo utilizando la herramienta de selección elíptica para obtener una selección oval.
   

4. Elige un pincel redondeado y de borde suaves, por ejemplo el "Circle Fuzzy 17". Crea una nueva capa y sitúa la selección en esa capa; selección que debes transformar en Ruta y trazar la ruta con el pincel seleccionado. Quita la selección.
   

5. Haz dos copias de esta capa. Aplica un desenfoque gaussiano de 8 píxeles para difuminar la capa inferior de las tres que tienen el óvalo dibujado. Y el mismo tipo de desenfoque pero con valor de 3 píxeles para la capa superior. Deja como está la capa intermedia.
   

6. Mueve la capa superior (de las tres que tiene el óvalo) 3 píxeles a la izquierda y 3 hacia arriba. La capa inferior debe moverse 5 píxeles a la derecha y 5 abajo.
   

7. Selecciona la capa superior y con la herramienta de color Curvas lleva la curva a la esquina superior izquierda, dejando la curva como una línea recta y situada en la parte superior de la gráfica. Consigues que brille con un color gris suave. Pon las tres capas que contiene la imagen del óvalo en el modo de combinación Suma.
   
   

   
   

8. Debes aplicar esta misma técnica sobre el texto que vas a incluir en el interior del óvalo. Crea el logo con el Filtro Logotipo "Basico II" y con un tamaño de fuente 35. Una vez creado el logotipo combina todas las capas excepto la de fondo; convierte la imagen a escalas de grises y lleva a la Ventana Imagen donde está situado el óvalo la capa resultante de la combinación de capas anterior.
   

   
   
9. Aplica un desenfoque gaussiano con el valor mínimo, 1 píxel.
   
   
10. Oscurece el fondo de la imagen un poco más para posteriores ajustes que realizaremos. Utiliza la herramienta de color Curvas.
    
    
11. Aplana la imagen uniendo todas las capas disponibles y abriendo Curvas o Niveles ilumina la imagen hasta obtener la siguiente:
    
    

12. Redimensionamos la imagen a 300 x 300 píxeles de tamaño. Ya tienes la imagen de fondo que puedes guardar en formato JPEG o GIF.
    
    

    Así se verá nuestra imagen en una página web

Ya sólo nos queda situar en nuestra página web el logotipo original y como imagen de fondo la obtenida en el apartado anterior. El resultado podemos observarlo a continuación.

Animación y web > Logo y textura