Páginas

12/1/13

Crear fondo personalizado para Blogger. Crea tú propia plantilla personalizada

Hay varias formas de personalizar nuestro blog ya sea utilizando las plantillas que nos ofrece blogger, plantillas XML o plantillas creadas en el programa llamado Artisteer.Las plantilla que yo realizo no están creadas con ninguna de las opciones anteriores, nuestro fondo personalizado lo crearemos con el programa PhotoShop. El programa lo podréis encontrar en la web o en Youtube. Yo os dejo un enlace online.


También necesitaremos está plantilla(para blog de 2 columnas y de 3 columnas)esta creada por mi así que si la utilizáis o compartís recordar en dar créditos ya que me ha llevado mucho tiempo y trabajo encontrar el tamaño ideal y ajustar las guías. En mi opinión queda mucho mejor la plantilla de 2 columnas ya que las imágenes que pongáis se verán con más detalle.


Plantillas 2 y 3 Columnas.



Una vez abierta la plantilla en el programa PhotoShop, veréis unas guías, no las modifiquéis ya que son los limites donde colocar las imágenes en el fondo para que no aparezcan cortadas, puesto que dependiendo de las dimensiones de las pantallas del pc de las personas que vean vuestro blog cuando lo visiten pueden verlo cortado ya que una pantalla de pc con menos pulgadas es más reducida.


Las imágenes que suelo descargar para crear los fondos para blogger las encuentro de forma gratuita en la web, por ejemplo en imágenes Google donde podréis encontrar pack de Scrap Kit Freebies, vectores etc.. es recomendable que las imágenes estén en formato PNG(son imágenes sin fondo)de esta forma os evitareis tener que quitarlo, si están en formato JPG también podréis eliminar el fondo con las herramientas de PhotoShop, os dejo el enlace al tutorial que realice sobre estas herramientas para que las conozcáis un poquito mejor por si no habéis utilizado nunca este programa.

En este tutorial explico cómo utilizar las herramientas de Photoshop.

En este fondo utilizare una imagen en formato JPG donde veremos cómo aplicar un efecto de difuminado en el contorno de la imagen para ponerla en el fondo que creemos.


También necesitaremos un hosting de imágenes, en alguna ocasión ya os he comentado el que yo utilizo es imageshack es gratuito, solo os recomiendo que os creéis una cuenta para que no se eliminen las imágenes después de un tiempo.

Bueno ahora ya podemos comenzar a crear nuestro fondo para blogger, pero lo primero es elegir la plantilla que utilizaremos para poder después aplicar la que creemos. Es recomendable tener un blog para hacer pruebas, cuando tengáis listo el fondo definitivo solo tenéis que ponerlo en el blog principal con las mismas medidas para que se quede ajustado. Una vez en vuestro blog puede que quede todo un poco des configurado, no os preocupéis no se estropean las entradas que tengáis publicadas en el blog, puede que luego tengáis que modificar el tipo de escritura, tamaño y demás pero no se pierde nada, si queréis podéis hacer una copia de seguridad del blog lo encontrareis en Diseño, Plantilla, Crear copia de seguridad



Ahora abriremos Photoshop y buscareis la plantilla que os he dejado para realizar el fondo.
Si no  tenéis las guías  fijas ,para que os aparezcan estas al abrir la plantilla tendréis que presionar las teclas Control+R del teclado del pc.


Como veréis hay varios trazos de guías las de los laterales son para no sobrepasar la imagen y que quede cortada ya que hay varios tamaños de pantallas de pc como os he comentado al principio del tutorial.


Lo mismo ocurre con las guías de arriba y abajo, si pasamos de esos limites la imagen quedara cortada y no se verá.


Por último tenemos las dos guías juntas en ambos lados,no se puede sobrepasar la de dentro ya que nos tapara la publicación del blog(texto,imágenes,etc..)los adornos o imágenes que pongamos en el fondo.


Una vez comentado esto que aunque no parezca importante lo es, vamos a comenzar a colocar nuestras imágenes, para ello iremos a archivo y elegiremos la opción colocar.




En la ventana que se abrirá elegís la imagen o fondo que queráis poner y hacéis clic en Enter(teclado pc)o en la palomilla de la barra de herramientas(la he dejado en un círculo rojo en la imagen).


Si el fondo(textura)que utilicéis es liso(sin imágenes)ajustareis a la plantilla la imagen, por el contrario si utilizáis un fondo con imagen(como en mi caso) tenéis que poner primero una textura de color similar ajustada en la plantilla y luego colocar la imagen que utilizareis, en mi caso la elegí blanca ya que en el siguiente paso la difuminare.



