diseño web desde 0 photoshop css maquetacion

Vdeo explicado del diseo web con PhotoshopVdeo con explicaciones y a una velocidad adecuada para aprender a disear una web utilizando Photoshop.

Por Miguel Angel AlvarezPublicado: 02/4/09

Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Hace un par de semanas publicamos un vdeo del diseo de una web desde cero con Photoshop . El anterior vdeo estaba a cmara rpida, por lo que no era muy didctico.

Por solicitud de los usuarios, y por sentido comn para seguir nuestra lnea editorial, de ayudar en lo posible al aprendizaje de las personas que leen DesarrolloWeb.com, hemos editado y republicado un vdeo en el que mostramos el proceso de diseo de una web con Photoshop.

Ahora lo hemos publicado en Dailymotion, que permite subir vdeos en alta definicin y de cualquier duracin. En esta ocasin el vdeo tiene 31 minutos, todava un poco acelerado, porque as se hace ms ameno y sigue siendo igual de didctico. Hemos agregado una locucin para explicar cada cosa que vamos realizando en el diseo de la web.

As pues, esperamos que de este vdeo podis aprender todava un poco ms los procesos creativos para crear una plantilla de una web con Photoshop.

Podemos descargarnos esta plantilla en el articulo "Descargas de la plantilla Photoshop del manual Diseo desde cero"

Ahora , si os ha interesado, quizs queris pasar al siguiente paso, que es crear una pgina web a partir de esta imagen, con HTML y CSS. Lo hemos explicado en el artculo: Maquetacin CSS con 960 Grid System, caso real.

Maquetacin CSS con 960 Grid System, caso real

Desarrollo de la maquetacin de una web con 960 Grid System, paso a paso y desde cero, a partir de una imagen diseada con Photoshop. Con vdeotutorial.

Hasta el momento en el Manual de 960 Grid System publicado en DesarrolloWeb.com hemos conocido las generalidades de este framework CSS y hemos aprendido sus clases CSS bsicas y las reglas fundamentales para crear los espacios de una web a partir de las cajas disponibles en diversos tamaos. En el ejemplo del artculo anterior, pudimos ver cmo se maquetara una web con 960 Grid, pero el diseo en pruebas era extra-rudimentario.

Ha llegado el momento de hacer un caso prctico real de maquetacin CSS con 960 Grid System, que vamos a abordar en este artculo y los siguientes del manual. En este ejercicio aprenderemos a maquetar un caso real de una web con un aspecto medianamente decente. La web en s es ficticia, pero tiene todas las caractersticas de lo que sera una web real, con una maquetacin tpica de los blog actuales.

Para ayudar a que las personas a entender el proceso de creacin de una web desde cero, hemos apoyado los temas que vamos a tratar con vdeo, en el que veis todo el proceso de creacin de los ejemplos, tal como los hemos ido desarrollando para poder escribir luego estos artculos. Es un trabajo doble, porque toca escribir los artculos y luego crear y editar el vdeo, pero merecer la pena. O al menos eso deseo.

Diseo de la web con Photoshop

Lo primero que habra que hacer es disear una web. Cada uno puede hacer el diseo que desee, pero para comenzar tenemos la ayuda de unas plantillas que nos proporciona 960 Grid. Para ello debemos descargar el framework CSS y en el archivo ZIP que obtendremos encontraremos en el directorio "templates" los ficheros grficos en varios formatos para comenzar el diseo ayudados por unas guas, que marcan las columnas que tenemos disponibles. Con estos espacios definidos tenemos una facilidad adicional para hacer una creatividad que funcione luego bien, a la hora de desarrollarla en HTML y CSS. Tenemos plantillas para comenzar el diseo en programas tan populares como Fireworks o Photoshop.

Nosotros hemos realizado el diseo de una web con Photoshop, que vamos a utilizar para hacer esta prctica. Quien domine Photoshop puede que no le interese mucho ver cmo hemos diseado la web, pero para quien no domine el programa, o para quien quiera ver nuestras costumbres a la hora de disear una web, o cmo apoyarse de las plantillas que ofrece 960 Grid System, os recomendamos la lectura de los siguientes artculos, que van tambin acompaados por vdeos para demostrar y luego explicar lo que vamos haciendo.

Vdeo demostrativo del diseo de la web a cmara rpida Vdeo con explicaciones del diseo de una web con PhotoshopEl aspecto de nuestra web, que vamos a maquetar con 960 Grid System intentando ser fieles a la imagen conseguida, es el siguiente:

