Cómo pasar de PSD a HTML-CSS paso a paso
03. ago, 2010 
34 Comentarios
Bueno gente, este es el primer tutorial que escribo para mi blog, y la verdad estuve mucho tiempo pensando sobre qué escribir, qué es lo que les puede llegar a interesar, así que me dediqué a leer varios post de otros blogs, comunidades y foros, y en la mayoría de los casos se pedían manuales o tutoriales sobre como convertir nuestros PSD (o ajenos) a HTML con hojas de estilo CSS, tutoriales y videotutoriales realmente sobran, pero difícilmente en nuestro idioma, así que de esto se va a tratar este post, trataré de ir paso a paso para que puedan seguirme, igualmente dejo adjunto el código.
¿Demasiada introducción? Sí, tienen razón, manos a la obra!
Vamos a utilizar un PSD gratuito que pueden descargar desde aquí: http://www.bevelandemboss.net/website-template-crisp-presentation como resultado buscamos algo como la siguiente imagen.
Igualmente pueden descargar una copia del PSD con las secciones marcadas que les dejo acá.
Queremos llegar a esto:
Primero que todo, debemos tener claras las secciones del sitio, para eso dibujo sobre el diseño las secciones y les doy el nombre, nos quedaría algo así:
Una vez que tenemos bien claras las secciones pasamos a crear las carpetas a donde estarán nuestros archivos:
El HTML, que quedaría así:
<body> <div id="contenedor"> <div id="header"> </div><!-- Fin de header --> <div id="slider"> </div><!-- Fin de slider--> <div id="principal"> <div id="contenido"> </div><!-- Fin de contenido --> <div id="sidebar"> </div><!-- Fin de sidebar --> </div><!-- Fin de principal --> <div id="footer"> </div><!-- Fin de footer --> </div><!-- Fin de contenedor --> </body> </html>
Pasemos a recortar las imágenes…
Empecemos con el fondo, podemos ver que es una imagen que se repite a lo ancho de la página, entonces usamos la herramienta de selección en photoshop (atajo M) y hacemos una selección de 11px de ancho por 1200px de largo exactamente como muestra la siguiente imagen, vamos a Archivo–>Guardar para web y dispositivos (File–>Save for Web and Devices si tenemos el photoshop en inglés) y lo guardamos como body_bg.jpg:
Ahora recortamos el logo, yo lo hice de 201×51 pixeles y lo guardé como logo_bg.jpg no lo guardé con transparencia (png) ya que el fondo es blanco y no lo necesitamos.
Pasamos al menú top, como vemos tiene un fondo en grandiente y divisores, para el fondo recortaremos una sección de 1×49 pixeles y la guardamos como nav_top_bg.jpg, al recorte lo hacemos como muestra la siguiente imagen:
Ahora debemos cortar los divisores, el recorte será muy parecido, pero esta vez de ancho serán 2px y de alto la misma que el anterior (49px) y le daremos el nombre de separa_nav_top_bg.jpg, lo recortamos así:
Al slider no lo haremos con jQuery, lo dejaremos para el próximo tutorial, ya que quiero focalizarme en la maquetación de un sitio ahora, así que cortaremos el slider completo, incluyendo los botones, lo salvamos como dummy_slider.jpg con una medida de 847×97 pixeles.
Ahora debemos cortar cada uno de los íconos del menú dentro de la sección de contenido, cada una de las tres imágenes tiene un tamaño diferente, todas en PNG-24 para respetar la transparencia en gradiente:
Por otro lado, ocultamos los íconos y recortamos el fondo completo del menú, con una medida de 596×75 pixeles lo guardamos como bg_menu_contenido.jpg como verán, los nombres de las imágenes las hago lo más intuitivo posible, para después con sólo leer el nombre recordar y saber a qué sección pertenecen, les debería quedar algo así:
Ahora recortaremos las imágenes que se muestran en la sección “What we do the best” con un tamaño de 102×102 pixeles las guardé como prev01.jpg y prev02.jpg respectivamente.
Por último recortamos un triangulito de la sección que muestra los datos de contacto en la página, como verán es un tríangulo q se repite a lo alto según el tamaño del div que lo contenga, me queda una imagen de 12×11 pixeles a la cual le puse el nombre de direccion_bg.jpg, podría haberla guardado como png, pero no me pareció relevante ya que no creo cambiar el fondo de color, muestro como lo recorté:
Les debería quedar algo así en la carpeta imgs:
Comencemos con el CSS:
Creamos un archivo style.css dentro de la carpeta css que habíamos hecho antes.
Yo personalmente utilizo el Notepad++ para escribir código, es rápido, liviano y GRATIS!, lo pueden descargar de acá: http://notepad-plus-plus.org/ igualmente pueden utilizar el que quieran, el resultado final es indiferente del soft utilizado para hacerlo.
Empecemos con un reset, yo utilizo el de Eric Meyer: http://meyerweb.com/eric/tools/css/reset/ esto es para poner los valores de márgenes, rellenos en cero, para que todos los navegadores interpreten nuestra página de igual manera, copiamos y pegamos el código de la página anterior y lo pegamos en nuestro CSS.
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
line-height:1;
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:'';
content:none;
}
/*remembertodefinefocusstyles!*/
:focus{
outline:0;
}
/*remembertohighlightinsertssomehow!*/
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
/*tablesstillneed'cellspacing="0"'inthemarkup*/
table{
border-collapse:collapse;
border-spacing:0;
}
Ahora pasaremos a darle forma a cada div que creamos anteriormente en el HTML, colocando las respectivas alturas y posiciones, la imágen de las secciones coloreadas puede ayudarnos mucho en esta etapa.
/*===========*/
/*=Maquetaciýn */
/*===========*/
#contenedor{
width: 960px;
margin: 38px auto 0 auto;
}
#header{
height: 109px;
}
#slider{
height: 197px;
}
#principal{
height: 758px;
}
#contenido{
/* width: 645px; Esto es sin posisionar los textos y contenidos, en realidad tiene un margin-left de 73px*/
width: 572px;
float: left;
}
#sidebar{
width: 315px;
float: left;
}
#footer{
/* height: 98px; Hay que restarle los 40px del padding top que le agregamos*/
height: 58px;
}
Ahí tenemos una maquetación muy básica de las secciones creadas en el HTML, ahora debemos completarlo, así que dejemos por un rato el css y rellenemos nuestra página de contenido.
Sección de header
<div id="header"> <h1><a href="#">crisp presentation</a></h1> <ul id="nav_top"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- Fin de header -->
Al logo lo hacemos con un texto con la etiqueta h1 que luego reemplazaremos con la imágen recortada. El menú es simplemente una lista desordenada de 4 elementos.
<div id="slider"> <div class="img_slider"></div> </div><!-- Fin de slider-->
Aquí como mencioné anteriormente debería ir el slider que explicaré como colocarlo en el próximo tutorial, por ahora solamente creamos un div con la clase img_slider que será ocupado por el recorte que hicimos del mismo.
<div id="principal"> <div id="contenido"> <h2 class="titulo">Get Ready for the Crisp!</h2> <p class="desc">Sed mi ipsum, gravida eget volutpat nec, auctor et nisl. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <a href="#">orci luctus et.</a></p> <div class="menu_contenido"> <ul class="nav2"> <li class="ideas"><a href="#">Ideas.</a></li> <li class="execution"><a href="#">Execution.</a></li> <li class="passion"><a href="#">Passion.</a></li> </ul> </div>
Comenzamos con la sección #principal la cual tendrá nuestro #contenido y #sidebar. El contenido contiene un título que decidí etiquetarlo en h2 un texto introductivo y el segundo menú que será reemplazado por las imágenes más adelante cuando nos toque darle estilo. Continuemos con la segunda parte de nuestro #contenido…
<div class="clear"></div> <h2 class="titulo">What we do the best.</h2> <div class="preview"> <a href="#"><img src="imgs/prev01.jpg" alt="Prev01" /></a> <h3>Sed mi ipsum, gravida eget</h3> <p class="desc">Maecenas aliquet, lacus quis consectetur fringilla, nisi felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <a href="#">orci luctus et.</a></p> </div> <div class="preview"> <a href="#"><img src="imgs/prev02.jpg" alt="Prev02" /></a> <h3>Sed mi ipsum, gravida eget</h3> <p class="desc">Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi. Vestibulum ante ipsum primis in faucibus <a href="#">orci luctus et.</a></p> </div> </div><!-- Fin de contenido -->
Lo primero que encontramos es un div vacío con la clase “clear”, a esto lo explicaré luego cuando veamos el CSS.
Como podemos ver se repite la clase titulo que da estilo al H2, esto es porque ambos títulos son iguales. Acá realicé una “caja” con la clase de ‘preview’ que tiene una imágen, un título y su descripción, luego copio y pego el div entero para y solo cambio la imágen a mostrar (prev02.jpg). Ahora pasemos al #sidebar…
<div id="sidebar"> <h3>Amazing News</h3> <div class="noticia"> <p><a href="#">Integer vel nulla felis.</a> (24.3.2008)</p> <p class="prev_noticia">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nec mauris sed quam pulvinar porta. In quam erat, hendrerit at </p> </div> <div class="noticia"> <p><a href="#">Integer vel nulla felis.</a> (24.3.2008)</p> <p class="prev_noticia">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nec mauris sed quam pulvinar porta. In quam erat, hendrerit at </p> </div> <div class="linea_divisora"></div> <h3>How to contact us</h3> <ul class="direccion"> <li>30 Leicester Square.</li> <li>City, London.United Kingdom.</li> <li>WC2H 7LA.</li> <li>Telephone +44 (0)20 7766 6600</li> <li>Email: <a href="#">[email protected]</a></li> </ul> </div><!-- Fin de sidebar -->
Acá no hay mucho que decir, ya que predomina el texto, repetimos el div con la clase “noticia” dos veces, vemos tambien la clase “prev_noticia” que daremos estilo luego y a la dirección la resuelvo por medio de una lista desordenada en la que cada li es un elemento de la dirección o como contactarlos, al ul le damos la clase “direccion” para luego poder darle el fondo que recortamos antes y el resto de estilos. Ya falta muy poco, lo más simple, sólo queda hacer el Footer, sigamos….
<div id="footer"> <p class="copyright">(c) Cum sociis natoque penatibus et magnis dis parturient montes,</p> <p class="autor">Dum sociis natoque penatibus et</p> </div><!-- Fin de footer --> </div><!-- Fin de contenedor -->
¿Complicadísimo no? jajaja, la verdad que es muy simple, solamente texto, pero igualmente debemos darle sus clases para poder ubicarlos luego en la página. Con esto damos por terminado el HTML, deberían ver en su navegador algo muy feo sin estilos, ni colores ni coherencia, así que manos a la obra nuevamente, tomate 5 minutos, preparate un café y volvé que seguimos con el estilo….
Aplicando CSS
Bueno….voy a tratar de explicar la máxima cantidad de puntos, tal vez a alguien más experimentado le parezca aburrido, pero siempre es bueno refrescar y afirmar los conocimientos.
Empecemos por los estilos “fijos”, son los que se repiten varias veces en el html, recordemos que aplicamos el reset anteriormente.
.clear{
clear: both;
}
body{
background:url(../imgs/body_bg.png) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 10pt;
color: #7b5a47;
}
a{
color: #7b5a47;
font-weight: bold;
}
Como ven aquí le doy estilo a lo que usamos anteriormente (el div vacío con la clase clear), lo que hace esto es “limpiar” cualquier float que quede del div anterior, se puede usar clear: left, right o both que sirve para ambos lados y es la que uso siempre.
Ahora al body le aplicamos el fondo repetido en el eje x, tamaño y tipo de letra predominante en la página y el color. Como se podrán dar cuenta el tamaño predominante no es 10pt sino 12pt según photoshop, pero me gusta siempre empezar con 10pt y después variar el tamaño asignandole valores en em (se van a dar cuenta de que les hablo más adelante) 1em equivale a la medida de la letra “m” del tamaño de letra que estemos utilizando (osea una “m” de 10pt).
Como se puede apreciar en la página todos los enlaces están en negrita, es por eso que el estilo que le damos a los links es bold y el color #7b5a47; que vendría a ser un marrón oscuro.
Pasemos al header…
h1.logo{
background: url(../imgs/logo_bg.png) no-repeat;
width:201px;
height:51px;
float: left;
margin-left:65px;
}
h1.logo a{
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
}
Reemplazamos al H1 con clase logo por la imagen recortada, le asignamos el ancho y alto exacto de la misma, le damos un margen izquierdo para que no quede “pegado” al borde y lo flotamos a la izquierda para que el menú top no quede abajo sino que se ubique a la derecha del logo.
Luego decimos que todos los enlaces (a) que se encuentren dentro de un H1 con clase logo se muestre como bloque y ocupen el máximo de ancho y alto posible (osea los valores de su parent que son 201×51 pixeles). con la propiedad text-indent: -9999px; enviamos el texto fuera de la pantalla, esto es para que se vea sólo la imágene que colocamos y el texto exista pero no se vea.
Pasemos al menú…
#nav_top{
float:right;
width: 419px;
height: 19px;
padding: 15px 0px 15px 35px;
margin-right: 20px;
text-align: center;
background: url(../imgs/nav_top_bg.png) repeat-x;
border: 1px solid #ded5cf;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#nav_top li{
display: block;
float: left;
margin-right: 20px;
padding-right: 20px;
height: 35px;
background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom;
text-decoration: none;
}
#nav_top li:last-child{
background: none;
}
Primero al menú lo flotamos hacia la derecha, le asignamos las medidas y repetimos en x el fondo que recortamos antes, le damos el bordeado sólido de 1px con el color correspondiente.
Como pueden ver le estamos dando un redondeado a las puntas del menú, con la propiedad border-radius lo hacemos, para que lo pueda interpretar mozilla añadimos -moz-border-radius: 10px y para que la gama de wbekit lo muestre como queremos agregamos -webkit-border-radius: 10px;
#nav_top li significa que afectaremos TODOS los li que estén dentro de un elemento con id=nav_top: Los hacemos bloques y los flotamos a la izquierda para que esté uno al lado del otro, luego damos un margin-left y un padding-left iguales de 20px esto es para que entre cada uno de ellos exista la misma separación.
background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom; con esto decimos que a cada elemento li agregue el divisor, que no se repita y que lo agregue a la derecha y abajo. Aquí vemos que sucede algo que no queremos, y es que el último elemento también tiene un divisor, cómo lo eliminamos?? con una pseudo-clase:
#nav_top li:last-child esto afectará solo al último elemento li que se encuentre dentro del div con id nav_top.
#nav_top li a{
font-size: 1.2em;
text-decoration: none;
}
#nav_top li a:hover,a:active{
color: #d17b00;
}
Ahora quitamos el subrayado de los enlaces que se encuentren en un li y a la vez en el div con id nav_top y le aplicamos el tamaño de 1.2em, osea que el tamaño de letra sea 1.2 “m” de 10pt…..se entiende? espero…
a:hover -> Cuando el mouse pasa por encima del enlace el color será #d17b00
a:active -> Cuando es presionado el enlace el color será #d17b00
Slider…..muy simple
/*
Este sólo es el estilo para posicionar la imágen del slider falso
ya que veremos luego cómo colocar un slider funcional usando jQuery
*/
.img_slider{
width: 847px;
height: 100%;
margin: 0 auto;
background: url(../imgs/dummy_slider.jpg) no-repeat;
}
Pasemos al contenido…
#contenido{
margin-top: 50px;
}
h2.titulo{
font-size: 1.4em;
margin-bottom: 25px;
}
.desc{
width: 480px;
line-height: 1.1em;
font-size: 1.1em;
}
Le damos un margen superior de 50px, al título un tamaño y un margen inferior para separar el texto descriptivo al cual le damos un ancho fijo de 480px, tamaño y una separación entre renglones de 1.1em.
.menu_contenido{
margin-top: 50px;
width: 596px;
height: 75px;
position: relative;
left:-25px;
background: url(../imgs/bg_menu_contenido.png) no-repeat;
margin-bottom: 40px;
}
.nav2{
display: block;
width: 685px;
height: 50px;
padding-top: 15px;
margin-left: 40px;
}
.nav2 li{
display: block;
float: left;
list-style: none;
margin-left: 10px;
padding-left: 10px;
}
.nav2 li a{
color: #523c2f;
text-decoration: none;
font-size: 1.2em;
letter-spacing: .1em;
}
Al cuadro q va a contener los 3 botones le damos su tamaño y el fondo que recortamos antes, como pueden ver tiene position relative, esto es porque quiero “empujar” un poco este cuadro, que salga del contenedor, lo saco -25px de izquierda con respecto a su parent (osea #contenido) Para los botones no hay mucho que explicar ya que se repiten las propiedades del menú anterior, cambian los valores. Podemos ver en el HTML que a cada li le dimos una clase diferente, esto es porque cada li muestra una imágen diferente con respecto al otro, al estilo lo podemos hacer así:
.ideas{
display: block;
height: 46px;
width: 152px;
padding-top: 18px;
background: url(../imgs/lampara.png) no-repeat;
}
.execution{
display: block;
height: 46px;
width: 166px;
padding-top: 18px;
background: url(../imgs/lapiz.png) no-repeat;
}
.passion{
display: block;
height: 42px;
width: 153px;
margin-top: 3px;
padding-top: 15px;
background: url(../imgs/corazon.png) no-repeat;
}
.ideas a{
padding-left: 80px;
}
.execution a{
padding-left: 50px;
}
.passion a{
padding-left: 60px;
}
Como cada imágen es diferente las medidas de ancho y alto varían de uno a otro, pero la idea es la misma, luego a cada enlace de cada uno de los li le damos un relleno izquierdo como para posicionar el texto como nos parezca adecuado.
Pasemos a la muestra de productos…
.preview{
margin-top: 45px;
}
.preview img{
border: 5px solid #c8bbab;
float: left;
margin-right: 24px
}
h3{
margin-bottom: 15px;
font-size: 1.3em;
}
Aquí no hay mucho que explicar, solamente que separamos la imágen del resto del texto, le damos un borde ancho, lo flotamos a la izquierda para que el texto que sigue no quede abajo de la imágen y al título un tamaño de 1.3em.
Sidebar
El sidebar es REALMENTE simple, hay mucha cantidad de texto y si entendieron lo anterior a esta sección la pueden hacer solos, igualmente explicaré paso a paso como vengo tratando de hacerlo, no sé a ustedes, pero amí ya se me terminó el café, voy por otro…
Segundo y creo que último café, si, ya falta poquito y terminamos.
#sidebar{
margin-top: 30px;
padding: 20px;
padding-left: 40px;
}
#sidebar p{
margin-bottom: 15px;
width: 240px;
line-height: 1em;
}
.noticia{
margin-bottom: 45px;
}
Como vemos aquí damos las dimensiones que contendrán las noticias y la dirección en la barra lateral, a esto lo logramos agregando un relleno de 20px pero uno de 40 del lado izquierdo, las noticias que agreguemos tendrán una separación inferior de 45px con respecto a la siguiente.
.linea_divisora{
border-bottom: 1px solid #d2cdbf;
margin-bottom: 45px;
}
Esto es sólo para crear la línea divisora entre las noticias y la dirección. Nada del otro mundo.
.direccion{
width: 200px;
background: url(../imgs/direccion_bg.jpg) repeat-y;
padding-left: 20px;
}
.direccion li{
padding-bottom: 3px;
}
La dirección se encuentra en un cuadro de un anchod e 200px y tiene un fondo de triangulitos que se repiten a lo alto y está posicionado por defecto a la izquierda, le damos un padding-left de 20px para que el texto no esté sobre el fondo.
Luego damos una separación inferior entre cada elemento li de 3px.
Footer…lo más fácil para el último.
#footer{
padding-top: 40px;
/* Esto afecta la sección Maquetación, está comentado.*/
}
.copyright{
float: left;
}
.autor{
float: right;
}
Algo para explicar?? naa, si llegaste acá entendiste todo supongo.
Espero que lo hayan logrado, cualquier duda o consulta no dejen de escribirme, igualmente si encuentran errores, o correcciones por hacer son SIEMPRE bienvenidas, estamos para aprender y evolucionar.
En el post que viene veremos como agregar el slider y configurarlo a nuestro gusto en el sitio creado.
Pueden descargarse la página del tutorial maquetada desde aquí.
No te olvides de agregar InteraccionDigital a tu feed RSS y de seguirme en twitter!!!!
Acerca del Autor
Ariel Iván Mariani, diseñador interactivo, con pasión por el diseño y el desarrollo web, escribe tutoriales para varias comunidades, recientemente abrió su blog Interaccion Digital para compartir conocimientos y aprender cada día más del mundo multimedia. Podés seguirlo vía Twitter y enterarte de los últimos posts y noticias.
Espectacular tutorial. Se agradece!!!
Esta muy bueno, y bien explicado
saludos =)
Excelente tutorial, pero no entiendo las partes que dicen ????
Gracias
Ya sé a lo que te referís, es un error mío al agregar un plugin para WP de Teitter, cada vez que agregaba un # lo tomaba como hashtag y te creaba el link, ahí lo desactivé fijate que ahora el código está limpio, gracias por avisar!
Excelente, muy buen tutorial hace rato que buscaba algo asi! solo un problemita IE 6 lo muestra al #sidebar debajo del #contenido. Te felicito Ariel un abrazo
saludos amigo
que es un psd disculpa soy nuevo en esto son plantillas una extension de archivo aclarame la duda por favor
PSD es la extensión con que se guardan los archivos de proyectos Photoshop, supongamos: mi_pagina_web.PSD va a ser un archivo en donde tengo todo el diseño realizado en photoshop, a ese PSD depués puedo exportarlo a muuuuchos otros formatos diferentes: JPG, GIF, PNG, BMP, etc.
saludos ariel gracias por tu pronta repuesta vi tu video esta muy bueno el segundo se colgo a la mitad no se que paso hoy tratare de verlo (programacion web desde cero) exitos
Muy groso el tutorial,sos un master,segui hací,justo lo que necesitaba
Hola! soy un enamordo del diseño web.
Muchas gracias, has hecho un fántastico trabajo en este tutorial, te explicas como un libro abierto.
Aunque no lo he leido todo aún creo que me será de gran ayuda, mañana lo leeré a fondo.
Mi barrera es superar el entendimiento de pasar un PSD > XHTML & CSS, que se me hace un mundo y me fustra eb ocasiones.
De nuevo muchas gracias!
Ya leí todo detenidamente.
Muy bueno el tutorial, muy buen elaborado y explicado. Me encanta!
Una preguntita:
A los elemtos “ul” no los encierras en cajaS DIV.
¿Esto es porque se trata de un elemento de bloque y no lo necesita o porque razón?
Muchisimas gracias. Chao!
Otra pregunta que se me olvidó comentar.
Como es posible hacer el fondo del slider que ocupe el ancho total del navegador con el fono color crema, estando dentro de un div con el ancho de 847px?
Lo mire bien en el css y no veo nada que aplique esto. no se si me explico bien.
De nuevo, gracias.
Ya me respondo yo mismo, lo averigue.
Que despiste más tonto.
Eso lo hace el pattern de 1200px de height, si no recuerdo mal, que se repetira en x a lo largo de la pantalla.
vaya despiste…
Bueno, espero que pronto estes disponible y dés señales de vida, JEJE, para mostrarnos y compartir con los que te siguen tus fántasticos tutos.
Bye.
Hola! disculpá que no respondí antes, la verdad no pude darle mucha bola al blog ultimamente, me alegro de que solucionaste tu problema, prometo en las vacaciones volver con más interacción digital.
Hey bro muchas gracias! estuve buscando algo justo asi, muy bien explicado.
por la web estuve buscando y la verdad se encuentran cosas pero esto es de lo mejor, me gustaría q nos expliques lo del formulario de contacto que legue al correo personal o a uno empresarial.
como diseñador gráfico mil gracias!
Un excelente tutorial, espero puedas continuar elaborando mas tutoriales como este, talvez con un diseño más complejo y que haya submenus, es lo que se me complica, de antemano muchas gracias!!
No pasa pasa nada, lo primero es lo primero.
Hoy mismo tomé una ojeada un poco por encima para refrescar con respecto al maquetado ya que hice un psd de una web para practicar un poco el tema de la conversión de psd a xhtml y css y tube bastantes problemas.
Una ojeada más me ha dejado las cosas claras. El secreto esta en un buena Maquetación, la estructura básica que contendrá todo, con esto bien esquematizado luego sale todo poco a poco.
Gracias y muy Buenas tardes.
Maestro !
gracias por el tuto, cuanta falta que hacen este tipo de explicaciones !
hay muchos tutos de este tópico fundamental del desarrollo web, pero casi todos los que conocí estaban el inglés,
un saludo
Martín
Tenia mucho tiempo buscando un tutorial asi..!!! Gracias
Escucha veo que este tutorial les va a dar muchos problemas a las personas que estan comensando con esto de la maquetacion a HTML tu estas avanzando muy rapido con esto y las partes donde se recortan las fotos no se entienden para nada ( por lo menos ese fue mi caso ) asi que por favor te agradeceria mucho que hicieras otro tuto si es posible pero mas detallado sobre todo con lo de las fotos ya que nunca pude encontrar esas imagenes.
Lo mejor seria que pusieras a disposicion las imagenes para todos comenzar desde ahy.
De esta manera todos tendremos los materiales como si un projecto profesional fuese.
Me despido esperando tu Respuesta.
Gracias.
Hola Oscar, la verdad que me parece extraño lo que me decís, según comentarios anteriores de este post a nadie le dio problemas el cortado de imágenes; por lo que comentás no creo que hayas visto mis videotutoriales sobre diseño y maquetación a donde se muestran PASO A PASO el diseño, recorte y maquetación de una página web.
Si con esos videos siguen tus dudas sin ser aclaradas envíame un mensaje con la consulta y con todo gusto la respondo.
Saludos y que tengas un excelente día.
Ariel
No recuerdo cómo ni porqué he llegado aquí… pero ya que estamos…
Antes de nada deberías añadir al título del artículo: «para diseños fijos (inamovibles de la muerte)», que es básicamente lo que uno hace cuando comete el delito de pasar un diseño web desde Photoshop.
Photoshop es para lo que es, no para diseñar un sitio web, y menos hoy en día con versiones impresas, móviles, netbooks (resoluciones mil)… con lo que cuesta el ancho de banda y tanta imagen…
Y si uno no sabe maquetar ni hacer su boceto directamente en html (como cada vez más expertos promulgan y aconsejan), es que no sabe y punto. Se es un diseñador gráfico —que eso está muy bien— pero no se es un diseñador web, no mezclemos churras con merinas.
—
Este desconocimiento queda patente en cuestiones como por ejemplo poner a un flotante borde y margen (solo te falta el espaciado para liarla del todo); es la mezcla perfecta para que los diferentes navegadores empiecen a bailar con tu diseño (diferentes tipografías, resoluciones, zoom…, como p.ej. ya te han dicho que falla en IE6).
En cambio, si se usan porcentajes y tamaños relativos —que también es cierto que se puede hacer con PS— aplicando espaciado en función a eso, además de posicionamiento relativo y absoluto, todo va de perlas… porque sí; porque es imposible que sea de otra manera, porque el 10% de una medida, sea la que sea, es el 10%, para todos
…pequeños detalles del diseño web que parecen ser, por lo visto, inéditas para diseñadores gráficos ^^
Por eso es una muy muy mala idea, hoy y siempre, lo que propones (lo que propones tú y medio mundillo del aficionado, claro).
Saludos.
Hola Covi, respeto tu opinión, pero no la comparto, es muy fácil criticar el trabajo de alguien.
Estoy de acuerdo que hay errores en el código, y seguuuuro va a haber muchos más en los futuros posts que haga, te agradezco que los remarques, me gustaría nada más que lo hagas de otra forma.
Con respecto al diseño de la plantilla en PSD y luego a HTML es decisión de CADA UNO, si un cliente me pide un diseño, amí me parece más facil pasarle un JPG generado desde el PSD y modificarlo luego según los cambios o requerimientos del cliente, una vez el cliente satisfecho paso a HTML/CSS, repito es MI forma de trabajar, aparte, nunca está de más aprender una herramienta más verdad? photoshop no muerde y en mi caso me sirve muchísimo para ir pensando o viendo como quedaría el sitio en el futuro, primero la estructura con lapiz y papel, después PSD y si le gusta al cliente código.
Como verás en themeforest por ejemplo la mayoría de los templates que se venden (creados el 90% por EXPERTOS) vienen con el PSD adjunto, se vé que ellos no promulgan ni aconsejan lo que vos decís….
Bienvenido a mi blog! Espero sigas disfrutando de mis posts y espero tus aportes.
Disculpa la molestia pero digamos que soy principiante en la parte de CSS y queria sabes si las propiedades de width y height
se pueden definir ambas en una funcion, por ejemplo:
#sidebar{
width: 315px;
height: 655px; /*aprx*/
float: left;
}
Por supuesto que se puede, vos mismo mostrás como. También podés definir hasta un alto mínimo, y que se vaya agrandando de acuerdo al contenido que tenga. Mirá:
Hola Ariel, la verdad que este tutorial está genial. Muchas gracias por tomarte la molestia de armarlo. Como la mayoría del buen material está en inglés, es un gusto encontrar algo tan claro y bien explicado en nuestro idioma.
Ya que me gusta leer en papel, voy a tomarme un pequeño gran atrevimiento para con vos. Sería posible que subieras alguna versión en pdf para impresión? Tengo 2 programitas para “imprimir” webs en pdf y los dos me están haciendo un desastre bárbaro cuando intento imprimir este tuto. Y copiar y pegar en el word también.
Bueno, terminado el segmento de “caradurismo mangueador” (jaja), te vuelvo a felicitar por la web en general, hay muy buen material.
Un abrazo!
Hola Ariel
Muy bueno tu blog.
Yo tambien soy desarrollador web.
Te pido permiso para compartir contigo y con todas las personas, mi blog de maquetacion web llamado “PSD a HTML Paso a Paso”.
Aqui lo dejo:
http://www.psdahtmlpasoapaso.com/blog
Saludos!
Cristian
Excelente!!! Te felicito!!!
Me viene de 10 el Tut!
Abrazo
Justo lo que andaba buscando, buena información, un saludo.
Buenas este post , esta en otras webs.
creo que el post esta copiado.
Hola muy buen tutorial gracias.
Hola… muchas gracias por tu explicación, la verdad nunca había creado páginas web con css ,hoy comence a aprender con tu tutorial y estoy feliz de haberlo logrado… millones de gracias