Algunos/as nos habeis comentado como conseguimos que algunos de nuestros enlaces y botones tengan otro tipo de fuente.
Para el diseño de los blogs de Yenodeblogs, la respuesta es muy sencilla: son imágenes.
Esta entrada la dedicaremos a realizar un botón. Por ejemplo el botón de leer más:
Para ello utilizaremos varias de las herramientas de las que ya hablamos en Herramientas I.
Abrimos Paint y GIMP.
En este caso teníamos el código html del color que queriamos utilizar, por lo tanto, en GIMP, clicamos sobre los cuadros de color...
... y en Notación HTML escribimos el código de nuestro color y damos a ENTER.
¿Por qué hacemos estos pasos?
Porque Paint no funciona con los códigos de html y necesitamos conocer la combinación de colores que se realiza para conseguir ese color. ¡Y ya la tenemos!
Si os fijais, por encima de la anotación vienen una serie de letras y numeritos, nosotros vamos a quedarnos con estas:
Abrimos el paint, y vamos a Colores - Modificar colores - Definir colores personalizados - y en "Rojo-verde-azul" copiamos los codigos que nos facilitan en GIMP. Agregamos el color personalizado, le damos a guardar, y listo! ya tenemos nuestro color incluido en la tableta de paint!
Ahora elegimos la forma que queremos para nuestro botón, en este caso, yo he elegido el eclipse.
Elegimos el tipo de fuente que queremos para nuestro botón.
Y escribimos sobre él.(con la opción transparente)
¡Ya tenemos nuestro botón con una fuente diferente casi terminado! Solo nos falta eliminar el fondo blanco de la imagen, para que no aparezca en nuestro blog, para ello regresamos a GIMP, le damos a Abrir y subimos nuestra imagen, vamos a Colores - Color Alfa - nos aseguramos que en "Desde" aparezca el color blanco y le damos a OK. Guardamos la imagen. ¡Cuidado! debemos guardarla con extensión .png sino el fondo de color blanco no desaparecerá.
Ahora queda lo más sencillo, incluirla en nuestra plantilla.
Nos situamos en el lugar donde queremos colocarla, en nuestro caso, en el lugar donde se encuentra el CSS del leer más. Y simplemente copiamos: background: url ( URL DE NUESTRA IMAGEN) no-repeat;
Parece más pesado de lo que es. Pero en la práctica puedes tardar unos 5 minutos en realizarlo únicamente. Hay páginas donde puedes generar tus botones, sin embargo a mí me gusta hacerlo así (algunas veces solo en GIMP) pero entiendo que paint os resultará más sencillo) ya que de esta manera puedo elegir totalmente como quiero que sean, como en este caso, una fuente de letra que defina a nuestras entradas, y que sean totalmente distintos a los demas :)
Para el diseño de los blogs de Yenodeblogs, la respuesta es muy sencilla: son imágenes.
Esta entrada la dedicaremos a realizar un botón. Por ejemplo el botón de leer más:
Para ello utilizaremos varias de las herramientas de las que ya hablamos en Herramientas I.
Abrimos Paint y GIMP.
En este caso teníamos el código html del color que queriamos utilizar, por lo tanto, en GIMP, clicamos sobre los cuadros de color...
... y en Notación HTML escribimos el código de nuestro color y damos a ENTER.
¿Por qué hacemos estos pasos?
Porque Paint no funciona con los códigos de html y necesitamos conocer la combinación de colores que se realiza para conseguir ese color. ¡Y ya la tenemos!
Si os fijais, por encima de la anotación vienen una serie de letras y numeritos, nosotros vamos a quedarnos con estas:
Abrimos el paint, y vamos a Colores - Modificar colores - Definir colores personalizados - y en "Rojo-verde-azul" copiamos los codigos que nos facilitan en GIMP. Agregamos el color personalizado, le damos a guardar, y listo! ya tenemos nuestro color incluido en la tableta de paint!
Ahora elegimos la forma que queremos para nuestro botón, en este caso, yo he elegido el eclipse.
Elegimos el tipo de fuente que queremos para nuestro botón.
Y escribimos sobre él.(con la opción transparente)
¡Ya tenemos nuestro botón con una fuente diferente casi terminado! Solo nos falta eliminar el fondo blanco de la imagen, para que no aparezca en nuestro blog, para ello regresamos a GIMP, le damos a Abrir y subimos nuestra imagen, vamos a Colores - Color Alfa - nos aseguramos que en "Desde" aparezca el color blanco y le damos a OK. Guardamos la imagen. ¡Cuidado! debemos guardarla con extensión .png sino el fondo de color blanco no desaparecerá.
Ahora queda lo más sencillo, incluirla en nuestra plantilla.
Nos situamos en el lugar donde queremos colocarla, en nuestro caso, en el lugar donde se encuentra el CSS del leer más. Y simplemente copiamos: background: url ( URL DE NUESTRA IMAGEN) no-repeat;
Parece más pesado de lo que es. Pero en la práctica puedes tardar unos 5 minutos en realizarlo únicamente. Hay páginas donde puedes generar tus botones, sin embargo a mí me gusta hacerlo así (algunas veces solo en GIMP) pero entiendo que paint os resultará más sencillo) ya que de esta manera puedo elegir totalmente como quiero que sean, como en este caso, una fuente de letra que defina a nuestras entradas, y que sean totalmente distintos a los demas :)
No hay comentarios:
Publicar un comentario
Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.