Podemos descargarnos esta plantilla en el articulo "Descargas de la plantilla Photoshop del manual Diseo desde cero"

Maquetacin de una web con CSS y 960 Grid System

Ahora que hemos visto la manera de disear una web, viene la parte que muchos de los lectores haban pedido: Convertir la imagen de Photoshop en una pgina web. Lo veremos por pasos, porque la pgina es suficientemente grande para ocupar varios artculos y vdeos.

En el primer paso, que veremos en este artculo, vamos a crear la cabecera de la pgina. Para ilustrarlo de manera grfica he colocado un vdeo al final de este texto, en el que se puede seguir el proceso que hemos realizado para crear la cabecera. Como tenemos el vdeo, comentando cada uno de los pasos, simplemente voy a colocar aqu las explicaciones bsicas y el cdigo fuente que hemos creado.

1) Importar las hojas de estilos del Framework:

En nuestra pgina, el primer paso ser enlazar con las hojas de estilos del navegador, aparte de escoger un DOCTYPE para XHTML adecuado.

Los Link con las hojas de estilos son los siguientes. Leer referencias de artculos anteriores para ms informacin.

Las dos primeras hojas de estilos son opcionales, pero vienen bien porque definen estilos bsicos, que se aplicarn a todos los navegadores, para que nuestras pginas se vean igual en cualquier cliente web. El tercer archivo de estilos 960.css es el propio Framework, con las definiciones de las clases para crear los contenedores y los distintos tipos de cajas.

2) HTML

Para crear la cabecera tengo un titular y un buscador, ambos en la misma fila. En la cabecera tengo un titular que ocupar 6 columnas de espacio. Luego habr 2 columnas de hueco y a la derecha del todo una caja con 4 columnas de espacio, donde aparecer el buscador.

Como se puede ver, todo se tiene que meter dentro de un container_12, al que le he puesto id="cabecera", para luego aplicarle estilos.

Dentro del container_12 tenemos la primera caja con id="titulogeneral", que es el espacio para el titular, con class="grid_6 suffix_2", que son las 6 columnas de ancho y el espacio en blanco despus de 2 columnas.

Luego tenemos la caja id="buscador" con 4 columnas de anchura.

6 columnas + 2 espacios + 4 columnas = 12 columnas del container_12

Hay que fijarse que, despus de las columnas que hacen esa fila de la cabecera, todava dentro del container_12 se ha colocado una capa DIV con class="clear". Esto es esencial porque los grid_xx tienen un float y sin ese clear podramos tener un problema con los fondos de los elementos que hay debajo de las cajas.

3) CSS

Ahora podemos ver los estilos que hemos colocado a la pgina por el momento.

