Diseño de comentarios en WordPress

Add you comment

Screenshot de premassagar

Aunque parezca extraño, una de las cosas que más me ha costado diseñar en este sitio personal han sido los comentarios. Muchas son las preguntas que debes hacerte antes de ponerte manos a la obra.

Lo bueno de un sistema de gestión de contenidos como WordPress es que te facilita muchísimo esta labor. Ya sabes que la mayoría de las plantillas (templates) que están a tu disposición cuentan con la integración de comentarios con avatares (leídos desde Gravatar) o el cebreado de color para los mismos (comentarios par, comentarios impar y comentarios del autor). Solventados estos problemas las principales cuestiones que has de plantearte a la hora de diseñar tus comentarios son:

Uso y tamaño de los avatares

Aunque por defecto los avatares se presentan en la mayoría de los sitios con unas medidas “estándar” (unos 48×48 pixel), nunca descartes la posibilidad de presentarlos a un tamaño mayor o, incluso, no presentarlos. Por ejemplo:

  • En un sitio web dedicado al diseño pueden participar diseñadores que tendrán, supongamos, bonitos avatares. Si aumentas el tamaño se verán más atractivos y complementarán el diseño de tu sitio con toques de diseño, color y creatividad.
  • Sin embargo, en un sitio web con formato blog que genere comentarios largos (debates), los avatares podrían robarle mucho espacio al principal protagonista de tu sitio: el texto. En casos extremos no es descabellado prescindir de ellos.

Estructura visual del comentario

En resumen, los comentarios de tu sitio contienen tres partes:

  • Autor (nick, sitio web y avatar)
  • Metadatos (enlace, hora y fecha de la publicación)
  • Comentario (el comentario en sí)

No necesariamente los metadatos tienen que presentarse junto al nombre del autor. Recuerda que tu intención es maquetar con la ayuda de tu hoja de estilos una presentación mejorada y usable de los comentarios. Concibe los datos a presentar como las capas que dispones para crear en tu modelo y juega un poco con ellas. Te propongo algunos ejemplos de wireframes para comentarios:

comentario_modelo1
comentario_modelo2
comentario_modelo3

Seguro que con un poco de imaginación puedes sacar decenas de modelos.

Diseño gráfico de los comentarios

Una vez decidas el boceto (wireframe) de tus comentarios, te será mucho más fácil diseñarlos y posteriormente maquetarlos. Para la labor de diseño debes empaparte de los blogs que más te gustan para anotar acabados y tener en cuenta varios factores además de todo lo señalado:

  • Tipografía

    Si sueles obtener comentarios cortos, considera la opción de ofrecer una tipografía de mayor tamaño para que luzca mejor. Si sueles obtener comentarios extensos, trabaja las propiedades de interlineado (line-height) y espacio entre letras (letter-spacing) para que la lectura no resulte agotadora. En cualquier caso siempre procura que sean legibles y que la tipografía contraste lo suficiente con el color de fondo.
  • Formato

    Procura que tu formulario de comentario permita el uso de etiquetas HTML para enriquecer los textos: los usuarios con más experiencia sabrán valorarlo. Testea y prepara todas estas etiquetas desde tu hoja de estilos para evitar sorpresas posteriores.
  • Mensajes

    Enriquece la estructura de tus mensajes en los comentarios (error, moderación) con hoja de estilos.

Tutorial: Mejorando la foto de nuestro perfil

Retocando foto para perfil (21/21)

Este es un tutorial muy específico y fácil (para el usuario medio y principiante de Photoshop) que me han pedido algunos amigos en relación a la fotografía que uso en la mayoría de los perfiles que tengo por estos mundos de Internet. Se trata, sin más dilación, de mejorar la fotografía de nuestros perfiles dándole un poco de gracia a una fotografía (plano medio) en blanco y negro. Yo he elegido para la muestra la fotografía de dos de mis amigos de flapa.

De color a blanco y negro

Lo primero que vamos a hacer es abrir nuestra fotografía en photoshop tal y como la hemos tomado con nuestra cámara de fotos (digital, supongo y espero :-):

Retocando foto para perfil (01/21)

Lo siguiente que vamos a hacer es corregir los niveles (Imagen > Ajustes > Niveles) de nuestra fotografía. Este es un paso básico que recomiendo siempre al empezar cualquier retoque fotográfico. Nosotros vamos a constrastar un poquito la imagen, acercando levemente las flechitas de los extremos hacia la mitad:

Retocando foto para perfil (02/21)

