Pasar de PSD a HTML ¿Porqué es tan importante, hoy en día?

Pasar correctamente de un diseño en PSD a HTML  es sin duda, el paso más importante en la maquetación web, y además es un negocio muy lucrativo.
Pero….porqué es tan importante ?

La primer razón es que hoy en dia, con el avance de los dispositivos digitales fijos y móviles como teléfonos smartphones, iPads, computadoras de mano (pocket pc) y otros, se ha hecho imprescindible para cualquier persona dedicada al diseño web, saber pasar de un psd a html de forma 100% compatible con todos estos dispositivos y sus correspondientes navegadores (browsers).

Y la segunda razón, es la indexación en buscadores como Google.
Hace 5 ó 6 años atrás, el auge de las animaciones web con Flash, hizo que quedara atrás el concepto fundamental con el que fue creado internet: el codigo HTML.
En aquel momento, todos nos preocupabamos por hacer animaciones impactantes, pero el código html dejaba bastante que desear.

Hoy en día, donde un sitio web que esté mal indexado en los buscadores, se trasmite en pérdida de visitantes y/o de dinero, justamente hoy en día, es cuando el la maquetacion web y el codigo html han vuelto con más fuerza que nunca.

Como la mayoría de los diseños profesionales se realizan en Photoshop, es de suma importancia saber convertir un PSD a HTML de forma rápida, profesional, y 100% compatible con todos los navegadores.

La conversión de un psd a html es un arte que quizás a primera vista parece complicado, pero conociendo los conceptos basicos de HTML y XHTML, es sumamente fácil hacerlo y muy gratificante, sin decir que también está muy bien pago.

En los artículos que siguen, iré develenado paso a paso, los secretos de esta actividad para que tú también puedas hacerlo de forma profesional y para siempre.

Me gustaría que me dejaras un comentario sobre este artículo que acabas de leer y también que me contaras un poco cual es tu principal complicación, a la hora de tratar de pasar un psd a html.
YO personalmente estaré contestando tus preguntas y comentarios.

Gracias.
Cristian

Anuncios

