Para este tutorial necesitaremos: Photoshop, Dreamweaver, y El Front page. Tambien necesitaremos un wallpaper de tu preferencia que sera la base de nuestro layout.

 

1- Lo primero que van   a hacer es crear una carpeta donde van a guardar todo lo que tenga que ver con el layout, porq sino les va a salir mal las cosas, todo debe estar junto, para mas facil acceso. Mi carpeta la abri en mis documentos con el nombre de layout123.

2-Abrimos nuestro Photoshop, y buscamos el wallpaper que elegimos para este layout, y con la herramienta de seleccion hacemos las secciones.

 

asi, cada seccion sera un cuadro, y lo debes dibujar donde desees, en este caso yo hare un cuadro para el contenido, y dos cuadritos a la izquierda uno para los affiliates, y otro para my buttons.

3- Ahora con el cuadro seleccionado vamos a darle un poco de smooth, que hace que nuestro cuadro se vea un poco redondo, si no quieres esto salta este paso, aunque esto lo hace ver mejor.

 

y ponemos 5 en la ventana que nos aparecera

 

Nos quedara asi:

 

4- Luego lo rellenan de blanco, aqui abajo les enseno como coloque las secciones:

5- Si pusiste cada seccion en un layer, como hice yo, por si cualquier error podamos borrar un layer, ya que tengas todas las secciones como deseas ve a layer/merge down hasta que este solo las secciones juntas, ojo: el background o wallpaper no les hagan merged.

 

6- En el layer de las secciones vamos a layer/ layer style/Blendig options

Vamos a darle un color overlay el que deseen (de preferencia que convine con el wallpaper), y si es de su preferencia les agregan un stroke.

7- Vamos al layer pallette y le bajamos la opacity a la deseada, en este caso me gusto como quedo en el 55 %.

 

8- Vamos a hacer el menu, este menu lo haremos aqui en el photoshop, asi que vamos a la herramienta de texto. y escribimos lo que deseamos.

 

9- Le daremos un style a el menu, layer/ style/blendig options

Marcan drop shadow y no le cambien los settings del default, ahora marquen el stroke, y denle el color que deseen y el tamano que ustedes crean correcto, a mi me gusta el 1 o 2.

Despues de eso quedara algo asi:

 

10- Ahora le haremos slice, a el layout, si las partes estan en un layer diferente se van a el layer correspondiente y hacen slice en la seccion, al texto tambien les hacen slice pues sera nuestro menu, hacen slic a cada palabra o mejor dicho si es recursos graficos, hacen slice a recursos graficos, etc.

 

Seccion del contenido

Todas las secciones

 

11- Al fin el ultimo paso en ps, guardar van a file/ save for web

 

 

 

Este es la primera parte. la proxima se tratara ya en  FP, para ponerle todo lo de la paginas.