AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Un banner para el blog

martes, 7 de abril de 2009

Me acaban de preguntar como hacer un banner para el blog.

Hay varios sistemas, pero voy a explicaros uno especialmente dedicado a quienes, como yo, no sabemos usar Photoshop ni nada similar y solo tenemos las herramientas básicas de windows para hacerlo.

En principio os diré que podemos partir de una imagen ya preparada como banner, de las muchísimas que nos ofrece esta web.

Allí puedes descargarte todas las que quieras, simplemente registrándote.
Una vez hecho este paso, verás un catálogo de temas. Pincha en uno para ver los banner que hay y cuando veas uno que te guste lo pinchas. Se abre en una página el banner solo. Lo pinchas con el botón derecho y le das a Guardar imagen como... (o algo así) y la podrás ver luego en tu pc.

Una vez realizado este paso tienes dos opciones.
1ª.- Pones el banner directamente en el blog, sin letras ni nada, para que el título que tienes se vea encima del banner. Para ello Diseño/Elementos de la página pinchas en Editar del elemento de la cabecera y le das a Examinar para encontrarlo en tu pc. Marcas Detrás del título y la descripción y ¡listo! Ya tienes banner.

2ª Editas tú el banner para ponerle el título con letras chulas.
Para ello abres Paint y pinchas en Edición y en Pegar desde. El banner se colocará en el espacio de dibujo. Solo tendrás que escribir encima, con la herramienta adecuada, el título del blog y el subtítulo si lo tienes.
¡Cuidado! Si el área de dibujo es mayor que el banner has de arrastrar la zona blanca hacia arriba y hacia la izquierda, o cuando guardes el banner, se verá la zona blanca.
En este caso has de marcar la opción: En lugar del título y la descripción o se verían dobles.

Nota: Paint viene de serie con Windows. Lo encontrarás en Inicio/Todos los programas.
Para más información acerca de como usar Paint, aquí lo explico, pasito a pasito.

Pero a lo mejor quieres un banner más personal, con imágenes tuyas, aunque las que tienes no te sirven como cabecera, pues o son muy grandes, o muy pequeñas, o solo quieres una parte de esa imagen pero no toda y que el resto sea liso, o sea otra imagen, etc.
Para esto también Paint nos va de perlas, pero como la explicación es muy larga pincha y verás


Vamos a rizar el rizo.
Hasta este momento en que estoy escribiendo esta entrada, este es el aspecto de la cabecera de este blog.


Pero voy a preparar un banner para colocárselo, banner que, a buen seguro, ya hayas visto al entrar a leer ésto y voy a explicarte, paso a paso, como lo he hecho.

Para empezar me he descargado una imagen desde la página que menciono más arriba. Es la imagen que hay en el fondo de todo, la de color azul con la rosa a la derecha.
He abierto paint y he pegado el banner con el sistema que te explico más arriba, Edición/Pegar desde, luego he ampliado el área de trabajo hacia abajo y he pegado la imagen que me caracteriza, esa en la que estoy simpsoneada. Así se veia en mi pantalla:


A continuación he recortado la imagen simpsoneada para quitar ese fondo blanco.
Para hacerlo he cogido la herramienta de recorte irregular y, con mucho cuidado, he ido resiguiendo la imagen. (Confieso que me cuesta, me resulta dificil mover el ratón alrededor de una imagen, pero tampoco buscaba la perfección absoluta, además el hecho de que el fondo sea liso me va a permitir pintar las zonas que sean necesarias). Aquí puedes ver el efecto de recorte.


Luego he arrastrado la imagen hacia arriba hasta colocarla donde quería.

Luego un poco de retoque con el pincel y el lapiz para cubrir las zonas blancas.



y añadir las letras.



Puedes elegir qué tipo de letra quieres.



Como ves lo he hecho en dos partes para poder poner cada línea de un color y estilo diferente.



Una vez terminado lo he colocado editando el elemento.