19 pensamientos en “Pasar de PSD a HTML ¿Porqué es tan importante, hoy en día?

  1. hkadejo

    Andaba buscando un recurso aceptable de como aprender pasar un psd a html y me topo con este blog, una hojeado le he dado pero definitivamente me voy a leer todos los articulos. Felicidades y no dejes de escribir.

    Responder
    1. Psd a Html Autor de la entrada

      Gracias. Seguiré posteando recursos de maquetado web y conversion de psd a html.
      Espero nos sigas y me consultes tus dudas tambien.
      Saludos!

      Responder
  2. Jesus

    Encontré tu web buscando formas para aprender a maquetar y me agrado mucho yo solo se diseñar pero me falta saber la parte del codigo. Te felicito por tu web y mas por tu disponibilidad saludos!

    Responder
    1. Psd a Html Autor de la entrada

      Muchas gracias Jesus.
      Justamente mi intencion es explicar todo lo referente a codigo para un correcta maquetacion web, o una correcta conversion de Psd a Html.

      Cuentame si tienes alguna duda puntual, y veo de incluir un articulo sobre ello.

      Saludos!
      Cristian

      Responder
  3. Roger Francisco

    Hola, gracias a Dios me tope con esta página, siempre he querido aprender ha programar los diseños web, y es página es excelente todo muy bien explicado, de verdad muchas gracias gracias por compartir esto con nosotros.
    Solo como sugerencia seria interesante si pudieras hacer un tutorial de como pasar un diseño PSD pero a un tema para wordpress, hasta ahora no he podido encontrar uno claro y en español.
    Bendiciones y sigue con tu increíble trabajo!

    Responder
  4. Eddy

    hola pues yo empeze a dedicarme al negocio de crear paginas web pero siempre me han encantado, fascinado los templates que abundan en la red, tengo ya tres paginas de clientes hechas utilizando plantillas para mi siempre ha sido una incognita de no saber pasar de psd a html porque justamente lo que mas domino es photoshop o corel, si pudiera pasar mi diseño a web seria genial por fin podria crearme la pagina que tanto quiero.

    Responder
    1. Psd a Html Autor de la entrada

      Hola Eddy
      Con los articulos que ya he publicado, tienes casi resuelta tu incognita !!! jeje
      Es muy bueno que tengas facilidad para diseñar en photoshop o corel, porque entonces solo te falta un paso para poder crear desde cero tus paginas o para tus clientes.

      Muy pronto estaré posteando nuevos articulos con mas herramientas y conocimientos para convertir psd a html.

      Saludos !!

      Responder
  5. Enrique

    Cristian: Excelente iniciativa. Le he dado solo una ojeada a tu pagina, pero no tengas duda, leeré todos tus artículos. Lo mío es el diseño, pero no saber de código me estanca, así que creo haber encontrado el sitio correcto para algunas de mis tantas dudas.
    Tengo una consulta específica. Conoces algún manual de html que recomendarías principiantes? Creo que sería un excelente complemento para tu página, ya que hablando de algo en específico, alguien puede quedar colgado.

    Lo que es yo, me encantaría aprender a crear una plantilla para wordpress basado en mi diseño en psd..

    Saludos desde Chile
    Enrique

    Responder
    1. Psd a Html Autor de la entrada

      Hola Enrique
      Gracias por tus comentarios.

      Con respecto al lenguaje HTML, en varios de los primeros articulos, justamente explique los conceptos basicos de HTML que hay que tener en cuenta para el maquetado web desde Psd u otro formato. Y lo hice precisamente porque considero BASICO que alquien que maqueta, sepa del lenguaje que esta usando.
      Igualmente seguire posteando varios conceptos mas de HTML para complementar la maquetacion con CSS.

      Dime, que te gustaria saber puntualmente sobre HTML???

      Saludos!
      Cristian

      Responder
      1. Enrique

        Gracias por tu pronta respuesta.
        Me gustaría saber modificar a gusto una plantilla de wordpress. Algo se hacer, pero hay cosas que los mismos temas te limitan. Hay veces que encuentro 2 o 3 plantillas ideales para un sitio que yo considero ideal, pero cada una tiene algo que no me agrada y termino deshechando la idea, porque no tengo los conocimientos necesarios para personalizar tal plantilla.

      2. Psd a Html Autor de la entrada

        Claro Enrique
        Justamente por eso, el tema de Plantillas para WordPress merece un capitulo aparte.
        Para modificarlas a veces hace falta saber de varios lenguajes como HTML, PHP y JavaScript.
        No es imposible, de hecho yo me dedico a eso (entre otras cosas relacionadas con desarrollo web)
        Pero es un tema bastante amplio que me gustaria abordar en forma mas completa.

        Por lo pronto, comencé con la conversion de Psd a Html, ya que me parece lo basico , y el punto de partida para luego poder hacer otras cosas mas complejas como plantillas para WordPress. De hecho, es imposible hacer plantillas para WP, si uno no sabe maquetar un Html desde un Psd.

        Pero ya llegaremos a ese tema, jeje.

        Saludos!!
        Cristian

  6. Enrique

    Si, claro. Por eso mismo voy a empezar a leer todos los artículos que tienes y ponerme al día. Gracias por tu tiempo. Salu2

    Responder
  7. Juan

    Hola yo soy maquetador y siempre aprendo cosas nuevas en estos blogs , este en particular muy bueno , sigue asi !

    Es verdad que es bien pago muy bien pago , la gente que no sabe lo ve como algo imposible incluso le cuesta mucho a buenos programadores

    Responder
    1. Psd a Html Autor de la entrada

      Hola Juan , gracias por tu comentarios.
      Si es algo que realmente se paga MUY bien.
      Se que es un tema algo complejo, pero justamente es asi porque casi nadie lo explica bien, por eso estoy tratando de dar un poco de luz a este tema. jeje

      Un abrazo!
      Cristian

      Responder
  8. Erick Moz

    Agradezco la intención de tu trabajo en este blog, creo que todos los que hemos intentado trabajar con alguna plantilla gratuita en algun momento nos hemos topado con algun inconveniente, a mi en lo personal me frustra mucho el quedarme varado en alguna parte de la construcción desde photoshop en relación a CSS y su traspaso al html a traves de dreamweaver.

    Que coraje da NO encontrar respuestas claras y oportunas a las dudas, despues de leér, gastar tiempo y dinero en articulos, páginas y libros.

    He notado que a la hora de maquetar cada uno tiene su propio método de trabajo y esto en vez de aclarar me ha confundido más. Ha sido tan decepcionante este tema que incluso llegue a tirar la toalla y seguir con otras alternativas, como webpagemaker o casas así muy austeros y de resultado muy sencillos.

    Voy a leér tus artículos y espero encontrar aqui las respuestas que necesito, de antemano agradezco tu intención y envió saludos por compartir tu conocimiento.

    Responder
    1. Psd a Html Autor de la entrada

      Hola Erick
      Gracias por tus comentarios.

      Es verdad que este tema es muy confuso y variado, por eso en uno de los articulos, he dicho que es casi un “tabu”. jeje
      Lo UNICO que te voy a pedir, es que NO TIRES LAS TOALLA, por favor!

      Te aseguro que con XHTML y CSS se puede resolver cualquier diseño en PSD.
      Trabajo en esto desde hace 10 años, y te aseguro que hubo veces que me he encontrado con diseños que yo mismo me dije “esto no se puede resolver”.
      Pero SIEMPRE he podido resolverlos.
      Es solo tener los conocimientos “FUNDAMENTALES” de HTML y el funcionamiento de CSS, con eso puedes resolver cualquier planteo en PSD.

      Lamentablemente como dices tu, no hay material muy claro al respecto, y es por eso que creé este blog, para poder despejar las dudas y colaborar con mi experiencia de 10 años.

      Revisa los articulos y avisame si tienes alguna duda.
      Saludos!
      Cristian

      Responder
  9. beel

    Hola que tal excelente blog. soy un estudiante que estoy empesanodo en el mundo del diseño y me intereso mucho tu blog para poder aprender y realizar bonitos diseños, se algo de programacion php y mysql pero quiero aprender a maquetar para poder complementar todo junto.
    Asi que sere tu proximo alumno, estare muy de cerca siguiendo tu blog y te doy las gracias por compartir tus conocimientos con los demas.
    te mando un cordial saludo…….

    Responder

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