Diseño y Maquetación de Emails Promocionales en Photoshop
Resumen
Debemos tener en cuenta algunas cosas al momento de diseñar nuestros emails. Nuestro diseño debe tener una resolución de 72pp en modo RGB y con un ancho de 600px. También es recomendable manejar medidas y ubicaciones exactas (sin decimales), es mejor para la programación.
Recuerda seguir la estructura de emails y siempre incluir los 5 elementos principales: header (nuestro logo siempre debe estar ubicado en la parte superior), contenido personalizado (destacado y complementario), imágenes, llamados a la acción y footer.
Recomiendo como alternativa a Photoshop, usar Adobe XD. Es gratis :D
O Figma
Photoshop es de Adobe, en ese caso es mejor usar Ilsutraitor tambien de Adobe, pero igual en Photoshop quedan super impecables sí se sabe diseñar ahí
En la herramienta de photoshop vamos a realizar el diseño
medida en píxeles de
--ancho 600 (recomendado)
--altura 900 (puede variar depende del diseño)
--Modo de color RGB(para web)
Excelente Resumen!
puntes de la clase:
Sería muy bueno que en los cursos usaran software libre y multi plataforma para los proyectos. GIMP e Inkscape sin gratuitos y se pueden usar en Windows, Linux y Mac. También podrían considerar algunas herramientas en línea, yo hago los cursos en Chrome OS y usar software de escritorio no me hes posible, por lo que seguir el curso me resulta imposible.
Usa Photopea es gratis.
Usa Canva en su versión gratuita.
Creo que para estas lecciones es mejor diseñar en Figma directamente.
El código está formado por una sola columna y está basado en porcentajes en vez de píxeles o max-width (anchura máxima).
No se utilizan media queries.
Son fáciles de programar, ya que cuentan con un solo diseño que se verá bien tanto en pantallas de escritorio como en dispositivos móviles.
y luego de hacer el diseño? lo envio por mailchimp
en una de sus plantillas que solo acepta fotos?
Claro, si forma parte de tu estrategia y ya tienes lista tu plantilla escalable pues puedes proceder sin problema alguno :D
Que difícil es aprender algo, con tantas herramientas que se utilizan por ejemplo como aprender esto si nunca he utilizado Photoshop, deberían crear estos cursos comprendiendo que hay herramientas que no todos utilizan.....Hay uno se pierde del aprendizaje y no se le saca provecho.
Usa Photopea (es gratis)la interfaz es la misma solo sigue los pasos de la profesora.
La mejor opción para hacer este tipo de diseños en este momento es Figma, por la cantidad de herramientas y opciones que ofrece.
Pero si se te hace difícil interactuar con una herramienta de diseño de este tipo podrías usar Canva, es mucho más conocida, intuitiva, fácil de usar y también tiene una versión gratuita al igual que Figma
Muy buen ejemplo, hay mucho que aprender
La copia de Photoshop (Photopea y es totalmente gratis)
Photoshop no es la herramienta idónea para diseñar esto ya que es mucho mas complicada sobre todo para los que nunca la han usado y debería ser solo usada para lo que se creo que fue fotografía, se debería usar mejor Illustrator o figma y si es alguien que nunca a usado herramientas de diseño se podría usar Canva y esta ultima es gratis.
dónde consigo los logos del footer? xd
Puedes descargarlos de FlatIcon o Freepik en formato .png
también en iconmoon o font awesome
En que varia el ancho del mail o mejor dicho ¿porqué es mejor 600px de ancho y no 690px como lo he visto en otras referencias?
Hola jkwilches, ya depende del motivo del email que vas a enviar, si va a ser tan solo un mensaje de bienvenida o confirmación las medidas de 600px X 690px son excelentes, pero por el contrario si el motivo de tu mensaje es informativo o ya va ir dividido por bloques y columnas en mi caso tendría que ser a un más gran a lo mejor, un ejemplo: 1080px X 1920px, siempre y cuando respetando el 80% imagen y 20% texto.
Cómo colocas los links dentro del diseño de photoshop? Por ejemplo darse de naja aquí cómo incluyes el hyperlink? También dónde colocas o informas los derechos de autor de la imagen tomada de freepik?
@ctorresca hola! Los links se crean en el HTML y no en photoshop, desde photoshop solo se exportan las imágenes. Para ver como se crean los links puedes ir a la clase Insertando imágenes y creando links
En este caso como es un proyecto del curso y no es un envío real, no se coloca el crédito dentro del email pero si se informa de dónde se está tomando la imagen. Si fuera un envío real, debajo de cada imagen debería ir el crédito.