Reseña de libro: de Photoshop a HTML
Si eres nuevo en la creación de diseños de sitios web con Photoshop, aprender a transformar esos archivos .PSD en semánticos, CSS y HTML compatibles con los estándares puede ser un poco intimidante.
Después de todo, hay muchos excelentes servicios que pueden dividir y codificar sus archivos por usted. Pero hay casos en los que puede preferir rebanar esos diseños usted mismo.
Ahí es donde De Photoshop a HTML: Cómo dividir tus diseños como un profesional por Jeffrey Way, editor de Nettuts +, entra.
En este libro de 145 páginas, todo el proceso de conversión de un archivo .PSD en un diseño web funcional está cubierto, en detalle, con ejemplos de código.
Se usa un sitio modelo para guiar a los lectores a lo largo de todo el proceso, paso a paso, con un solo ejemplo. Se cubre todo, desde la codificación básica hasta hacer que sus diseños sean compatibles con varios navegadores.
Diariamente, si escuchas de cerca, se escuchan gritos en todo el mundo por parte de codificadores que intentan forzar un diseño en su posición sin éxito. No se trata solo de aprender el idioma; la memorización es una tarea fácil. Los puntos de inducción de gritos ocurren cuando visualiza su sitio en diez navegadores diferentes, lo que hace que su sitio tenga diferentes niveles de consistencia.
El libro supone que tiene un conocimiento básico de CSS y HTML, así como un diseño ya creado en Photoshop. El diseño utilizado en el libro es simple, pero los conceptos utilizados para crear el diseño se pueden aplicar fácilmente a diseños más complejos.
El libro comienza con una sección sobre cómo ver un diseño antes de sumergirse en el proceso de creación del código HTML.
Si bien puede parecer natural comenzar inmediatamente a trabajar en las imágenes de nuestro sitio web, esto en realidad no podría estar más lejos de la realidad. En cambio, primero debemos construir nuestra base, o el margen, y solo una vez que se haya completado podemos pasar a las imágenes.
Escoger las tres secciones básicas que contienen la mayoría de los sitios web: un encabezado, el área de contenido principal y un pie de página, están cubiertos, y luego el libro salta directamente al proceso de configuración de su archivo HTML básico. Una vez más, cualquier persona con conocimientos básicos de HTML no tendrá problemas con esta parte.
Una vez que se completa el código HTML básico, desde Photoshop a HTML se explica cómo dividir sus archivos .PSD.
Tómese un momento para mirar el diseño en Photoshop. Trate de identificar cada imagen que será necesaria. Recuerde, las características pueden ser recreadas con CSS; así que se creativo.
Si bien se mencionan ambos métodos para dividir sus archivos en segmentos, el libro usa una combinación de recorte y corte y pegado para obtener las imágenes que necesitará, en lugar de utilizar la herramienta de corte.
Ambos métodos son perfectamente válidos. Te recomiendo que pruebes ambas y eliges cuál es la más rápida ... para ti.
Los atajos de teclado para acelerar este proceso están cubiertos en profundidad. También se discute ampliamente cómo guardar estas imágenes para la web, incluidas todas las configuraciones que debe usar y qué tipo de archivo de imagen usar para cada tipo de imagen, al igual que los sprites de CSS. Por último, pero no por ello menos importante, en esta sección, hay algunas notas sobre ajustes que luego deberán realizarse en el archivo HTML en función de las imágenes de fondo que se usen.
Una vez que su HTML y sus imágenes estén listas, es hora de sumergirse en el CSS de su sitio. Los reinicios del navegador están subrayados y cubiertos en profundidad, así como la forma de reconstruir un archivo CSS estandarizado y predeterminado.
Cada navegador utiliza un poco de "CSS predeterminado" para personalizar automáticamente su marcado. A primera vista, podría pensar que esto es extremadamente útil ... Si cada navegador los implementara de manera idéntica, esto no sería un problema. Lamentablemente, este no es el caso.
Hay una serie de principios de CSS, que incluyen el posicionamiento relativo frente al absoluto y las formas de CSS, cubiertos de una manera práctica y utilizable. Para aquellos que no son expertos en CSS, estas secciones serán particularmente informativas, mientras que aquellos que quieran omitir estas partes. Otro gran código CSS cubierto es cómo crear pies de página pegajosos, algo que puede ser frustrante para los nuevos diseñadores de CSS.
La codificación de páginas adicionales más allá de nuestra página de inicio está cubierta, incluida la forma de realizar pequeños ajustes en el diseño y el contenido, y lo que deberá agregar a sus archivos CSS. Para cuando haya terminado con esta sección, tendrá todas las plantillas de página necesarias para un sitio web de cartera completamente funcional.
El último capítulo regular del libro trata sobre cómo hacer que su diseño sea compatible con varios navegadores, específicamente cuando se trata de navegadores más antiguos como Internet Explorer 6 y 7. Uno de los mayores problemas cubiertos es la falta de transparencia en las imágenes de IE6. , con una variedad de soluciones para superarlo.
Ver su sitio web en Internet Explorer 7 y abajo por primera vez lo hará temblar. Puede tener suerte, pero la mayoría de las veces encontrará numerosos problemas que deben corregirse.
Un capítulo de bonificación al final le muestra cómo crear efectos de transición jQuery, que se incorporan en el diseño del sitio. Para cualquier persona nueva en JavaScript y jQuery, es un proyecto interesante que enseña algunas técnicas básicas.
En general, si ha estado externalizando la conversión de sus archivos .PSD a HTML, o si ha querido probar el diseño de sitios web en Photoshop, definitivamente vale la pena leer este libro.
Con instrucciones completas y paso a paso que se pueden aplicar fácilmente a muchos proyectos y toneladas de código de ejemplo, De Photoshop a HTML Seguro que te ayudará a comenzar a convertir tus propios diseños. ¡Con un poco de práctica, los conceptos cubiertos podrían usarse en prácticamente cualquier diseño!
El libro también viene con los archivos de origen para el sitio creado, que puede usar en sus propios proyectos como quiera.
Escrito exclusivamente para WDD por Cameron Chapman .
¿Qué opinas de este libro? Por favor, háganos saber en el área de comentarios ...