Sweeap

RSS feed

deICE

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, y visualmente aceptable. 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%.

La letra del logo también es muy simple, el nombre de la fuente es “BTSE + PS2 FONT” la cual esta subida en el sitio en la sección de Recursos para que puedan descargarla.

ICE esta escrito con color celeste: #93cfe6 y tiene un simple reflejo color blanco al 30 – 40% de opacidad.

Luego tenemos la navegación. Como todo, es bastante simple.

Simplemente tomando la herramienta pluma y haciendo tres puntos se hace la forma. No voy a pasar a explicar este tipo de cosas para que el tutorial no se haga demasiado extenso. El que no sepa como hacerlo me pregunta o ve si prefiere la navegación de otra forma.
La letra es Verdana, con 10 – 12 espacios entre cada palabra y lineas negras en 30% de opacidad hacen de separadores.

Vamos a pasar a la sección marcada con rojo, que prácticamente es lo que le da el estilo al diseño.

Si estaban esperando algo complicado de hacer, esto tampoco lo es.
El icono, lo pueden encontrar en Sweeap como “Play PSD”. Para hacer que se vea congelado, simplemente lo seleccione y en una capa nueva agregue nubes (render, filter, clouds). Esta capa la puse en hard light y le agregue un poco de ruido (filter, noise, add noise). Para terminar, un filtro de fotografía frío con opacidad al 50%.

La letra tampoco tiene nada en especial, el titulo esta escrito con celeste #31a1c8 y un simple reflejo blanco al 20 – 30% de opacidad. Y la letra de texto esta escrita en un gris claro #95a1a5.

Y para terminar, el fondo es un degrade celeste

con una capa de un brush nombrado “Ice Abstract” el cual también lo pueden encontrar en la sección de recursos. Esta capa en una opacidad de 60%.

Ahora lo que vamos a ver en la siguiente página es el contenido, marcado con azul.

Esta sección es completamente libre. Pueden escribir lo que quieren de la forma que quieran. Yo dividí el contenido en cuatro modulos y escribí con letra Verdana 12 (que es la que recomiendo por su legibilidad).
Les muestro mas o menos como me quedo a mi.
La parte de arriba es una bienvenida, en la parte de abajo puse un modulo para los ultimos 10 temas musicales subidos, en el centro los ultimos 20 usuarios registrados, y a la derecha las ultimas 5 noticias del sitio.
Los colores de la letra son:
Gris: #d3d3d3
Celeste: #a9d6e7

Acuérdense de poner todas las dudas en comentarios, para que vallan quedando para los demás.

Para terminar, el footer o pie de pagina (marcado en amarillo).
El color de fondo es el mismo que el del header o cabecera. La letra, Verdana 12 color blanco. El logo es exactamente el mismo, aunque todo color blanco. Nada complicado a este punto del tutorial.

Gracias por leerme una vez mas!
Espero que no les haya resultado difícil. No les quiero repetir lo de las dudas, solo que si tienen, háganla sin dudarlo. Saludos!!

Descargar deICE PDF.

Suscribite a nuestros feeds vía email para recibir los nuevos tutoriales a tu email!