Diseñar un layout {Parte 2}

¡Bienvenidos! Esta es la segunda parte de la serie de entradas "¿Cómo hacer un layout?". En esta ocasión veremos cómo diseñar en el Photoshop la parte de las entradas.

Una pregunta muy común cuando comienzan a diseñar layouts es ¿de qué tamaño hago esto o aquello? Pues bien, hay que tener en cuenta que no deben superar un máximo de ancho ya que las pantallas tienen una determinada resolución y si lo hacemos demasiado grande se verá mal. 

En general las medidas que yo utilizo para diseñar las entradas son las que dejo aquí abajo. También pueden hacerlas un poco más pequeñas, pero no lo recomiendo ya que recuerden que contienen texto y de esa forma se verá todo muy comprimido. La más común es la primera, la segunda ya se va un poco en tamaño pero lo pueden usar.

Bueno en realidad, lo más importante es el ancho, el largo no importa tanto ya que eso se adecua luego al largo de tu entrada o el contenido de tu sidebar.

ENTRADAS
+ 600x600px.
+ 700x700px

SIDEBAR
+ 300x500px
+ 400x500px

Como dije ya en la primera parte, el diseño es todo cuestión de gusto. Nadie puede enseñarles cómo usar su imaginación o creatividad. Les recuerdo que pueden entrar diferentes fansites o blogs para observar como lo han diseñado. NO para copiar ideas sino para que puedan darse una idea de cómo es la estructura y quizás tener en cuenta algunos detalles mínimos para crear sus propios diseños. Eso sirve como una suerte de "inspiración".

+ Lo primero, te recomiendo que hagas el archivo en PNG, creo que esto ya lo había dicho en la primera entrada {Tips para hacer un layout} pero se los recuerdo por las dudas. Pueden ponerle color de fondo o no, pero es igual. Yo se lo suelo poner para distinguir luego lo que voy haciendo.

Y además que si no ponen color de fondo y ponen efectos de luces o texturas en diferentes modos de fusión, cuando lo guarden sin fondo, se perderá.

+ En general, y si has visto otros blogs y páginas, las entradas tienen diferentes formas, no son simples cuadrados. Son rectángulos con formas redondeadas, algunos tienen puntas, etc. Aquí puedes ver algunas:

EN ESTE VIDEO TE ENSEÑO COMO HACER CADA UNA DE ELLAS

+ Una cosa que se suele hacer mucho para las entradas es tomar el conjunto de imágenes del header, redimensionarlo y acomodarlo en la parte inferior de las entradas. Cómo hice en este diseño:

Se ve claramente que lo que puse debajo de las entradas es un trozo de las imágenes del header. Aunque claro, borré algunas cosas.

+ Otra cosa muy común es poner el título (tanto del sidebar o de las entradas) dentro de un rectángulo o apartado. Como se ve en el ejemplo que dejé más arriba, lo mismo puedes hacerlo con el rectángulo (también el de bordes redondeados); aunque no es estrictamente obligatorio.

+ En próximos videotutoriales les enseñaré algunos ejemplos de diferentes modelos para que tengan ideas de cómo hacer entradas y sidebars. Pero repito: lo mejor es que experimenten.

Bueno no hay mucho más que pueda decirles porque lo básico está y el resto es cuestión de imaginar, crear, probar, usar recursos, efectos, etc. Lo que si recuerden, como dije en el primer tutorial, combinar los colores, ser prolijos y seguir la misma línea de estilo que utilizaron en el header :)

Espero que esto les haya servido y en la próxima entrega de estos tutoriales comenzaremos a codificar. Lo primero será cómo hacer image-map al header, es decir cómo ponerle esos links al menú y tal. 

Y espero también que esto les haya servido de algo! Cualquier duda, pregunta o cosita que quieran saber me dejan un comentario en la entrada o por el Ask, vale? También son bienvenidas sugerencias o cosas que les parece que podría agregar en estos tutoriales!

ME GUSTARÍA QUE COMENTEN YA QUE ESTOS TUTORIALES ME LLEVAN TIEMPO Y DEDICACIÓN. Digan que les parece, si les sirve o no, si estan bien explicados, si piensan que pueden aplicarlo en algo útil, mismo si no les gusta, etc. siempre que sea constructivo! :)

Un beso, Cata.