-
Cómo convertir plantillas PSD a HTML en CSS
-
PSD o Photoshop documento es un formato de archivo específico para imágenes y gráficos creados dentro de la aplicación Adobe Photoshop. Photoshop es a menudo utilizado por los diseñadores web para crear maquetas de diseños de sitios. Una vez que se ha completado un diseño, la plantilla PSD se aplica al sitio web utilizando HTML y CSS. CSS o Cascading Style Sheets, contienen código que dicta el estilo general de un sitio web. A menudo es tarea de los desarrolladores web para convertir la plantilla PSD a CSS y HTML para mostrar con éxito el diseño del sitio en la Web.Instrucciones
1 Abra el archivo PSD en Photoshop.
2 Haga clic en el icono "ojo" de cada capa en la ventana de capas, excepto del fondo para hacer sólo el fondo visible. Seleccione la opción "Guardar para Web y dispositivos", y guardarlo como un archivo JPG.
3 Abra un nuevo archivo en el Bloc de notas, e introduzca el siguiente código CSS para el fondo:
cuerpo {
background: url ( 'mybackground.jpg');
}
Reemplazar "mybackground.jpg" con el nombre de la imagen de fondo.
4 Seleccione "Análisis" y "herramienta de la regla" en el menú principal del Photoshop, y usar esto para anotar los tamaños de las diferentes partes de su página Web, como el encabezado, pie de página, el contenido principal y las barras laterales. También tenga en cuenta por la alineación y los colores de cada elemento.
5 Definir las diferentes partes de su diseño web en CSS utilizando la información obtenida en el paso cuatro. Por ejemplo, el CSS para una barra lateral izquierda de color gris, de 300 píxeles de ancho se define como:
{barra lateral
flotador izquierdo;Anchura: 900px;
altura: 300px;
background-color: #ccc;
}
Completar esto para todas las otras partes, tales como el encabezado, contenido y pie de página.
6 Determinar los estilos de fuente utilizados en la plantilla PSD. Haga doble clic sobre la capa de texto en el cuadro de capa. La barra de herramientas de texto que se visualiza muestra el tipo de fuente utilizada y el tamaño de la fuente.
7 Añadir los estilos de fuente en el CSS. Por ejemplo, si Arial negrita con un tamaño de fuente de 20 píxeles se utiliza para los títulos, escriba el siguiente CSS:
h1 {
font-family: Arial;
font-size: 20px;
de color negro;
font-weight: bold;
}
8 Guarde el archivo CSS.
9 Abra un nuevo archivo en el Bloc de notas, y crear el archivo HTML. Añadir su archivo CSS usando el siguiente código:
<Head>
<Link href = rel = tipo "style.css" "estilo" = "text / css">
</ Head>
Reemplazar "style.css" con el nombre de su archivo CSS.
10 Escribir en todos los contenidos para el cuerpo utilizando las diferentes clases y selectores que ha definido en el archivo CSS. Por ejemplo:
<Body>
<Div id = "header"> <h1> Mi Página Web </ h1> </ div>
<Div id = "contenedor">
<Div id = "maincontent"> Ingrese aquí el contenido </ div>
<Div id = "barra lateral"> contenido de la barra lateral </ div>
<Div>
<Did id = "pie"> contenido de pie de página </ div>
</ Body>
11 Guarde el archivo HTML en la misma carpeta donde se encuentra el archivo CSS.
12 Ver su sitio en un navegador y compararlo con su plantilla PSD. Hacer los ajustes necesarios para que los dos idénticos.
