|
|
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!
El rincón del Survival Horror, y de todo lo que pase por la cabeza de esta mente enferma que aquí escribe. Wesker is watching you...
Aficiones: anime, arquelogía, cine, diseño, resident evil, silent hill, survival horror, videojuegos
Resident Evil: Kidik Chronicles o lo que realmente pasó cuando Leon no miraba.
La Ira del Destino (Destiny's Wrath). El relato de Logan (¿cuantas veces se puede ser el protagonista de un gran relato?)
Shaiyia Valentine nos ofrece figuras de coleccionista de Resident Evil
Komodo Sunderland desde la Colina del Silencio
Solid Snake Diaries from Rapsodos FoxHound (si has leido esto, es que ya estás muerto)
El blog del agente encubierto más silencioso, Moskeeto McGivern
Desde el frente de batalla, Dapone Redfield nos informa de las novedades sobre Umbrella
De el lado oscuro llega Albert wesker1980 desde la mansión Spencer...
Desde Silent Hill, la Bitácora de Lord_Areg
Silent Hill: En el límite de la realidad... de Bonoman
Concurso Trivial de Resident Evil (para participar ponte en contacto con jark)
Fotolog de JMV (muy bueno, no te lo puedes perder)
Y recordad, Wesker is watching you.
Clickad en el símbolo y dejad vuestra opinión sobre el blog, o alguna sugerencia, o simplemente decid +1.
Expediente RE5
Revival
Grandes Voces de los Videojuegos
Concurso AVATAR
Si te vas del blog sin comentar
Nemesis te perseguirá
Si te vas sin votar
P-Head te hará "pupita"
Así que ya sabes, ¡participa!
Blogosfera
Click en la imagen para que sepas de que va esta ida de olla 
25 de Mayo Día Internacional del Orgullo Friki
Plataforma Salvemos a los fans de Excel Saga: Somos pocos y en peligro de extinción. Menchi te lo agradecerá.
Enganchada a:
Si no eres un alien, un viajero del tiempo, ni nada interesante, no veas esta serie, o te puede pasar esto:
(bueno, eso tampoco es tan malo...)
Reseñas de anime recomendadas:
(esta es una selección personal de las mejores reseñas de anime, hecha por la autora y por tanto subjetiva)
Barrapunto
Blinklist
BlogMemes
Delicious
Digg
Facebook
Favoriting
Fresqui
Furl
Google
Icerocket
Ma.gnolia.com
Menéame
Newsvine
Propeller
Reddit
StumbleUpon
Technorati
Webéame
Yahoo
31 Comentarios:
Que buena entrada Rikku,
26 de Febrero de 2008 • 23:27 — ShaiyiaQue 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
27 de Febrero de 2008 • 00:31 — ShaiyiaPrecisamente 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
27 de Febrero de 2008 • 01:29 — Half_cdpMuchas 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
27 de Febrero de 2008 • 02:01 — Seahawk1992Muy 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!
27 de Febrero de 2008 • 02:53 — Nena_BabsMe 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.
Fantástico, gracias por el
27 de Febrero de 2008 • 03:38 — SainiFantá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
27 de Febrero de 2008 • 14:32 — KidIkarus5 estrellazas!!!!
Yo ya estoy bastante conforme con el mío. Quería un diseño nocturno y creo que lo he conseguido
. 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
La Leche, entre tú, Markus
27 de Febrero de 2008 • 15:10 — LoganKellerLa Leche, entre tú, Markus y yo podríamos formar la alianza de los "Tutobloggers"
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?
¡Un 5 a la entrada marchando!
Me alegra que poco a poco
27 de Febrero de 2008 • 15:33 — markusMe alegra que poco a poco le vayáis pillando el tranquillo a las posibilidades de diseño que se incorporan en los blogs.
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:
Click sobre la imagen para ampliar.
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.
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
27 de Febrero de 2008 • 16:31 — The_unforgiven_tooEstá muy bien para los negados del diseño como yo
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
27 de Febrero de 2008 • 16:37 — SainiCom 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 .
27 de Febrero de 2008 • 16:59 — KidIkarusEl PSP no es gratuito
. 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
Kid, ¿Nunca has comprado
27 de Febrero de 2008 • 17:09 — LoganKellerKid, ¿Nunca has comprado en el eMule?
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
Me gusta la participación que ha habido
27 de Febrero de 2008 • 21:46 — RikkuInTheMiddleSó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
27 de Febrero de 2008 • 17:46 — komodo_84Vaya 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
27 de Febrero de 2008 • 23:21 — ShaiyiaYo también echo de menos
28 de Febrero de 2008 • 10:36 — KidIkarusYo también echo de menos la anterior cabecera, Auron parece Solbes por el ojo raro ese que tiene
Pd. Ya sabes la manía que le tengo...
Vaya
28 de Febrero de 2008 • 12:51 — DarkOuterheavenGracias por la ayuda, estoy
28 de Febrero de 2008 • 13:02 — UrzanikIm-prezionante
28 de Febrero de 2008 • 18:38 — spunyGenial 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
28 de Febrero de 2008 • 19:00 — Edu_didome gusta tener un blog más
3 de Marzo de 2008 • 06:49 — blinkinparkme 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
4 de Marzo de 2008 • 01:52 — MaQy1000 Gracias
8 de Marzo de 2008 • 22:19 — FukuyamaMuchas gracias por tu resumido tutorial, me ha ayudado a poner mi header.
Muchas gracias xD A sido
14 de Marzo de 2008 • 16:41 — rapsodosMuchas 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!.
20 de Marzo de 2008 • 17:05 — Lester KnightGracias por los consejos!. Me fueron genial para aclararme con el blog.
Wuooo muchisimas gracias
25 de Marzo de 2008 • 15:16 — Jin kazama 05Wuooo 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
27 de Marzo de 2008 • 18:12 — spunyNo 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
29 de Marzo de 2008 • 13:20 — sergiruMil gracias :D acabo de comenzar con el blog y tengo que tunearlo :D
gran blog! un saludo
Pues yo Tb!
6 de Abril de 2008 • 17:49 — ApohellYo tambien me he decidido ha seguir tu tutorial
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í :-)
23 de Abril de 2008 • 09:07 — markus