Tutorial: Cómo convertir un diseño web minimalista de Photoshop a HTML
Agregando estilos y construyendo el HTML
En mi último artículo, "Guía: Crea tu diseño web minimalista en Photoshop y conviértelo en HTML", comenzamos a trabajar en la división del archivo PSD y creamos imágenes de fondo para la página HTML. También comenzamos a escribir el código HTML base (index.html) y algunos estilos para establecer las diferentes secciones (styles.css). Nuestros estilos iniciales establecen la sección principal, el contenedor, la columna de la barra lateral izquierda y la columna de la barra lateral derecha, que también incluye las secciones de contenido destacado con una imagen y dos artículos destacados. La descarga contiene todos los archivos utilizados en esta demostración.
Agregando estilos y construyendo el HTML
Continuando desde donde lo dejamos en el artículo anterior, vamos a agregar más estilos para las imágenes restantes, agregar el texto y enlace para la sección de navegación, títulos para las secciones de artículos destacados y contenido destacado. Figura A muestra cómo se ve nuestro archivo index.html en este punto, como se muestra en Chrome 17.0.9:
Figura A
Empecemos agregando la imagen del encabezado en la parte superior izquierda de la sección de encabezado. Para que la imagen se vea, agregaremos varias líneas de estilos al archivo styles.css y también agregaremos contenido textual al archivo index.html. Mantuve el borde sólido de 1 píxel rojo por ahora, pero se eliminará a medida que avancemos en el tutorial. El archivo headername.gif se llama como una background-image en una URL, la altura se establece en 100px, el margen superior se establece en 50px, la fuente, el tamaño y el color se establecen en Tahoma, 14px y #4b6262 respectivamente, y luego un relleno superior de 18px y un relleno izquierdo de 15px completan el código de estilos agregados al archivo styles.css, que se muestra a continuación:
Código de estilos para el encabezado:
#header {
border:1px solid red;
background-image:url(images/headername.gif);
background-repeat:no-repeat;
height:100px;
margin-top:50px;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:normal;
color:#4b6262;
padding-top:18px;
padding-left:15px;
}El código HTML agregado al encabezado del archivo index.html:
<header id="header"> <h1>El eslogan o frase de subencabezado</h1> </header>
Figura B muestra las actualizaciones anteriores como se muestra en Chrome 17.0.9:
Figura B
A continuación, crearemos nuestra barra de búsqueda y el botón de envío para la última parte de la sección de encabezado. Antes de comenzar con el código, necesitaremos capturar la flecha del botón de envío que creamos en el archivo PSD original (consulte la descarga). Usando los mismos procedimientos que en el primer segmento del tutorial, abriremos el archivo PSD en Photoshop y haremos que las capas del botón sean las únicas capas visibles, lo recortaremos para ajustarlo a la flecha y el degradado, lo dimensionaremos a aproximadamente 50×35 píxeles y luego lo guardaremos como un gif listo para la web y lo llamaremos search_button.gif, guardándolo en el directorio de imágenes web:
Construye tu propio sistema operativo con Raspberry Pi: ¡Explora tu creatividad!Figura C
El código para la barra de búsqueda incluye varias adiciones de CSS3 para degradados, borde redondeado, sombra de caja y fondos. Se muestran a continuación las actualizaciones al archivo styles.css:
Código de estilos del formulario de búsqueda:
/* Estilos del formulario de búsqueda */
#form {
margin-left:700px;
}
.search {
display: inline-block;
zoom: 1; /* display:inline-block para IE7 */
*display: inline;
border: solid 1px #d2d2d2;
padding: 1px 1px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #b9c7c7;
background: -webkit-gradient(linear, left top, left bottom, from(#b9c7c7), to(#ededed));
background: -moz-linear-gradient(top, #b9c7c7, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9c7c7', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9c7c7', endColorstr='#ededed'); /* ie8 */
}
.search input {
font-family:Tahoma, Geneva, sans-serif;
font-size:22px;
color:#e0e9e9;
}
.search .field {
background: #b9c7c7;
padding: 0px 2px 3px 12px;
width: 190px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.search .button {
margin-bottom:-10px;
}Y la sección y el código <form> HTML se agregan a la sección del encabezado justo debajo del subtítulo <h1> en el archivo index.html como se muestra a continuación:
<section id="form">
<form class="search">
<input class="field" type="text" value="Buscar..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Buscar...';}" />
<input class="button" value="" type="image" src="images/search_button.gif"/>
</form>
</section>Figura D muestra la sección de encabezado resultante tal como se muestra en Chrome 17.0.9:
Figura D
La funcionalidad de búsqueda incluida en el <form> de este tutorial es solo con fines de demostración y no funcionará realmente. (Se necesitaría una conexión de base de datos para obtener resultados de contenido buscables).
A continuación, agregaremos los estilos y el HTML para la barra lateral de navegación izquierda con el contenido textual "Acerca de", "Blog", "Productos", "Servicios" y "Contacto". Todos los hipervínculos apuntarán a páginas "falsas" para que este tutorial se siga desarrollando. Sin embargo, si deseas enlazar a subpáginas reales, solo necesitas usar el archivo index.html final como plantilla y cambiarles el nombre según sea necesario para las páginas restantes. Primero, el HTML para la navegación se coloca en una lista no ordenada y es el único código agregado a la sección de la barra lateral izquierda como se muestra a continuación:
<section id="main_content"> <section id="left_sidebar"> <ul> <li><a href="#">Acerca de<br/> <li><a href="#">Blog<br/> <li><a href="#">Productos<br/> <li><a href="#">Servicios<br/> <li><a href="#">Contacto
</ul>
</section>
Cómo crear encuestas en línea con Google FormsY se agregan los estilos CSS a la barra lateral izquierda para anclas y elementos de lista, con una modificación en el margen establecido en -35px para la alineación.
#left_sidebar {
margin-top:10px;
margin-left:-35px;
float:left;
top:0;
left:0;
width:200px;
min-height:750px;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#left_sidebar a, li {
font-family:Tahoma, Geneva, sans-serif;
font-size:22px;
font-style:normal;
font-weight:600;
color:#4b6262;
text-decoration:none;
list-style:none;
}Figura E muestra las actualizaciones resultantes para la sección de navegación tal como se muestra en Chrome 17.0.9:
Figura E
A continuación, agregaremos los estilos para nuestras áreas de contenido destacado, que están separadas en las subsecciones izquierda y derecha dentro de la sección de la columna derecha y justo debajo de la imagen destacada. Las adiciones de estilos a la columna derecha incluyen fuente y algunos efectos de sombra de texto CSS3 para los títulos destacados y una fuente separada para los artículos destacados. Los estilos adicionales que se agregaron al archivo style.css se muestran a continuación:
Código de estilos para los títulos y artículos destacados:
#right_column .feature_title {
font-family:Tahoma, Geneva, sans-serif;
font-size:22px;
font-weight:500;
color:#1f2626;
margin-top:-5px;
text-shadow: 2px 1px 2px #656e6e;
filter: dropshadow(color=#656e6e, offx=2, offy=1);
}
#right_column .feature_article {
font-family:Verdana, Geneva, sans-serif;
font-size:14;
font-weight:normal;
}El código HTML se agrega al archivo index.html de la siguiente manera:
<article id="left_feature"> <p class="feature_title">Título de contenido destacado 1</p> <p class="feature_article">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </article> <article id="right_feature"> <p class="feature_title">Título de contenido destacado 2</p> <p class="feature_article">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </article>
Figura F muestra el resultado con las secciones de artículos destacados tal como se muestra en Chrome 17.0.9:
Figura F
Figura G muestra la página web tal como está con las últimas actualizaciones de HTML y CSS agregadas y con los bordes rojos eliminados de las secciones de encabezado y contenedor, pero el borde rojo de la sección del pie de página se mantiene para diferenciarlo de las secciones que se han convertido.
El 66% de las empresas aún no han migrado de Windows XPFigura G
El tercer y último segmento de la serie de tutoriales "Minimalist PSD to HTML" concluirá agregando la sección de pie de página, incluido la creación de un degradado con estilos CSS3.
En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Software empresarial, allí encontraras muchos artículos similares a Tutorial: Cómo convertir un diseño web minimalista de Photoshop a HTML , tenemos lo ultimo en tecnología 2023.
Artículos Relacionados