22 de Junio de 2017
Abr
23

Novedad: ¡Completa el diseño de tu blog con una imagen de fondo!

¿Te has fijado en algunas webs, que a veces ponen una imagen fija en el fondo de página? Tienes ahora mismo un ejemplo en la portada de Meristation. Pongo aquí una captura porque esto no estará siempre, y así me sirve de ejemplo:


Pulsa sobre la imagen para ampliar

Si consigues ver la que hay ahora en meri, verás que la imagen se mantiene fija en la ventana del navegador aunque desplaces el contenido de la página hacia abajo. Ese efecto se consigue especificando en las propiedades CSS de la imagen de fondo un parámetro especial (background-attachment: fixed).

Pues bien, ahora puedes conseguir este mismo efecto para tu blog!

Para ello, nos vamos a Preferencias / Blog personal / Diseño de blog, abrimos la sección Cabecera y Skin (hasta ahora era sólo "Cabecera") y ahí tenemos un nuevo grupo de opciones que nos permiten especificar un fondo para la página general, la zona que hasta ahora ha sido siempre de ese color azul marino que podemos ver tanto aquí en los blogs como en meristation y zonaforo.

Para que podamos usar una imagen para esta nueva opción, tenemos que subirla a nuestro espacio de ficheros personales con un nombre que empiece por skin_, y lo que queramos. El tamaño máximo se ha establecido en 128KB (igual que para las cabeceras de blogs) para que no sobrecargue demasiado la página. Si el diseño que queremos usar exige más, tendremos que sacrificar un poco de calidad comprimiendo la imagen hasta conseguir el tamaño adecuado. La mayoría de programas de edición de imágenes permiten especificar el porcentaje de compresión de los JPG, que es el formato ideal para este tipo de imágenes.

Otro truco que conviene usar es el siguiente. Podemos aprovechar que la propia página cubre la parte central de la ventana. Entonces, si una vez tenemos la imagen de fondo preparada, rellenamos la parte central con un único color, el algoritmo de compresión podrá optimizar más esa zona para que el fichero ocupe menos espacio.

Aprovecho unas imágenes que utilizamos hace algún tiempo para pruebas para mostrar un ejemplo paso a paso:

Esta imagen sería la que usamos como fondo para el skin. Aunque aquí ya se muestra recortada y comprimida, espero que ya dé una idea:


Pulsa sobre la imagen para ampliar

La zona que se ve de color blanco es la que nos permite conseguir que ocupe menos espacio. Lo único que hay que tener en cuenta es el tamaño hábil de página, que aquí en los blogs es de 760 pixels, así que en la imagen de fondo que usemos como skin podemos dejar una buena zona limpia sin preocuparnos de si nuestros visitantes notaran la diferencia. Wink

Para decidir las dimensiones totales de la imagen, necesitamos saber la resolución de pantalla de nuestro visitante. Si tienes Google Analytics podrás mirar a ver qué es lo más habitual. Normalmente, podemos contar en que la mayoría no superará resoluciones de 1280x1024, así que este será el tamaño para nuestro skin. Tenlo en cuenta, especialmente si tienes una resolución menor. Piensa que cada día hay más pantallas que permiten una resolución de 1280x1024 o superior. Esto es lo que utilizamos en meristation, y en la mayoría de webs que usan esta técnica. Wink

Esta otra imagen forma parte de la zona que hemos puesto en blanco de la anterior, que podría servirnos como imagen para la cabecera del blog (esto se verá mejor cuando lo juntemos todo más abajo):


Pulsa sobre la imagen para ampliar

Y si nuestro blog fuese la portada de meri, este podría ser el resultado:


Pulsa sobre la imagen para ampliar

Amplía la imagen de arriba y observa como encajan las dos imágenes que hemos utilizado. Una vez montadas todas la piezas del puzzle, casi no se notan las trampichuelas que hemos tenido que hacer, y se pueden conseguir efectos realmente espectaculares. Por ejemplo, podríamos combinar esta técnica con lo que RikkuInTheMiddle nos muestra en su tutorial de como "tunear" nuestro blog.

