FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Tips para hacer un layout

21 ago. 2012
¡Hola a todos ahí afuera! Me he decidido a comenzar con la (dificil) tarea de comenzar a explicar cómo es hacer un layout para Blogger. Ya he comenzado a escribir también la próxima entrada pero lo voy haciendo de a poco.

Lo primero será una guía de preguntas y respuestas rápidas que iré agrandando con algunas que [espero] me vayan haciendo ya que no se me ocurren demasiadas. Va a ser útil sobre todo para personas que tienen algunas ideas básicas de cómo manejar el código HTML más que nada... quizás si no tienes idea de nada esto te sirva de poco y nada. Si quieren preguntar algo sobre las layouts, me dejan un comentario aquí en Ask o en el AskBox de aquí de blog y la agregaré a esta lista.

 


1. ¿De qué medida hacer las cápsulas del sidebar y las entradas?
Bien, eso depende. Se hacen del tamaño que tu quieras, aunque te recomiendo que la medidas de ancho de ambos no supere los 1000px. Si me lo preguntas a mí, yo en general los hago de las siguientes medidas:
SIDEBAR: 300x500px
ENTRADAS: 600x600px
(Como ven la anchura de las dos partes suma 900px - 300+600px) En general, recomiendo que la anchura del sidebar no sobrepase los 350px pero bueno, es a tu gusto.

2. ¿En qué formato debo guardar las imágenes del sidebar y las entradas? 
Yo recomiendo que mejor sea en formato PNG. Es de mejor calidad que el formato JPG. Solemos asociar el formato PNG a las imágenes que no tienen fondo pero no requiere NECESARIAMENTE que la cosa se va a guardar sin fondo... si tu le pones un fondo así se quedará. Esto no significa que no puedas guardarlo e JPG es sólo que a veces en ese formato las imágenes pierden calidad.

3. ¿Cómo hacer que las esquinas del sidebar y entradas se vean redondeadas?
Bien esto requiere un pequeño tutorial de Photoshop que haré en la brevedad. Pronto pondré aquí un link.

4. ¿Cómo hago para codificar?
Te recomiendo que consigas un código base como el que dejaré pronto en el blog. Esto facilita mucho las cosas para los novatos y los no profesionales como nosotros. El HTML es un mundo aparte y si bien no es difícil, no es una cosa que se aprenda de un día para el otro y a veces puede ser un poco enredoso. Aprender es mucho más fácil cuando uno entra en el uso diario del mismo. Aunque unos buenos tutoriales básicos nunca vienen mal...

5. ¿Cómo consigo que mi diseño del Photoshop pase a estar en mi blog?
Las imágenes que hagas en el Photoshop (el header, las entradas y el sidebar) deben ser recortadas para poder ser codificadas. Y no es que magicamente pasen a ser parte de tu blog. Muchas veces pasa que sabemos como hacer el diseño pero no como codificarlas... lo cual, explicaré más adelante.


11 comentarios :

  1. Harías un tutorial de como hacer el efecto cuando apoyas el mause sobre las imágenes como tenes vos.

    Gracias y me gusta tu blog hasta me hice miembro ¡sigue así!

    ResponderEliminar
    Respuestas
    1. Ya subí ese tutorial (: Si te fijas en la pestaña "tutoriales", dentro de los "Tutoriales Blogger" está como "Efectos para imágenes" :)

      Eliminar
  2. una cosa que no entiendo, ¿se hace como si fuera una sola imagen o cada cosa por separado? No se si me explique, me refiero a que por ejemplo el header, la sidebar, etc. ¿Se hacen en una sola o ya despues con los codigos queda todo ordenado donde debe ir?

    ResponderEliminar
    Respuestas
    1. No, cada una se hace por separado; es decir abres un archivo y haces el sidebar, abres otro y haces las entradas y en un tercero el header.

      De todas maneras, cuando terminas, para poder codificarlo a cada parte la tendras que recortar en partes más pequeñas.

      Se entiende? Eso es lo que querías saber? 1b!

      Eliminar
    2. Mi entender por fin :D ¡GRACIAS!

      Eliminar
  3. Holaa
    Soy muy nuevo en esto :3 con qué programa haces las plantillas o layouts?? Porfa necesito ayuda ://

    ResponderEliminar
  4. Cata tengo preguntas:
    de que medidas hago el header??
    y como puedo hacer cuando por ejemplo pongo el mouse en home y le doy click y me pone de nuevo a tu blog como hago?? :( intente con image map pero no me sirve me ayudas??
    y como deberia ser la medida de la entrada del medio y la de abajo igual con lo sidebares
    cual seria la medida del medio del sidebar y la de abajo??

    ResponderEliminar
    Respuestas
    1. No se por qué no te sale la verdad, si me explicas mejor tal vez pueda ayudarte. La medida del sidebar da igual como lo cortes, como explique en otro tutorial despues se modifica en el código (:

      Eliminar
  5. Hola, podrias hacer un tutorial sobre esto? Es q no lo entiendo :( Bueno, muchas gracias:)

    ResponderEliminar