Aprendiendo a hacer un lay con el diseñador de plantillas~

Estado: (sin querer hacer tareas xD)
Escuchando: El sonido de los carros?

Holas a todos!!! cómo les ha ido en estos dos o tres días en los que no he posteado?? espero que muy bien ^^. Yo he estado intentando estudiar y digo, sé que tengo que hacer un artículo para mañana pero no he podido reunir mi concentración y empezar a redactarlo Dx, a pesar de que ya he investigado y leído de polímeros conductores y todo eso... lo peor es que ayer nos dejó un trabajo incluso más largo y complicado: identificar TODOS los materiales de un auto y es que era tan largo que tocó dividir las piezas en parejas para que entre los 40 o 50 que vemos el curso pudiese hacerlo en tan poco tiempo!! qué quiere ahora Cifuentes, que construyamos un carro?? es capaz, al fin y al cabo es profesor de una materia del siguiente semestre (Taller de Procesos Metalmecánicos), así que lo tengo que seguir soportando... incluso dijo que guardáramos el trabajo porque lo íbamos a necesitar para dicha materia x_x

En fin, en mis muchos intentos para escabullirme del trabajo me di cuenta que me habían dejado un mensaje en el tag!! no de esos de "Blogwalking" que aparecen de vez en cuando y que me dan mucha pereza para borrar, sino uno de Koneko pidiéndome ayuda para hacer un layout como este!!! la verdad que me puse super feliz al leerlo y pues, no pude evitar ponerme ya a hacer un pequeño y muy corto "tutorial" de cómo hago este tipo de plantillas.

Antes que todo he de decir que para hacer el diseño de cada plantilla, la parte gráfica y bonita, utilizo Photoshop CS3 aunque una versión anterior o posterior puede también ser muy útil. Por cuestiones de tiempo no explicaré cómo utilizar este programa, aunque quizás en un futuro no muy lejano, cuando tenga vacaciones quizás, haré un tutorial de él, ya que es algo que me divierte y entretiene... para lo que tiene que ver con la codificación utilizo el generador de plantillas de Blogger ya que no tengo por ahora un programa de edición de páginas web (como Dreamweaver), por tanto, este tutorial explicará únicamente cómo utilizar esta práctica herramienta, que es algo muy sencillo de hacer y después de un poco de costumbre harás diseños muy bonitos <3.


それでは、始めましょう！(Bueno, entonces empecemos! *no se preocupen, mi nivel no va para hacer un tutorial en japonés xD*)

1. Antes de todo, lo primero es tener una idea de lo que vamos a hacer. Hay dos cosas principales que se pueden personalizar en el diseñador de plantillas de Blogger: la cabecera y el fondo. Créanme que sólo con estos dos elementos ya tienes como un 70% del trabajo hecho! Ambas se hacen con photoshop o cualquier programa de edición de imágenes que tengas o incluso puedes buscarlas en internet...

a. La cabecera: Es esa imagen que ven al principio del blog... en mi caso es la de Heart no Kuni no Alice <3. Para que se vea el fondo por detrás yo lo guardo como una transparencia, sin embargo esto no es necesario. Aquí les dejo la cabecera original:

Para lograr esto uno debe tener unos conocimientos mínimos de Photoshop, una idea bastante clara y bastante tiempo *ok, soy una tramposa, la parte entretenida no la estoy explicando ._.*

b. El fondo: Aquí estoy hablando de los rombos amarillos de la parte de atrás de la imagen. Para éstos, también existe la opción de utilizar Patterns, aquí pueden encontrar un sinfín de recursos incluyendo dichos Patterns. Yo los modifico un poco para que cuadren con el layout que estoy usando... He aquí el fondo de este layout:


No siempre son tan grandes pero quería que cuadraran los rombos a la perfección: esta imágen se va a repetir a lo largo de toda la página, si los bordes del lado izquierdo no cuadran con los del derecho o los de arriba no cuadran con los de abajo, se va a ver como un mosaico y personalmente no me gusta mucho:


ven la diferencia??

2. Ahora que ya tenemos lo básico debemos ubicar dónde se hace el diseño en el Blogger, no?? ok, en la página inicial de Blogger aparece de la siguiente forma:


Ese link nos envía a una página que tiene todos los elementos que conforma la página. Lo importante, por ahora, de los elementos de la página es la cabecera, que lo mejor será ponerla de una antes de pasar al Diseñador de plantillas:



He puesto los valores para que salga igual como está el blog...

Con esto, ya nos podemos dirigir al Diseñador de Plantillas!!

3. La pantalla del Diseñador de plantillas se ve de la siguiente forma:


Como verán hay 5 secciones principales:

a. Plantilla: Es en la que está la imagen de arriba. Blogger tiene unas plantillas predeterminadas que podemos utilizar como base para nuestro diseño. Yo acostumbro a usar la Filigrana así que con ella haré el tutorial sin embargo, para ver cómo se modifican las otras lo mejor es a prueba y error ¡No me van a creer cuánto he aprendido de esa forma!

b. Fondo: Donde ponemos el fondo que ya habíamos hecho anteriormente. Como se habrán dado cuenta hay muchas opciones y todas ellas dependen de cómo hayamos pensado hacer el lay al principio, ya imaginarán todas las posibilidades que aún no he explorado!! xD



En cuanto a la gama de colores que aparece a la izquierda de lo del fondo, simplemente elige la que esté más acorde a tu diseño, sin embargo, no te preocupes que cualquier cosa se puede modificar después...

c. Diseño: Es mejor hacer este primero antes del de ajustar ancho. Aquí puedes elegir la cantidad de columnas de tu blog y cómo están distribuidas, así como el diseño del pie de página.


d. Ajustar ancho: Aquí vemos el tamaño de las columnas que tiene nuestro blog... todo esto depende de lo grande de nuestra cabecera (el ancho del "Blog Completo" debe ser igual al ancho de ésta en general), además, sólo se modifica el tamaño de las barras laterales (las que no son las entradas del blog). Aquí puedes jugar para saber cuál es el mejor tamaño!


e. Avanzado: Con esto se termina el diseño y, por tanto, es una sección muy importante, ya que nos define el color del texto, del título, de los links y el tipo y tamaño de letra en cada caso, además de otras cosas como bordes y viñetas.


Siendo honesta, todo sale por prueba y error. Aún no soy tan experta para saber un método más sencillo... simplemente veo qué color y letra me cuadra más, así que esta parte es la más larga en el Diseñador de plantillas: creo que puedo demorar una o dos horas probando colores!

El código que se utiliza aquí para los colores, consiste en una combinación de seis letras y/o números *¿ya habían escuchando de ésta? se utiliza mucho en páginas web*... yo me valgo del selector de color de photoshop para esto:


4. Aplicamos al blog y listo, ya podemos poner todos los gadgets que queramos, añadiéndolos en los "Elementos de la página" y viéndo cuál es el que necesitamos... hay demasiadas opciones y no las manejo todas bien xD


Con esto ya tenemos la plantilla en Blogger lista!!! no es tan complicado aunque sí es cierto que al principio confunde... más fácil que hacer el código tú mismo si es xD. Espero que les sirva el tutorial (a los que tienen Blogger y no sabían cómo hacer este tipo de layouts). Juro que cuando tenga más tiempo haré uno de sólo photoshop que, a la larga, es la base de los lays que yo hago~

PD: Avatar hecho por Amest9416 de Ryou Fujibayashi de Clannad

Estado: (Agotada, sin ganas de nada)
Terminé escuchando: El silencio de la noche (?)