Cómo crear un diseño web limpio y profesional (con conversión de PSD a HTML)

Nuestra pasión por la web crece día a día, así que hoy vamos a aprender a crear un diseño web muy profesional y limpio. Veremos que usando degradados, el filtro de ruido y algunas líneas sutiles de 1px para conseguir profundidad, podemos crear fácilmente un gran diseño web para una amplia gama de usos. Como es habitual, el post se divide en dos partes: primero creamos la página web en Photoshop y luego convertimos el PSD en una página HTML/CSS funcional y lista para la web. Siguiendo este tutorial paso a paso de diseño aprenderás, tocando con tus manos todo el proceso de hacer una página web, cómo diseñar y codificar un sitio moderno. ¿Quieres descargar los archivos fuente de este tutorial (PSD+HTML/CSS)? Hazte miembro hoy y obtén acceso a todas las áreas premium por solo 7$ al mes. ¿ Quieres saber más?

El resultado final

A continuación, puedes ver el resultado final de nuestro trabajo: un bonito diseño web con un estilo fresco y atractivo. Haz clic aquí para ver una vista previa en directo de la plantilla.

DESCARGAR PLANTILLA PSD + HTML/CSS

[hidepost] [descarga format="1"] [/hidepost]Conviértete en miembro Premium y obtén acceso ilimitado a archivos fuente y recursos premium por solo $7 al mes. Haz clic aquí para obtener más información .

El proceso de diseño

Te recomiendo que hagas un boceto antes de crear tu diseño web con Photoshop; es el primer paso importante. Imprime tus ideas sobre cómo debe ser el diseño en una hoja en blanco para tener en cuenta tu objetivo durante todo el proceso de diseño. A continuación puedes ver mi boceto para este "proyecto", Download.Movie.

Paso 0 - El documento

Empecemos con Photoshop. En primer lugar, crea un nuevo documento de 1024 x 1200 píxeles con una resolución de 72 píxeles por pulgada y un fondo transparente. Importa la plantilla de cuadrícula de 960 píxeles (cuadrícula de 12 columnas), es útil para diseñar la página con un tamaño de 960 píxeles.

Paso 1 – El fondo

Crea una selección (usando la herramienta Selección) que cubra todo el lienzo, genera una nueva capa llamada "fondo" y rellena la selección (clic derecho Rellenar) con el color #f9f9f9, luego puedes bloquear la capa. Usa la herramienta Rectángulo para dibujar una forma rectangular en la parte superior de la página (altura de aproximadamente 270 píxeles, color #29729f). Agrega una Superposición de degradado lineal (haz doble clic en la capa en la Paleta de capas) de negro a blanco (establece el Modo suave en Luz suave, Escala 150%). Duplica y rasteriza la capa recién creada y agrega un filtro de ruido (FiltroRuidoAgregar ruido). Usa nuevamente la herramienta Rectángulo para dibujar una forma rectangular (altura de 4-5 píxeles, color #162850), selecciona la herramienta Rectángulo redondeado con un radio de 10 px y agrega una pequeña forma (asegúrate de seleccionar la opción Agregar al área de forma) como se muestra. Dibuja una línea de 1 px, usando Sombra paralela, para agregar profundidad como se muestra en las imágenes a continuación.

Paso 2 - Logotipo

En la parte superior izquierda de la página agregamos el logo. Para crear un efecto de luz suave para el fondo, puedes usar la herramienta Marco elíptico creando 2 capas blancas con un filtro Desenfoque gaussiano (FiltroDesenfocarAgregar ruido) y una opacidad del 50% para la primera capa y deleste añopara la segunda capa. Ahora agrega otras 3 capas, pero esta vez establece el relleno al 0% y agrega una Superposición de degradado para cada capa como se muestra a continuación en las imágenes. Usando la herramienta Rectángulo redondeado dibuja un cuadrado pequeño (mantén presionada la tecla Shift para dibujar un cuadrado perfecto), luego con la herramienta Forma personalizada dibuja una pequeña flecha como se muestra. Rasteriza las dos capas y usa la flecha para cortar una flecha del cuadrado. Luego cambia el tamaño y transforma la forma personalizada como se muestra. Agrega el siguiente estilo: Ahora con la herramienta Tipo escribe el nombre de la empresa, luego agrega el mismo estilo que acabamos de usar para nuestro ícono.

