17/3/12

[Creando un blog] #1


¿Estás empezando un blog y no tienes ni idea de por donde empezar?
¿El códio HTML es un total desconocido para ti, y tienes miedo de tocar algo en la plantilla?
¿El photoshop es tu enemigo y crees que no hay ninguna solución?

Aquí traigo un "curso" de como crear un blog desde 0.
Antes de nada, quiero decir que todo esto lo he aprendido a base de leer tutoriales, y de otros blogs donde enseñan a hacer cosas maravillosas y de manera totalmente gratuita. En cada tutorial pondré la fuente.

CREANDO EL BLOG Y PRIMEROS PASOS

Ya hemos creado un blog y nos encontramos con algo como esto:


No tenemos cabecera, entradas, pestañas, menú ni seguidores... ¿Por donde empezamos?






16/3/12

Cabecera

La cabecera del blog es importante, básicamente porque va a ser tu carta de presentación. He de decir que la cabecera me llevó muchísimos mareos de cabeza (y me sigue llevando, porque no termina de convencerme ninguna), pero si tienes las cosas claras (colores, imágenes...) es muy sencillo.

Vamos a por una cabecera sencilla: (Recordar, se puede cambiar siempre que queramos)

Podemos usar photoshop, photoscape, picmonkeyfotor... El programa que queráis y con el que os sintáis más cómodos.

Yo voy a usar picmonkey, porque es un programa online y gratuito, y aunque fotor me guste más, me manejo mejor con el monito.

  • Entramos en la página, y pinchamos en Desing -> Facebook cover, y se nos creará un cuadro en blanco.
  • Ahora vamos a Resize y seleccionamos el tamaño que queremos que tenga nuestra portada. Para ello, vamos a nuestro blog y donde debe ir la cabecera pulsamos click derecho e inspeccionar elementos. 
  • Una vez que tengamos las medidas, guardamos la imagen y aplicamos el diseño.
He hecho una portada muy sencilla (la cual explico aquí) utilizando picmonkey, fotor y photoshop.





Una vez tengamos la portada, nos vamos al blog y pulsamos en Diseño -> gadget Cabecera -> subimos nuestra cabecera -> ubicar en lugar del titulo y descripción.

Si la cabecera no nos queda centrada, vamos a Plantilla -> HTML.
Pulsamos en F3 y buscamos Header-Outer.
Justo encima escribimos Header img { margin: 0 auto ; }
Pulsamos vista previa y si todo está como queremos, guardamos la plantilla.

Diseñando una cabecera


Vamos a usar:



Necesitamos saber la medida que tiene que tener nuestra cabecera. Para ello, pulsamos en el título de nuestro blog con el botón derecho y le damos a inspeccionar elementos. Allí nos dan las medidas en px.

Abrimos picmonkey y le damos a Collage-> Dejamos solo un cuadrado -> Resize -> ponemos las medidas de nuestro blog -> aceptar.

Ahora vamos a Swatches y encontramos muchos fondos. Yo he utilizado uno de Sweethearts y ha quedado así.


Ahora vamos al editor y abrimos Overlays -> Geometric -> eliges la figura que te gusta (un óvalo en mi caso), centras en la imagen y eliges el color.
He querido darle un doble marco, así que he repetido el óvalo y le he puesto otro color, y ha quedado así:


Pero he de reconocer una cosa: El color rosa no está entre mis colores favoritos, así que con photoshop he modificado el color del fondo (seleccionas el fondo, le das a Imagen -> Ajustes -> Tono/saturación -> marcamos la opción colorear -> elegimos el color que nos guste.) Y ha quedado así:


Una vez que tenemos el fondo como nos gusta, vamos a Fotor (también se puede hacer desde picmonkey, pero en fotor puedes elegir más fuentes, y lo que más me interesa a mi, es que esas fuentes son las que tienes instaladas en el pc). Seleccionamos una fuente, ponemos el título de nuestro blog, elegimos color y ya tenemos hecha la cabecera.


1/3/12

Hasta aquí llegó el ritual de enfados y canibalismo estúpido.

Muchas veces me planteo mandarlo todo a la mierda y salir corriendo, pero me doy cuenta automáticamente que eso no servirá de nada, porque por mucho que corra, los pensamientos me seguirán. 
Últimamente ni la música, ni la lectura, ni dibujar ayuda. Últimamente ni siquiera dormir ayuda, ya que no puedo conciliar el sueño, y cuando lo hago, es para soñar una y otra vez con lo mismo.

Related Posts Plugin for WordPress, Blogger...