Para difuminar una imagen iremos a las herramientas que encontraremos a nuestra izquierda, elegiremos herramienta borrador, arriba en la otra barra de herramientas cambiaremos la dimensión de esta y seleccionaremos el pincel de difuminado.


Ahora solo tenéis que pasar la goma de borrar alrededor de la imagen, no la acerquéis demasiado sino se borrara mucho, si os equivocáis el atajo para retroceder es presionando las teclas Control, Atl ,Z a la vez.

De la misma forma que hemos colocado la imagen para el fondo, colocaremos las demás, para que sea más cómodo y trabajar con la medida original y ver mejor los detalles, iremos a la barra de herramientas de arriba y elegiremos vista y seleccionaremos Pixeles reales, para ver el efecto podéis seleccionar encanjar en pantalla y así seguir después trabajando y que quede a vuestro gusto.


Para dar diferentes efectos a las imágenes que coloquéis como sombras,contorno, color, etc.. haremos doble clic con el ratón en la imagen, esta seleccionada de color azul, veréis que os aparece una ventana con los efectos, solo tenéis que marcar la palomilla del efecto deseado.


Dependiendo del gusto de cada uno podemos dar una opacidad en la zona donde aparecerán nuestras publicaciones, esto es recomendable si queréis poner un texto clarito u oscuro, así destacara más. Para hacer esto crearemos una nueva capa esta opción la encontrareis a la derecha abajo del todo os la he dejado en un círculo rojo en la imagen.


En las herramientas de la izquierda seleccionaremos la herramienta marco rectangular, fijaos bien de tener la nueva capa seleccionada la veréis en color azul. Con esta herramienta crearemos un rectángulo justo en el limite de la guía de dentro que hay en el fondo.


Iremos de nuevo a las herramientas de la izquierda y seleccionaremos la herramienta bote de pintura en las opciones de más abajo  podréis seleccionar el color, mi recomendación es que lo hagáis de color blanco pero eso lo dejo a vuestra elección. Para aplicar el color solo tenéis que hacer clic sobre la imagen, recordar tener seleccionada en color azul la capa donde queréis aplicar el color, en este caso la que hemos creado en los pasos anteriores. Para des seleccionar este paso y seguir trabajando solo hay que presionar las teclas Contro , D a la vez.


El último paso será bajar la opacidad a esta capa, de esta forma la transparentaremos dejando que se vea el fondo pudiendo apreciarlo.


El original quedaría así.


Para que se vea por quien está realizado el fondo podéis añadir un texto, yo suelo poner la dirección de mi blog.



Ahora solo hay que guardar el fondo, yo suelo hacerlo en formato Photoshop(PSD) por si tengo que volver a editarlo(que en más de una ocasión ocurre así que os aconsejo que lo hagáis por si hay que corregir y cambiar el tamaño o de sitio las imágenes)y en formato JPG el fondo ya acabado para subirlo al blog, para ello iremos de nuevo a archivo y seleccionaremos guardar como, pondremos un nombre para distinguirlo después y lo guardaremos.


Con esto ya tenemos listo nuestro fondo, si utilizáis la plantilla de 3 columnas las imágenes os quedaran un poco más pequeñas ya que los laterales(entre las guías que tiene la plantilla puestas)son más pequeñas. El siguiente paso será subir nuestro fondo a imageshack os hacéis una cuenta ya que es gratuito, puesto que con el tiempo se eliminan las imágenes. Os recomiendo seleccionar optimizar sin cambiar el tamaño.



Ahora haremos clic en cargar ahora.


Veremos cómo se cargan las imágenes, nos aparecerán unos códigos una vez subido el fondo, ahora dejaremos la página abierta e iremos a nuestro blog, a continuación iremos a diseño y seleccionaremos añadir un dadget, entre las opciones que aparecen elegiremos HTML/JavaScript.


En la ventanita que aparece pegareis el siguiente código:

<style type="text/css">body {background-image: url(AQUÍ PEGAREMOS EL ENLACE DIRECTO DEL FONDO); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }</style>

Recordar eliminar el texto que he puesto en mayúsculas dentro de las comillas en color rojo y sustituirlo por el enlace directo de imageShack.




Ahora haremos clic en guardar y colocaremos el HTML/JavaScript donde queramos, recordar que podíamos mover el código HTML/JavaScript por diseño y colocarlo donde quisiéramos arrastrándolo hasta el lugar elegido, os recomiendo que lo pongáis al final de estas opciones para que no lo eliminéis.



