Crear un diseño web elegante en Photoshop

A través de ArtBox 7 me encontré este sencillo tutorial para crear una web con estilo, espero que os sea util y os guste:

Hello and welcome to another tutorial here on Today I will create a stylish web layout and I think this one can fit pretty well for a furniture website
To create a similar web layout you will need
1. Photoshop
2. Some vector icons from Complete Designer Set
Let start the tutorial!
Open Photoshop and create a new document (Ctrl + N) with the following dimensions: 1020 by 1020 px.
Once you have created this, select rectangle tool and create 3 shapes.


For the first one I have used this color (#5d3919), for the second one I have used (#ececec) and for the third one (#5d3919)

Step 1 – Creating the logo and navigation

First with type tool I will add the logo (here is nothing fancy, just use type tool and write your desired text for logo)


Next I will select rectangle tool and I will make this shape. RGB color used: #ececec


Then I will apply the following layer styles:

My result


With type tool I will add the links for navigation
My result


Step 2 – Creating the header

First I will select Rectangle tool and I will create this shape. Mine has this dimensions: 868 by 305px


Next I will apply the following layer styles:


My result:


Then I will need to add an image. I have found here some really nice images.
So I will place an image above our shape and in the layer palette I will right click on the image and I will choose “Create Clipping Mask”


Here is my result:


Well the header is finished now

Step 3 – Creating the content area

This area is really easy to create. With type tool add some text and from our Complete Designer Set, you will find some really nice icons related to interior design

Next for the footer you will need to copy the logo (make it a little bit smaller) and place it at the buttom.
Here is my final result for this web layout:



Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de

Estás comentando usando tu cuenta de Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s