Cargo actual:Index > PSD a HTML Tutorial

PSD a HTML Tutorial

Actualizado:02-22Fuente: consolidación de la red
Advertisement

Cuando un desarrollador web está a punto de crear una página web por lo general va a llegar un documento de Adobe Photoshop, o PSD, desde el diseñador de páginas web. Este PSD puede incluir varias instancias de diseño llamadas composiciones de capas. Composiciones de capas (una nueva herramienta de gestión de capa en Photoshop) muestran el desarrollador web qué cambios al diseño original de enfocar. El desarrollador se evalúa cada página y traduce el diseño en el formato página web adecuada y el código. Esta guía le ayudará a crear una estrategia para convertir adecuadamente PSD en páginas HTML.

Comps Revisión de capa

Haga clic a través de cada Comp capa en Photoshop para ver los diferentes estados del diseño. Cada Comp Capa tendrá varias diferencias que son importantes para el diseño y el código. Por ejemplo, una composición de capas puede tener estados de rollover; otro puede tener diferencias de imagen de fondo. Si Layer Comps no están disponibles, a continuación, revise PSD como es.

Crear guías de Áreas principales

Separar el diseño en tres áreas: Cabecera, Contenido, pie de página. Esto se hace en Photoshop a través de las guías. Crear una Guía arrastrando las líneas de cuadrícula con el ratón desde el borde del documento de Photoshop hasta el borde de las áreas que desea separar. Por ejemplo, desea crear una guía que separa la cabecera del contenido. Generalmente hay una clara diferencia desde donde la cabecera termina y donde comienza el contenido; si no, utilizar su mejor juicio.

Crear HTML / CSS para Áreas principales

En su texto de código editor de etiquetas básicas HTML: html, cabeza y cuerpo. En el interior del cuerpo de la etiqueta crear un contenedor de la página (es decir, <div id = "contenedor"> </ div>). Dentro de este contenedor insertar un div para el encabezado, contenido y áreas de pie de página que ha creado guías para. En Photoshop, utilizando la herramienta Marco Rectangular dibujar un cuadro a lo largo de los bordes de las guías que ha creado, a continuación, en "Imagen" (ubicado en la parte superior del programa) seleccione "Recortar". Vaya a "Imagen" y luego "Tamaño de imagen" y verás altura y anchura dimensiones exactas del área recortó. Lo necesitará para definir su CSS. Para las imágenes de fondo, en Photoshop ir a la paleta de capas, haga clic en los ojos para mostrar y ocultar ciertas capas hasta llegar a sólo el fondo que necesita.

Página Específicos

Crear guías para el relleno y los márgenes entre las áreas de la página (es decir, la cabecera al contenido, el contenido de pie de página, pie de página a la parte inferior de la página). Guarde los gráficos de todos los elementos de texto en fuentes inusuales que no pueden ser prestados en forma de texto del sistema. Por ejemplo, el texto hecho en una fuente Papyrus necesita ser cortado en lonchas y guardado como una imagen, porque la web no rendirá como texto del sistema. Alternar entre Layer Comps para asegurarse de que las guías no se superpongan.

Crear HTML / CSS de la página Específicos

Definir CSS universal para etiquetas consistentes como párrafos, anclas, tablas, etiquetas de cabecera, y elementos de la lista. Comience conectando el contenido a partir de la cabecera y pie de página y luego rellenar las áreas de contenido. El encabezado y pie de página suelen ser coherente en cada página de su sitio web. Romper el área de contenido en la copia, módulos, y la navegación. Obtener colores, fuentes y espaciado de línea del PSD e incorporar en su archivo CSS.

Comparar archivo HTML con el PSD

Guardar archivos CSS como .css y los archivos HTML como .html. Abrir archivo HTML a través de múltiples navegadores web, vaya a Archivo y luego Abrir ubicación. Revise el archivo HTML en contra del diseño de Photoshop y compruebe si hay diferencias. Nota diferencias sobre una hoja de papel, y luego arreglar su código HTML o CSS para que coincida con el diseño PSD. Continúe este proceso hasta que lo que se ve en el navegador web coincide con la del diseño de PSD.

  • PSD a HTML Tutorial Actualizado:02-22

    Cuando un desarrollador web está a punto de crear una página web por lo general va a llegar un documento de Adobe Photoshop, o PSD, desde el diseñador de páginas web. Este PSD puede incluir varias instancias de diseño llamadas composiciones de capas.

  • Cómo convertir PSD a HTML Con Gimp Actualizado:03-04

    GIMP es un programa de edición de imágenes gratis, con todas las funciones que puede realizar muchas de las mismas funciones como Adobe Photoshop. Por ejemplo, es capaz de editar los archivos .PSD que produce Photoshop. Si usted tiene un archivo .PSD

  • HTML Tutorial: Mesa y Color de bordeHTML Tutorial: Mesa y Color de borde Actualizado:09-13

    Tablas HTML son una manera práctica de organizar el texto, pero pueden parecer un poco monótono y sin los ajustes adecuados. Cambiar el color del borde y el fondo de la tabla puede darle un poco más pop. En este tutorial, aprenderá el código necesari

  • Cómo convertir PSD a HTML Actualizado:05-27

    La extensión de archivo .psd es la extensión del formato utilizado para los archivos de Photoshop guardados. Código HTML se utiliza como un bloque de construcción para las páginas web, pero los archivos .psd no están optimizados para su uso en la Web

  • Columnas de la tabla HTML Tutorial Actualizado:03-08

    Tablas HTML permiten a sus páginas Web para mostrar los datos en un formato de fácil lectura. Son relativamente fácil de configurar, pero pueden ser confuso para un principiante, porque mientras las filas de una tabla están claramente definidos en el

  • Balas HTML TutorialBalas HTML Tutorial Actualizado:06-01

    Por lo general, cuando vea "balas" en la web, usted piensa diminutos puntos sólidos. Si bien es cierto que el uso de <UL> es la forma más fácil de hacer una lista con viñetas, no es la única manera. Este artículo le mostrará tres técn

  • 8 mejores sitios web para HTML Calidad Ejemplos Codificación8 mejores sitios web para HTML Calidad Ejemplos Codificación Actualizado:03-17

    Desde que empecé a aprender acerca de HTML en los años 90, siempre he encontrado que es casi imposible encontrar buenos ejemplos HTML sólidas en Internet. Hubiera sido bueno tener un par de sitios web que ofrecen los últimos, el más fresco ejemplos d

  • Cómo arreglar bordes de tabla en HTML Actualizado:09-08

    En el diseño de una página web en Hypertext Markup Language (HTML), es posible que desee para mostrar los datos en un arreglo rectangular de filas y columnas, como en una matriz. Usted necesita la etiqueta "TABLE". Para establecer las filas

  • Cómo aprender Diseño Web rápidaCómo aprender Diseño Web rápida Actualizado:01-17

    Diseñar un sitio web se ha convertido en una tarea fácil debido a la llegada de WYSIWYG (lo que ves es lo que obtienes) herramientas de diseño web como Front Page de Microsoft. Por desgracia, hay algunos casos en los que aprenden cómo diseñar una pág

  • Cursos gratuitos en Habilidades en computaciónCursos gratuitos en Habilidades en computación Actualizado:06-27

    Muchos trabajos requieren al menos conocimientos básicos de informática. De escribir para JavaScript conocimientos de informática puede ser un positivo en un curriculum vitae. Cursos gratuitos están disponibles en Internet en una amplia gama de temas