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
.
Anuncios

Diferencias entre browsers al mostrar textos y CSS

Es obvio para un diseñador web que habra diferencias al mostrar una misma pagina en diferentes navegadores. Sin embargo hay veces que es dificil enseñarle eso a un cliente y es una buena practica mostrar de manera visual las diferencias. A continuacion pongo una imagen done se muestra como el texto tiene minimas pero notables diferencias que estan marcadas con un circulo rojo y marcadas con un cuadrado rojo se muestra como hay minimas pero notables diferencias en la altura de renglones.

Los navegadores en cuestion son: Firefox, Google Chrome, Opera y Safari.

html y css varia segun el browser
html y css varia segun el browser
.

Conversion de PSD a HTML a partir 159 dolares por pagina


He aqui un link para quien ya tiene su diseño en Photoshop pero no sabe como pasarla a HTML valido y agregarle algunas funicones en Javascript, PHP, etc… es un ejemplo de como en paises anglosajones se hacen buenas cosas y que en Mexico debemos de ver los precios de lo que cuesta realmente un trabajo como este. Las empresas de Jalisco y el resto del mundo deberian apreciar el trabajo de los diseñadores mexicanos que es muy bueno y que por el momento es mas accesible que este sitio que les muestro: https://www.psd2html.com/order-now.html