FOLLOW ME!

SOCIAL NETWORK

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

Diseñar un layout {Parte 1}

31 ago 2012
Esta entrada forma parte de los tutoriales de los que hablé hace un tiempo sobre cómo hacer un layout. Como había dicho, los dividiré en 2 partes, la de diseño y la de codificación. Hoy comienzo con la de diseño que a su vez estará dividida en 3 partes: header, entradas y sidebar.



Lo primero que yo hago cuando comienzo a diseñar un layout es el header (o cabecera) aunque eso es cuestión de gusto y comodidad pero creo, personalmente, que el header nos dará la pauta y nos guiará para después hacer el resto del diseño.

Antes de diseñar debemos conocer las medidas que tendrá nuestro header. Bien, el tamaño puede variar pero debe ser mediano o grande. Aquí te dejo las medidas más comunes:
+ 900x500px // 900x600px
+ 1000x600px // 1000x700px
Esas son las que yo más utilizo. En general te recomiendo que el ancho no sea más pequeño que 800px ni exceda los 1000px y que el alto no sea menor a 300px ni exceda los 700px.

Luego lo diseñas a tu gusto. La verdad es que no os voy a explicar como diseñar un header porque es una cosa de creatividad... es cómo hacer un blend o un wallpaper, si uno conoce las herramientas que nos ofrece el Photoshop y usa recursos como texturas, pinceles, estilos, etc. tendrá un header bonito y original pero no hay una única manera de hacer un header.

Les recomiendo que entren en diferentes fansites para observar como están diseñados. NO para copiar ideas sino para que puedan darse una idea de cómo es la estructura de un header. Por ejemplo, que llevan una zona con los links de navegación, que en ocasiones tienen iconos que llevan a las diferentes redes sociales, etc.



+ Uso muchos brushes y texturas (sobre todo de luz). El tipo de brushes depende del estilo del diseño que vaya a hacer. Valganse de todoooo lo que les ofrece el Photoshop, usen estilos en los textos, pongan sombras, trazos...

+ Sobre los colores. Trato de elegir 2 o 3 y moverme dentro de esos, en distintas gamas. En lo posible no usen muchos colores distintos. Además es recomendable, más lindo y más vistoso si los colores combinan  con las imágenes que hayan elegido.

+ Sean prolijos. Recorten bien las fotos que sean PNG, no escatimen ni si excedan con los recursos. Las fotos, que no se corten con el borde del archivo, borren lo que sobre, para que todo quede dentro del rectángulo que es nuestro header.

Por ejemplo, cuando ponen un PNG en lugar de que quede como en la primera foto, agarren una goma con bordes difuminados y borrenle el borde para que quede como en la segunda:


También pueden taparlo con algunos pinceles, como aquí:



+ En general, el menú de navegación la pongo dentro de una forma personalizada. Por ejemplo dentro de un rectángulo de bordes redondeados como aquí:



Sin embargo hay muchas maneras de acomodarlo. Verás que en mi diseño actual esta acomodado de manera vertical. Como te digo, todo es cuestión de gusto, imaginación y creatividad.

+ Pueden jugar con las herramientas de recorte y poner imágenes recortadas en forma de círculos o rectángulos, como se ven en mi diseño actual. También pueden poner imágenes en el fondo con una opacidad más baja. Como se ve en este header: {X} Son sólo algunas de las cosas que se me ocurren.

+ ¿Qué más puedo decirte? No lo se... tu sólo concéntrate en explotar al máximo tus ideas, con el tiempo lo irás haciendo mejor. No se aprende nada de la noche a la mañana.

+ Pueden fijarse en mis headers PSD y modificarlos un poco para hacer sus primeros intentos, a veces está bueno intentarlo. Les doy permiso para que les cambien las imágenes por las de sus artistas preferidos. Es para que tengan idea de como acomodar las cosas.

Aquí les dejo los links de los PSD que ya subí al blog {1} {2}

Cuando pueda voy a hacer y subir alguno más. También les dejo algunos que encontré en deviantART, que no hice yo; si usan alguno tienen que poner créditos, pero en realidad se los dejo para que tengan diferentes ideas para crear los propios, ese sería el objetivo:

{1} {2} {3} {4} {5} {6} {7}

Bueno y esto vendría siendo todo lo que tengo para decirles.
Cualquier pregunta o duda que tengan, no duden en dejarla mediante un comentario que les voy a responder. Sus dudas pueden servirme también para agregar cosas a esta guía, lo cual sería muy bueno.

Espero que les sirva de algo, y estén atentos porque próximamente subiré la segunda parte que es sobre que tener en cuenta en el momento de diseñar las entradas.

9 comentarios :

  1. hola pudes hacer un tutorial de como hacer la letras que haces con esas rallitas en negro como has hecho en este texto http://i1262.photobucket.com/albums/ii614/notasinglesong/demi1.png el cual dice demi lovato porfa ?

    ResponderEliminar
    Respuestas
    1. Ay, es que es un estilo que me vino así jajaj, se puede lograr con un motivo pero mejor os voy a dejar directamente los estilos para descargar porque ya me preguntaron mucho por ellos :)

      Eliminar
  2. ¡Hola Cat! Me gustaría que hicieras un pack con tus brushes y luces. También si puedes decirme como se llama la letra del menú de navegación donde pone Home Rules Tutoriales Descargas . ¿Cómo se llama la fuente? Muchas gracias

    ResponderEliminar
    Respuestas
    1. Sí, claro que puedo :) Es más tenía pensado hacerlo jajaja, hoy mismo subiré el pack de los brushes.

      La fuente que me preguntas se llama Zebra :)

      Un besito!

      Eliminar
  3. Y como hago los sidebars y la entrada?

    ResponderEliminar
  4. hola.. mira yo tengo todo mi diseño con el código que nos distes.. pues lo que me pasa es que no puedo subir las imagenes!!!! no salen oh si sale el sidebar sale lo de arriba y no todo.... lo que te vengo a decir es que si vos no me pondrías vos mi blog con mis links que hice?? se entiende? si vos no colocarías mis links al código porque a mi no me sale.. ya tengo todo solo hace falta colocarlo al código! respondeme please oh al twitter @mileycyrusjuli ♥ esta muy lindo mi diseño please...♥

    ResponderEliminar
    Respuestas
    1. Mira, la verdad no se, debes estar copiando el código incorrecto y por eso no te sale. Si miras bien el video y lo vas siguiendo paso a paso, explico cuál es el link que tenes que copiar y pegar en el link.

      La verdad yo no tengo tiempo para hacerte tu diseño, ni siquiera puedo terminar con el mío, lo siento :(

      Eliminar
  5. Hola, una pregunta, yo soy TOTALMENTE nueva en esto, pero logré hacerlo con un header en PSD. La pregunta es, como lo pones en el blog y como haces que te lleve a esos lugares? SOY MUY PRINCIPIANTE, como verás. Pero necesito ayuda, por favorr:|

    ResponderEliminar
    Respuestas
    1. Perdón por la ignoracia, ya ví tus tutoriales♥ Gracias

      Eliminar