Diseñando un boletín Navideño de noticias en Photoshop

En este tutorial te guiaré a través del proceso de diseñar una plantilla temática limpia y festiva. Empezaremos totalmente desde cero, redactando el diseño con Adobe Photoshop. Vamos a utilizar algunas técnicas básicas e intermedias para crear este diseño con la conversión en mente. ¡Vamos a iniciar!

Recursos del Tutorial

Con el fin de continuar necesitarás algunos recursos (libremente disponibles):

• Open Sans fuente de Font Squirrel
• Playfair Display fuente de Font Squirrel
• Bokeh of String Lights on Tree imagen de Good Stock Photos
  
• Cita de Año Nuevo de BrainyQuote

Preparar el documento

Paso 1

Comienza creando un nuevo documento de Photoshop (Archivo > Nuevo...) utilizando la configuración que se muestra a continuación. La mayoría de los boletines de correo electrónico tienen un ancho definido alrededor de 620 píxeles. Usualmente uso 600px, pero cualquier cosa por debajo de 620px está bien. Cuando se construye en HTML, esto bien podría ser sensible de todos modos.

Paso 2

Vamos a establecer algunas guías para que tengamos nuestra área segura diseñada dentro de los límites de 620px de ancho. Ve a Ver > Nueva Guía... y establece algunas líneas guías en los lados, así como una guía en el medio para que podamos alinear las cosas más fácilmente.

Nota: Las líneas guías utilizadas para este tutorial son verticales a 40px, 80px, 340px, 600px y 640px.

Sugerencia: También puedes utilizar el complemento de Photoshop llamado GuideGuide para hacer este proceso aún más rápido.

Paso 3

Siguiendo la etiqueta de Photoshop vamos a mantener las cosas organizadas y por lo tanto fácil de navegar y editar. Vamos a crear tres grupos de capas denominadas “Header”, “Message”, “Best” y “Quote”. Para crear grupos, ve a Capa > Nuevo > Grupo... y dale a cada una un título como se ha mencionado. Para la creación rápida de un grupo basta con hacer clic en el icono de la carpeta.

Preparando el Fondo

No debes hacer tu fondo demasiado fantasía o entretenido porque muchos usuarios de correo electrónico no lo verán en pantallas más pequeñas. También vale la pena mencionar que el fondo no debe ser una imagen, ya que será bloqueado por defecto en muchos clientes de correo electrónico.

Paso 1

Vamos a iniciar configurando el fondo del correo electrónico. Cambia el color del primer plano a azul muy claro #f6f9fb y pulsa Alt + Retroceso para rellenar la capa "Fondo". Puedes utilizar cualquier otro tono de luz para tu correo electrónico, pero es mejor tener este color sutil para no distraer al destinatario, pero crea un estado de ánimo diferente.

Paso 2

Ahora es el momento de establecer un fondo en el área segura donde se pondrá todo el contenido del correo electrónico. Selecciona la Herramienta Rectángulo (U) y dibuja un rectángulo blanco #FFFFFF entre las guías verticales primera y última separadas por 600px.

Diseñando la cabecera

La cabecera de nuestro correo electrónico es muy importante y es el punto crucial donde el destinatario del correo electrónico decidirá si leer más vale su tiempo. De acuerdo con esta guía de Nicole Merlin, experto en correo electrónico extraordinario, es importante ser claro y transparente.

"Indicar al remitente, cortar la lanilla y llegar directamente al punto".

Para este tutorial simplemente pondré un nombre de empresa y un enlace para que la gente abra el correo electrónico en un navegador web en caso de que no se cargue correctamente a través del cliente de correo electrónico. Además, voy a incluir una imagen enorme con la mensajería sencilla de establecer el estado de ánimo y mostrar las intenciones de este correo electrónico, que es acerca de desear las felices fiestas.

Paso 3

Abre el grupo “Header” y selecciona la Herramienta Texto Horizontal (T). Puede que sea mejor escribir el nombre de tu empresa en lugar de usar un logotipo porque, como he mencionado antes, las imágenes pueden estar deshabilitadas cuando se abre el correo electrónico y puede arruinar la experiencia porque tu logotipo no será visible.

