Crear una plantilla web en photoshop

shutdownArchivos .PSD, Tutoriales 5 Comentarios

Datos del tutorial:

• Programa: Adobe PhotoShop CS3
• Dificultad: Media
• Tiempo de realización: 1,5 Horas

Vista previa de la plantilla que vamos a crear:

Paso 1 – Configurar el documento de photoshop

Lo primero es abrir adobe photoshop y crear un nuevo documento con las siguientes medidas: 960px de ancho y 800px de alto, aunque estas medidas no son fijas sino que dependen del contenido que necesitemos incluir después en la página.

Lo siguiente es configurar las guías para tener claro los límites de la plantilla.

* (Para añadir guías al documento debemos ir al menú Ver > Mostrar reglas y aparecerán unas reglas que podremos configurar para que se muestren en píxeles, centímetros, etc. Tras configurar estas reglas solo tenemos que pulsar sobre ellas y manteniendo pulsado arrastrar el ratón al documento y aparecerán las Guías).

Una vez tengamos las guías sobre el documento como se muestra en la imagen, tenemos que ir a Imagen > Tamaño de lienzo y ampliar el documento a 1100 píxeles por 1000 píxeles. Como veréis a continuación con esto creamos un espacio alrededor de nuestro sitio web para poder crear el fondo.

Ahora rellenamos el fondo de blanco y renombramos la carpeta para dejarlo ordenado.

Paso 2 – Creación del fondo:

Para este tutorial hemos escogido este motivo de mar, así que el fondo será con estos tonos de azul.

Para realizarlo usaremos la herramienta degradado en una nueva capa, elegimos los tonos de azul que vayan con este motivo, aunque como siempre esto es un poco al gusto de cada uno.

Como veis hemos borrado con cuidado los bordes del motivo y con mucho cuidado lo hemos integrado en el degradado sin que se note.

Paso 4 – Crear el menú principal translucido:

Este paso es el más importante del tutorial ya que sobre esta estructura que vamos a crear se basará toda la plantilla.

En primer lugar cogemos la herramienta de Rectángulo redondeado, y seleccionamos el radio de 20px para conseguir ese efecto de esquinas redondeadas. Una vez lo hemos seleccionado lo aplicamos ocupando totalmente las medidas de las guias.

Ahora para hacer el efecto de translucido tenemos que irnos los efectos de capa, donde aplicaremos la siguiente configuración:

Paso 5 – Configuramos las guías para contenido:

Ahora añadimos unas guías para encuadrar correctamente el contenido que vamos a introducir en la plantilla y así facilitar la tarea.

Las guías son de 40 píxeles hacia dentro:

Paso 6 – Barra de navegación:

Para hacer el efecto que tiene el menú de navegación solo tenemos que cortar un trozo de la capa del menú principal y dejar a los estilos de capa hacer si trabajo.

Para hacer el recorte nos vamos a la herramienta de forma rectangular y en las propiedades de dicha herramienta aplicamos un radio de 10 px de radio, para que al aplicar la selección en la esquina superior derecha del menú consigamos este resultado:

Una vez tenemos este resultado solo necesitamos rellenarlo con el texto de los distintos apartados. Sobretodo tener cuidado al escoger la tipografía y procurar que le quede bien al diseño que queréis hacer.

Ahora le damos un efecto muy sutil al texto para conseguir el efecto que veis en la imagen anterior. Para ello nos vamos a los estilos de capas y aplicamos lo siguiente:

Con esto ya tendríamos el menú de navegación terminado, a falta del efecto focus del ratón, o lo que es lo mismo, cuando pasamos el ratón por las letras.

Paso 7 – Efecto de foco en el menú

Para conseguir el efecto de foco creamos una forma rectangular con el color que nos guste y la situamos por debajo del texto, después nos vamos a los estilos de capas para añadir algunos estilos.

Una vez aplicados estos estilos, ya podremos ver como quedaría sobre el botón el efecto de foco o focus.

Pasamos a realizar el último efecto sobre la forma ya terminada. Para ello seleccionamos la forma eliptica y la rellenamos con un color negro, la duplicamos y las situamos una encima de la imagen y otra por debajo:

A continuación le aplicamos un efecto de desenfoque gaussiano (Filtro> Desenfoque> Desenfoque Gaussiano) y tras esto hacemos una selección de la figura por la mitad y pulsamos suprimir:

Repetimos el proceso con la otra figura y ya tenemos terminada nuesto menú de navegación.

Paso 8 – Logo en el encabezado

Antes de terminar el encabezado debemos añadir el logotipo sobre la interfaz, yo en este caso he utilizado la misma fuente que en el menú de navegación, hago una selección de la figura y elimino dicha selección de la interfaz principal.

Ahora pulsamos suprimir y este seria el resultado, vemos como actúan los efectos de esta capa.

*Nota: Si tenemos algún tipo de logotipo podemos integrarlo también al lado del texto que hemos creado, intentado integrarlo en el diseño de la web.

Paso 9 – Interfaz de artículos destacados

Ahora vamos a crear el sitio donde van a ir aquellos artículos que queramos destacar o que queramos mostrar como principal. Para ello lo único que tenemos que hacer es seleccionar la herramienta de forma redondeada y aplicarle un radio de 10 píxeles.

Tras esto hacemos una selección sobre el menú principal y lo borramos.

A continuación seleccionamos la herramienta de selección con la forma de óvalo. Con la herramienta pincel y el mismo color del menú principal pintamos el óvalo.

Podemos observar como se aplica el efecto de la capa sobre los óvalos, dando así el efecto deseado.

Por último añadimos una flecha negra en el interior del óvalo y lo duplicamos a ambos lados.

Paso 10 – Crear contenido principal

En primer lugar calculamos tres columnas con su contenido para que éste quede centrado en todas.

Una vez observamos cual es la mejor estructura podemos empezar a rellenar con contenidos, en este caso mi contenido es ficticio, pero en un caso real debéis pensar que contenidos hay que poner en el index de la web.

Como veis en la imagen hemos colocado el texto a falta de alguna imagen relacionada con lo que vamos a escribir.

Cuanto más originales seáis insertando imágenes más exclusiva será vuestra web. En mi caso junto a redes sociales he compuesto una tira de las redes sociales a las que tiene acceso la web.

Paso 11 – Leer más y barras separadoras

No olvidemos crear un botón para cada artículo con el que podamos ampliar la pequeña información que damos en el index. Para ello, lo que hemos hecho es escribir “leer más” y aplicarle unos efectos de capa para diferenciarlo del contenido.

Aquí podeis ver los efectos de capa que les hemos aplicado:

Ahora solo debeis duplicarlo y colocarlo debajo de cada contenido.

Además para separar las secciones de la web hemos cortado la interfaz del menú principal con unas pequeñas franjas que actúan como separadores de contenidos.

Son sencillas de hacer, únicamente debemos seleccionar y darle a suprimir.

Paso 12 – Rellenar el sitio de imágenes y textos

Finalmente solo tenemos que rellenar el contenido principal de la plantilla psd y así  quedará terminada y lista para el siguiente paso, maquetarla y darle funcionalidad.

Conclusión

Como habéis podido comprobar no hemos aplicado trucos muy complejos ni efectos complicados pero si hemos conseguido una plantilla en photoshop bastante bonita y original.

Espero que las técnicas utilizadas en este tutorial lo podáis aplicar a vuestros propios diseños.

Además podeis descargar la plantilla en psd, la imagen de fondo, y los distintos iconos que se han usado para esta web.

Plantilla PSD | Descargar