BODY{background-color: #2b1f1f;}#cabecera{background: #fff url(images/fondo-cabecera.gif) repeat-x;}#titulogeneral img{padding: 28px 0 0 0;}#buscador{background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;text-align: right;}#buscador input{font-size:8pt;}#buscador form{padding: 40px 30px 6px 0px;}

En el cuerpo hemos colocado por ahora simplemente un color de fondo.

En la cabecera hemos colocado como fondo el degradado que habamos creado en el diseo, que se repite en la horizontal con el atributo repeat-x.

A la imagen que hay dentro de la caja titulogeneral le hemos colocado un padding para que haya un espacio por arriba.

Al buscador le hemos colocado un fondo con una imagen para conseguir el borde redondeado y hemos alineado el texto a la derecha.

Los campos INPUT que hay en el buscador los he estilizado con una letra menor, para que tambin se reduzcan de tamao.

Al formulario del buscador le coloco tambin un poco de padding para que se site donde quiero. Es especialmente importante el padding 40px que se ha colocado por la parte de arriba (top), porque con ello consigo empujar el formulario de bsqueda hacia abajo, para que la capa cabecera acabe justo donde termina el buscador. As consigo el efecto que el buscador est alineado verticalmente en la parte de abajo de la cabecera.

Con todos estos estilos CSS y el HTML anterior la pgina queda maquetada tal como podemos ver en este enlace.

Vdeo de la maquetacin web con HTML y CSS utilizando 960 Grid System

Para acabar, os dejamos un vdeo donde se ve el proceso relatado en este artculo, comentado y explicado para que se pueda entender bien.

Maquetacin CSS con 960 Grid System, Parte II

Continuamos mostrando un caso real de maquetacin con CSS usando el framework CSS 960 Grid System.

Estamos maquetando una web con CSS, para mostrar a todos los lectores de DesarrolloWeb.com el proceso de creacin de una pgina web con el framework CSS 960 Grid System. Esta prctica la estamos haciendo desde cero y explicando paso por paso los detalles, no slo de la maquetacin de la propia web, sino tambin las tcnicas que utilizamos para aplicar estilo a diversos componentes de la pgina, como cajas de contenido, listas, etc.

El presente artculo forma parte de una serie de artculos que se puede encontrar en el Manual de 960 Grid System . En anteriores entregas ya comenzamos a maquetar este caso real de pgina web, con un aspecto bastante profesional. Todo el proceso lo estamos grabando en vdeo, para que cualquier lector pueda adems ver en su ordenador cmo hemos realizado nosotros esta prctica.

En el presente artculo veremos la maquetacin de la parte principal del cuerpo de la pgina y llegaremos hasta el punto que se puede ver pulsando este enlace. Recordemos que la cabecera de la pgina ya explicamos cmo se haca en el artculo anterior .

As pues, comencemos a ver cmo hemos realizado este trabajo, aunque cabe decir que las explicaciones en texto de este artculo sern bien bsicas, puesto que todo el proceso explicado se puede ver en el vdeo que hemos publicado y que se encuentra disponible al final de este artculo.

Maquetacin del Cuerpo

Todo lo que vamos a colocar en el cuerpo se tiene que incluir dentro de un contenedor. Cuando hicimos la cabecera se cre ya en un contenedor, pero ahora como el cuerpo tiene otros estilos, por lo que nos conviene crear una nueva capa DIV para el cuerpo, que har las veces de contenedor y tal como hemos hecho en otras ocasiones utilizaremos la class="container_12". Dentro del contenedor colocaremos, como venimos explicando en este manual, varias divisiones o espacios que se definirn a travs de elementos DIV con clases grid_xx, siendo xx el nmero de columnas que utiliza esa divisin.

La maquetacin principal del cuerpo, con el contenedor y las cajas grid_xx sera la siguiente:

Aqu va el navegador Aqu va la columna de la izquierda del cuerpoAqu va la columna de la derecha del cuerpo

Lo primero que hemos realizado en este artculo es la barra de navegacin que hay debajo de la cabecera. Lo interesante de esta barra de navegacin es que la hemos hecho con listas. Las listas nos vienen muy bien a la hora de maquetar con CSS, porque son muy verstiles para presentar elementos uno detrs de otro.

El navegador lo colocamos en una fila de manera independiente, con una caja grid_12, porque no hay nada ms en esta fila.

La parte de la izquierda del cuerpo la hemos definido en un grid_8, porque tiene 8 columnas de anchura. Dentro colocamos varias noticias de portada en unos recuadros bastante sencillos, a los que les hemos asignado un borde y un fondo plano.

La parte de la derecha del cuerpo es la que ms detalles tiene. La hemos colocado con un grid_4, para que ocupe 4 columnas de anchura, tal como se dise en Photoshop y para completar el espacio disponible en el container_12 (8 columnas de la parte de la izquierda + 4 columnas de la derecha = 12 columnas del container_12). Se ha creado un tipo de caja, con un titular y un cuerpo que tiene un degradado. Dentro los contenidos son diversos y tienen a su vez diversas clases de estilos CSS para conseguir el aspecto que andbamos buscando. Nota: Para las explicaciones, recordar siempre que hay un vdeo al final del artculo donde se ve paso a paso la maquetacin y se dan las razones por las que hemos optado por esos estilos CSS y todas las guas para conseguir el resultado final. Un vdeo vale ms que mil palabras ;)

Cdigo HTML y CSS del ejemplo

Ahora coloco aqu el cdigo HTML y CSS del ejemplo, tal y como est desarrollado hasta el momento:

Diseo desde cero