Elige una fuente que utilices para tu marca y escribe el título de tu empresa, colócala en la parte superior izquierda y dale un poco de espacio alrededor. En mi caso utilicé Open Sans (Negrita) con un tamaño de 18px de color gris oscuro #434343.

Paso 4

Es muy importante proporcionar un enlace para que la gente pueda hacer clic o lo toque y abra el correo electrónico en su navegador en caso de que no se vea muy bien en el cliente de correo electrónico. Sólo un simple enlace de texto hará el trabajo. Puesto en el principio para que los lectores de pantalla lo encuentren de inmediato. He usado la misma fuente Open Sans (seminegrita) y cambiado el color a gris más brillante #666666 y reducido el tamaño de la fuente a 13px. Finalmente colócalo en la esquina superior derecha del correo electrónico.

Paso 5

¡Impresionante! Ahora necesitamos colocar una imagen para llamar la atención del destinatario. Usaremos una foto con temas de Navidad, añadiendo un efecto de gradiente y copiándolo por encima de todo.

Coge la Herramienta Rectángulo (U) y dibuja una caja de tamaño 600x300px entre la primera y la última guía. Después, crea una nueva capa en la parte superior de la misma y mantén pulsada la tecla Alt y el ratón sobre la capa de fotos hasta que veas una pequeña flecha apuntando hacia abajo. Cuando lo veas, haz clic en él y crearás una máscara de recorte. Ahora escoge la Herramienta Gradiente (G) y elige el degradado predeterminado de rojo a verde.

Ahora haz el degradado arrastrando el ratón desde la parte superior izquierda a la parte inferior derecha. Obtendrás algo como el siguiente ejemplo.

Paso 6

Después, descarga la foto Bokeh de String Lights on Tree de Good Stock Photos y colócala sobre la capa de degradado creando una máscara de recorte para esta capa también. Finalmente pulsa Comando + T y cambia el tamaño de la foto.

Sugerencia Profesional: Mantén presionada la tecla Mayús para dibujar/redimensionar proporcionalmente.

Paso 7

Ahora define el modo de mezcla de capas como Superposición.

Paso 8

Finalmente, escribamos nuestro mensaje principal. Estoy usando blanco #FFFFFF con negrita, todavía el elegante Playfair Display (negrita cursiva) 52px de tamaño para retratar la sensación de fiesta. Al diseñar boletines de correo electrónico asegúrate de mantener tu mensaje corto y claro para que los usuarios lo reciban de inmediato.

Diseñando el área del mensaje

Otra cosa que debes tener en cuenta es el diseño de bloques que pueden ser reutilizados. Por ejemplo, diseñaremos este bloque de mensajes que puede convertirse en una plantilla para que los usuarios puedan cambiar el título, la copia principal y el botón de llamada a la acción sin necesidad de un diseñador porque todo estará pre-diseñado. También pueden duplicar tal bloque y utilizar mensajes diferentes.

Paso 9

Es inteligente diseñar tus correos electrónicos en una columna y alinear todo en el centro para que de esta manera pueda convertirse en un diseño fácilmente receptivo . Abre el grupo “Message” y selecciona la Herramienta Texto Horizontal (T). Estaré reutilizando la capa de texto utilizada para el título de la compañía y aumentaré el tamaño de la fuente a 32px y cambiaré el ancho a Extrabold.

Paso 10

Ahora es el momento de decir algo con más detalle, no lo hagas demasiado largo y trata de atraer la atención del lector, llevando al lector a hacer clic en el botón de llamada a la acción que diseñaremos en un momento. Usando la misma Herramienta de Texto Horizontal (T) escribe tu copia. Para la mía he usado el mismo color que para el enlace "Abrir en el navegador" #666666 y Open Sans (Regular) con 18px de tamaño.

Paso 11

¡Impresionante! Tienes la atención del lector y ahora es el momento de poner un botón de llamada a la acción para que tu correo electrónico lleve a algún sitio útil. Crea un nuevo grupo llamado "CTA" y toma la Herramienta Rectángulo (U), después de cambiar el color del primer plano a un rojo #de1816 que representa el estado de ánimo de Navidad, dibuja una forma de rectángulo. En mi caso es 240x40px de tamaño. Luego, selecciona la Herramienta de Texto Horizontal (T) y escribe el mensaje del botón. He usado blanco #FFFFFF con la fuente Open Sans (Negrita) y un tamaño de 14px.

