Blog de Friendlysoft

Acabo de entrar al perfil de Twitter de Designshack donde encontré el twit sobre un par de artículos interesantes que postean desde otro sitio, llamado DesignM.ag.

Están orientados a diseñadores y maquetadores/codificadores de XHTML y CSS. Están en inglés pero vale la pena hacer el esfuerzo y seguirlos, sobre todo para tener una referencia de cómo trabaja la gente que sabe.

El primero en “orden de uso” se llama “Cómo diseñar un sitio web corporativo en Photosop” (How to Design A Corporate Website in Photoshop). Es un tutorial paso a paso, desde que abrimos un nuevo archivo, pasando por detalles finos del proceso hasta un final que incluye el archivo PSD para descargar. Rescato acá algo que conversamos siempre con Dani y tratamos de transmitir a los diseñadores: el uso de Photoshop como herramienta principal a la hora de llevar a cabo un diseño para pantalla. A la hora de maquetar y lograr terminaciones excelentes, es necesario diseñar a nivel píxel,  y esto sólo se puede hacer en programas que están hechos para trabajar a nivel píxel. Si, los vectores son fantásticos, pero cuando hay que exportar los sectores para armar una página web, los programas como Illustrator exportan siempre con un suavizado que deja, por ejemplo, las líneas que deberían ser de 1px de ancho en dos o mas, generando un efecto indeseado. En fin…

El segundo artículo encontrado trabaja sobre el diseño hecho en el anterior, y el autor va confeccionando la página a partir de la exportación de imágenes desde Photoshop para luego volcarse al código. Se llama “Codificando un sitio corporativo a partir de Photoshop: de PSD a HTML” (Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial).

Aprovecho también para recomendar un sitio que comenzó como galería de sitios con buen CSS y se convirtió en un magazine con un montón de referencias, artículos e inspiración para diseñadores y codificadores web: DesignShack.co.uk.

Saludos desde Friendlysoft!