PSD a HTML Codificación

Los ingenieros de software de Adobe, el desarrollador de Photoshop, han simplificado el proceso para los usuarios producir HTML y salida de CSS de sus archivos maestros de diseño gráfico de acuerdo con el principio de lo que ves es lo que obtienes (WYSIWYG, que se pronuncia "wizzywig"). Aprovechando los recursos nativos de Photoshop, los diseñadores pueden cerrar la brecha entre la versión en formato de archivo nativo de Photoshop, PSD y el diseño que se reproduce por el navegador Web la mayor fluidez y eficientemente como sea posible.

Preparación

Dado que los sitios Web comprenden áreas funcionales distintas, y por lo tanto, distintas piezas de código que a su vez contienen imágenes y texto, debe prepararse para demarcar las áreas en su composición que servirán diferentes funciones para el visitante. La identificación de los límites inherentes a su diseño facilita la transición entre la composición visual y la aplicación de los gráficos en lenguaje de marcas. Por ejemplo, tal como el banner ocupa un área específica de su diseño, visualizar un cuadro que contenerlo, cuidando de que no hay cajas adyacentes, tales como los que contienen el contenido del sitio, pueden solaparse el cuadro que usted designe para el banner. En el análisis final, Photoshop produce fieles lenguaje de marcas para sus designaciones y sus opciones se verá reflejado en el código.

El rebanar

La herramienta División sirve para dividir las áreas del diseño en imágenes modulares que están listos para el código HTML y CSS para llamarlos. Una rebanada creado con la herramienta División determina los parámetros que se transmiten a las imágenes resultantes y código. Asignación de nombre a rodajas permite Photoshop no sólo para invertir las imágenes resultantes con los nombres de archivo de su elección, sino también para asignar las imágenes correspondientes atributos ID HTML apropiados. Más allá de los nombres de las rebanadas, Photoshop también asiste a su posición y dimensiones en la producción de los parámetros de CSS.

Ahorro para Web y dispositivos

Guardar para Web y dispositivos auxiliares es una interfaz a la ventana principal de Photoshop en el que se preparan las zonas rodajas de su diseño y guardarlas como imágenes discretas. Herramientas se aplican a cada rodaja de forma independiente, la optimización de las imágenes de salida para su uso en línea y lo que le permite encontrar el equilibrio más favorable entre el tamaño de archivo de un lado y la calidad en el otro. Es posible designar las divisiones para la producción en cualquiera de los tres formatos visibles en la web: JPG, GIF (con o sin transparencia), y PNG (con o sin transparencia). Con la configuración correcta en el lugar, cuando se guarda el diseño de Photoshop del panel Guardar para Web y dispositivos y especifique la opción "Guardar como tipo de archivo" como "HTML e imágenes" se obtiene tanto el documento HTML y las imágenes asociadas.

Ajustes de salida

Accesibles a través de la ventana de Guardar para Web y dispositivos, el cuadro de diálogo Ajustes de salida permite especificar exactamente el formato de la salida en la preparación para la edición de HTML y CSS fuera de Photoshop. Fundamentalmente, en el panel HTML debe marcar la casilla "XHMTL de salida" para Photoshop para producir un documento HTML para editar. El panel Rebanadas contiene la opción "Generar CSS"; debe habilitar esto para CSS para ser incluida en el documento HTML. Puede que le resulte útil para experimentar con los otros valores del cuadro de diálogo, pero con Photoshop se establece en HTML y CSS de salida correspondiente a los parámetros que construye en su rodajas, que ha satisfecho la mayor parte de su objetivo.

Modificar el código HTML y CSS de salida

Después de haber guardado todos los sectores y el documento HTML con estilos CSS utilizando Guardar para Web y dispositivos con los ajustes de salida correctas, puede abrir el documento HTML con el software de edición de su elección. Si no tiene otro software que nos ocupa, se puede usar editor de texto Bloc de notas de Windows. Al abrir el documento HTML Photoshop produce, se encuentra marcado de forma completa y adecuada con formato en el cuerpo, así como los estilos CSS en la cabeza, todo de acuerdo a los parámetros que ha especificado anteriormente. Si bien es posible que desee realizar cambios en el código, el documento crea Photoshop puede servir como punto de referencia fiable que es seguro para mostrar con precisión en cualquier navegador moderno.