Bueno ya estamos terminando siento que sea tan largo el tutorial pero veréis como merece la pena personalizar vuestro blog.
Ahora iremos a plantilla y haremos clic en personalizar.




Utilizare mi blog de pruebas para que veáis como hacerlo.

Antes de continuar si habéis puesto ya anteriormente un fondo lo tenéis que eliminar, pero esto lo haréis después de los pasos siguientes, iremos a la opción personalizar,seleccionaremos plantilla, ahora elegiremos entre las plantillas la llamada Sencillo, en las opciones de esta elegiremos simple blanco, utilizaremos esta plantilla ya que es la que más opciones de personalizar nos ofrece. 



Ahora iremos a avanzado para poder ver nuestro fondo ya que supongo que sí es la primera vez que aplicáis un fondo personalizado o es un blog recién creado no se tiene que ver el fondo que habéis puesto así que haremos clic en fondos.



En las tres casillas seleccionaremos transparent, si os fijáis ya se ve el fondo en el blog.



En diseño elegiremos si queremos el blog con 2 o 3 columnas, mi recomendación como ya os he dicho es de 2 columnas aunque también podéis elegir  la de 3 columnas. Os dejo seleccionadas en diferente color las que mejor os quedaran.





El siguiente paso será ajustar el ancho para que quede perfecto el fondo, si no tenéis ninguna entrada publicada es recomendable que hagáis una para que veáis mejor los limites de la entrada, también es recomendable tener ya algún Gadger puesto para ver mejor los limites de las columnas laterales del blog, por ejemplo el de páginas y ajustéis mejor el fondo. Encontrareis estos gadger en el mismo sitio donde elegisteis el de HTML JavaScript.




Si habéis realizado algún cambio de los que os he comentado regresareis de nuevo al diseñador de plantillas de blogger, ahora seleccionareis la opción ajustar ancho, como veréis en la imagen que os he dejado están en color verde los limites del fondo donde aparecerán nuestras publicaciones, queda ajustarlo con la cabecera donde hemos puesto las páginas, si vuestro fondo queda desajustado podéis mover las barras que encontrareis en esta opción.



Por último queda personalizar el texto, fondo de imágenes etc.. eso ya lo dejo a vuestro gusto. Os dejo también el tutorial donde veréis como personalizar el blog desde estas opciones.

Espero que os queden fantásticos vuestros fondos.