Paso 3 – Completar el encabezado

Para completar el encabezado agregue el menú y un cuadro de registro/inicio de sesión, use la herramienta Texto y una Sombra suave para el texto para obtener el siguiente resultado.

Paso 4 - El encabezado descendente

Dibuja una nueva forma rectangular redondeada y añade una sombra paralela suave; luego, coloca una imagen de película increíble. Ahora es el momento de crear un cuadro atractivo para describir la calidad del servicio y atraer a nuevos usuarios. Agrega una forma rectangular a la derecha, luego establece el relleno en 0% y agrega un estilo agradable, una superposición de degradado y una sombra paralela para crear un cuadro agradable, consulta los detalles a continuación. Agrega algo de texto, usa Dejavu Sans (30 pt, blanco) para el título y Lucida Sans (12 pt, #0b537f) para el párrafo. Dibuja una forma rectangular redondeada (radio 2px, color #6fc630), haz clic derecho en el rectángulo y rótalo, finalmente agrega una máscara de capa para obtener el siguiente resultado. Ahora establece el estilo para nuestra cinta como se muestra a continuación. Agrega dos botones de llamada a la acción, naranja y azul, a través de la herramienta Rectángulo... hazlos preciosos usando Bisel y relieve y Superposición de degradado como se muestra. Repite el proceso para crear un botón naranja. Agregue las descripciones de los botones, siéntase libre de usar una superposición de degradado suave (use un color verde para el botón verde, etc.) y una sombra paralela sutil para crear el siguiente efecto.

Paso 5 – El contenido

Esta sección es el núcleo de nuestro diseño, donde los visitantes pueden encontrar fácilmente información útil. Queremos crear un diseño simple de dos columnas con algunas imágenes y descripciones. Vea a continuación el resultado final. No quiero molestarlo con cosas redundantes. Está claro que puede utilizar las técnicas utilizadas para el encabezado para realizar los elementos de esta sección. ¿Algunos ejemplos? Las dos capturas de pantalla de la sección "Próximamente en Download.Movie" se realizaron utilizando los mismos pasos que hemos seguido durante la creación de la captura de pantalla para el encabezado inferior, solo hay una diferencia: debe agregar una superposición de color (de Estilos; color negro, Opacidad 30%). El botón "Reproducir" es una mezcla de dos formas como en el logotipo. Una vez que haya rasterizado el ícono, debe agregar solo una Sombra paralela negra y establecer el valor correcto de Opacidad para la capa (70%). Nuevamente, para los botones "Leer más" debe recordar lo que hemos hecho anteriormente con los botones de llamada a la acción, ahora en lugar de naranja, verde y azul, use gris claro. Solo un último consejo: utiliza la capa 'Cuadrícula de 12 columnas' y las guías de Photoshop para equilibrar tus contenidos.

Paso 6 – El pie de página

Añade tres nuevos rectángulos (colores #cfdcf8 y #162850) como se muestra a continuación para crear el fondo para el pie de página. Añade una superposición de degradado suave a la capa azul oscuro, luego rasteriza todas las capas y añade un efecto de ruido sutil. He decidido no añadir el efecto de ruido para el fondo de los créditos. Por último, añade algunas listas con enlaces útiles (para crear los puntos para los elementos de la lista, dibuja un pequeño círculo con la herramienta Elipse - mantén pulsada la tecla Shift, color #cfdcf8 - y establece la Opacidad aleste año luego duplica la capa) y un cuadro de descripción (para el botón "leer más" utiliza la misma técnica que acabamos de aplicar para los puntos, la fuente es Lucida Sans). Añade los créditos y la maqueta psd estará completa.

Conversión de PSD a HTML

Ahora es el momento de crear la estructura HTML/CSS, esto comienza entendiendo la estructura principal del diseño.

Paso 7 - Estructura HTML

Primero que todo tenemos que crear un index.html y style.css en blanco , luego, usando nuestro editor de texto favorito (escribo mi código a través del Bloc de notas), podemos inicializar nuestro documento HTML con Doctype, head y body.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//ES" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"html cabezatitleDownload.Movie - Una gran base de datos de películas/titlemeta http-equiv="tipo-contenido" contenido="texto/html; conjunto de caracteres=UTF-8" /link rel="hoja de estilo" href="estilo.css" media="pantalla" //cabezacuerpo/cuerpo/html

Ahora, de acuerdo con la estructura que se muestra en la imagen de arriba, podemos escribir la estructura HTML básica.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//ES" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"html cabezatitleDownload.Movie - Una gran base de datos de películas/titlemeta http-equiv="tipo-contenido" contenido="texto/html; conjunto de caracteres=UTF-8" /link rel="hoja de estilo" href="estilo.css" media="pantalla" /script src="jquery.js" tipo="texto/javascript"/script/cabezacuerpodivdivdiv/divdiv/divdivdiv/divdiv/divdivdiv/divdiv/div/div/div/div/divdiv/div/cuerpo/html

Agregue restablecer al style.css como se muestra a continuación.

/* Restablecimiento de CSS */html, cuerpo, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, conjunto de campos, formulario, etiqueta { margen: 0; relleno: 0; borde: 0; contorno: 0; tamaño de fuente: 100%; alineación vertical: línea base; fondo: transparente; }ol, ul { estilo de lista: ninguno; }:focus { contorno: 0; }

Paso 7 - Fondo, barra superior y encabezado

Extraiga las siguientes imágenes para reproducir la sección superior del sitio web tal como lo hemos planeado en la maqueta psd. Para el marcado de la barra superior y el encabezado, usamos listas desordenadas para el menú y h1 para el logotipo.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//ES" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"html cabezatitleDownload.Movie - Una gran base de datos de películas/titlemeta http-equiv="tipo-contenido" contenido="texto/html; conjunto de caracteres=UTF-8" /link rel="hoja de estilo" href="estilo.css" media="pantalla" /script src="jquery.js" tipo="texto/javascript"/script/cabezacuerpodivdivdivullia href="#"iniciar sesión |/a/lilia href="#"Registrarse/a/li/ul/divdivdivh1a href="#"Descargar.Película/a/h1/divullia href="#"Inicio/a/lilia href="#"Sobre nosotros/a/lilia href="#"Productos/a/lilia href="#"Soporte/a/li/ul/divdivdiv/divdiv/divdivdiv/divdiv/div/div/div/div/divdiv/div/cuerpo/html

Y ahora las reglas CSS. Nótese que agregamos el soporte para @font-face, importando la fuente Dejavu que usaremos en la sección del encabezado inferior.

* General */@font-face { familia de fuentes: 'DejaVuSansCondensedBook'; src: url('DejaVuSansCondensed-webfont.ttf') formato('truetype'); }cuerpo { fondo: #f9f9f9; fuente: 12px "Lucida Sans Unicode", sans-serif; altura de línea: 1.5em; color: #555; }a { decoración de texto: ninguna; }#top_background { fondo: url(imagenes/top_bck.jpg) repeat-x; }.main_container { margen: 0 automático; ancho: 960px; fondo: url(images/logo_bck.png) sin repetición; }/* Clases del contenedor principal */.top_bar { float: derecha; posición: relativa; superior: 0px; derecha: -11px; ancho: 101px; alto: 24px; fondo: url(images/login_bck.jpg) sin repetición; relleno izquierdo: 11px; }ul.login li { display: en línea; relleno-izquierdo: 2px; }ul.login li a { color: #f2f2f2; tamaño de fuente: 10px; }ul.login li a:hover { color: #89c0dd; }.header { clear: ambos; altura: 80px; margen inferior: 53px; }.logo { float: izquierda }.logo h1 a { display: block; width: 345px; height: 50px; background: url(images/logo.png) no-repeat; text-indent: -9999px; margin: 16px 0 0 40px; }ul.navigation { float: derecha; margen: 30px 40px 0 0; }ul.navigation li { display: inline; margin-left: 30px; }ul.navigation li a { color: #fff; tamaño de fuente: 14px; sombra de texto: 1px 1px 0px #155479; }ul.navigation li a:hover { decoración de texto: subrayado; }

Paso 8 - Cuadro principal, encabezado inferior y contenido

Ahora podemos agregar el encabezado hacia abajo con una presentación de diapositivas y la sección de contenido. Para lograr un control deslizante atractivo, usamos el complemento Cycle . Primero que nada, descargue el complemento jQuery y pegue el archivo 'jquery.cycle.lite.min.js' en la carpeta de nuestra plantilla, descargue jQuery y pegue también 'jquery.js' y luego debe agregar las siguientes líneas de código.

cabezatitleDownload.Movie - Una gran base de datos de películas/titlemeta http-equiv="tipo-contenido" contenido="texto/html; conjunto de caracteres=UTF-8" /link rel="hoja de estilo" href="estilo.css" media="pantalla" /script src="jquery.js" tipo="texto/javascript"/scriptscript type="text/javascript" src="jquery.cycle.lite.min.js"/script/cabeza

Para los elementos incluidos en el cuadro principal utilizaremos las siguientes imágenes. Ahora observe el marcado de toda la sección del cuadro principal.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//ES" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"html cabezatitleDownload.Movie - Una gran base de datos de películas/titlemeta http-equiv="tipo-contenido" contenido="texto/html; conjunto de caracteres=UTF-8" /link rel="hoja de estilo" href="estilo.css" media="pantalla" /script src="jquery.js" tipo="texto/javascript"/script/cabezacuerpodivdivdivullia href="#"iniciar sesión |/a/lilia href="#"Registrarse/a/li/ul/divdivdivh1a href="#"Descargar.Película/a/h1/divullia href="#"Inicio/a/lilia href="#"Sobre nosotros/a/lilia href="#"Productos/a/lilia href="#"Soporte/a/li/ul/divdivdivimg src="images/screenshot1.jpg" alt="captura de pantalla" /img src="images/screenshot1_2.jpg" alt="captura de pantalla" /img src="images/screenshot1_3.jpg" alt="captura de pantalla" //divdivh2La mejor manera de ver tus películas favoritas/h2spana href="#"/a/spanpEl uso del comercio se lleva a cabo de esta manera, estimulando y aprovechando las innovaciones en la transferencia electrónica de fondos y la gestión de la cadena de suministro./pspana href="#"/a/spanspana href="#"/a/span/divdivdivh3Entradas destacadas de esta semana/h3pQueremos ofrecer a nuestros miembros solo películas en DVD de alta calidad.Fácil de encontrar: lo mejor de la semana./pulliimg src="images/screenshot2.jpg" alt="captura de pantalla" /h4a href="#"La primera película de la semana/a/h4pEl grupo se lanza a la búsqueda del tesoro. Caminan hasta la casa del primo de Pete/pspandur. 110? | acción |este año | a href="#"más.../a/span/liliimg src="images/screenshot3.jpg" alt="captura de pantalla" /h4a href="#"La primera película de la semana/a/h4pEl grupo se lanza a la búsqueda del tesoro. Caminan hasta la casa del primo de Pete/pspandur. 110? | acción |este año | a href="#"más.../a/span/liliimg src="images/screenshot4.jpg" alt="captura de pantalla" /h4a href="#"La primera película de la semana/a/h4pEl grupo se lanza a la búsqueda del tesoro. Caminan hasta la casa del primo de Pete. /pspandur. 110? | acción |este año | a href="#"más.../a/span/li/ul/divdivh3Entradas destacadas de esta semana/h3diva href="#"img src="images/screenshot5.jpg" alt="captura de pantalla" //aspanacción | 12.04.2010/spanh4a href="#"Una nueva película llegará a nuestro sitio web/a/h4pRumpelstiltskin engaña a Sdrok, agobiado por la crisis de la mediana edad, para que se deje borrar de su memoria.existencia y se proyecta en una oscura alternativa.../pspana href="#"/a/span/divdiva href="#"img src="images/screenshot6.jpg" alt="captura de pantalla" //aspandrama | 04/12/2010/spanh4a href="#"Otra película descargable/a/h4pEl trabajo hace que una madre soltera se traslade a China con su hijo pequeño; en su nuevo hogar, el niño abraza el kung fu, que le enseña un maestro./pspana href="#"/a/span/div/div/div/div/div/divdiv/div/cuerpo/html

Ahora activa el control deslizante agregando las siguientes líneas de código justo encima de la etiqueta >/body .

script tipo="texto/javascript"$(documento).ready(función() {    $('.slide').ciclo({fx: 'desvanecerse',Velocidad: 1500,tiempo de espera: 4500});});/script

Es hora del estilo.

.main_box { borrar: ambos; }.slide { fondo: #fff; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; -moz-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -khtml-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -webkit-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); ancho: 560px; alto: 274px; mostrar: bloque; flotar: izquierda; margen inferior: 40px; }.slide img { relleno: 10px; }.tagline { fondo: url(images/slog_bck.png) sin repetición; flotante: izquierda; ancho: 370px; margen: 25px 0 0 30px; }.tagline h2 { familia de fuentes: 'DejaVuSansCondensedBook'; color: #fff; sombra de texto: 1px 1px 0px #0f334f; tamaño de fuente: 23px; altura de línea: 26px; peso de fuente: normal; espaciado entre letras: -1px; ancho: 300px; relleno: 10px;}.tagline p { margen superior: 40px; relleno izquierdo: 10px; color: #0b537f; }.know_more_green a { ​​float: derecha; display: bloque; position: relativa; top: -55px; right: -6px; width: 86px; height: 74px; background: url(images/know_more_green.png) no-repeat; }.cta_browse a { pantalla: bloque; ancho: 168px; alto: 56px; fondo: url(images/cta_blu.jpg) no-repeat 0px 0px; flotante: izquierda; margen: 26px 0 0 10px;}.cta_browse a:hover { posición de fondo: 0px -56px; }.cta_signup a { display: block; width: 168px; height: 56px; background: url(images/cta_orange.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0 24px; }.cta_signup a:hover { posición de fondo: 0px -56px; }.content { clear: ambos; desbordamiento: automático; margen inferior:este año; }.left_content { ancho: 280px; flotante: izquierda; }.naranja a { color: #ed7d0f; }.verde a { color: #5a9e28;}.cian a { ​​color: #28819e; }.orange a:hover { color: #ff9e05; decoración de texto: subrayado; }.green a:hover { color: #74d82b; decoración de texto: subrayado; }.cyan a:hover { color: #2fb4e0; decoración de texto: subrayado; }.content h3 { tamaño de fuente:este año; color: #0b537f; peso de fuente: normal; borde inferior: 1px sólido #e0e0e0; relleno inferior: 10px; margen inferior:este año; }.left_content ul { margen superior: 25px; }.left_content ul li { borde inferior: 1px sólido #e0e0e0; relleno inferior: 8px; margen inferior: 15px; tamaño de fuente: 11px; altura de línea: 16px; color: #757474; }.left_content ul li img { float: izquierda; margen-derecho: 10px; }span.details { tamaño de fuente: 10px; color: #a8a8a8; }span.details a { color: #333; }span.details a:hover { decoración de texto: subrayado; }.right_content { ancho: 630px; flotante: izquierda; margen izquierdo: 50px; }.box_trailer { borrar: ambos; }.box_trailer img { fondo: #fefefe; relleno: 5px; -moz-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -khtml-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -webkit-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); flotante: izquierda; índice z: 100; posición: relativa; margen: 0 15px 30px 0; }span.meta_info { relleno: 1px 6px; color: #fefefe; índice z: 99; margen superior: 18px; posición: relativa; superior: 8px; izquierda: -15px; tamaño de fuente: 10px; }.meta_green { fondo: #5a9e28; }.meta_orange { fondo: #ed7d0f; }.box_trailer h4 { tamaño de fuente: 16px; peso de fuente: normal; margen:este año 0 10px 0; }span.trailer_more a { display: block; width: 83px; height: 19px; background: url(images/more.jpg) no-repeat 0px 0px; float: right; margin-top: 10px; }span.trailer_more a:hover { posición de fondo: 0px -19px; }

Paso 9 – El pie de página

Finalmente creamos el pie de página con tres listas de enlaces útiles, un recuadro con una pequeña descripción y algunos créditos. Usamos solo la imagen para el fondo. La estructura HTML para el pie de página.

divdivdivh3Recursos para ti/h3ullia href="#"Explora nuestra base de datos/a/lilia href="#"Lea nuestra revista/a/lilia href="#"Oportunidades de trabajo/a/lilia href="#"Soporte/a/li/ul/divdivh3Nuestra red/h3ullia href="#"Descargar.TvSeries/a/lilia href="#"Descargar.Música/a/lilia href="#"Descargar.Libro/a/lilia href="#"Descargar aplicaciones/a/lilia href="#"Descargar.Juegos/a/li/ul/divdivh3Conéctate con nosotros/h3ullia href="#"Twitter/a/lilia href="#"Facebook/a/lilia href="#"Feed de amigos/a/li/ul/divdivh3Nuestra misión/h3pQueremos ofrecer únicamente películas en DVD de alta calidad a nuestros miembros.De alta calidad y fácil de encontrar: lo mejor de la semana./pspana href="#"Lea más sobre nosotros/a/span/div/divdivppor  - Copyright ©este año. Una plantilla premium./p/div/div

Utilice las siguientes líneas de código CSS para mejorar el estilo del pie de página.

/*Pie de página*/.footer { fondo: url(images/foot_bck.jpg) repeat-x; claro: ambos; }.foot_cont { altura: 218px; margen: 0 automático; ancho: 960px; }.foot_col { float: izquierda; ancho: 220px; margen: 45pxeste año 0 0; }.last_col { margen derecho: 0px; ancho: 240px; }.foot_col h3 { color: #cfdcf8; tamaño de fuente: 14px; peso de fuente: normal; }.foot_col ul { margen: 10px 0 0 10px; }.foot_col ul li { relleno: 4px 0 4pxeste año; fondo: url(images/list.png) sin repetición 0px 7px; }.foot_col ul li a { color: #f1f3f8; tamaño de fuente: 12px; }.foot_col ul li a:hover { color: #89c0dd; }.foot_col p { color: #f1f3f8; margen superior: 10px; }span.about_but a { color: #cfdcf8; relleno: 2px 5px; fondo: #3e5077; -moz-border-radius: 3px; margen superior: 10px; flotante: derecha; tamaño de fuente: 10px;}span.about_but a:hover { fondo: #4e6188; color: #fff; }.creditos { claro: ambos; fondo: #cfdcf8; margen superior:este año; }.creditos p { alineación del texto: centro; tamaño de fuente: 11px; color: #1c3059; relleno: 8px; }

¡Buen trabajo, amigos! Acabamos de crear nuestro diseño web profesional y atractivo.

DESCARGAR LOS ARCHIVOS FUENTE

[hidepost] [descarga format="1"] [/hidepost]Conviértete en miembro Premium y obtén acceso ilimitado a archivos fuente y recursos premium por solo $7 al mes. Haz clic aquí para obtener más información .