Diseño a medida con Zeplin

Se puede crear una página web diseñada desde cero en Adobe Photoshop, y poder transformar ese diseño en un diseño para los CMS de contenido (como WordPress o Joomla) cogiendo ese archivo PSD creado con Adobe Photoshop y le sacaremos toda la información con el programa Zeplin, generando especificaciones precisas, recursos y fragmentos de código personalizados.

Es decir, podemos partir de una creación previamente realizada acorde a nuestras preferencias en Adobe Photoshop, a través de Zeplin extraemos toda la información del diseño, y vamos cogiendo todo lo necesario para ir creando nuestra página PHP. Este mismo programa nos brinda la oportunidad de compartir el proyecto con varias personas a la vez, como por ejemplo desarrollador y diseñador.

Empecemos:
En Adobe Photoshop abrimos la opción ventana, acto seguido se despliega el menú, nos vamos a extensiones y encontraremos Zeplin.

Seguiremos los siguientes pasos:

  1. Le damos a Exportar
  2. Seguimos con Proyecto import
  3. Seleccionamos 1x
  4. Listo para Exportar

Ya está listo, ahora veremos los detalles de nuestro proyecto web.

Debajo veremos un ejemplo del programa, si nos situamos sobre el diseño nos dará información y al empezar a seleccionar zonas concretas nos fijaremos a la izquierda de la pantalla, nos aparecen detalles y fragmentos de código, cuya información será importante colocar en nuestras páginas PHP, dependiendo de la página web habrá que crear más páginas PHP si tenemos más de inicio como ( contacto, servicio, etc.).

Ir a la pagina de Zeplin para su información y descarga aquí.