Webcast técnicas para convertir un diseño Photoshop a HTML

  • Por
Qué es lo más importante que debes saber para convertir un diseño realizado en Photoshop a HTML y CSS, con tamaños relativos. Fórmula de Target / Context.
Hemos realizado un webcast muy interesante sobre diseño web y cómo convertir un diseño que tienes en Photoshop con tamaños fijos en píxeles a tamaños relativos en porcentaje. Es lo más importante que debes conocer para poder hacer webs adaptables a cualquier tamaño de pantalla donde se visualicen.

"Odio a los píxeles", es la frase más destacada de la transmisión realizada por nuestro experto diseñador Daniel Martínez @Wakkos, que trata de expresar el error más común que cometemos las personas que no somos diseñadores, o aquellos diseñadores que todavía siguen anclados en técnicas que se utilizaban en el pasado.

Hoy todo lo debemos diseñar en medidas relativas, para que se adapten a todos los dispositivos donde se puedan llegar a visualizar las webs y sigan manteniendo las proporciones con las que fueron diseñadas las webs. Esas son las bases del diseño actual y de lo que se conoce como Responsive Web Design.

Generalmente, cuando diseñamos con Photoshop se realizan las medias en píxeles, porque lo que vemos en la pantalla del ordenador son píxeles. Pero a la hora de convertir en HTML tenemos que hacer las cosas sin pensar en esas medidas fijas, sino pensar en medidas relativas, ya sean porcentajes o em. Eso es lo que estudiaremos con calma en este webcast a través de un ejemplo.

Para hacer esos cálculos aprenderemos lo que es la fórmula más de moda en el diseño web actual: porcentaje = Target / Context. Esa pequeña formulita nos ofrecerá todo lo que necesitamos para hacer una web adaptable sin morir en el intento.

Con este webcast queremos también hablaros de un curso que estamos realizando en EscuelaIT, en el que veremos este tema de diseño web y muchos otros que convertirán a los estudiantes en expertos diseñadores, de la mano de nuestro tutor Daniel Martínez. Un curso con un programa muy completo donde se asegura un contenido actual, prácticas útiles y charlas amenas llenas de consejos que todo diseñador debería conocer.

Es un curso enfocado para personas que quieran comenzar con el diseño web con buen pie y para diseñadores que necesiten actualizar sus conocimientos a las técnicas y tecnologías más actuales. Puedes encontrar más información del curso en la página:

http://escuela.it/cursos/web-design/

Os dejamos ya con el vídeo de esta charla que estamos seguros os gustará!

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

german_vaquer_betes

08/6/2012
Webcast Photoshop a html
hola!

Ayes asistí a este evento y me pareció muy interesante, de hecho ya estoy apuntado al curso de diseño web de Daniel para la semana que viene.

Pienso que resultará un curso muy interesante y entretenido, del que espero aprender muchas cosas nuevas para poder aprovecharlas en el diseño y desarrollo de páginas web. Felicidades por este tipo de eventos y ya nos veremos en el curso.
Saludos: Germán

JPETIS

09/6/2012
fELICITAROS
Wakkos y miguel cada dia nos sorprendeis con algo mejor. Esto me encanta.

Juana maría

26/6/2012
Hola: qué pena que se dispersen tanto , se corten y que no se concrete.
Si las clases on line son así desesperan a cualquiera.

Richard

28/6/2012
No se ve el vídeo
gracias,