Volviendo a la pantalla de configuración del diseño de blog, entramos a la sección Cabecera y Skin, subsección Skin del fondo de página. Ahí seleccionamos la imagen de fondo que hemos preparado (recuerda que tenías que subirla con un nombre que empiece por skin_), en el desplegable Desplazamiento de la imagen seleccionamos la opción Permanece fijada en la ventana del navegador, luego Repetición vertical (por si acaso alguien tiene mayor resolución que la altura de nuestra imagen), y finalmente Posición vertical arriba y centrada horizontalmente. También es recomendable seleccionar un color de fondo (el que viene por defecto, cuando no hay skin es #003366), que nos serviría para rellenar en caso de necesidad (por ejemplo, si alguien nos visita con una resolución superior a la que hemos previsto). Guardamos nuestro diseño de blog, y ya está!

Nada más por hoy, a ver que partido le podemos sacar a esto...

Por cierto, yo ya le he puesto skin a mi blog, ¿y tú, a qué esperas? ¡Imaginación al poder! Smile

 

Tutoriales u otras entradas con información complementaria:

 

5
Valoración media: 5 (10 votos)

39 Comentarios:

podemos contar en que la

podemos contar en que la mayoría no superará resoluciones de 1280x1024, así que este es el tamaño para nuestro skin que recomendaría desde aquí.

Hola markus, lo estoy intentando, pero primero solo deja subir imagenes de 760*600 y solo me cubre la mitad, asi que me toca usar la opción de repetir para todos los lados, así es como tu dices o estoy haciendo algo mal?

Mira mi blog y me dices que tal lo ves ;)

Gracias de antemano. 

Oops! que fallo más tonto ¿no?

Ya está corregido. Ahora podéis subir imágenes de hasta 1280x1024.

Yo si decia, gracias ;)

Yo si decia, gracias ;)

Joer Markus, muchísimas

Joer Markus, muchísimas gracias... por cierto, las horas extra estas te las pagan o que? xD

Que bien!

k bien que informes a los demas sobre la carateristica nueva.

 

Genial!!! seguro que le

Genial!!! seguro que le sacamos mucho partido.

 

Vaya, ayer estuve pensando

Vaya, ayer estuve pensando en esto y sin proponértelo ya nos lo traes LMAO. ¡Buen trabajo!

Ya tengo mi skin puesto

Y mi trabajo me ha costado: las dimensiones que das no son del todo correctas. La anchura es válida para un wallpaper, pero la altura no puede ser de 1024 pixeles, porque hay que descontar la cabecera del navegador (supongo que en tu skin no lo habrás notado porrque es bastante neutro). Yo le he puesto al final un tamaño de 1280 x 920, y aún así me sigue sobrando por abajo, vamos, que me queda un poco cortada.

Lo de combinarlo con la cabecera es inviable en el blog, porque a diferencia de la web, que no necesita scroll, el blog, si la entrada es larga y tiene comentarios, sólo te cuadraría al principio. Otra cosa sería si incorporarais frames al blog, pero eso está chungo.

De todas formas, y perdón por el tocharro, muchas gracias por esa pedazo de mejora. ¡Markus, estás que te sales!

Lo de la cabecera sí se podría :-)

Imagínate que defines la zona de cabecera sin imagen y con el color transparente. Lo que verías debajo de eso es lo que tengas de skin. Si dejas algo de imagen en la parte de arriba del skin, claro. No se si me explico.

Cierto es que antes no lo he explicado bien, pero es que hay tantas posibilidades...

Respecto de las dimensiones... pues digo 1024 de altura por proponer lo mismo que se usa por ahí para estas cosas. Hay que tener en cuenta que podemos tener visitas de alguien que use una resolución distinta a la nuestra, incluso superior.

Bueno, ya tengo alguna

Bueno, ya tengo alguna idea, a ver si puede hacerse :D.

¡Gracias por darnos trabajo :P!

 

 

 

Por fin he conseguido

Por fin he conseguido terminar, bieeeen X-D Yo no tengo a tanta resolución mi pantalla, cosas del monitor ;D Pero en el portatil de mi hermano si, y he estado con ambos traqueteando para poder hacer bien la imagen.

Como digo, en mi ordenador no veo el fondo, pero si mucha gente si, al menos tenerlo decoradito apra ellos ;D

Que buena mejora markus, vaya curradas que te metes ^^ 

Yo tb lo he conseguido xD

Bueno, ya he puesto skin al Blog. En mi ordenador se ve bien, espero que en los demás tambien.

Al principio he tenido"problemillas" porque en la ayuda de donde hay que seleccionar la imagen pone que hay que llamarlo "fondo_XXX"  y yo... ¿pero porqué no va? xD Luego ya me he fijado que explicas aquí que hay que ponerle de nombre "Skin_XXX"

Saludos 

@Apohell, disculpa por esos "problemillas"

Se me pasó por alto esta parte de la documentación en línea. Ya está corregido.

Pufff, me ha costado

Pufff, me ha costado bastante ajustarlo, quería hacer algo bonico y al final me he dado cuenta de que a 1024 se come los bordes, así que lo he dejado de modo que a 1024 se medio ve y a 1280 aparece en todo su "esplendor". Luego, la calidad, pues un tamaño algo más grande no me habría venido mal, la verdad Razz.

Bueno, gracias por el añadido markus Wink.

¡Dios! Que trabajera, pero

¡Dios! Que trabajera, pero parece que ya funciona, tras muuuchos cambios. Es simplón pero espero que os guste, tiene bastante selección photoshopera LMAO

Buff..yo tambien creo que ya

Buff..yo tambien creo que ya lo tengo más o menos XD Aunque ha costado..¿os gusta?:$

Dark el que has hecho es

Dark el que has hecho es tremendo, además con personajes apra todos los gustos :D

Rox el tuyo ni se te ocurra tocarlo, tal como lo tienes está perfecto, si añades algo más creo que no quedaría tan bien.

Yo también me he pegado una buena panzada esta tarde de photoshop X-D 

Gracias Shai, me ha costado

Gracias Shai, me ha costado trabajo, y ahora hablando con mi chica me dice que no encaja nada LMAO que ve medio Mario y medio Sonic. De todos modos es temporal, ya veremos como lo apaño Razz

Si no lo ve supongo que es

Si no lo ve supongo que es porque tiene una resolución baja, como me pasa a mi con el de sobremesa, que como mucho veo la mitad de los fondos :D  Pero en el portatil a una resolución mayor si que se ve todo :P

PD - yo ya no lo toco, hoy he acabado hasta las narices del photoshop X-D 

Dark, ponte la resolución

Dark, ponte la resolución de la pantalla a 1024 para hacer pruebas y procura que se vea bien así. La gran mayoría de la gente utiliza esa resolución de ancho.

Web developer plugin de Firefox

Os recomiendo el Web developer plugin de Firefox, que tiene una opción para poner la ventana del navegador a un tamaño predeterminado, que se pueden configurar, etc. Va de coña para simular distintas resoluciones. El límite te lo pone tu propio monitor, claro.

Otra manera que podría seros más práctica sería mirar como queda el skin en el propio editor de imágenes que usemos. Una vez tenemos la imagen preparada para 1280x1024, podemos generar una versión recortada a 1024x768 o lo que sea, y miramos como queda.

De todos modos, hay que procurar huir de montajes que requieran de una resolución específica para ver algo significativo. Cuando preparamos el skin, hay que tener en cuenta que habrá un buen porcentaje de usuarios que no verá aquello que exista más allá de 1024x768. Pero si lo dejamos a esa resolución, habrá otro buen porcentaje de usuarios que verá la nada. Por tanto, lo importante del skin tiene que estar pensado para 1024x768, pero conviene rellenarlo hasta 1280x1024. No se si me explico...

Por cierto... ¡brutales los montajes que estais haciendo! (esto le llena a uno de orgullo) Smile

Coño, me se había pasado

Coño, me se había pasado esta entrada.

Ahora estoy gorroneando WIFI con el portátitl porque terminé de trabajar, pero en cuanto vuelva a mi casa me lo leo mas detenidamente y edito con mis impresiones Smile

¡Saludos! 

Gracias MaQy y Markus, voy a

Gracias MaQy y Markus, voy a probar con ese plugin de firefox molón, pero me parece que mi chica lo veía mal porque usa 800x600, así que...

MmM Creo que lo he hecho bien xD

Creo que lo he hecho bien, decidme si lo veis bien pq yo almenos con 1280x1024 lo veo bien xD

Una preguntilla

He visto el blog de Rox y ha conseguido colocar el skin superpuesto a la zona de contenido. No sé si me explico muy bien, pero tiene una especie de conejitos que se superponen al fondo, en un efecto superguapo, y me gustaría saber cómo se hace.

Rikku, no se superpone. Lo

Rikku, no se superpone. Lo parece por que es del mismo color que la zona de contenido. Y da ese efecto, pero si te fijas la sombra no llega a tocar la zona de contenido. Mira la imagen que tiene de fondo para entenderlo mejor.

¡Saludos! 

 

Rikku lo que ha hecho es,

Rikku lo que ha hecho es, como dice komodo, usar un skin que simula bordes para la zona de contenido, a ver si así se entiende un poco mejor:

Blog sin skin + Skin que simula bordes = Blog con skin simulando bordes

Dependiendo de como sea el diseño del blog requiere más o menos trabajo para que "peguen" bien las imágenes, pero en esencia es muy sencillo Wink.

 

komodo y FRdeTorres

Gracias por la explicación a los dos. Ya me he fijado. Es cuestión de hacer un degradado de color y que te coincida con el color del fondo del contenido, pero es que da el pego.

Lo que no entiendo es como has hecho tú lo de las hojas del borde.

Busqué una imagen de

Busqué una imagen de alguna enredadera y me decidí por esa.

Con photoshop amplié la zona de contenido del blog haciendo coincidir el fondo, ajusté la enredadera sobre la parte que sería el borde haciendo que al repetirse verticalmente todo tubiese efecto de continuidad y de fondo le metí las flores u hojas (no sé exactamente qué son xD) que se ven en verde oscuro. No sé si entiende bien Razz.

He borrado el PSD, sino te lo mandaba para que lo vieses a ver si ayuda a que te aclares Sad.

@FRdeTorres, si tienes tiempo...

@FRdeTorres, si tienes tiempo para hacer un tutorial de como has creado tu skin, te puedo enlazar desde esta entrada, junto al de McRikku tunning, jeje.

Deacuerdo, hoy no tenía

Deacuerdo, hoy no tenía pensado hacer nada, así que me pondré Razz

Listo :D

Ya está hecho, aquí dejo el enlace Wink:

Tutorial de Skin con Bordes

Genial!

Lo acabo de ver, está bien, aunque con tanto Ctrl+X me pierdo un poco. Yo uso el GIMP, y diría que si entiendes el concepto que hay en cada paso, más o menos se puede ir siguiendo.

Al final de esta entrada he puesto una sección por si van saliendo más tutoriales de este tipo. Smile

Hola

gracias por todo.

Holas

Ahora que estoy "medio remodelando" el Blog , despues de mis vacaciones, estos post  me quedan de perlas , gracias  por la ayuda ! , no me quedara muy bien , pero si le cambia algo la perspectiva.

Saludos.

No se me pone

Hola, markus tendo un pequño problema con lo de la imagen de fondo.

(A si una cosa donde pone las rayas habia una url, pero la e quitao para que no se pueda acceder a la configuracion de mi blog)

Cuando le doy a guardar una vez seleccionada la imagen de fondo, me sale:

 

 

ERROR

El URL solicitado no se ha podido conseguir


Mientras se intentaba traer el URL: -----------------

Ha ocurrido el siguiente problema:

  • Respuesta vacía (tamaño cero)

Squid no ha recibido ninguna información en respuesta a esta petición.


 


Generated Wed, 10 Dec 2008 15:14:22 GMT by www.gamefilia.com (squid)

A mi me tira el mismo error

A mi me tira el mismo error que al que ha puesto el comentario arriba........

Gracias

Gracias por el tuto, 5 estrellas

Muchas gracias!

Me ha ayudado muchisimo este tutorial, muy currado!!

Saludos y 5 estrellas!