Diseño de mail marketing usando photoshop

Este es un mini tutorial que si requiere un conocimiento basico de HTML y lo relacionado con el software requerido para la distribucion masiva de correos y emial marketing.

Basicamente se trataran los siguientes puntos:

  1. Crear un correo de mail marketing en photoshop
  2. Usaremos TABLAS en lugar de DIV
  3. Ver como se agrega el URL y una etiqueta identificadora para saber de donde provino el clic

Crear boletin mail marketing en photoshop

Pues una vez que ya tienes lista la parte grafica y de comunicacion del boletin te encuentras listo para hacer los SLICES o cortes que pueden llevar un link cada uno hacia diferentes partes de una pagina web. Los cortes se hacen con la herramienta SLICE o el shortcut K. Esta herramienta te permite definir las areas que quieres recortar y que el photoshop convertira a HTML.

El truco es muy sencillo, una vez que estes listo para exportar simplemente hay que selecionar la opcion TABLAS en lugar de DIV CSS en el photoshop.

El paso final es reemplazar las direccion relativas de la imagen por unas absolutas, es decir:

RELATIVA (que no contiene la direccion completa de donde se encuentra)

<img  src="images/01_header.jpg" 
width="734" height="424" border="0" alt="" />

ABSOLUTA (contiene la direccion completa de donde se encuentra)
<img  src="http://www.tusitioweb.com/images/01_header.jpg"
width="734" height="424" border="0" alt="" />
tutorial basico de mail marketing en photoshop

Haz clic para ver la imagen mas grande

.

Acerca de Emmanuel Vargas @sdgestudio

Graphic Designer currently working with user interface for web applications using dojo toolkit, jQuery in a java environment. Photographer interested in portrait, experimental and photo-journalism for social events. www.sdgestudio.com you can find me in G+

Un Comentario

  1. Pingback: Articulo Indexado en la Blogosfera de Sysmaya

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: