De PSD a HTML5 – Parte 1, Photoshop

De psd a Html5. En este tutorial te presento la fase inicial de creación de un sitio web, ya con una estructura definida ( proyecto-web-paso-2-estructuracion-de-la-informacion ), y habiendo llegado a un acuerdo con el cliente,  nos proponemos a comenzar el proceso de creación del sitio web.
En este tutorial veremos como comenzar desde 0 el diseño, para esto utilizaremos Photoshop, uno de mis programas preferidos e indicado para hacer esta tarea.

Este será el resultado al final.

resultado final, psd

Vea también

De PSD a HTML5 – Parte 2, el HTML
De PSD a HTML5 – Parte 3, el CSS
De PSD a HTML5 – Parte 4, implementando el Slider

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

9 Respuestas

  1. 2crojas dice:

    por cierto para alojar la caja de comentarios no tendras un tuto??? no se nada de php ni mysql, creo que ando con en un 10%

    • Johanso dice:

      Hola, pues en ese caso lo mejor seria utilizar algun cms Ejemplo: wordpress, te añade todas esas funciones sin hacer esfuerzos y sin saber mucho de php y mysql, tambien lo puedes hacer desde 0, es decir desde photoshop, luego html y luego el cms. pero si el sitio es estatico tambien se puede hacer pero el nivel de conocimiento y exigencia sube.

      • Johanso dice:

        La idea de estos videos el llegar hasta wordpress, totalmente funcional y con caracteristicas avanzadas, y sin necesidad de saber mucho de php y mysql.

        • 2crojas dice:

          mm no pzz lo intentare ya que si me gustaria esa caja de comentarios y mas si wordpress me ayuda con facilidades

          gracias de antemano karnal

          • 2crojas dice:

            creo tu idea es diseñar mi pagina en wordpress o no entiendo!!!

          • Johanso dice:

            Pues no necesariamente, es que si no tienes mucha experiencia en codigo lo mejor es que trabajes con un sistema que te gestiones todo, ejemplo: wordpress. pero si tu web es estatica, es decir HTML, va a ser un poco mas complejo el desarrollo, a no ser que utilizes un widget de esos que ofrecen en internet gratuito o pago, el problemas es que dependes de un tercero

  2. 2crojas dice:

    voy a estar pendiente de la segunda parte que es la que no se como se hace!!! gracias por el tuto hermano!!

    mi sitio lo tengo en construccion pero me gustaria hacerlo mas facil con el photoshop ya que ese es mi fuerte!!

  1. enero 16, 2014

    […] tutoriales y tips de diseño web, en este tutorial vamos a comenzar nuestro proceso de psd a html5, comenzaremos con la creacion del diseño en photoshop.  […]

  2. enero 16, 2014

    […] tutoriales y tips de diseño web, en este tutorial vamos a comenzar nuestro proceso de psd a html5, comenzaremos con la creacion del diseño en photoshop.  […]