Cómo diseñar y recortar los gráficos de los correos electrónicos

1. Bienvenido y acerca de esta clase: Hola. Yo soy Vanessa Tobias-Jones. Soy diseñadora gráfica y profesora de Skillshare, y estás viendo How to Design Emails basados en gráficos. Como diseñador gráfico, hago muchos tipos diferentes de diseño de marketing como volantes y gráficos de redes sociales, pero lo que más hago es un montón de correos electrónicos. Tener un correo electrónico realmente bien diseñado es realmente súper importante porque una cosa es conseguir que la gente abra su correo electrónico con una gran línea de asunto u oferta, pero para realmente conseguir que lean el correo electrónico y luego haga clic a través de sus sitios web, aprovecha esa oferta o para leer más sobre lo que tienes que decir es en realidad mucho más difícil de lo que suena. Entonces en esta clase, me verán tomar una copia escrita por otra persona. Tomaré esa copia y crearé un wireframe en cámara, para que puedas ver mi proceso de pensamiento cuando realmente me estoy preparando para diseñar un correo electrónico. Entonces, tomaremos ese wireframe y lo abriremos en Photoshop, para que en realidad puedas seguir junto con mi proceso de diseño y tal vez aprendas algunos consejos y trucos en Photoshop en el camino. 2. Tu proyecto: redibuja un correo electrónico: Para tu proyecto, me gustaría verte rediseñar un email que recibiste que te vendría bien un poquito algo extra para hacerlo mucho más especial. Me gustaría ver el antes, por lo que una captura de pantalla del correo electrónico que recibiste, y un after the complete product que rediseñaste. Si puedes incluir cosas como alambre-frames, o garabatos, o cualquier cosa que ayude a tu proceso de pensamiento mientras estás diseñando, eso lo haría mucho más mejor. 3. Herramientas y recursos: Para seguir junto con esta clase, necesitarás un lápiz y papel para crear tus marcos de alambre y un programa para crear gráficos por computadora. Estaré usando la versión de Adobe Photoshop Creative Cloud 2019, pero puedes usar cualquier número de programas de diseño disponibles. También verás que uso algunos gráficos de stock al diseñar en este curso. Los gráficos que utilicé se encuentran en Envato Elements, pero hay una serie de otros recursos que puedes usar para encontrar gráficos e ilustraciones libres de regalías o de código abierto. Proporcionaré algunos enlaces útiles en la descripción del proyecto de clase. 4. Revision de la marca y el contenido: Para esta clase, le pedí a un amigo mío que era blogger foodie que escribiera un post corto que podamos usar para diseñar un correo electrónico para esta clase. De esta forma podemos pasar por el proyecto como si estuviéramos diseñando para un cliente que acaba de proporcionarnos copia y pautas de marca. El blog marca “Opiniones Panda” es brillante y muchas veces satírico. Contamos con branding básico proporcionado por el cliente, que usaremos más adelante en esta clase al diseñar el correo electrónico. Lo primero que me salta es que la copia bien escrita para ser humorística es muy pesada de texto, vamos a querer introducir gráficos en todo el correo electrónico para mantener los intereses de los lectores y guiar allí. También querremos incluir un titular en algún lugar del mensaje y ya que en realidad no hay ninguna jerarquía en el texto. Podríamos escribir un titular, quizá quisiéramos incluir el tema de qué se trata el correo electrónico, como las alegrías del cereal para la cena. Esto lo incluiremos más adelante. También podemos querer incluir otro subtitular y este también parece un buen punto para llamar. En el siguiente paso, crearemos un marco de alambre con esta copia. 5. Dibuja tu marco de alambre: Por lo que ahora vamos a sumergirnos en el wireframing real de esto. Estoy usando un lápiz o lápiz iPad Pro y iPad, como sea que se llame para hacer este bocetos para que pueda grabar mi pantalla. Pero siéntete libre de usar Photoshop para wireframing, o Adobe XD, o simplemente papel recto. Yo sí tiendo a wireframe en papel más de lo que hago en la pantalla, pero todos tienen su propio proceso. Entonces lo que sea que funcione para ti. Yo sólo quiero conseguir un pequeño rectángulo yendo, forma del correo electrónico. Me gusta dejar este espacio por aquí vacío en caso de que haya alguna nota que quiera escribirme. Por lo que sí tenemos un logotipo para las opiniones de P&O, el blog que estamos escribiendo este formulario de correo electrónico. Entonces vamos a querer decir que es el logo es un poco P& O. solo quiero decir este logo aquí arriba, no puedo deletrear, Pandopinions. Entiendes la idea. Logotipo. Por lo que la copia para este correo en realidad se presta muy bien para poder diseñar como gráfico divertido para ir con esto. Entonces para este correo en particular, voy a poner un gráfico en la parte superior de la página. Entonces sólo pondremos eso ahí dentro. Para esta gráfica, en la copia aquí, habla de comer el mejor caviar, y quesos, y champaña, y trufas. Pero luego también está la yuxtaposición de comer cereal para el desayuno, y la elección de sólo tener algo poco saludable para la cena por el carajo. También habla de comer cereal de una copa de vino. Por lo que sólo voy a hacer una nota aquí para mí mismo. Gráfico de cereal, tal vez en copa de vino, tal vez tener algo de caviar, queso, etc. Entonces tenemos el inter titular, ya debería ser obvio. Tengo una persona muy elegante. Entonces hagamos de eso un titular grande aquí. Por lo que este será el titular. Simplemente haré una nota a un costado. Ese es el titular. Queremos que eso sea agradable y grande considerando que las otras personas que están suscritas a esto también son personas muy elegantes y se identifican con eso. Entonces tenemos un párrafo de copia, y una frase por sí misma. Por lo que sólo dibujaré estas líneas aquí para indicar párrafo. Puede que termine siendo tres líneas y lo ponemos tal vez para ser dos, más esta frase por sí misma. Después tenemos dos párrafos y luego corta sentencia de cierre. Siento que podríamos tener otro gráfico en algún lugar en medio del correo electrónico, tal vez un pequeño gráfico de puntos de un tazón de cereal. Algo muy brillante ya que hablamos de cajas técnicas llenas de azúcar. Cualquier cosa para conducir a casa ese punto, cereal es uno de los mejores alimentos alrededor. Entonces pongamos aquí un gráfico. Yo sólo voy a dibujar una plaza con estas líneas a través de ella, y luego sólo voy a hacer una nota. Tazón de cereales. Perdón por mi terrible letra, suele ser mejor que esto. Entonces solo agregaremos estos dos párrafos aquí, seguidos de esa línea. Para que en realidad fuéramos como agregar algo al flujo del correo electrónico. Pero luego al final tenemos la sección de charlas reales. Hablar de verdad por un momento. Si solo estás comiendo cereal para la cena por una de las cargas muy no divertidas de la depresión, o de la soledad real, te animo a que busques ayuda. Para esa sección, podemos romper un poco eso. A lo mejor pondremos eso dentro de una caja. Eso es como un color diferente al resto del correo electrónico. Algo así. Podemos hacer de eso una fuente. Entonces tenemos ese pequeño descargo de responsabilidad, y luego podemos tener un botón ahí para aprender más ya que aquí hay un enlace incluido. Entonces siento que esta es una buena base para empezar. También probablemente habrá un pie de página en el correo electrónico, y ese pie de página podría tener algunos iconos de redes sociales que todos querrán, si van a ser pueden cumplir con el spamm, lo cual espero que sean, querrán incluir su enlace de darse de baja e información de contacto. Entonces digamos que ahí hay algunos enlaces. No sé qué son todavía, ya veremos. Así dicen los iconos sociales y pueden spamm. Cosa hay dos m en lata spamm. Debería saber esto. 6. Configura tu archivo de Photoshop: Golpeado por una configuración de tu archivo de Photoshop, quieres ir a Crear Nuevo, y luego ya tengo algunos de los ajustes configurados aquí, pero el ancho promedio para un correo electrónico es 600 píxeles y querrás que la altura sea un poco más del doble de ancho ya que este será un email más largo y prefiero trabajar sin mesas de trabajo, pero si estás trabajando en crear tanto la versión de escritorio como la versión móvil al mismo tiempo, quizá quieras usar mesas de trabajo, pero para este proyecto solo vamos a crear la versión de escritorio. Tu resolución debe ser de 72 píxeles por pulgada ya que estamos diseñando para la pantalla, y querrás asegurarte de que estás trabajando en modo color RGB luego pulsa “Crear” y luego el siguiente paso será configurar tus guías. Dado que se trata de un correo electrónico de 600 píxeles, normalmente querrás unos 30 píxeles de margen alrededor de los lados. Iremos a Ver y crearemos nueva guía. Configuraremos esta primera, guía vertical con una posición de 30, y eso agregará aquí una guía. Otra cosa que puedes hacer es encender tu regla haciendo clic en el comando R o en un control R si estás en un PC para encenderlo o apagarlo, y luego hacer clic hacia abajo en un rodillo y arrastrar para configurar una nueva guía. Pero es un poco más preciso solo configurarlo yendo bajo vista y nueva guía. Prefiero hacerlo de esa manera. Después configuraremos otra guía, horizontal 30 píxeles, y luego para las guías a la derecha e inferior del correo electrónico, para esas tomarán todo el ancho del correo y restarán 30 para la posición. Vamos a ir a nuevo, o ver nueva guía horizontal, los 600 píxeles menos 30 píxeles harán 570. Eso no está bien. Nueva guía, vertical, 570, y luego la altura de este correo electrónico es de 1400 pixels, 1400 pixels menos 30 pixels, configura una nueva guía. Este será horizontal, y haremos 1370 y pondremos bien y ahora, tenemos la guía configurada. Algo más que me gusta hacer antes de empezar a diseñar el correo electrónico real es crear las carpetas con anticipación. Sé que vamos a tener un encabezado para el correo electrónico. Configuraré una nueva carpeta de grupo dentro del archivo PSD llamado cabecera. El gráfico en la parte superior del correo se suele llamar gráfico de héroe. Estableceremos ese grupo y crearemos un nuevo grupo para el contenido corporal, y luego otro grupo para el pie de página. Tener tu archivo para estar un poco más ordenado y más limpio es genial si vas a estar trabajando con otros diseñadores o desarrolladores que puedan estar abriendo y usando este archivo en el futuro, y luego también si vas a trabajar en en el futuro, esa manera tienes un bonito archivo limpio y no estás tratando de averiguar dónde están todas tus capas, cuáles son, y solo asegurarte de que todo tenga un nombre correcto puede ayudar a largo plazo. El siguiente paso en realidad vamos a echar un vistazo a la marca para arriba y conseguir que se diseñe. 7. Configura tu fondo y el encabezado: Empecemos rerevisando la maqueta que creamos antes. Yo sí agregué algunos garabatos más aquí solo para mostrar en qué dirección estamos tratando de ir, y agregué algunos colores. Tan sólo un garabato rápido para recordarme más tarde en qué esquema de color estaba pensando. Tenemos, por supuesto, la hoja de marca proporcionada por el cliente y un ejemplo de portada de Facebook. Aquí es de donde saqué este tono azul o sombra verdosa azulada. Excepto que fui con un tono un poco más silenciado. Agarramos ese color, y vamos a crear otro grupo aquí llamado fondo, y aquí es donde vamos a poner todos nuestros colores de fondo y cualquier cosa que vaya a ir detrás del contenido principal. En lugar de usar el cubo de relleno, lo que voy a hacer es ir al fondo por aquí en el panel de capas. Voy a dar click en Color sólido, y se va a sacar el picker de color, y como ya se ha elegido el color para el primer plano, voy a seguir adelante y golpear “Ok”, y añade esta capa de relleno de color aquí. Si alguna vez quieres cambiarlo, solo tienes que hacer doble clic y puedes cambiar fácilmente el color. Pero voy a dar clic en “Cancelar” ya que vamos a usar este. A continuación vamos a añadir el logotipo al encabezado. Tengo esta carpeta de activos del cliente aquí, así que tenemos este logo largo. Esta es la versión larga del mismo, y vamos a caer eso justo dentro, y voy a reducirlo sólo un poquito, y vamos a alinearnos con el centro del Lienzo y subir eso sólo un poquito. Voy a ponerlo justo en contra de esa línea de margen que creamos antes, y luego voy a añadir un rectángulo blanco detrás de él. Vamos a deshacernos de este borde morado que se agregó. Ahora tenemos un encabezado. Creo que voy a hacer el logo un poco más pequeño. En ocasiones los clientes ya tienen una plantilla de correo electrónico creada esa norma, pero, como estamos creando ésta desde cero, solo vamos a agregar eso ahí dentro. Lo que también voy a hacer es bloquear a este grupo para que no movamos nada accidentalmente ya que estamos agregando más contenido a la página. 8. Diseñar el gráfico de héroe: Vamos a empezar agregando los gráficos de héroe al Email. Entonces la idea que tenía antes era agregar algo de cereal, y algo de copa de vino de caviar, algunas de las cosas que se mencionan en el ejemplar. Entonces fui y descargué algunos de estos gráficos que podrían ser útiles y no pude encontrar un tazón de cereal. Entonces vamos a seguir adelante y usar un tazón de caramelo, que si quieres, funciona bien para estos dos, y vamos a añadir una botella de champán, y esta copa. Entonces solo estoy arrastrando las cosas en un objeto inteligente y este confeti, y eso ha estado arrastrando todo y asegurándome de que estén en el grupo correcto. Entonces sólo vamos a bajar el tamaño de esto. Por lo que tenemos algo de espacio para trabajar. Vamos a asegurarnos de que este confeti capas detrás de todo lo demás. Necesitas eliminar esa capa vacía, y voy a aumentar el tamaño de la misma arrastrando hacia abajo en este punto aquí, hasta que esté ancha como el Email, y solo voy a ocultar todas las demás capas. Por lo que esto es un poco más fácil de trabajar con. Entonces una cosa que me gusta hacer, cuando estoy trabajando en un Email que tiene un fondo de color en el héroe, y en el área de texto es asegurarme de que se mezcla bien, y no es como dos trozos separados. Entonces vamos a hacer es que vamos a ir a la parte inferior del panel de capas aquí, y vamos a dar click en este “Añadir máscara de capa”. Estamos Agregando una máscara de capa hace es que la hace para que puedas enmascarar u ocultar temporalmente diferentes secciones de esa capa mediante el uso de una máscara negra o blanca en la capa, así que si la cepillas con un pincel negro, entonces la va a hacer aparecen que se está borrando, pero luego usar un pincel blanco realmente traerá de vuelta. Entonces lo que voy a hacer es que voy a tratar de hacerlo para que empiece, el gráfico empiece por arriba, este confeti es 100 por ciento de capacidad y eso se va a desvanecer muy bien en la parte inferior. Entonces voy a seguir dando click en “Shift G” hasta llegar al gradiente, y voy a usar un gradiente lineal. Vamos a poner eso en un gradiente lineal negro, y vamos a usar el que es de 100 a 0 por ciento de opacidad. A partir de abajo, y quieres asegurarte de que por aquí en la Máscara de Capa, realidad estás haciendo clic en la máscara y no en la imagen real. Eso está en la capa, y justo desde abajo va a dar clic y arrastrar hacia arriba. Se puede ver que está causando que el confeti se desvanezca muy bien. Entonces ahora empecemos a entrenar en las otras capas una por una, y posicionarlas a donde las queremos, lo consigo con eso. Agrega esto de nuevo aquí. Añadamos la cuchara por el cereal o por el caramelo. Ahora siento que este confeti es un poco demasiado distrayente, pero aún así quiero incluirlo. Entonces podríamos ir por aquí, a la configuración y simplemente jugar con ella hasta que veamos algo que nos gusta, este ajuste de superposición porque aún añade un poco de textura al fondo, y es menos distraído. Entonces pongámoslo en la superposición, y el título de este Email, vamos a seguir adelante y escribirlo aquí son las alegrías del cereal para la cena. Vamos a centrar eso y aumentar el tamaño, y vamos a cambiar el dejar. Voy a cambiarlo a esta fuente de marca aquí, que es el tipo más afortunado. Es la misma fuente que se utiliza en la tipografía del logotipo. Simplemente sigue jugando con eso, para conseguir demasiado un tamaño como, y bastante seguir golpeando alineado al centro. Hagamos el cereal también. Entonces es un vino, y eso se ve bien. Algo que estoy notando aquí con este gráfico de botella de champán, si se acercan, se puede ver que la sombra en la parte inferior de la misma en realidad tiene una línea dura. Entonces lo vamos a hacer es que vamos a tratar de deshacernos de esa línea dura, para que parezca más que en realidad está en una escena con las otras piezas. Entonces vamos a seleccionar la capa de botella de champán, y en la parte inferior del panel de capas vas a golpear en Añadir máscara de capa, y selecciona tu herramienta Pincel y simplemente redimensionarlo al tamaño que necesites, y luego estamos usando un primer plano negro color. Sólo vamos a cepillarnos ligeramente en la parte inferior, donde está esa línea dura, y el pincel que estoy usando es un cepillo redondo suave regular, por lo que tiene un poco de un borde más suave al mismo, no estamos usando el duro pincel. Ahora hemos enmascarado ese borde duro en la parte inferior de ese gráfico. Ahora vamos a añadir el texto en el cuerpo del Correo Electrónico. 9. Agrega la copia del cuerpo: Empecemos a añadir en el texto a este correo electrónico, la copia del cuerpo. Una cosa a tener en cuenta cuando estás diseñando correos electrónicos es que tienes dos opciones. Tienes la opción de hacer tu correo electrónico al 100 por ciento en imagen, lo cual es bastante común en estos días. Entonces cuando se desarrolle y arme para enviar realmente, solo asegurándose de que todos los textos estén disponibles dentro de la etiqueta de texto alt en el HTML del correo electrónico. Algo más que quizás quieras considerar es que los gráficos de correo electrónico son imágenes, y el texto es texto real que podría ser recogido por un lector de pantalla, y de esa manera es más accesible para las personas que tal vez no puedan ver su pantallas o puede no poder leerlo y sólo verlo o sólo escucharlo a través de un lector de pantalla. El modo en que hoy estamos diseñando este correo electrónico es que lo estamos diseñando teniendo en cuenta la accesibilidad. El texto tal vez muy llano, no va a ser super, gráfico con efectos ni nada. Pero eso es intencional. Voy a poner algunos enlaces sobre accesibilidad en correo electrónico en la descripción de esta clase. Por lo que podrás encontrar esos enlaces a continuación. Vamos a sumergirnos. Tengo el texto aquí en mi otra pantalla, así que voy a estar copiando y pegando eso. Entonces pongamos esto en Open Sans. No queremos que todo el cuerpo del correo esté en Luckiest Guy que en realidad sería un poco difícil de leer. Estamos usando Open Sans porque aparece aquí en la hoja de marca como un tipo de letra que se empareja bien con Luckiest Guy. Vamos a crear un cuadro de texto aquí. En este cuadro de texto, vamos a bajar un poco este tamaño y alinear a la izquierda, y sólo vamos a agarrar este titular aquí y dejarlo caer en ese cuadro de texto. Este tamaño de fuente es un poco más grande que lo que realmente vamos a usar. Vamos a redondear eso hasta 16 para todo el cuadro de texto, obtenemos un buen número redondo. Lo que voy a hacer es ir a la opción, dar clic y arrastrar hacia abajo. Lo que hace es duplicar la capa que se seleccionó con la herramienta Mover, y solo la estoy arrastrando abajo, y vamos a seleccionar esto. En la configuración de personajes, sólo vamos a apagar este botón todo mayúsculas, y este Fo bold que estaba encendido. Esto en realidad es bastante útil aquí si quieres hacer rápidamente algo audaz o hacerlo todo gorras o tal vez usar gorras pequeñas. Pero vamos a apagar todos esos para la copia corporal real. Voy a copiar alrededor de la mitad del texto, y voy a soltar eso aquí y ampliar la altura del cuadro de texto. Por lo que el dejar de esto en realidad todavía se guarda de este texto en la parte superior en los gráficos de héroe. Entonces vamos a seleccionar eso. El tamaño del texto es de unos 16 puntos. Hagamos esto unos 20 puntos, entramos, y ahí vamos. Ahora, ya que queremos que esta frase destaque, sólo vamos a cursiva eso. Todavía vamos a ahorrar algo de espacio para un pequeño gráfico spot aquí, si realmente usamos un tazón de cereal o algo más, eso se determinará, pero vamos a crear otro cuadro de texto. Yo sólo voy a la opción, arrastrar hacia abajo, hacer clic y arrastrar, y voy a sacarlo un poco aquí, así que es más largo, y tomemos este texto y lo peguemos. En realidad voy a poner esto en un cuadro de texto separado, así que en realidad, déjame volver a poner eso, déjame explicar algo aquí muy rápido. Esta columna de aquí es realmente pesada de texto, así que agreguemos un salto de línea en algún lugar justo aquí parece adecuado. Entonces vamos a tomar este texto y sólo hacer un corte para sacarlo de ahí. Vamos a la opción, haga clic en arrastrar, cree un nuevo cuadro de texto, y luego pegue ese texto allí, y arrástrelo a todo ancho, y simplemente baje eso, y levante esto. Entonces quieres echar un vistazo a esto y asegurarte de que la cantidad de espacio entre todos los párrafos sea aproximadamente la misma. Por lo que sólo sacaremos esto un poco. Eso se ve bien. 10. Cómo añadir un lado: Vamos a agregar la sección de charla real del correo electrónico que está en este cuadro amarillo aquí y luego vamos a, después de eso, añadir un pie de página a este correo electrónico. Mirando hacia atrás a esto, mi estimación de 1,400 píxeles parecía un poco corta. Vamos a necesitar un poco más de espacio en la parte inferior de este e-mail para agregar esa sección de charla real y el pie de página. Entonces lo que vamos a hacer es, bajo Imagen, vamos a ir al tamaño de Canvas y vamos a tomar esta altura y vamos a hacerlo de 1,600 píxeles. Pero lo vamos a expandir solo en la parte inferior y para hacer eso, vamos a tomar este ancla aquí, y vamos a hacer clic en la parte superior para que se esté expandiendo sólo hacia abajo y hacia la izquierda y hacia la derecha. Esto es realmente útil si quieres hacer algunos cambios exactos en el tamaño del lienzo, así que vamos a seleccionar el punto de anclaje medio superior y golpear “Ok” Lo que hizo es, agregó unos 200 píxeles adicionales en la parte inferior y luego solo vamos a toma esto y arrástralo hacia abajo a , vamos a ver, 1,600 píxeles menos 30 píxeles para el margen serán 1,570. Como puedes ver, es un poco difícil conseguirlo exactamente, pero 1570.6 me parece bueno. Ahora vamos a añadir la sección de charlas reales. Volvamos a la maqueta de correo electrónico y asegurémonos de que tenemos ese amarillo seleccionado usando la herramienta cuentagotas. En realidad, vamos a crear un nuevo grupo de capas en la pestaña Capas. Entonces solo estoy haciendo clic en grupo aquí, así que es agregando un grupo, ese pequeño icono de carpeta. Llamemos a esta charla real para contener eso y mantenerlo separado del otro contenido corporal y solo estoy arrastrando eso carpeta del cuerpo, en el grupo corporal de ahí. Tomemos esta herramienta de rectángulo, que también puedes llegar usando U como el atajo y vamos a cambiar el color de relleno a ese amarillo, que está bajo colores usados recientemente. Vamos a deshacernos de ese golpe que actualmente está en él. Vamos a hacer clic y arrastrar de guía a guía y probablemente usaremos, sobre, tanto espacio. Sé mi conjetura, puede que terminemos necesitando agregar un poco más de altura a este e-mail. Volvamos a las capas y usando la herramienta de movimiento. También tengo auto select on, a veces es útil, a veces no lo es, dependiendo de cuántas capas tengas pasando. Pero así es como soy capaz de hacer click en un párrafo. Si no tienes activada la selección automática, en realidad tendrías que ir aquí y dar click en tu capa. Pero de todos modos, me digrego. Simplemente hagamos clic en una de estas capas, Option click, arrástrala hacia abajo, arrástrala sobre esa caja amarilla, y solo arrastremos esa capa copiada a esa carpeta de grupo de conversación real. Vamos a tomar el texto de esta sección y vamos a tomar este enlace y ponerlo al final del párrafo, ya que en realidad eso es para que el desarrollador agregue después. Vamos a seleccionar esto, copiarlo y pegar. Creo que podemos agregar un salto de línea aquí en alguna parte, romper un poco el texto. También necesitamos agregar en el encabezado para esto, creo que podemos usar la tipografía de tipo más afortunado que se usa en el héroe. Por lo que hice clic en T para cambiar a la herramienta de texto y estamos agregando en charla real como el texto. Estoy haciendo Comando A para resaltarlo todo, pinchando aquí arriba, cambiando la tipografía a tipo más afortunado y luego estamos aumentando el tamaño de la fuente. A mí me gusta cómo está colgando de la caja y podrías ponerla dentro, pero siento que tenerla ligeramente fuera de la caja agrega un poco más de profundidad al e-mail, un poco más de movimiento a ella, supongo que se podría decir. Entonces solo estoy empujando un poco ese cuadro de texto, porque estaba un poco lejos donde estaba, había un poco demasiado relleno entre los dos elementos. Entonces estamos arrastrando eso hacia arriba y vamos a asegurarnos de que tenemos esta capa dentro de ese grupo. Añadamos un botón ya que la copia sí incluye una llamada a la acción, que es este enlace aquí. Vamos a querer que la gente pueda dar click en ese enlace. Creo que el color para el botón en realidad debería ser este verde que se usa aquí arriba en el logo. Porque el verde es en realidad un color realmente genial para los botones. Siempre puedes hacer pruebas A/B en tu extremo para ver qué funciona para tu lista de usuarios o tus destinatarios pero los greens o blues suelen invitar a las personas a hacer clic. Podemos agarrar este color de la hoja de marca o del logotipo, así que estoy cambiando a la herramienta cuentagotas, seleccionando ese verde, volviendo al proyecto de correo electrónico y vamos a agregar un rectángulo aquí y luego solo vamos a arrastrar eso hacia arriba aquí. Si estás cansado de arrastrar, realidad podrías hacer Command, y luego está el corchete de cierre y el corchete abierto. El soporte abierto lo empuja más abajo en la lista de capas y el corchete de cierre lo empuja más arriba, por lo que vamos a empujarlo por encima de la caja amarilla de ahí. Entonces tomemos un texto y luego no usemos el tipo más afortunado, cambiemos eso de nuevo a Open Sans. En realidad usemos Open Sans Bold. Cambia esa fuente a blanco y pongamos eso de nuevo a 16 píxeles y cambiemos ese texto a, no lorem ipsum, pero podríamos decir hablar con alguien. Entonces lo que hago es simplemente cambiar el tamaño de ese cuadro de texto y seleccionar el rectángulo. Esto es lo que voy a hacer ahora, voy a tomar el rectángulo verde, y la charla con alguien texto, voy a hacer clic en Comando G para crear un grupo separado. Voy a volver a cambiar ese nombre de grupo a CTA, que es llamada a la acción, es un botón de llamada a la acción. Entonces este texto aquí, me voy a alinear con la selección y vamos a centrar, T para nuestra herramienta de tipo, y vamos a centrar alinear eso o centro justificar más bien. Solo estoy acercando para poder ver en qué estoy dando clic aquí y solo ser un poco más quisquilloso, solo estoy cerrando eso un poco y seleccionando tanto el rectángulo como el texto. Voy a alinear eso verticalmente y simplemente empujarlo un poco más hacia abajo. Si quieres reutilizar botones, en realidad podrías, seleccionar este grupo y luego, no tengo mi panel de biblioteca abierto. Pero debajo de Ventana, ve a Bibliotecas, y realmente tienes la opción de crear un activo reutilizable en tu biblioteca haciendo clic en este pequeño botón más aquí, y haciendo clic en gráfico. Entonces si quieres usar esto en un momento posterior, en realidad lo agrega aquí como pieza reutilizable. Lo cual en realidad puede ser realmente útil cuando estás diseñando múltiples correos electrónicos para la misma empresa o cliente de esa manera estás ahorrando tiempo solo haciendo clic en esta herramienta de biblioteca y simplemente arrastrándola ahí, no tienes que pasar por todos los pasos que acabas de ver. Ahora vamos a pasar al pie de página. 11. Agrega el pie de pie: Conforme volvió a suceder, me quedé sin espacio en la parte inferior del correo electrónico. Antes de ir a Image and Canvas Size y ajustamos el tamaño manualmente ahí, pero lo que vamos a hacer ahora es sólo vamos a, este es un pequeño truco que recogí en el camino, pero haces click en C para cultivo, así que que trae a la altura la herramienta de cultivo. Entonces solo tienes que hacer clic en esta manija central aquí. Haga clic y arrástrelo hacia abajo hasta que vea cuánto espacio necesita, y luego presione Enter. Eso en realidad va a agregar un poco de espacio extra al final. Esa es otra razón por la que usar relleno de color en realidad es muy útil a diferencia de usar la herramienta de cubo para rellenar el fondo porque cuando estás expandiendo el tamaño del lienzo, tu color falla está llenando todo el lienzo de tu proyecto. A diferencia de usar la herramienta de cucharón, en realidad tendrías que recargar eso manualmente. Entonces, solo arrastremos este margen hasta 1770 justo aquí. Enfriar, así que vamos a añadir el pie de página. Los pies de página suelen ser un color muy modesto. No son el foco principal del correo electrónico. Están solo ahí para proporcionar contexto a donde la persona se inscribió para su correo electrónico, y para proporcionarle información de contacto, cómo darse de baja de su correo electrónico. Entonces también, a veces algunos enlaces de navegación a tu sitio web o a tus redes sociales. En realidad usemos un gris suave. Algo así. E6, E6, E6. Vamos a agarrar esta herramienta de rectángulo. Sólo arrastremos un rectángulo aquí, y volvamos a capas. Vamos a arrastrar ese rectángulo a la capa de pie de página. Parece que en realidad sobreestimé la cantidad de espacio que necesitaba para el pie de página, pero nos preocuparemos de eso después. Empecemos a agregar contenido a esto. Dentro de esta carpeta aquí, tengo algunos iconos sociales que preseleccioné en base a las redes sociales que está disponible para este cliente. Solo estamos seleccionando todo eso y arrastrando y pulsando Enter para añadirlos al lienzo, y asegurándonos de que esos estén en el pie de página. Vamos a agregarlas al centro. En ocasiones se quiere ahorrar espacio, por lo que podría tener iconos de redes sociales a un lado, enlaces a la izquierda o a la derecha, pero hagámoslo como la maqueta que hicimos antes, y simplemente tenerlos centrados. Voy a seleccionar una de las capas y voy a desplazar y hacer clic y arrastrar y ahora sólo vamos a arrastrarla hacia fuera en una bonita línea recta. Veo lo que está pasando. Tenía dos seleccionados. Ahora tenemos los tres de estos, y lo que vamos a hacer es arriba en los controles de transformación aquí arriba o en los ajustes para la herramienta de movimiento. Vamos a estar seguros de que estamos configurados para Alinear a la selección. Vamos a alinear centros verticales. Esto asegura que todos estén en la misma línea. Entonces para asegurarnos de que tenemos la misma cantidad de espacio entre todos ellos, vamos a usar esto aquí para distribuirlo horizontalmente. Eso simplemente empuja esto para que haya la misma cantidad de espacio entre los tres artículos. En realidad voy a seleccionar estas tres capas y hacer clic en Comando G para ponerlas en su propio grupo. Sólo voy a renombrar ese Iconos Sociales sólo para mantener las cosas bonitas y ordenadas. Ahora lo que quiero hacer es, quiero asegurarme de que el grupo en sí esté centrado en el Canvas. Volviendo a la configuración de línea, Alinear a lienzo. Al tener seleccionado este grupo, puedes mover todo el grupo donde lo desees. Me estoy alineando con el centro horizontal. Ahora ese grupo está centrado en la página. También podríamos agregar a continuación este los enlaces para darse de baja y los enlaces de contacto. Vamos a crear un cuadro de texto aquí, ¿por qué no se muestra mi texto? El texto no se muestra porque es del mismo color que el fondo, tonta yo. Cambiemos eso. Darse de baja. Entonces yo para separar los textos con un poco de pipa ahí, diga Contáctame. Entonces vamos a tomar esto y centrarlo. Ese texto parece un poco grande para un pie de página. El texto de la copia del cuerpo es de 16 píxeles. Tomemos esto y bajemos esto a alrededor de 12, vamos a bajarlo a 12. Enfriar. En realidad tomemos este rectángulo, hazlo un poco más pequeño. No me gusta cómo hay más espacio en la parte inferior aquí que en la parte superior, así que sólo podemos tomar los iconos sociales y empujar hacia abajo un poco más cerca de los enlaces. Algo más, en realidad, algo más que podríamos querer agregar aquí. Duplicemos este texto. Vamos a actualizar esto para hacerles saber de dónde se suscriben a los correos electrónicos. Es posible que quieras decir algo así como, “Estás recibiendo este correo electrónico porque te registraste en nuestra página web”. Sé que eso está fuera de pantalla, déjame arrastrar esto hacia abajo. No me gusta cómo se rompe este texto aquí, así que vamos a entrar después de “porque” y “tú” y agreguemos un salto de línea ahí. Voy a Seleccionar todo y luego vamos a ajustar la configuración del personaje y vamos a cambiar el liderato a 14 y vamos a deshacernos de este audaz y cambiarlo a irregular. Enfriar. Otra cosa también es esto en realidad serán textos que se agregarían como texto real, pero el desarrollador de correo electrónico estaría mirando a tu PSD para obtener orientación sobre qué colores, qué estilos de fuente y opciones de cara de tipo a tomar. Nos gustaría asegurarnos de que estos enlaces se vean como enlaces. Podríamos resaltar este texto aquí, y cambiémoslo a verde. Podemos decir que los enlaces serán verdes. Estamos seleccionando sólo los enlaces y usando el seleccionador de color para agarrar ese color verde. Los enlaces suelen tener un subrayado al mismo. Vamos a seguir adelante y añadir que Subraya de nuevo, sólo los enlaces, no lo vamos a agregar a este separador en el medio aquí. Ahora tienes algunos enlaces. Ahora vamos a acortar de nuevo este correo electrónico, y sólo vamos a recortar eso, y ahí vamos. Alejemos el zoom y echemos otro vistazo a esto. Vamos a añadir este spot gráfico en, en un segundo. Pero tomemos toda esta sección de “Real Talk” y bajarla un poquito. Vamos a seleccionar a ese grupo. Lo que hago es seleccionar el grupo y hago clic en Shift y la flecha abajo, y eso simplemente lo baja por completo, lugar de empujar un píxel a la vez. Lo estás metiendo abajo en trozos más grandes. Recuerda siempre golpear Guardar. Ahora pasemos a añadir un gráfico spot. 12. Agrega el gráfico puntual: Ahora vamos a añadir un gráfico spot a este correo electrónico. Generalmente se utiliza un gráfico spot o una ilustración de spot para acompañar textos, pero no es tan grande como la característica o el gráfico de héroe del correo electrónico. Normalmente se ven ilustraciones puntuales en cosas como artículos de revistas o periódicos o incluso en algunos blogs. Vamos a añadir un gráfico a esta área aquí sólo para romper un poco la copia del cuerpo. En el grupo de cuerpos, vamos a crear otro subgrupo. Vamos a llamar a este spot, sólo para mantener las cosas bonitas y organizadas. En la maqueta de correo electrónico, originalmente había dicho que vamos a agregar un tazón de cereal. Veamos qué podemos hacer aquí, con algunos de los gráficos adicionales que elegí para este diseño de correo electrónico. Vamos a añadir tal vez esta caja de cereales. Es vertical ya que va a encajar mejor en este espacio, ya que esta caja de cereal es un poco más ancha de lo que es alta, creo que ésta va a funcionar mejor. También querremos agregar este tazón de cereal vacío. Queremos asegurarnos de que esos estén dentro del grupo spot. Solo vamos a reducir un poco estos. Vamos a querer que el tazón de cereal sea más pequeño que la caja. Es un poco más fiel a la vida cómo los tazones de cereales no son más grandes que las cajas de cereales. De acuerdo, así que eso se ve bien. Algo más que podríamos hacer, esta caja de cereales es un poco llana. Realmente no tiene un diseño para ello. Podríamos tomarnos el tiempo para realmente agregar una envoltura de algún tipo a esto, pero algo que podríamos hacer rápidamente para agregar un poco de color a esto, es, podríamos entrar en el panel Capas y agregar un color sólido. Añadamos un verde que sea similar al logo verde. Se desea colocar el cursor del ratón en algún lugar entre el relleno de color y la capa de caja de cereal. Cuando pulsas la tecla de opción, puedes ver que cambia a una máscara de capa. Entonces solo quieres hacer clic en eso y solo enmascara el relleno de color alrededor de la caja de cereales. Eso sólo está cubriendo la caja de cereales. Entonces, sólo vamos a querer jugar alrededor de la opacidad. Por lo que tienes un poco de color a la caja de cereal y lo podemos ver justo detrás de esa capa de relleno de color previamente completamente sólida. Piensa que podríamos agregar algo un poco más a esta área para que no parezca que solo dejamos caer algunos gráficos aquí, que es realmente lo que acabamos de decir. También tenemos un fresco resplandor de sol que pensé que probablemente podríamos agregar atrás. Simplemente dejamos eso en el lienzo y coloquemos eso detrás de la caja de cereales. Porque lo coloqué detrás de la caja de cereal y la máscara para la capa colorida se apagó, pero volvamos a enmascarar eso. Entonces solo vamos a dimensionar un poco esta capa hacia abajo y colocarla detrás de la caja de cereales. Podemos simplemente jugar un poco con estos ajustes. Esa superposición, por lo que no es demasiado distraído, sino que agrega un poco de algo que pasa detrás de ella. Otra cosa que podrías ver incluida en los gráficos puntuales es a veces una cotización o una cotización en bloque. Creo que podríamos agregar un poco algo más a esta sección aquí. A lo mejor vamos a añadir la palabra, cereal y hagamos que ese texto sea la misma fuente de marca. Bump el tamaño hacia arriba en eso un poco. Añadamos un ajuste de texto a esto o texto warp. Sólo para darle un poco más de dimensión a ella. Es demasiado. Ahí vamos. Tenemos una ilustración spot. 13. Cómo entregar los gráficos: recortar el correo electrónico: Ahora vamos a rebanar este correo electrónico. Una de las razones por las que querrías cortar un correo electrónico es, si estás creando un correo electrónico o el correo electrónico se está desarrollando en HTML después para la accesibilidad, entonces querrás que estos gráficos se corten en trozos separados para que que puedan colocarse en ese correo electrónico. Una forma de hacerlo es simplemente podrías recortar y guardar, y luego volver a tu historia y deshacer, y luego recortar, y volver a guardar repetidamente. Pero vamos a usar lo que se llama la herramienta Slice en su lugar. Entonces vamos a ir a View, y vamos a despejar esas guías que agregamos antes. Lo que vamos a hacer es que vamos a añadir nuevas guías en. Primero vamos a cortar estos trozos más grandes. Hagamos clic en la regla y arrástrela hacia abajo y arrástrela derecha sobre dónde se encuentran aquí y el encabezado. Estas se guardarán como dos imágenes separadas, por lo que ahora tienes dos rebanadas, y luego vamos a hacer clic y arrastrar hacia abajo otra guía. Desea asegurarse de que está colocando la guía en un área de color sólido. No quieres colocar a la guía en algún lugar como aquí mismo porque ahí está la sombra de debajo del tazón de cereal que se vería muy picada cuando se cortó y se desarrolló. Pero querrás colocarlo en algún lugar como esta zona sólida aquí. Esto será, una imagen, dos imágenes, tres imágenes cuando se guarde. Entonces vamos a bajar, y vamos a rebanar por aquí porque vamos a cortar esta sección de Real Talk o simplemente este subtitular aquí. El motivo por el que estamos cortando eso, en lugar de dejar que el Desarrollador de Correo Electrónico lo desarrolle por su cuenta, es que es una cara tipo defacer. No queremos agregar más golpe a la copia agregando CSS adicional que en realidad podría ser despojado en ciertos clientes de correo electrónico y queremos realmente mantener ese aspecto y tacto de marca, y también asegurarnos de que se vea igual en todos plataformas. Vamos a boxear la sección Real Talk, y vamos a ahorrar. No. No vamos a Guardar para Web. En realidad vamos a rebanar esto. Ponemos las guías dentro, pero aún no lo hemos cortado. Vamos a golpear “C” o puede que tengas que golpear “Shift C” porque C también se usa para sacar la herramienta Recortar, y también se usa para la herramienta Perspectiva. Pero lo vamos a cambiar a la herramienta Slice, que trae este poco exacto, no conozco una cosa [inaudible] para cortar, y vamos a hacer Slices From Guides, que es este botón de aquí arriba. Haga clic en eso, y crea estos espacios separados. Para que veas que va a crear cinco imágenes separadas que se van a utilizar. Ahora vamos a Guardar para Web. Guardar para Web es uno de esos atajos extraños de Photoshop, que hay que presionar muchas teclas para ello. Pero es Shift Command Option S, y tira hacia arriba el diálogo Guardar para Web. Se puede ver aquí, en realidad va a guardar todo como las cinco imágenes separadas. Pero hay un pequeño truco que me gustaría mostrarte ahora mismo. Si vas a tener un e-mail que tenga un GIF en él, por ejemplo, y no quieres que todo tu correo electrónico sea de 10 megabytes o algo así, realidad podrías simplemente agregar guías por el área que se va a animar. Cortar alrededor de esa animación, y guardar sólo esa porción como GIF, y no tener que preocuparse por guardar el resto como GIF. El resto de la misma podría ser una imagen estática sólida. Eso harás seleccionando la rebanada en la que quieres cambiar la configuración y en este pequeño desplegable aquí, darías clic en GIF, y se guardaría justo esa sección como GIF. Todas las demás secciones se quedan cualquiera que sea el ajuste que fue en el que te lo pusiste. Pero como no estamos guardando esto como GIF, sólo pongámoslo de nuevo a lo que estaba, y vamos a darle a “Guardar”. En esta carpeta de archivos de proyecto aquí, vamos a golpear “Guardar”. Se va a llevar un segundo, y volvemos a la carpeta, para los archivos del proyecto. Se puede ver aquí hay una nueva carpeta llamada imágenes. Tomó las imágenes rebanadas y las guardó como rebanadas separadas. Esto se ve muy bien, esto se ve muy bien. Podríamos entregar eso al desarrollador. Esta sección es genial, pero sí queremos rebanar este un poco más allá. Siempre podrías simplemente recortar esto o podríamos volver a entrar y agregar una rebanada adicional. Sólo vamos a hacer clic y arrastrar, y en realidad vamos a acercar un poco aquí, para que podamos ver dónde estamos cortando. Vamos a cortar justo aquí, así que esto va a ser dos columnas separadas, y luego vamos a cortar justo aquí. que esta sería una columna aquí arriba que se va a codificar, y luego estas van a ser dos columnas aquí, y vamos a cortar justo debajo donde cambia de dos columnas a un diseño de una sola columna. Solo estamos cortando justo ahí, queremos asegurarnos de que no estamos cortando el texto de todos modos. Pero ahora cuando estamos viendo esto, este estallido de fondo es en realidad un poco demasiado grande. Va pasando donde lo necesitamos. Entonces vamos a reducirlo un poco, y presionar “Ok”, o pulsar el botón Entrar o la tecla Retorno, y ahora estamos listos para irnos. Vamos a golpear de nuevo a “C” para sacar esa herramienta Slice. Haga clic en “Rebanadas De Guías”, y ahora vuelve a cortar el correo electrónico, y vamos a volver a golpear “Guardar para Web”, y vamos a golpear “Guardar”, y yo sólo voy a volver a hacer esto, y tenemos imágenes adicionales. 14. Cómo entregar los gráficos: revisa los cortes de la: Entonces ahora podemos ver cómo cuando guardamos las rebanadas, agregó un montón de imágenes extra que no necesitábamos porque agregamos todas estas rebanadas extra y esa es una de las razones por las que me gusta guardarlas en dos pasos, donde estás guardando el más grande imágenes como esta, y luego cortar imágenes más pequeñas que no ocuparán todo el ancho del correo electrónico. Por lo que sólo podemos pasar y eliminar todas las cosas que no necesitamos. No necesitamos esta pieza. necesitamos esta pieza, así que para eso estamos cortando, así que estas son las imágenes que se entregarían al desarrollador de correo electrónico. Ups, no esa, y todo lo demás estaría codificado en. También entregarás estas imágenes que están en el pie de página, esos iconos, así que cambiemos la carpeta de imágenes a entregables. Entregables, y tomaremos de activos, iconos sociales sólo vamos a copiar esos en los entregables ya que van a necesitar esos dos. 15. Algunas notas de cierre: Enhorabuena, lo hiciste todo el camino hasta el final de la clase. Si tienes algún interés en aprender el lado del desarrollo del e-mail ishamelessplug tener una clase aquí mismo sobre el intercambio de habilidades llamada introducción al HTML, desarrollo de correo electrónico, donde puedes aprender todas las cosas de codificación divertidas que van detrás de bastidores de correos electrónicos que recibiste. Así, el medio, mágico [inaudible] tienes algún recurso o tips que te guste compartir, siéntete libre de irte, no tiene área de discusión también y voy a sumar a la lista de recursos para esta clase para futuros eventos. Gracias por tomar esta clase y espero verte por Skillshare.