Cocina tu propio logo al estilo Bulma.


Seguro que muchas veces has deseado saber como hace el grupo de desarrolladores del Web para conseguir rótulos tan guapos en las secciones y en nuestro título. Sigue leyendo, hemos publicado la receta para ti…


Antes de empezar la creación de un Logo hemos de tener instalados los siguientes componentes:

  • Un entorno X-windows.
  • The Gimp, como editor gráfico.
  • El paquete de fuentes Freefont.

Los dos primeros, un entorno X y el Gimp no son problemas en cualquier distribución de Linux, en la mayoría vienen en los CDs básicos. Sin embargo el paquete Freefont requiere un esfuerzo adicional. Si quieres algo de ayuda para instalarlo puedes mirar este artículo.

Una vez tenemos todos los componentes instalados podemos poner en marcha el Gimp. Una vez abierto seguiremos los siguientes pasos:

  • Necesitamos otro logo de Bulma, cualquiera de las secciones será suficiente. Una vez guardado lo abrimos con el Gimp.
  • Abrimos otra ventana nueva donde vamos a pintar el nuevo logo. Elegir el tamaño de la ventana conforme al tamaño del logo que se quiere realizar.
  • Seleccionamos la herramienta Añadir Texto a la imagen .
  • Hacemos un click dentro de la región del nuevo documento en blanco. A continuación debería salir una ventana de diálogo para insertar la cadena de texto que queremos y la fuente deseada. La fuente usada para la web de Bulma es Zaleskicaps. Seleccionamos la cadena, la fuente y le damos a aceptar. Ahora deberíamos tener nuestro logo en negro sobre fondo blanco.
  • Nos situamos en la otro ventana, la que tiene un logo de bulma. Selecionamos la herramienta para Recoger colores de la imagen y absorvemos el color de la primera letra de Bulma para el color que usaremos para pintar, debería ser un amarillo como el que sale en la web.
    Depués invertimos los colores de fondo y de pintado y volvemos a absorver el color pero esta vez de la última letra del logo de bulma. Ahora deberíamos tener una naranja de pintado y un amarillo de fondo. Volvemos a invertir fondo por pintado.

  • Seleccionamos la herramienta Rellenar con un gradiente de colores y nos colocamos en la ventana donde está nuestro logo en negro. Hacemos un click al inicio del logo y sin soltar desplazamos hasta el final del logo. Ha de salirnos una linea que atraviesa la imagen. Soltamos y voila! ya tenemos la imagen rellenada con un gradiente.
  • Por último nos queda hacer la sombra. Muy importante ahora hemos de separar las capas, de fondo y del logo. Para ello pulsamos sobre el fondo, dentro del menú capas elegimos la opción Capas, canales y caminos…. A continuación nos sale un diálogo con información sobre nuestro documento, pulsamos el botón para Nueva Capa y vemos como nos realiza la separación.
  • Una vez tenemos las dos capas nos aseguramos de tener seleccionada la capa del logo y pulsamos sobre el fondo y vamos a las secciones Script-Fu -> Sombra -> Sombra arrojada . A continuación aparece un diálogo que nos permite elegir los parámetros de la sombra, el desplazamiento en el eje X y en el Y y el nivel de opacidad. Para los logos de las secciones nosotros usamos un desplazamiento de 2 y un nivel de opacidad de 8.
  • La imagen ya está lista… ahora solo hay que meterlo al horno y darle forma… JPEG, PNG o lo que se desee… 😉

    P.D: Gimp da mucho juego y es sencillo, probar a jugar con los colores, las fuentes y algunos Filtros y vereis unos sorprendentes resultados.

Este post ha sido traido de forma automatica desde https://web.archive.org/web/20140625063149/http:/bulma.net/body.phtml?nIdNoticia=573 por un robot nigromante, si crees que puede mejorarse, por favor, contactanos.


Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.