Cómo crear botones de redes sociales con fuentes dingbat

Cuando comencé con mi primer blog no tenía ni idea de la importancia de tener redes de contacto con tus lectores. Uno de los primeros pasos que deberíamos hacer al crear un blog es enlazarlo a nuestras redes sociales mediante unos atractivos botones. En este tutorial os explico un método muy sencillo de crear una botonera personalizada mediante el programa Gimp.

Este post forma parte del mini curso que imparto de Gimp aplicado a Blogger, y aquí podéis consultar el resto de entradas:

Programa del mini curso Gimp para Blogger

Cómo escoger una plantilla para Blogger

Cómo personalizar el blog con el diseñador de plantillas de Blogger

Cómo mejorar el encuadre y luminosidad de una fotografía con Gimp
Cómo conseguir que tus fotos del blog se vean perfectas  
Personaliza la foto de bienvenida de tu blog I

Personaliza la foto de bienvenida de tu blog II 

Antes de comenzar debo advertiros que el método que aquí os explico para hacer nuestros botones no nos permitirá generar efectos al pasar el ratón o al hacer clic, es decir que cambie de color, tamaño o forma. Para ello deberíamos trabajar con un poco más de código. He preferido optar por un método más sencillo y que nos permite Gimp, un programa que desde sus inicios se ha utilizado extensamente para preparar imágenes para la web.

El primer paso consiste en crear una imagen de nuestros botones con el aspecto que deseéis.  En el segundo generaremos el código que subiremos como  gadget html de blogger, pero creedme no es difícil, Gimp hará lo más complicado por nosotros.

Para no hacer muy largo el post en esta entrada os guiaré en el primer paso, y en una próxima en el segundo. Vamos pues a por el tutorial:

Crear una imagen con los iconos de las RRSS

1 Descarga una fuente dingbat con los iconos de tus redes sociales
Si buscas en Google “iconos de redes sociales (mejor en inglés) encontrarás un montón de recursos, muchos gratuitos. A pesar que gimp puede abrir archivos de Photoshop e imágenes vectoriales en este tutorial añadiremos los iconos mediante una fuente dingbat. Este tipo de tipografías nos permite trabajar con imágenes escalables al asignarlas a letras del teclado. Un ejemplo típico serían las fuentes Wingdings que trae Windows por defecto.

Para el tutorial utilizaré la fuente Socicon aunque puedes encontrar muchas más en otras páginas como Dafont.

2 Abre un archivo de Gimp del ancho de tu sidebar
Una vez que instales la fuente en tu sistema crea un nuevo documento en Gimp con el ancho de tu sidebar. También puedes utilizar la imagen de bienvenida que preparamos en el tutorial anterior.

3 Selecciona y copia  los caracteres de representan tus redes sociales
Abre la utilidad mapa de caracteres de Windows y escoje la fuente que acabas de instalar en el primer desplegable.  Los caracteres que componen la fuente aparecen como miniaturas.  Puedes inspecciónalos clicando para aumentar la imagen. Selecciona los iconos que necesites para tus redes sociales. Para ello haz doble clic y se copiaran en el espacio inferior. Lleva la selección al portapapeles de windows pulsando el botón Copiar.

4 Inserta los caracteres en una caja de texto y dale el formato que desees
Ahora en Gimp selecciona la herramienta texto y elige en el panel Opciones de la herramienta la fuente dingbat, en este ejemplo Socicon. Dibuja un marco de texto del ancho del documento. Pulsa simultáneamente las  teclas CRTL + V para importar los caracteres seleccionados. Ajusta el tamaño y selecciona un color a juego con tu blog. Para separarlos utiliza la opción modifica el espaciado entre letras del panel opciones de la herramienta.

5 Centra y recoloca los iconos
El texto en Gimp se inserta como una capa nueva. Con la herramienta Mover puedes desplazarla y centrarla en el documento. Recuerda que debes trabajar  en la escala en la que se verá el gadget, así que visualiza al 100% la imagen para ver el resultado (pulsa la tecla 1)

6 Guarda la iamgen en PNG o en JPG
Guarda la imagen en formato PNG en menú Archivo/ Exportar. Recuerda que todas las capas se fusionarán al exportarla. Si deseas trabajar sobre las capas deberás guardarla en el formato de Gimp: XCF.

En la próxima entrada crearemos el código necesario para enlazar a la imagen nuestras redes sociales y aprenderemos a instalarlo.

Espero que aunque breve os haya sido útil. ¿Conocías la utilidad mapa de caracteres? La verdad es que es fantástica, te permite explorar todo los caracteres especiales de una fuente: letras griegas, signos matemáticos, flechas... Échale un ojo, tenemos un montón de elementos gráficos que puedes utilizar en cualquier programa que maneje texto.

Hasta la próxima entrada ;)