Finalmente necesitamos cerrar el bloque separándolo con una línea; establece el color del primer plano a #eeeeee gris claro y selecciona la Herramienta Línea (U) con el ancho establecido en 1px. Después dibuja una línea horizontal entre la primera y la última guía. Deja algo de espacio por encima de la línea.

Sugerencia Profesional: Mantén pulsada la tecla Mayús para dibujar líneas rectas perfectas.

Diseñando el área “Best of”

Una característica muy común en los boletines de noticias del correo asimilado es enviar los artículos más recientes que los lectores pueden no haber visto o estarían interesados en leerlos. Al diseñar un módulo de este tipo debes tener en cuenta que va a ser un elemento dinámico así que necesitas configurar el decorado dejando el creador de correo electrónico para reemplazar la información.

Paso 12

Duplica la capa del título de mensaje utilizada anteriormente pulsando Comando + J y arrastrándola al grupo "Best". Después de eso, cambia su título y colócalo por debajo de la línea de forma coherente, para mantener el ritmo vertical.

Paso 13

Ahora enumeraremos algunos de los mejores artículos del año. Para este tutorial simplemente usaré imágenes de artículos, títulos y descripciones de Diseño Web en Tuts+.

Crea un nuevo grupo llamado “Article”. Toma la Herramienta Rectángulo (U) y, manteniendo presionada la tecla Mayús, dibuja una caja con un tamaño de 140x140px. Luego, elige la imagen del artículo y arrástrala a tu ventana de Photoshop, después eso, crea una máscara de recorte como lo hicimos antes y cambia el tamaño de la imagen si es necesario.

Paso 14

¡Genial! Ahora tenemos que ingresar el título del artículo y una breve descripción para que el lector pueda obtener una rápida descripción antes de hacer clic o tocar. Volveré a usar la capa título de la sección duplicándola y reduciendo el tamaño de la fuente y también duplicando la capa de descripción del grupo “Message”.

Paso 15

Minimiza el grupo “Article” y duplícalo dos veces más presionando Comando + J. Ahora, mueve estos grupos duplicados por debajo del primero y cambia los títulos, imágenes y descripciones de estos elementos duplicados.

Paso 16

Finalmente duplica el grupo "CTA" y la capa de línea seleccionándolos y pulsando Comando + J, después mueve estas capas al grupo "Best" y colócalas debajo de los artículos dejando suficiente espacio.

Diseñando la cita y el pie de página

El final está muy cerca. Pongamos un bloque final en nuestro boletín, una cita inspiradora con una llamada secundaria a la acción para twittearlo. La mejor práctica es repetir la llamada a la acción principal al final del boletín, pero romperemos esta regla aquí y usaremos una cita inspiradora para energizar al lector.

Paso 17

Abre el grupo “Quote”, selecciona la Herramienta de Texto Horizontal (T) y cualquier cita que desees de BrainyQuote. Copia la cita y escríbela usando la misma tipografía elegante que hemos usado para el gráfico en la parte superior de nuestro boletín. En mi caso es Playfair Display (cursiva) con un tamaño de 24px y color gris como se utilizó para la copia anterior #666666.

Paso 18

Ve al sitio web de Twitter y copia un botón de tuitear. Toma una captura de pantalla pulsando Mayús + Control + Comando + 4 y seleccionando el botón Tweet. Después de eso, pégalo y colócalo debajo de la cita.

Paso 19

Una última cosa. Cada boletín de correo electrónico tiene que tener una opción para que las personas se den de baja. También es bueno para el estado debido a que el receptor está recibiendo el correo electrónico en el primer lugar. Reutiliza el enlace "Abrir en el navegador" desde la parte superior, duplicándolo y colocándolo debajo del fondo del contenido.

¡Felicidades!

¡Eso es! Hemos terminado con el diseño del correo electrónico, ahora revisa las capas, elimina las innecesarias y entrégalo a tu desarrollador, o incluso mejor codifícalo tú mismo. He tocado algunas técnicas básicas y demostrado mi flujo de trabajo para el diseño del correo electrónico, espero que hayas aprendido algo.

¡Me encantaría escuchar tus comentarios y ver los resultados de este tutorial!