BODY{background-color: #2b1f1f;color: #FFF;font-family: verdana, arial, helvetica;}A{color: #bce7e4;}#cabecera{background: #fff url(images/fondo-cabecera.gif) repeat-x;}#titulogeneral img{padding: 28px 0 0 0;}#buscador{background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;text-align: right;}#buscador input{font-size:8pt;}#buscador form{padding: 40px 30px 6px 0px;}#cuerpo{background-color: #000;}#navegador{font-size: 12pt;margin-top: 10px;margin-bottom: 10px;}#navegador a{color: #FFF;font-weight: bold;text-decoration: none;}#navegador ul{list-style-type: none;margin: 0;padding: 0;}#navegador li{float: left;margin: 0 20px 0 0;padding: 0;}.itemportada{border: 3px solid #3b1010;background-color: #3c2a2a;padding: 10px;margin-bottom: 10px;overflow:hidden;}.imagenitemportada{float: right;margin-left: 10px;}.tituloitemportada{font-weight: bold;font-size: 120%;margin-bottom: 6px;}.autoritemportada{font-size: 8pt;margin-bottom: 4px;}.introitemportada{

}.comentariositemportada{font-size: 8pt;margin-top: -10px;}.titlateral{background-color: #4b0d0d;padding: 10px;}.cuerpolateral{background: #612323 url(images/fondo-cuerpo-lateral.gif) repeat-x;overflow: hidden;padding: 10px 7px 10px 7px;margin-bottom: 15px;}.imagencuerpolateral{float: left;}.cuerpolateral form{margin: 0px;}.cuerpolateral form span{display: block;margin: 5px 0 5px 0;}.textocuerpolateral{margin-left: 110px;}.cuerpolateral input{font-size: 8pt;}.cuerpolateral ul{list-style-type: none;margin: 15px 0 0 0;padding: 0;}.cuerpolateral li{padding: 0 0 0 20px;margin: 0 0 6px 0;background: transparent url(images/estrellita.png) no-repeat scroll 0 4px;}.nube{font-size: 10px;text-align:center;}.nube span.etiqueta1{font-size: 100%}.nube span.etiqueta2{font-size: 120%}.nube span.etiqueta3{font-size: 140%}.nube span.etiqueta4{font-size: 160%}.nube span.etiqueta5{font-size: 180%}.nube span.etiqueta6{font-size: 200%}.nube span.etiqueta7{font-size: 220%}.nube span.etiqueta8{font-size: 240%}.nube span.etiqueta9{font-size: 260%}.nube span.etiqueta10{font-size: 280%}.nube a{color: #fff;text-decoration: none;}

Portada

Secciones

Tutoriales

Recursos

Contacto

Ttulo de un artculoDesarrolloWeb.comLorem ipsum dolor sit amet...Curabitur placerat. Vivamus rhoncus est...3 comentariosOtro artculo destacado en la portada con titulo mayorDesarrolloWeb.comNullam enim nulla...sagittis convallis...8 comentarios>> Ver contenidos anterioresNombre:Clave:

Todos los contenidos

Artculos en RSS

Noticias en RSS

htmldesarrollojavascriptaspphpdiseo webservidoresjavaapachepromocin webajaxrecursosdhtml

Podemos ver este cdigo en marcha en una pgina aparte , para apreciar el resultado de la maquetacin CSS creada hasta el momento.

Vdeo de la creacin de este ejemplo con CSS y 960 Grid

Ahora os ofrecemos el vdeo que hemos grabado mientras realizbamos esta maquetacin CSS. Como veris, est repleto de explicaciones y detalles que resultarn interesantes para aquellos que quieran saber cmo, partiendo de una imagen de Photoshop, crear una pgina web, maquetada con CSS. Por supuesto, aprenders tambin a usar el framework 960 Grid System, que es de lo que se trata en este manual.

Maquetacin CSS, fin del ejemplo

Terminamos de crear en XHTML y CSS la plantilla del diseo de ejemplo para mostrar el funcionamiento de 960 Grid System, con vdeo incluido para ilustrar el proceso.

El objetivo de este artculo es terminar con las explicaciones y demostracin de uso del framework CSS 960 Grid System. En pasados artculos ya explicamos qu es 960 Grid System y comenzamos a crear un diseo de muestra que hemos maquetado paso a paso, en varios artculos del Manual de maquetacin web con CSS y 960 Grid.

El diseo de la web que estamos maquetando se puede ver aqu. En artculos anteriores hemos podido llegar hasta este punto. Ahora nos queda maquetar la parte final del cuerpo de la pgina y adems, vamos a crear un pie de pgina para completar nuestro ejercicio de diseo web. Si lo deseas, puedes ver el aspecto final que tendr el ejemplo que estamos construyendo.

Adems, para ilustrar de una manera grfica y visual a los lectores de DesarrolloWeb.com, hemos publicado todo el proceso de maquetacin en vdeo, lo que esperamos sirva para que esta prctica de diseo web se pueda entender por cualquier persona. Al final de este artculo veris el vdeo de esta ltima etapa, que tambin contiene muchas explicaciones que sern sin duda tiles para entender cmo se ha realizado este ejemplo de maquetacin web.

Parte final del cuerpo de la pgina

La parte final del cuerpo la vamos a colocar en el contenedor general del cuerpo (que habamos colocado antes con un DIV con la clase CSS container_12. Ver el anterior artculo). En ella debemos colocar un titular, y ms abajo 3 contenedores para 3 recuadros distintos. El titular lo colocamos ocupando todo el ancho disponible, pues es el nico integrante de una fila, en una caja grid_12. Crearemos luego las divisiones para colocar los 3 recuadros de abajo, en DIV con clases CSS grid_3, grid_3 y grid_6. Y recordemos que despus de cada fila hay que colocar un DIV con class="clear".

El esquema principal sera el siguiente:

Titular que ocupa todo el ancho disponible.

Primera caja del fin del cuerpo, anchura de 3 columnas.

Segunda caja del fin de cuerpo, con anchura de 3 columnas.

Tercera caja, con anchura de 6 columnas.

Con esta estructura conseguimos que el framework 960 Grid System cree unos espacios como los que necesitbamos. Ahora se trata de introducir contenidos en esos espacios para conseguir el diseo de cajas que habamos planeado en Photoshop.

Dentro de las divisiones creadas con 960 grid colocamos a su vez otras divisiones para albergar los distintos recuadros. Esas partes me las voy a saltar en este texto, pero podis ver cmo se crean en el vdeo que acompaa al artculo. Pero lo que s quiero decir es que todos los estilos para formatear estas cajas se deben colocar, no en las capas que tienen class grid_x, sino en los DIV que metemos dentro de estas.

Maquetamos el pie de pgina

Al final de este diseo debemos colocar un pie. En el diseo que habamos hecho con Photoshop no llegamos a definir el aspecto y los contenidos del pie, pero nosotros vamos a crear uno sobre la marcha para que nuestra pgina quede completa.

Para empezar, hemos decidido colocar el pie en un nuevo contenedor con class="container_12", pues le queremos asignar estilos distintos de los que tiene el cuerpo de la pgina.

Luego, vamos a crear dos divisiones en el pie, una con 8 columnas de anchura y otra con 4 columnas. Y para acabar esta fila el ya tpico DIV con class="clear". La estructura ser la siguiente:

Enlaces del pieLogotipo del pie

En la divisin de 8 columnas colocaremos los enlaces del pie de pgina y en la parte con 4 columnas de anchura colocaremos un logotipo del sitio web. Para ver cmo asignar estilos a estos dos elementos, os referimos al vdeo, donde lo podris ver todo con detalle.

CSS y XHTML completos de esta ltima parte del diseo

Ahora voy a colocar el cdigo HTML de esta ltima parte del diseo, para que se vea no slo la estructura de cajas conseguida con 960 Grid System, sino tambin las etiquetas que utilizamos para maquetar nuestro ejemplo.

La ltima parte del cuerpo:

Este primer DIV abre el cuerpo. Pero aqu falta todo el cdigo de la primera parte del cuerpo que vimos en el artculo anterior.

+ Ttulo de una noticia
+ Otro ttulo de prueba
+ Ms cosas de inters...
+ La ltima noticia
[...]Ttulo de una noticiaLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nulla, condimentum ut, adipiscing in, rutrum ut, neque.
Ver ms.

Y ahora muestro el cdigo completo del pie de pgina.

Portada | Acerca de | Contacto | Copyright

Los estilos CSS que hemos definido para conseguir que estos contenidos se muestren como queramos son los siguientes:

.titcaja2{margin: 10px 0 0 3px;}

.cuerponoticias{line-height: 20pt;}.otrasecciontit{margin-bottom: 3px;font-weight: bold;}.cuerpocaja2{border: 2px solid #929191;padding: 10px;}.cajacomunidad{background-color: #333333;padding-right: 0px;padding-left: 2px;}#enlacespie{font-size: 8pt;margin: 6px 0 10px 0;}#enlacespie a{color: #fff;}#logopie{margin: 8px 0 10px 10px;}#pie{background-color: #260505;}

El resultado final de este diseo lo podemos ver en una pgina aparte.

Vdeo del final de la maquetacin CSS

Y ahora os dejamos con el vdeo explicado paso a paso para terminar esta prctica de diseo web. Son casi 50 minutos intensivos de maquetacin y aplicacin de estilos CSS. Esperamos que os guste y que os conteste todas las dudas que puedan haber quedado al leer las anteriores lneas.

diseño web desde 0 photoshop css maquetacion

Documents