Y el efecto final puedes verlo aquí mismo, en la cabecera de este blog.
Nota final: Al principio te decía que quizá tu imagen es más grande, (lo ideal son 800 x 200), o más pequeña. En el primer caso deberías redimensionarla y paint no es lo más adecuado para hacerlo, pero si sirve para recortarla.
Si es más pequeña puedes hacer un montaje de imágenes. En este caso te aconsejaria que descargaras algun banner de esos y lo uses de base, así sabrás las medidas exactas. Luego vas pegando desde y añadiendo imágenes encima hasta cubrirlo.
Cuando pegas desde... puedes mover la imagen y hasta que no pinchas fuera no se queda quieta. Una vez pinchado fuera del espacio de la imagen ya no vas a poder moverla.

Imprime esta entrada

23 comentarios. ¿Quieres añadir el tuyo?

  1. Elba ha dicho
  2. ¡¡Hola Eulalia !!! veo que has batido tu propio record...¡ tuneaste Tuneando...!!! amiga y que lindo quedó...te mando un montón de besos y va e-mail...Elba ( abuelacuentacuentos )

  3. Toi ha dicho
  4. Muy bonito si señor, cada dia te superas, muchas gracias x estar ahi en nuestras dudas.
    Un b7

  5. gloria ha dicho
  6. gracias eulalia, te superas cada día y lo compartes con todos nosotros, te doy las gracias por ello.
    saludos.

  7. HÃŦĄķє☻ķคкдŠħľ ha dicho
  8. hola eulalia por q no puedo cambiar el banner en mi plantilla ya he intentodo d muchas formas pero igual no me aparece el banner por favor ayudame

  9. Eulalia ha dicho
  10. HATAKE:
    Es probable que en tu plantilla no sea un banner sinó una imagen colocada en el código. Como ni tienes habilitado el perfil no he podido ver tu blog para darte una respuesta segura.

  11. Eulalia ha dicho
  12. A todos:

    Me alegra que os haya gustado.
    Besos.

  13. Como te gusta a ti ha dicho
  14. Te invitamos a participar en un sorteo mediante un meme,pasa a recogerlo cuando puedas. Besos

  15. ANITA ha dicho
  16. Estupendo tengo que probarlo.Y yo como loca con el Fothochop jeje así es mas fácil.Gracias por tus consejos.

  17. HÃŦĄķє☻ķคкдŠħľ ha dicho
  18. eulalia tengo otro problema con las tres columnas en el pie de pagina es q se me creo fue en la cabezera y no se por q

  19. Eulalia ha dicho
  20. Hatake:
    Veo que has habilitado el perfil. Gracias.
    Como imaginaba el banner no es tal, sinó una imagen que está incluida en el código de la plantilla. Si quieres cambiarlo has de buscar esto
    #headerwrapper{
    background-image:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/banner_head.jpg);
    background-position:center;
    y cambiar esa dirección que hay entre paréntesis por la de tu imagen.

    En cuanto a tu segundo comentario, sinceramente no tengo ni idea de lo que intentas decirme.
    No veo que haya 3 columnas al final del blog, lo que seria el footer, es más no veo que haya ninguna clase de footer. Y tampoco las veo en la cabecera. De todas formas ten cuidado si añades algo a esta plantilla, ya que no es de blogger y si la fastidias no podré ayudarte ya que solo le meto mano a las originales.
    Saludos

  21. Eulalia ha dicho
  22. Como te gusta a ti:
    Voy a ver. Gracias por pensar en mi.
    Saludos.

  23. Eulalia ha dicho
  24. ANITA: Me pasa como con los mutantes, "la necesidad crea el órgano" En mi caso el desconocimiento y la torpeza en usar otras cosas me ha hecho investigar mejor las posibilidades de lo que tengo.
    Saludos.

  25. HÃŦĄķє☻ķคкдŠħľ ha dicho
  26. Eulalia lo q pasa es no he publicado nada en el pie d pagina por eso no se ve pero si publico me aparace arriba del titulo del blog y no se q hice para q apareciera arriba por favor ayudame.
    visita el blog para q veas te voy a dejar un ejemplo

  27. ANTESVA ha dicho
  28. Hola EULALIA,gracias por todo los consejos que nos das, lo del banner
    estupendo los estoy poniendo en el blogs, un abrazo
    ( ANTESVA )

  29. ANTESVA ha dicho
  30. EULALIA, me puedes decir como se puede achicar el banner,cuando los pongo en el blogs,parece que quedan
    un poco grande ,gracias
    (ANTESVA)

  31. 凸(◣_◢)凸[TOBI][UCHIHA]凸(◣_◢)凸 ha dicho
  32. eulalia es tengo un pequeño problema con el banner pero no se si es la cabezera o el banner
    q bn tutorial

  33. Inma ha dicho
  34. Hola Eulalia, ayer me dieron un premio y al pensar a quién se lo envio, me he acordado de todos vosotros que pasais tanto tiempo enseñando lo que sabeis. Yo os estoy muy, pero que muy agradecida pues lo poquito que voy haciendo, os lo debo a vosotros.
    Espero lo aceptes y te guste.
    Un beso

  35. ><)))º>·pEpItO·tF ha dicho
  36. Yo soy de los que usa el photoshop. Dices, "para los que no usamos Photoshop, ni nada de eso", !coñe! ¿!y para los que no usamos paint!?...
    Quisiera decir, que hay una serie de webs o pagina, que son generadores de banners, es decir, en las que nos podemos hacer un banners de una forma sencilla, y en las que podemos elegir; Fondo, colorers, efectos de animacion, fuente o tipo de letra, etc.
    Como te he dicho, yo le doy al photoshop, pero en su dia, usaba estas paginas para estas cosas, te dejo aqui algunas, por si quieres hecharle un vistazo.
    ·http://www.topsiteguide.com/Hacer-Banner-Animacion.asp
    ·http://banners-online.ciberzonia.net/
    ·http://www.antssoft.com/swftext/index.htm
    ·http://www.bannerfans.com/banner_maker.php

    Estas son algunas, pero hay muchas mas... Sin necesidad de photoshop, ni PSP, ni Paint, ni cosa parecida.
    Un saludo. P&P

  37. Eulalia ha dicho
  38. te me enfades, hombre. Los que si sabeis usar photoshop no necesitais que nadie os explique como hacer virguerías con las imágenes.
    Por otro lado, aunque desconocía estas u otras páginas, si sabía que existían, pero esta entrada está dedicada a los que nos gusta trastear con estas cosas.
    Un abrazo.

  39. Mabel ha dicho
  40. Hola Eulalia, he hecho el banner para la cabecera, lo subí a Picasa, lo hice de 970x145 pixels porque mi cabecera es de 970 pero al subirlo al blog sale chiquitito arriba, lo he dejado allí para que lo vea, que puede estar pasando ?
    Aprendí el Paint, hice una composición propia pero no alcanzo a entender dónde esta la cosa, podría ayudarme, gracias.
    Como siempre es en el blog de prueba, que es: Probaryaprender

  41. Eulalia ha dicho
  42. Mabel:
    Quizá copiaste la dirección de la imagen desde la página de la miniatura. Se ha de pinchar en la miniatura para que la imagen se abra sola, en grande y copiar la url desde allí.
    De todas formas un banner se puede subir directamente desde el pc, editando el gadget de la cabecera.

  43. Mabel ha dicho
  44. Gracias Eulalia, lo hice desde mi PC y funcionó. Estuve toda la tarde de ayer haciendo el banner y luego cuando surgió la pequeña imagen, estaba tan despistada que ya no tenía coherencia, por eso recurrí a tu ayuda ... el resultado me gusta.
    De nuevo gracias, recibe un afectuoso abrazo por tanta dedicación a ayudar a las despistadas como yo.
    Te comento que soy cabeza dura y segui investigando sobre pegar la cabecera a la navbar y resultó que tenía que ver con el margin en header y header h1, por si te es de utilidad te comento que había que poner 0 y 5px en ambos lugares.
    Cariños

  45. ¦ĐσЏgĿαŠ¦ ha dicho
  46. graciaas me sirvio de mucho lo del banner :D hace tiempo lo deseaba hacer pero no sabia como.... y en especial me quede admirado con lo de paint jejeje grax

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.