41 comentarios :

  1. Hola mi corazon!
    Te escribo esta ves para dejarte saber que los programas no se pueden descargar. Esta roto el link, verifica tu tambien a ver si te funciona o es a mi.
    Aunque cabe dejarte saber que hay varios pack de los que creaste fondos personalizados, que el enlace tambien esta roto. Intente descargar algunos de ellos pero no pude.
    Bueno, mil gracias como quiera pues has hecho un buen trabajo aqui en tu blog! Besos y un fuerte abrazo desde New York!
    Siempre te visito, pero hoy fue que me decidi a comentar jajaja! y creo que me pase jejej!
    Bueno no vemos pronto por aca, pues siempre estoy pendiente a tu blog! Dios te bendiga

    ResponderEliminar
    Respuestas
    1. XD ya te comente que los enlaces están rotos y por culpa de compartir los programas de photoshop, pero puedes editar también con un photoshop online o buscando el programa en la web o en Youtube.
      Gracias por tu visita es un placer recibirte en mi humilde blog.

      Eliminar
  2. Wow, mi nina las plantillas tampoco las puedo descargar!
    Podrias verificar y ayudarme, estoy unteresada. Me gustaria descargarla!
    Gracias

    ResponderEliminar
    Respuestas
    1. En cuanto organice el desastre del blog las tendras disponibles un saludo.

      Eliminar
  3. Hola!! Lady Barbitúrica.
    Bueno paso a responder tu pregunta ya que no se que hice y en vez de publicar tu comentario elimine mi respuesta y tu comentario claro esta.
    La resolución no tiene nada que ver de hecho tenemos la misma en el pc,en mi publicación ya comente guardar el fondo en formato photoshop para poder mover las imágenes que colocamos que seguramente es lo que te ocurre,para que el fondo quede bien yo tengo que mover las imágenes más de alguna vez así que prueba ha hacerlo, y sobre que queda cortado el alto he visto que no tienes ninguna publicación aun añade un par de ellas y veras que ya se mueve el blog,recuerda que el fondo es fijo solo se moverá el centro de este. Gracias por dejar tu comentario en mi blog siento mi torpeza de haberlo eliminado espero sigas pasando a visitarme un saludo.

    ResponderEliminar
  4. Despues de mucho buscar porfin encontre esta pagina para modificar el fondo en blogger. Gracias x la plantilla y por el tutorial.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por visitar mi blog un saludo.

      Eliminar
  5. Hola muchacha, al bajar las plantillas desgraciadamente no me salen las lineas para seguir solo me sale un fondo blanco sin las lineas.. que hago? Ademas necesito para un blog de una sola columna de lado derecho...

    ResponderEliminar
    Respuestas
    1. Hola Antonio Perez, bienvenido a mi blog, a su pregunta me he dado cuenta que no puse como poder hacer que aparezcan las guías en photoshop ya que en mi despiste como yo las tengo fijas no caí en la cuenta,para hacerlas visibles tiene que presionar una vez abierto photoshop las teclas Control+R de su teclado para que las guías se vean, de la misma forma si las quiere ocultar realice el mismo paso. Muchas gracias por su comentario y disculpe, un saludo.

      Eliminar
  6. Aprieto Control+R y no me aparecen las lineas :/ que hago?

    ResponderEliminar
    Respuestas
    1. Hola, no se que problema puede haber, ya que yo en photoshop presiono Control y R a la vez y me aparecen, no sera que también presionas el +,en términos de pc cuando se dice control+R por ejemplo solo se presionan las opciones a la vez sin el +, prueba no sea este el problema, un saludo y muchas gracias por visitar mi blog.

      Eliminar
  7. Gracias!!! tu explicacion y tu plantilla me ha ayudado a cambiar el fondo de mi blog...no sabía por donde empezar. Aunque yo subí la imagen como fondo no copie el codigo con el enlace de la imagen subida en html/javascript...no se si hay mucha diferencia en el resultado pero me ha gustado como quedó,carga rápido...lo dejaré así :)

    ResponderEliminar
    Respuestas
    1. Me alegro mucho pasa cuando quieras por mi bog esta a tu disposición un saludo ;)

      Eliminar
    2. Hola Lucia. Tengo un pequeño problema. cuando empecé con el blog puse uno de una pagina Thecutesblog por medio de añadir un gadchet en javascript. Pero hoy de repente ha aparecido encima del mio personalizado y no se como desacerme de el. Sabrias decirme qué puedo hacer?? Por mas vueltas que le doy no hay forma...

      Eliminar
    3. Hola de nuevo consegui meter un respsaldo anterior donde estaba en la opcion de diseño el gadchet correspondiente al fondo y le cambie por lo de arriba. Pero si lo elimino en gadchets se queda como enganchado. Como se eliminan correctamente ese tipo de fondos??El de prueba me va de fabula pero el oficial me esta dando problemas...

      Eliminar
    4. Hola!! siento lo que te ocurre en el blog, yo antes de tener este ya he tenido 3, es una pena en cuanto tocas algo el blog se des configura si se estropea la plantilla.

      Espero que esta solución te ayude,selecciona el tipo de plantilla que tenias cuando pusiste el fondo que me comentas, busca en diseño el HTML/javascrip que tiene el código y lo eliminas, si esto no te funciona ves a plantilla/editar HTML,restablecer plantilla de artilugios a valores predeterminados, y buscas de nuevo el código html si te aparece el fondo anterior y lo eliminas, si no te aparece pones el que hiciste tu.
      Espero se solucione si necesitas más ayuda me lo comentas un saludo linda.

      Eliminar
    5. Muchas gracias Lucia por tu respuesta. :D

      Si es que el javascrispt lo elimine en su día antes de colocar el personalizado. Y dió la casualidad que ayer modifiqué algo (como he hecho siempre, nada raro ahora que lo pienso mas tranquilamente) y apareció el fondo de esa pagina sin que estuviera el javascript en la pestaña diseño. Yo ya alucinando en colores. Instalé una plantilla anterior donde estaba instalado y ahí aparecía el javascript, lo borraba y seguía colocandose encima de mi fondo. Luego sustitui ese javascript por otro código con mi imagen subida y me salia pequeña...cargé otra plantilla pero el javascript estuviera o no en diseño no hacia desaparecer el fondo.y para mas inri se me descolocaron todos los elementos. Pero descolocar codigos y titulos de los gadgets. Que tuve que entrar uno por uno y rehacerlos.Porque no debian cargar las plantillas en condiciones. Que yo tengo guardadas las plantillas cronologicamente segun los gadchets que instalo en el de prueba y en este. Asi que de respaldo tengo de sobra. Tambien edite el html en mis muchos intentos de salir de eso. Ayer fue un dia de locos y tengo la impresion que estos de bloggler estarian haciendo algo y me pillo a mi por medio modificando cosas. En ese momento entré en pánico

      Anoche se arreglo solo, quite el javascript que habia dejado la ultima vez.. ya ves o_O

      Eliminar
    6. Cuanto me alegra que se solucionara todo XD un gran beso y disfruta al máximo tu blog

      Eliminar
    7. Muchas gracias Lucia!! Eso haré :)

      bssss

      Eliminar
  8. Hola.

    He descargado la planilla pero al momento de abrirla en el Photoshop online no me aparecen las guías, es decir, está en blanco ¿Hice algo mal?

    Gracias.

    ResponderEliminar
    Respuestas
    1. No, no has hecho nada mal,siento que no te funcione en photoshop online , no lo habia probado ya que lo tengo en el pc y no me habia dado cuenta de este detalle.
      Si quieres el programa buscalo en youtube, encontraras usuarios que lo comparten.
      Un saludo.

      Eliminar
  9. lo que pasa es que mi blog es un poco mas ancho como le ago

    ResponderEliminar
    Respuestas
    1. Hola aqui te dejo el tutorial para que personalices el blog desde la opción plantilla, entre las opciones que encontraras esta la de ajustar el fondo a tu blog. Un saludo.
      http://decoratublogconlucia.blogspot.com.es/2012/10/personalizar-blog-desde-la-opcion.html

      Eliminar
  10. Holaaa!! cuando descargo la imagen no me salen las lineas ni poniendo cntrl R :(

    ResponderEliminar
    Respuestas
    1. Normalmente si funciona yo hago mis fondos con Photoshop CS5 pero en CS6 también funciona sin problemas. Siento que te ocurra esto pero no puedo ayudarte ya que no se la razón por la cual no te funciona, un saludo y muchas gracias por la visita

      Eliminar
  11. ¡waw! me ha encantado en tutorial, y me ha funcionado a la perfección muchisimas gracias. BESOS.

    ResponderEliminar
  12. Hola Lucía, felicitarte por tu buen trabajo en este tutorial... Soy creativo publicitario y ahora estoy estudiando un master en marketing digital por la Universidad Juan Carlos I. ¿quería preguntarte si es posible hacer el fondo con Photoshop Ps? te lo pregunto porque he visto que en tamaño de imagen sale una opción que es para web. También me gustaría saber cual es el formato en pixeles para crear mi fondo de blog en photoshop. Muchas gracias

    ResponderEliminar
    Respuestas
    1. Puede que ya no necesites la respuesta pues he estado algun tiempo si contestar a preguntas en el blog mis disculpas.
      Si te soy sincera la plantilla que utilizo la hice a ojo utilizando con photoshop y Ps son las siglas del mismo.
      A tu pregunta no utilizo cuando edito la opción de web.
      Te dejo la entrada para que descargues si quieres la plantilla que utilizo para hacer los fondos ya que esta compartida en mi blog para el la quiera utilizar y con photoshop podras ver los pixeles que tiene un saludo .

      http://decoratublogconlucia.blogspot.com.es/2013/01/crear-fondo-personalizado-para-blogger.html

      Eliminar
  13. Hola!
    Te cuento porque la fastidié intentando cambiar el fondo de mi blog! :(
    Intente cambiar el diseño del fondo y salia el fondo crtado y no supe rectificar! y ahora me sale el fondo cortado igual, e intentado cambiar la plantilla, cambiar el fondo pero de ninguna manera!
    http://charmlovely.blogspot.com.es/
    Échale un vistazo aver si me puedes ayudar
    Gracias

    ResponderEliminar
    Respuestas
    1. He dejado la respuesta en tu blog un saludo y perdona la demora en contestar .

      Eliminar
  14. Muchas gracias. He diseñado estos días de atrás varias plantillas pero no se acaban de ver los motivos que he insertado, espero que con este tutorial tuyo ese problema se solvente. Gracias.

    ResponderEliminar
    Respuestas
    1. Espero que lo consiguieras muchas gracias por la visita y el comentario un saludo

      Eliminar
  15. muy bueno tu blog y excelente la informacion mil gracias =)

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti por visitarlo un saludo

      Eliminar
  16. ¡Muchas gracias por tus plantilla de fondos!

    ResponderEliminar