Para no estropear la fotografía original, vamos a trabajar sobre una capa duplicada (por si tenemos que volver a rescatar la original). Seleccionamos la capa actual en el panel de capas y con el botón secundario del ratón hacemos click sobre ella seleccionando “Duplicar capa” en el menú emergente.

Retocando foto para perfil (03/21)

Finalmente, para pasar a blanco y negro nuestra fotografía, hacemos click sobre la nueva capa duplicada para seleccionarla y nos vamos a Imagen > Ajustes > Desaturar. Inmediatamente la imagen se volverá blanco y negro (pero en un gráfico RGB, por lo que podremos añadir color). A continuación duplicaremos de nuevo ésta capa para trabajar sobre una tercera.

Retocando foto para perfil (04/21)

Un paso alto

Lo siguiente que queremos hacer es darle fuerza al retrato. Para ello vamos a marcar o máximo posible los rasgos del rostro y el cuerpo sin perder luz en la fotografía. Comprobando que tenemos la tercera capa seleccionada, nos vamos a Filtros > Otros > Paso alto. En el cuadro de diálogo emergente podréis configurar el radio del filtro. Como veréis el filtro crea un negativo de la imagen con halos en los bordes externos de la figura. La nitidos de dichos halos es lo que nos interesa en este caso. Yo marqué un radio de 9,7. Vosotros probad según la fotografía que uséis.

Retocando foto para perfil (05/21)

Aplicado dicho filtro sobre la capa lo siguiente que debéis hacer es desplegar el menú de opciones de fusión de capas y seleccionar Luz linear. Comprobaréis que la fotografía ha cobrado mucha más fuerza. A continuación seleccionamos la dos capas en blanco y negro y las acoplamos para convertirlas en una sola imagen.

Retocando foto para perfil (06/21)

Recortando la figura

Para finalizar, vamos a recortar la figura. Muchos usuarios de nivel básico usan Photoshop únicamente para esta tarea, pero sin conocer realmente que existen muchas opciones para realizarla. Aqui os muestro la más segura, de tal manera que si os equivocáis recortando, por muchos pasos que déis siempre podréis recuperar la figura original.

Pulsando el icono de nueva capa en la parte inferior del panel de capas, creamos una nueva capa vacía entre las dos capas que tenemos actualmente:

Retocando foto para perfil (07/21)

Desactivamos la visibilidad de la capa superior para ver la nueva capa que hemos creado. Como está vacía, la rellenamos con un color o un degradado:

Retocando foto para perfil (08/21)
Retocando foto para perfil (09/21)
Retocando foto para perfil (10/21)

Usamos de nuevo el menú de opciones que están al pie del panel de capas y, con la capa de nuestra foto retocada, seleccionamos “Añadir máscara de capa“. Se creará en la capa un marco blanco que es nuestra máscara.

Retocando foto para perfil (12/21)

Importante: La máscara de capa nos vale para ocultar ó mostrar zonas de la capa sin dañar la foto original. Selecionando la goma de borrar podremos ocultar zonas de la capa cuando el color de fondo es negro y podremos mostrar partes de la capa cuando el color de fondo es blanco. Si en algún momento nos arrepentimos de todo el proceso, sólo tendremos que arrastrar el cuadro blanco de la máscara de capa a la pequeña papelera que tenemos debajo y eliminar la máscara. En seguida recuperaremos la fotografía enmascarada.

Dicho esto, seleccionamos un pincel adecuado para nuestra goma de borrar y nos disponemos a ocultar a través de la máscara de capa las zonas que correspondan. Usa el zoom y reduce el pincel de la goma de borrar para los pequeños detalles.

Retocando foto para perfil (13/21)
Retocando foto para perfil (14/21)
Retocando foto para perfil (15/21)
Retocando foto para perfil (16/21)

Componiendo

Finalmente vamos a realizar la composición. Duplicamos por seguridad la capa recortada y la reescalamos (Edición > Transformar).

Retocando foto para perfil (17/21)
Retocando foto para perfil (18/21)

Creamos una máscara de capa en la nueva capa que hemos reescalado y degradamos la parte inferior de la figura. Con esto conseguimos disimular el corte inferior.

Retocando foto para perfil (19/21)

Hacemos doble click en la capa que estamos trabajando y se nos abrirá el Panel de estilos de capa. Seleccionamos la primera opción de “Sombra exterior” y configuramos los ajustes para crear una sombra al rededor de la figura.

Retocando foto para perfil (20/21)

Y eso es todo!

Repitiendo toda la operación en varias fotografías puedes crear una foto para perfiles de grupo. Espero que o resulte de utilidad estos trucos de iniciación con Photoshop.

Retocando foto para perfil (21/21)