Como crear una barra de navegación Web con GIMP

GIMP como muchos de uds lo saben es un potente editor de gráficos de código abierto, que es totalmente gratis y viene incluido en casi todas las principales distribuciones de Linux actualmente, además también corre en MS Windows y es el sustituto por preferencia de Adobe Photoshop.

[ad#ga-cuadrado]

En esta oportunidad vamos a ver en unos pocos pasos como crear una barra de navegación Web en Gimp que se verá como esta:

Barra Navegación Web Final

Barra Navegación Web Final

además de aprender un poco más del uso de las herramientas de GIMP.

Paso 1. Crear Nuevo Documento

Para crear un nuevo documento en GIMP vamos al menú de Archivo>Nuevo o presionamos Ctrl+N y creamos un archivo de 700px de ancho por 110px de alto (puedes colocar el tamaño según tus necesidades)

Archivo Nuevo 700px x 110px

Archivo Nuevo 700px x 110px

Hacemos click en Aceptar y continuamos.

Paso 2. Crear Nueva Capa

Vamos al menú de Capa>Capa Nueva… y la nombramos borde, también puedes crear una nueva capa presionando Mayús+Ctrl+N.

Nota: Mayús es igual a la tecla Shift

Paso 3. Hacer Rectángulo

En Caja de Herramientas seleccionamos la Herramienta de Selección de Rectángulos selec-rect o presionamos R y hacemos un rectángulo como el siguiente:

Rectangulo para la barra de navegación

Rectangulo para la barra de navegación


Este rectángulo es de aproximadamente 680px de ancho por 85 pixels de alto. Puedes ver el tamaño del rectángulo en la parte inferior de la caja de herramientas.

Paso 4. Redondear

Vamos al menú Seleccionar>Rectángulo redondeado… y seleccionamos 30% luego seleccionamos la Herramienta de Relleno herramienta-relleno o presionamos Mayús+B y rellenamos la selección de blanco

redondeado

Paso 5. Capa color

Creamos una nueva capa (Mayús+Ctrl+N) y la llamamos color

Paso 6. Borde

Vamos al menú Seleccionar>Encoger [Shrink]… y colocamos 4px

Paso 7. Color

Seleccionamos el color de frente 84cef1 y el color de fondo 3276ff:

gimp-color-barra

Paso 8. Rellenar

Seleccionamos la Herramienta de Mezcla herramienta-mezcla o presionamos L y arrastramos desde la parte superior a la inferior del rectángulo haciendo click con el boton izquierdo. Se debería ver algo como:

degradado

Luego vamos al menu Seleccionar>NadaMayús+Ctrl+A)

Paso 9. Sombra

Seleccionamos la capa que llamamos borde, vamos al menu Filtros>Luces y sombras>Sombra arrojada y colocamos lo siguiente:


Parametros de la sombra

Parametros de la sombra


Deberíamos ver algo como esto:


Barra de Navegación con Borde

Barra de Navegación con Borde



Paso 10. Texto

Ahora agregamos texto seleccionamos la Herramienta de Texto herramienta-texto (o presionamos T ) y escribimos Inicio y en la Caja de Herramientas seleccionamos los siguientes valores Tipografía=Verdana Tamaño=30 Color=Blanco. Deberías ver algo como esto:


Texto menú barra de navegación

Texto menú barra de navegación


Paso 11. Separador

Para hacer el separador entre los distintos Items del menú creamos una nueva capa y la llamamos separador, luego hacemos un rectángulo (R) de unos 3 px de ancho y lo llenamos (Mayús+B) con Blanco.


Separador Barra de Navegacion

Separador Barra de Navegacion



Luego colocamos la opacidad en 20%


Opacidad Separador

Opacidad Separador


Y nos queda algo como:


Separador Menu

Separador Menu


Paso 12. Duplicar y Finalizar

Agrega cuantos items necesites y duplica los separadores para obtener un menú como este:



Barra Navegación Web Final

Barra Navegación Web Final

Eso es todo por supuesto puedes cambiar los colores de fondo y el tipo y tamaño de letras a tus gustos y necesidades.

Aquí les dejo el archivo para que lo puedan descargar y modificar en Gimp.

gtk-go-downDescargar Archivo

Espero que les sirva, cualquier duda o sugerencia pueden dejar sus comentarios abajo.

Saludos

Olivers

Si te gusto este artículo y quieres recibir más noticias y tutoriales de Gimp y de las noticias del mundo del Software Libre, Código Abierto, Open Source y Linux subscríbete a nuestro Feed de Noticias RSS aquí o siguenos ahora por nuestra cuenta de Identi.ca o Síguenos en Twitter

Share

olivers

Fanático del software libre, fotógrafo de fin de semana. Co-fundador de tutanda.com y ddw.cl. Me puedes seguir en Twitter @odeabreu.

También te puede gustar...

9 Respuestas

  1. Victor dice:

    Gracias por compartir, me ha ayudado mucho.

  2. arkev dice:

    yo solo tengo una duda como puedo dividir este menú en imágenes, en Photoshop lo haría con la herramienta slides pero en el gimp no he encontrado como, no se si tu me puedes ayudar?

    • Olivers dice:

      Hola Arkev, hay varias formas, la más sencilla es copiar y pegar aunque es algo engorroso.

      Puedes crear guias (haciendo click sobre la regla y arrastrando sobre la imagen donde quieras cortar) y luego ir al menú de Imagen>Transformar>Guillotina.

      Tambien hay un filtro en el menú de Filtros>Web>Slice…

      Espero que te sirva cualquier duda vuelve a escribir

      Saludos

  3. juanmanuel dice:

    hola, me gustaría saber cuando termine esa barra de navegación, como la instalo en firefox porque tengo entendido que solo admite las barras de extensión .xpi para firefox, que alguien me diga para poder hcer una barra respetable en mi entidad, solamente quiero aprender, saludos a todos.

    • Olivers dice:

      Hola Juanmanuel, esta barra NO es para Firefox, es un simple tutorial para hacer una barra de navegacion (menu) para una pagina web que estes haciendo y la puedas incluir en tu diseño y en tu codigo html.

      Saludos

  4. yaneth dice:

    Hola! descargué The Gimp 2.6.8 para windows, y no tiene el filtro Slice,…. como hago?, donde consigo el complemento???

    • Olivers dice:

      Hola yaneth puedes probar el otro método que mencioné arriba:

      Puedes crear guias (haciendo click sobre la regla y arrastrando sobre la imagen donde quieras cortar) y luego ir al menú de Imagen>Transformar>Guillotina.

      Espero que te sirva, si puedes envia una pantalla donde muestras el menú de Filtro>Web

      Gracias
      Saludos

  5. gibrain dice:

    Muchas gracias estoy trabajando en una empresa y estoy utilizando solo soft libre para mis trabajos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *