16 de Agosto de 2017
Feb
26

Cómo "tunear" nuestro blog

A lo largo de estos días que el sistema de blogs lleva en funcionamiento, he visto que existen muchas dudas acerca de cómo personalizar al máximo nuestros blogs para que queden como realmente queremos. Por eso me he decidido a hacer esta entrada. En ella explicaré los pasos que he seguido para personalizar el blog con imágenes y que me quede ligeramente parecido al de Pep, que tiene una pinta increíble.

En primer lugar necesitaremos una imagen para el fondo de pantalla que sea lo suficientemente interesante (yo he escogido a Auron del FF-X  una casa embrujada). Con el Photoshop u otro programa de retoque fotográfico, cambiaremos el tamaño de la imagen para que haga 760 píxeles de ancho (de momento el alto con que sea en torno a 600 pixeles es suficiente). Una vez tengamos la imagen redimensionada la guardaremos, y la volveremos a guardar con otro nombre, para tener una copia. Con una de las copias, reduciremos el lienzo (no confundir con reducir imagen) para recortar la imagen, y cogeremos como punto de apoyo la parte superior, para que recorte por abajo. El tamaño final debe ser de 760 x 145 píxeles. Es MUY IMPORTANTE, que el archivo se llame "fondo_y lo que quieras". La imagen quedaría algo así:

 

  Ésta será nuestra cabecera, y de momento la dejaremos reservada.

La siguiente imagen que prepararemos es la que constituirá el cuerpo de la página. Para ello, si hemos elegido un fondo de color blanco (como en mi caso), volveremos a hacer una copia de la imagen inicial escalada, y la de-saturaremos, y jugaremos con el brillo y contraste de ésta, para obtener una imagen que puesta de fondo de página no moleste a la hora de leer. Una vez retocada, procederemos a recortar el lienzo tal como hemos hecho antes, pero ahora partiendo como punto de anclaje desde abajo. Le quitaremos los 145 pixeles correspondientes a la imagen de la cabecera y otros 15 más que corresponden al menú (en total 160). Agrandaremos un poco el lienzo para poder realizar un efecto de fundido en la foto, para jugar con el color del fondo del blog, aunque no mucho. La imagen resultante debe hacer 760 píxeles de ancho por 450 de largo (esta medida es importante porque sino el administrador de imágenes la  redimensionará, y perderemos el efecto deseado. Es MUY IMPORTANTE, que el archivo se llame "fondo_y lo que quieras". La imagen resultante debe parecerse a ésta:

Ahora sólo falta configurar el blog. Para colocar la imagen de la cabecera, iremos a Preferencias>Blog Personal>Diseño del Blog> y seleccionaremos Imagen de Cabecera. Desde el cuadro desplegable, escogeremos la imagen correspondiente a la cabecera. Para configurar el fondo de página, en Configurar zona de contenido>Colores e imagenes de fondo>Fondo de la página y aquí seleccionaremos en el desplegable la imagen que queremos. En caso de que no se viera correctamente, hay que pasar por la configuración de cada sección (pagina, contenido y brújula) y activar la casilla de Transparente para que se pueda ver el fondo.

Por último, y sólo en caso de que queráis cambiar también el icono del calendario (o el de las listas), sólo teneis que en el desplegable de Configurar zona de contenido>Otros elementos>Icono de Calendario escoger vuestra imagen. En cualquier caso, esta no debe exceder de 40 pixeles de ancho. Es muy importante que el archivo empiece por icono_y lo que quieras. Yo he escogido este de muestra:

 

Espero que estos consejos os sirvan para personalizar a vuestro gusto el blog. Yo de momento dejaré esta personalización unos días, por si quereis comprobar como queda.

Saludos!

 

5
Valoración media: 5 (13 votos)

39 Comentarios:

Que buena entrada Rikku,

Que buena entrada Rikku, seguro que ayuda a mucha gente :).

Yo ahí he estado esta tarde cambiando el fondo de los bloques de mi blog, pero creo que los voy a volver a cambiar X-D

El tuyo ha quedado tremendo ;) 

Precisamente por lo de la

Precisamente por lo de la smedidas veo muy bien tu entrada, tener que ir a tientas en ese sentido es super jodido (hablando mal y pronto)

 A mi mira lo que me ha pasado con la imagen de los bloques, la del final se me ha quedado corta, pero hasta mañana asi se queda X-D

Por cierto esos gifs de ff son la leche, me refiero a los que has puesto en el calendario, yo tengo un montón de ese tipo, son muy graciosos :D 

Muchas gracias por la

Muchas gracias por la sugerencia de cambiar el color del editor, empiezo a pensar que mucha gente no me a comentado por ese motivo xD Como yo no me cometo a mi mismo no me habia dado cuenta xD

Ya lo he cambiado :)

 

Ah y genial el tutorial para mejorar el aspecto del blog. El mio me gusta tal y como esta pero no descarto cambiarl en un futuro y sin duda me ha venido bien este post tuyo :)

 

El tuyo te ha quedado realmente bien.  

Muy bueno Rikku. Espero

Muy bueno Rikku.

Espero que a los blogs de Meristation den posibilidades como poder usar HTML y otras cosas que tienen blogs tipo Wordpress o Blogger ya que con eso se abren más posibilades de modificación del Blog. 

¡Gracias!

Me van a venir muy bien estos consejos para editar un poco mejor mi Blog, que no termina de gustarme. Aunque de momento nadie se me ha quejado de los colores o de que le resulte incómodo leerlo. Imagino que eso es buena señal.

Si algo tienen estos Blogs es que son muy fáciles de editar. Y eso que soy un poco inútil en este sentido.

Yo me estoy volviendo loca para encontrar una imagen para el calendario.

Estate atenta al MP, porque si tengo alguna duda ya sé a quien voy a andar molestando. Embarassed

Fantástico, gracias por el

Fantástico, gracias por el tutorial. Ahí va un consejillo mío como complemento:

- Teneis que tener cuidado con la imagen seleccionada para que el texto pueda ser totalmente legible a primera vista. Rikku, lo has hecho francamente bien, pero tal vez lo que hubiera hecho yo es aclarar muchísimo más la imágen y hacerla tal vez de forma que solo se intuya. En Photoshop con darle un 80% de brillo hubiera ido de perlas.

Antes de lanzaros como locos a poner un fondo para vuestros blogs, pensar bien que la mejor imágen es aquella que complementa y no la más chula que os encontreis. Y atentos con lo de que se puedan leer bien los textos. ;D

De nuevo, gracias por el aporte Rikku. 

Otro gran aporte

5 estrellazas!!!!

Yo ya estoy bastante conforme con el mío. Quería un diseño nocturno y creo que lo he conseguido Cool. Aunque aún creo que podría mejorarlo un poco con una imagen de fondo. ¿Conoces un programa gratuito que permita tanto trasteo como el "fotochop"?

Pd. No valoro tu diseño, porque tengo manía a Auron Razz

La Leche, entre tú, Markus

La Leche, entre tú, Markus y yo podríamos formar la alianza de los "Tutobloggers" LMAO Yo de momento no tengo pensado ponerle imagen a mi blog, pero en un futuro para variar si lo haré.

Por cierto, estate atenta al libro, en lo siguiente que postee saldrás tú, y para el resto que se apuntó, el resto de los foreros saldrán cási en su totalidad, a falta de un 15 porciento que saldrán mas adelante

Para finalizar, Rikku ¿Que tal se te da ser francotiradora? Very Surprised

¡Un 5 a la entrada marchando! 

Me alegra que poco a poco

Me alegra que poco a poco le vayáis pillando el tranquillo a las posibilidades de diseño que se incorporan en los blogs. Smile

Una sugerencia sobre este tema... y es que para el gráfico de fondo para la parte de contenido convendría montarlo de manera que haga un degradado hacia transparente con el color base de fondo que se puede asignar a esta zona.

En el blog de Pep tenéis un ejemplo. Os pongo una captura por si lo modifica más adelante:

Fijaros como en este caso, la imagen de fondo va haciendo un degradado transparente hacia ese color azul clarito que tiene definido el resto del fondo de la zona de contenido. Wink

Para ver donde se tiene que empezar a aplicar el degradado es conveniente fijarse donde empieza la zona de texto del blog. Debe haber como unos 30 a 50 pixels de margen para jugar, o así, más o menos hasta donde se situa el título de la página. Conviene recordar que por ahí anda la brújula (indicador de navegación dentro de la estructura de páginas), y el color de ese texto es algo que también podéis personalizar en la sección correspondiente del diseño de blogs.

Muy bueno

Está muy bien para los negados del diseño como yo Very Happy la verdad es que te ha quedado muy chulo, calculando tamaños. Probaré algo parecido, aunque mi maestría con el photoshop es nula XD

Gracias por el post. Un saludo. 

Com complemento a lo que ha

Com complemento a lo que ha dicho Markus:

En el caso de que el color de fondo no predomine el blanco y sea un azul o un color distinto. Tendriamos que coger exactamente el color de ese fondo para trabajar con el en Photoshop.

Existen varias maneras, pero explicare la mía que es la más optimizable:

- Realizamos un "pantallazo" de nuestro blog (pulsando la tecla Imprimir Pantalla con nuestro blog abierto).

- Abrimos Photoshop y seleccionamos en "Archivo", "Nuevo". Como comprobareis Photoshop automaticamente coge las medidas de nuestro pantallazo, hacemos click en "aceptar" y pulsamos "CRTL+V". Y tendremos nuestro blog con sus dimensiones exactas como una imágen en el Photoshop.

- Aquí comienza el "trasteo". Seleccionamos la herramienta "Cuenta Gotas" (parte inferior de las herramientas) y hacemos click en el una parte de la imagen donde este el color de fondo y automaticamente tendremos el color seleccionado para usarlo en la imágen de fondo.

- Ya solo os queda aplicar el degradado con ese color en la imágen de fondo que vayais a utilizar.

Por cierto, el uso del pantallazo es genial para no tener que estar midiendo, ni reescalando imagenes ya que cuando lo tenemos en photoshop, podemos utilizar la herramienta selección para "coger cachos de nuestro blog" teniendo las medidas exactas. Es un poco más complicado y a lo mejor un día me digno a explicaroslo si eso, jejejeje. Na, cuando querais.

Un saludo.

El PSP no es gratuito .

El PSP no es gratuito Depressed. Esta tarde buscaré el sw de la cámara a ver qué trae, creo que nunca lo instalé. 

Veo que las licencias de Fotochop deben estar baratas porque se da por hecho que todo el mundo tiene Razz

Kid, ¿Nunca has comprado

Kid, ¿Nunca has comprado en el eMule? Very Surprised Un editor gráfico como alternativa al Fotoshop y si es gratuito, es The Gimp. Puedes encontrarlo en Softonic.

Espero que te sirva, yo me voy a escribir Very Happy

Me gusta la participación que ha habido

Sólo quería hacer un inciso sobre los comentarios de markus y saini. Antes de elegir una imagen que se adapte a nuestro gusto y modificarla, hay que saber de antemano qué color queremos aplicar al fondo del blog, para que al realizar la transición entre imagen y fondo, no se perciba ruptura.

Por suerte, y ya que la mayoría utilizamos Photoshop, los programas de retoque actuales incorporan una gran variedad de paletas de colores (Pantone, Lab, CMYK, Focoltone,...) entre las que se encuentra la paleta para colores web (ya sabeis, las de #ffffff), por lo que elegir el color más oportuno no es ningún problema.

Mi preferido como fondo de pantalla siempre será en blanco, no en vano ¡millones de páginas web no pueden estar equivocadas!

Edito: Como veis, ya he aclarado aún más la imagen para facilitar la lectura de textos.

Te ha quedado genial

Vaya cambio de look el de tu blog. Te ha qudado genial.

Gracias por currarte la explicación. Algún día, ahora que tengo algo de tiempo me pondré a personaliar el mio. Que es bastante soso.

Todo hay que decirlo, hecho de menos la anterior cabezera con las imágenes del RE: Code Veronica :)

¡Saludos! 

Al final te ha quedado

Al final te ha quedado perfecto, eres una crack de estas cosillas!!! ;)

Yo también echo de menos

Yo también echo de menos la anterior cabecera, Auron parece Solbes por el ojo raro ese que tiene Very Happy Very Happy Very Happy

Pd. Ya sabes la manía que le tengo...

Vaya

Podría haberme encontrado tu tutorial hace dos semanas, que vaya paliza me pegué para hacer el fondo LMAO. Muy útil el tutorial y los consejos de los bloggers, un saludo.

Gracias por la ayuda, estoy

Gracias por la ayuda, estoy probando ahora mismo :D

Im-prezionante

Genial entrada!

A ver si algún día me animo y me curro un fondo tan fantabuloso como el tuyo o el de Pep. Lo cierto es que de momento mi foro es cutre, cutre XD

Gracias

Gracias por la ayuda

me gusta tener un blog más

me gusta tener un blog más minimalista(a pesar de la cabecera) pero reconozco que el tuyo no está nada mal. Si se sabe aprovechar puede quedar un diseño bastante digno.

Salud 

Excelente entrada

Excelente entrada, muy útil, completa, detallada y bien explicada, un gran trabajo pues Wink.

1000 Gracias

Muchas gracias por tu resumido tutorial, me ha ayudado a poner mi header.

 

 

Muchas gracias xD A sido

Muchas gracias xD A sido gracias a tu tuto!

Los dibujos son de un dibujante que ahora mismo es de marvel, Joe Madureira. Me costo porque soy un inutil en estas cosas pero lo consegui!

 

Gracias por los consejos!.

Gracias por los consejos!. Me fueron genial para aclararme con el blog.

Wuooo muchisimas gracias

Wuooo muchisimas gracias por la ayuda Rikku,a ver si luego me pongo a tunearlo XD

Muy chulo el diseño de tu blog

salu2!

Una preguntita

No me acepta imágenes .bmp, y la cabecera en .jpg me queda con una calidad nefasta. ¿Cómo consigues que la imágen sea de buea calidad?

Gracias, y un saludete.

Mil gracias :D acabo de

Mil gracias :D acabo de comenzar con el blog y tengo que tunearlo :D

gran blog! un saludo

Pues yo Tb!

Yo tambien me he decidido ha seguir tu tutorial Mr. Green La verdad es que creo que me ha quedado bastante chulo, eso si yo lo he hecho sin dregradado de color ni nada porque entonces ya no se vería la imagen, que ya de por sí es oscurisima (El fondo de mi blog es negro).

Gracias! 

Te enlazo desde aquí :-)

Te enlazo desde AQUÍ, ya que ambas técnicas se pueden complementar perfectamente. :-)

Hola, bueno pues tengo un

Hola, bueno pues tengo un problema y me gustaria que me ayudaseis, me estoy haciendo un blog (algunos ya lo sabeis) y resulta q no se que me ha pasado que el fondo donde se escriben los comentarios es absolutamente transparente, se ve el fondo de pantalla, pero el caso es que yo quiero que este blanco como el que ay detras de estas palabras, que debo hacer q co----ño he tocado???, muchas gracias y haber si me podeis ayudarEmbarassed

Te respondo aquí

Primero porque parece que has deshabilitado accidentalmente la opción de comentar en tu blog.

Tu problema es que has debido activar el recuadro de Transparente en la configuración del Fondo de Página, lo que hace que se te vea el skin de abajo. Esto es como una lasaña por capas: si le das a transparente, aunque tengas una imagen, se ve lo que hay debajo. Debes desactivar esa casilla y poner el color que mejor se funda con la imagen de Snake que has puesto, que en teoría sería un verde.

Un consejo: si estás utilizando por ejemplo Photoshop, utiliza la herramienta Cuentagotas sobre ese color. Al picar dos veces sobre él, una vez seleccionado, te dará los parámetros RGB, CMYK y sobretodo HTML (esos numeros y letras) para poder copiar ese color. Una vez lo tengas, sólo tienes que poner ese número (del tipo #fff6f) en la casilla de Color de Fondo. Te tendría que quedar más o menos como en el blog de Pep.

Muchisimas gracias hare lo

Muchisimas gracias hare lo que me dices haber si ay resultado, ahora estoy con la musica para crear ambiente y eso jeje, gracias de nuevo si tengo alguna duda ya te la dire (que no son pocas).Un saludo y Cuidate

Si ya esta de nuevo en

Si ya esta de nuevo en blanco, pero tengo otra duda, lo que me he fijado es q al poner un fondo negro (o de cualquier colo) si elijo la opcion de que la imagen se quede fija, eso es lo que afecta a lo de los comentarios es decir el bloque de color blanco se quita y se ve el fondo, eso es lo que yo quiero quitar osea quiero ponerlo como lo tienes tu por ejemplo, tu fondo es negro pero no afecta a donde posteas ni nada es decir sige blanco, asi es como quiero que este, y mira que estoy investigando lo de las transparencias y eso pero nada no soy capaz (Reconozco que hasta que no le pillo el tranquillo soy el mas tonto del mundo) siento preguntar tanto,pero es que estoy confuso de co.......nes.

Que se supone...

Yeah!

Gracias por la ayuda, me ha servido mucho ;)

Saludos y 5 estrellas!

Buena entrada :P

Buena entrada, me está ayudando mucho. Gracias Smile

Master Thanatos de http://blogs.gamefilia.com/master-thanatos

muchísimas gracias!!

muchísimas gracias!!