[Fuente: http://blog.teamtreehouse.com/psd-to-html-is-dead]

Los tutoriales de PSD a HTML son muchos en la red. De hecho, mucha gente me pregunta porque no hay tutoriales de PSD a HTML en Treehouse. Además de los tutoriales, hay muchas compañias que aceptan un PSD y lo convierten a una página web por  $100 USD.

Sin embargo , aunque es popular , PSD to HTML no es la mejor forma de construir websites.

Si es popular, entonces cómo podemos decir que está muerto? Vamos a explicarlo.

Qué es PSD to HTML?

En general, “PSD to HTML” es un workflow. Primero, una página web se diseña en un documento Photoshop (PSD) y entonces se convierte a código (utlizando HTML , CSS y Javascript). Podrías elegir otro editor de imágenes en vez de Photoshop, pero el principio es el mismo. Aquí vemos los pasos en más detalle:

1. Diseña un mockup al detalle de pixel en Photoshop de exactamente lo que quieres que sea tu web.
2. Utiliza la Slice Tool de Photoshop para dividir en imágenes de web y exportarlo a web.
3. Escribe HTML y CSS que utilice las imágenes que exportaste desde Photoshop.

En un primer vistazo , esto puede parecer una buena idea.

En Photoshop , la herramienta de slices en la ventana de Save for Web es esencial para que los diseñadores saquen assets (recursos de imágenes) desde el PSD. Se hace fácil trocear un diseño y entonces ponerlo en un layout hecho de HTML y CSS.

Con esta idea , muchas compañias han adoptado esta forma de trabajo en sus workflows de trabajo. En otras palabras, un diseñador crea el Photoshop mockup y entonces se lo pasa al programador qye es es el que escribe el código. Hoy en día, el role de un diseñador web tiende a fusionar tanto temas estéticos como de programación HTML y CSS.

Sigue siendo PSD to HTML una buena idea?

Si , el workflow de PSD to HTML solía ser una de las mejores formas de hacer websites. Hat dos buenas razones por las que PSd to HTML sigue teniendo sentido.

• La primera razón es para hacer assets. Antes de que los navegadores soportaran todas las maravillosas caracteristicas del CSS moderno (drop shadows, rounded corners, gradients, and more) era muy dificil crear efectos cross-browser sin la utilización de imágenes. Los diseñadores creaban sombras u esquinas redondeadas como imágenes, entonces se utilizan truquillos de código para colocar todas estas pequeñas imágenes en el sitio apropiado y que diera el pego. Estos assets por tanto eran necesarios y poder crearlos al mismo tiempo que el mockup ahorraba tiempo.

Prior to the development and widespread adoption of CSS, many websites were a collection of image assets that looked something like this. One of the most innovative techniques of the time was the sliding doors technique to create tabs back in 2003.

• Segundo (y quizás más importante) , la web sólo se visualizaba eb navegadores de ordenadores desktop  y no era realmente importante que se viera bien en phones y tablets como lo es hoy. Diseñar para una resolución fija de 1024×768 soliá ser una buena solución.

Por estas dos razones, es entendible porque un diseñador elije Photoshop como su principal herramienta. Las image assets son necesaria en todas las resoluciones de pantalla.

Qué es lo que falla ahora en la metodología PSD to HTML?

Estas son las razones principales por las que pienso que PSD to HTML está muerto.

DISEÑO WEB RESPONSIVO

Hoy en día se consulta páginas web de muchas dispositivos y navegadores distintos. No hay un resolución de pantalla en la que el diseñador se puede fijar como la buena. Yendo más alla , ya no se puede hablar de diseño para una resolución de pantalla en concreto.

Screensiz.es provides tables of information about popular hardware devices.

Sin entrar en detalle sobre responsive web design or scalable design, la cuestión es que Photoshop está basado en pixeles y ahora las páginas web son fluidas y se tienen que adaptar a los cambios.

DISEÑO CSS

Segundo ,las nuevas características en CSS ahora disponibles. Efectos comunes como sombras , gradientes  y esquinas redondeadas se pueden hacer con CSS y generalmente ni siquiera necesitan estar basados en imagenes.

MADUREZ

Tercero , la industria web ha crecido mucho. Ya en general sabemos lo que funciona y lo que no. La mayoría de las compañias esperan que el diseñador sea el responsable tanto de la estética como de la codificación del HTML y el CSS.

Esto también quiere decir que hay muchas herramientas que soportan los modernos flujos de trabajo.Frameworks CSS (CSS frameworks) como Bootstrap y Foundation hacen más viable el diseño web. Apps como Balsamiq y Omnigraffle te ayudan a hacer wireframes de los sites rápidamente. Aun así , los mockups hechos con papel y el lápiz  han aguantado bien el paso del tiempo.

Does this mean Photoshop is dead?

No! Not even close. Photoshop is still very important to web design. The problem comes in when a powerful tool like Photoshop is used as a catch all solution without thinking of the higher level task (designing websites). Photoshop is awesome for editing and exporting photographs for web usage. There’s also plenty of situations where it still might make sense to generate full detail mockups (in Photoshop, Illustrator, or otherwise) as part of a more complete process. Here are a couple of examples:

• High fidelity mockups can be a critical communication tool when working with web design clients. It might seem faster to skip a high detail mockup, but it could hurt later on, because many clients aren’t going to understand how a wireframe will translate to a web browser. A high fidelity mockup can serve as a discussion tool before writing lots of code (only to discover it’s not what the client wanted).
• High fidelity mockups can be very important when working in medium to large sized teams. We often will create high res mockups at Treehouse when planning new courses or designing new features of our site, because it’s a powerful way to sync everyone’s mental model of what a feature will look like or how a project might look once it’s finished.

These two examples have a key difference from the PSD to HTML way of thinking. High detail mockups are still sometimes generated, but not so that they can be “tossed over the fence” to a team of developers or sliced up into code. Rather, Photoshop mockups can be used as a visual aid to discuss ideas. In a PSD to HTML workflow, the Photoshop document represents the final site and it’s expected to look exactly the same in the browser. This is a subtle but important difference.

Different Strokes

Everyone’s workflow is different and nobody knows how to make the perfect website. You should always do whatever is most effective for you and your colleagues. Pushing pixels around in Photoshop is a ton of fun, but I can admit to many occasions when I’ve pushed the pixels too far. The key is to know yourself and what makes you perform at your best. If you have any questions or opinions, I’d love to hear about them in the comments!