Bienvenidos a otro de mis tutoriales!
Les voy a pedir que para este tutorial, las dudas las dejen en comentarios.

Lo que vamos a hacer esta vez es armar un diseño web profesional y, en mi caso, será para una comunidad donde se comparte música. No es un diseño complicado, en realidad es bastante simple. Este se divide en cuatro secciones:

Vamos a ir por orden. Primero que nada tenemos que abrir un documento nuevo. Las medidas que use yo para este diseño fueron de 960×900 px.
Una ves que ya tengamos abierto el documento vamos a hacer la sección del header (marcada con negro). Para esto vamos a crear un cuadrado de 97×900 o de 97×97.Una forma fácil de hacer este cuadrado tan exacto es, seleccionando la herramienta de selección rectangular “Rectangular Marquee Tool” modificamos los valores que podemos encontrar en la parte superior por los  siguientes:

Si usaron la selección 97×900 ya pueden rellenarla de cualquier color y colocarla en la parte superior del documento.
Si usaron la selección 97×97, rellenen la selección con cualquier color y ubíquenla en la parte superior del documento. Luego presionen Ctrl+T y estírenla hacia los costados para que ocupe todo el ancho.
Cuando tengan listo el rectángulo, pueden cambiarle el color al que ustedes deseen. El que use yo para este diseño fue: #4c4c4c.

Ahora les voy a explicar como hice los elementos que contiene esta sección. Voy a empezar de izquierda a derecha (en las demás secciones también). Empecemos con el banner de publicidad.

Bueno, es un banner super simple, pero elegante. Las medidas ya las dice en la imagen, el color de relleno que use fue #eaeaea, tiene un borde de 1px color blanco (#ffffff) en modo interior y las letras son color negro (#000000) con la opacidad al 50%.

Un sencillo y corto tutorial que enseña a crear un header con negación muy simple pero muy elegante.

Descargar Tutorial Header A1.

El primer tutorial de interfaces que hago.
En este tutorial enseño a crear una barra de negación para sitios web, es muy fácil y este es el tutorial mejor explicado y con mas cantidad de imágenes que hay en el sitio.

Descargar Tutorial Navegación A1.